/* EducationGuard Home Page - Global Styles */

.eg-home,
.eg-auth,
.eg-loader {
    --eg-primary: #F39318;
    --eg-primary-dark: #d47d0f;
    --eg-primary-light: #ffb347;
    --eg-primary-soft: rgba(243, 147, 24, 0.12);
    --eg-secondary: #461E38;
    --eg-secondary-dark: #2f1018;
    --eg-secondary-light: #6b3456;
    --eg-cream: #faf8f5;
    --eg-parchment: #f7f0e4;
    --eg-parchment-dark: #e8dcc8;
    --eg-surface: #ffffff;
    --eg-text: #1a1a1a;
    --eg-text-muted: #5c5c5c;
    --eg-border: rgba(70, 30, 56, 0.15);
    --eg-radius: 1.25rem;
    --eg-radius-sm: 0.75rem;
    --eg-shadow: 0 8px 32px rgba(70, 30, 56, 0.1);
    --eg-shadow-lg: 0 16px 48px rgba(70, 30, 56, 0.16);
    --eg-nav-h: 4.5rem;
    --eg-font-display: 'Cairo', 'Segoe UI', 'Tajawal', sans-serif;
}

html[data-bs-theme="dark"] .eg-home,
html[data-bs-theme="dark"] .eg-auth,
html[data-bs-theme="dark"] .eg-loader {
    --eg-cream: #241820;
    --eg-parchment: #2a2030;
    --eg-parchment-dark: #1e1620;
    --eg-surface: #322430;
    --eg-text: #faf5f7;
    --eg-text-muted: #d4c4cc;
    --eg-border: rgba(243, 147, 24, 0.28);
    --eg-primary-soft: rgba(243, 147, 24, 0.18);
    --eg-secondary-light: #8b4d72;
    --eg-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    --eg-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.38);
}

html[data-bs-theme="dark"] .eg-topo-bg {
    background-color: var(--eg-cream);
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(243, 147, 24, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 80%, rgba(139, 77, 114, 0.12) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F39318' stroke-opacity='0.09' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='160'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='120'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-bs-theme="dark"] .eg-nav {
    background: rgba(50, 36, 48, 0.92);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(243, 147, 24, 0.35);
}

html[data-bs-theme="dark"] .eg-nav.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-bs-theme="dark"] .eg-hamburger__lines span {
    background: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-hamburger {
    background: linear-gradient(145deg, rgba(50, 36, 48, 0.95), rgba(36, 24, 32, 0.98));
}

html[data-bs-theme="dark"] .eg-hamburger.open {
    background: linear-gradient(145deg, rgba(243, 147, 24, 0.28), rgba(70, 30, 56, 0.6));
    box-shadow: 0 0 20px rgba(243, 147, 24, 0.25);
}

html[data-bs-theme="dark"] .eg-hamburger__compass {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-mobile-drawer-panel {
    background: linear-gradient(180deg, #3a2a32 0%, #2a1e26 100%);
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

html[data-bs-theme="dark"] .eg-drawer-map-deco {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-drawer-era {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-btn-register {
    color: var(--eg-primary-light);
    border-color: rgba(243, 147, 24, 0.55);
}

html[data-bs-theme="dark"] .eg-hero-visual img,
html[data-bs-theme="dark"] .eg-nav-brand img,
html[data-bs-theme="dark"] .eg-grade-card img,
html[data-bs-theme="dark"] .eg-footer-logo img {
    filter: none;
}

html[data-bs-theme="dark"] .eg-hero-sticker {
    color: #f4e9ef;
    text-shadow: 0 1px 20px rgba(243, 147, 24, 0.16);
}

html[data-bs-theme="dark"] .eg-hero-sticker-accent {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-hero-cta {
    background: linear-gradient(135deg, rgba(243, 147, 24, 0.22) 0%, rgba(243, 147, 24, 0.1) 100%);
    color: var(--eg-primary-light);
    border-color: rgba(243, 147, 24, 0.65);
    box-shadow:
        0 0 0 1px rgba(243, 147, 24, 0.15) inset,
        0 4px 18px rgba(243, 147, 24, 0.12);
}

html[data-bs-theme="dark"] .eg-hero-cta:hover {
    background: linear-gradient(135deg, var(--eg-primary) 0%, var(--eg-primary-dark) 100%);
    color: #fff;
    border-color: var(--eg-primary-light);
    box-shadow:
        0 10px 32px rgba(243, 147, 24, 0.4),
        0 0 20px rgba(243, 147, 24, 0.2);
}

html[data-bs-theme="dark"] .eg-hero-cta--outline {
    background: linear-gradient(135deg, rgba(139, 77, 114, 0.28) 0%, rgba(139, 77, 114, 0.12) 100%);
    color: #f6dcec;
    border-color: var(--eg-secondary-light);
    box-shadow:
        0 0 0 1px rgba(176, 106, 147, 0.2) inset,
        0 4px 18px rgba(70, 30, 56, 0.25);
}

html[data-bs-theme="dark"] .eg-hero-cta--outline:hover {
    background: linear-gradient(135deg, var(--eg-secondary-light) 0%, var(--eg-secondary) 100%);
    color: #fff;
    border-color: #c07ba3;
    box-shadow:
        0 10px 32px rgba(139, 77, 114, 0.45),
        0 0 20px rgba(139, 77, 114, 0.25);
}

html[data-bs-theme="dark"] .eg-hero-cta--guest {
    background: linear-gradient(
        135deg,
        rgba(243, 147, 24, 0.35) 0%,
        rgba(107, 52, 86, 0.45) 55%,
        rgba(243, 147, 24, 0.2) 100%
    );
    color: #fff8f0;
    border-color: var(--eg-primary);
    box-shadow:
        0 0 0 1px rgba(255, 200, 120, 0.2) inset,
        0 6px 28px rgba(243, 147, 24, 0.28),
        0 0 40px rgba(243, 147, 24, 0.12);
    animation: eg-hero-cta-glow 3s ease-in-out infinite;
}

html[data-bs-theme="dark"] .eg-hero-cta--guest i {
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.55));
}

html[data-bs-theme="dark"] .eg-hero-cta--guest:hover {
    animation: none;
    background: linear-gradient(135deg, #ffb347 0%, var(--eg-primary) 45%, var(--eg-primary-dark) 100%);
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 12px 40px rgba(243, 147, 24, 0.5),
        0 0 32px rgba(243, 147, 24, 0.3);
}

@keyframes eg-hero-cta-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255, 200, 120, 0.2) inset,
            0 6px 28px rgba(243, 147, 24, 0.28),
            0 0 40px rgba(243, 147, 24, 0.12);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255, 200, 120, 0.35) inset,
            0 8px 36px rgba(243, 147, 24, 0.42),
            0 0 56px rgba(243, 147, 24, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-bs-theme="dark"] .eg-hero-cta--guest {
        animation: none;
    }
}

html[data-bs-theme="dark"] .eg-about-heading,
html[data-bs-theme="dark"] .eg-quote-text {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-quote-banner {
    background: linear-gradient(135deg, rgba(243, 147, 24, 0.14) 0%, rgba(139, 77, 114, 0.18) 100%);
}

html[data-bs-theme="dark"] .eg-feature-card {
    background: linear-gradient(160deg, #3a2a38 0%, #2e2230 100%);
    border-color: rgba(243, 147, 24, 0.22);
}

html[data-bs-theme="dark"] .eg-feature-card h3 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-ambient {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-hero-deco {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-ambient-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F39318' stroke-opacity='0.07' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='160'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-bs-theme="dark"] .eg-grade-card {
    background: transparent;
    border-color: rgba(243, 147, 24, 0.4);
}

html[data-bs-theme="dark"] .eg-grade-card:hover {
    border-color: var(--eg-primary);
    box-shadow: 0 12px 40px rgba(243, 147, 24, 0.15);
}

html[data-bs-theme="dark"] .eg-carousel-wrapper {
    background: linear-gradient(135deg, rgba(243, 147, 24, 0.85) 0%, rgba(107, 52, 86, 0.95) 100%);
}

html[data-bs-theme="dark"] .eg-carousel-slide {
    background: #3a2a38;
}

html[data-bs-theme="dark"] .eg-carousel-slide-body h4 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-mini-card {
    background: linear-gradient(160deg, #3a2a38 0%, #2e2230 100%);
}

html[data-bs-theme="dark"] .eg-mini-card-body h4 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-enrolled-item {
    background: #3a2a38;
}

html[data-bs-theme="dark"] .eg-enrolled-item h4 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-chronicle-card {
    background: linear-gradient(160deg, #3a2a38 0%, #2e2230 100%);
    border-color: rgba(243, 147, 24, 0.22);
}

html[data-bs-theme="dark"] .eg-chronicle-body h4 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-chronicle-bar {
    background: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .eg-chronicle-link {
    background: rgba(58, 42, 56, 0.85);
    border-color: rgba(243, 147, 24, 0.28);
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-expedition-card {
    background: linear-gradient(165deg, #3a2a38 0%, #2a1e28 100%);
    border-color: rgba(243, 147, 24, 0.22);
}

html[data-bs-theme="dark"] .eg-expedition-body h4 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-footer {
    background: linear-gradient(180deg, var(--eg-secondary-dark) 0%, #1a0a12 100%);
    border-top-color: var(--eg-primary);
}

html[data-bs-theme="dark"] .eg-mobile-drawer {
    background: rgba(20, 12, 18, 0.6);
}

html[data-bs-theme="dark"] .eg-modal-backdrop {
    background: rgba(20, 12, 18, 0.75);
}

.eg-home,
.eg-auth {
    background: var(--eg-cream);
    color: var(--eg-text);
    font-family: var(--eg-font-display);
    overflow-x: clip;
    max-width: 100%;
    min-width: 0;
    position: relative;
}

.page:has(.eg-home) {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.page:has(.eg-home) main,
.page:has(.eg-home) .content {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

/* ── Ambient map/atlas layer ── */

.eg-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    color: var(--eg-secondary);
    transform: translateY(var(--eg-parallax-y, 0));
    transition: transform 0.1s linear;
}

.eg-ambient-grid {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23461E38' stroke-opacity='0.05' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='160'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='120'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
    animation: eg-ambient-grid-drift 90s linear infinite;
    opacity: 0.8;
}

@keyframes eg-ambient-grid-drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(600px, 400px); }
}

.eg-ambient-routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

.eg-route {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 8 6;
    animation: eg-route-draw 20s linear infinite;
}

.eg-route--1 { stroke: var(--eg-primary); opacity: 0.25; animation-duration: 22s; }
.eg-route--2 { stroke: var(--eg-secondary); opacity: 0.2; animation-duration: 28s; animation-delay: -8s; }
.eg-route--3 { stroke: var(--eg-primary); opacity: 0.15; animation-duration: 18s; animation-delay: -4s; stroke-dasharray: 4 8; }

@keyframes eg-route-draw {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

.eg-ambient-pin {
    position: absolute;
    color: var(--eg-primary);
    font-size: 1.1rem;
    opacity: 0;
    animation: eg-pin-float 6s ease-in-out infinite;
}

.eg-ambient-pin--1 { top: 18%; right: 12%; animation-delay: 0s; }
.eg-ambient-pin--2 { top: 55%; left: 8%; animation-delay: -2s; font-size: 0.85rem; }
.eg-ambient-pin--3 { bottom: 22%; right: 22%; animation-delay: -4s; font-size: 0.95rem; }

@keyframes eg-pin-float {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
    15%, 85% { opacity: 0.35; transform: translateY(-8px) scale(1); }
    50% { opacity: 0.55; transform: translateY(-14px) scale(1.05); }
}

.eg-ambient-compass {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    opacity: 0.2;
    animation: eg-compass-spin 30s linear infinite;
}

.eg-ambient-compass--1 { top: 30%; left: 6%; animation-duration: 35s; }
.eg-ambient-compass--2 { bottom: 18%; left: 18%; width: 2.5rem; height: 2.5rem; animation-direction: reverse; animation-duration: 25s; opacity: 0.15; }

@keyframes eg-compass-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.eg-home > *:not(.eg-ambient):not(.eg-nav):not(.eg-mobile-drawer):not(.eg-toast-container),
.eg-auth > *:not(.eg-ambient):not(.eg-nav):not(.eg-auth-nav):not(.eg-toast-container):not(.eg-reg-success-overlay) {
    position: relative;
    z-index: 1;
}

/* Keep registration success modal as a true viewport overlay (must beat stacking rules above). */
.eg-auth > .eg-reg-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
}

.eg-home > .eg-nav,
.eg-auth > .eg-nav,
.eg-auth > .eg-auth-nav {
    position: fixed;
    z-index: 1100;
}

.eg-home > .eg-mobile-drawer {
    position: fixed;
    z-index: 1050;
}

.eg-home > .eg-mobile-drawer:not(.open) {
    pointer-events: none;
}

.eg-home.menu-open .eg-ambient {
    opacity: 0;
    transition: opacity 0.35s ease;
}

body:has(.eg-home.menu-open) {
    overflow: hidden;
}

.eg-home *,
.eg-home *::before,
.eg-home *::after,
.eg-auth *,
.eg-auth *::before,
.eg-auth *::after {
    box-sizing: border-box;
}

.eg-topo-bg {
    background-color: var(--eg-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23461E38' stroke-opacity='0.06' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='160'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='120'/%3E%3Cellipse cx='300' cy='300' rx='100' ry='80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
}

.eg-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff 0%, var(--eg-cream) 45%, #f3e9e2 100%);
    animation: eg-loader-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-bs-theme="dark"] .eg-loader {
    background: linear-gradient(145deg, var(--eg-secondary-dark) 0%, var(--eg-secondary) 45%, #5a2848 100%);
}

.eg-loader-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.eg-loader-grid {
    position: absolute;
    inset: -50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23F39318' stroke-opacity='0.08' stroke-width='1'%3E%3Cellipse cx='300' cy='300' rx='280' ry='200'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='160'/%3E%3Cellipse cx='300' cy='300' rx='160' ry='120'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
    animation: eg-loader-grid-drift 28s linear infinite;
    opacity: 0.7;
}

.eg-loader-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: eg-loader-orb-float 8s ease-in-out infinite;
}

.eg-loader-orb--1 {
    width: 22rem;
    height: 22rem;
    top: -8%;
    right: -6%;
    background: radial-gradient(circle, rgba(243, 147, 24, 0.55) 0%, transparent 70%);
    animation-delay: 0s;
}

.eg-loader-orb--2 {
    width: 18rem;
    height: 18rem;
    bottom: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(139, 77, 114, 0.6) 0%, transparent 70%);
    animation-delay: -2.5s;
    animation-duration: 10s;
}

.eg-loader-orb--3 {
    width: 12rem;
    height: 12rem;
    top: 40%;
    left: 55%;
    background: radial-gradient(circle, rgba(255, 179, 71, 0.45) 0%, transparent 70%);
    animation-delay: -4s;
    animation-duration: 7s;
}

.eg-loader-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    animation: eg-loader-content-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.eg-loader-orbit {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-loader-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: transparent;
}

.eg-loader-ring--outer {
    inset: 0;
    border-width: 3px;
    border-top-color: var(--eg-primary);
    border-right-color: rgba(243, 147, 24, 0.35);
    box-shadow: 0 0 24px rgba(243, 147, 24, 0.25);
    animation: eg-loader-spin 1.4s cubic-bezier(0.5, 0.1, 0.3, 1) infinite;
}

.eg-loader-ring--middle {
    inset: 0.65rem;
    border-width: 2px;
    border-bottom-color: var(--eg-primary-light);
    border-left-color: rgba(255, 179, 71, 0.4);
    animation: eg-loader-spin-reverse 1s linear infinite;
}

.eg-loader-ring--inner {
    inset: 1.3rem;
    border-width: 2px;
    border-top-color: rgba(70, 30, 56, 0.55);
    border-right-color: rgba(243, 147, 24, 0.2);
    animation: eg-loader-spin 0.7s linear infinite;
}

html[data-bs-theme="dark"] .eg-loader-ring--inner {
    border-top-color: rgba(255, 255, 255, 0.5);
}

.eg-loader-core {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--eg-cream) 100%);
    box-shadow:
        0 0 0 1px rgba(243, 147, 24, 0.35),
        0 0 32px rgba(243, 147, 24, 0.35),
        inset 0 0 16px rgba(243, 147, 24, 0.15);
    animation: eg-loader-core-pulse 2.2s ease-in-out infinite;
}

html[data-bs-theme="dark"] .eg-loader-core {
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18) 0%, rgba(70, 30, 56, 0.4) 100%);
}

.eg-loader-logo {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
    animation: eg-loader-logo-breathe 2.2s ease-in-out infinite;
}

.eg-loader-label {
    margin: 0;
    font-family: var(--eg-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--eg-secondary);
    text-shadow: 0 2px 12px rgba(70, 30, 56, 0.15);
}

html[data-bs-theme="dark"] .eg-loader-label {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.eg-loader-dots {
    display: inline-flex;
    gap: 0.2rem;
    margin-inline-start: 0.15rem;
    vertical-align: baseline;
}

.eg-loader-dots span {
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--eg-primary);
    box-shadow: 0 0 8px rgba(243, 147, 24, 0.8);
    animation: eg-loader-dot-bounce 1.2s ease-in-out infinite;
}

.eg-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.eg-loader-dots span:nth-child(3) { animation-delay: 0.3s; }

.eg-loader-bar {
    width: min(12rem, 70vw);
    height: 3px;
    border-radius: 999px;
    background: rgba(70, 30, 56, 0.14);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(70, 30, 56, 0.12);
}

html[data-bs-theme="dark"] .eg-loader-bar {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.eg-loader-bar-fill {
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--eg-primary), var(--eg-primary-light), transparent);
    animation: eg-loader-bar-slide 1.6s ease-in-out infinite;
}

@keyframes eg-loader-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes eg-loader-content-rise {
    from {
        opacity: 0;
        transform: translateY(1.25rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes eg-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes eg-loader-spin-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes eg-loader-core-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(243, 147, 24, 0.35),
            0 0 24px rgba(243, 147, 24, 0.3),
            inset 0 0 12px rgba(243, 147, 24, 0.12);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(243, 147, 24, 0.55),
            0 0 48px rgba(243, 147, 24, 0.55),
            inset 0 0 20px rgba(243, 147, 24, 0.22);
        transform: scale(1.06);
    }
}

@keyframes eg-loader-logo-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes eg-loader-dot-bounce {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-0.35rem);
    }
}

@keyframes eg-loader-bar-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

@keyframes eg-loader-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(2rem, -1.5rem) scale(1.08); }
    66% { transform: translate(-1.5rem, 1rem) scale(0.94); }
}

@keyframes eg-loader-grid-drift {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .eg-loader,
    .eg-loader-content,
    .eg-loader-grid,
    .eg-loader-orb,
    .eg-loader-ring,
    .eg-loader-core,
    .eg-loader-logo,
    .eg-loader-dots span,
    .eg-loader-bar-fill {
        animation: none !important;
    }

    .eg-loader-ring--outer {
        border-top-color: var(--eg-primary);
        border-right-color: rgba(243, 147, 24, 0.35);
    }
}

.eg-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: var(--eg-nav-h);
    background: var(--eg-surface);
    border-bottom: 2px solid var(--eg-secondary);
    transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.eg-nav.scrolled {
    box-shadow: var(--eg-shadow);
}

.eg-nav-glow,
.eg-nav-route,
.eg-nav-brand-orbit {
    display: none;
}

.eg-nav-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.eg-nav-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.eg-nav-brand img {
    position: relative;
    z-index: 1;
    height: 2.75rem;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    background: transparent;
}

.eg-nav-brand:hover img {
    transform: scale(1.03);
}

.eg-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.eg-nav-action-dock {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.eg-nav-desktop-actions {
    display: none;
    align-items: center;
    gap: 0.625rem;
}

.eg-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--eg-secondary);
    color: #fff;
    border: none;
    border-radius: var(--eg-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.eg-btn-login:hover {
    background: var(--eg-secondary-light);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(70, 30, 56, 0.3);
}

.eg-btn-login--certificates {
    background: linear-gradient(135deg, #F39318, #d47d0f 60%, #461E38);
    color: #fff;
}

.eg-btn-login--certificates i {
    color: #fff;
    font-size: 1.05rem;
}

.eg-btn-login--certificates:hover {
    background: linear-gradient(135deg, #ffb347, #F39318 55%, #5a2848);
    color: #fff;
    box-shadow: 0 6px 18px rgba(243, 147, 24, 0.4);
}

.eg-btn-login--history {
    background: linear-gradient(135deg, #0ea5e9, #0284c7 60%, #0369a1);
    color: #fff;
}

.eg-btn-login--history i {
    color: #fff;
    font-size: 1.05rem;
}

.eg-btn-login--history:hover {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9 55%, #0284c7);
    color: #fff;
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4);
}

.eg-nav-desktop-actions .eg-btn-login--ghost {
    background: var(--eg-primary-soft);
    color: var(--eg-secondary);
    border: 1.5px solid var(--eg-primary);
}

html[data-bs-theme="dark"] .eg-nav-desktop-actions .eg-btn-login--ghost {
    color: var(--eg-primary-light);
}

.eg-nav-desktop-actions .eg-btn-login--ghost:hover {
    background: var(--eg-primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(243, 147, 24, 0.35);
}

.eg-btn-register {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--eg-primary-soft);
    color: var(--eg-secondary);
    border: 1.5px solid var(--eg-primary);
    border-radius: var(--eg-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.eg-btn-register:hover {
    background: var(--eg-primary);
    color: #fff;
    transform: translateY(-1px);
}

/* ── Nav separator ── */
.eg-nav-sep {
    width: 1px;
    height: 1.9rem;
    background: linear-gradient(180deg, transparent, var(--eg-border), transparent);
}

/* ── Enhanced nav action pills (Browse / My Courses / Exam Results) ── */
.eg-nav-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem 0.4rem 0.45rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--eg-font-display);
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1;
    color: var(--eg-secondary);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background: var(--eg-surface);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* shine sweep */
.eg-nav-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 48%, transparent 72%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.eg-nav-pill:hover::before { transform: translateX(130%); }

.eg-nav-pill:hover { transform: translateY(-2px); }
.eg-nav-pill:active { transform: translateY(0) scale(0.97); }

/* soft colored glow that fades in on hover */
.eg-nav-pill-glow {
    position: absolute;
    inset: -40% -10%;
    z-index: 0;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.eg-nav-pill:hover .eg-nav-pill-glow { opacity: 1; }

/* icon chip */
.eg-nav-pill-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    font-size: 0.95rem;
    color: #fff;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.eg-nav-pill:hover .eg-nav-pill-icon { transform: rotate(-8deg) scale(1.08); }

.eg-nav-pill-label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* orbit ring around the browse icon */
.eg-nav-pill-orbit {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eg-nav-pill--browse:hover .eg-nav-pill-orbit {
    opacity: 1;
    animation: eg-pill-spin 5s linear infinite;
}

@keyframes eg-pill-spin {
    to { transform: rotate(360deg); }
}

/* Browse = primary, filled gradient */
.eg-nav-pill--browse {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--eg-secondary) 0%, var(--eg-secondary-light) 60%, var(--eg-primary) 140%);
    box-shadow: 0 4px 14px rgba(70, 30, 56, 0.28);
}

.eg-nav-pill--browse .eg-nav-pill-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-light));
    box-shadow: 0 3px 10px rgba(243, 147, 24, 0.5);
}

.eg-nav-pill--browse .eg-nav-pill-glow {
    background: radial-gradient(circle at 30% 50%, rgba(243, 147, 24, 0.55), transparent 70%);
}

.eg-nav-pill--browse:hover {
    box-shadow: 0 10px 26px rgba(70, 30, 56, 0.4);
}

/* My Courses = primary/amber outline glass */
.eg-nav-pill--courses {
    color: var(--eg-secondary);
    border-color: var(--eg-border);
    background: linear-gradient(180deg, var(--eg-surface), var(--eg-primary-soft));
    box-shadow: 0 2px 8px rgba(70, 30, 56, 0.08);
}

.eg-nav-pill--courses .eg-nav-pill-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-dark));
    box-shadow: 0 3px 9px rgba(243, 147, 24, 0.45);
}

.eg-nav-pill--courses .eg-nav-pill-glow {
    background: radial-gradient(circle at 28% 50%, rgba(243, 147, 24, 0.35), transparent 70%);
}

.eg-nav-pill--courses:hover {
    border-color: var(--eg-primary);
    box-shadow: 0 10px 24px rgba(243, 147, 24, 0.3);
}

/* Exam Results = secondary/plum outline glass */
.eg-nav-pill--results {
    color: var(--eg-secondary);
    border-color: var(--eg-border);
    background: linear-gradient(180deg, var(--eg-surface), rgba(70, 30, 56, 0.07));
    box-shadow: 0 2px 8px rgba(70, 30, 56, 0.08);
}

.eg-nav-pill--results .eg-nav-pill-icon {
    background: linear-gradient(135deg, var(--eg-secondary), var(--eg-secondary-light));
    box-shadow: 0 3px 9px rgba(70, 30, 56, 0.4);
}

.eg-nav-pill--results .eg-nav-pill-glow {
    background: radial-gradient(circle at 28% 50%, rgba(139, 77, 114, 0.4), transparent 70%);
}

.eg-nav-pill--results:hover {
    border-color: var(--eg-secondary-light);
    box-shadow: 0 10px 24px rgba(70, 30, 56, 0.28);
}

/* Dark theme adjustments */
html[data-bs-theme="dark"] .eg-nav-pill--courses,
html[data-bs-theme="dark"] .eg-nav-pill--results {
    color: var(--eg-text);
    border-color: var(--eg-border);
}

html[data-bs-theme="dark"] .eg-nav-pill::before {
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.18) 48%, transparent 72%);
}

/* ── Profile pill (desktop) ── */
.eg-nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.85rem 0.3rem 0.35rem;
    border-radius: 999px;
    background: var(--eg-primary-soft);
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.eg-nav-profile:hover {
    background: var(--eg-surface);
    border-color: var(--eg-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(243, 147, 24, 0.22);
}

.eg-nav-profile-avatar {
    position: relative;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-secondary));
    padding: 2px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(70, 30, 56, 0.18);
}

.eg-nav-profile-avatar img,
.eg-nav-profile-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--eg-surface);
}

.eg-nav-profile-initial {
    font-weight: 800;
    font-size: 1rem;
    color: var(--eg-secondary);
    font-family: var(--eg-font-display);
    text-transform: uppercase;
}

.eg-nav-profile-status {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid var(--eg-surface);
}

.eg-nav-profile-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: start;
}

.eg-nav-profile-greeting {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--eg-text-muted);
}

.eg-nav-profile-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--eg-secondary);
    font-family: var(--eg-font-display);
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-bs-theme="dark"] .eg-nav-profile-name { color: var(--eg-text); }
html[data-bs-theme="dark"] .eg-nav-profile-initial { color: var(--eg-primary-light); }

/* ── Profile dropdown menu (desktop) ── */
.eg-nav-profile-menu {
    position: relative;
    display: inline-flex;
    z-index: 1;
}

.eg-nav-profile-menu.open {
    z-index: 70;
    overflow: visible;
}

.eg-nav-profile-menu .eg-nav-profile {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.eg-nav-profile-caret {
    font-size: 0.8rem;
    color: var(--eg-text-muted);
    transition: transform 0.28s ease;
    margin-inline-start: 0.1rem;
}

.eg-nav-profile-menu.open .eg-nav-profile-caret {
    transform: rotate(180deg);
}

.eg-nav-profile-menu.open .eg-nav-profile {
    background: var(--eg-surface);
    border-color: var(--eg-primary);
    box-shadow: 0 6px 18px rgba(243, 147, 24, 0.22);
}

.eg-nav-profile-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    inset-inline-end: 0;
    z-index: 60;
    min-width: 14rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
    /* Keep the menu inside the viewport so short/mobile screens can scroll all items */
    max-height: min(28rem, calc(100vh - var(--eg-nav-h, 4.5rem) - 1.25rem));
    max-height: min(28rem, calc(100dvh - var(--eg-nav-h, 4.5rem) - 1.25rem));
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: var(--eg-surface);
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-md, 1rem);
    box-shadow: 0 18px 44px rgba(70, 30, 56, 0.22);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.97);
    transform-origin: top var(--eg-dropdown-origin, right);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 30, 56, 0.35) transparent;
}

.eg-nav-profile-dropdown::-webkit-scrollbar {
    width: 0.35rem;
}

.eg-nav-profile-dropdown::-webkit-scrollbar-track {
    background: transparent;
    margin: 0.4rem 0;
}

.eg-nav-profile-dropdown::-webkit-scrollbar-thumb {
    background: rgba(70, 30, 56, 0.35);
    border-radius: 999px;
}

html[data-bs-theme="dark"] .eg-nav-profile-dropdown {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

html[data-bs-theme="dark"] .eg-nav-profile-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

.eg-nav-profile-menu.open .eg-nav-profile-dropdown {
    position: fixed;
    top: calc(var(--eg-nav-h, 4.5rem) + 0.35rem);
    inset-inline-end: 0.75rem;
    inset-inline-start: auto;
    max-height: calc(100vh - var(--eg-nav-h, 4.5rem) - 1rem);
    max-height: calc(100dvh - var(--eg-nav-h, 4.5rem) - 1rem);
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.eg-nav-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: none;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--eg-secondary);
    font-family: var(--eg-font-display);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

html[data-bs-theme="dark"] .eg-nav-menu-item { color: var(--eg-text); }

.eg-nav-menu-item:hover {
    background: var(--eg-primary-soft);
    transform: translateX(calc(-0.15rem * var(--eg-dir, 1)));
}

.eg-nav-menu-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.95rem;
}

.eg-nav-menu-item--profile .eg-nav-menu-icon {
    background: linear-gradient(135deg, var(--eg-secondary), var(--eg-secondary-light));
}

.eg-nav-menu-item--browse .eg-nav-menu-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-light));
}

.eg-nav-menu-item--courses .eg-nav-menu-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-dark));
}

.eg-nav-menu-item--results .eg-nav-menu-icon {
    background: linear-gradient(135deg, var(--eg-secondary), var(--eg-secondary-light));
}

.eg-nav-menu-item--history .eg-nav-menu-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7 55%, #0369a1);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}

.eg-nav-menu-item--notifications .eg-nav-menu-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706 55%, #b45309);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.eg-nav-menu-item--bookmarks .eg-nav-menu-icon {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed 55%, #6d28d9);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.eg-nav-menu-item--history .eg-nav-menu-icon i,
.eg-nav-menu-item--certificates .eg-nav-menu-icon i,
.eg-nav-menu-item--notifications .eg-nav-menu-icon i,
.eg-nav-menu-item--bookmarks .eg-nav-menu-icon i {
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.eg-nav-menu-item--certificates .eg-nav-menu-icon {
    background: linear-gradient(135deg, #F39318, #d47d0f 55%, #461E38);
    box-shadow: 0 4px 12px rgba(243, 147, 24, 0.35);
}

.eg-nav-menu-label {
    flex: 1;
    white-space: nowrap;
}

.eg-nav-menu-divider {
    height: 1px;
    margin: 0.25rem 0.4rem;
    background: linear-gradient(90deg, transparent, var(--eg-border), transparent);
}

.eg-nav-profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

/* ── Logout icon button ── */
.eg-nav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--eg-border);
    color: var(--eg-text-muted);
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.eg-nav-logout:hover {
    background: rgba(230, 17, 65, 0.1);
    border-color: #e61141;
    color: #e61141;
    transform: translateY(-1px);
}

/* ── Drawer profile card (mobile) ── */
.eg-drawer-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--eg-radius-sm);
    background: var(--eg-primary-soft);
    border: 1.5px solid var(--eg-border);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.eg-drawer-profile:hover {
    border-color: var(--eg-primary);
}

.eg-drawer-profile-avatar {
    position: relative;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-secondary));
    padding: 2px;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(70, 30, 56, 0.2);
}

.eg-drawer-profile-avatar img,
.eg-drawer-profile-avatar .eg-nav-profile-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--eg-surface);
    font-size: 1.2rem;
}

.eg-drawer-profile-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: start;
    flex: 1;
    min-width: 0;
}

.eg-drawer-profile-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--eg-secondary);
    font-family: var(--eg-font-display);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-bs-theme="dark"] .eg-drawer-profile-name { color: var(--eg-text); }

.eg-drawer-profile-arrow {
    color: var(--eg-primary);
    font-size: 1.1rem;
}

.eg-hamburger {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    pointer-events: auto;
    background: linear-gradient(145deg, var(--eg-surface), var(--eg-cream));
    border: 2px solid transparent;
    border-radius: 0.85rem;
    cursor: pointer;
    box-shadow:
        0 2px 8px rgba(70, 30, 56, 0.08),
        inset 0 0 0 1px rgba(243, 147, 24, 0.12);
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        background 0.3s ease;
    overflow: hidden;
}

.eg-hamburger::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-secondary-light));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.eg-hamburger:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(243, 147, 24, 0.2);
}

.eg-hamburger:hover::before {
    opacity: 0.9;
}

.eg-hamburger:active {
    transform: scale(0.96);
}

.eg-hamburger__ring {
    position: absolute;
    inset: 3px;
    border-radius: 0.65rem;
    border: 1px dashed rgba(243, 147, 24, 0.35);
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.eg-hamburger.open .eg-hamburger__ring {
    opacity: 1;
    animation: eg-hamburger-ring-spin 6s linear infinite;
}

@keyframes eg-hamburger-ring-spin {
    to { transform: rotate(360deg); }
}

.eg-hamburger__compass {
    position: absolute;
    font-size: 1.1rem;
    color: var(--eg-primary);
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 2;
}

.eg-hamburger.open .eg-hamburger__compass {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: eg-hamburger-compass-pulse 2.5s ease-in-out infinite;
}

@keyframes eg-hamburger-compass-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.08) rotate(8deg); }
}

.eg-hamburger__lines {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.125rem;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.eg-hamburger.open .eg-hamburger__lines {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
}

.eg-hamburger__lines span {
    display: block;
    height: 2px;
    background: var(--eg-secondary);
    border-radius: 2px;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease,
        width 0.3s ease;
    transform-origin: center;
}

.eg-hamburger__lines span:nth-child(1) { width: 100%; }
.eg-hamburger__lines span:nth-child(2) { width: 75%; align-self: flex-end; }
.eg-hamburger__lines span:nth-child(3) { width: 100%; }

.eg-hamburger:not(.open):hover .eg-hamburger__lines span:nth-child(1) {
    animation: eg-hamburger-line-wave 0.6s ease;
}

.eg-hamburger:not(.open):hover .eg-hamburger__lines span:nth-child(2) {
    animation: eg-hamburger-line-wave 0.6s ease 0.08s;
}

.eg-hamburger:not(.open):hover .eg-hamburger__lines span:nth-child(3) {
    animation: eg-hamburger-line-wave 0.6s ease 0.16s;
}

@keyframes eg-hamburger-line-wave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}

.eg-hamburger.open {
    background: linear-gradient(145deg, var(--eg-primary-soft), rgba(243, 147, 24, 0.08));
    box-shadow: 0 4px 20px rgba(243, 147, 24, 0.25);
}

.eg-mobile-drawer {
    position: fixed;
    top: var(--eg-nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: rgba(70, 30, 56, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

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

.eg-drawer-map-deco {
    position: absolute;
    inset: 0;
    color: var(--eg-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.1s;
}

.eg-mobile-drawer.open .eg-drawer-map-deco {
    opacity: 1;
}

.eg-drawer-map-svg {
    position: absolute;
    width: 120%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
}

.eg-drawer-route {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.eg-mobile-drawer.open .eg-drawer-route--1 {
    animation: eg-drawer-route-draw 1.8s ease forwards 0.2s;
}

.eg-mobile-drawer.open .eg-drawer-route--2 {
    animation: eg-drawer-route-draw 2.2s ease forwards 0.5s;
}

@keyframes eg-drawer-route-draw {
    to { stroke-dashoffset: 0; }
}

.eg-drawer-map-dot {
    fill: currentColor;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.eg-mobile-drawer.open .eg-drawer-map-dot {
    animation: eg-drawer-dot-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.eg-mobile-drawer.open .eg-drawer-map-dot:nth-of-type(1) { animation-delay: 0.9s; }
.eg-mobile-drawer.open .eg-drawer-map-dot:nth-of-type(2) { animation-delay: 1.1s; }
.eg-mobile-drawer.open .eg-drawer-map-dot:nth-of-type(3) { animation-delay: 1.3s; }

@keyframes eg-drawer-dot-pop {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 0.7; transform: scale(1); }
}

.eg-mobile-drawer-panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #fdf8f0 0%, var(--eg-surface) 40%, var(--eg-surface) 100%);
    padding: 1.25rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - var(--eg-nav-h, 4.5rem));
    max-height: calc(100dvh - var(--eg-nav-h, 4.5rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translateY(-0.75rem);
    transform-origin: top center;
    opacity: 0;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
    border-bottom: 3px solid var(--eg-primary);
    box-shadow: 0 16px 48px rgba(70, 30, 56, 0.18);
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 30, 56, 0.35) transparent;
}

.eg-mobile-drawer-panel::-webkit-scrollbar {
    width: 0.35rem;
}

.eg-mobile-drawer-panel::-webkit-scrollbar-track {
    background: transparent;
}

.eg-mobile-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(70, 30, 56, 0.35);
    border-radius: 999px;
}

html[data-bs-theme="dark"] .eg-mobile-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

.eg-mobile-drawer-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
    border-radius: inherit;
}

.eg-mobile-drawer.open .eg-mobile-drawer-panel {
    /* transform:none is required — a residual transform breaks overflow scrolling on iOS */
    transform: none;
    opacity: 1;
}

.eg-drawer-history-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(-12px);
}

.eg-mobile-drawer.open .eg-drawer-history-header {
    animation: eg-drawer-header-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes eg-drawer-header-in {
    to { opacity: 1; transform: translateY(0); }
}

.eg-drawer-compass-wrap {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eg-primary-soft);
    border-radius: 50%;
    border: 1.5px solid rgba(243, 147, 24, 0.3);
    box-shadow: 0 4px 12px rgba(243, 147, 24, 0.15);
}

.eg-drawer-compass {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--eg-primary);
}

.eg-mobile-drawer.open .eg-drawer-compass {
    animation: eg-drawer-compass-spin 8s linear infinite;
}

@keyframes eg-drawer-compass-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.eg-drawer-history-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.eg-drawer-era {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--eg-secondary);
    letter-spacing: 0.01em;
}

.eg-drawer-tagline {
    font-size: 0.8rem;
    color: var(--eg-text-muted);
    line-height: 1.5;
}

.eg-drawer-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
    color: var(--eg-primary);
    opacity: 0;
}

.eg-mobile-drawer.open .eg-drawer-divider {
    animation: eg-drawer-header-in 0.5s ease 0.3s both;
}

.eg-drawer-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(243, 147, 24, 0.45), transparent);
}

.eg-drawer-divider i {
    font-size: 0.9rem;
    animation: eg-drawer-hourglass 2s ease-in-out infinite;
}

@keyframes eg-drawer-hourglass {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.eg-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-bottom: 0.75rem;
}

.eg-drawer-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1.5px solid transparent;
    border-radius: 1rem;
    background:
        linear-gradient(var(--eg-surface), var(--eg-surface)) padding-box,
        linear-gradient(135deg, rgba(243, 147, 24, 0.35), rgba(70, 30, 56, 0.12)) border-box;
    color: var(--eg-secondary);
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(70, 30, 56, 0.06);
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
    overflow: hidden;
}

.eg-drawer-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--eg-primary), var(--eg-secondary));
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.eg-drawer-link:active {
    transform: scale(0.98);
}

.eg-drawer-link:hover,
.eg-drawer-link:focus-visible {
    outline: none;
    box-shadow: 0 8px 22px rgba(243, 147, 24, 0.18);
    transform: translateY(-1px);
}

.eg-drawer-link:hover::before,
.eg-drawer-link:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
}

.eg-drawer-link-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(70, 30, 56, 0.18);
}

.eg-drawer-link-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.eg-drawer-link-label {
    font-family: var(--eg-font-display);
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--eg-secondary);
    line-height: 1.25;
}

.eg-drawer-link-hint {
    font-size: 0.75rem;
    color: var(--eg-text-muted);
    line-height: 1.35;
}

.eg-drawer-link-arrow {
    flex-shrink: 0;
    color: var(--eg-primary);
    font-size: 0.95rem;
    opacity: 0.7;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

html[dir="ltr"] .eg-drawer-link-arrow {
    transform: rotate(180deg);
}

.eg-drawer-link:hover .eg-drawer-link-arrow,
.eg-drawer-link:focus-visible .eg-drawer-link-arrow {
    opacity: 1;
    transform: translateX(calc(-0.2rem * var(--eg-dir, 1)));
}

html[dir="ltr"] .eg-drawer-link:hover .eg-drawer-link-arrow,
html[dir="ltr"] .eg-drawer-link:focus-visible .eg-drawer-link-arrow {
    transform: rotate(180deg) translateX(0.2rem);
}

.eg-drawer-link--browse .eg-drawer-link-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-light));
}

.eg-drawer-link--courses .eg-drawer-link-icon {
    background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-dark));
}

.eg-drawer-link--live .eg-drawer-link-icon {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.eg-drawer-link--history .eg-drawer-link-icon {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

.eg-drawer-link--notifications .eg-drawer-link-icon {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

.eg-drawer-link--bookmarks .eg-drawer-link-icon {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.eg-drawer-link--results .eg-drawer-link-icon,
.eg-drawer-link--bank .eg-drawer-link-icon {
    background: linear-gradient(135deg, var(--eg-secondary), var(--eg-secondary-light));
}

.eg-drawer-link--certificates .eg-drawer-link-icon {
    background: linear-gradient(135deg, #F39318, #d47d0f 55%, #461E38);
}

.eg-drawer-link--logout {
    margin-top: 0.35rem;
    background:
        linear-gradient(rgba(230, 17, 65, 0.05), rgba(230, 17, 65, 0.05)) padding-box,
        linear-gradient(135deg, rgba(230, 17, 65, 0.35), rgba(70, 30, 56, 0.1)) border-box;
}

.eg-drawer-link--logout .eg-drawer-link-icon {
    background: linear-gradient(135deg, #e61141, #9f1239);
}

.eg-drawer-link--logout .eg-drawer-link-label {
    color: #b91c3c;
}

html[data-bs-theme="dark"] .eg-drawer-link {
    background:
        linear-gradient(var(--eg-surface), var(--eg-surface)) padding-box,
        linear-gradient(135deg, rgba(243, 147, 24, 0.45), rgba(139, 77, 114, 0.25)) border-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

html[data-bs-theme="dark"] .eg-drawer-link-label {
    color: var(--eg-text);
}

html[data-bs-theme="dark"] .eg-drawer-link--logout .eg-drawer-link-label {
    color: #fb7185;
}

.eg-mobile-drawer.open .eg-drawer-actions > * {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: eg-drawer-action-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(1) { animation-delay: 0.28s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(2) { animation-delay: 0.34s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(3) { animation-delay: 0.40s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(4) { animation-delay: 0.46s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(5) { animation-delay: 0.52s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(6) { animation-delay: 0.58s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(7) { animation-delay: 0.64s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(8) { animation-delay: 0.70s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(9) { animation-delay: 0.76s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(10) { animation-delay: 0.82s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(11) { animation-delay: 0.88s; }

@keyframes eg-drawer-action-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.eg-mobile-drawer .eg-btn-login,
.eg-mobile-drawer .eg-btn-register {
    width: 100%;
    justify-content: center;
    padding: 0.85rem;
    font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .eg-hamburger.open .eg-hamburger__ring,
    .eg-hamburger.open .eg-hamburger__compass,
    .eg-mobile-drawer.open .eg-drawer-compass,
    .eg-drawer-divider i,
    .eg-mobile-drawer.open .eg-drawer-route,
    .eg-mobile-drawer.open .eg-drawer-map-dot,
    .eg-mobile-drawer.open .eg-drawer-history-header,
    .eg-mobile-drawer.open .eg-drawer-divider,
    .eg-mobile-drawer.open .eg-drawer-actions > *,
    .eg-nav-glow,
    .eg-nav-route-line,
    .eg-nav-route-dot,
    .eg-nav-brand-orbit,
    .eg-nav-brand img,
    .eg-hamburger,
    .eg-nav-brand,
    .eg-nav-actions,
    .eg-hero-compass,
    .eg-nile-river,
    .eg-compass-needle,
    .eg-ambient-grid,
    .eg-route,
    .eg-ambient-pin,
    .eg-ambient-compass,
    .eg-map-route,
    .eg-map-pin,
    .eg-hero-route,
    .eg-hero-map-dot,
    .eg-quote-deco i,
    .eg-section-deco,
    .eg-quote-banner {
        animation: none !important;
    }

    .eg-hamburger.open .eg-hamburger__compass {
        opacity: 1;
        transform: none;
    }

    .eg-mobile-drawer.open .eg-drawer-history-header,
    .eg-mobile-drawer.open .eg-drawer-divider,
    .eg-mobile-drawer.open .eg-drawer-actions > * {
        opacity: 1;
        transform: none;
    }

    .eg-drawer-route { stroke-dashoffset: 0; }
    .eg-drawer-map-dot { opacity: 0.7; }
}

.eg-hero {
    min-height: 100vh;
    padding: calc(var(--eg-nav-h) + 2rem) 1.25rem 3rem;
    position: relative;
    overflow: hidden;
}

.eg-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    color: var(--eg-secondary);
    transform: translate(var(--eg-mouse-x, 0), calc(var(--eg-parallax-y, 0px) + var(--eg-mouse-y, 0)));
    transition: transform 0.35s ease-out;
}

.eg-hero-compass--main {
    position: absolute;
    top: 12%;
    left: 5%;
    width: clamp(4rem, 12vw, 7rem);
    height: auto;
    opacity: 0.35;
    animation: eg-hero-compass-drift 12s ease-in-out infinite;
}

.eg-hero-compass--sub {
    position: absolute;
    bottom: 18%;
    left: 10%;
    width: clamp(2.5rem, 7vw, 4rem);
    height: auto;
    opacity: 0.25;
    animation: eg-hero-compass-drift 16s ease-in-out infinite reverse;
}

.eg-compass-needle {
    transform-origin: center;
    animation: eg-compass-wobble 8s ease-in-out infinite;
}

@keyframes eg-compass-wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
}

.eg-hero-map-grid {
    position: absolute;
    bottom: 15%;
    right: 3%;
    width: clamp(6rem, 18vw, 10rem);
    height: auto;
    opacity: 0.45;
}

.eg-hero-route {
    stroke: currentColor;
    opacity: 0.22;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: eg-hero-route-draw 4s ease forwards, eg-hero-route-pulse 6s ease-in-out 4s infinite;
}

.eg-hero-route--dash {
    opacity: 0.15;
    animation: eg-hero-route-dash 8s linear infinite;
    stroke-dashoffset: 0;
}

@keyframes eg-hero-route-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes eg-hero-route-pulse {
    0%, 100% { opacity: 0.22; }
    50% { opacity: 0.38; }
}

@keyframes eg-hero-route-dash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -40; }
}

.eg-hero-map-dot {
    opacity: 0;
    animation: eg-map-dot-ping 3s ease-in-out infinite;
}

.eg-hero-map-dot:nth-of-type(1) { animation-delay: 0.5s; }
.eg-hero-map-dot:nth-of-type(2) { animation-delay: 1.2s; }
.eg-hero-map-dot:nth-of-type(3) { animation-delay: 1.9s; }

@keyframes eg-map-dot-ping {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.4); }
}

.eg-hero-meridian {
    position: absolute;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--eg-secondary), transparent);
    opacity: 0.12;
    animation: eg-meridian-scan 10s ease-in-out infinite;
}

.eg-hero-meridian--1 {
    top: 5%;
    bottom: 5%;
    left: 25%;
    animation-delay: 0s;
}

.eg-hero-meridian--2 {
    top: 5%;
    bottom: 5%;
    right: 20%;
    animation-delay: -5s;
}

@keyframes eg-meridian-scan {
    0%, 100% { opacity: 0.08; transform: scaleY(0.85); }
    50% { opacity: 0.2; transform: scaleY(1); }
}

@keyframes eg-hero-compass-drift {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(-6px); }
}

.eg-hero-grid {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.eg-hero-visual {
    position: relative;
    width: 100%;
    max-width: 380px;
    animation: eg-float 4s ease-in-out infinite;
}

.eg-hero-visual::before {
    content: '';
    position: absolute;
    inset: 8% 0;
    background: radial-gradient(ellipse at center, var(--eg-primary-soft), transparent 68%);
    z-index: 0;
    pointer-events: none;
}

.eg-hero-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 20px 40px rgba(70, 30, 56, 0.2));
}

@keyframes eg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.eg-hero-content {
    text-align: center;
    max-width: 560px;
}

.eg-hero-welcome {
    font-size: 0.95rem;
    color: var(--eg-text-muted);
    margin-bottom: 0.75rem;
}

.eg-hero-title {
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    color: var(--eg-text);
}

.eg-hero-title .accent {
    color: var(--eg-primary);
    display: block;
}

.eg-hero-subtitle {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--eg-text-muted);
    margin: 1rem 0 1.75rem;
}

.eg-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    max-width: 320px;
    padding: 0.9rem 1.75rem;
    background: var(--eg-primary-soft);
    color: var(--eg-secondary);
    border: 2px solid var(--eg-primary);
    border-radius: 2rem;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.eg-hero-cta:hover {
    background: var(--eg-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(243, 147, 24, 0.35);
}

.eg-hero-cta--outline {
    background: transparent;
    color: var(--eg-secondary);
    border-color: var(--eg-secondary);
}

.eg-hero-cta--outline:hover {
    background: var(--eg-secondary);
    color: #fff;
    border-color: var(--eg-secondary);
    box-shadow: 0 8px 24px rgba(70, 30, 56, 0.3);
}

.eg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.eg-hero-sticker {
    display: block;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', sans-serif;
    font-size: clamp(1.45rem, 5vw, 1.95rem);
    font-weight: 600;
    color: var(--eg-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
    text-wrap: balance;
    animation: eg-hero-sticker-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.eg-hero-sticker-inner {
    display: inline-block;
    max-width: 100%;
    animation: eg-hero-sticker-float 6s ease-in-out 1s infinite;
}

.eg-hero-sticker-accent {
    font-weight: 700;
    color: var(--eg-primary);
}

@keyframes eg-hero-sticker-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes eg-hero-sticker-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .eg-hero-sticker,
    .eg-hero-sticker-inner {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.eg-hero-sticker-mobile { display: block; }
.eg-hero-sticker-desktop { display: none; }

.eg-about {
    padding: 4rem 1.25rem;
}

.eg-about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.eg-about-map {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
    background: radial-gradient(circle at 30% 40%, var(--eg-primary-soft), transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-about-map > svg:first-child {
    width: 90%;
    height: auto;
    opacity: 0.85;
}

.eg-about-compass {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--eg-secondary);
    opacity: 0.45;
    animation: eg-compass-spin 20s linear infinite;
}

.eg-map-route--1 {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: eg-map-route-draw 3s ease forwards 0.3s;
}

.eg-map-route--2 {
    stroke-dasharray: 8 4;
    animation: eg-map-route-dash 12s linear infinite;
}

@keyframes eg-map-route-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes eg-map-route-dash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -48; }
}

.eg-map-pin {
    transform-origin: center;
    animation: eg-map-pin-pulse 2.5s ease-in-out infinite;
}

.eg-map-pin:nth-of-type(1) { animation-delay: 0s; }
.eg-map-pin:nth-of-type(2) { animation-delay: 0.6s; }
.eg-map-pin:nth-of-type(3) { animation-delay: 1.2s; }

@keyframes eg-map-pin-pulse {
    0%, 100% { opacity: 0.7; r: inherit; }
    50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(243, 147, 24, 0.6)); }
}

.eg-about-map.visible .eg-map-route--1 {
    animation-play-state: running;
}

.eg-about-text {
    text-align: center;
    max-width: 640px;
}

.eg-about-heading {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    color: var(--eg-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

.eg-about-body {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--eg-text-muted);
}

.eg-quote-banner {
    position: relative;
    padding: 2.5rem 1.25rem;
    background:
        linear-gradient(135deg, rgba(243, 147, 24, 0.15) 0%, rgba(70, 30, 56, 0.08) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23461E38' stroke-opacity='0.04' stroke-width='0.5'%3E%3Cpath d='M0,40 H80 M40,0 V80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, 80px 80px;
    border-top: 3px solid var(--eg-primary);
    border-bottom: 3px solid var(--eg-secondary);
    overflow: hidden;
    animation: eg-quote-bg-shift 30s linear infinite;
}

@keyframes eg-quote-bg-shift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 80px 80px; }
}

.eg-quote-banner::before,
.eg-quote-banner::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(-45deg, var(--eg-secondary), var(--eg-secondary) 8px, var(--eg-primary) 8px, var(--eg-primary) 16px);
    opacity: 0.3;
}

.eg-quote-banner::before { top: 0; }
.eg-quote-banner::after { bottom: 0; }

.eg-quote-text {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(1.25rem, 3.5vw, 1.85rem);
    font-weight: 900;
    color: var(--eg-secondary);
    line-height: 1.5;
}

.eg-quote-deco {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: var(--eg-primary);
    opacity: 0.65;
}

.eg-quote-deco i:nth-child(1) { animation: eg-quote-icon-bob 3s ease-in-out infinite; }
.eg-quote-deco i:nth-child(2) { animation: eg-quote-icon-spin 8s linear infinite; }
.eg-quote-deco i:nth-child(3) { animation: eg-quote-icon-bob 3s ease-in-out infinite 0.5s; }

@keyframes eg-quote-icon-bob {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(-6px); opacity: 0.85; }
}

@keyframes eg-quote-icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.eg-section-deco {
    display: block;
    font-size: 1.75rem;
    color: var(--eg-primary);
    opacity: 0.45;
    margin-bottom: 0.75rem;
    animation: eg-section-deco-pulse 4s ease-in-out infinite;
}

@keyframes eg-section-deco-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.08); }
}

.eg-section {
    padding: 4rem 1.25rem;
}

.eg-section-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.eg-section-heading h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--eg-text);
}

.eg-section-heading h2 .highlight {
    position: relative;
    display: inline-block;
}

.eg-section-heading h2 .highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--eg-primary-soft);
    border-radius: 4px;
    z-index: -1;
}

.eg-section-heading p {
    margin-top: 0.75rem;
    color: var(--eg-text-muted);
    font-size: 1.05rem;
}

.eg-features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.eg-feature-card {
    background: var(--eg-surface);
    border: 2px solid var(--eg-border);
    border-radius: var(--eg-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.eg-feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23461E38' stroke-opacity='0.04' stroke-width='0.5'%3E%3Cellipse cx='30' cy='30' rx='25' ry='18'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.eg-feature-card:hover::after {
    opacity: 1;
}

.eg-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, var(--eg-primary-soft), transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.eg-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--eg-shadow-lg);
    border-color: var(--eg-primary);
}

.eg-feature-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eg-secondary);
    color: var(--eg-primary);
    border-radius: 50%;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.eg-feature-card:hover .eg-feature-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 0 0 4px var(--eg-primary-soft);
}

.eg-feature-card:nth-child(2):hover .eg-feature-icon {
    animation: eg-hourglass-tilt 1.2s ease-in-out infinite;
}

@keyframes eg-hourglass-tilt {
    0%, 100% { transform: scale(1.08) rotate(-5deg); }
    50% { transform: scale(1.08) rotate(5deg); }
}

.eg-feature-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--eg-secondary);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.eg-feature-card p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--eg-text-muted);
    position: relative;
    z-index: 1;
}

.eg-grades-section {
    padding-block: 5rem;
}

.eg-grades-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.eg-grade-card {
    position: relative;
    border-radius: var(--eg-radius);
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--eg-secondary);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    background: var(--eg-surface);
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-grade-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: var(--eg-shadow-lg);
}

.eg-grade-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--eg-primary-soft), transparent 75%);
    z-index: 0;
    pointer-events: none;
}

.eg-grade-card::after {
    content: '';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F39318'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0;
    transform: scale(0.5) translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2;
    pointer-events: none;
}

.eg-grade-card:hover::after {
    opacity: 0.85;
    transform: scale(1) translateY(0);
    animation: eg-pin-bounce 1.5s ease-in-out infinite;
}

@keyframes eg-pin-bounce {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.1) translateY(-4px); }
}

.eg-grade-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.eg-grade-card-fallback {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(145deg, var(--eg-secondary) 0%, var(--eg-secondary-light) 100%);
    color: #fff;
    text-align: center;
    min-height: 280px;
}

.eg-grade-card-fallback h3 {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--eg-primary);
    margin-bottom: 0.5rem;
}

.eg-grade-card-fallback p {
    font-size: 0.95rem;
    opacity: 0.9;
}

.eg-carousel-section {
    padding: 4rem 1.25rem;
}

.eg-carousel-layout {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.eg-carousel-intro h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    text-align: center;
    line-height: 1.3;
}

.eg-carousel-intro h2 .orange {
    color: var(--eg-primary);
}

.eg-carousel-intro p {
    text-align: center;
    color: var(--eg-text-muted);
    margin-top: 0.75rem;
    line-height: 1.75;
}

.eg-carousel-wrapper {
    position: relative;
    background: linear-gradient(135deg, var(--eg-primary) 0%, var(--eg-secondary-light) 100%);
    border-radius: var(--eg-radius);
    padding: 2rem 1rem;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-carousel-slide {
    background: var(--eg-surface);
    border-radius: var(--eg-radius-sm);
    overflow: hidden;
    max-width: 340px;
    width: 100%;
    box-shadow: var(--eg-shadow-lg);
    animation: eg-slide-in 0.5s ease;
}

@keyframes eg-slide-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.eg-carousel-slide img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.eg-carousel-slide-body {
    padding: 1.25rem;
}

.eg-carousel-slide-body h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--eg-secondary);
    margin-bottom: 0.5rem;
}

.eg-carousel-slide-body p {
    font-size: 0.875rem;
    color: var(--eg-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-carousel-price {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.4rem 1rem;
    background: var(--eg-primary);
    color: #fff;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.eg-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--eg-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: var(--eg-shadow);
}

.eg-carousel-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.eg-carousel-nav.prev { left: 0.75rem; }
.eg-carousel-nav.next { right: 0.75rem; }

.eg-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.eg-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(70, 30, 56, 0.25);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.eg-carousel-dot.active {
    background: var(--eg-primary);
    transform: scale(1.3);
}

.eg-carousel-wrapper--courses {
    padding-bottom: 2.75rem;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #8eb285 0%,
        var(--eg-primary) 42%,
        #fbb034 78%,
        var(--eg-secondary-light) 100%
    );
    background-size: 220% 220%;
    animation: eg-courses-gradient-flow 8s ease-in-out infinite;
    box-shadow:
        0 20px 60px rgba(243, 147, 24, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

@keyframes eg-courses-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.eg-carousel-ambience {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.eg-carousel-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.45;
}

.eg-carousel-orb--1 {
    width: 140px;
    height: 140px;
    top: -30px;
    left: 10%;
    background: rgba(255, 255, 255, 0.55);
    animation: eg-courses-orb-drift 7s ease-in-out infinite;
}

.eg-carousel-orb--2 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    right: 8%;
    background: rgba(255, 200, 80, 0.7);
    animation: eg-courses-orb-drift 9s ease-in-out infinite reverse;
}

.eg-carousel-orb--3 {
    width: 80px;
    height: 80px;
    top: 40%;
    left: 55%;
    background: rgba(142, 178, 133, 0.65);
    animation: eg-courses-orb-drift 6s ease-in-out infinite 1s;
}

@keyframes eg-courses-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(18px, -12px) scale(1.08); }
    66% { transform: translate(-14px, 10px) scale(0.94); }
}

.eg-carousel-shimmer {
    position: absolute;
    inset: -50%;
    background: linear-gradient(
        105deg,
        transparent 42%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 58%
    );
    animation: eg-courses-shimmer-sweep 5s ease-in-out infinite;
}

@keyframes eg-courses-shimmer-sweep {
    0% { transform: translateX(-60%) rotate(8deg); opacity: 0; }
    20% { opacity: 1; }
    60% { transform: translateX(60%) rotate(8deg); opacity: 1; }
    80%, 100% { transform: translateX(80%) rotate(8deg); opacity: 0; }
}

.eg-carousel-wrapper--courses .eg-carousel-nav,
.eg-carousel-wrapper--courses .eg-course-slide,
.eg-carousel-wrapper--courses .eg-carousel-dots--inset {
    z-index: 2;
}

.eg-carousel-nav--pulse {
    animation: eg-courses-nav-breathe 3.2s ease-in-out infinite;
}

.eg-carousel-nav--pulse.next {
    animation-delay: 1.6s;
}

@keyframes eg-courses-nav-breathe {
    0%, 100% { box-shadow: 0 4px 16px rgba(70, 30, 56, 0.15); }
    50% { box-shadow: 0 6px 28px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.2); }
}

.eg-carousel-intro--courses h2 .eg-intro-globe {
    display: inline-block;
    animation: eg-courses-globe-spin 5s ease-in-out infinite;
}

.eg-carousel-intro--courses h2 .eg-intro-globe--delay {
    animation-delay: 2.5s;
}

@keyframes eg-courses-globe-spin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-12deg) scale(1.1); }
    75% { transform: rotate(12deg) scale(1.1); }
}

.eg-carousel-intro--courses.visible h2 .orange {
    animation: eg-courses-text-glow 2.8s ease-in-out infinite;
}

@keyframes eg-courses-text-glow {
    0%, 100% {
        text-shadow: 0 0 0 transparent;
        filter: brightness(1);
    }
    50% {
        text-shadow: 0 0 20px rgba(243, 147, 24, 0.55);
        filter: brightness(1.12);
    }
}

.eg-carousel-intro--courses.visible p {
    animation: eg-courses-intro-fade 0.9s ease 0.35s both;
}

.eg-intro-sparkle {
    display: inline-block;
    animation: eg-courses-sparkle 2s ease-in-out infinite;
}

@keyframes eg-courses-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.35) rotate(18deg); opacity: 0.75; }
}

@keyframes eg-courses-intro-fade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.eg-course-slide {
    background: var(--eg-surface);
    border-radius: var(--eg-radius-sm);
    overflow: hidden;
    max-width: 340px;
    width: 100%;
    box-shadow:
        0 24px 48px rgba(70, 30, 56, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    perspective: 900px;
    transform-style: preserve-3d;
}

.eg-course-slide--forward {
    animation: eg-course-enter-forward 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eg-course-slide--backward {
    animation: eg-course-enter-backward 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes eg-course-enter-forward {
    0% {
        opacity: 0;
        transform: translateX(56px) scale(0.86) rotateY(-10deg);
        filter: blur(8px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0);
        filter: blur(0);
    }
}

@keyframes eg-course-enter-backward {
    0% {
        opacity: 0;
        transform: translateX(-56px) scale(0.86) rotateY(10deg);
        filter: blur(8px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0);
        filter: blur(0);
    }
}

.eg-course-slide-media {
    position: relative;
    overflow: hidden;
}

.eg-course-slide-media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    animation: eg-course-img-kenburns 10s ease-in-out infinite alternate;
}

@keyframes eg-course-img-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.eg-course-slide-badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--eg-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    animation: eg-course-badge-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes eg-course-badge-pop {
    0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.eg-course-slide-badge--free {
    background: var(--eg-primary);
    color: #fff;
}

.eg-course-slide-body {
    padding: 1rem 1.25rem 1.25rem;
    text-align: center;
}

.eg-course-slide-body h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--eg-text);
    margin-bottom: 0.35rem;
    animation: eg-course-content-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.eg-course-slide-body p {
    font-size: 0.875rem;
    color: var(--eg-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.75rem;
    animation: eg-course-content-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

@keyframes eg-course-content-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.eg-course-price-btn {
    position: relative;
    display: inline-block;
    min-width: 140px;
    padding: 0.55rem 1.5rem;
    border: none;
    border-radius: 2rem;
    background: linear-gradient(90deg, #e84393 0%, #fd6b3a 55%, var(--eg-primary) 100%);
    background-size: 200% 100%;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    overflow: hidden;
    animation:
        eg-course-content-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both,
        eg-course-btn-gradient 4s ease infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@keyframes eg-course-btn-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.eg-course-price-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.42) 50%,
        transparent 62%
    );
    transform: translateX(-120%);
    animation: eg-course-btn-shine 3.5s ease-in-out infinite;
}

@keyframes eg-course-btn-shine {
    0%, 35% { transform: translateX(-120%); }
    55% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

.eg-course-price-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 28px rgba(232, 67, 147, 0.45);
}

.eg-course-price-btn:active {
    transform: scale(0.98);
}

.eg-carousel-dots--inset {
    position: absolute;
    bottom: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    z-index: 2;
}

.eg-carousel-dots--inset .eg-carousel-dot {
    background: rgba(255, 255, 255, 0.45);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, width 0.35s ease;
}

.eg-carousel-dots--inset .eg-carousel-dot.active {
    background: #fff;
    transform: scale(1.35);
    width: 22px;
    border-radius: 999px;
    animation: eg-course-dot-pulse 2s ease-in-out infinite;
}

@keyframes eg-course-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

html[data-bs-theme="dark"] .eg-course-slide {
    background: #3a2a38;
}

html[data-bs-theme="dark"] .eg-course-slide-body h4 {
    color: var(--eg-primary-light);
}

@media (prefers-reduced-motion: reduce) {
    .eg-carousel-wrapper--courses,
    .eg-carousel-orb,
    .eg-carousel-shimmer,
    .eg-carousel-nav--pulse,
    .eg-carousel-intro--courses h2 .eg-intro-globe,
    .eg-carousel-intro--courses.visible h2 .orange,
    .eg-intro-sparkle,
    .eg-course-slide--forward,
    .eg-course-slide--backward,
    .eg-course-slide-media img,
    .eg-course-slide-badge,
    .eg-course-slide-body h4,
    .eg-course-slide-body p,
    .eg-course-price-btn,
    .eg-course-price-btn::after,
    .eg-carousel-dots--inset .eg-carousel-dot.active {
        animation: none !important;
    }

    .eg-course-slide--forward,
    .eg-course-slide--backward {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.eg-cards-scroll {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.eg-mini-card {
    background: var(--eg-surface);
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eg-mini-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--eg-shadow);
}

.eg-mini-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.eg-mini-card-body {
    padding: 1rem 1.25rem;
}

.eg-mini-card-body h4 {
    font-weight: 800;
    color: var(--eg-secondary);
    margin-bottom: 0.35rem;
}

.eg-mini-card-body p {
    font-size: 0.875rem;
    color: var(--eg-text-muted);
    line-height: 1.6;
}

.eg-read-more {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--eg-primary);
    font-weight: 700;
    font-size: 0.875rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.eg-enrolled-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.eg-enrolled-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--eg-surface);
    border: 1.5px solid var(--eg-border);
    border-radius: var(--eg-radius-sm);
    transition: border-color 0.25s ease;
}

.eg-enrolled-item:hover {
    border-color: var(--eg-primary);
}

.eg-enrolled-item h4 {
    font-weight: 700;
    color: var(--eg-secondary);
}

.eg-continue-btn {
    padding: 0.5rem 1.25rem;
    background: var(--eg-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.eg-continue-btn:hover {
    background: var(--eg-primary-dark);
}

/* ── Learning Chronicle (recently watched) ── */

.eg-chronicle-section {
    position: relative;
}

.eg-chronicle {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-inline-start: 1.75rem;
}

.eg-chronicle-rail {
    position: absolute;
    inset-block: 0.5rem 0.5rem;
    inset-inline-start: 0.55rem;
    width: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--eg-primary) 55%, transparent) 8%,
        color-mix(in srgb, var(--eg-secondary) 45%, transparent) 50%,
        color-mix(in srgb, var(--eg-primary) 55%, transparent) 92%,
        transparent 100%
    );
    border-radius: 2px;
}

.eg-chronicle-entry {
    position: relative;
    cursor: pointer;
}

.eg-chronicle-marker {
    position: absolute;
    inset-inline-start: -1.55rem;
    top: 1.35rem;
    z-index: 1;
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    background: linear-gradient(145deg, var(--eg-primary), var(--eg-secondary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--eg-primary) 18%, transparent);
    animation: eg-chronicle-pulse 3.5s ease-in-out infinite;
}

@keyframes eg-chronicle-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--eg-primary) 16%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--eg-primary) 8%, transparent); }
}

.eg-chronicle-card {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    align-items: stretch;
    padding: 0.85rem;
    background:
        radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--eg-primary) 10%, transparent), transparent 55%),
        linear-gradient(145deg, var(--eg-parchment) 0%, var(--eg-surface) 55%, var(--eg-parchment-dark) 140%);
    border: 1.5px solid color-mix(in srgb, var(--eg-secondary) 16%, transparent);
    border-radius: var(--eg-radius);
    box-shadow: var(--eg-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.eg-chronicle-entry:hover .eg-chronicle-card {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--eg-primary) 55%, transparent);
    box-shadow: var(--eg-shadow-lg);
}

.eg-chronicle-thumb {
    position: relative;
    border-radius: calc(var(--eg-radius-sm) + 2px);
    overflow: hidden;
    min-height: 5.5rem;
    background: var(--eg-secondary);
    border: 1px solid color-mix(in srgb, var(--eg-primary) 28%, transparent);
}

.eg-chronicle-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.eg-chronicle-entry:hover .eg-chronicle-thumb img {
    transform: scale(1.06);
}

.eg-chronicle-seal {
    position: absolute;
    inset-inline-end: 0.4rem;
    bottom: 0.4rem;
    min-width: 2.4rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--eg-secondary);
    background:
        radial-gradient(circle at 30% 25%, #fff8ec, transparent 55%),
        linear-gradient(145deg, #f7efe4, #e2c89a);
    border: 1px solid color-mix(in srgb, var(--eg-primary) 45%, transparent);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.eg-chronicle-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.15rem 0.35rem 0.15rem 0;
}

.eg-chronicle-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--eg-primary-dark) 85%, var(--eg-secondary));
}

.eg-chronicle-body h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--eg-secondary);
    line-height: 1.35;
}

.eg-chronicle-bar {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--eg-secondary) 10%, transparent);
    overflow: hidden;
    margin-top: 0.15rem;
}

.eg-chronicle-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--eg-secondary), var(--eg-primary));
    transition: width 0.5s ease;
}

.eg-chronicle-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
    font-size: 0.78rem;
    color: var(--eg-text-muted);
}

.eg-chronicle-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.eg-chronicle-done {
    color: color-mix(in srgb, var(--eg-primary-dark) 70%, #2e7d32);
    font-weight: 700;
}

.eg-chronicle-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.eg-chronicle-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}

.eg-chronicle-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.35rem;
    border-radius: 999px;
    border: 1.5px dashed color-mix(in srgb, var(--eg-primary) 45%, transparent);
    background: color-mix(in srgb, var(--eg-parchment) 88%, #fff);
    color: var(--eg-secondary);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.eg-chronicle-link:hover {
    transform: translateY(-2px);
    border-style: solid;
    border-color: var(--eg-primary);
    background: #fff;
    box-shadow: 0 10px 24px rgba(70, 30, 56, 0.12);
}

/* ── Open Expeditions (enrolled courses) ── */

.eg-expedition-section {
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 10% 20%, color-mix(in srgb, var(--eg-primary) 8%, transparent), transparent 55%),
        radial-gradient(ellipse 50% 45% at 90% 80%, color-mix(in srgb, var(--eg-secondary) 7%, transparent), transparent 50%),
        var(--eg-cream);
}

.eg-expedition-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.eg-expedition-card {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--eg-radius);
    border: 1.5px solid color-mix(in srgb, var(--eg-secondary) 14%, transparent);
    background:
        linear-gradient(165deg, var(--eg-parchment) 0%, var(--eg-surface) 45%, color-mix(in srgb, var(--eg-parchment-dark) 70%, #fff) 100%);
    box-shadow: var(--eg-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.eg-expedition-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--eg-primary) 50%, transparent);
    box-shadow: var(--eg-shadow-lg);
}

.eg-expedition-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(145deg, var(--eg-secondary-dark), var(--eg-secondary));
}

.eg-expedition-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.eg-expedition-card:hover .eg-expedition-media img {
    transform: scale(1.05);
}

.eg-expedition-ribbon {
    position: absolute;
    inset-block-start: 0.85rem;
    inset-inline-start: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eg-secondary);
    background: linear-gradient(135deg, #fff6e8, #e8d2a8);
    border: 1px solid color-mix(in srgb, var(--eg-primary) 40%, transparent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.eg-expedition-compass {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--eg-primary-light);
    background: color-mix(in srgb, var(--eg-secondary) 78%, transparent);
    border: 1.5px dashed color-mix(in srgb, var(--eg-primary) 55%, transparent);
    font-size: 1.1rem;
    animation: eg-expedition-spin 14s linear infinite;
}

@keyframes eg-expedition-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.eg-expedition-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem 1.25rem 1.3rem;
}

.eg-expedition-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--eg-primary-dark) 80%, var(--eg-secondary));
}

.eg-expedition-body h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--eg-secondary);
    line-height: 1.35;
}

.eg-expedition-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--eg-text-muted);
    line-height: 1.55;
}

.eg-expedition-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

@media (min-width: 640px) {
    .eg-chronicle-card {
        grid-template-columns: 9.5rem 1fr;
    }

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

@media (max-width: 479.98px) {
    .eg-chronicle {
        padding-inline-start: 1.35rem;
    }

    .eg-chronicle-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .eg-chronicle-thumb {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .eg-chronicle-marker {
        top: 1rem;
    }
}

@media (min-width: 1024px) {
    .eg-expedition-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .eg-chronicle {
        padding-inline-start: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-chronicle-marker,
    .eg-expedition-compass {
        animation: none !important;
    }

    .eg-chronicle-entry:hover .eg-chronicle-card,
    .eg-expedition-card:hover {
        transform: none;
    }

    .eg-chronicle-entry:hover .eg-chronicle-thumb img,
    .eg-expedition-card:hover .eg-expedition-media img {
        transform: none;
    }
}

.eg-footer {
    --eg-footer-bg: var(--eg-secondary);
    --eg-footer-accent: var(--eg-primary);
    --eg-footer-badge: var(--eg-primary-dark);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--eg-secondary) 0%, var(--eg-secondary-dark) 100%);
    border-top: 2px solid var(--eg-primary);
    color: #fff;
    font-family: 'Cairo', 'Segoe UI', 'Tajawal', sans-serif;
    padding: 3.5rem 1.25rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.eg-footer-bg-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.eg-footer-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 147, 24, 0.16) 0%, transparent 70%);
    animation: eg-footer-drift 12s ease-in-out infinite;
}

.eg-footer-orb--1 {
    width: 280px;
    height: 280px;
    top: -80px;
    right: -60px;
}

.eg-footer-orb--2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -40px;
    animation-delay: -4s;
}

.eg-footer-orb--3 {
    width: 120px;
    height: 120px;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -7s;
    opacity: 0.6;
}

@keyframes eg-footer-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate(12px, -18px) scale(1.08); opacity: 0.85; }
}

.eg-footer-animate {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(28px);
}

.eg-footer.in-view .eg-footer-animate {
    animation: eg-footer-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--eg-footer-delay, 0s);
}

@keyframes eg-footer-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

.eg-footer-logo img {
    height: 4.5rem;
    width: auto;
    margin-bottom: 1.5rem;
    background: transparent;
    filter: none;
    animation: eg-footer-logo-float 4.5s ease-in-out infinite;
}

@keyframes eg-footer-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.eg-footer-tagline {
    font-family: 'Cairo', 'Segoe UI', 'Tajawal', sans-serif;
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: #fff;
    letter-spacing: 0.01em;
    background: linear-gradient(
        90deg,
        #fff 0%,
        #fff 40%,
        var(--eg-primary) 50%,
        var(--eg-primary-light) 55%,
        #fff 60%,
        #fff 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eg-footer-shimmer 6s linear infinite;
}

@keyframes eg-footer-shimmer {
    0% { background-position: 220% center; }
    100% { background-position: -220% center; }
}

.eg-footer-motivation-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    margin: 0 0 1.5rem;
    padding: 0 1rem;
    max-width: 36rem;
}

.eg-footer-motivation-spark {
    color: var(--eg-footer-accent);
    font-size: 0.75rem;
    opacity: 0.85;
    animation: eg-footer-spark 2.2s ease-in-out infinite;
}

.eg-footer-motivation-spark:last-child {
    animation-delay: -1.1s;
}

@keyframes eg-footer-spark {
    0%, 100% { opacity: 0.45; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
}

.eg-footer-motivation {
    font-family: 'Cairo', 'Segoe UI', 'Tajawal', sans-serif;
    font-size: clamp(0.92rem, 2.4vw, 1.05rem);
    font-weight: 700;
    margin: 0;
    color: var(--eg-primary-light);
    line-height: 1.65;
    transition: opacity 0.38s ease, transform 0.38s ease;
}

.eg-footer-motivation.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.eg-footer-motivation.is-fading {
    opacity: 0;
    transform: translateY(8px);
}

.eg-footer-divider {
    width: min(38%, 220px);
    height: 1px;
    background: var(--eg-footer-accent);
    margin: 0 auto 1.75rem;
    border: none;
    border-radius: 0;
    transform-origin: center;
}

.eg-footer.in-view .eg-footer-divider {
    animation: eg-footer-divider-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--eg-footer-delay, 0s);
}

@keyframes eg-footer-divider-enter {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

.eg-footer-social-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.eg-footer-social-label {
    font-family: 'Cairo', 'Segoe UI', 'Tajawal', sans-serif;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    font-weight: 700;
    margin: 0;
    color: #fff;
    white-space: nowrap;
}

.eg-footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.eg-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.eg-footer.in-view .eg-social-icon {
    animation: eg-footer-social-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--eg-footer-delay, 0.52s) + var(--social-delay, 0s));
}

@keyframes eg-footer-social-pop {
    from { opacity: 0; transform: translateY(16px) scale(0.85); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.eg-social-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eg-social-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    color: #fff;
    background: var(--eg-footer-badge, #d47d0f);
}

.eg-social-icon:hover,
.eg-social-icon:focus-visible {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 24px rgba(243, 147, 24, 0.4);
}

.eg-social-icon:focus-visible {
    outline: 2px solid var(--eg-footer-accent);
    outline-offset: 2px;
}

.eg-footer-credits {
    font-family: 'Cairo', 'Segoe UI', sans-serif;
    font-size: clamp(0.7rem, 2vw, 0.82rem);
    font-weight: 600;
    color: var(--eg-footer-accent);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.45rem;
    line-height: 1.6;
    direction: ltr;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

a.eg-footer-credits:hover {
    opacity: 0.92;
}

.eg-credits-bracket {
    color: var(--eg-footer-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.eg-credits-name {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 0.35rem;
    background: var(--eg-footer-badge);
    color: #fff;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
}

.eg-footer.in-view .eg-credits-name:hover {
    background: var(--eg-primary);
}

.eg-footer.in-view .eg-credits-name {
    animation: eg-footer-badge-pulse 3s ease-in-out infinite;
}

.eg-footer.in-view .eg-credits-name:last-of-type {
    animation-delay: -1.5s;
}

@keyframes eg-footer-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.eg-credits-sep {
    color: var(--eg-footer-accent);
}

@media (prefers-reduced-motion: reduce) {
    .eg-footer-orb,
    .eg-footer-logo img,
    .eg-footer-tagline,
    .eg-footer-motivation-spark,
    .eg-footer.in-view .eg-footer-animate,
    .eg-footer.in-view .eg-footer-divider,
    .eg-footer.in-view .eg-social-icon,
    .eg-footer.in-view .eg-credits-name {
        animation: none !important;
    }

    .eg-footer-animate,
    .eg-social-icon {
        opacity: 1;
        transform: none;
    }

    .eg-footer-tagline {
        -webkit-text-fill-color: #fff;
        background: none;
    }

    .eg-footer-motivation {
        transition: none;
    }
}

.eg-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(70, 30, 56, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: eg-fade-in 0.25s ease;
}

@keyframes eg-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.eg-modal {
    background: var(--eg-surface);
    border-radius: var(--eg-radius);
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    position: relative;
    animation: eg-pop-in 0.35s ease;
}

@keyframes eg-pop-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.eg-modal img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.eg-modal-body {
    padding: 1.5rem;
}

.eg-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--eg-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (max-width: 767.98px) {
    .eg-ambient-pin,
    .eg-ambient-compass--2,
    .eg-hero-compass--sub,
    .eg-hero-meridian {
        display: none;
    }

    .eg-ambient-routes { opacity: 0.2; }

    .eg-nav {
        height: var(--eg-nav-h);
        border-bottom: none;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(253, 248, 240, 0.88) 100%);
        backdrop-filter: blur(16px) saturate(1.15);
        -webkit-backdrop-filter: blur(16px) saturate(1.15);
        box-shadow:
            0 1px 0 rgba(243, 147, 24, 0.18),
            0 10px 28px rgba(70, 30, 56, 0.08);
        overflow: visible;
    }

    html[data-bs-theme="dark"] .eg-nav {
        background:
            linear-gradient(180deg, rgba(50, 36, 48, 0.94) 0%, rgba(36, 24, 32, 0.9) 100%);
        box-shadow:
            0 1px 0 rgba(243, 147, 24, 0.28),
            0 12px 32px rgba(0, 0, 0, 0.35);
    }

    .eg-nav.scrolled {
        box-shadow:
            0 1px 0 rgba(243, 147, 24, 0.28),
            0 14px 36px rgba(70, 30, 56, 0.14);
    }

    .eg-nav.menu-open {
        box-shadow:
            0 1px 0 rgba(243, 147, 24, 0.4),
            0 16px 40px rgba(70, 30, 56, 0.16);
    }

    .eg-nav-glow {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 55% 120% at 12% 50%, rgba(243, 147, 24, 0.14), transparent 60%),
            radial-gradient(ellipse 45% 100% at 88% 40%, rgba(70, 30, 56, 0.08), transparent 55%);
        animation: eg-nav-glow-drift 8s ease-in-out infinite alternate;
    }

    @keyframes eg-nav-glow-drift {
        from { opacity: 0.7; transform: translateX(-1.5%); }
        to { opacity: 1; transform: translateX(1.5%); }
    }

    .eg-nav-route {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        z-index: 3;
        height: 3px;
        pointer-events: none;
    }

    .eg-nav-route-line {
        flex: 1;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(243, 147, 24, 0.15) 12%,
            rgba(243, 147, 24, 0.85) 50%,
            rgba(70, 30, 56, 0.55) 78%,
            transparent 100%
        );
        background-size: 220% 100%;
        animation: eg-nav-route-flow 4.5s linear infinite;
        transform-origin: center;
    }

    .eg-nav-route-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--eg-primary);
        box-shadow: 0 0 0 3px rgba(243, 147, 24, 0.18);
        animation: eg-nav-route-pulse 2.2s ease-in-out infinite;
    }

    .eg-nav-route-dot:last-child {
        background: var(--eg-secondary);
        box-shadow: 0 0 0 3px rgba(70, 30, 56, 0.14);
        animation-delay: 0.55s;
    }

    @keyframes eg-nav-route-flow {
        from { background-position: 100% 0; }
        to { background-position: -100% 0; }
    }

    @keyframes eg-nav-route-pulse {
        0%, 100% { transform: scale(1); opacity: 0.85; }
        50% { transform: scale(1.35); opacity: 1; }
    }

    .eg-nav-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding-inline: 0.85rem;
    }

    .eg-hamburger {
        justify-self: start;
        width: 2.9rem;
        height: 2.9rem;
        border-radius: 1rem;
        animation: eg-nav-item-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .eg-nav-brand {
        justify-self: center;
        width: 3.35rem;
        height: 3.35rem;
        border-radius: 50%;
        animation: eg-nav-item-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }

    .eg-nav-brand-orbit {
        display: block;
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 1.5px dashed rgba(243, 147, 24, 0.45);
        animation: eg-nav-brand-orbit-spin 12s linear infinite;
        pointer-events: none;
    }

    .eg-nav-brand img {
        height: 2.55rem;
        filter: drop-shadow(0 4px 10px rgba(70, 30, 56, 0.12));
        animation: eg-nav-brand-breathe 3.8s ease-in-out infinite;
    }

    @keyframes eg-nav-brand-orbit-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes eg-nav-brand-breathe {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.045); }
    }

    @keyframes eg-nav-item-in {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.92);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .eg-nav-actions {
        justify-self: end;
        animation: eg-nav-item-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
    }

    .eg-nav-action-dock {
        padding: 0.22rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.55);
        border: 1px solid rgba(243, 147, 24, 0.22);
        box-shadow:
            0 4px 14px rgba(70, 30, 56, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(8px);
        gap: 0.2rem;
    }

    html[data-bs-theme="dark"] .eg-nav-action-dock {
        background: rgba(42, 30, 40, 0.72);
        border-color: rgba(243, 147, 24, 0.3);
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__track {
        width: 2.65rem;
        height: 1.55rem;
        padding: 0.15rem;
        border-radius: 999px;
    }

    .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__thumb {
        top: 0.15rem;
        left: 0.15rem;
        width: calc(1.55rem - 0.3rem);
        height: calc(1.55rem - 0.3rem);
    }

    .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__thumb.is-dark,
    html[data-bs-theme="dark"] .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__thumb {
        left: calc(100% - 0.15rem - (1.55rem - 0.3rem));
    }

    html[data-bs-theme="light"] .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__thumb {
        left: 0.15rem;
    }

    .eg-nav-action-dock .eg-theme-toggle--nav .eg-theme-toggle__icon {
        font-size: 0.7rem;
    }

    .eg-nav-action-dock .eg-notif-btn {
        width: 2.35rem;
        height: 2.35rem;
    }

    .eg-nav.menu-open .eg-nav-brand-orbit {
        border-color: rgba(243, 147, 24, 0.75);
        animation-duration: 4s;
    }

    .eg-nav.menu-open .eg-nav-route-line {
        animation-duration: 2.2s;
        filter: saturate(1.25);
    }

    .eg-drawer-profile {
        position: relative;
        overflow: hidden;
        border-radius: 1.15rem;
        padding: 0.95rem 1rem;
        background:
            linear-gradient(135deg, rgba(243, 147, 24, 0.16), rgba(70, 30, 56, 0.06)),
            var(--eg-primary-soft);
        border: 1.5px solid rgba(243, 147, 24, 0.28);
        box-shadow: 0 8px 24px rgba(243, 147, 24, 0.12);
    }

    .eg-drawer-profile::after {
        content: '';
        position: absolute;
        inset-inline-end: -1rem;
        top: -1rem;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(243, 147, 24, 0.22), transparent 70%);
        pointer-events: none;
    }

    .eg-drawer-profile-avatar {
        box-shadow: 0 0 0 3px rgba(243, 147, 24, 0.2);
    }

    .eg-drawer-history-header {
        padding: 0.15rem 0.15rem 0.85rem;
    }

    .eg-drawer-compass-wrap {
        width: 3.5rem;
        height: 3.5rem;
        background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), transparent 50%),
            var(--eg-primary-soft);
        box-shadow:
            0 6px 18px rgba(243, 147, 24, 0.2),
            inset 0 0 0 1px rgba(243, 147, 24, 0.2);
    }

    .eg-mobile-drawer-panel {
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        padding: 1.15rem 1.1rem 1.5rem;
        box-shadow: 0 22px 50px rgba(70, 30, 56, 0.22);
    }

    .eg-mobile-drawer {
        background: rgba(70, 30, 56, 0.52);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Compact profile dropdown on short viewports (phones / landscape / WebViews) */
@media (max-height: 720px) {
    .eg-nav-profile-dropdown {
        max-height: calc(100vh - var(--eg-nav-h, 4.5rem) - 0.75rem);
        max-height: calc(100dvh - var(--eg-nav-h, 4.5rem) - 0.75rem);
        padding: 0.35rem;
        gap: 0.1rem;
    }

    .eg-nav-profile-dropdown .eg-nav-menu-item {
        padding: 0.45rem 0.55rem;
        font-size: 0.85rem;
        gap: 0.55rem;
    }

    .eg-nav-profile-dropdown .eg-nav-menu-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }
}

/* Compact icon-only nav pills on narrower desktop widths (label shown via tooltip) */
@media (min-width: 768px) and (max-width: 1100px) {
    .eg-nav-pill--courses .eg-nav-pill-label,
    .eg-nav-pill--results .eg-nav-pill-label {
        display: none;
    }
    .eg-nav-pill--courses,
    .eg-nav-pill--results {
        padding: 0.4rem;
    }
}

@media (min-width: 768px) {
    .eg-hamburger { display: none; }
    .eg-nav-desktop-actions { display: flex; }
    .eg-mobile-drawer { display: none; }
    .eg-hero-grid {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }
    .eg-hero-content { text-align: start; }
    .eg-hero-sticker-mobile { display: none; }
    .eg-hero-sticker-desktop { display: block; }
    .eg-hero-cta { width: auto; }
    .eg-about-inner {
        flex-direction: row-reverse;
        align-items: center;
        text-align: start;
    }
    .eg-about-text { text-align: start; }
    .eg-features-grid { grid-template-columns: repeat(3, 1fr); }
    .eg-grades-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    .eg-carousel-layout {
        flex-direction: row-reverse;
        align-items: center;
    }
    .eg-carousel-intro { flex: 1; }
    .eg-carousel-intro h2,
    .eg-carousel-intro p { text-align: start; }
    .eg-carousel-wrapper { flex: 1; min-height: 420px; }
    .eg-cards-scroll { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (min-width: 1024px) {
    .eg-nav-inner { padding: 0 2.5rem; }
    .eg-hero { padding: calc(var(--eg-nav-h) + 3rem) 2.5rem 4rem; }
    .eg-section { padding: 5rem 2.5rem; }
}

.eg-cw-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 320px);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}

.eg-cw-card {
    scroll-snap-align: start;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

[data-bs-theme='dark'] .eg-cw-card {
    background: rgba(20,20,20,0.55);
    border-color: rgba(255,255,255,0.08);
}

.eg-cw-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }

.eg-cw-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.eg-cw-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eg-cw-pct {
    position: absolute;
    inset-inline-end: 0.6rem;
    bottom: 0.6rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.eg-cw-body { padding: 0.9rem 1rem 1rem; }

.eg-cw-body h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 800;
}

.eg-cw-body p {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

.eg-cw-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 0.55rem;
}

[data-bs-theme='dark'] .eg-cw-bar { background: rgba(255,255,255,0.12); }

.eg-cw-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.eg-cw-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.75rem;
    opacity: 0.75;
    margin-bottom: 0.7rem;
}

/* -- Mobile / low-power performance profile -- */
html.eg-perf-lite .eg-ambient,
html.eg-perf-lite .eg-nav-glow,
html.eg-perf-lite .eg-nav-route,
html.eg-perf-lite .eg-hero-deco,
html.eg-perf-lite .eg-hero-compass,
html.eg-perf-lite .eg-hero-map-grid,
html.eg-perf-lite .eg-hero-meridian,
html.eg-perf-lite .eg-about-map {
    display: none !important;
}

html.eg-perf-lite .eg-loader-orb,
html.eg-perf-lite .eg-loader-grid {
    animation: none !important;
    filter: none !important;
}

html.eg-perf-lite *,
html.eg-perf-lite *::before,
html.eg-perf-lite *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
}

html.eg-perf-lite .eg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

html.eg-page-hidden * {
    animation-play-state: paused !important;
}

@media (max-width: 767.98px) {
    .eg-ambient {
        display: none !important;
    }

    .eg-nav,
    html[data-bs-theme="dark"] .eg-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--eg-surface) !important;
    }

    .eg-nav-glow,
    .eg-nav-route,
    .eg-hero-deco,
    .eg-hero-compass,
    .eg-hero-map-grid,
    .eg-hero-meridian {
        display: none !important;
        animation: none !important;
    }

    .eg-reveal {
        opacity: 1;
        transform: none;
        transition: opacity 0.25s ease;
    }

    .eg-grade-card,
    .eg-section,
    .eg-about,
    .eg-carousel-section,
    .eg-knowledge,
    .eg-courses-section,
    .eg-continue,
    .eg-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 320px;
    }

    .eg-grade-card picture,
    .eg-hero-visual picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .eg-grade-card img,
    .eg-hero-visual img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .eg-loader-orb {
        filter: none !important;
        animation: none !important;
    }

    .eg-loader-grid {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eg-ambient,
    .eg-nav-glow,
    .eg-hero-deco {
        display: none !important;
    }

    .eg-rankings-orb,
    .eg-rankings-portrait-ring,
    .eg-rankings-deco {
        animation: none !important;
    }

    .eg-rankings-stage.visible .eg-rankings-group:not(.eg-rankings-group--clone) .eg-rankings-card,
    .eg-rankings-medal {
        animation: none !important;
    }

    .eg-rankings-card-shine,
    .eg-rankings-more-btn::after {
        display: none !important;
    }

    .eg-rankings-track {
        animation: none !important;
    }

    .eg-rankings-viewport {
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
    }

    .eg-rankings-track {
        transform: none !important;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        animation: none !important;
    }

    .eg-rankings-nudge {
        transform: none !important;
        width: 100%;
    }

    .eg-rankings-group--clone {
        display: none !important;
    }

    .eg-rankings-group {
        flex-wrap: wrap;
        justify-content: center;
        padding-inline-end: 0;
    }
}

.eg-rankings {
    position: relative;
    overflow: hidden;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    padding: 4rem 1.25rem 4.25rem;
    isolation: isolate;
    contain: inline-size paint;
}

.eg-rankings-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.eg-rankings-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    animation: eg-rankings-orb-drift 14s ease-in-out infinite;
}

.eg-rankings-orb--1 {
    width: min(420px, 55vw);
    height: min(420px, 55vw);
    top: -8%;
    inset-inline-start: -6%;
    background: radial-gradient(circle, rgba(243, 147, 24, 0.35) 0%, transparent 68%);
}

.eg-rankings-orb--2 {
    width: min(360px, 48vw);
    height: min(360px, 48vw);
    bottom: -12%;
    inset-inline-end: -4%;
    background: radial-gradient(circle, rgba(107, 52, 86, 0.28) 0%, transparent 70%);
    animation-delay: -5s;
    animation-duration: 18s;
}

.eg-rankings-orb--3 {
    width: min(220px, 32vw);
    height: min(220px, 32vw);
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 179, 71, 0.22) 0%, transparent 72%);
    animation-delay: -9s;
    animation-duration: 11s;
}

@keyframes eg-rankings-orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(2%, -3%, 0) scale(1.06); }
    66% { transform: translate3d(-2%, 2%, 0) scale(0.96); }
}

.eg-rankings-deco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(243, 147, 24, 0.18), rgba(243, 147, 24, 0.06));
    border: 1px solid rgba(243, 147, 24, 0.35);
    box-shadow: 0 0 24px rgba(243, 147, 24, 0.22);
    font-size: 1.45rem;
    opacity: 1;
    animation: eg-rankings-trophy-glow 3s ease-in-out infinite;
}

@keyframes eg-rankings-trophy-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(243, 147, 24, 0.2);
        transform: scale(1) rotate(0deg);
    }
    50% {
        box-shadow: 0 0 32px rgba(243, 147, 24, 0.38);
        transform: scale(1.06) rotate(-4deg);
    }
}

.eg-rankings .eg-section-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.eg-rankings-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: min(1240px, 100%);
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: clip;
}

.eg-rankings-stage.visible .eg-rankings-group:not(.eg-rankings-group--clone) .eg-rankings-card {
    animation: eg-rankings-card-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--eg-rankings-i, 0) * 0.08s + 0.12s);
}

@keyframes eg-rankings-card-in {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.eg-rankings-nav {
    z-index: 2;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(243, 147, 24, 0.45);
    background: linear-gradient(165deg, var(--eg-surface) 0%, rgba(255, 248, 236, 0.95) 100%);
    color: var(--eg-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 22px rgba(70, 30, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.eg-rankings-nav:hover:not(:disabled) {
    transform: scale(1.08);
    border-color: var(--eg-primary);
    background: linear-gradient(165deg, #fff8ec 0%, #fff 100%);
    box-shadow: 0 14px 28px rgba(243, 147, 24, 0.22);
}

.eg-rankings-nav:active:not(:disabled) {
    transform: scale(0.95);
}

.eg-rankings-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

html[dir="rtl"] .eg-rankings-nav i {
    transform: scaleX(-1);
}

.eg-rankings-viewport {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-x: clip;
    padding-block: 1.35rem 1.55rem;
    --eg-rankings-card-w: min(17.5rem, 78%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.eg-rankings-nudge {
    --eg-rankings-nudge: 0px;
    grid-column: 1;
    grid-row: 1;
    width: max-content;
    transform: translate3d(var(--eg-rankings-nudge), 0, 0);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.eg-rankings-track {
    display: flex;
    width: max-content;
    max-width: none;
    min-width: 0;
    will-change: transform;
    backface-visibility: hidden;
    animation: eg-rankings-marquee calc(var(--eg-rankings-span, 5) * 5.8s) linear infinite;
}

html[dir="rtl"] .eg-rankings-track {
    animation-name: eg-rankings-marquee-rtl;
}

.eg-rankings-track--static {
    animation: none !important;
}

.eg-rankings-stage:hover .eg-rankings-track,
.eg-rankings-stage:focus-within .eg-rankings-track,
html.eg-page-hidden .eg-rankings-track {
    animation-play-state: paused;
}

.eg-rankings-group {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    padding-inline-end: 1.25rem;
}

.eg-rankings-card {
    position: relative;
    flex: 0 0 var(--eg-rankings-card-w, 17.5rem);
    width: var(--eg-rankings-card-w, 17.5rem);
    max-width: var(--eg-rankings-card-w, 17.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.55rem 1.15rem 1.35rem;
    border-radius: 1.65rem;
    background: linear-gradient(180deg, var(--eg-surface) 0%, rgba(255, 252, 247, 0.98) 100%);
    border: 1px solid rgba(70, 30, 56, 0.1);
    box-shadow:
        0 16px 36px rgba(70, 30, 56, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.35s ease;
}

.eg-rankings-card-shine {
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(
        115deg,
        transparent 42%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 58%
    );
    transform: translateX(-120%) rotate(8deg);
    transition: transform 0.85s ease;
    pointer-events: none;
}

.eg-rankings-card:hover .eg-rankings-card-shine {
    transform: translateX(120%) rotate(8deg);
}

.eg-rankings-portrait-wrap {
    position: relative;
    width: 11.25rem;
    height: 11.25rem;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
}

.eg-rankings-portrait-ring {
    position: absolute;
    inset: -0.35rem;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--eg-primary) 0deg,
        var(--eg-primary-light) 90deg,
        rgba(243, 147, 24, 0.15) 180deg,
        var(--eg-secondary-light) 270deg,
        var(--eg-primary) 360deg
    );
    animation: eg-rankings-ring-spin 8s linear infinite;
    opacity: 0.85;
}

.eg-rankings-portrait-ring::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--eg-surface);
}

@keyframes eg-rankings-ring-spin {
    to { transform: rotate(360deg); }
}

.eg-rankings-portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0.3rem;
}

.eg-rankings-portrait img,
.eg-rankings-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    display: block;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.95),
        0 0 0 5px rgba(243, 147, 24, 0.28),
        0 14px 28px rgba(70, 30, 56, 0.16);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.eg-rankings-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--eg-primary), var(--eg-secondary));
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
}

.eg-rankings-medal {
    position: absolute;
    z-index: 2;
    bottom: 0.15rem;
    inset-inline-end: 0.1rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 14px rgba(70, 30, 56, 0.22);
    animation: eg-rankings-medal-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--eg-rankings-i, 0) * 0.08s + 0.35s);
}

.eg-rankings-medal--1 {
    background: linear-gradient(145deg, #ffd54f, #f9a825);
    color: #5d4037;
}

.eg-rankings-medal--2 {
    background: linear-gradient(145deg, #e0e0e0, #9e9e9e);
    color: #424242;
}

.eg-rankings-medal--3 {
    background: linear-gradient(145deg, #ffcc80, #bf360c);
    color: #fff;
}

@keyframes eg-rankings-medal-pop {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.eg-rankings-copy {
    width: 100%;
    position: relative;
    z-index: 1;
}

.eg-rankings-card h3 {
    font-family: var(--eg-font-display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--eg-secondary);
    margin: 0 0 0.35rem;
    transition: color 0.3s ease;
}

.eg-rankings-card p {
    margin: 0;
    color: var(--eg-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eg-rankings-score {
    margin: 0 0 0.2rem !important;
    color: var(--eg-primary) !important;
    font-weight: 800;
    font-size: 1.02rem !important;
    -webkit-line-clamp: 1 !important;
}

.eg-rankings-school {
    margin: 0 0 0.3rem !important;
    color: var(--eg-secondary) !important;
    font-weight: 700;
    font-size: 0.88rem !important;
    -webkit-line-clamp: 1 !important;
}

.eg-rankings-card:hover {
    z-index: 2;
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(243, 147, 24, 0.45);
    box-shadow:
        0 24px 48px rgba(70, 30, 56, 0.14),
        0 0 0 1px rgba(243, 147, 24, 0.12);
}

.eg-rankings-card:hover h3 {
    color: var(--eg-primary-dark);
}

.eg-rankings-card:hover .eg-rankings-portrait img,
.eg-rankings-card:hover .eg-rankings-fallback {
    transform: scale(1.05);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.95),
        0 0 0 6px rgba(243, 147, 24, 0.42),
        0 18px 34px rgba(70, 30, 56, 0.2);
}

.eg-rankings-card:hover .eg-rankings-portrait-ring {
    animation-duration: 3s;
    opacity: 1;
}

.eg-rankings-more {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 0.65rem;
}

.eg-rankings-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.75rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--eg-primary) 0%, var(--eg-primary-dark) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(243, 147, 24, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.eg-rankings-more-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
}

.eg-rankings-more-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(243, 147, 24, 0.38);
}

.eg-rankings-more-btn:hover::after {
    transform: translateX(130%);
}

@keyframes eg-rankings-marquee {
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes eg-rankings-marquee-rtl {
    to { transform: translate3d(50%, 0, 0); }
}

html[data-bs-theme="dark"] .eg-rankings-card {
    background: linear-gradient(180deg, rgba(56, 38, 52, 0.98) 0%, rgba(36, 24, 32, 0.98) 100%);
    border-color: rgba(243, 147, 24, 0.22);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-bs-theme="dark"] .eg-rankings-portrait-ring::after {
    background: rgba(36, 24, 32, 0.98);
}

html[data-bs-theme="dark"] .eg-rankings-card h3 {
    color: var(--eg-text);
}

html[data-bs-theme="dark"] .eg-rankings-score {
    color: var(--eg-primary);
}

html[data-bs-theme="dark"] .eg-rankings-school {
    color: var(--eg-text);
}

html[data-bs-theme="dark"] .eg-rankings-card:hover h3 {
    color: var(--eg-primary-light);
}

html[data-bs-theme="dark"] .eg-rankings-nav {
    background: linear-gradient(165deg, rgba(56, 38, 52, 0.98), rgba(40, 28, 36, 0.98));
    color: var(--eg-primary-light);
    border-color: rgba(243, 147, 24, 0.35);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

html[data-bs-theme="dark"] .eg-rankings-nav:hover:not(:disabled) {
    background: linear-gradient(165deg, rgba(70, 46, 60, 0.98), rgba(56, 38, 52, 0.98));
}

@media (max-width: 767.98px) {
    .eg-rankings {
        padding: 2.75rem 0.65rem 3.25rem;
    }

    .eg-rankings-stage {
        gap: 0.35rem;
    }

    .eg-rankings-nav {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.05rem;
    }

    .eg-rankings-viewport {
        --eg-rankings-card-w: min(15.5rem, 74vw);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    .eg-rankings-portrait-wrap {
        width: 9.75rem;
        height: 9.75rem;
    }

    .eg-rankings-medal {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.95rem;
    }
}