/* ═══════════════════════════════════════════
   Ghawy — Main Styles
═══════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
        ROOT VARIABLES — Ghawi Pure-Black & Neon-Green
      ════════════════════════════════════════════════════════ */
:root {
    --bg: #000000;
    --bg-card: #0a0a0a;
    --bg-raised: #111111;
    --bg-glass: rgba(0, 0, 0, 0.88);
    --gold: #c1ff11;
    --gold-light: #d4ff4a;
    --gold-dark: #8fbf00;
    --gold-glow: rgba(193, 255, 17, 0.25);
    --gold-subtle: rgba(193, 255, 17, 0.07);
    --gold-border: rgba(193, 255, 17, 0.2);
    --green: #C1FF11;
    --green-glow: rgba(182, 185, 16, 0.3);
    --red: #ef4444;
    --red-glow: rgba(239, 68, 68, 0.3);
    --white: #ffffff;
    --off-white: #f0f0f0;
    --muted: #555555;
    --muted-light: #aaaaaa;
    --border: rgba(255, 255, 255, 0.08);
    --border-gold: rgba(193, 255, 17, 0.2);
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
}

/* ════════════════════════════════════════════════════════
        RESET & BASE
      ════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: "Cairo", sans-serif;
    background: var(--bg);
    color: var(--white);
    direction: rtl;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a,
button {
    touch-action: manipulation;
}

body::before {
    display: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 40% at 15% 20%, rgba(0, 100, 143, 0.07) 0%, transparent 65%),
        radial-gradient(ellipse 50% 30% at 85% 70%, rgba(0, 109, 143, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse 40% 25% at 50% 100%, rgba(0, 86, 143, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

section,
header,
footer,
.full-stripe {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 22px;
}

/* Wider container for the Courses / Chapters section */
.chapters-section .container {
    max-width: 1100px;
}

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

a {
    color: inherit;
    text-decoration: none;
}

:root {
    --plyr-color-main: #c1ff11;
    --plyr-video-control-background-hover: rgba(193, 255, 17, 0.8);
}

/* عشان نخفي التحكمات في البداية خالص */
.hide-controls .plyr__controls {
    opacity: 0;
    pointer-events: none;
}

.plyr--video .plyr__control--overlaid {
    background: rgba(193, 255, 17, 0.9);
    color: #000;
    padding: 20px;
}

.plyr__progress input[type="range"] {
    cursor: pointer;
}

.plyr--video .plyr__control--overlaid:hover {
    background: #c1ff11;
}

/* إخفاء كل أدوات التحكم بما فيها الزر الكبير قبل فك الكتم */
.hide-controls .plyr__controls,
.hide-controls .plyr__control--overlaid {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ضبط شكل أيقونات التقديم والتأخير عند النقر المزدوج على الموبايل */
.plyr__control--forward,
.plyr__control--rewind {
    border-radius: 12px;
}

/* التأكد إن شريط التحكم السفلي فوق أي طبقة تانية تمنع اللمس */
.plyr__controls {
    z-index: 20 !important;
}

@media only screen and (max-width: 768px) {
    .plyr__volume input[type="range"] {
        display: none;
    }

    /* تصغير حجم نصوص القائمة لتناسب الموبايل */
    .plyr__menu__container [role="menu"] {
        padding: 3px !important;
        position: relative;
        max-height: 95px !important;
        overflow-y: auto !important;
    }

    .plyr__menu__container .plyr__control[role="menuitemradio"] {
        font-size: 11px;
    }
}

/* ════════════════════════════════════════════════════════
        URGENCY TOP BAR
      ════════════════════════════════════════════════════════ */
/* --- Static Professional Red Header --- */
/* التعديل على الحاوية الرئيسية */
.urgency-topbar {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* وضعنا العناصر في المنتصف لراحة العين */
    gap: 40px;
    /* مسافة كافية بين النص والزر */
    flex-wrap: wrap;
    direction: rtl;
    color: #ffffff;
    box-shadow: 0 2px 10px #c40d0d6e;
}

.urgency-topbar .topbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.urgency-topbar .metric {
    font-size: 0.9rem;
    font-family: "Cairo";
    color: #ccc;
}

.urgency-topbar .time-box>span:first-child {
    font-weight: bold;
    color: #e91f1f;
    font-size: 1.1rem;
}

/* تنسيق النص والعداد */
.topbar-content {
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

.topbar-content span {
    color: #e91f1f;
}

.timer-inline {
    padding: 4px 10px;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px solid #6a0707;
    color: #e91f1f;
    /* لون ذهبي للعداد ليلفت الانتباه */
    font-family: monospace;
}

/* تنسيق زر "اشترك الآن" */
/* .join-btn {
        background: linear-gradient(
          180deg,
          #ffcc00 0%,
          #ff9900 100%
        ); 
        color: #4a0000;
        padding: 6px 16px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 800;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        border: none;
        display: inline-block;
      } */

/* تأثير عند مرور الماوس على الزر */
.join-btn:hover {
    transform: scale(1.05);
    /* تكبير بسيط */
    background: linear-gradient(180deg, #ffe066 0%, #ffb84d 100%);
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.3);
}

/* ════════════════════════════════════════════════════════
        HERO
      ════════════════════════════════════════════════════════ */
.hero {
    padding: 64px 0 56px;
    text-align: center;
    margin-top: 64px;
}

.hero-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 65%);
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.pre-headline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(193, 255, 17, 0.08);
    border: 1px solid rgba(193, 255, 17, 0.35);
    color: var(--white);
    padding: 7px 20px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 26px;
    animation: fadeInDown 0.6s ease both;
    backdrop-filter: blur(8px);
}

.dot-live {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    animation: blink 1.2s infinite;
    box-shadow: 0 0 6px var(--gold);
}

.hero h1 {
    font-size: clamp(3.4rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 22px;
    animation: fadeInUp 0.7s ease 0.15s both;
    letter-spacing: -0.5px;
    color: var(--off-white);
}

.hero h1 .gold {
    color: var(--gold-light);
}

.hero h1 .green {
    color: var(--green);
}

.hero-sub {
    font-size: clamp(0.95rem, 2.2vw, 1rem);
    color: var(--muted-light);
    max-width: 640px;
    margin: 0 auto 38px;
    animation: fadeInUp 0.7s ease 0.25s both;
    line-height: 1.8;
}

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    animation: fadeInUp 0.7s ease 0.35s both;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted-light);
    font-weight: 600;
}

.trust-chip .tc-icon {
    color: var(--gold);
    font-size: 1rem;
}

/* ════════════════════════════════════════════════════════
        VSL VIDEO PLAYER
      ════════════════════════════════════════════════════════ */
.vsl-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(193, 255, 17, 0.4),
        0 0 60px rgba(193, 255, 17, 0.12),
        0 30px 80px rgba(0, 0, 0, 0.8);
    margin: 0 auto 38px;
    max-width: 820px;
    animation: fadeInUp 0.8s ease 0.3s both;
    background: #000;
}

.review-video-card .vsl-frame {
    position: relative;
    width: 100%;
    height: 455px;
    background: #000;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-video-card .vsl-frame .wistia_responsive_padding {
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.review-video-card .vsl-frame .wistia_responsive_wrapper {
    height: 100% !important;
    width: 100% !important;
}

.review-video-card .vsl-frame video,
.review-video-card .vsl-frame .wistia_embed {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    /* عشان يملأ الكادر زي تيك توك وريلز */
}

.vsl-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.custom-unmute-btn {
    font-family: "Cairo", sans-serif;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: linear-gradient(135deg, #f2f2f2 0%, #cacacad1 100%);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 20px rgb(227 217 184 / 40%);
    animation: pulseBtn 2s infinite;
    transition: opacity 0.3s ease;
}

@keyframes pulseBtn {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.03);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* إخفاء الزرار لما نفتح الصوت */
.custom-unmute-btn.hide {
    opacity: 0;
    pointer-events: none;
}

.vsl-thumb-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.play-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin: auto;
}

.play-ring::before,
.play-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.6);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.play-ring::after {
    animation-delay: 0.9s;
    border-color: rgba(249, 217, 118, 0.4);
}

.play-btn-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            #c6a36be0 0%,
            #dab84ad1 50%,
            #d6be748c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 40px var(--gold-glow),
        0 0 80px rgba(212, 175, 55, 0.15);
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.play-btn-inner:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 60px var(--gold-glow),
        0 0 100px rgba(212, 175, 55, 0.25);
}

.play-btn-inner svg {
    width: 30px;
    height: 30px;
    fill: #000;
    margin-right: -4px;
}

.vsl-label {
    position: relative;
    z-index: 1;
    text-align: center;
}

.vsl-label strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--gold-light);
}

.vsl-bar {
    padding: 12px 22px;
    background: rgba(212, 175, 55, 0.04);
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    font-size: 0.83rem;
    color: var(--muted-light);
    text-align: center;
}

.vsl-bar strong {
    color: var(--white);
}

.vsl-progress {
    height: 3px;
    background: var(--border);
    position: relative;
}

.vsl-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    animation: progressLoad 12s linear forwards;
}

/* ════════════════════════════════════════════════════════
        CTA BUTTON
      ════════════════════════════════════════════════════════ */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    background: linear-gradient(135deg,
            var(--green) 0%,
            #2ecc71 50%,
            var(--green) 100%);
    background-size: 200% 100%;
    color: #000;
    font-family: "Cairo", sans-serif;
    font-weight: 900;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    padding: 18px 46px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        0 8px 40px rgba(193, 255, 17, 0.3),
        0 0 0 0 rgba(193, 255, 17, 0.2);
    animation:
        ctaPulse 2.5s infinite,
        btnGradShift 3s ease infinite;
    transition:
        transform 0.25s,
        box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.btn-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
}

.btn-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 16px 55px rgba(193, 255, 17, 0.4),
        0 0 0 6px rgba(193, 255, 17, 0.08);
    animation-play-state: paused;
}

.cta-sub-note {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-sub-note .note-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--muted-light);
}

.cta-sub-note .note-item i {
    color: var(--green);
}

.cta-sub-note .note-item span.green {
    color: var(--green);
    font-weight: 700;
}

/* Hero Stats Bar */
.hero-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hero-stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--white);
    font-family: "IBM Plex Mono", monospace;
}

.hero-stat-label {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
}

.hero-stat-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .hero-stats-bar {
        gap: 16px;
    }

    .hero-stat-divider {
        display: none;
    }

    .hero-stat {
        width: 40%;
        margin-bottom: 12px;
    }
}

/* The hero rating row — six review avatars, "5.0 from 30+ reviews" and five
   stars — was removed from index.html; the client did not want it. This is
   where its first (already superseded) set of rules lived. The review avatar
   files are still in imgs/avatars/ for the reviews section. */

/* ════════════════════════════════════════════════════════
        SECTION HEADERS
      ════════════════════════════════════════════════════════ */
.section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-size: clamp(1.5rem, 3.8vw, 2.2rem);
    font-weight: 900;

    margin-bottom: 14px;
    letter-spacing: -0.3px;
    color: var(--off-white);
}

.section-sub {
    font-size: 0.95rem;
    color: var(--muted-light);
    max-width: 560px;
    line-height: 1.75;
}

.section-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 2px;
    margin-bottom: 20px;
}

.centered {
    text-align: center;
}

.centered .section-divider {
    margin-inline: auto;
}

.centered .section-sub {
    margin-inline: auto;
}

/* ════════════════════════════════════════════════════════
        STATS BAR
      ════════════════════════════════════════════════════════ */
.stats-bar {
    padding: 44px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    text-align: center;
}

.stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    font-family: "IBM Plex Mono", monospace;
    line-height: 1;
    margin-bottom: 6px;
    background: linear-gradient(135deg,
            var(--gold-light),
            var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-num .accent {
    color: #D4AF37;
    -webkit-text-fill-color: #D4AF37;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--muted-light);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════
        VIDEO REVIEWS GRID
      ════════════════════════════════════════════════════════ */
/* Reviews Section */
.reviews-section {
    padding: 80px 0;
}

/* ── Screenshot marquee (#reviewsMarquee, built by reviews.js) ──
   Rows of real chat screenshots drifting in alternating directions. The whole
   thing is decorative to assistive tech; the readable testimonials are the
   .rv-card grid underneath. */
.rvs-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 44px 0 56px;
    /* the rows are wider than the viewport by design — clip, never scroll */
    overflow: hidden;
}

.rvs-row {
    overflow: hidden;
    /* Force LTR so the track's origin and the translate direction are the same
       in Arabic and in English. The screenshots carry their own text
       direction inside the image, so nothing here needs to flip. */
    direction: ltr;
    mask-image: linear-gradient(to right, transparent 0, black 90px, black calc(100% - 90px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 90px, black calc(100% - 90px), transparent 100%);
}

.rvs-track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    will-change: transform;
}

/* -50% is exactly one copy of the row, which is why the markup emits the
   images twice — the jump back to 0 lands on an identical frame. */
@keyframes rvsDriftFwd {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes rvsDriftRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.rvs-row--fwd .rvs-track { animation: rvsDriftFwd 90s linear infinite; }
.rvs-row--rev .rvs-track { animation: rvsDriftRev 105s linear infinite; }

/* Stop for anyone who wants to actually read one — pointer or keyboard. */
.rvs-row:hover .rvs-track,
.rvs-row:focus-within .rvs-track {
    animation-play-state: paused;
}

.rvs-card {
    flex: 0 0 auto;
    width: 400px;
    /* matches the screenshots' own background, so the seam is invisible */
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .3s, transform .3s;
}

.rvs-card:hover {
    border-color: var(--gold-border);
    transform: translateY(-2px);
}

.rvs-card img {
    display: block;
    width: 100%;
    height: auto;
    /* holds the row's height before a lazy image has arrived */
    min-height: 70px;
}

/* ── Tall variant: the course rating lists (#ratingsMarquee) ──
   Those shots are one narrow column each, 500–720px tall and all different
   heights. Left alone the row would be most of a screen and its bottom edge
   would be a sawtooth. So the cards share one height and the overflow fades
   out — a rating list cut off mid-list reads as "and there are more", which
   is the honest impression anyway. */
.rvs-wrap--tall .rvs-card {
    width: 300px;
    height: 430px;
    position: relative;
}

.rvs-wrap--tall .rvs-card img {
    height: 100%;
    object-fit: cover;
    /* top, not centre — the first rows are the ones worth showing */
    object-position: top;
}

.rvs-wrap--tall .rvs-card::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, #0a0a0a);
}

@media (max-width: 900px) {
    .rvs-card { width: 320px; }
    .rvs-wrap { margin: 32px 0 40px; }
    .rvs-wrap--tall .rvs-card { width: 260px; height: 380px; }
}

@media (max-width: 480px) {
    .rvs-card { width: 260px; }
    .rvs-row {
        mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    }
}

/* No animation: lay the screenshots out as a static grid instead of leaving a
   frozen row with two thirds of it parked off-screen. The duplicates go away
   so nothing shows twice. */
@media (prefers-reduced-motion: reduce) {
    /* The drifting version is full-bleed on purpose; a static grid running into
       both edges of the window just looks unfinished, so give it gutters. */
    .rvs-wrap {
        display: block;
        padding: 0 24px;
    }

    .rvs-row {
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .rvs-track {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        width: auto;
        margin-bottom: 14px;
    }

    /* The direction classes have to be repeated here. The rule that starts the
       drift is `.rvs-row--fwd .rvs-track`, and a media query adds no
       specificity, so a bare `.rvs-track { animation: none }` loses to it and
       the row keeps sliding for the very people who asked it not to. */
    .rvs-row--fwd .rvs-track,
    .rvs-row--rev .rvs-track {
        animation: none;
    }

    .rvs-card { width: auto; }
    /* the tall variant sets its width with two classes, so undoing it needs
       two as well — same specificity trap as the animation above */
    .rvs-wrap--tall .rvs-card { width: auto; }
    .rvs-dup { display: none; }
}

/* Carousel Wrapper */
.carousel-wrapper {
    display: flex;
    align-items: center;
    margin-top: 20px;
    overflow: hidden;
    padding: 10px 0;
}

/* Track */
.video-carousel-track {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 10px 0px;
    flex: 1;
}

.video-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Card */
.review-video-card {
    width: 255px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px var(--border),
        0 20px 50px rgba(0, 0, 0, 0.5);
    transition:
        transform 0.3s,
        box-shadow 0.3s;
    position: relative;
}

/* تنسيق إطار الفيديو */

/* الطبقة الشفافة */
.video-overlay {
    display: none !important;
    /* هنلغي الـ overlay القديم تماماً */
}

.vsl-frame.playing .video-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* تأكد إن الفيديو نفسه واخد مساحة الفريم كاملة */
.vsl-frame video {
    width: 100%;
    display: block;
}

/* زرار التشغيل الذهبي */
.play-btn {
    width: 60px;
    height: 60px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.play-btn svg {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    /* تظبيط مكان السهم في النص */
}

/* تأثير عند الوقوف بالماوس */
.vsl-frame:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.vsl-frame:hover .play-btn {
    transform: scale(1.1);
    background: #fff;
    /* يقلب أبيض عشان الشياكة */
}

/* إخفاء الطبقة لما الفيديو يشتغل */
.vsl-frame.playing .video-overlay {
    opacity: 0;
    visibility: hidden;
}

.review-video-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 1px var(--border-gold),
        0 30px 70px rgba(0, 0, 0, 0.6),
        0 0 30px var(--gold-glow);
}

/* vsl-frame للـ Carousel بس — portrait 9:16 */

.review-video-card .vsl-frame iframe,
.review-video-card .vsl-frame video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
    display: block;
}

/* vsl-bar للـ Carousel بس */
.review-video-card .vsl-bar {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: var(--muted-light);
    background: #0a0a0a;
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

.review-video-card .vsl-bar strong {
    color: var(--gold);
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
}

/* Arrows */
.carousel-arrow {
    background: var(--gold);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 18px;
    color: #000;
    font-weight: 900;
    flex-shrink: 0;
    transition:
        opacity 0.2s,
        transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    opacity: 0.85;
}

.vsl-wrapper .vsl-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.vsl-wrapper .vsl-frame {
    position: relative;
    width: 100%;
    height: 100%;
    /* فيديو فيميو العرضي غالباً 16:9 */
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
    display: block;
    /* لضمان قراءة الأبعاد صح */
}

.vsl-wrapper .vsl-bar {
    padding: 12px 22px;
    background: rgba(212, 175, 55, 0.04);
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    font-size: 0.83rem;
    color: var(--muted-light);
    text-align: center;
}

.vsl-wrapper .vsl-bar strong {
    color: var(--white);
}

/* ════════════════════════════════════════════════════════
        WHY GHAWY SECTION
        Replaced the founder's origin story (a wall of prose beside a
        portrait). Two panels set the market's problems against what the
        platform does about them, so the argument reads in one pass instead of
        four paragraphs.
        Green is an accent here and nowhere near a background: the tick icons,
        a tinted hairline on the right-hand panel, and that is it.
      ════════════════════════════════════════════════════════ */
.why-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Two equal columns that collapse to one on narrow screens. `gap` and the
   grid do all the placement, so there is not a single left/right rule to
   mirror — the panels swap sides with the document direction on their own. */
.why-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
    align-items: start;
}

.why-col {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    height: 100%;
}

/* The problems panel stays deliberately quiet — it is the setup, not the
   pitch, and it should not compete with the panel next to it. */
.why-col--problem {
    opacity: 0.92;
}

.why-col--ghawy {
    border-color: rgba(193, 255, 17, 0.22);
}

.why-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.2px;
}

.why-col--problem .why-col-head i {
    color: var(--muted-light);
}

.why-col--ghawy .why-col-head i {
    color: var(--gold);
}

.why-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--muted-light);
}

.why-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.78rem;
}

.why-col--problem .why-icon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--muted-light);
}

.why-col--ghawy .why-icon {
    background: rgba(193, 255, 17, 0.09);
    border: 1px solid rgba(193, 255, 17, 0.25);
    color: var(--gold);
}

.why-col--ghawy .why-item {
    color: var(--off-white);
}

.why-close {
    margin: 34px auto 0;
    max-width: 70ch;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.8;
    color: var(--off-white);
}

@media (max-width: 900px) {
    .why-cols {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 34px;
    }

    .why-col {
        padding: 26px 20px;
    }
}

.img-badge {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: var(--bg-card);
    border: 1px solid var(--gold-border);
    padding: 16px 24px;
    border-radius: var(--radius);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    z-index: 5;
    text-align: center;
    backdrop-filter: blur(10px);
    animation: fadeInUp 0.8s ease 0.5s both;
}

.img-badge .badge-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--gold);
    font-family: "IBM Plex Mono", monospace;
    line-height: 1;
}

.img-badge .badge-label {
    font-size: 0.73rem;
    color: var(--muted-light);
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════
        MODULES / CHAPTERS
      ════════════════════════════════════════════════════════ */
.chapters-section {
    padding: 90px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.sidebar {
    background: var(--bg);
    border-radius: 0;
    border: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
    position: relative;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.course-stats {
    display: flex;
    gap: 15px;
    color: var(--sb-text-dim);
    font-size: 0.85rem;
    margin-bottom: 25px;
}

.module {
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.01);
    overflow: hidden;
    direction: ltr;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.module.active-chapter {
    border-color: var(--gold-light);
    background: rgba(255, 215, 0, 0.02);
}

.module-header {
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    gap: 15px;
}

.module-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--sb-text-main);
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-time {
    font-size: 0.65rem;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--sb-text-dim);
    background: var(--sb-badge-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.arrow-icon {
    font-size: 0.7rem;
    color: var(--sb-text-dim);
    transition: transform 0.3s ease;
}

.module.active-chapter .arrow-icon {
    transform: rotate(180deg);
    color: var(--gold-light);
}

.lesson-list {
    list-style: none;
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.45s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}

.module.active-chapter .lesson-list {
    max-height: 1200px;
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 16px;
}

.lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--sb-text-dim);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.module.active-chapter .lesson {
    opacity: 1;
    transform: translateY(0);
}

.module.active-chapter .lesson:nth-child(1) {
    transition-delay: 0.05s;
}

.module.active-chapter .lesson:nth-child(2) {
    transition-delay: 0.08s;
}

.module.active-chapter .lesson:nth-child(3) {
    transition-delay: 0.11s;
}

.module.active-chapter .lesson:nth-child(4) {
    transition-delay: 0.14s;
}

.module.active-chapter .lesson:nth-child(5) {
    transition-delay: 0.17s;
}

.lesson:last-child {
    border-bottom: none;
}

.lesson:hover {
    color: var(--sb-text-main);
}

.circle {
    width: 14px;
    height: 14px;
    border: 1.5px solid #333;
    border-radius: 50%;
    flex-shrink: 0;
}

.lesson.active {
    color: var(--sb-gold);
    font-weight: 600;
}

.lesson.active .circle {
    border-color: var(--sb-gold);
    background-color: var(--sb-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.sidebar .btn-cta {
    margin: auto;
    width: 100%;
}

/* ════════════════════════════════════════════════════════
        OFFER + VALUE STACK
      ════════════════════════════════════════════════════════ */
.offer-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ─── Countdown ─── */
.countdown-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.countdown-label {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.countdown-wrap {
    text-align: center;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.countdown-num {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--gold-light);
    background: var(--bg-raised);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
    letter-spacing: 2px;
}

.countdown-unit-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted-light);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.countdown-sep {
    font-size: 2rem;
    color: var(--gold-dark);
    font-family: "IBM Plex Mono", monospace;
    margin-bottom: 16px;
}

/* ─── Offer Box ─── */
.offer-box {
    background: var(--bg-raised);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.08),
        0 0 100px rgba(212, 175, 55, 0.07);
    /* max-width: 740px; */
    margin: 0 auto;
}

.offer-box-header {
    background: linear-gradient(135deg,
            rgba(212, 175, 55, 0.1) 0%,
            rgba(212, 175, 55, 0.02) 100%);
    padding: 32px 40px;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

.offer-box-header h2 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--off-white);
}

.offer-box-header p {
    font-size: 0.88rem;
    color: var(--muted-light);
    margin-top: 6px;
}

.offer-items {
    padding: 0 40px;
}

.offer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.offer-item:last-child {
    border-bottom: none;
}

.offer-item-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.offer-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.offer-icon.main {
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.offer-icon.bonus {
    background: #000;
    border: 1px solid rgba(212, 175, 55, 0.18);
}

.offer-item h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--off-white);
}

.offer-item p {
    font-size: 0.76rem;
    color: var(--muted);
}

.offer-value {
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: line-through;
    direction: ltr;
    color: #8a8a8a;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: "IBM Plex Mono", monospace;
}

.bonus-tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: var(--gold);
    padding: 2px 8px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 5px;
}

.offer-footer {
    padding: 36px 40px;
    text-align: center;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(212, 175, 55, 0.03) 100%);
    border-top: 1px solid var(--border);
}

.total-value-row {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.total-value-row .strike {
    color: var(--red);
    text-decoration: line-through;
    font-weight: 700;
    font-size: 1rem;
    font-family: "IBM Plex Mono", monospace;
}

.price-today-label {
    font-size: 0.88rem;
    color: var(--muted-light);
    margin-bottom: 6px;
}

.price-big {
    font-size: clamp(2.8rem, 7vw, 4rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    font-family: "IBM Plex Mono", monospace;
    direction: ltr;
    display: inline-block;
    text-shadow: 0 0 50px var(--gold-glow);
}

.price-currency {
    font-size: 1.2rem;
    vertical-align: top;
    padding-top: 12px;
    display: inline-block;
    font-family: "Cairo", sans-serif;
    color: var(--muted-light);
}

.price-period {
    font-size: 0.78rem;
    color: var(--muted-light);
    margin-bottom: 28px;
    margin-top: 8px;
}

.scarcity-note {
    font-size: 0.82rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-block;
    margin-top: 16px;
}

.slots-bar {
    max-width: 300px;
    margin: 14px auto 0;
}

.slots-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.slots-track {
    height: 6px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}

.slots-fill {
    height: 100%;
    width: 73%;
    background: linear-gradient(90deg, var(--red), #f97316);
    border-radius: 100px;
    animation: slotsPulse 2s ease infinite;
}

/* ════════════════════════════════════════════════════════
        RAMADAN SPECIAL CARD — Luxury Dark Version
      ════════════════════════════════════════════════════════ */
.ramadan-card {
    background: var(--bg-raised);
    border-radius: 24px;
    padding: 30px;
    color: var(--off-white);
    /* max-width: 740px; */
    margin: 40px auto;
    box-shadow:
        0 0 0 1px var(--border-gold),
        0 20px 60px rgba(0, 0, 0, 0.7),
        0 0 40px var(--gold-glow);
    text-align: right;
    position: relative;
    overflow: hidden;
}

.ramadan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--gold),
            var(--gold-light),
            var(--gold),
            transparent);
}

.offer-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-light);
    padding: 6px 15px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.green-dot {
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    display: inline-block;
}

.ramadan-card h3 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--gold-light);
}

.price-sub-desc {
    font-size: 0.9rem;
    color: var(--muted-light);
    margin-bottom: 20px;
}

.price-main-box {
    background: rgba(212, 175, 55, 0.04);
    border: 1px solid var(--border-gold);
    border-radius: 16px;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    justify-content: center;
}

.price-right-side {
    text-align: center;
}

.price-right-side .label {
    display: block;
    font-size: 1rem;
    color: var(--off-white);
    font-weight: 700;
}

.price-right-side .sub-label {
    font-size: 0.8rem;
    color: var(--muted-light);
}

.price-amount {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--green);
}

.progress-container {
    margin-bottom: 20px;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--off-white);
}

.progress-labels span:last-child {
    color: var(--red);
}

.progress-bar-bg {
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.15);
}

.progress-bar-fill {
    height: 100%;
    width: 97%;
    background: linear-gradient(90deg, #ab0000, #931a1a, #ff3535);
    border-radius: 100px;
    box-shadow: 0 0 12px var(--red);
}

.urgency-badge-light {
    background: rgba(212, 175, 55, 0.07);
    border: 1px dashed rgba(212, 175, 55, 0.35);
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    color: var(--gold-light);
    margin-bottom: 20px;
}

.live-notif {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--muted-light);
    font-weight: 600;
}

.red-dot-live {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: blink 1.2s infinite;
}

/* ════════════════════════════════════════════════════════
        GUARANTEE
      ════════════════════════════════════════════════════════ */
.guarantee-section {
    padding: 60px 0;
}

.guarantee-box {
    max-width: 660px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
    box-shadow:
        0 0 80px rgba(212, 175, 55, 0.05),
        0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.guarantee-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--gold),
            transparent);
}

.guarantee-badge {
    font-size: 4.5rem;
    margin-bottom: 18px;
    display: block;
    animation: float 3s ease infinite;
}

.guarantee-box h3 {
    font-size: 1.35rem;
    font-weight: 900;
    margin-bottom: 14px;
    color: var(--off-white);
}

.guarantee-box p {
    font-size: 0.9rem;
    color: var(--muted-light);
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto;
}

.guarantee-points {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.gp {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted-light);
    font-weight: 600;
}

.gp .gp-icon {
    color: var(--green);
}

/* ════════════════════════════════════════════════════════
        SCREENSHOTS
      ════════════════════════════════════════════════════════ */
.screenshots-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════
        FAQ
      ════════════════════════════════════════════════════════ */
.faq-section {
    padding: 90px 0;
}

.faq-list {
    margin-top: 44px;
    /* max-width: 760px; */
    margin-inline: auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}

.faq-item.open {
    border-color: var(--border-gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.05);
}

.faq-q {
    padding: 20px 26px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.93rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    user-select: none;
    color: var(--off-white);
}

.faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition:
        transform 0.35s,
        background 0.3s;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: rgba(212, 175, 55, 0.15);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    padding: 0 26px;
    font-size: 0.87rem;
    color: var(--muted-light);
    line-height: 1.8;
    transition:
        max-height 0.4s ease,
        padding 0.3s;
}

.faq-item.open .faq-a {
    max-height: 300px;
    padding: 0 26px 24px;
}

/* ════════════════════════════════════════════════════════
        FINAL CTA
      ════════════════════════════════════════════════════════ */
.final-cta-section {
    padding: 90px 0;
    text-align: center;
    background: linear-gradient(180deg,
            transparent,
            rgba(212, 175, 55, 0.03),
            transparent);
}

/* ════════════════════════════════════════════════════════
        STICKY CTA BAR
      ════════════════════════════════════════════════════════ */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(21, 24, 12, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-gold);
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 14px;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-cta.show {
    transform: translateY(0);
}

.sticky-left strong {
    font-size: 1rem;
    display: block;
    color: #00f2fe;
    line-height: 1.2;
}

.sticky-left span {
    font-size: 0.76rem;
    color: var(--muted-light);
}

.sticky-cta .btn-cta {
    font-size: 0.95rem;
    padding: 12px 26px;
    animation: ctaPulse 2.5s infinite;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
        FOOTER
      ════════════════════════════════════════════════════════ */
footer {
    background: var(--bg-card);
    padding: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 64px;
}

footer a {
    color: var(--gold);
    transition: color 0.2s;
}

footer a:hover {
    color: var(--gold-light);
}

.footer-logo {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    opacity: 0.8;
}

/* ════════════════════════════════════════════════════════
        PRICING CARD
      ════════════════════════════════════════════════════════ */
.pricing-section {
    padding: 90px 0;
    background: var(--bg);
    position: relative;
}

.pricing-card {
    max-width: 440px;
    margin: 48px auto 0;
    background: var(--bg-card);
    border: 1px solid rgba(193, 255, 17, 0.15);
    border-radius: 24px;
    overflow: visible;
    position: relative;
    box-shadow:
        0 0 60px rgba(193, 255, 17, 0.05),
        0 20px 60px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.4s, border-color 0.4s;
    padding: 40px 32px 32px;
}

.pricing-card:hover {
    border-color: rgba(193, 255, 17, 0.3);
    box-shadow:
        0 0 80px rgba(193, 255, 17, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

.pricing-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent,
            var(--gold),
            rgba(193, 255, 17, 0.6),
            var(--gold),
            transparent);
}

/* Header */
.pricing-card-header {
    padding: 0 0 16px;
    text-align: center;
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: #c1ff11;
    color: #000;
    padding: 6px 20px;
    border-radius: 100px;
    white-space: nowrap;
    z-index: 2;
}

.pricing-plan-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--off-white);
    margin-bottom: 6px;
    text-align: center;
}

.pricing-plan-sub {
    font-size: 0.84rem;
    color: var(--muted-light);
    text-align: center;
}

/* Price block */
.pricing-price-block {
    text-align: right;
    padding: 8px 0 20px;
}

.pricing-old-price {
    margin-bottom: 6px;
}

.pricing-strike {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: line-through;
    font-family: "IBM Plex Mono", monospace;
}

.pricing-strike-currency {
    font-size: 0.8rem;
    color: var(--muted);
    margin-right: 4px;
}

.pricing-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pricing-amount {
    font-size: clamp(3rem, 8vw, 4rem);
    font-weight: 900;
    color: var(--green);
    font-family: "IBM Plex Mono", monospace;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 0 40px rgba(55, 199, 96, 0.3);
    transition: opacity 0.2s, transform 0.2s;
}

.pricing-currency-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.pricing-currency {
    font-size: 1rem;
    font-weight: 800;
    color: var(--muted-light);
    font-family: "Cairo", sans-serif;
}

.pricing-usd {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    font-family: "IBM Plex Mono", monospace;
}

.pricing-period-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
}

.pricing-period {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 10px;
    font-weight: 600;
}

.pricing-cta {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 16px;
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    border-radius: 14px;
    font-family: "Cairo", sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

.pricing-cta:hover {
    background: var(--gold);
    color: #000;
    box-shadow: 0 0 30px rgba(193, 255, 17, 0.3);
    transform: translateY(-2px);
}

.pricing-cta:active {
    transform: translateY(0);
}

.pricing-secure {
    text-align: center;
    font-size: 0.74rem;
    color: var(--muted);
    padding: 0 0 12px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 480px) {
    .pricing-card {
        margin: 32px 0 0;
        border-radius: 18px;
    }

    .pricing-card-header {
        padding: 24px 20px 16px;
    }

    .pricing-price-block {
        padding: 16px 20px 24px;
    }

    .pricing-cta {
        width: calc(100% - 40px);
        margin: 0 auto 16px;
        font-size: 1rem;
    }

    .pricing-secure {
        padding: 0 20px 24px;
    }

    .pricing-amount {
        font-size: 2.8rem;
    }
}


/* ════════════════════════════════════════════════════════
        PRICING GRID, COMPARISON, PAYMENT METHODS, CHECKOUT STEP
        The grid rules used to be an inline <style> inside #payment on
        index.html. /pricing renders the same cards from the same file, so
        they live here where both pages can see them.
      ════════════════════════════════════════════════════════ */

/* LTR on the row so "monthly, quarterly, yearly" comes out in that order left
   to right in both languages — the 3-month card in the middle and the yearly
   one on the right is the client's layout, and it should not flip with the
   document. Each card is put back to the document's own direction. */
.ghawy-pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    /* stretch, so the three cards are one height and the three buttons sit on
       one line — the yearly card carries an extra "6 months free" line and the
       monthly one carries no struck price, so left to themselves they come out
       three different heights and the row looks accidental */
    align-items: stretch;
    direction: ltr;
    margin-top: 48px;
}

.ghawy-pricing-cards .pricing-card {
    display: flex;
    flex-direction: column;
    direction: rtl;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px 28px 30px;
}

html[dir="ltr"] .ghawy-pricing-cards .pricing-card {
    direction: ltr;
}

.pricing-card-featured {
    z-index: 2;
    transform: translateY(-12px) scale(1.045);
    border-color: rgba(193, 255, 17, 0.42);
    box-shadow:
        0 0 90px rgba(193, 255, 17, 0.12),
        0 30px 90px rgba(0, 0, 0, 0.62);
}

.pricing-card-featured .pricing-card-glow {
    height: 3px;
    opacity: 1;
}

/* The struck-through reference price. It is not an invented anchor: it is what
   the same period costs at the monthly rate, so 1800 above 1200 and 7200 above
   3500. The monthly card has none — it IS the rate. */
.pricing-was {
    text-align: center;
    margin-bottom: 4px;
    min-height: 22px;
}

.pricing-was s {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration-color: rgba(239, 68, 68, 0.75);
    text-decoration-thickness: 2px;
}

.pricing-extra {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--gold);
}

.ghawy-pricing-cards .pricing-plan-sub {
    margin: 18px 0 22px;
    line-height: 1.7;
    /* pushes the button to the bottom edge so all three line up */
    flex: 1;
}

.ghawy-pricing-cards .pricing-cta {
    margin-top: auto;
}

@media (max-width: 1100px) {
    .ghawy-pricing-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .pricing-card-featured {
        transform: none;
    }
}

@media (max-width: 720px) {
    .ghawy-pricing-cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* The final CTA reuses the methods row from under the pricing cards. */
.final-cta-methods {
    margin-top: 34px;
}

.final-cta-title .stat-members {
    color: var(--gold);
}

/* ── Accepted payment methods ── */
.pricing-methods-block {
    margin-top: 46px;
    text-align: center;
}

.pay-methods-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.pay-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pay-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted-light);
}

/* Font Awesome has brand marks for the three card networks and nothing for
   Meeza, InstaPay, the two wallets or Fawry. Those are a name on a chip rather
   than a generic glyph pretending to be a logo. */
.pay-method i {
    font-size: 1.25rem;
    color: var(--off-white);
}

.pay-methods-note {
    max-width: 620px;
    margin: 18px auto 0;
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--muted);
}

.pricing-more {
    margin-top: 34px;
}

/* ── The comparison ── */
.pricing-compare-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pc-compare {
    margin-top: 48px;
}

/* A wide table can always outgrow a narrow window; it scrolls inside its own
   box so the page body never does. */
.pc-table-wrap {
    overflow-x: auto;
}

.pc-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.pc-table th,
.pc-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
    line-height: 1.7;
}

.pc-table thead th {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--off-white);
    border-bottom-color: var(--gold-border);
}

/* The 3-month column is the one the client wants picked, so it is tinted the
   same way its card is raised. */
.pc-table th:nth-child(3),
.pc-table td:nth-child(3) {
    background: var(--gold-subtle);
}

.pc-table tbody th {
    font-weight: 800;
    color: var(--muted-light);
    white-space: nowrap;
}

.pc-table tbody td {
    color: var(--off-white);
    font-weight: 700;
}

.pc-table tbody tr:last-child th,
.pc-table tbody tr:last-child td {
    border-bottom: none;
}

/* The phone version. Same COMPARE_ROWS, one block per plan — a four-column
   table of Arabic sentences is unreadable at 360px. */
.pc-stack {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.pc-stack-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
}

.pc-stack-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--gold);
    margin-bottom: 14px;
}

.pc-stack-list {
    margin: 0;
}

.pc-stack-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.83rem;
    line-height: 1.6;
}

.pc-stack-row:last-child {
    border-bottom: none;
}

.pc-stack-row dt {
    color: var(--muted);
    font-weight: 700;
    flex-shrink: 0;
}

.pc-stack-row dd {
    margin: 0;
    color: var(--off-white);
    font-weight: 700;
    text-align: end;
}

@media (max-width: 860px) {
    .pc-table-wrap {
        display: none;
    }

    .pc-stack {
        display: flex;
    }
}

/* ── The checkout step ──
   "اشترك الآن" opens this instead of starting a payment. The two options are
   not equivalent — card/wallet opens access immediately, InstaPay is a receipt
   a person reads — so the warning is part of the option, not small print. */
.pay-choice {
    max-width: 520px;
    text-align: start;
}

.pay-choice .card-title {
    text-align: center;
}

.pay-choice .card-sub {
    text-align: center;
    margin-bottom: 26px;
}

.pay-was {
    color: var(--muted);
    text-decoration-color: rgba(239, 68, 68, 0.75);
    margin-inline-start: 8px;
}

.pay-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin-bottom: 14px;
    padding: 18px 18px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--off-white);
    font-family: "Cairo", sans-serif;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.pay-option:hover:not(:disabled) {
    border-color: var(--gold-border);
    background: var(--gold-subtle);
    transform: translateY(-2px);
}

.pay-option:disabled {
    opacity: 0.6;
    cursor: default;
}

.pay-option--primary {
    border-color: var(--gold-border);
}

.pay-option-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-size: 1.05rem;
}

.pay-option-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pay-option-title {
    font-size: 0.98rem;
    font-weight: 800;
}

.pay-option-note {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--muted-light);
}

.pay-option-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.7;
    color: #ffd9a1;
}

.pay-option-warn i {
    flex-shrink: 0;
    margin-top: 4px;
    color: #f59e0b;
}

@media (max-width: 520px) {
    .pay-choice {
        padding: 40px 20px 24px;
    }

    .pay-option {
        padding: 16px 14px;
        gap: 11px;
    }
}

/* ── /pricing page bits ── */
.pricing-page .page-shell-head {
    margin-bottom: 0;
}

.pricing-help {
    margin-top: 40px;
}

.pricing-help-text {
    font-size: 0.88rem;
    color: var(--muted-light);
    margin-bottom: 14px;
}

/* Visible to a screen reader, not on screen — the comparison table's first
   header cell, which has to be announced but would only be clutter drawn. */
.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;
}

/* WhatsApp link inside pricing card */
.pricing-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 64px);
    margin: 0 32px 28px;
    padding: 14px;
    background: rgba(37, 211, 102, 0.06);
    border: 1px solid rgba(37, 211, 102, 0.2);
    border-radius: 12px;
    color: #25d366;
    text-decoration: none;
    font-family: "Cairo", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.pricing-whatsapp:hover {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.4);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.15);
}

@media (max-width: 480px) {
    .pricing-whatsapp {
        width: calc(100% - 40px);
        margin: 0 20px 24px;
        font-size: 0.82rem;
    }
}

/* ════════════════════════════════════════════════════════
        KEYFRAME ANIMATIONS
      ════════════════════════════════════════════════════════ */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

@keyframes ping {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes progressLoad {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

@keyframes slotsPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes gradShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes btnGradShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 8px 40px var(--gold-glow);
    }

    50% {
        box-shadow:
            0 8px 60px rgba(212, 175, 55, 0.5),
            0 0 0 10px rgba(212, 175, 55, 0.04);
    }
}

/* ════════════════════════════════════════════════════════
        RESPONSIVE — Full Device Coverage
        XL Desktop 1440+ | Desktop 1024-1440 | Tablet 769-1024
        Mobile L 481-768 | Mobile M 361-480 | Mobile S ≤360
      ════════════════════════════════════════════════════════ */

/* ── XL Desktop (1440px+) ── */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }

    .hero h1 {
        font-size: 3.7rem;
    }

    .chapters-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }

    .video-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .text-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .screenshots-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }

    /* .offer-box {
          max-width: 820px;
        } */
    /* .ramadan-card {
          max-width: 820px;
        } */
    .vsl-wrapper {
        max-width: 920px;
    }
}

/* ── Standard Desktop (1280px–1439px) ── */
@media (min-width: 1280px) and (max-width: 1439px) {
    .container {
        max-width: 1060px;
    }

    .chapters-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .video-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .text-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .screenshots-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* ── Laptop / Small Desktop (1025px–1279px) ── */
@media (min-width: 1025px) and (max-width: 1279px) {
    .container {
        max-width: 960px;
    }

    .chapters-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .video-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .text-reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .screenshots-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* ── Tablet (769px–1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        padding: 0 28px;
    }

    .hero {
        padding: 56px 0 44px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .chapters-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .video-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .text-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }



    .offer-items {
        padding: 0 28px;
    }

    .offer-box-header {
        padding: 28px 32px;
    }

    .offer-footer {
        padding: 28px 32px;
    }

    .vsl-wrapper {
        max-width: 700px;
    }

    .pre-headline {
        font-size: 0.82rem;
    }
}

/* ── Large Mobile (481px–768px) ── */
@media (max-width: 768px) and (min-width: 481px) {
    .container {
        padding: 0 20px;
    }

    .hero {
        padding: 48px 0 40px;
    }

    .hero h1 {
        font-size: 3.5rem;
        line-height: 1.3;
    }

    .hero-sub {
        font-size: 0.95rem;
    }

    .pre-headline {
        font-size: 0.8rem;
        padding: 6px 16px;
        max-width: 100%;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-trust {
        gap: 12px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .stat-num {
        font-size: 1.9rem;
    }

    .chapters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .video-reviews-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .text-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }



    .img-badge {
        position: static;
        margin-top: 14px;
        display: inline-block;
    }

    .offer-items {
        padding: 0 20px;
    }

    .offer-box-header {
        padding: 24px 20px;
    }

    .offer-footer {
        padding: 26px 20px;
    }

    .offer-item {
        gap: 14px;
    }

    .price-main-box {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .ramadan-card {
        padding: 22px;
        margin: 30px auto;
    }

    .ramadan-card h3 {
        font-size: 1.35rem;
    }

    .price-amount {
        font-size: 2.4rem;
    }

    .countdown-num {
        width: 62px;
        height: 62px;
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn-cta {
        padding: 16px 32px;
        font-size: 1.05rem;
    }

    .sticky-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 12px 16px;
        gap: 10px;
    }

    .sticky-cta .btn-cta {
        width: 100%;
        font-size: 1rem;
        padding: 14px;
    }

    .guarantee-box {
        padding: 36px 24px;
    }

    .faq-q {
        padding: 18px 20px;
    }

    .faq-a {
        padding: 0 20px;
    }

    .faq-item.open .faq-a {
        padding: 0 20px 20px;
    }

    .vsl-wrapper {
        border-radius: 14px;
    }

    .urgency-topbar {
        font-size: 0.82rem;
        padding: 9px 14px;
        flex-wrap: wrap;
    }

    .course-stats {
        justify-content: center;
    }
}

/* ── Standard Mobile (361px–480px) ── */
@media (max-width: 480px) {
    .container {
        padding: 0 24px;
    }

    .hero {
        padding: 40px 0 32px;
    }

    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.3;
    }

    .hero-sub {
        font-size: 0.9rem;
        margin-bottom: 22px;
    }

    .pre-headline {
        font-size: 0.75rem;
        text-align: center;
        line-height: 1.5;
        white-space: normal;
        max-width: 100%;
    }

    .hero-trust {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .trust-chip {
        font-size: 0.75rem;
    }

    .stats-bar {
        padding: 26px 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .stats-grid> :last-child {
        grid-column: 1 / -1;
        /* ياخد الصف كله */
        justify-self: center;
        /* ويتمركز */
        max-width: 220px;
        /* عشان ما يتمددش زيادة */
    }

    .stat-num {
        font-size: 1.65rem;
    }

    .stat-label {
        font-size: 0.72rem;
    }

    .reviews-section,
    .instructors-section,
    .why-section,
    .chapters-section,
    .audience-section,
    .screenshots-section,
    .faq-section {
        padding: 50px 0;
    }

    .guarantee-section {
        padding: 36px 0;
    }

    .final-cta-section {
        padding: 56px 0;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .section-sub {
        font-size: 0.86rem;
    }

    .section-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 2px;
    }

    .chapters-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 28px;
    }

    .chapter-card {
        padding: 18px 12px;
        border-radius: 12px;
    }

    .chapter-card h3 {
        font-size: 0.8rem;
    }

    .chapter-card p {
        font-size: 0.72rem;
    }

    .ch-num {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 0.78rem;
        margin-bottom: 10px;
    }

    .chapter-lessons {
        font-size: 0.64rem;
        padding: 2px 8px;
    }

    .video-reviews-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 24px;
    }

    .text-reviews-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .img-badge {
        position: static;
        margin-top: 12px;
        display: inline-block;
    }



    .offer-box {
        border-radius: 16px;
    }

    .offer-box-header {
        padding: 20px 16px;
    }

    .offer-box-header h2 {
        font-size: 1.1rem;
    }

    .offer-box-header p {
        font-size: 0.82rem;
    }

    .offer-items {
        padding: 0 16px;
    }

    .offer-footer {
        padding: 20px 16px;
    }

    .offer-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 0;
    }

    .offer-item-left {
        gap: 10px;
    }

    .offer-icon {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .offer-item h4 {
        font-size: 0.83rem;
    }

    .offer-item p {
        font-size: 0.72rem;
    }

    .offer-value {
        font-size: 0.82rem;
    }

    .bonus-tag {
        font-size: 0.6rem;
        padding: 2px 7px;
    }

    .price-big {
        font-size: 2.8rem;
    }

    .price-currency {
        font-size: 1rem;
        padding-top: 10px;
    }

    .price-period {
        font-size: 0.63rem;
    }

    .total-value-row {
        font-size: 0.82rem;
    }

    .scarcity-note {
        font-size: 0.78rem;
        padding: 7px 12px;
    }

    .slots-bar {
        max-width: 100%;
    }

    .countdown-num {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        border-radius: 10px;
        letter-spacing: 1px;
    }

    .countdown-sep {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .countdown-block {
        gap: 4px;
    }

    .countdown-unit-label {
        font-size: 0.58rem;
    }

    .countdown-label {
        font-size: 0.78rem;
    }

    .ramadan-card {
        padding: 18px 16px;
        margin: 24px auto;
        border-radius: 18px;
    }

    .ramadan-card h3 {
        font-size: 1.15rem;
    }

    .price-sub-desc {
        font-size: 0.83rem;
    }

    .price-main-box {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 16px 18px;
    }

    .price-amount {
        font-size: 2rem;
    }

    .price-right-side .label {
        font-size: 0.9rem;
    }

    .price-right-side .sub-label {
        font-size: 0.75rem;
    }

    .progress-labels {
        font-size: 0.85rem;
    }

    .urgency-badge-light {
        font-size: 0.88rem;
        padding: 12px;
    }

    .live-notif {
        font-size: 0.83rem;
    }

    .people-reviews-img {
        margin: 14px 14px auto auto !important;
    }

    .guarantee-box {
        padding: 28px 16px;
        border-radius: 18px;
    }

    .guarantee-badge {
        font-size: 3rem;
    }

    .guarantee-box h3 {
        font-size: 1.05rem;
    }

    .guarantee-box p {
        font-size: 0.83rem;
    }

    .guarantee-points {
        gap: 15px;
        align-items: center;
    }

    .gp {
        font-size: 0.78rem;
    }

    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 24px;
    }

    .faq-list {
        margin-top: 24px;
    }

    .faq-q {
        padding: 15px 16px;
        font-size: 0.84rem;
        gap: 10px;
    }

    .faq-a {
        padding: 0 16px;
        font-size: 0.8rem;
    }

    .faq-item.open .faq-a {
        padding: 0 16px 16px;
    }

    .faq-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .btn-cta {
        padding: 14px 24px;
        font-size: 0.98rem;
        border-radius: 100px;
    }

    .cta-sub-note {
        font-size: 0.74rem;
        gap: 8px;
    }

    .sticky-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 10px 12px;
        gap: 8px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .sticky-cta .btn-cta {
        width: 100%;
        font-size: 0.96rem;
        padding: 13px;
    }

    .sticky-left strong {
        font-size: 0.88rem;
    }

    .sticky-left span {
        font-size: 0.72rem;
    }

    .urgency-topbar {
        font-size: 0.76rem;
        padding: 8px 10px;
        gap: 16px;
        flex-wrap: wrap;
    }

    .urgency-topbar .topbar-content {
        flex-direction: column;
    }

    .urgency-topbar .topbar-content .discount {
        font-size: 1.1rem;
        margin-top: 2px;
    }

    .urgency-topbar .timer-inline {
        font-size: 0.85rem;
        padding: 2px 9px;
        margin-bottom: 4px;
        letter-spacing: 1.5px;
    }

    .vsl-wrapper {
        border-radius: 12px;
        margin-bottom: 22px;
    }

    .custom-unmute-btn {
        font-size: 0.7rem;
    }

    .vsl-bar {
        font-size: 0.75rem;
        padding: 10px 12px;
    }

    /* .review-video-card .vsl-frame {
          width: 95%;
          height: 440px;
        } */
    .reviews-section,
    .carousel-wrapper {
        overflow: hidden;
    }

    .video-carousel-track {
        scroll-snap-type: x mandatory;
    }

    .review-video-card {
        width: 85vw;
        min-width: 85vw;
        scroll-snap-align: center;
        /* خليناه 90% من عرض الشاشة عشان يسيب مسافة شياكة من الجناب */
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        /* يضمن إن الفيديو فوق والبار تحت */
    }

    .review-video-card .vsl-frame {
        width: 100%;
        height: auto !important;
        /* نلغي الـ 455px القديمة */
        aspect-ratio: 9 / 16;
        background: #000;
        position: relative;
        overflow: hidden;
        display: block;
        /* غيرناه من flex لـ block عشان الـ aspect-ratio يظبط */
    }

    .play-ring {
        width: 58px;
        height: 58px;
    }

    .vsl-label strong {
        font-size: 0.85rem;
    }

    footer {
        padding: 10px 16px 24px 16px;
        margin-bottom: 72px;
    }

    .footer-logo {
        font-size: 0.95rem;
    }

    .course-stats {
        justify-content: center;
    }
}

/* ── Small Mobile (≤360px) ── */
@media (max-width: 360px) {
    .hero h1 {
        font-size: 3rem;
    }

    .chapters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .screenshots-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .countdown-num {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
    }

    .btn-cta {
        font-size: 0.92rem;
        padding: 13px 18px;
    }

    .offer-box-header h2 {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.15rem;
    }

    .price-big {
        font-size: 2.4rem;
    }

    .pre-headline {
        font-size: 0.72rem;
    }

    .text-reviews-grid {
        grid-template-columns: 1fr;
    }

    .hero-trust {
        align-items: center;
        gap: 6px;
    }

    .countdown-block {
        gap: 3px;
    }

    .countdown-sep {
        font-size: 1.3rem;
    }

    .guarantee-points {
        flex-direction: column;
        gap: 8px;
    }

    .ramadan-card {
        padding: 14px 12px;
    }

    .price-amount {
        font-size: 1.8rem;
    }
}

/* ═══════════════════════════════════════════
   GLOBAL NAVIGATION
═══════════════════════════════════════════ */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 64px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.main-nav.scrolled {
    border-bottom-color: var(--border-gold);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-logo {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo img {
    height: 120px;
    width: auto;
    border-radius: 0;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.nav-logo:hover img {
    transform: scale(1.05);
}

.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    color: var(--muted-light);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.25s;
    position: relative;
    padding: 4px 0;
}

.nav-links a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold-light);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-auth-btn {
    font-family: "Cairo", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    border: none;
    white-space: nowrap;
}

.nav-auth-btn.ghost {
    background: transparent;
    color: var(--muted-light);
    border: 1px solid var(--border);
}

.nav-auth-btn.ghost:hover {
    color: var(--gold);
    border-color: var(--border-gold);
}

.nav-auth-btn.primary {
    background: var(--gold);
    color: #000;
}

.nav-auth-btn.primary:hover {
    box-shadow: 0 0 20px var(--gold-glow);
    transform: translateY(-1px);
}

.nav-auth-btn.danger {
    background: transparent;
    color: var(--muted-light);
    border: 1px solid var(--border);
}

.nav-auth-btn.danger:hover {
    color: var(--red);
    border-color: rgba(239, 68, 68, 0.4);
}


/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1002;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--off-white);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile drawer */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 94%);
    backdrop-filter: blur(20px);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.mobile-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer a,
.mobile-drawer button {
    color: var(--off-white);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: "Cairo", sans-serif;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    padding: 8px 0;
}

.mobile-drawer a:hover,
.mobile-drawer button:hover {
    color: var(--gold-light);
}

.info-box {
    background: rgba(193, 255, 17, 0.05);
    border: 1px dashed var(--green, #c1ff11);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 10px;
    color: var(--green, #c1ff11);
    text-align: center;
}

.info-box.error {
    background: rgba(239, 68, 68, 0.05);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.mobile-drawer .mobile-cta {
    margin-top: 16px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: #000;
    padding: 14px 40px;
    border-radius: 100px;
    font-weight: 900;
}

/* ═══════════════════════════════════════════
   FEATURES SECTION
═══════════════════════════════════════════ */
.features-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.feature-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}

.feature-card:hover {
    border-color: var(--border-gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.08);
    transform: translateY(-4px);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.4rem;
    color: #fbfbfb;
    transition: background 0.3s, box-shadow 0.3s;
}

.feature-card:hover .feature-icon {
    background: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.15);
}

.feature-card h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--off-white);
    margin-bottom: 8px;
}

.feature-card p {
    font-size: 0.82rem;
    color: var(--muted-light);
    line-height: 1.7;
}

/* ── Risk removal, under the feature grid ──
   Not cards: these are five short answers to five short worries, and boxing
   each one would give them the same visual weight as the features above,
   which is not what they are. A list with a green tick reads as reassurance
   and stays quiet. */
.risk-block {
    margin-top: 46px;
    padding: 30px 32px;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
}

.risk-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--off-white);
    margin-bottom: 18px;
}

.risk-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.risk-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--muted-light);
}

.risk-item i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--gold);
}

@media (max-width: 600px) {
    .risk-block {
        padding: 22px 20px;
        margin-top: 34px;
    }

    .risk-list {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════
        GHAWY FOR EVERY FIELD (#for-everyone)
        Replaced the little drifting stripe of skill chips. Same job the
        feature grid does — a card each — but the accent is green and the
        surface is not, per the client's note that the green is an accent
        and never a background.
      ════════════════════════════════════════════════════════ */
.audience-section {
    padding: 90px 0;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
}

.audience-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    transition: border-color 0.3s, transform 0.3s;
}

.audience-card:hover {
    border-color: var(--gold-border);
    transform: translateY(-4px);
}

.audience-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.15rem;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
}

.audience-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--off-white);
    margin-bottom: 10px;
}

.audience-card p {
    font-size: 0.82rem;
    color: var(--muted-light);
    line-height: 1.75;
}

@media (max-width: 1100px) {
    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .audience-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 32px;
    }

    .audience-card {
        padding: 22px 18px;
    }
}

/* ════════════════════════════════════════════════════════
        INSTRUCTORS ON THE HOME PAGE (#instructors)
        Cards come from renderHomeInstructors() in catalog.js.
      ════════════════════════════════════════════════════════ */
.instructors-section {
    padding: 90px 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* There is one instructor today and the section has to look deliberate with
   one and still absorb a fourth. auto-fit + a max-width does both: a single
   card centres at a readable width instead of stretching across the row, and
   extra cards fill the columns beside it. */
.hi-grid {
    display: grid;
    /* The 460px ceiling is what keeps one instructor from becoming one card
       stretched across a metre of screen. With a second and a third the
       columns fill up beside it and the row centres itself. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
    justify-content: center;
    gap: 20px;
    margin-top: 48px;
    max-width: 1000px;
    margin-inline: auto;
}

.hi-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 26px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s, transform 0.3s;
}

.hi-card:hover {
    border-color: var(--gold-border);
    transform: translateY(-4px);
}

/* Photo first in the markup, so it lands on the right in Arabic and on the
   left in English with no left/right rule anywhere. */
.hi-top {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.hi-avatar {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.hi-ident {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hi-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
}

.hi-role {
    font-size: 0.82rem;
    color: var(--gold);
    font-weight: 700;
    line-height: 1.5;
}

.hi-distinction {
    font-size: 0.85rem;
    color: var(--muted-light);
    line-height: 1.8;
}

.hi-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hi-fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--off-white);
}

.hi-fact i {
    font-size: 0.78rem;
    color: var(--gold);
}

.hi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
}

.hi-foot .gi-links {
    gap: 8px;
}

.hi-foot .gi-link {
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .hi-grid {
        margin-top: 32px;
        gap: 14px;
    }

    .hi-card {
        padding: 22px 18px;
    }

    .hi-avatar {
        width: 56px;
        height: 56px;
    }

    .hi-name {
        font-size: 1.05rem;
    }
}

/* ═══════════════════════════════════════════
   TOAST
   showToast() has been called from utils.js, pay.js and the checkout for a
   long time and every one of those calls produced a bare <div class="toast">
   with no rule anywhere in the project to style it — an unstyled block
   dropped at the end of <body>, which on a dark page is an invisible error
   message. These are the rules it always assumed it had.
═══════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    max-width: min(440px, calc(100vw - 32px));
    padding: 14px 22px;
    border-radius: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--off-white);
    font-family: "Cairo", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    animation: toastIn 0.28s ease;
}

.toast.success {
    border-color: var(--gold-border);
}

.toast.error {
    border-color: rgba(239, 68, 68, 0.45);
    color: #ffe3e3;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
    }
}

/* ═══════════════════════════════════════════
   AUTH MODAL SYSTEM
═══════════════════════════════════════════ */
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 20px;
}

.auth-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: 24px;
    padding: 44px 36px;
    width: 100%;
    max-width: 440px;
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 60px var(--gold-glow), 0 30px 80px rgba(0, 0, 0, 0.7);
    max-height: 90vh;
    overflow-y: auto;
}

.auth-modal::-webkit-scrollbar {
    width: 4px;
}

.auth-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.auth-modal::-webkit-scrollbar-thumb {
    background: var(--green, #c1ff11);
    border-radius: 10px;
}

.auth-modal::-webkit-scrollbar-thumb:hover {
    background: #a3e600;
}

.auth-modal-backdrop.open .auth-modal {
    transform: translateY(0) scale(1);
}

.auth-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--muted-light);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Cairo", sans-serif;
}

.auth-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--red);
}

.auth-modal .card-title {
    font-size: 1.6rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 6px;
    color: var(--off-white);
}

.auth-modal .card-title .gold {
    color: var(--gold);
}

.auth-modal .card-sub {
    text-align: center;
    color: var(--muted-light);
    font-size: 0.88rem;
    margin-bottom: 28px;
}

.auth-modal .field {
    margin-bottom: 18px;
}

.auth-modal label {
    display: block;
    font-size: 0.82rem;
    color: var(--muted-light);
    margin-bottom: 6px;
    font-weight: 600;
}

.auth-modal input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    color: var(--off-white);
    font-family: "Cairo", sans-serif;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: right;
}

.auth-modal input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.auth-modal input::placeholder {
    color: var(--muted);
}

.auth-modal .auth-btn {
    width: 100%;
    background: var(--gold);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-family: "Cairo", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}

.auth-modal .auth-btn:hover {
    box-shadow: 0 0 28px var(--gold-glow);
    transform: translateY(-1px);
}

.auth-modal .auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-modal .auth-btn .btn-text {
    transition: opacity 0.2s;
}

.auth-modal .auth-btn.loading .btn-text {
    opacity: 0;
}

.auth-modal .auth-btn .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
}

.auth-modal .auth-btn.loading .spinner {
    display: block;
}

.auth-modal .modal-alert {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    display: none;
    text-align: center;
}

.auth-modal .modal-alert.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ff6b6b;
    display: block;
}

.auth-modal .modal-alert.success {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-light);
    display: block;
}

.auth-modal .bottom-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--muted-light);
}

.auth-modal .bottom-link a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
    font-family: "Cairo", sans-serif;
    font-size: 0.85rem;
}

.auth-modal .bottom-link a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Adjust hero top padding for fixed nav */
.urgency-topbar {
    margin-top: 64px;
    display: none;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Navigation & Features
═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .main-nav {
        padding: 0 20px;
    }

    .nav-links,
    .nav-auth {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-drawer {
        display: flex;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 32px;
    }

    .feature-card {
        padding: 24px 16px;
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .feature-card h4 {
        font-size: 0.88rem;
    }

    .feature-card p {
        font-size: 0.76rem;
    }

    .auth-modal {
        padding: 32px 22px;
        border-radius: 18px;
    }
}

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

    .features-section {
        padding: 50px 0;
    }

    .feature-card {
        text-align: right;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 20px 16px;
    }

    .feature-icon {
        margin: 0;
        flex-shrink: 0;
    }
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ═══════════════════════════════════════════
   COURSES CAROUSEL
═══════════════════════════════════════════ */
.courses-carousel-wrapper {
    position: relative;
    margin-top: 40px;
    overflow: hidden;
    padding: 10px 0;
}

.courses-carousel-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 10px 20px;
    -ms-overflow-style: none;
}

.courses-carousel-track::-webkit-scrollbar {
    display: none;
}

.course-carousel-card {
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
    position: relative;
    overflow: hidden;
    direction: ltr;
    cursor: pointer;
}

.course-carousel-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}

.course-carousel-card:hover {
    border-color: var(--border-gold);
    box-shadow: 0 0 40px rgba(193, 255, 17, 0.08);
    transform: translateY(-4px);
}

.course-carousel-card:hover::before {
    opacity: 1;
}

.course-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(102, 199, 244, 0.08);
    border: 1px solid rgba(102, 199, 244, 0.2);
    font-family: "IBM Plex Mono", monospace;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 14px;
}

.course-carousel-card h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--off-white);
    margin-bottom: 6px;
}

.course-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--muted-light);
}

.course-card-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.course-card-meta span:last-child {
    margin-right: auto;
}

.course-card-meta i {
    color: var(--gold);
    font-size: 0.7rem;
}

.course-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gold);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 18px;
    color: #15180c;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 20px rgba(193, 255, 17, 0.2);
}

.course-carousel-arrow:hover {
    box-shadow: 0 4px 30px rgba(193, 255, 17, 0.4);
    transform: translateY(-50%) scale(1.05);
}

.course-carousel-arrow.prev {
    right: 12px;
}

.course-carousel-arrow.next {
    left: 12px;
}

/* ═══════════════════════════════════════════
   ANIMATED COUNTER STATS
═══════════════════════════════════════════ */
.stat-num .counter-value {
    font-family: "IBM Plex Mono", monospace;
    color: #D4AF37;
    -webkit-text-fill-color: #D4AF37;
}

@media (max-width: 480px) {
    .course-carousel-card {
        min-width: 260px;
        max-width: 260px;
        padding: 22px 18px;
    }

    .courses-carousel-wrapper {
        margin-top: 24px;
    }

    .course-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════
   MISSING IMAGE FALLBACKS
═══════════════════════════════════════════ */
/* (old .m-slide styles removed — 3D slider replaced with marquee) */

/* Ensure nav logo area doesn't collapse when image is missing */
.nav-logo {
    min-width: 32px;
    min-height: 32px;
}

/* ═══════════════════════════════════════════
   COURSE PREVIEW PAGE (/course-details)
   Rebuilt in Phase 3. The old rules for this page — the giant hero video
   thumbnail, the sales sidebar with its subscribe button, the long
   description and the before/after comparison table — were deleted along
   with the markup that used them; nothing else on the site referenced them.
═══════════════════════════════════════════ */
.cd-page {
    padding: 130px 0 90px;
    min-height: 70vh;
}

.cd-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted-light);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 28px;
    transition: color 0.25s;
}

.cd-back-btn:hover {
    color: var(--gold);
}

/* The arrow points back towards the start edge, which flips with the
   document direction. */
.cd-back-icon {
    transition: transform 0.25s;
}

[dir="ltr"] .cd-back-icon {
    transform: scaleX(-1);
}

.cd-back-btn:hover .cd-back-icon {
    transform: translateX(4px);
}

[dir="ltr"] .cd-back-btn:hover .cd-back-icon {
    transform: scaleX(-1) translateX(4px);
}

.cd-head {
    margin-bottom: 34px;
}

.cd-title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 14px;
}

/* "ضمن مسار الأوتوميشن" — the onward link to /tracks that replaced the
   long marketing copy. */
.cd-trackline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 1rem;
}

.cd-track-pre {
    color: var(--muted-light);
}

.cd-track-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    padding: 6px 18px;
    border-radius: 100px;
    transition: background 0.25s, border-color 0.25s;
}

.cd-track-link:hover {
    background: rgba(193, 255, 17, 0.14);
    border-color: var(--gold);
}

/* Video + lessons. The video column is deliberately the narrower of the
   two: the brief was that it must not dominate the page the way the old
   full-width hero did. It is the first child, so it sits on the start
   edge — right in RTL, left in LTR — with no language-specific rules. */
.cd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 70px;
}

.cd-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
}

.cd-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder until the client sends the course intro videos: the course
   thumbnail, dimmed, with a label over it. */
.cd-video-empty img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.cd-video-empty-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 16px;
    color: var(--off-white);
    font-size: 0.92rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.35);
}

.cd-video-empty-body i {
    font-size: 2.2rem;
    color: var(--gold);
    opacity: 0.8;
}

.cd-lessons-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.cd-lessons-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin: 0;
}

.cd-lessons-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted-light);
    font-size: 0.9rem;
}

.cd-meta-item i {
    color: var(--gold);
}

.cd-lessons-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.cd-lesson-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--off-white);
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 0;
}

.cd-lesson-title i {
    color: var(--gold);
    opacity: 0.75;
    flex-shrink: 0;
}

.cd-lesson-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Durations are always written "1h 18m". Left to the bidi algorithm inside
   an RTL page that reorders into "18m 1h" with a stray gap, so the run is
   isolated as LTR — the same reason the video player's timecode is. */
.cd-lesson-dur {
    color: var(--muted-light);
    font-size: 0.85rem;
    font-family: 'IBM Plex Mono', monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

.cd-meta-item span,
.gc-hours span {
    unicode-bidi: isolate;
}

/* Locked, and staying locked — this is a public preview. */
.cd-lesson-lock {
    color: var(--muted);
    font-size: 0.85rem;
}

.cd-lesson-skeleton {
    padding: 18px;
}

.cd-lesson-skeleton .gc-sk-line {
    display: block;
    width: 60%;
    height: 1em;
}

.cd-lesson-none {
    padding: 20px;
    text-align: center;
    color: var(--muted-light);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.cd-locked-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    color: var(--muted-light);
    font-size: 0.88rem;
}

.cd-locked-note i {
    color: var(--gold);
    opacity: 0.75;
}

.cd-section-title {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--white);
    margin: 0 0 22px;
}

.cd-instructor {
    max-width: 820px;
}

/* Inside a card the bar fills the card's width; standing on its own here it
   would stretch into a very wide, mostly empty pill, so it shrinks to fit. */
.cd-instructor .gi-bar-compact {
    width: fit-content;
    max-width: 100%;
}

.cd-instructor .gi-facts {
    margin-top: 12px;
}

@media (max-width: 899px) {
    .cd-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .cd-page {
        padding: 110px 0 70px;
    }
}


/* ════════════════════════════════════════
    PREMIUM COURSES CATALOG STYLES
════════════════════════════════════════ */
.premium-courses-section {
    padding: 80px 0;
    background: var(--bg);
    color: var(--white);
    direction: rtl;
}

.premium-courses-section .container {
    max-width: 1350px;
}

.courses-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.neon-subtitle {
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(193, 255, 17, 0.3);
    margin-bottom: 8px;
    display: block;
}

.courses-main-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--white);
    margin: 0;
}

/* Neutral border. It used to be green, which — next to green cards, a green
   button and a green eyebrow — was most of what the client meant by the
   section being all green. The numbers inside stay green; that is the accent. */
.courses-info-bar {
    display: flex;
    gap: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: 100px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-light);
    font-size: 0.95rem;
}

.info-item i,
.info-item strong {
    color: var(--gold);
}

/* The old course-card markup that lived inside the Swiper carousel —
   .premium-course-card, its image/number/content/meta blocks and the
   lessons accordion — was deleted with the carousel. The member course
   page has its own copies of those class names but is styled by
   dashboard.css, not this file, so nothing here was still reachable. */

/* ─── Logo Glow Effect ─── */
.nav-logo {
    position: relative;
    display: inline-block;
}

.nav-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../imgs/ghawy-new-logo-transparent.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(12px) brightness(1.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.nav-logo:hover::before {
    opacity: 1;
    transform: scale(1.05);
}

/* Bottom CTA */
.courses-bottom-cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-join-now {
    background: var(--gold);
    color: #000000;
    font-weight: 900;
    font-size: 1.3rem;
    padding: 18px 60px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(193, 255, 17, 0.3);
    transition: all 0.3s;
    font-family: inherit;
    text-decoration: none;
}

.btn-join-now:hover {
    background: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(193, 255, 17, 0.5);
}

/* "المزيد" → /courses. Outlined rather than solid so it reads as a secondary
   action next to the section's real CTA further down the page. */
.btn-more-courses {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold-border);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 46px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.btn-more-courses:hover {
    background: var(--gold-subtle);
    border-color: var(--gold);
    transform: translateY(-2px);
}

/* Hide the totals until catalog.js has summed them, so the bar never flashes
   the "—" placeholders. */
.courses-info-bar.is-pending {
    opacity: 0;
}

.courses-info-bar {
    transition: opacity 0.3s;
}


/* ═══════════════════════════════════════════════════════════════
   COURSE CATALOG — cards + instructor bar
   Rendered by src/js/catalog.js. The same markup is used on the home
   page, on /courses and (the instructor bar) on /course-details and
   /instructors, so these rules must not depend on any page context.
   Written with logical properties throughout — the site flips between
   RTL and LTR and these components flip with it.
   ═══════════════════════════════════════════════════════════════ */

.gc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

/* The card's layout came from a reference the client sent: a big title, and
   the instructor and the runtime on opposite edges of one row. The reference
   was white and the card was built white; the client then asked for the
   surface to go back to dark like the rest of the site.
   Going dark does NOT mean going back to the card before all this. That one
   had a green glow on hover, a green-tinted thumbnail, a green-filled button
   and a green avatar, which is what "the green is taking everything" was
   about. There used to be a 10px green band between the thumbnail and the
   body too; the client asked for it off, so the seam is now the hairline on
   .gc-media. Green here is the clock icon, full stop — the hover is a plain
   lift and a slightly brighter border. */
.gc-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.gc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Thumbnail. Fixed aspect ratio so a mix of image sizes still lines the
   cards up on the grid.
   The bottom border is the seam that the green band used to be: without any
   separation a dark photo bleeds straight into the dark card body and the two
   read as one smudge. It is deliberately stronger than --border (0.08): that
   is tuned for a line between a card and the page background, and against a
   near-black thumbnail on a near-black body it disappeared. Neutral white at
   low alpha keeps the edge legible without putting colour back on the card. */
.gc-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0d0d0d;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

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

.gc-card:hover .gc-media img {
    transform: scale(1.04);
}

.gc-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px 20px;
    flex: 1;
}

.gc-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.4;
    color: var(--white);
}

/* Instructor on one edge, runtime on the other. `space-between` on a flex row
   mirrors itself with the document direction, so this needs no [dir] rule —
   in Arabic the instructor lands on the right and the clock on the left. */
.gc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Photo then name, in that order in the markup, so the row reads correctly in
   both directions without a single left/right rule: the avatar ends up on the
   right in Arabic and on the left in English. */
.gc-inst {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}

.gc-inst-ident {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.gc-inst-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s;
}

/* The short role — "مؤسس غاوي". Smaller and grey under the name, which is why
   `roleShort` exists in catalog.js: the full role wraps at this width. */
.gc-inst-role {
    font-size: 0.76rem;
    color: var(--muted-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-inst:hover .gc-inst-name {
    color: var(--gold);
}

.gc-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Until the real photos land: initials on a raised neutral circle rather than
   the brand gradient the wider instructor bars use — seven gold discs down a
   course grid is exactly the green creep this card is avoiding. */
.gc-avatar.gi-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.09);
    color: var(--white);
    font-weight: 800;
    font-size: 0.74rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.gc-hours {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: var(--muted-light);
    font-size: 0.9rem;
    font-weight: 600;
}

.gc-hours i {
    color: var(--gold);
}

/* Pushed to the bottom so the button sits on one line across the row even
   when titles wrap to different heights. */
.gc-btn {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--gold);
    color: #000;
    font-weight: 800;
    font-size: 0.98rem;
    padding: 12px 20px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.25s, box-shadow 0.25s;
}

.gc-btn:hover {
    background: var(--gold-light);
    box-shadow: 0 0 24px rgba(193, 255, 17, 0.3);
}

/* Scoped to the course card only — `.gc-btn` is shared with the instructor
   cards and the track pages, which keep the solid green fill.
   Here it is outlined instead. Seven solid green pills down the course grid
   was a good part of what the client meant by the green taking over, and that
   was true on the dark card as much as on the white one, so the surface going
   back to dark does not bring the fill back with it. */
.gc-card .gc-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.gc-card .gc-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* ─── Skeleton ─── */
.gc-card-skeleton {
    pointer-events: none;
}

.gc-sk {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 25%,
            rgba(255, 255, 255, 0.14) 37%,
            rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
    animation: statShimmer 1.3s ease-in-out infinite;
    border-radius: 8px;
}

.gc-card-skeleton .gc-media {
    background: none;
}

/* Mirrors `.gc-meta` so the skeleton has the real card's height. */
.gc-sk-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gc-sk-line {
    height: 1em;
}

.gc-sk-title {
    width: 75%;
    height: 1.3em;
}

.gc-sk-short {
    width: 45%;
}

/* Sits on one edge of `.gc-sk-meta` opposite the runtime line, so it is the
   height of the avatar rather than of the old boxed instructor bar. */
.gc-sk-inst {
    height: 38px;
    width: 45%;
    border-radius: 100px;
}

.gc-sk-btn {
    margin-top: auto;
    height: 44px;
    border-radius: 100px;
}

/* ─── Empty state ─── */
.gc-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
    color: var(--muted-light);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.gc-empty i {
    font-size: 2.4rem;
    color: var(--gold);
    opacity: 0.7;
}

.gc-empty p {
    margin: 0;
    max-width: 42ch;
}

/* ═══ Instructor bar ═══ */

.gi-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--gold-border);
}

/* Placeholder until real photos land: initials on the brand gradient. */
.gi-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #000;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: -0.02em;
    border: none;
}

.gi-avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 1.35rem;
}

.gi-ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gi-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gi-role {
    font-size: 0.78rem;
    color: var(--muted-light);
    line-height: 1.35;
}

/* ─── Compact: the row inside a course card ─── */
.gi-bar-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 100px;
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s;
}

.gi-bar-compact:hover {
    border-color: var(--gold-border);
    background: var(--gold-subtle);
}

.gi-bar-compact .gi-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gi-bar-compact:hover .gi-name {
    color: var(--gold);
}

/* The boxed "full" instructor bar was removed — it wrapped the identity,
   the facts, the client strip and the intro video in one card and left a
   lot of dead space around the video. Those parts are rendered separately
   now: the course preview shows the plain bar plus the fact pills, and the
   instructor page lays each part out down the page. */
.gi-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.gi-fact {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--gold-border);
    padding: 4px 12px;
    border-radius: 100px;
}

/* Client strip. Chips today because only names were supplied; the moment a
   `logo` path is set in catalog.js the same chip holds an image instead. */
.gi-clients-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.gi-client {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.gi-client img {
    max-height: 24px;
    max-width: 100px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6);
    opacity: 0.85;
}

.gi-client-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--off-white);
}

/* Intro video (2 min). Capped so it never dominates the page. */
.gi-video {
    max-width: 460px;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

.gi-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.gi-video-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--border);
    color: var(--muted-light);
    font-size: 0.88rem;
    text-align: center;
    padding: 16px;
}

.gi-video-empty i {
    font-size: 1.8rem;
    color: var(--gold);
    opacity: 0.6;
}

/* ─── Instructor links ─── */
.gi-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gi-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--off-white);
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
}

.gi-link:hover {
    color: var(--gold);
    border-color: var(--gold-border);
    background: var(--gold-subtle);
    transform: translateY(-2px);
}

/* ─── /instructors ─── */
.gi-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.gi-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 26px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s, transform 0.3s;
}

.gi-card:hover {
    border-color: rgba(193, 255, 17, 0.45);
    transform: translateY(-4px);
}

.gi-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    width: 100%;
}

.gi-card .gc-btn {
    width: 100%;
}

/* The detail view leads with a back link and the instructor's own header
   rather than the centred page heading the shell pages use. */
.page-shell-head:has(.ins-back) {
    text-align: start;
    max-width: none;
    margin-bottom: 46px;
}

@media (max-width: 599px) {
    .ins-hero {
        gap: 16px;
    }

    .gi-avatar-xl {
        width: 72px;
        height: 72px;
        font-size: 1.4rem;
    }
}

/* The instructor identity, flat on the page rather than inside a card. */
.ins-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 8px;
}

.gi-avatar-xl {
    width: 96px;
    height: 96px;
    font-size: 1.8rem;
}

.ins-hero-ident {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ins-hero-name {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
}

.ins-hero-role {
    font-size: 1.02rem;
    color: var(--muted-light);
    margin: 0;
}

.ins-hero .gi-facts {
    margin-top: 6px;
}

.ins-detail {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.ins-block .gi-video {
    margin: 0;
}

.ins-bio {
    margin: 0;
    max-width: 70ch;
    line-height: 1.9;
    color: var(--muted-light);
    font-size: 1.02rem;
}

/* ═══════════════════════════════════════════════════════════════
   LEARNING TRACKS — /tracks, /tracks?t=<slug> and the home teaser
   Rendered by src/js/catalog.js. Same rule as the course catalog above:
   these components appear on more than one page, so nothing here may
   depend on page context, and everything is written with logical
   properties because the whole site flips between RTL and LTR.

   ── The accent system ──
   The single most important job of this page is that a visitor can tell
   the two FAMILIES of track apart at a glance. So every component that
   belongs to a family carries `.tr-accent-gold` (deep tracks — you learn
   AI itself) or `.tr-accent-blue` (applied tracks — you use AI in your
   own field), and reads its colours from the four variables those two
   classes set. No component hard-codes a family colour, which is why the
   card, the chip, the comparison column and the detail header all stay
   in sync from one class on the wrapper.
   ═══════════════════════════════════════════════════════════════ */

/* Fallback so a component rendered without a family still has colours.
   This MUST stay above the two accent classes: both are single-class
   selectors, so they tie on specificity and the later rule wins — with
   this block below them every component would silently render gold. */
.tr-card,
.tr-family,
.tr-explain,
.tr-detail,
.tr-detail-head,
.tr-cmp-head,
.tr-cmp-stack {
    --tr-ink: var(--gold);
    --tr-soft: var(--gold-subtle);
    --tr-line: var(--gold-border);
    --tr-glow: var(--gold-glow);
}

.tr-accent-gold {
    --tr-ink: #c1ff11;
    --tr-soft: rgba(193, 255, 17, 0.07);
    --tr-line: rgba(193, 255, 17, 0.22);
    --tr-glow: rgba(193, 255, 17, 0.18);
}

.tr-accent-blue {
    --tr-ink: #3f8ff9;
    --tr-soft: rgba(63, 143, 249, 0.08);
    --tr-line: rgba(63, 143, 249, 0.26);
    --tr-glow: rgba(63, 143, 249, 0.2);
}

/* /tracks carries grids and a comparison table — it needs more room than
   the 940px reading column the shell pages default to. */
.tr-container {
    max-width: 1180px;
}

.tr-section {
    margin-bottom: 76px;
}

.tr-section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 900;
    line-height: 1.35;
    color: var(--white);
    margin: 0 0 12px;
}

.tr-section-lead {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--muted-light);
    margin: 0 0 30px;
    max-width: 72ch;
}

/* ─── A) "What is a deep track / an applied track" ─── */
.tr-explain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.tr-explain {
    padding: 30px 28px;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, var(--tr-soft) 0%, transparent 70%),
        var(--bg-card);
    border: 1px solid var(--tr-line);
    border-radius: var(--radius-lg);
}

.tr-explain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--tr-soft);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.tr-explain-name {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--white);
    margin: 0 0 10px;
}

.tr-explain-line {
    margin: 0 0 14px;
    color: var(--off-white);
    line-height: 1.85;
    font-size: 1.02rem;
}

/* The concrete "someone like you" line — the one that usually ends the
   WhatsApp question before it is asked. */
.tr-explain-eg {
    margin: 0;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--tr-line);
    color: var(--muted-light);
    font-size: 0.94rem;
    line-height: 1.75;
}

/* ─── B) The head-to-head comparison ───
   Two renderings of the same data: a table for wide screens and one
   stacked block per family for phones, where a two-column table of long
   Arabic sentences is unreadable. Exactly one is ever visible. */
.tr-cmp-scroll {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.tr-cmp {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.tr-cmp th,
.tr-cmp td {
    padding: 20px 22px;
    vertical-align: top;
    text-align: start;
    border-block-end: 1px solid var(--border);
}

.tr-cmp tbody tr:last-child th,
.tr-cmp tbody tr:last-child td {
    border-block-end: none;
}

.tr-cmp-corner {
    width: 190px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tr-cmp-head {
    width: calc((100% - 190px) / 2);
    background: var(--tr-soft);
    border-block-end: 2px solid var(--tr-line) !important;
}

.tr-cmp-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    margin-bottom: 10px;
}

.tr-cmp-head-name {
    display: block;
    font-size: 1.18rem;
    font-weight: 900;
    color: var(--white);
}

.tr-cmp-head-tag {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tr-ink);
}

/* The question column. Sticky so the row label stays readable while the
   table scrolls sideways on narrow tablets. */
.tr-cmp-label {
    position: sticky;
    inset-inline-start: 0;
    background: var(--bg-raised);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    white-space: normal;
}

.tr-cmp-label i {
    color: var(--muted-light);
    margin-inline-end: 8px;
}

.tr-cmp tbody td {
    color: var(--muted-light);
    font-size: 0.96rem;
    line-height: 1.8;
}

.tr-cmp tbody tr:hover td {
    color: var(--off-white);
    background: rgba(255, 255, 255, 0.015);
}

.tr-cmp-stacked {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.tr-cmp-stack {
    background: var(--bg-card);
    border: 1px solid var(--tr-line);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
}

.tr-cmp-stack-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block-end: 18px;
    margin-block-end: 6px;
    border-block-end: 1px solid var(--border);
}

.tr-cmp-stack-list {
    margin: 0;
}

.tr-cmp-stack-list dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--white);
}

.tr-cmp-stack-list dt i {
    color: var(--tr-ink);
    opacity: 0.85;
}

.tr-cmp-stack-list dd {
    margin: 6px 0 0;
    padding-inline-start: 24px;
    color: var(--muted-light);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ─── The heading above each family's grid ─── */
.tr-family-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 26px;
}

.tr-family-heading .tr-section-lead {
    margin-bottom: 0;
}

.tr-family-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--tr-soft);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    font-size: 1.3rem;
}

/* ─── Track cards ───
   Both families use this card unchanged — same size, same slots, same
   order — so the two grids can be compared by eye. Only the accent
   variables differ. */
.tr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.tr-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.tr-card:hover {
    transform: translateY(-6px);
    border-color: var(--tr-line);
    box-shadow: 0 0 30px var(--tr-glow), 0 12px 40px rgba(0, 0, 0, 0.5);
}

.tr-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1;
}

.tr-card-title {
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.35;
    color: var(--white);
}

.tr-card-short {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--muted-light);
}

.tr-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 2px;
}

.tr-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    color: var(--muted-light);
    unicode-bidi: isolate;
}

.tr-meta-item i {
    color: var(--tr-ink);
}

/* "قريباً". Deliberately loud rather than hidden: an empty track is part
   of the message that the platform is still growing, so it is a designed
   state and not something to apologise for. */
.tr-badge-soon {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--tr-ink);
    background: var(--tr-soft);
    border: 1px dashed var(--tr-line);
    padding: 5px 14px;
    border-radius: 100px;
}

.tr-badge-soon::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tr-ink);
    opacity: 0.8;
}

.tr-card-cta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--tr-ink);
}

.tr-card-cta::after {
    content: "\f177";
    /* fa-arrow-left — forward in RTL */
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 0.78em;
    margin-inline-start: 8px;
    display: inline-block;
    transition: transform 0.25s;
}

[dir="ltr"] .tr-card-cta::after {
    transform: scaleX(-1);
}

.tr-card:hover .tr-card-cta::after {
    transform: translateX(-4px);
}

[dir="ltr"] .tr-card:hover .tr-card-cta::after {
    transform: scaleX(-1) translateX(-4px);
}

.tr-card-skeleton {
    pointer-events: none;
}

/* ─── Track artwork ───
   `image: null` in catalog.js lands here: a blueprint-grid panel tinted
   by the family, with the track's icon on it. Setting a real path in
   catalog.js swaps in <img> and none of this applies — no HTML or CSS
   change is needed when the artwork arrives. */
.tr-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-raised);
}

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

.tr-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 85% 75% at 50% 12%, var(--tr-glow) 0%, transparent 72%),
        linear-gradient(145deg, #0e0e0e 0%, #000000 65%);
}

.tr-thumb-ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tr-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tr-line) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 46%, #000 15%, transparent 78%);
    mask-image: radial-gradient(ellipse 72% 72% at 50% 46%, #000 15%, transparent 78%);
}

.tr-thumb-ph i {
    position: relative;
    font-size: 2.7rem;
    color: var(--tr-ink);
    filter: drop-shadow(0 0 22px var(--tr-glow));
}

.tr-card:hover .tr-thumb-ph i {
    transform: scale(1.06);
    transition: transform 0.35s;
}

.tr-thumb-hero {
    border-radius: var(--radius-lg);
    border: 1px solid var(--tr-line);
}

.tr-thumb-hero.tr-thumb-ph i {
    font-size: 3.6rem;
}

/* ─── D) "Not sure where to start" ─── */
.tr-start {
    padding: 40px 36px;
    background:
        radial-gradient(ellipse 70% 100% at 100% 0%, rgba(193, 255, 17, 0.06) 0%, transparent 65%),
        var(--bg-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
}

.tr-start-title {
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight: 900;
    color: var(--white);
    margin: 0 0 24px;
}

.tr-start-steps {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    counter-reset: none;
}

.tr-start-steps li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tr-start-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: #000;
    font-weight: 900;
    font-size: 0.92rem;
    font-family: 'IBM Plex Mono', monospace;
}

.tr-start-text {
    color: var(--muted-light);
    line-height: 1.85;
    font-size: 1rem;
}

.tr-start-cta {
    display: inline-block;
    width: auto;
    padding-inline: 30px;
}

/* ═══ Track detail — /tracks?t=<slug> ═══
   Deliberately built from the course preview's vocabulary (.cd-back-btn,
   .cd-title, .cd-section-title) so moving between a track and a course
   feels like one site. */
.tr-detail-head {
    text-align: start;
    max-width: 900px;
}

.page-shell-head:has(.tr-back) {
    text-align: start;
    max-width: none;
    margin-bottom: 40px;
}

.tr-family-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 7px 18px;
    border-radius: 100px;
    background: var(--tr-soft);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s;
}

.tr-family-pill:hover {
    border-color: var(--tr-ink);
}

.tr-family-pill-sep {
    opacity: 0.5;
}

.tr-detail-about {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.9;
    color: var(--muted-light);
    max-width: 68ch;
}

.tr-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 70px;
}

.tr-detail-facts {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* The totals — summed from the catalog by trackStats(), never typed. */
.tr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tr-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 130px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tr-stat i {
    color: var(--tr-ink);
    font-size: 1rem;
}

.tr-stat-value {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--white);
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1;
}

.tr-stat-label {
    font-size: 0.85rem;
    color: var(--muted-light);
}

.tr-stat-soon {
    flex-basis: 100%;
    border-style: dashed;
    border-color: var(--tr-line);
    color: var(--tr-ink);
}

.tr-stat-sk {
    display: block;
    width: 100%;
    height: 1.4em;
}

.tr-detail-dl {
    margin: 0;
}

.tr-detail-dl dt {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--white);
    margin-top: 18px;
}

.tr-detail-dl dt:first-child {
    margin-top: 0;
}

.tr-detail-dl dd {
    margin: 6px 0 0;
    color: var(--muted-light);
    font-size: 0.97rem;
    line-height: 1.8;
}

.tr-block {
    margin-bottom: 66px;
}

.tr-block-lead {
    margin: -10px 0 24px;
    color: var(--muted-light);
    font-size: 0.98rem;
    line-height: 1.8;
}

/* ─── The ordered course list ───
   The order is the point of this section, so the step number is a real
   element and not a ::marker: it has to stay legible next to a thumbnail
   and it must not flip meaning between RTL and LTR. */
.tr-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tr-step {
    position: relative;
}

/* The connecting line down the timeline — drawn from each step to the
   next, so the last one has none. */
.tr-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 43px;
    width: 2px;
    height: 14px;
    background: var(--tr-line);
}

[dir="ltr"] .tr-step:not(:last-child)::after {
    inset-inline-start: 43px;
}

.tr-step-link {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.tr-step-link:hover {
    border-color: var(--tr-line);
    background: var(--bg-raised);
    transform: translateY(-2px);
}

.tr-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tr-soft);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
}

.tr-step-link:hover .tr-step-num {
    background: var(--tr-ink);
    color: #000;
}

.tr-step-thumb {
    display: block;
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bg-raised);
}

.tr-step-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.tr-step-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.tr-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white);
}

.tr-step-meta {
    font-size: 0.85rem;
    color: var(--muted-light);
    unicode-bidi: isolate;
}

.tr-step-arrow {
    flex-shrink: 0;
    color: var(--muted);
    transition: color 0.25s, transform 0.25s;
}

[dir="ltr"] .tr-step-arrow {
    transform: scaleX(-1);
}

.tr-step-link:hover .tr-step-arrow {
    color: var(--tr-ink);
    transform: translateX(-4px);
}

[dir="ltr"] .tr-step-link:hover .tr-step-arrow {
    transform: scaleX(-1) translateX(-4px);
}

.tr-step-skeleton {
    pointer-events: none;
}

.tr-step-skeleton .tr-step-num,
.tr-step-skeleton .tr-step-thumb {
    border: none;
}

.tr-step-skeleton>* {
    display: flex;
}

.tr-steps-empty {
    gap: 0;
}

/* ─── The designed "coming soon" state ───
   An empty track must never look like a bug or a blank page: it gets its
   own panel with a reason and somewhere to go next. */
.tr-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 54px 28px;
    background:
        radial-gradient(ellipse 80% 90% at 50% 0%, var(--tr-soft) 0%, transparent 70%),
        var(--bg-card);
    border: 1px dashed var(--tr-line);
    border-radius: var(--radius-lg);
}

.tr-soon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--tr-soft);
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
    font-size: 1.5rem;
}

.tr-soon-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--white);
}

.tr-soon-note {
    margin: 0;
    max-width: 52ch;
    color: var(--muted-light);
    line-height: 1.85;
}

.tr-soon-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.tr-soon-actions .gc-btn {
    padding-inline: 28px;
}

.tr-soon-alt {
    color: var(--muted-light);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.tr-soon-alt:hover {
    color: var(--tr-ink);
}

/* ─── Outcomes ─── */
.tr-outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.tr-outcome {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--off-white);
    font-size: 0.97rem;
    line-height: 1.7;
}

.tr-outcome i {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--tr-ink);
}

.tr-instructor+.tr-instructor {
    margin-top: 22px;
}

.tr-instructor .gi-bar-compact {
    width: fit-content;
    max-width: 100%;
}

/* ═══ Home-page teaser (#trackFamilies) ═══ */
.tracks-intro-section {
    padding: 20px 0 80px;
    background: var(--bg);
    color: var(--white);
}

.tracks-intro-section .container {
    max-width: 1350px;
}

.tracks-intro-lead {
    max-width: 76ch;
    margin: -10px 0 34px;
    color: var(--muted-light);
    font-size: 1.05rem;
    line-height: 1.9;
}

.tr-family-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.tr-family {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 28px;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, var(--tr-soft) 0%, transparent 70%),
        var(--bg-card);
    border: 1px solid var(--tr-line);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s, transform 0.3s;
}

.tr-family:hover {
    transform: translateY(-4px);
}

.tr-family-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tr-family-ident {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tr-family-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--white);
}

.tr-family-tag {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tr-ink);
}

.tr-family-line {
    margin: 0;
    color: var(--muted-light);
    line-height: 1.85;
    font-size: 1rem;
}

/* The tracks inside a family, as chips. Each one is already a link to its
   own page — the visitor does not have to go through /tracks first. */
.tr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.tr-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--off-white);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    unicode-bidi: isolate;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.tr-chip:hover {
    color: var(--tr-ink);
    border-color: var(--tr-line);
    background: var(--tr-soft);
}

.tr-chip.is-soon {
    border-style: dashed;
    color: var(--muted-light);
}

/* ─── Tracks responsive ─── */
@media (max-width: 1099px) {
    .tr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tr-detail-top {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .tr-thumb-hero {
        max-width: 560px;
    }
}

@media (max-width: 899px) {

    /* Below this the two-column table stops being readable — the stacked
       rendering of the same data takes over. */
    .tr-cmp-scroll {
        display: none;
    }

    .tr-cmp-stacked {
        display: flex;
    }

    .tr-explain-grid,
    .tr-family-grid,
    .tr-outcomes {
        grid-template-columns: 1fr;
    }

    .tr-section {
        margin-bottom: 58px;
    }

    .tr-start {
        padding: 32px 24px;
    }
}

@media (max-width: 599px) {
    .tr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-family-heading {
        gap: 14px;
    }

    .tr-family-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .tr-explain,
    .tr-family {
        padding: 24px 20px;
    }

    .tr-step-link {
        gap: 12px;
        padding: 12px 14px;
    }

    /* The thumbnail is the first thing to go — the number and the title
       are what carry the ordering. */
    .tr-step-thumb {
        display: none;
    }

    .tr-step:not(:last-child)::after {
        inset-inline-start: 27px;
    }

    .tr-stat {
        flex: 1 1 100%;
    }

    .tr-soon {
        padding: 40px 20px;
    }

    .tr-soon-actions .gc-btn {
        width: 100%;
    }
}

/* ─── Catalog responsive ─── */
@media (max-width: 1099px) {
    .gc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 599px) {
    .gc-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gi-avatar-lg {
        width: 60px;
        height: 60px;
    }
}

/* ─── Responsive: Laptop ─── */
@media (max-width: 1199px) {}

/* ─── Responsive: Tablet ─── */
@media (max-width: 899px) {
    .courses-main-title {
        font-size: 2rem;
    }

    .courses-header-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 600px) {
    .courses-main-title {
        font-size: 1.6rem;
    }

    .courses-carousel-wrapper {
        margin-bottom: 30px;
    }
}

/* -- Hero Split Layout -- */
/* `min-height: 100vh` + `align-items: center` means any content the hero
   loses turns into space at BOTH ends. Taking the rating row out left a band
   of nothing between the stat cards and the courses section, so the bottom
   padding comes down to meet it (see the note on `.hero-stats-cards`). The
   top stays at 80px — the fixed nav sits over it. */
.hero {
    padding-top: 80px;
    padding-bottom: 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero .container {
    width: 100%;
    margin: 0 auto;
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* متساوية */
    gap: 50px;
    align-items: center;
    /* غير stretch لـ center */
    width: 100%;
    position: relative;
    z-index: 2;
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
}

/* Badge */
.pre-headline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(193, 255, 17, 0.08);
    border: 1px solid rgba(193, 255, 17, 0.25);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    font-weight: 600;
    color: #ccc;
    width: fit-content;
    letter-spacing: 0.04em;
}

/* Headline */
.hero-heading-split {
    display: flex;
    flex-direction: column;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    gap: 2px;
}

.hero-heading-split .line-white {
    color: #fff;
}

.hero-heading-split .line-green {
    color: var(--green, #c1ff11);
}

/* The headline is one full sentence now, not three short stacked lines, so it
   needs a much smaller type scale and real line-height or it overruns the
   hero on every size below desktop.
   The `h1.` prefix is deliberate: several breakpoint blocks further down set
   a font-size on `.hero-heading-split` (which this element still carries for
   the shared colour/RTL rules) and would otherwise win by source order. */
h1.hero-heading-single {
    display: block;
    font-size: clamp(1.65rem, 2.9vw, 2.7rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 100%;
}

/* The headline is two sentences, one per line, split at the full stop.
   `display: block` on the children rather than a <br> in the markup: the
   Arabic and the English break at different points, and each line owns its
   own data-ar/data-en. `text-wrap: balance` is applied per line so a line
   that does have to wrap on narrow screens wraps evenly instead of leaving
   one orphaned word. */
h1.hero-heading-single>span {
    display: block;
    text-wrap: balance;
}

.hero-heading-lead {
    color: #fff;
}

/* Second line: lighter weight and the brand green, so the two lines read as
   a headline plus its promise rather than one heavy slab of text. */
.hero-heading-tail {
    display: block;
    margin-top: 8px;
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1.35;
    color: var(--gold, #c1ff11);
}

/* Sub */
.hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: #aaa;
    line-height: 1.7;
    max-width: 500px;
    /* 8px spacing scale: Visually centered, pulled closer to H1 */
    margin: -8px 0 8px 0;
}

/* ── Hero stats ───────────────────────────────────────────────
   Rebuilt as cards and moved below the CTA row. The old inline
   `.hero-stats-inline` markup is gone from index.html; its rules are kept
   below because the breakpoint blocks further down still reference the
   class, and other pages may reuse it. */
.hero-stats-inline {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-stat-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
}

.hero-stat-inline i {
    font-size: 1.1rem;
    color: var(--green, #c1ff11);
    opacity: 0.8;
}

.stat-num-inline {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.stat-lbl-inline {
    display: block;
    font-size: 0.72rem;
    color: #888;
    margin-top: 2px;
}

/* ── Hero stat cards (current design) ─────────────────────────
   These live OUTSIDE .hero-split now — a centred band spanning the whole
   hero, below the text column and the video, above the rating row. The
   max-width keeps them from stretching into six thin strips on wide
   monitors; the per-breakpoint values are in the responsive block at the
   end of this file. */
/* The stat band is the last thing in the hero now that the rating row is
   gone. The hero is `min-height: 100vh` and centres its content, so losing
   that row left ~130px of dead space between the stats and the courses
   section on desktop; the extra top margin puts it back inside the hero
   where it reads as breathing room instead of a gap. Every breakpoint from
   the small-laptop one down sets its own margin-top, so this is desktop
   only — the narrow layouts never had the gap. */
.hero-stats-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1000px;
    margin: 120px auto 0;
}

.hero-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.hero-stat-card:hover {
    border-color: rgba(193, 255, 17, 0.35);
    background: rgba(193, 255, 17, 0.05);
    transform: translateY(-2px);
}

.hero-stat-card i {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--green, #c1ff11);
}

.hero-stat-value {
    display: block;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
}

.hero-stat-num {
    display: block;
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}

.hero-stat-lbl {
    display: block;
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
}

/* The live member count: the number and its "+" stay hidden behind a
   shimmer until GET /stats/public answers (or its fallback fires), so the
   counter never animates towards a stale figure. */
.stat-skeleton {
    display: none;
    width: 58px;
    height: 1.15em;
    border-radius: 6px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.06) 25%,
            rgba(255, 255, 255, 0.14) 37%,
            rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
    animation: statShimmer 1.3s ease-in-out infinite;
}

[data-stat-pending] {
    display: none;
}

[data-stat-pending]+.stat-plus {
    display: none;
}

[data-stat-pending]~.stat-skeleton {
    display: inline-block;
}

@keyframes statShimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-skeleton {
        animation: none;
    }
}

/* CTA Buttons */
.hero-cta-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-cta-solid {
    background: var(--green, #c1ff11);
    color: #000 !important;
    font-weight: 800;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-cta-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(193, 255, 17, 0.4);
}

.btn-cta-ghost {
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    border-radius: 12px;
    padding: 13px 24px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    /* It is an <a> now (links to /courses), not a <button> */
    text-decoration: none;
}

.btn-cta-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
}

/* The rating row that used to close the hero is gone (see the note further
   up). The stat cards are the last thing in the hero now; the space the row
   used to fill is absorbed by `.hero-stats-cards`'s top margin and the hero's
   own bottom padding, both adjusted above. */

/* -- RIGHT: Video Player Box -- */
.hero-right {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: auto;
}

.vsl-player-box {
    position: relative;
    width: 100%;
    height: 100%;
    /* aspect-ratio removed for dynamic stretch */
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Top progress bar */
.vsl-progress-top {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--green, #c1ff11);
    z-index: 20;
    transition: width 0.3s linear;
}

/* Overlay thumbnail */
.vsl-overlay-img {
    position: absolute;
    inset: 0;
    z-index: 5;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Unmute btn */
.custom-unmute-btn {
    position: absolute;
    /* Center it perfectly and prevent vertical stretching */
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    background: rgba(18, 49, 90, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 999px;
    /* Scaled down size maintaining 40px min-height for accessibility */
    padding: 6px 14px;
    min-height: 40px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    transition: background 0.2s, transform 0.2s;
}

.custom-unmute-btn:hover {
    background: rgba(193, 255, 17, 0.2);
    border-color: var(--green, #c1ff11);
}

.custom-unmute-btn.hide {
    opacity: 0;
    pointer-events: none;
}

/* -- Custom Controls Bar --
   Always LTR, in both site languages. Every video player in the world lays
   its transport controls out left-to-right, and more importantly the seek
   logic depends on it: `.vsl-seek-fill` grows with `width` (which fills from
   the inline start) while the click handler in main.js maps
   `(clientX - rect.left) / rect.width` — an LTR mapping. Letting the bar
   inherit the page's RTL made the fill grow from the right while a click
   still resolved from the left, so the two disagreed and seeking jumped to
   the mirrored position. It also flipped the "current / total" time via
   bidi reordering. Pinning the direction here fixes all three at once. */
.vsl-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    direction: ltr;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}

.vsl-ctrl-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.vsl-ctrl-btn:hover {
    color: var(--green, #c1ff11);
}

.vsl-time {
    font-size: 0.7rem;
    color: #ccc;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: monospace;
    /* Belt and braces with the bar's own `direction` above: this element is
       written as "current / total" and must never be reordered. */
    direction: ltr;
    unicode-bidi: isolate;
}

.vsl-seek-bar-wrap {
    flex: 1;
    padding: 6px 0;
    cursor: pointer;
}

.vsl-seek-track {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.vsl-seek-fill {
    height: 100%;
    width: 0%;
    background: var(--green, #c1ff11);
    border-radius: 2px;
    transition: width 0.2s linear;
}

/* ════════════════════════════════════════
   RESPONSIVE BREAKPOINTS FOR HERO
════════════════════════════════════════ */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .hero .container {
        max-width: 1400px;
    }

    .hero-split {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 80px;
    }

    .vsl-player-box {
        max-width: 850px;
    }
}

/* Standard Laptop (1024px - 1439px) */
@media (min-width: 1024px) {
    .hero {
        padding-top: 80px !important;
        margin-top: 0 !important;
        min-height: 100vh !important;
        align-items: center !important;
    }

    .pre-headline {
        margin-bottom: 16px !important;
    }

    .hero h1 {
        margin-bottom: 16px !important;
    }

    .hero-sub {
        margin: 0 0 24px 0 !important;
    }

    .hero-left {
        gap: 16px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .hero .container {
        max-width: 1100px;
    }

    .hero-split {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 50px;
    }

    .vsl-player-box {
        max-width: 650px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-split {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hero-left {
        align-items: center;
        text-align: center;
    }

    .hero-sub {
        max-width: 600px;
    }

    .hero-stats-inline,
    .hero-cta-row {
        justify-content: center;
    }

    .vsl-player-box {
        max-width: 85%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
}

/* Mobile (Below 767px) */
@media (max-width: 767px) {
    .hero {
        padding-top: 90px !important;
        padding-bottom: 60px !important;
        margin-top: 0 !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    .pre-headline {
        margin-bottom: 16px !important;
    }

    .hero h1 {
        margin-bottom: 12px !important;
    }

    .hero-sub {
        margin: 0 auto 20px !important;
    }

    .hero-split {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-left {
        gap: 12px !important;
        align-items: center;
        text-align: center;
        order: 1;
    }

    .hero-right {
        order: 2;
        height: auto;
    }

    .vsl-player-box {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .hero-heading-split {
        font-size: clamp(2.2rem, 8vw, 2.8rem);
        align-items: center;
    }

    .hero-sub {
        font-size: 1rem;
        text-align: center;
    }

    .hero-stats-inline,
    .hero-cta-row {
        justify-content: center;
    }

    .vsl-player-box {
        max-width: 100%;
    }

}


/* ── Hero Background Adjustments ── */
/* ── Hero Background Adjustments ── */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-split {
    position: relative;
    z-index: 2;
}

.hero-marine-glow {
    position: absolute;
    width: 1400px;
    height: 1400px;
    background: radial-gradient(circle, rgba(0, 150, 255, 0.20) 0%, transparent 70%);
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
    filter: blur(90px);
}

/* Custom Select and Password Toggle */
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 40px !important;
}

.custom-select option {
    background-color: #0a0a0a;
    color: #ffffff;
}

.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    width: 100%;
    padding-left: 40px !important;
}

.toggle-password {
    position: absolute;
    left: 12px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password:hover {
    color: var(--gold);
}

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

/* ════════════════════════════════════════
   MEMBER REVIEWS — rendered from src/js/reviews.js

   This replaced a rotating stack: one card was promoted to a "hero" with a
   Wistia play button buried inside it and three shrunken cards fanned behind,
   cycling on a timer. The client's report was that people could not tell it
   was interactive at all, so nobody ever opened a review. What is here now is
   an ordinary grid — every card shows the name, the rating and the start of
   the quote up front, and a labelled button opens the rest in place.
   ════════════════════════════════════════ */
.rv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    /* `start`, not `stretch`: an opened card grows on its own instead of
       dragging the height of everything else on its row. */
    align-items: start;
    margin-top: 48px;
}

.rv-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.rv-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Avatar then name, in that order in the markup, so the row reads correctly
   in both directions without a single left/right rule — the avatar lands on
   the right in Arabic and on the left in English. */
.rv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rv-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

/* Same initials-on-the-brand-gradient placeholder the instructor cards use.
   Real photos of the people quoted have not been delivered; `photo` in
   reviews.js swaps this for an <img> the moment one is. */
.rv-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #000;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
}

.rv-ident {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rv-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-city {
    font-size: 0.82rem;
    color: var(--muted-light);
}

.rv-stars {
    font-size: 0.95rem;
    letter-spacing: 2px;
    color: var(--gold);
    line-height: 1;
}

/* The achievement chip. Green as an accent — a tinted hairline and the icon,
   never a filled green block. */
.rv-win {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid rgba(193, 255, 17, 0.28);
    border-radius: 999px;
    background: rgba(193, 255, 17, 0.06);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--off-white);
}

.rv-win i {
    color: var(--gold);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Clamped until the card is opened. reviews.js measures scrollHeight against
   clientHeight after paint and only shows the toggle on the cards that are
   actually cut off — a "read the full review" button under a review that is
   already fully visible is its own small confusion.
   Two lines, not three: at three, six of the seven quotes fitted whole and the
   section had no visible interaction left at all on Arabic desktop. Two keeps
   the cards an even height to scan and gives every card with more to say a
   real control. */
.rv-quote {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.85;
    color: var(--muted-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rv-card.is-open .rv-quote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* A real <button>: pointer cursor, keyboard focus, Enter/Space and touch all
   come for free, and the label says what it does. That is the entire fix for
   "nobody could work out how to open one". */
.rv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--gold);
    transition: opacity 0.2s;
}

/* `display: inline-flex` above beats the UA stylesheet's `[hidden] {display:none}`,
   so without this every card kept a "read the full review" button — including
   the ones whose quote was already fully visible. Class+attribute outranks the
   bare class, so no !important is needed. */
.rv-toggle[hidden] {
    display: none;
}

.rv-toggle:hover {
    opacity: 0.75;
}

.rv-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 4px;
}

.rv-toggle i {
    font-size: 0.72rem;
    transition: transform 0.25s;
}

.rv-card.is-open .rv-toggle i {
    transform: rotate(180deg);
}

.rv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted-light);
}

.rv-empty i {
    font-size: 2rem;
    color: var(--gold);
    opacity: 0.5;
    margin-bottom: 14px;
    display: block;
}

.rv-empty p {
    margin: 0;
    font-size: 0.95rem;
}

@media (max-width: 1000px) {
    .rv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 34px;
    }
}

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

    .rv-card {
        padding: 20px 18px;
    }
}

/* ════════════════════════════════════════════════════════
        PUBLIC PAGE SHELL — /courses, /tracks, /reviews, /pricing
        Standalone pages whose real content lands in a later phase.
        The navbar is fixed and 64px tall (60px under 768px), so the
        shell has to clear it itself — there is no hero here.
   ════════════════════════════════════════════════════════ */
.page-shell {
    display: block;
    padding: 140px 0 90px;
    min-height: 70vh;
}

.page-shell-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.page-shell-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 16px;
}

.page-shell-lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.8;
    color: #aaa;
    margin: 0;
}

/* /courses puts the catalog totals bar between the page heading and the
   grid; centre it rather than letting it stretch the full width. */
.page-shell .courses-info-bar {
    width: fit-content;
    margin: 0 auto 40px;
}

.page-shell-placeholder {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 28px;
    border: 1px dashed rgba(193, 255, 17, 0.35);
    border-radius: 18px;
    background: rgba(193, 255, 17, 0.03);
}

.page-shell-placeholder i {
    font-size: 2.4rem;
    color: var(--green, #c1ff11);
    margin-bottom: 18px;
    display: block;
}

.page-shell-placeholder h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
}

.page-shell-placeholder p {
    font-size: 1rem;
    line-height: 1.8;
    color: #9ca3af;
    margin: 0 auto 28px;
    max-width: 520px;
}

.page-shell-cta {
    display: inline-flex;
}

@media (max-width: 768px) {
    .page-shell {
        padding: 110px 0 64px;
    }

    .page-shell-placeholder {
        padding: 40px 20px;
    }
}

@media (max-width: 480px) {
    .page-shell-placeholder {
        padding: 32px 16px;
        border-radius: 14px;
    }

    .page-shell-cta.btn-cta-solid {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════
        SHARED HEADER / FOOTER (injected by src/js/layout.js)
        The markup used to live inline in index.html with inline styles;
        it is one shared template now, so the styles live here.
   ════════════════════════════════════════════════════════ */
.nav-lang-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
}

.nav-lang-toggle:hover {
    border-color: #3f8ff9;
    color: #3f8ff9;
}

.nav-auth-btn {
    text-decoration: none;
}

.mobile-drawer .mobile-login-link {
    display: block;
    text-align: center;
    padding: 12px;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
}

.mobile-lang-row {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    width: 100%;
}

.mobile-lang-toggle-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.2s, color 0.2s;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-lang-toggle-btn:hover {
    border-color: #3f8ff9;
    color: #3f8ff9;
}

.site-footer {
    background-color: #0a0a0a;
    padding: 60px 0 20px;
    border-top: 1px solid #222;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col-contact {
    gap: 8px;
    align-items: center;
}

.footer-heading {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.footer-col-contact .footer-heading {
    margin-bottom: 0;
}

.footer-about {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: var(--green, #c1ff11);
}

/* The contact column: WhatsApp then email, each an icon and its value. */
.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.footer-contact-link i {
    width: 18px;
    text-align: center;
    color: var(--gold);
}

/* ── "Join us as an instructor" ──
   Its own row at the very bottom rather than a line in the quick links: it is
   a different kind of ask (write to us with your CV) and reads as a nav item
   if it sits among page links. */
.footer-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 34px;
    padding: 22px 26px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    background: var(--gold-subtle);
}

.footer-join-body {
    min-width: 260px;
    flex: 1;
}

.footer-join-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--off-white);
    margin-bottom: 6px;
}

.footer-join-text {
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--muted-light);
    margin: 0;
}

.footer-join-btn {
    flex-shrink: 0;
    padding: 12px 26px;
    border-radius: 100px;
    background: var(--gold);
    color: #000;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    transition: filter 0.25s, transform 0.25s;
}

.footer-join-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .footer-join {
        padding: 20px;
    }

    .footer-join-btn {
        width: 100%;
        text-align: center;
    }
}

.social-icon i {
    font-size: 1.2rem;
}

/* ════════════════════════════════════════════════════════
        FOOTER ADJUSTMENTS
   ════════════════════════════════════════════════════════ */
.footer-bottom {
    border-top: 1px solid #222;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    direction: rtl;
}

.footer-copy {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icon {
    color: #fff;
    background: #1a1a1a;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #3f8ff9;
    color: #fff;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/* Responsive and language direction polish for the landing page */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
}

html[dir="ltr"],
html[dir="ltr"] body {
    direction: ltr;
}

body {
    min-width: 0;
}

.container,
.main-nav,
.hero-split,
.features-grid,
.pricing-grid,
.courses-header-wrapper,
.courses-carousel-wrapper,
.footer-bottom {
    min-width: 0;
}

/* removed main-nav direction overrides */

html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-auth,
html[dir="rtl"] .hero-cta-row,
html[dir="rtl"] .hero-stats-inline,
html[dir="rtl"] .info-item {
    /* Removed flex-direction: row-reverse; to let RTL flow naturally */
}

html[dir="ltr"] .nav-links,
html[dir="ltr"] .nav-auth,
html[dir="ltr"] .hero-cta-row,
html[dir="ltr"] .hero-stats-inline,
html[dir="ltr"] .info-item {
    /* Removed flex-direction: row; */
}

html[dir="rtl"] .hero-left,
html[dir="rtl"] .feature-card,
html[dir="rtl"] .pricing-card,
html[dir="rtl"] .footer-col {
    text-align: right;
}

html[dir="ltr"] .hero-left,
html[dir="ltr"] .feature-card,
html[dir="ltr"] .pricing-card,
html[dir="ltr"] .footer-col {
    text-align: left;
}

html[dir="ltr"] .feature-icon {
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 18px;
}

html[dir="rtl"] .feature-icon {
    margin-right: 0;
    margin-left: auto;
    margin-bottom: 18px;
}

html[dir="rtl"] .hero-left {
    align-items: flex-end;
}

html[dir="ltr"] .hero-left {
    align-items: flex-start;
}

html[dir="rtl"] .hero-sub {
    margin-right: 0;
    margin-left: auto;
}

html[dir="ltr"] .hero-sub {
    margin-left: 0;
    margin-right: auto;
}

.mobile-lang-toggle {
    color: var(--off-white);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.95rem;
    line-height: 1;
}

.mobile-lang-toggle:hover {
    border-color: var(--gold);
}

@media (max-width: 1200px) {
    .main-nav {
        padding-inline: 22px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-auth {
        gap: 8px;
    }

    .nav-auth-btn {
        padding-inline: 14px;
    }
}

@media (max-width: 1023px) {
    .hero {
        min-height: auto;
    }

    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero-left,
    html[dir="rtl"] .hero-left,
    html[dir="ltr"] .hero-left {
        align-items: center;
        text-align: center;
    }

    .hero-heading-split {
        align-items: center;
    }

    .hero-sub,
    html[dir="rtl"] .hero-sub,
    html[dir="ltr"] .hero-sub {
        margin-inline: auto;
        text-align: center !important;
    }

    .hero-stats-inline,
    .hero-cta-row,
    html[dir="rtl"] .hero-stats-inline,
    html[dir="ltr"] .hero-stats-inline,
    html[dir="rtl"] .hero-cta-row,
    html[dir="ltr"] .hero-cta-row {
        justify-content: center;
    }

    .courses-header-wrapper {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .main-nav {
        height: 60px;
        padding-inline: 16px;
    }

    .nav-logo img {
        height: 88px;
    }

    .mobile-drawer {
        top: 60px;
        padding: 28px 20px;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .hero {
        padding-top: 82px !important;
    }

    .container {
        width: 100%;
        padding-inline: 16px;
    }

    .hero-stats-inline {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-stat-inline {
        justify-content: center;
        min-width: auto;
        gap: 6px;
    }

    .hero-stat-inline i {
        font-size: 1.3rem;
    }

    .stat-num-inline {
        font-size: 1.1rem;
    }

    .stat-lbl-inline {
        font-size: 0.75rem;
    }

    .hero-cta-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        gap: 10px;
    }

    .hero-cta-row .btn-cta-solid,
    .hero-cta-row .btn-cta-ghost {
        flex: 1;
        width: auto;
        padding: 12px 6px;
        font-size: 0.85rem;
        justify-content: center;
    }

    .btn-cta-solid,
    .btn-cta-ghost,
    .pricing-cta {
        width: 100%;
        max-width: 360px;
    }

    .courses-info-bar {
        width: 100%;
        border-radius: 14px;
        justify-content: center;
        flex-wrap: wrap;
        padding-inline: 14px;
    }

    .pricing-grid {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .hero-heading-split {
        font-size: clamp(2rem, 11vw, 2.7rem);
    }

    .pre-headline {
        max-width: 100%;
        white-space: normal;
        justify-content: center;
        text-align: center;
    }

    /* Removed overriding stacking rules for hero stats and CTA to keep them side-by-side */

    .vsl-controls {
        gap: 4px;
        padding-inline: 8px;
    }

    .vsl-time {
        display: none;
    }

    .courses-main-title,
    .section-title {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
        line-height: 1.25;
    }

    .pricing-card,
    .auth-modal {
        padding-inline: 18px;
    }

    .footer-bottom {
        padding-inline: 16px;
    }
}

html[dir="rtl"] .hero-split {
    direction: rtl;
}

html[dir="rtl"] .hero-left {
    text-align: right;
}

/* ════════════════════════════════════════════════════════
        HERO — RESPONSIVE PASS FOR THE NEW HEADLINE + STAT CARDS
        Kept in one block at the end of the file on purpose: the hero rules
        above are spread across a dozen breakpoint blocks, and the headline
        and the stat grid have to stay in step across all of them.
        Breakpoints mirror the ones already used in this file:
        1440+ / 1280-1439 / 1025-1279 / 769-1024 / 481-768 / 361-480 / <=360
   ════════════════════════════════════════════════════════ */

/* Every stat card is a grid item — none of them may push the row wider than
   the column, which is what causes horizontal scroll on narrow screens. */
.hero-stats-cards,
.hero-stat-card,
.hero-stat-value,
.hero-stat-num,
.hero-stat-lbl {
    min-width: 0;
}

.hero-stat-value,
.hero-stat-lbl {
    overflow-wrap: break-word;
}

/* The band is full-width and centred in both directions. It is no longer a
   child of .hero-left, so nothing shrink-wraps it — but the explicit rule is
   kept so a future RTL alignment rule can't quietly re-introduce that. */
html[dir="rtl"] .hero-stats-cards,
html[dir="ltr"] .hero-stats-cards {
    width: 100%;
    margin-inline: auto;
}

/* XL desktop */
@media (min-width: 1440px) {
    h1.hero-heading-single {
        font-size: 2.35rem;
    }

    .hero-stats-cards {
        gap: 16px;
        max-width: 1120px;
    }
}

/* Large laptop */
@media (min-width: 1280px) and (max-width: 1439px) {
    h1.hero-heading-single {
        font-size: 2.15rem;
    }

    .hero-stats-cards {
        max-width: 1000px;
    }
}

/* Small laptop — the band spans the page now, so three across still fits
   comfortably (it used to be two, back when it lived in the hero column). */
@media (min-width: 1025px) and (max-width: 1279px) {
    h1.hero-heading-single {
        font-size: 2.05rem;
    }

    .hero-stats-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-width: 940px;
        margin-top: 48px;
    }

    .hero-stat-card {
        padding: 14px;
    }
}

/* Tablet — two columns: three across at this width squeezes the longer
   labels ("تخصصات AI لكل المجالات") onto three cramped lines. */
@media (min-width: 769px) and (max-width: 1024px) {
    h1.hero-heading-single {
        font-size: clamp(1.9rem, 3.6vw, 2.3rem);
        text-align: center;
        margin-inline: auto;
    }

    .hero-stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 660px;
        margin-top: 44px;
    }
}

/* Large phones / small tablets */
@media (min-width: 481px) and (max-width: 768px) {
    h1.hero-heading-single {
        font-size: clamp(1.55rem, 5.4vw, 2rem);
        text-align: center;
        margin-inline: auto;
    }

    .hero-stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: 520px;
        margin-top: 36px;
    }

    .hero-stat-card {
        padding: 13px 12px;
    }

    .hero-stat-card i {
        font-size: 1.2rem;
    }

    .hero-stat-value {
        font-size: 0.92rem;
    }

    .hero-stat-num {
        font-size: 1.2rem;
    }

    .hero-stat-lbl {
        font-size: 0.75rem;
    }
}

/* Phones — two columns still fit and read far better than one tall stack,
   which would push the video and the buttons below the fold. */
@media (max-width: 480px) {
    h1.hero-heading-single {
        font-size: clamp(1.35rem, 6.4vw, 1.7rem);
        line-height: 1.4;
        text-align: center;
        margin-inline: auto;
    }

    .hero-stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-width: 420px;
        margin-top: 32px;
    }

    .hero-stat-card {
        gap: 9px;
        padding: 11px 10px;
        border-radius: 12px;
    }

    .hero-stat-card i {
        font-size: 1.05rem;
    }

    .hero-stat-value {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .hero-stat-num {
        font-size: 1.05rem;
    }

    .hero-stat-lbl {
        font-size: 0.7rem;
    }

    .stat-skeleton {
        width: 46px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    h1.hero-heading-single {
        font-size: 1.3rem;
    }

    .hero-stats-cards {
        gap: 7px;
    }

    .hero-stat-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        padding: 10px 8px;
    }

    .hero-stat-value {
        font-size: 0.76rem;
    }
}