/* 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-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-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%);
}

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: var(--eg-cream);
    -webkit-text-stroke: 2px var(--eg-primary);
    text-shadow: 3px 3px 0 rgba(243, 147, 24, 0.35);
}

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-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: hidden;
    position: relative;
}

/* ── 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) {
    position: relative;
    z-index: 1;
}

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

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

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

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

.eg-nav-inner {
    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 img {
    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-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;
}

.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;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    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);
}

.eg-nav-profile-menu.open .eg-nav-profile-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    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-mobile-drawer.open .eg-drawer-actions > *:nth-child(3) { animation-delay: 0.61s; }

.eg-hamburger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    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: 999;
    background: rgba(70, 30, 56, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

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

.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;
    transform: translateY(-110%) scaleY(0.6);
    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);
}

.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: translateY(0) scaleY(1);
    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.75rem;
}

.eg-mobile-drawer.open .eg-drawer-actions > * {
    opacity: 0;
    transform: translateX(24px);
    animation: eg-drawer-action-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(1) { animation-delay: 0.35s; }
.eg-mobile-drawer.open .eg-drawer-actions > *:nth-child(2) { animation-delay: 0.48s; }

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

.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-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-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 2px var(--eg-secondary);
    text-shadow: 3px 3px 0 var(--eg-secondary);
    line-height: 1.4;
    margin-bottom: 1rem;
}

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

.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-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .eg-hamburger { justify-self: start; }
    .eg-nav-brand { justify-self: center; }
    .eg-nav-actions { justify-self: end; }
}

/* 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;
}