/* ==========================================================================
   0. GLOBAL LUXURY COLOR PALETTES & THEME TOKENS PER DEMO
   ========================================================================== */
.osmani-demo-page-wrapper {
    width: 100%;
    overflow-x: hidden;
}
.osmani-demo-section {
    position: relative;
    padding: 85px 0;
}
.osmani-demo-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.osmani-section-head {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}
.osmani-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}
.osmani-section-title {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.35;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}
.osmani-section-desc {
    font-size: 1.08rem;
    line-height: 1.85;
    max-width: 740px;
    margin: 0 auto;
}

/* --- THEME 1: DIGITAL & CYBER TECH (.osmani-demo-digital) --- */
.osmani-demo-digital {
    background-color: #f8fafc;
    color: #0f172a;
}
.osmani-demo-digital .osmani-demo-section {
    background-color: #f8fafc;
    background-image: radial-gradient(at 15% 15%, rgba(37, 99, 235, 0.05) 0px, transparent 60%),
                      radial-gradient(at 85% 85%, rgba(6, 182, 212, 0.04) 0px, transparent 60%);
    color: #0f172a;
}
.osmani-demo-digital .osmani-demo-section.bg-alt,
.osmani-demo-digital .osmani-demo-cat-slider-section,
.osmani-demo-digital .osmani-campaign-packages-section {
    background-color: #eff6ff;
    background-image: radial-gradient(at 80% 20%, rgba(37, 99, 235, 0.08) 0px, transparent 60%);
    border-top: 1px solid #dbeafe;
    border-bottom: 1px solid #dbeafe;
}
.osmani-demo-digital .showcase-3d-section,
.osmani-demo-digital .osmani-demo-bestsellers-section,
.osmani-demo-digital #benchmark,
.osmani-demo-digital .osmani-pricing-section,
.osmani-demo-digital .osmani-logo-cloud-section {
    background-color: #ffffff;
}
.osmani-demo-digital .osmani-section-title {
    color: #0f172a;
    font-weight: 900;
    text-shadow: none;
}
.osmani-demo-digital .osmani-section-desc {
    color: #475569;
}
.osmani-demo-digital .osmani-badge-pill {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06);
}

/* Digital Demo in Dark Mode */
[data-theme="dark"] .osmani-demo-digital,
.theme-dark .osmani-demo-digital {
    background-color: #07090e;
    color: #e2e8f0;
}
[data-theme="dark"] .osmani-demo-digital .osmani-demo-section,
.theme-dark .osmani-demo-digital .osmani-demo-section {
    background-color: #07090e;
    background-image: radial-gradient(at 15% 15%, rgba(37, 99, 235, 0.14) 0px, transparent 60%),
                      radial-gradient(at 85% 85%, rgba(6, 182, 212, 0.10) 0px, transparent 60%);
    color: #e2e8f0;
}
[data-theme="dark"] .osmani-demo-digital .osmani-demo-section.bg-alt,
[data-theme="dark"] .osmani-demo-digital .osmani-demo-cat-slider-section,
[data-theme="dark"] .osmani-demo-digital .osmani-campaign-packages-section,
.theme-dark .osmani-demo-digital .osmani-demo-section.bg-alt,
.theme-dark .osmani-demo-digital .osmani-demo-cat-slider-section,
.theme-dark .osmani-demo-digital .osmani-campaign-packages-section {
    background-color: #0b1120;
    background-image: radial-gradient(at 80% 20%, rgba(59, 130, 246, 0.16) 0px, transparent 60%);
    border-top: 1px solid rgba(37, 99, 235, 0.2);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}
[data-theme="dark"] .osmani-demo-digital .showcase-3d-section,
[data-theme="dark"] .osmani-demo-digital .osmani-demo-bestsellers-section,
[data-theme="dark"] .osmani-demo-digital #benchmark,
[data-theme="dark"] .osmani-demo-digital .osmani-pricing-section,
[data-theme="dark"] .osmani-demo-digital .osmani-logo-cloud-section,
.theme-dark .osmani-demo-digital .showcase-3d-section,
.theme-dark .osmani-demo-digital #benchmark {
    background-color: #090e1a;
}
[data-theme="dark"] .osmani-demo-digital .osmani-section-title,
.theme-dark .osmani-demo-digital .osmani-section-title {
    color: #ffffff;
    text-shadow: 0 0 35px rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .osmani-demo-digital .osmani-section-desc,
.theme-dark .osmani-demo-digital .osmani-section-desc {
    color: #94a3b8;
}
[data-theme="dark"] .osmani-demo-digital .osmani-badge-pill,
.theme-dark .osmani-demo-digital .osmani-badge-pill {
    background: rgba(37, 99, 235, 0.18);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.25);
}

/* --- THEME 2: CORPORATE & HOLDING (.osmani-demo-corporate) --- */
.osmani-demo-corporate {
    background-color: #f8fafc;
    color: #1e293b;
}
.osmani-demo-corporate .osmani-demo-section {
    background-color: #f8fafc;
    background-image: radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.05) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.04) 0px, transparent 50%);
}
.osmani-demo-corporate .osmani-demo-section.bg-alt {
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.osmani-demo-corporate .osmani-demo-section.bg-dark {
    background-color: #0b132b;
    background-image: radial-gradient(at 70% 30%, rgba(2, 132, 199, 0.18) 0px, transparent 60%);
    color: #ffffff;
}
.osmani-demo-corporate .osmani-section-title {
    color: #0f2942;
}
.osmani-demo-corporate .bg-dark .osmani-section-title {
    color: #ffffff;
}
.osmani-demo-corporate .osmani-section-desc {
    color: #64748b;
}
.osmani-demo-corporate .bg-dark .osmani-section-desc {
    color: #94a3b8;
}
.osmani-demo-corporate .osmani-badge-pill {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(245, 158, 11, 0.08));
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.25);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08);
}

/* --- THEME 3: FASHION & RUNWAY EDITORIAL (.osmani-demo-fashion) --- */
.osmani-demo-fashion {
    background-color: #faf8f5;
    color: #18181b;
}
.osmani-demo-fashion .osmani-demo-section {
    background-color: #faf8f5;
    background-image: radial-gradient(at 100% 0%, rgba(225, 29, 72, 0.04) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(212, 175, 55, 0.04) 0px, transparent 50%);
}
.osmani-demo-fashion .osmani-demo-section.bg-alt {
    background-color: #ffffff;
}
.osmani-demo-fashion .osmani-demo-section.bg-dark {
    background-color: #09090b;
    background-image: radial-gradient(at 50% 50%, rgba(225, 29, 72, 0.12) 0px, transparent 75%);
    color: #ffffff;
}
.osmani-demo-fashion .osmani-section-title {
    color: #18181b;
    font-weight: 900;
}
.osmani-demo-fashion .bg-dark .osmani-section-title {
    color: #ffffff;
}
.osmani-demo-fashion .osmani-section-desc {
    color: #71717a;
}
.osmani-demo-fashion .bg-dark .osmani-section-desc {
    color: #a1a1aa;
}
.osmani-demo-fashion .osmani-badge-pill {
    background: rgba(225, 29, 72, 0.08);
    color: #e11d48;
    border: 1px solid rgba(225, 29, 72, 0.25);
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.1);
}

/* --- THEME 4: EDUCATION & AI ACADEMY (.osmani-demo-education) --- */
.osmani-demo-education {
    background-color: #fdfcfe;
    color: #0f172a;
}
.osmani-demo-education .osmani-demo-section {
    background-color: #fdfcfe;
    background-image: radial-gradient(at 20% 0%, rgba(124, 58, 237, 0.05) 0px, transparent 60%),
                      radial-gradient(at 80% 80%, rgba(16, 185, 129, 0.04) 0px, transparent 60%);
    color: #0f172a;
}
.osmani-demo-education .osmani-demo-section.bg-alt,
.osmani-demo-education .osmani-demo-cat-slider-section,
.osmani-demo-education .osmani-campaign-packages-section {
    background-color: #f5f3ff;
    background-image: radial-gradient(at 80% 20%, rgba(124, 58, 237, 0.08) 0px, transparent 60%);
    border-top: 1px solid #ddd6fe;
    border-bottom: 1px solid #ddd6fe;
}
.osmani-demo-education .osmani-demo-section.bg-dark,
.osmani-demo-education #roadmap,
.osmani-demo-education #webinar {
    background-color: #faf5ff;
}
.osmani-demo-education .jebbles-deck-section,
.osmani-demo-education .osmani-demo-bestsellers-section,
.osmani-demo-education .osmani-course-design-section,
.osmani-demo-education .osmani-pricing-section,
.osmani-demo-education .osmani-logo-cloud-section {
    background-color: #ffffff;
}
.osmani-demo-education .osmani-section-title {
    color: #1e1b4b;
    font-weight: 900;
    text-shadow: none;
}
.osmani-demo-education .osmani-section-desc {
    color: #475569;
}
.osmani-demo-education .osmani-badge-pill {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.28);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.06);
}

/* Education Demo in Dark Mode */
[data-theme="dark"] .osmani-demo-education,
.theme-dark .osmani-demo-education {
    background-color: #090d16;
    color: #e2e8f0;
}
[data-theme="dark"] .osmani-demo-education .osmani-demo-section,
.theme-dark .osmani-demo-education .osmani-demo-section {
    background-color: #090d16;
    background-image: radial-gradient(at 20% 0%, rgba(124, 58, 237, 0.16) 0px, transparent 60%),
                      radial-gradient(at 80% 80%, rgba(16, 185, 129, 0.08) 0px, transparent 60%);
    color: #e2e8f0;
}
[data-theme="dark"] .osmani-demo-education .osmani-demo-section.bg-alt,
[data-theme="dark"] .osmani-demo-education .osmani-demo-cat-slider-section,
[data-theme="dark"] .osmani-demo-education .osmani-campaign-packages-section,
.theme-dark .osmani-demo-education .osmani-demo-section.bg-alt,
.theme-dark .osmani-demo-education .osmani-demo-cat-slider-section,
.theme-dark .osmani-demo-education .osmani-campaign-packages-section {
    background-color: #0f1322;
    background-image: radial-gradient(at 80% 20%, rgba(124, 58, 237, 0.18) 0px, transparent 60%);
    border-top: 1px solid rgba(124, 58, 237, 0.25);
    border-bottom: 1px solid rgba(124, 58, 237, 0.25);
}
[data-theme="dark"] .osmani-demo-education .osmani-demo-section.bg-dark,
[data-theme="dark"] .osmani-demo-education #roadmap,
[data-theme="dark"] .osmani-demo-education #webinar,
[data-theme="dark"] .osmani-demo-education .jebbles-deck-section,
.theme-dark .osmani-demo-education .jebbles-deck-section,
.theme-dark .osmani-demo-education #roadmap {
    background-color: #080612;
}
[data-theme="dark"] .osmani-demo-education .osmani-section-title,
.theme-dark .osmani-demo-education .osmani-section-title {
    color: #ffffff;
    text-shadow: 0 0 35px rgba(124, 58, 237, 0.35);
}
[data-theme="dark"] .osmani-demo-education .osmani-section-desc,
.theme-dark .osmani-demo-education .osmani-section-desc {
    color: #94a3b8;
}
[data-theme="dark"] .osmani-demo-education .osmani-badge-pill,
.theme-dark .osmani-demo-education .osmani-badge-pill {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.45);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);
}

/* --- THEME 5: MEDICAL & CLINIC (.osmani-demo-medical) --- */
.osmani-demo-medical {
    background-color: #ffffff;
    color: #1e293b;
}
.osmani-demo-medical .osmani-demo-section {
    background-color: #ffffff;
    background-image: radial-gradient(at 0% 0%, rgba(5, 150, 105, 0.05) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(15, 118, 110, 0.04) 0px, transparent 50%);
}
.osmani-demo-medical .osmani-demo-section.bg-alt {
    background-color: #f0fdf4;
}
.osmani-demo-medical .osmani-section-title {
    color: #064e3b;
}
.osmani-demo-medical .osmani-section-desc {
    color: #64748b;
}
.osmani-demo-medical .osmani-badge-pill {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.1);
}

/* --- THEME 6: CONSTRUCTION & ARCHITECTURE (.osmani-demo-construction) --- */
.osmani-demo-construction {
    background-color: #1c1917;
    color: #e7e5e4;
}
.osmani-demo-construction .osmani-demo-section {
    background-color: #1c1917;
    background-image: radial-gradient(at 80% 10%, rgba(245, 158, 11, 0.14) 0px, transparent 60%),
                      radial-gradient(at 10% 90%, rgba(217, 119, 6, 0.08) 0px, transparent 60%);
}
.osmani-demo-construction .osmani-demo-section.bg-alt {
    background-color: #292524;
}
.osmani-demo-construction .osmani-section-title {
    color: #ffffff;
    text-shadow: 0 0 35px rgba(245, 158, 11, 0.25);
}
.osmani-demo-construction .osmani-section-desc {
    color: #a8a29e;
}
.osmani-demo-construction .osmani-badge-pill {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

/* --- THEME 7: TOURISM & LUXURY ESCAPES (.osmani-demo-tourism) --- */
.osmani-demo-tourism {
    background-color: #f0fdfa;
    color: #0f172a;
}
.osmani-demo-tourism .osmani-demo-section {
    background-color: #f0fdfa;
    background-image: radial-gradient(at 0% 10%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
                      radial-gradient(at 100% 90%, rgba(2, 132, 199, 0.08) 0px, transparent 50%);
}
.osmani-demo-tourism .osmani-demo-section.bg-alt {
    background-color: #ffffff;
}
.osmani-demo-tourism .osmani-demo-section.bg-dark {
    background-color: #082f49;
    background-image: radial-gradient(at 50% 50%, rgba(6, 182, 212, 0.2) 0px, transparent 70%);
    color: #ffffff;
}
.osmani-demo-tourism .osmani-section-title {
    color: #0c4a6e;
}
.osmani-demo-tourism .bg-dark .osmani-section-title {
    color: #ffffff;
}
.osmani-demo-tourism .osmani-section-desc {
    color: #475569;
}
.osmani-demo-tourism .bg-dark .osmani-section-desc {
    color: #bae6fd;
}
.osmani-demo-tourism .osmani-badge-pill {
    background: rgba(6, 182, 212, 0.14);
    color: #0284c7;
    border: 1px solid rgba(6, 182, 212, 0.35);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
}


/* ==========================================================================
   1. DIGITAL & TECH DEMO BESPOKE STYLES (.osmani-demo-digital)
   ========================================================================== */
.header--digital {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--digital {
    padding: 8px 0;
    font-size: 0.84rem;
    font-weight: 700;
}
.digital-search-bar {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 4px 14px;
    width: 300px;
    transition: all 0.3s ease;
}
.digital-search-bar:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.3);
}
.digital-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.9rem;
    width: 100%;
    padding: 6px 8px;
}
.digital-search-bar select {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.15);
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 4px 8px;
    outline: none;
}
.digital-hero-bespoke {
    position: relative;
    background: radial-gradient(circle at 70% 30%, #1e293b 0%, #0f172a 70%, #090d16 100%);
    color: #ffffff;
    padding: 75px 0 55px 0;
    overflow: hidden;
}
.digital-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 5;
}
.digital-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(59, 130, 246, 0.4);
    padding: 8px 18px;
    border-radius: 999px;
    color: #60a5fa;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}
.digital-hero-title {
    font-size: 3.1rem;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 18px;
    color: #ffffff;
}
.digital-hero-title span {
    color: #3b82f6;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}
.digital-hero-desc {
    font-size: 1.12rem;
    line-height: 1.85;
    color: #cbd5e1;
    margin-bottom: 30px;
    max-width: 580px;
}
.digital-hero-floating-card {
    position: relative;
    text-align: center;
}
.digital-hero-model-img {
    max-width: 90%;
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
    animation: floatGadget 5s ease-in-out infinite;
}
@keyframes floatGadget {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.digital-hero-spec-tag {
    position: absolute;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    padding: 10px 18px;
    border-radius: 16px;
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 0.9rem;
    z-index: 10;
}
.digital-hud-thumb {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #cbd5e1;
    font-weight: 800;
    font-size: 0.88rem;
}
.digital-hud-thumb img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.digital-hud-thumb.active,
.digital-hud-thumb:hover {
    background: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    transform: translateY(-4px);
}
.digital-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}
.digital-cat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 28px 20px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.digital-cat-card:hover {
    transform: translateY(-8px);
    border-color: #2563eb;
    box-shadow: 0 16px 35px rgba(37, 99, 235, 0.15);
}
.digital-cat-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(59,130,246,0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: #2563eb;
    margin-bottom: 16px;
    transition: all 0.3s;
}
.digital-cat-card:hover .digital-cat-icon {
    transform: scale(1.1) rotate(6deg);
    background: #2563eb;
    color: #ffffff;
}

/* ==========================================================================
   2. CORPORATE & HOLDING BESPOKE STYLES (.osmani-demo-corporate)
   ========================================================================== */
.header--corporate {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--corporate {
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.corp-tab-jump-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 10px 22px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.corp-tab-jump-btn.active,
.corp-tab-jump-btn:hover {
    background: #0ea5e9;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}
.corp-hero-bespoke {
    position: relative;
    background: linear-gradient(135deg, #0f2942 0%, #1e3a5f 50%, #0f172a 100%);
    color: #ffffff;
    padding: 75px 0 65px 0;
    overflow: hidden;
}
.corp-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 45px;
    align-items: center;
    position: relative;
    z-index: 5;
}
.corp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(14, 165, 233, 0.4);
    padding: 7px 18px;
    border-radius: 999px;
    color: #38bdf8;
    font-weight: 800;
    font-size: 0.88rem;
    margin-bottom: 20px;
}
.corp-hero-title {
    font-size: 3.1rem;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 18px;
    color: #ffffff;
}
.corp-hero-title span { color: #0ea5e9; }
.corp-hero-card-form {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

/* --- Executive KPI Stats Floating Ribbon --- */
.corp-stats-bar-wrapper {
    position: relative;
    z-index: 10;
    margin-top: -35px;
    margin-bottom: 40px;
}
.corp-stats-inner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px 32px;
    box-shadow: 0 20px 45px rgba(15, 41, 66, 0.09);
    transition: all 0.3s ease;
}
.corp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.corp-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-left: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}
.corp-stat-card:last-child {
    border-left: none;
}
.corp-stat-card:hover {
    transform: translateY(-3px);
}
.corp-stat-icon-wrap {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
    transition: all 0.3s ease;
}
.corp-stat-card:hover .corp-stat-icon-wrap {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3);
}
.corp-stat-number {
    font-size: 1.85rem;
    font-weight: 900;
    color: #0f2942;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.corp-stat-label {
    font-size: 0.84rem;
    color: #64748b;
    font-weight: 700;
    line-height: 1.45;
}

/* --- Executive Case Study Tabs & Cards --- */
.corp-case-tab-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}
.corp-case-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 10px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.corp-case-tab-btn.active,
.corp-case-tab-btn:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.4);
}
.corp-case-showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.corp-case-card-adv {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 36px;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.corp-case-card-adv:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

/* --- Responsive Layout for Corporate --- */
@media (max-width: 992px) {
    .corp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .corp-stat-card:nth-child(2) {
        border-left: none;
    }
    .corp-case-showcase-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .corp-stats-grid {
        grid-template-columns: 1fr;
    }
    .corp-stat-card {
        border-left: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 14px;
    }
}
.header--education {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--education {
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.edu-ide-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 10px 18px;
    font-family: monospace;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
}
.edu-ide-tab.active {
    background: #090d16;
    color: #38bdf8;
    border-top: 2px solid #7c3aed;
}
.edu-hero-bespoke {
    position: relative;
    background: radial-gradient(circle at 80% 20%, #312e81 0%, #1e1b4b 60%, #0f172a 100%);
    color: #ffffff;
    padding: 75px 0 65px 0;
    overflow: hidden;
}
.edu-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 45px;
    align-items: center;
    position: relative;
    z-index: 5;
}
.edu-terminal-window {
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    font-family: monospace;
    direction: ltr;
    text-align: left;
}
.edu-terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.edu-terminal-body {
    padding: 24px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #38bdf8;
}

/* ==========================================================================
   4. MEDICAL & CLINIC BESPOKE STYLES (.osmani-demo-medical)
   ========================================================================== */
.header--medical {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--medical {
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.hero--medical .hero__title {
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.hero--medical .hero__title span {
    color: #34d399;
}
.hero--medical .hero__description {
    color: #f1f5f9;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero--medical .hero__text,
.hero--construction .hero__text,
.hero--tourism .hero__text {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}
.hero--medical .hero__floating-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(6, 78, 59, 0.65);
    border: 1px solid rgba(52, 211, 153, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 8px 20px;
    color: #6ee7b7;
    font-weight: 900;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.hero--medical .hero__model-img,
.hero--construction .hero__model-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-height: 85vh;
    max-width: 650px;
    object-fit: contain;
    z-index: 5;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.hero--medical .swiper-slide-active .hero__model-img,
.hero--construction .swiper-slide-active .hero__model-img {
    transform: translateX(-50%) scale(1.03);
}

/* ==========================================================================
   5. FASHION & RUNWAY EDITORIAL SPLIT PARALLAX SLIDER (Stephen Scaff)
   ========================================================================== */
.fashion-split-hero {
    position: relative;
    width: 100%;
    min-height: 85vh;
    background: #09090b;
    color: #ffffff;
    overflow: hidden;
}
.fashion-split-swiper {
    width: 100%;
    height: 100%;
}
.fashion-split-slide {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 85vh;
    align-items: center;
}
.fashion-split-content {
    padding: 60px 8% 60px 40px;
    position: relative;
    z-index: 5;
}
.fashion-split-num {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    letter-spacing: -2px;
    position: absolute;
    top: 20px;
    right: 40px;
    user-select: none;
}
.fashion-split-tag {
    color: #f43f5e;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}
.fashion-split-title {
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 22px;
}
.fashion-split-title span {
    color: #f43f5e;
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fashion-split-desc {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #a1a1aa;
    margin-bottom: 35px;
    max-width: 520px;
}
.fashion-split-image-box {
    position: relative;
    height: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fashion-split-image-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(244, 63, 94, 0.15) 0%, rgba(9, 9, 11, 0.9) 75%);
    z-index: 1;
}
.fashion-split-img {
    position: relative;
    z-index: 2;
    max-height: 75vh;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 25px 50px rgba(0,0,0,0.6));
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.swiper-slide-active .fashion-split-img {
    transform: scale(1.04);
}
.fashion-split-nav-bar {
    position: absolute;
    bottom: 40px;
    right: 8%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
}
.fashion-split-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.fashion-split-btn:hover {
    background: #f43f5e;
    border-color: #f43f5e;
    transform: scale(1.08);
}

/* ==========================================================================
   6. CONSTRUCTION & ARCHITECTURE BESPOKE STYLES (.osmani-demo-construction)
   ========================================================================== */
.header--construction {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--construction {
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.hero--construction .hero__title span {
    color: #f59e0b;
}
.hero--construction .hero__floating-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    padding: 8px 20px;
    color: #fbbf24;
    font-weight: 900;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

/* ==========================================================================
   7. TOURISM & MULTI-LAYER PARALLAX DESTINATION SLIDER (Fluxus)
   ========================================================================== */
.header--tourism {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-topbar--tourism {
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.tourism-parallax-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    background: #031e30;
    color: #ffffff;
    overflow: hidden;
}
.tourism-parallax-swiper {
    width: 100%;
    height: 100%;
}
.tourism-parallax-slide {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
}
.tourism-parallax-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: brightness(0.75);
}
.swiper-slide-active .tourism-parallax-bg {
    transform: scale(1);
}
.tourism-parallax-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,30,48,0.4) 0%, rgba(3,30,48,0.85) 100%);
    z-index: 1;
}
.tourism-parallax-content {
    position: relative;
    z-index: 5;
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.tourism-dest-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    padding: 35px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    color: #fff;
}

/* ==========================================================================
   8. SKEWED / ANGLED CYBER TECH SLIDER (Nikolay Talanov - Suez)
   ========================================================================== */
.skew-slider-container {
    position: relative;
    width: 100%;
    min-height: 82vh;
    background: #090d16;
    overflow: hidden;
    color: #ffffff;
}
.skew-slide-panel {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    min-height: 82vh;
    align-items: center;
}
.skew-visual-mask {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(59,130,246,0.05));
    border: 1px solid rgba(59,130,246,0.3);
    box-shadow: 0 20px 50px rgba(37,99,235,0.25);
    padding: 30px;
    text-align: center;
}
.skew-visual-mask img {
    max-height: 480px;
    object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,0.4));
    transition: transform 0.8s ease;
}
.swiper-slide-active .skew-visual-mask img {
    transform: scale(1.05) rotate(-2deg);
}

/* ==========================================================================
   9. 3D CURVED PRODUCT SHOWCASE CAROUSEL (Cobra Winfrey)
   ========================================================================== */
.showcase-3d-section {
    padding: 80px 0;
    position: relative;
    background: #0f172a;
    color: #fff;
    overflow: hidden;
}
.showcase-3d-swiper {
    padding: 50px 0 80px 0 !important;
    perspective: 1200px;
}
.showcase-3d-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.swiper-slide-active .showcase-3d-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 30px 60px rgba(37, 99, 235, 0.35);
    transform: scale(1.06);
}
.showcase-3d-img {
    max-height: 220px;
    width: auto;
    object-fit: contain;
    margin: 0 auto 20px auto;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3));
    transition: transform 0.4s ease;
}
.showcase-3d-card:hover .showcase-3d-img {
    transform: translateY(-8px) scale(1.08);
}
.showcase-3d-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}
.showcase-3d-price {
    font-size: 1.45rem;
    font-weight: 900;
    color: #38bdf8;
    margin-bottom: 18px;
}
.showcase-3d-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.showcase-3d-btn:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

/* ==========================================================================
   10. COMPACT REVIEW & SOCIAL PROOF TICKER WIDGET (Brandon McConnell)
   ========================================================================== */
.compact-review-ticker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 8px 18px 8px 12px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.ticker-avatar-stack {
    display: flex;
    align-items: center;
    margin-left: -6px;
}
.ticker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #0f172a;
    margin-right: -8px;
    object-fit: cover;
}
.ticker-text {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}
.ticker-stars {
    color: #f59e0b;
    font-size: 0.78rem;
}

/* ==========================================================================
   11. ADVANCED INTERACTIVE COMPONENTS & WIDGETS ACROSS ALL DEMOS
   ========================================================================== */

/* --- 1. MEDICAL: Interactive Before / After Dual Image Slider --- */
.ba-slider-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(6, 78, 59, 0.25);
    border: 3px solid #ffffff;
    user-select: none;
    cursor: ew-resize;
}
.ba-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ba-slider-before-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    overflow: hidden;
    z-index: 2;
}
.ba-slider-before-wrap img {
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
    height: 100%;
    object-fit: cover;
    max-width: none;
}
.ba-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 4px;
    background: #ffffff;
    z-index: 10;
    transform: translateX(50%);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.ba-slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: #10b981;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
    cursor: ew-resize;
}
.ba-badge-tag {
    position: absolute;
    top: 20px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 900;
    color: #fff;
    backdrop-filter: blur(12px);
    z-index: 5;
}
.ba-badge-after { left: 20px; background: rgba(16, 185, 129, 0.85); }
.ba-badge-before { right: 20px; background: rgba(15, 23, 42, 0.85); }

/* --- 2. DIGITAL: Live Gadget Configurator & Live Stock Progress --- */
.digital-config-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 30px;
    padding: 40px;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.config-pill-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.config-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 10px 18px;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s ease;
}
.config-pill:hover,
.config-pill.active {
    background: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-2px);
}
.color-dot-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.color-dot-btn.active {
    border-color: #38bdf8;
    transform: scale(1.18);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}
.live-sales-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.4);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 14px 22px;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 9999;
    animation: slideUpToast 0.5s ease-out;
}
@keyframes slideUpToast {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- 3. CORPORATE: Live ROI Growth Simulator & Strategy Gantt --- */
.corp-roi-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    padding: 45px;
    color: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}
.corp-gantt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.corp-gantt-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 26px 22px;
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}
.corp-gantt-card:hover {
    transform: translateY(-6px);
    border-color: #0284c7;
    box-shadow: 0 15px 35px rgba(2, 132, 199, 0.12);
}
.corp-gantt-phase-badge {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 12px;
}

/* --- 4. FASHION: Interactive Swatch Previewer & Lookbook Pins --- */
.fashion-swatch-list {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    margin-bottom: 20px;
}
.fashion-swatch-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}
.fashion-swatch-btn:hover,
.fashion-swatch-btn.active {
    transform: scale(1.25);
    box-shadow: 0 0 0 2px #f43f5e;
}
.fashion-hotspot {
    position: absolute;
    z-index: 20;
}
.fashion-pin-pulse {
    width: 36px;
    height: 36px;
    background: #f43f5e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
    animation: pinPulse 2s infinite;
}
@keyframes pinPulse {
    0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
    70% { box-shadow: 0 0 0 16px rgba(244, 63, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}
.fashion-hotspot-card {
    position: absolute;
    top: 45px;
    right: 0;
    width: 220px;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    display: none;
    z-index: 30;
}

/* --- 5. EDUCATION: Code Sandbox IDE & Salary Boost Meter --- */
.edu-sandbox-box {
    background: #090d16;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(124, 58, 237, 0.2);
}
.edu-salary-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 30px;
    padding: 40px;
    color: #fff;
}

/* --- 6. CONSTRUCTION: Interactive Floorplan 2D/3D & Site Cam --- */
.const-plan-switcher {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}
.const-tab-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    color: #475569;
}
.const-tab-btn.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.35);
}

/* --- 7. TOURISM: Package Customizer & Visa Predictor --- */
.tourism-customizer-box {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    padding: 45px;
    color: #ffffff;
    box-shadow: 0 25px 60px rgba(12, 74, 110, 0.35);
}
.tourism-chip-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    color: #e0f2fe;
    font-weight: 800;
}
/* --- 8. DIGITAL: High-Tech Hardware Benchmark Matrix 2026 --- */
.digital-bench-wrapper {
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}
.digital-bench-tab-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}
.digital-bench-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 12px 24px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.digital-bench-tab-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #fff;
    transform: translateY(-2px);
}
.digital-bench-tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.45);
    transform: translateY(-3px);
}
.bench-device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.bench-device-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 28px 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bench-device-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.2);
}
.bench-device-card.winner {
    border-color: rgba(59, 130, 246, 0.6);
    background: linear-gradient(180deg, rgba(37,99,235,0.12) 0%, rgba(15,23,42,0.6) 100%);
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.25);
}
.bench-trophy-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.bench-device-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.bench-device-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.bench-score-badge {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 4px;
}
.bench-meter-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0;
    position: relative;
}
.bench-meter-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

/* --- 9. EDUCATION: Interactive AI Career Roadmap Tree --- */
.edu-roadmap-card {
    background: #0d121f;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    position: relative;
}
.edu-phase-timeline-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 35px;
}
.edu-phase-nav-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    position: relative;
}
.edu-phase-nav-item:hover {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
    transform: translateY(-3px);
}
.edu-phase-nav-item.active {
    background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(99,102,241,0.15));
    border-color: #8b5cf6;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
}
.edu-phase-num-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    transition: all 0.3s;
}
.edu-phase-nav-item.active .edu-phase-num-circle {
    background: #7c3aed;
    box-shadow: 0 0 15px #7c3aed;
}
.edu-phase-detail-pane {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 35px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}
.edu-code-terminal-preview {
    background: #030712;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    overflow: hidden;
    font-family: monospace;
    direction: ltr;
    text-align: left;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

/* --- 10. CONSTRUCTION: Architectural Blueprint 4-Step EPC Roadmap --- */
.const-epc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    position: relative;
}
.const-epc-step {
    background: #24201d;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 26px;
    padding: 32px 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.const-epc-step:hover {
    transform: translateY(-8px);
    border-color: #f59e0b;
    background: #2c2724;
    box-shadow: 0 25px 50px rgba(245, 158, 11, 0.18);
}
.const-epc-step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.const-epc-num {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1c1917;
    font-weight: 900;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}
.const-epc-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.const-epc-tag-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fbbf24;
    display: inline-block;
    margin-top: 14px;
}

/* --- 11. TOURISM: Luxury Travel Journal & Interactive Itinerary --- */
.tourism-itinerary-box {
    background: linear-gradient(180deg, #072a42 0%, #031e30 100%);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
.tourism-day-nav-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 182, 212, 0.4) rgba(255, 255, 255, 0.05);
    -webkit-overflow-scrolling: touch;
}
.tourism-day-nav-tabs::-webkit-scrollbar {
    height: 6px;
}
.tourism-day-nav-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.tourism-day-nav-tabs::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.45);
    border-radius: 10px;
}
.tourism-day-nav-tabs::-webkit-scrollbar-thumb:hover {
    background: #06b6d4;
}
.tourism-day-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #bae6fd;
    padding: 12px 22px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.tourism-day-tab-btn:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: #06b6d4;
    color: #fff;
}
.tourism-day-tab-btn.active {
    background: linear-gradient(135deg, #0284c7, #06b6d4);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.35);
}
.tourism-itinerary-pane {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    padding: 35px;
}
.tourism-schedule-node {
    display: flex;
    gap: 18px;
    margin-bottom: 22px;
    position: relative;
}
.tourism-schedule-node:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    right: 17px;
    bottom: -14px;
    width: 2px;
    background: rgba(6, 182, 212, 0.3);
}
.tourism-node-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0284c7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
    .digital-hero-grid,
    .corp-hero-grid,
    .edu-hero-grid,
    .fashion-split-slide,
    .skew-slide-panel,
    .tourism-parallax-content,
    .hero--medical .osmani-demo-container > div,
    .hero--construction .osmani-demo-container > div,
    .hero--tourism .osmani-demo-container > div,
    .demo-cat-dual-grid,
    .campaign-package-card,
    .const-plan-switcher > div,
    .digital-config-card > div,
    .corp-roi-box > div {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .fashion-split-content {
        padding: 40px 20px !important;
    }
    .fashion-split-title {
        font-size: 2.2rem !important;
    }
    .fashion-split-image-box {
        min-height: 45vh !important;
    }
    .hero__text {
        text-align: center !important;
    }
    .hero__title {
        font-size: 2.2rem !important;
    }
    .hero__model-img {
        max-height: 320px !important;
    }
    .digital-search-bar {
        display: none !important;
    }
    .footer__container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    .live-sales-toast {
        display: none !important;
    }
}

/* ==========================================================================
   DEMO STORIES BAR - ISOLATED & BESPOKE PER THEME (ZERO HERO OVERLAP)
   ========================================================================== */
.osmani-demo-stories-wrapper {
    position: relative;
    z-index: 25;
    padding: 30px 0 15px 0;
    margin: 0;
    clear: both;
}

/* Reset negative margins from style.css for all multipurpose demos */
.osmani-demo-page-wrapper .story-section,
.osmani-demo-page-wrapper .story-section.container,
.osmani-demo-page-wrapper .story-section#story-section-container,
.osmani-demo-stories-wrapper .story-section,
.osmani-demo-stories-wrapper .story-section.container,
.osmani-demo-stories-wrapper .story-section#story-section-container,
body:not(.osmani-demo-eyewear):not(.home) .story-section,
body:not(.osmani-demo-eyewear):not(.home) .story-section.container,
body:not(.osmani-demo-eyewear):not(.home) .story-section#story-section-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 22px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
}

.osmani-demo-stories-wrapper .story-section::-webkit-scrollbar {
    display: none !important;
}

.osmani-demo-stories-wrapper .story-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.osmani-demo-stories-wrapper .story-item:hover {
    transform: translateY(-4px) scale(1.05) !important;
}

.osmani-demo-stories-wrapper .story-item__img-wrapper {
    width: 82px !important;
    height: 82px !important;
    border-radius: 50% !important;
    padding: 3.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transition: all 0.3s ease !important;
}

.osmani-demo-stories-wrapper .story-item__img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.osmani-demo-stories-wrapper .story-item span {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    display: block !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
}

/* 1. TOURISM DEMO STORIES (Oceanic Teal/Sky Glow + Readable Dark Navy text) */
.osmani-demo-tourism .osmani-demo-stories-wrapper {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.95) 0%, rgba(224, 242, 254, 0.5) 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-tourism .story-item__img-wrapper {
    background: linear-gradient(135deg, #0284c7, #06b6d4, #14b8a6, #38bdf8) !important;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.25) !important;
}
.osmani-demo-tourism .story-item__img-wrapper img {
    border: 3px solid #f0fdfa !important;
}
.osmani-demo-tourism .story-item span {
    color: #0c4a6e !important;
}
.osmani-demo-tourism .story-item:hover span {
    color: #0284c7 !important;
}

/* 2. DIGITAL DEMO STORIES (Cyber Neon Blue Glow + Slate/White text) */
.osmani-demo-digital .osmani-demo-stories-wrapper {
    background: #07090e;
    border-bottom: 1px solid rgba(37, 99, 235, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-digital .story-item__img-wrapper {
    background: linear-gradient(135deg, #2563eb, #3b82f6, #06b6d4, #6366f1) !important;
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.3) !important;
}
.osmani-demo-digital .story-item__img-wrapper img {
    border: 3px solid #07090e !important;
}
.osmani-demo-digital .story-item span {
    color: #e2e8f0 !important;
}
.osmani-demo-digital .story-item:hover span {
    color: #60a5fa !important;
}

/* 3. FASHION DEMO STORIES (Luxury Rose & Gold Gradient + Noir Dark text) */
.osmani-demo-fashion .osmani-demo-stories-wrapper {
    background: #faf8f5;
    border-bottom: 1px solid rgba(225, 29, 72, 0.1);
    padding: 35px 0 25px 0;
}
.osmani-demo-fashion .story-item__img-wrapper {
    background: linear-gradient(135deg, #e11d48, #fb7185, #d4af37, #f59e0b) !important;
    box-shadow: 0 8px 22px rgba(225, 29, 72, 0.18) !important;
}
.osmani-demo-fashion .story-item__img-wrapper img {
    border: 3px solid #faf8f5 !important;
}
.osmani-demo-fashion .story-item span {
    color: #18181b !important;
}
.osmani-demo-fashion .story-item:hover span {
    color: #e11d48 !important;
}

/* 4. EDUCATION DEMO STORIES (AI Violet & Emerald Ring + Crisp text) */
.osmani-demo-education .osmani-demo-stories-wrapper {
    background: #090d16;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-education .story-item__img-wrapper {
    background: linear-gradient(135deg, #7c3aed, #a855f7, #6366f1, #10b981) !important;
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.3) !important;
}
.osmani-demo-education .story-item__img-wrapper img {
    border: 3px solid #090d16 !important;
}
.osmani-demo-education .story-item span {
    color: #e2e8f0 !important;
}
.osmani-demo-education .story-item:hover span {
    color: #c4b5fd !important;
}

/* 5. MEDICAL DEMO STORIES (Clean Emerald/Teal Health Gradient + Clinical text) */
.osmani-demo-medical .osmani-demo-stories-wrapper {
    background: #ffffff;
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-medical .story-item__img-wrapper {
    background: linear-gradient(135deg, #059669, #10b981, #06b6d4, #14b8a6) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.18) !important;
}
.osmani-demo-medical .story-item__img-wrapper img {
    border: 3px solid #ffffff !important;
}
.osmani-demo-medical .story-item span {
    color: #064e3b !important;
}
.osmani-demo-medical .story-item:hover span {
    color: #059669 !important;
}

/* 6. CONSTRUCTION DEMO STORIES (Amber Blueprint Glow + Stone/Light text) */
.osmani-demo-construction .osmani-demo-stories-wrapper {
    background: #1c1917;
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-construction .story-item__img-wrapper {
    background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24, #ea580c) !important;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.25) !important;
}
.osmani-demo-construction .story-item__img-wrapper img {
    border: 3px solid #1c1917 !important;
}
.osmani-demo-construction .story-item span {
    color: #e7e5e4 !important;
}
.osmani-demo-construction .story-item:hover span {
    color: #fbbf24 !important;
}

/* 7. CORPORATE DEMO STORIES (Executive Sapphire Gradient) */
.osmani-demo-corporate .osmani-demo-stories-wrapper {
    background: #f8fafc;
    border-bottom: 1px solid rgba(2, 132, 199, 0.15);
    padding: 35px 0 25px 0;
}
.osmani-demo-corporate .story-item__img-wrapper {
    background: linear-gradient(135deg, #0284c7, #0ea5e9, #f59e0b, #3b82f6) !important;
    box-shadow: 0 8px 22px rgba(2, 132, 199, 0.18) !important;
}
.osmani-demo-corporate .story-item__img-wrapper img {
    border: 3px solid #f8fafc !important;
}
.osmani-demo-corporate .story-item span {
    color: #0f2942 !important;
}
.osmani-demo-corporate .story-item:hover span {
    color: #0284c7 !important;
}

/* ==========================================================================
   1. COBRA WINFREY 3D COVERFLOW SHOWCASE CAROUSEL (.showcase-3d-*)
   ========================================================================== */
.showcase-3d-section {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
}
.showcase-3d-wrapper-rel {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}
.showcase-3d-swiper {
    padding: 35px 10px 55px 10px !important;
    overflow: visible !important;
}
.showcase-3d-swiper .swiper-slide {
    height: auto;
    transition: transform 0.4s ease, opacity 0.4s ease;
    display: flex;
    justify-content: center;
}
.showcase-3d-card {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 490px;
}

/* 3D Showcase Card in Light Mode */
[data-theme="light"] .showcase-3d-card,
.theme-light .showcase-3d-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .showcase-3d-title,
.theme-light .showcase-3d-title {
    color: #0f172a !important;
}
[data-theme="light"] .showcase-3d-specs,
.theme-light .showcase-3d-specs {
    color: #64748b !important;
}
[data-theme="light"] .showcase-3d-footer,
.theme-light .showcase-3d-footer {
    border-top: 1px solid #f1f5f9 !important;
}

/* Demo Specific 3D Card Dark Styles */
.osmani-demo-fashion .showcase-3d-card {
    background: #ffffff;
    border: 1px solid #e4e4e7;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
}
[data-theme="dark"] .osmani-demo-fashion .showcase-3d-card,
.theme-dark .osmani-demo-fashion .showcase-3d-card {
    background: #121216 !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}
.osmani-demo-construction .showcase-3d-card {
    background: #1c1917;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
[data-theme="light"] .osmani-demo-construction .showcase-3d-card,
.theme-light .osmani-demo-construction .showcase-3d-card {
    background: #ffffff !important;
    border: 1px solid #fed7aa !important;
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.08) !important;
}
.showcase-3d-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.showcase-3d-card-glow {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.showcase-3d-pill-badge {
    position: relative;
    z-index: 2;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 18px;
}
.showcase-3d-img-box {
    position: relative;
    z-index: 2;
    text-align: center;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.showcase-3d-img {
    max-height: 190px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
    transition: transform 0.4s ease;
}
.showcase-3d-card:hover .showcase-3d-img {
    transform: scale(1.08) translateY(-4px);
}
.showcase-3d-title {
    position: relative;
    z-index: 2;
    font-size: 1.22rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 10px 0;
}
.osmani-demo-fashion .showcase-3d-title {
    color: #18181b;
}
.showcase-3d-specs {
    position: relative;
    z-index: 2;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0 0 20px 0;
}
.osmani-demo-fashion .showcase-3d-specs {
    color: #71717a;
}
.showcase-3d-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    margin-top: auto;
    gap: 10px;
}
.showcase-3d-price {
    font-size: 1.12rem;
    font-weight: 900;
}
.showcase-3d-btn {
    position: relative;
    color: #ffffff !important;
    padding: 10px 18px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 1;
    white-space: nowrap;
}
.showcase-3d-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

/* 3D Navigation Controls */
.showcase-3d-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    z-index: 25;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.showcase-3d-nav-btn:hover {
    transform: translateY(-50%) scale(1.15);
    background: #2563eb;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.5);
}
.showcase-3d-prev-btn,
.showcase-3d-nav-btn[class*="prev-btn"] {
    right: -15px;
}
.showcase-3d-next-btn,
.showcase-3d-nav-btn[class*="next-btn"] {
    left: -15px;
}

[data-theme="light"] .showcase-3d-nav-btn,
.theme-light .showcase-3d-nav-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .showcase-3d-nav-btn:hover,
.theme-light .showcase-3d-nav-btn:hover {
    background: var(--osmani-accent, #2563eb) !important;
    border-color: var(--osmani-accent, #2563eb) !important;
    color: #ffffff !important;
}

/* 3D Bullets Pagination */
.showcase-3d-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
}
.showcase-3d-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(148, 163, 184, 0.4);
    opacity: 1;
    border-radius: 999px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.showcase-3d-pagination .swiper-pagination-bullet-active {
    width: 32px;
    background: var(--osmani-accent, #2563eb);
    box-shadow: 0 0 12px var(--osmani-accent, #2563eb);
}

/* ==========================================================================
   TOURISM HERO CONTROLS & DESTINATION HUD BAR (.tourism-*)
   ========================================================================== */
.tourism-hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(3, 30, 48, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 25;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.tourism-hero-nav-btn:hover {
    transform: translateY(-50%) scale(1.15);
    background: #0284c7;
    border-color: #38bdf8;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6);
}
.tourism-hero-prev {
    right: 25px;
}
.tourism-hero-next {
    left: 25px;
}
.tourism-hud-wrapper {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 20;
}
.tourism-hero-hud-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
}
.tourism-hud-tab {
    background: rgba(3, 30, 48, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tourism-hud-tab:hover {
    background: rgba(3, 30, 48, 0.9);
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-3px);
}
.tourism-hud-tab.active {
    background: rgba(2, 132, 199, 0.35);
    border-color: #38bdf8;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.3);
}
.tourism-hud-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.tourism-hud-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.tourism-hud-dest {
    font-size: 0.72rem;
    color: #7dd3fc;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.tourism-hud-title {
    font-size: 0.88rem;
    color: #ffffff;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tourism-hud-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #38bdf8;
    transition: width 0.3s ease;
}
.tourism-hud-tab.active .tourism-hud-progress {
    width: 100%;
}

@media (max-width: 768px) {
    .tourism-hero-hud-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .tourism-hero-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .tourism-hero-prev { right: 10px; }
    .tourism-hero-next { left: 10px; }
}

/* ==========================================================================
   2. JEBBLES MULTI-STEP FEATURE TOUR SLIDER (.jebbles-*)
   ========================================================================== */
.jebbles-deck-section {
    position: relative;
    padding: 75px 0;
}
.jebbles-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    padding: 30px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 520px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.osmani-demo-medical .jebbles-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.jebbles-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.osmani-demo-medical .jebbles-card:hover {
    border-color: #10b981;
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.12);
}
.jebbles-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.jebbles-icon-glow {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.jebbles-tag-badge {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 999px;
}
.jebbles-card-title {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.45;
    color: #ffffff;
    margin: 0 0 20px 0;
}
.osmani-demo-medical .jebbles-card-title {
    color: #064e3b;
}
.jebbles-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 0;
}
.osmani-demo-medical .jebbles-steps-list {
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.jebbles-step-node {
    display: flex;
    align-items: center;
    gap: 12px;
}
.jebbles-step-dot {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jebbles-step-text {
    font-size: 0.9rem;
    color: #cbd5e1;
    font-weight: 600;
    line-height: 1.4;
}
.osmani-demo-medical .jebbles-step-text {
    color: #334155;
}
.jebbles-meta-ribbon {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 20px;
}
.osmani-demo-medical .jebbles-meta-ribbon {
    background: #f8fafc;
    color: #64748b;
}
.jebbles-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}
.jebbles-old-price {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    text-decoration: line-through;
}
.jebbles-cur-price {
    font-size: 1.25rem;
    font-weight: 900;
}
.jebbles-cta-btn {
    position: relative;
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid transparent;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 200%;
    animation: rainbowFlow 3s linear infinite;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    z-index: 1;
}
.jebbles-cta-btn::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 35%;
    filter: blur(12px);
    opacity: 0.6;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: rainbowFlow 3s linear infinite;
    z-index: -1;
}
.jebbles-cta-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   3. RUBBERPOINT ANIMATED PRODUCT STAGE SLIDER (.rubberpoint-*)
   ========================================================================== */
.rubberpoint-stage-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}
.rubberpoint-stage-box {
    background: linear-gradient(135deg, #091a2b 0%, #0f2942 50%, #081a2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 36px;
    padding: 50px;
    color: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    position: relative;
}
.osmani-demo-construction .rubberpoint-stage-box {
    background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #171412 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.rubberpoint-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.rubberpoint-visual-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
.rubberpoint-stage-aura {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(40px);
    animation: rubberpointPulseAura 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes rubberpointPulseAura {
    from { transform: scale(0.9); opacity: 0.6; }
    to { transform: scale(1.15); opacity: 1; }
}
.rubberpoint-img-container {
    position: relative;
    z-index: 2;
    text-align: center;
}
.rubberpoint-stage-img {
    max-height: 320px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.rubberpoint-stage-box:hover .rubberpoint-stage-img {
    transform: scale(1.05) translateY(-6px);
}
.rubberpoint-float-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rubberpoint-dest-tag {
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.rubberpoint-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 16px 0;
}
.rubberpoint-desc {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #cbd5e1;
    margin-bottom: 24px;
}
.rubberpoint-badges-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.rubberpoint-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rubberpoint-amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
}
.rubberpoint-amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #e2e8f0;
    font-weight: 600;
}
.rubberpoint-booking-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 22px;
}
.rubberpoint-old-price {
    display: block;
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: line-through;
}
.rubberpoint-price {
    font-size: 1.6rem;
    font-weight: 900;
}
.rubberpoint-book-btn {
    position: relative;
    color: #ffffff !important;
    padding: 14px 32px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 1.05rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid transparent;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 200%;
    animation: rainbowFlow 3s linear infinite;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1;
}
.rubberpoint-book-btn::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 35%;
    filter: blur(14px);
    opacity: 0.65;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: rainbowFlow 3s linear infinite;
    z-index: -1;
}
.rubberpoint-book-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
}
.rubberpoint-thumb-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 35px;
    flex-wrap: wrap;
}
.rubberpoint-thumb-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}
.rubberpoint-thumb-item img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
}
.rubberpoint-thumb-item span {
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
}
.rubberpoint-thumb-item:hover,
.rubberpoint-thumb-item.active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    border-color: #38bdf8;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
}
.osmani-demo-construction .rubberpoint-thumb-item:hover,
.osmani-demo-construction .rubberpoint-thumb-item.active {
    border-color: #fbbf24;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

@media (max-width: 991px) {
    .rubberpoint-stage-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .rubberpoint-amenities-list {
        grid-template-columns: 1fr;
    }
    .rubberpoint-badges-row {
        justify-content: center;
    }
    .rubberpoint-booking-bar {
        flex-direction: column;
        gap: 16px;
    }
    .showcase-3d-nav-btn {
        display: none !important;
    }
}

/* ==========================================================================
   4. LIQUID METAL & RAINBOW BUTTONS (21st.dev / RainbowButton)
   ========================================================================== */
@keyframes rainbowFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes liquidGlowPulse {
    0% { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
    50% { opacity: 0.85; transform: translateX(-50%) scale(1.1); }
    100% { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
}

.osmani-btn-liquid-metal,
.osmani-btn-rainbow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.95rem;
    color: #ffffff !important;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 200%;
    animation: rainbowFlow 3s linear infinite;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Base Rainbow */
.osmani-btn-rainbow,
.osmani-btn-liquid-metal {
    background-image: 
        linear-gradient(#0f172a, #0f172a),
        linear-gradient(90deg, #3b82f6, #06b6d4, #a855f7, #ec4899, #f59e0b, #3b82f6);
}

/* Glowing Puddle Pseudo-Element */
.osmani-btn-liquid-metal::before,
.osmani-btn-rainbow::before {
    content: '';
    position: absolute;
    bottom: -22%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 38%;
    filter: blur(14px);
    opacity: 0.65;
    z-index: -1;
    border-radius: 50%;
    background-size: 200% 200%;
    animation: rainbowFlow 3s linear infinite, liquidGlowPulse 3s ease-in-out infinite;
}
.osmani-btn-liquid-metal::before {
    background-image: linear-gradient(90deg, #3b82f6, #06b6d4, #a855f7, #ec4899, #f59e0b, #3b82f6);
}

.osmani-btn-liquid-metal:hover,
.osmani-btn-rainbow:hover {
    transform: translateY(-3px) scale(1.03);
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* --- Theme Variants for Liquid Metal --- */
/* 1. Digital: Cyber Neon */
.btn-liquid-digital {
    background-image: 
        linear-gradient(#090d16, #090d16),
        linear-gradient(90deg, #2563eb, #06b6d4, #6366f1, #38bdf8, #2563eb);
}
.btn-liquid-digital::before {
    background-image: linear-gradient(90deg, #2563eb, #06b6d4, #6366f1, #38bdf8, #2563eb);
}

/* 2. Fashion: Luxury Gold & Rose */
.btn-liquid-fashion {
    background-image: 
        linear-gradient(#18181b, #18181b),
        linear-gradient(90deg, #e11d48, #d4af37, #fb7185, #f59e0b, #e11d48);
}
.btn-liquid-fashion::before {
    background-image: linear-gradient(90deg, #e11d48, #d4af37, #fb7185, #f59e0b, #e11d48);
}

/* 3. Tourism: Oceanic Cyan & Teal */
.btn-liquid-tourism {
    background-image: 
        linear-gradient(#081a2e, #081a2e),
        linear-gradient(90deg, #0284c7, #06b6d4, #10b981, #38bdf8, #0284c7);
}
.btn-liquid-tourism::before {
    background-image: linear-gradient(90deg, #0284c7, #06b6d4, #10b981, #38bdf8, #0284c7);
}

/* 4. Education: AI Violet & Emerald */
.btn-liquid-education {
    background-image: 
        linear-gradient(#0f172a, #0f172a),
        linear-gradient(90deg, #7c3aed, #a855f7, #10b981, #06b6d4, #7c3aed);
}
.btn-liquid-education::before {
    background-image: linear-gradient(90deg, #7c3aed, #a855f7, #10b981, #06b6d4, #7c3aed);
}

/* 5. Medical: Health Emerald & Mint */
.btn-liquid-medical {
    background-image: 
        linear-gradient(#064e3b, #064e3b),
        linear-gradient(90deg, #059669, #10b981, #06b6d4, #34d399, #059669);
}
.btn-liquid-medical::before {
    background-image: linear-gradient(90deg, #059669, #10b981, #06b6d4, #34d399, #059669);
}

/* 6. Construction: Molten Amber & Gold */
.btn-liquid-construction {
    background-image: 
        linear-gradient(#1c1917, #1c1917),
        linear-gradient(90deg, #d97706, #f59e0b, #fbbf24, #ea580c, #d97706);
}
.btn-liquid-construction::before {
    background-image: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24, #ea580c, #d97706);
}

/* 7. Corporate: Sapphire & Platinum */
.btn-liquid-corporate {
    background-image: 
        linear-gradient(#0f2942, #0f2942),
        linear-gradient(90deg, #0284c7, #0ea5e9, #3b82f6, #f59e0b, #0284c7);
}
.btn-liquid-corporate::before {
    background-image: linear-gradient(90deg, #0284c7, #0ea5e9, #3b82f6, #f59e0b, #0284c7);
}

/* ==========================================================================
   5. MATHEMATICAL 3D CORRIDOR STREAM SHOWCASE (.osmani-corridor-*)
   ========================================================================== */
.osmani-corridor-stream-section {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
}
.osmani-corridor-wrapper {
    position: relative;
    container-type: inline-size;
    min-height: 480px;
    border-radius: 36px;
    background: radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.osmani-corridor-viewport {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.osmani-corridor-space {
    position: absolute;
    inset: 0;
}
.osmani-corridor-spotlight-card {
    position: relative;
    z-index: 10;
    max-width: 480px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    padding: 36px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    animation: spotlightFloat 4s ease-in-out infinite alternate;
}
@keyframes spotlightFloat {
    from { transform: translateY(-4px); }
    to { transform: translateY(6px); }
}
.spotlight-tag {
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 12px;
}
.spotlight-title {
    font-size: 1.65rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 12px 0;
}
.spotlight-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 18px;
}
.spotlight-price {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 22px;
}

/* ==========================================================================
   6. 21ST.DEV INTERACTIVE CARD FAN CAROUSEL (.osmani-card-fan-*)
   ========================================================================== */
.osmani-card-fan-section {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
}
.osmani-card-fan-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    background: radial-gradient(circle at 30% 50%, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 36px;
    padding: 45px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
}
.osmani-demo-fashion .osmani-card-fan-stage {
    background: radial-gradient(circle at 30% 50%, #faf8f5 0%, #f4ede4 100%);
    border: 1px solid #e4e4e7;
}
.osmani-fan-deck {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.osmani-fan-card {
    position: absolute;
    width: 210px;
    height: 290px;
    transform-origin: 50% 120%;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.15);
}
.osmani-demo-fashion .osmani-fan-card {
    border: 2px solid #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.osmani-fan-card.active {
    border-color: #38bdf8;
    box-shadow: 0 20px 45px rgba(56, 189, 248, 0.35);
}
.osmani-demo-fashion .osmani-fan-card.active {
    border-color: #e11d48;
    box-shadow: 0 20px 45px rgba(225, 29, 72, 0.25);
}
.osmani-fan-card:hover {
    transform: translateY(-20px) scale(1.15) !important;
    z-index: 50 !important;
}
.fan-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.fan-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fan-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}
.fan-card-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    align-self: flex-start;
    margin-bottom: 6px;
}
.fan-card-name {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
}
.osmani-fan-details-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    padding: 36px;
    backdrop-filter: blur(16px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}
.osmani-demo-fashion .osmani-fan-details-card {
    background: #ffffff;
    border: 1px solid #e4e4e7;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}
.fan-detail-badge {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 14px;
}
.fan-detail-title {
    font-size: 1.55rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 14px 0;
    line-height: 1.35;
}
.osmani-demo-fashion .fan-detail-title {
    color: #18181b;
}
.fan-detail-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 24px;
}
.osmani-demo-fashion .fan-detail-desc {
    color: #71717a;
}
.fan-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
}
.osmani-demo-fashion .fan-detail-footer {
    border-top: 1px solid #f4f4f5;
}
.fan-detail-price {
    font-size: 1.35rem;
    font-weight: 900;
}

@media (max-width: 991px) {
    .osmani-card-fan-stage {
        grid-template-columns: 1fr;
    }
    .osmani-fan-deck {
        height: 320px;
    }
    .osmani-fan-card {
        width: 170px;
        height: 240px;
    }
    .fan-detail-footer {
        flex-direction: column;
        gap: 16px;
    }
}

/* ==========================================================================
   7. 21ST.DEV BACKGROUND PATTERNS & DYNAMIC CANVAS UTILITIES
   ========================================================================== */

/* 1. Kinetic Grid Pattern (@satoriui/components/kinetic-grid) */
.osmani-bg-kinetic-grid {
    position: relative;
    background-color: #090d16;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.12) 0%, transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    background-position: 0 0, -1px -1px, -1px -1px;
}

/* 2. Retro Grid Horizon (@waleedkibhen/components/retro-grid) */
.osmani-bg-retro-grid {
    position: relative;
    background: #0b1120;
    overflow: hidden;
}
.osmani-bg-retro-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(to bottom, transparent 0%, rgba(11, 17, 32, 0.95) 90%),
        repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.07) 0px, rgba(56, 189, 248, 0.07) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(0deg, rgba(56, 189, 248, 0.07) 0px, rgba(56, 189, 248, 0.07) 1px, transparent 1px, transparent 60px);
    transform: perspective(600px) rotateX(45deg) translateY(-20%);
    transform-origin: top center;
    pointer-events: none;
    z-index: 0;
}
.osmani-bg-retro-grid > * {
    position: relative;
    z-index: 1;
}

/* 3. Elegant Dark Pattern (@jatin-yadav05/components/elegant-dark-pattern) */
.osmani-bg-elegant-dark {
    position: relative;
    background-color: #18181b;
    background-image: 
        radial-gradient(circle at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
    background-position: 0 0, 0 0;
}

/* 4. Background Gradient Glow (@meghtrix/components/background-gradient-glow) */
.osmani-bg-gradient-glow {
    position: relative;
    background: #090d16;
    overflow: hidden;
}
.osmani-bg-gradient-glow::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, rgba(16, 185, 129, 0.15) 45%, transparent 70%);
    filter: blur(60px);
    border-radius: 50%;
    animation: driftGlowOrb 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}
.osmani-bg-gradient-glow::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, rgba(37, 99, 235, 0.15) 50%, transparent 70%);
    filter: blur(60px);
    border-radius: 50%;
    animation: driftGlowOrb 10s ease-in-out infinite alternate-reverse;
    pointer-events: none;
    z-index: 0;
}
@keyframes driftGlowOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.15); }
    100% { transform: translate(-30px, 40px) scale(0.9); }
}

/* 5. Soft Gradient Background Animation (@easemize/components/soft-gradient-background-animation) */
.osmani-bg-soft-gradient {
    position: relative;
    background: linear-gradient(135deg, #041d33 0%, #063456 50%, #03203a 100%);
    background-size: 200% 200%;
    animation: auroraShift 12s ease infinite;
}
@keyframes auroraShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   8. PRICING PLANS CSS (.osmani-pricing-*)
   ========================================================================== */
.osmani-pricing-section {
    position: relative;
    padding: 85px 0;
}
.pricing-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 18px;
    margin-top: 24px;
}
.pricing-period-label {
    font-size: 0.9rem;
    font-weight: 800;
    color: #94a3b8;
    transition: color 0.3s;
}
.pricing-period-label.active {
    color: #ffffff;
}
.pricing-discount-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    margin-right: 4px;
}
.pricing-toggle-switch {
    width: 48px;
    height: 26px;
    background: #334155;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}
.pricing-toggle-switch.annual {
    background: #10b981;
}
.pricing-toggle-knob {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
    transition: transform 0.3s ease;
}
.pricing-toggle-switch.annual .pricing-toggle-knob {
    transform: translateX(-22px);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch;
    margin-top: 45px;
}
.pricing-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    padding: 40px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    transition: all 0.35s ease;
}
.osmani-demo-medical .pricing-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}
.pricing-card-featured {
    background: linear-gradient(135deg, #131b31 0%, #0f172a 100%);
    border: 2px solid #7c3aed;
    transform: scale(1.04);
    box-shadow: 0 25px 65px rgba(124, 58, 237, 0.25);
}
.osmani-demo-corporate .pricing-card-featured {
    border-color: #0284c7;
    box-shadow: 0 25px 65px rgba(2, 132, 199, 0.25);
}
.osmani-demo-medical .pricing-card-featured {
    border-color: #059669;
    box-shadow: 0 25px 65px rgba(5, 150, 105, 0.2);
}
.pricing-featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 5px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pricing-plan-name {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 10px 0;
}
.osmani-demo-medical .pricing-plan-name {
    color: #064e3b;
}
.pricing-plan-desc {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}
.osmani-demo-medical .pricing-plan-desc {
    color: #64748b;
}
.pricing-price-box {
    margin: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
}
.osmani-demo-medical .pricing-price-box {
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.pricing-amount-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.pricing-num {
    font-size: 2.3rem;
    font-weight: 900;
    color: #ffffff;
}
.osmani-demo-medical .pricing-num {
    color: #0f172a;
}
.pricing-currency {
    font-size: 0.95rem;
    font-weight: 800;
    color: #94a3b8;
}
.pricing-unit {
    font-size: 0.88rem;
    color: #64748b;
    margin-right: auto;
}
.pricing-features-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}
.pricing-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.osmani-demo-medical .pricing-feature-item {
    color: #334155;
}
.pricing-standard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.osmani-demo-medical .pricing-standard-btn {
    background: #f8fafc;
    color: #0f172a;
}
.pricing-standard-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* ==========================================================================
   9. COURSE / CLINICAL DESIGN CARDS CSS (.course-design-card)
   ========================================================================== */
.osmani-course-cards-section {
    position: relative;
    padding: 85px 0;
}
.course-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}
.course-design-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s ease;
}
.osmani-demo-medical .course-design-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.course-design-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}
.course-card-top-media {
    position: relative;
    height: 220px;
    background: #090d16;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course-card-cover {
    max-height: 180px;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.35));
    transition: transform 0.4s ease;
}
.course-design-card:hover .course-card-cover {
    transform: scale(1.08);
}
.course-card-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.course-card-rating {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: #fbbf24;
    font-size: 0.82rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.course-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}
.course-card-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 12px 0;
}
.osmani-demo-medical .course-card-title {
    color: #064e3b;
}
.course-card-desc {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 20px;
}
.osmani-demo-medical .course-card-desc {
    color: #64748b;
}
.course-author-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.course-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.course-author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.course-author-name {
    font-size: 0.92rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}
.osmani-demo-medical .course-author-name {
    color: #0f172a;
}
.course-author-sub {
    font-size: 0.78rem;
    color: #94a3b8;
}
.course-badge-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #cbd5e1;
}
.osmani-demo-medical .course-badge-pill {
    background: #f8fafc;
    color: #64748b;
}
.course-progress-box {
    margin-bottom: 22px;
}
.course-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: #94a3b8;
}
.course-progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
}
.course-progress-fill {
    height: 100%;
    border-radius: 999px;
}
.course-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
}
.osmani-demo-medical .course-card-footer {
    border-top: 1px solid #f1f5f9;
}
.course-card-price {
    font-size: 1.25rem;
    font-weight: 900;
}

/* ==========================================================================
   10. PARTNER LOGO CLOUD CSS (.osmani-logo-cloud-*)
   ========================================================================== */
.osmani-logo-cloud-section {
    position: relative;
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.logo-cloud-header {
    text-align: center;
    margin-bottom: 35px;
}
.logo-cloud-badge {
    font-size: 0.82rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}
.logo-cloud-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}
.osmani-demo-digital .logo-cloud-title,
.osmani-demo-education .logo-cloud-title {
    color: #0f172a;
}
[data-theme="dark"] .logo-cloud-title,
.theme-dark .logo-cloud-title {
    color: #ffffff !important;
}
.logo-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.logo-marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: logoMarqueeScroll 25s linear infinite;
}
.logo-marquee-track:hover {
    animation-play-state: paused;
}
@keyframes logoMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}
.logo-marquee-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 210px;
    transition: all 0.3s ease;
}
.osmani-demo-fashion .logo-marquee-item {
    background: #ffffff;
    border: 1px solid #e4e4e7;
}
.logo-marquee-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #38bdf8;
    transform: translateY(-3px);
}
.logo-item-icon {
    font-size: 1.6rem;
    color: #38bdf8;
}
.logo-item-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: #ffffff;
    display: block;
}
.osmani-demo-fashion .logo-item-name {
    color: #18181b;
}
.logo-item-tag {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ==========================================================================
   11. ORBITING INTEGRATIONS CSS (.osmani-orbit-*)
   ========================================================================== */
.osmani-orbit-section {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
}
.orbit-stage-wrapper {
    position: relative;
    height: 480px;
    max-width: 700px;
    margin: 40px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orbit-center-core {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
    border: 2px solid #3b82f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.4);
    animation: corePulse 3s ease-in-out infinite alternate;
}
@keyframes corePulse {
    from { transform: scale(0.95); box-shadow: 0 0 35px rgba(59, 130, 246, 0.3); }
    to { transform: scale(1.05); box-shadow: 0 0 60px rgba(59, 130, 246, 0.6); }
}
.orbit-core-icon {
    font-size: 2.2rem;
    color: #60a5fa;
    margin-bottom: 6px;
}
.orbit-core-label {
    font-size: 0.82rem;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
}
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    pointer-events: none;
}
.orbit-ring-inner {
    width: 320px;
    height: 320px;
    animation: spinRing 40s linear infinite;
}
.orbit-ring-outer {
    width: 480px;
    height: 480px;
    animation: spinRing 60s linear infinite reverse;
}
@keyframes spinRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.orbit-node-item {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 12;
    animation: nodeFloat 4s ease-in-out infinite alternate;
}
@keyframes nodeFloat {
    from { transform: translate(-50%, -50%) translateY(-4px); }
    to { transform: translate(-50%, -50%) translateY(4px); }
}
.orbit-node-item:hover {
    border-color: #38bdf8;
    background: rgba(30, 41, 59, 0.95);
    transform: translate(-50%, -50%) scale(1.15) !important;
}
.orbit-node-icon {
    font-size: 1.1rem;
    color: #38bdf8;
}
.orbit-node-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

/* ==========================================================================
   12. MODERN TESTIMONIALS CSS (.osmani-testimonial-*)
   ========================================================================== */
.osmani-testimonial-section {
    position: relative;
    padding: 85px 0;
}
.testimonial-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}
.modern-testimonial-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    transition: all 0.35s ease;
}
.modern-testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
}
.testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.testimonial-author-box {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.testimonial-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 3px 0;
}
.testimonial-role {
    font-size: 0.8rem;
    color: #94a3b8;
}
.testimonial-verified-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.testimonial-stars-row {
    color: #fbbf24;
    font-size: 0.92rem;
    margin-bottom: 16px;
}
.testimonial-quote-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #cbd5e1;
    margin-bottom: 24px;
    font-style: italic;
}
.testimonial-highlight-pill {
    font-size: 0.82rem;
    font-weight: 900;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   13. VIP 3D CREDIT / MEMBERSHIP CARD CSS (.osmani-vip-card-*)
   ========================================================================== */
.osmani-vip-card-section {
    position: relative;
    padding: 85px 0;
    overflow: hidden;
}
.vip-card-stage-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.vip-card-3d-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}
.vip-card-glow-aura {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}
.vip-hologram-card {
    width: 380px;
    height: 230px;
    border-radius: 22px;
    background: linear-gradient(135deg, #18181b 0%, #27272a 40%, #09090b 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 26px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transform: perspective(800px) rotateY(-12deg) rotateX(8deg);
    transition: all 0.5s ease;
}
.vip-hologram-card:hover {
    transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.75);
}
.vip-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vip-card-chip {
    font-size: 1.8rem;
    color: #fbbf24;
}
.vip-card-brand-type {
    font-size: 0.85rem;
    font-weight: 900;
    color: #e4e4e7;
    letter-spacing: 2px;
}
.vip-card-number {
    font-family: 'Courier New', monospace;
    font-size: 1.35rem;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.vip-card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.vip-card-lbl {
    font-size: 0.65rem;
    color: #a1a1aa;
    display: block;
}
.vip-card-val {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 800;
}
.vip-card-contactless {
    font-size: 1.2rem;
    color: #a1a1aa;
}
.vip-stage-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 16px 0;
    line-height: 1.35;
}
.vip-stage-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 24px;
}
.vip-perks-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vip-perk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 600;
}
.vip-perk-item span {
    color: #0f172a;
}
[data-theme="dark"] .vip-stage-title,
.theme-dark .vip-stage-title {
    color: #ffffff !important;
}
[data-theme="dark"] .vip-stage-desc,
.theme-dark .vip-stage-desc {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .vip-perk-item,
.theme-dark .vip-perk-item,
[data-theme="dark"] .vip-perk-item span,
.theme-dark .vip-perk-item span {
    color: #e2e8f0 !important;
}

/* ==========================================================================
   14. BESPOKE FOOTER CSS (.osmani-bespoke-footer)
   ========================================================================== */
.osmani-bespoke-footer {
    position: relative;
    padding: 70px 0 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.footer-newsletter-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 35px 40px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 60px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.newsletter-badge {
    font-size: 0.82rem;
    font-weight: 800;
    color: #38bdf8;
    display: inline-block;
    margin-bottom: 8px;
}
.newsletter-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.4;
}
.newsletter-desc {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0;
}
.newsletter-form {
    display: flex;
    gap: 10px;
}
.newsletter-input {
    flex-grow: 1;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 12px 18px;
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.3s;
}
.newsletter-input:focus {
    border-color: #38bdf8;
}
.footer-columns-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}
.footer-brand-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 14px 0;
}
.footer-brand-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #94a3b8;
    margin-bottom: 22px;
}
.footer-social-links {
    display: flex;
    gap: 10px;
}
.footer-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-social-btn:hover {
    background: #38bdf8;
    color: #0f172a;
    transform: translateY(-3px);
}
.footer-col-heading {
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 20px 0;
}
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-links-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footer-links-list a:hover {
    color: #38bdf8;
}
.footer-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-trust-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}
.footer-payment-icons {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: #94a3b8;
}

@media (max-width: 991px) {
    .footer-newsletter-box {
        grid-template-columns: 1fr;
    }
    .footer-columns-grid {
        grid-template-columns: 1fr 1fr;
    }
    .vip-card-stage-grid {
        grid-template-columns: 1fr;
    }
    .vip-hologram-card {
        width: 100%;
        max-width: 380px;
        transform: none;
    }
}
@media (max-width: 640px) {
    .footer-columns-grid {
        grid-template-columns: 1fr;
    }
    .newsletter-form {
        flex-direction: column;
    }
}

/* ==========================================================================
   13. EDUCATION WEBINAR 50/50 SPLIT STAGE & ANIMATIONS
   ========================================================================== */
.edu-webinar-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(124, 58, 237, 0.35);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    border-radius: 32px;
    padding: 50px 45px;
    position: relative;
    overflow: hidden;
}
.edu-webinar-live-badge {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.live-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
    animation: liveDotPulse 1.5s infinite;
}
@keyframes liveDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}
.edu-webinar-free-pill {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.edu-webinar-headline {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.35;
    margin: 8px 0 14px 0;
}
.edu-webinar-lead {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #c4b5fd;
    margin-bottom: 24px;
}
.edu-webinar-topics-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}
.edu-webinar-topic-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
}
.edu-webinar-topic-item i {
    color: #7c3aed;
    font-size: 1.05rem;
}
.edu-webinar-form-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
}
.edu-webinar-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #cbd5e1;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.edu-webinar-inline-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.edu-webinar-inline-form button {
    grid-column: span 2;
}
.edu-webinar-input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
    transition: all 0.3s ease;
}
.edu-webinar-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

/* Left Keynote Visual Card */
.edu-webinar-visual-col {
    position: relative;
    display: flex;
    justify-content: center;
}
.edu-webinar-stage-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.edu-webinar-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    animation: webinarGlowPulse 4s infinite alternate ease-in-out;
}
@keyframes webinarGlowPulse {
    0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}
.edu-webinar-card-topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.edu-live-indicator {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.edu-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    animation: liveDotPulse 1.2s infinite;
}
.edu-audio-wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}
.wave-bar {
    width: 3px;
    background: #a78bfa;
    border-radius: 3px;
    animation: waveBar 1.2s infinite ease-in-out;
}
.wave-bar:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.wave-bar:nth-child(2) { height: 100%; animation-delay: 0.3s; }
.wave-bar:nth-child(3) { height: 40%; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 80%; animation-delay: 0.4s; }
.wave-bar:nth-child(5) { height: 50%; animation-delay: 0.15s; }
@keyframes waveBar {
    0%, 100% { height: 20%; }
    50% { height: 100%; }
}

.edu-speaker-frame-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.edu-speaker-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #7c3aed;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
    position: relative;
    z-index: 1;
}
.edu-speaker-floating-badge {
    margin-top: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 6px 14px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.edu-keynote-banner-pill {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}
.edu-floating-attendees-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 999px;
    padding: 6px 14px;
    z-index: 1;
}
.edu-attendees-avatar-stack {
    display: flex;
    align-items: center;
}
.edu-attendees-avatar-stack img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #1e1b4b;
    margin-right: -8px;
}

/* ==========================================================================
   14. MEDICAL DOCTOR ROSTER 2x2 BALANCED GRID
   ========================================================================== */
.med-doctor-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.med-doctor-roster-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.med-doctor-roster-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #10b981, #059669);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.med-doctor-roster-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}
.med-doctor-roster-card:hover::before {
    opacity: 1;
}
.med-doc-card-top {
    display: flex;
    align-items: center;
    gap: 18px;
}
.med-doc-avatar-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}
.med-doc-avatar {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    border: 2px solid #10b981;
}
.med-doc-status-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #059669;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.med-pulse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    animation: liveDotPulse 1.4s infinite;
}
.med-doc-meta {
    flex: 1;
}
.med-doc-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px 0;
}
.med-doc-specialty {
    font-size: 0.88rem;
    font-weight: 700;
    color: #059669;
    display: block;
    margin-bottom: 4px;
}
.med-doc-council {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}
.med-doc-schedule-box {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.med-schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
}
.med-sched-label {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.med-sched-val {
    color: #1e293b;
}

/* ==========================================================================
   15. FASHION 50/50 SPLIT CARD STAGES (SIZE GUIDE & VIP ATELIER)
   ========================================================================== */
.fashion-split-card-stage {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 45px;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 32px;
    padding: 50px 45px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}
.fashion-vip-stage {
    background: linear-gradient(135deg, #18181b 0%, #27272a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}
.fashion-stage-title {
    font-size: 2.1rem;
    font-weight: 900;
    color: #18181b;
    line-height: 1.35;
    margin: 8px 0 14px 0;
}
.fashion-stage-desc {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #64748b;
    margin-bottom: 24px;
}
.fashion-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.fashion-input-group {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 14px 18px;
}
.fashion-range-slider {
    width: 100%;
    accent-color: #e11d48;
    cursor: pointer;
}
.fashion-result-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.fashion-size-badge {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    padding: 6px 18px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 4px;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35);
}
.fashion-fit-meta {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mannequin Visual Card */
.fashion-mannequin-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}
.fashion-mannequin-frame {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fashion-mannequin-img {
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
    animation: mannequinFloat 4s ease-in-out infinite alternate;
}
@keyframes mannequinFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}
.fashion-pin-hotspot {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pin-shoulder { top: 22%; right: 10%; }
.pin-chest { top: 38%; left: 5%; }
.pin-waist { top: 55%; right: 8%; }
.fashion-pin-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e11d48;
    box-shadow: 0 0 12px #e11d48;
    animation: liveDotPulse 1.3s infinite;
}
.fashion-pin-tag {
    background: rgba(15, 23, 42, 0.88);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.fashion-floating-tailor-tag {
    margin-top: 20px;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* VIP Atelier Visual Card */
.fashion-vip-perks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.fashion-vip-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e4e4e7;
    font-size: 0.95rem;
    font-weight: 700;
}
.fashion-vip-booking-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
}
.fashion-vip-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 0.92rem;
    outline: none;
    width: 100%;
}
.fashion-atelier-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.fashion-atelier-frame {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
}
.fashion-atelier-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fashion-atelier-overlay-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vip-live-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}
.fashion-floating-atelier-badge {
    margin-top: 18px;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fashion-atelier-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   16. ADVANCED DARK & LIGHT THEME MODE SYSTEM & ANIMATED SWITCHER
   ========================================================================== */

/* Theme Toggle Button Micro-Interactions */
.osmani-theme-toggle-btn {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    overflow: hidden !important;
    z-index: 50 !important;
    padding: 0 !important;
    margin: 0 4px !important;
}
.osmani-theme-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.osmani-theme-toggle-btn:active {
    transform: scale(0.92) !important;
}
.theme-toggle-icon-wrap {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}
.theme-icon-sun,
.theme-icon-moon {
    position: absolute !important;
    font-size: 1.15rem !important;
    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
}

/* Light Theme Mode State */
:root, [data-theme="light"], .theme-light {
    --osmani-theme-mode: 'light';
    --osmani-bg-primary: #ffffff;
    --osmani-bg-secondary: #f8fafc;
    --osmani-bg-tertiary: #f1f5f9;
    --osmani-bg-elevated: #ffffff;
    --osmani-bg-card: #ffffff;
    --osmani-bg-alt: #f8fafc;
    --osmani-bg-surface: #ffffff;
    --osmani-bg-glass: rgba(255, 255, 255, 0.9);
    --osmani-bg-input: #ffffff;
    
    --osmani-text-primary: #0f172a;
    --osmani-text-secondary: #334155;
    --osmani-text-muted: #64748b;
    --osmani-text-light: #94a3b8;
    --osmani-text-inverse: #ffffff;
    
    --osmani-border-subtle: #e2e8f0;
    --osmani-border-medium: #cbd5e1;
    --osmani-border-glass: rgba(0, 0, 0, 0.08);
    
    --osmani-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --osmani-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06);
    --osmani-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.08);
    --osmani-shadow-glow: 0 0 25px rgba(37, 99, 235, 0.12);
    
    --osmani-header-bg: rgba(255, 255, 255, 0.96);
    --osmani-header-border: rgba(0, 0, 0, 0.06);
    --osmani-header-text: #0f172a;
    --osmani-topbar-bg: #f1f5f9;
}

[data-theme="light"] .osmani-theme-toggle-btn,
.theme-light .osmani-theme-toggle-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .theme-icon-sun,
.theme-light .theme-icon-sun {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)) !important;
}
[data-theme="light"] .theme-icon-moon,
.theme-light .theme-icon-moon {
    opacity: 0 !important;
    transform: rotate(-100deg) scale(0.3) !important;
    color: #64748b !important;
}

/* Dark Theme Mode State */
[data-theme="dark"], .theme-dark {
    --osmani-theme-mode: 'dark';
    --osmani-bg-primary: #080c14;
    --osmani-bg-secondary: #0f172a;
    --osmani-bg-tertiary: #1e293b;
    --osmani-bg-elevated: #1e293b;
    --osmani-bg-card: #131b2e;
    --osmani-bg-alt: #0a0e17;
    --osmani-bg-surface: #1e293b;
    --osmani-bg-glass: rgba(15, 23, 42, 0.82);
    --osmani-bg-input: #0f172a;
    
    --osmani-text-primary: #f8fafc;
    --osmani-text-secondary: #cbd5e1;
    --osmani-text-muted: #94a3b8;
    --osmani-text-light: #64748b;
    --osmani-text-inverse: #0f172a;
    
    --osmani-border-subtle: rgba(255, 255, 255, 0.09);
    --osmani-border-medium: rgba(255, 255, 255, 0.16);
    --osmani-border-glass: rgba(255, 255, 255, 0.14);
    
    --osmani-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --osmani-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.5);
    --osmani-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.65);
/* ==========================================================================
   15. COMPACT REVIEW TICKER WIDGET
   ========================================================================== */
.compact-review-ticker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 8px 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    transition: all 0.3s ease;
}
.ticker-avatar-stack {
    display: flex;
    align-items: center;
}
.ticker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0f172a;
    margin-right: -10px;
}
.ticker-stars {
    color: #fbbf24;
    font-size: 0.78rem;
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}
.ticker-text {
    font-size: 0.85rem;
    color: #e2e8f0;
    transition: all 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.ticker-text strong {
    color: #ffffff;
    font-weight: 800;
}
.ticker-text span {
    color: #cbd5e1;
    font-weight: 500;
}

/* ==========================================================================
   16. ADVANCED DARK & LIGHT THEME MODE SYSTEM & ANIMATED SWITCHER
   ========================================================================== */

/* Theme Toggle Button Micro-Interactions */
.osmani-theme-toggle-btn {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    overflow: hidden !important;
    z-index: 50 !important;
    padding: 0 !important;
    margin: 0 4px !important;
}
.osmani-theme-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
.osmani-theme-toggle-btn:active {
    transform: scale(0.92) !important;
}
.theme-toggle-icon-wrap {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}
.theme-icon-sun,
.theme-icon-moon {
    position: absolute !important;
    font-size: 1.15rem !important;
    transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
}

/* Light Theme Mode State */
:root, [data-theme="light"], .theme-light {
    --osmani-theme-mode: 'light';
    --osmani-bg-primary: #ffffff;
    --osmani-bg-secondary: #f8fafc;
    --osmani-bg-tertiary: #f1f5f9;
    --osmani-bg-elevated: #ffffff;
    --osmani-bg-card: #ffffff;
    --osmani-bg-alt: #f8fafc;
    --osmani-bg-surface: #ffffff;
    --osmani-bg-glass: rgba(255, 255, 255, 0.92);
    --osmani-bg-input: #ffffff;
    
    --osmani-text-primary: #0f172a;
    --osmani-text-secondary: #334155;
    --osmani-text-muted: #64748b;
    --osmani-text-light: #94a3b8;
    --osmani-text-inverse: #ffffff;
    
    --osmani-border-subtle: #e2e8f0;
    --osmani-border-medium: #cbd5e1;
    --osmani-border-glass: rgba(0, 0, 0, 0.08);
    
    --osmani-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --osmani-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06);
    --osmani-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.08);
    --osmani-shadow-glow: 0 0 25px rgba(37, 99, 235, 0.12);
    
    --osmani-header-bg: rgba(255, 255, 255, 0.98);
    --osmani-header-border: rgba(0, 0, 0, 0.06);
    --osmani-header-text: #0f172a;
    --osmani-topbar-bg: #f1f5f9;
}

[data-theme="light"] .osmani-theme-toggle-btn,
.theme-light .osmani-theme-toggle-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .theme-icon-sun,
.theme-light .theme-icon-sun {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)) !important;
}
[data-theme="light"] .theme-icon-moon,
.theme-light .theme-icon-moon {
    opacity: 0 !important;
    transform: rotate(-100deg) scale(0.3) !important;
    color: #64748b !important;
}

/* Dark Theme Mode State */
[data-theme="dark"], .theme-dark {
    --osmani-theme-mode: 'dark';
    --osmani-bg-primary: #080c14;
    --osmani-bg-secondary: #0f172a;
    --osmani-bg-tertiary: #1e293b;
    --osmani-bg-elevated: #1e293b;
    --osmani-bg-card: #131b2e;
    --osmani-bg-alt: #0a0e17;
    --osmani-bg-surface: #1e293b;
    --osmani-bg-glass: rgba(15, 23, 42, 0.82);
    --osmani-bg-input: #0f172a;
    
    --osmani-text-primary: #f8fafc;
    --osmani-text-secondary: #cbd5e1;
    --osmani-text-muted: #94a3b8;
    --osmani-text-light: #64748b;
    --osmani-text-inverse: #0f172a;
    
    --osmani-border-subtle: rgba(255, 255, 255, 0.09);
    --osmani-border-medium: rgba(255, 255, 255, 0.16);
    --osmani-border-glass: rgba(255, 255, 255, 0.14);
    
    --osmani-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --osmani-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.5);
    --osmani-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.65);
    --osmani-shadow-glow: 0 0 35px rgba(56, 189, 248, 0.22);
    
    --osmani-header-bg: rgba(8, 12, 20, 0.96);
    --osmani-header-border: rgba(255, 255, 255, 0.08);
    --osmani-header-text: #f8fafc;
    --osmani-topbar-bg: #05080f;
}

[data-theme="dark"] .osmani-theme-toggle-btn,
.theme-dark .osmani-theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] .theme-icon-moon,
.theme-dark .theme-icon-moon {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)) !important;
}
[data-theme="dark"] .theme-icon-sun,
.theme-dark .theme-icon-sun {
    opacity: 0 !important;
    transform: rotate(100deg) scale(0.3) !important;
    color: #f59e0b !important;
}

/* Global Transitions */
body, 
.header, 
.header-topbar, 
.nav, 
.osmani-demo-section, 
.osmani-bespoke-footer,
.osmani-pricing-card,
.osmani-course-design-card,
.osmani-testimonial-bubble,
.med-doctor-roster-card,
.fashion-split-card-stage,
.edu-webinar-split-grid,
.footer-newsletter-box {
    transition: background-color 0.35s ease, 
                color 0.35s ease, 
                border-color 0.35s ease, 
                box-shadow 0.35s ease !important;
}

/* ==========================================================================
   17. LIGHT MODE HIGH-CONTRAST ENGINE ACROSS ALL DEMOS
   ========================================================================== */
[data-theme="light"], .theme-light {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}
[data-theme="light"] body,
.theme-light body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Light Mode Header & Navigation */
[data-theme="light"] .header,
.theme-light .header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .header-topbar,
.theme-light .header-topbar {
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
[data-theme="light"] .nav__link,
.theme-light .nav__link {
    color: #1e293b !important;
    font-weight: 700 !important;
}
[data-theme="light"] .nav__link:hover,
.theme-light .nav__link:hover {
    color: var(--osmani-accent, #2563eb) !important;
}
[data-theme="light"] .nav__icon,
.theme-light .nav__icon {
    color: #1e293b !important;
}
[data-theme="light"] .digital-search-bar,
.theme-light .digital-search-bar {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .digital-search-bar input,
.theme-light .digital-search-bar input {
    color: #0f172a !important;
}

/* Light Mode Sections */
[data-theme="light"] .osmani-demo-section,
.theme-light .osmani-demo-section {
    background-color: #ffffff !important;
    color: #1e293b !important;
}
[data-theme="light"] .osmani-demo-section.bg-alt,
.theme-light .osmani-demo-section.bg-alt {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}
[data-theme="light"] .osmani-demo-section.bg-dark,
.theme-light .osmani-demo-section.bg-dark {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-theme="light"] .osmani-section-title,
.theme-light .osmani-section-title {
    color: #0f172a !important;
}
[data-theme="light"] .osmani-section-subtitle,
.theme-light .osmani-section-subtitle {
    color: #475569 !important;
}
[data-theme="light"] .osmani-section-desc,
.theme-light .osmani-section-desc {
    color: #334155 !important;
}

/* Compact Review Ticker in Light Mode */
[data-theme="light"] .compact-review-ticker,
.theme-light .compact-review-ticker {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] .ticker-avatar,
.theme-light .ticker-avatar {
    border-color: #ffffff !important;
}
[data-theme="light"] .ticker-text strong,
.theme-light .ticker-text strong {
    color: #0f172a !important;
}
[data-theme="light"] .ticker-text span,
.theme-light .ticker-text span {
    color: #334155 !important;
}

/* Secondary Hero Buttons in Light Mode */
[data-theme="light"] .skew-slide-panel a.btn:not(.btn--primary),
.theme-light .skew-slide-panel a.btn:not(.btn--primary),
[data-theme="light"] .corp-hero-bespoke a.btn:not(.btn--primary),
.theme-light .corp-hero-bespoke a.btn:not(.btn--primary),
[data-theme="light"] .edu-hero-bespoke a.btn:not(.btn--primary),
.theme-light .edu-hero-bespoke a.btn:not(.btn--primary),
[data-theme="light"] a[href="#benchmark"],
.theme-light a[href="#benchmark"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] a[href="#benchmark"]:hover,
.theme-light a[href="#benchmark"]:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Digital Demo in Light Mode */
[data-theme="light"] .skew-slider-container,
.theme-light .skew-slider-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}
[data-theme="light"] .digital-hero-title,
.theme-light .digital-hero-title {
    color: #0f172a !important;
}
[data-theme="light"] .digital-hero-desc,
.theme-light .digital-hero-desc {
    color: #334155 !important;
}
[data-theme="light"] .digital-hud-thumb,
.theme-light .digital-hud-thumb {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .digital-hud-thumb.active,
.theme-light .digital-hud-thumb.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
[data-theme="light"] .digital-hero-spec-tag,
.theme-light .digital-hero-spec-tag {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Digital Hardware Benchmark Lab in Light Mode */
[data-theme="light"] .digital-bench-wrapper,
.theme-light .digital-bench-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .digital-bench-tab-btn,
.theme-light .digital-bench-tab-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .digital-bench-tab-btn.active,
.theme-light .digital-bench-tab-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}
[data-theme="light"] .bench-device-card,
.theme-light .bench-device-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .bench-device-card.winner,
.theme-light .bench-device-card.winner {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1) !important;
}
[data-theme="light"] .bench-device-card h4,
.theme-light .bench-device-card h4 {
    color: #0f172a !important;
}
[data-theme="light"] .bench-device-card span,
.theme-light .bench-device-card span {
    color: #475569 !important;
}
[data-theme="light"] .bench-device-card div,
.theme-light .bench-device-card div {
    color: #334155 !important;
}
[data-theme="light"] .bench-device-card strong,
.theme-light .bench-device-card strong {
    color: #0f172a !important;
}

/* 21st.dev Partner Logo Cloud in Light Mode */
[data-theme="light"] .osmani-logo-cloud-section,
.theme-light .osmani-logo-cloud-section {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .logo-cloud-badge,
.theme-light .logo-cloud-badge {
    color: var(--osmani-accent, #2563eb) !important;
    font-weight: 800 !important;
}
[data-theme="light"] .logo-cloud-title,
.theme-light .logo-cloud-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}
[data-theme="light"] .logo-marquee-item,
.theme-light .logo-marquee-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .logo-marquee-item:hover,
.theme-light .logo-marquee-item:hover {
    background: #f8fafc !important;
    border-color: #2563eb !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.12) !important;
}
[data-theme="light"] .logo-item-icon,
.theme-light .logo-item-icon {
    color: var(--osmani-accent, #2563eb) !important;
}
[data-theme="light"] .logo-item-name,
.theme-light .logo-item-name {
    color: #0f172a !important;
    font-weight: 900 !important;
}
[data-theme="light"] .logo-item-tag,
.theme-light .logo-item-tag {
    color: #64748b !important;
    font-weight: 700 !important;
}

/* 21st.dev Orbiting Integrations in Light Mode */
[data-theme="light"] .osmani-orbit-section,
.theme-light .osmani-orbit-section {
    background: #f8fafc !important;
}
[data-theme="light"] .orbit-ring,
.theme-light .orbit-ring {
    border-color: #cbd5e1 !important;
}
[data-theme="light"] .orbit-center-core,
.theme-light .orbit-center-core {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .orbit-core-label,
.theme-light .orbit-core-label {
    color: #ffffff !important;
}
[data-theme="light"] .orbit-node-item,
.theme-light .orbit-node-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .orbit-node-name,
.theme-light .orbit-node-name {
    color: #0f172a !important;
    font-weight: 800 !important;
}
[data-theme="light"] .orbit-node-icon,
.theme-light .orbit-node-icon {
    color: #2563eb !important;
}

/* Corporate Demo in Light Mode */
[data-theme="light"] .corp-hero-bespoke,
.theme-light .corp-hero-bespoke {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%) !important;
    color: #0f172a !important;
}
[data-theme="light"] .corp-hero-title,
.theme-light .corp-hero-title {
    color: #0f172a !important;
}
[data-theme="light"] .corp-hero-bespoke p,
.theme-light .corp-hero-bespoke p {
    color: #334155 !important;
}
[data-theme="light"] .corp-tab-jump-btn,
.theme-light .corp-tab-jump-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .corp-tab-jump-btn.active,
.theme-light .corp-tab-jump-btn.active {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0ea5e9 !important;
}
[data-theme="light"] .corp-hero-card-form,
.theme-light .corp-hero-card-form {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .corp-hero-card-form h3,
.theme-light .corp-hero-card-form h3 {
    color: #0f172a !important;
}
[data-theme="light"] .corp-hero-card-form p,
.theme-light .corp-hero-card-form p {
    color: #64748b !important;
}
[data-theme="light"] .corp-hero-card-form input,
.theme-light .corp-hero-card-form input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Corporate ROI Simulator & Case Studies in Light Mode */
[data-theme="light"] #roi-calculator .osmani-demo-container > div,
.theme-light #roi-calculator .osmani-demo-container > div {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 15px 40px rgba(14, 165, 233, 0.08) !important;
    color: #0f172a !important;
}
[data-theme="light"] #roi-calculator h3,
.theme-light #roi-calculator h3 {
    color: #0f172a !important;
}
[data-theme="light"] #roi-calculator p,
.theme-light #roi-calculator p {
    color: #334155 !important;
}
[data-theme="light"] #roi-calculator span,
.theme-light #roi-calculator span {
    color: #0f172a !important;
}

[data-theme="light"] .corp-case-tab-btn,
.theme-light .corp-case-tab-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .corp-case-tab-btn.active,
.theme-light .corp-case-tab-btn.active {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0ea5e9 !important;
}
[data-theme="light"] .corp-case-card-adv,
.theme-light .corp-case-card-adv {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .corp-case-card-adv h3,
.theme-light .corp-case-card-adv h3 {
    color: #0f172a !important;
}
[data-theme="light"] .corp-case-card-adv p,
.theme-light .corp-case-card-adv p {
    color: #334155 !important;
}
[data-theme="light"] .corp-case-card-adv div,
.theme-light .corp-case-card-adv div {
    color: #334155 !important;
}
[data-theme="light"] .corp-case-card-adv strong,
.theme-light .corp-case-card-adv strong {
    color: #0f172a !important;
}

/* Corporate ROI Simulator in Light Mode */
[data-theme="light"] .corp-roi-card,
.theme-light .corp-roi-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 20px 50px rgba(14, 165, 233, 0.1) !important;
    color: #0c4a6e !important;
}
[data-theme="light"] .corp-roi-title,
.theme-light .corp-roi-title {
    color: #0369a1 !important;
}
[data-theme="light"] .corp-roi-desc,
.theme-light .corp-roi-desc {
    color: #075985 !important;
}
[data-theme="light"] .corp-roi-slider-header span,
.theme-light .corp-roi-slider-header span {
    color: #0c4a6e !important;
}
[data-theme="light"] .corp-roi-result-box,
.theme-light .corp-roi-result-box {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .corp-roi-result-lbl,
.theme-light .corp-roi-result-lbl {
    color: #0369a1 !important;
}
[data-theme="light"] .corp-roi-sublbl,
.theme-light .corp-roi-sublbl {
    color: #075985 !important;
}

/* 21st.dev 3D VIP Executive Card in Light Mode */
[data-theme="light"] .osmani-vip-card-section,
.theme-light .osmani-vip-card-section {
    background: #f8fafc !important;
}
[data-theme="light"] .vip-stage-title,
.theme-light .vip-stage-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}
[data-theme="light"] .vip-stage-desc,
.theme-light .vip-stage-desc {
    color: #334155 !important;
    font-weight: 600 !important;
}
[data-theme="light"] .vip-perk-item,
.theme-light .vip-perk-item {
    color: #0f172a !important;
    font-weight: 700 !important;
}
[data-theme="light"] .vip-perk-item span,
.theme-light .vip-perk-item span {
    color: #0f172a !important;
}

/* 21st.dev Pricing Plans in Light Mode */
[data-theme="light"] .osmani-pricing-card,
.theme-light .osmani-pricing-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .pricing-plan-name,
.theme-light .pricing-plan-name {
    color: #0f172a !important;
}
[data-theme="light"] .pricing-plan-desc,
.theme-light .pricing-plan-desc {
    color: #64748b !important;
}
[data-theme="light"] .pricing-amount,
.theme-light .pricing-amount {
    color: #0f172a !important;
}
[data-theme="light"] .pricing-features-list li,
.theme-light .pricing-features-list li {
    color: #334155 !important;
}
[data-theme="light"] .pricing-period-switch-wrap,
.theme-light .pricing-period-switch-wrap {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

/* 21st.dev Modern Testimonials in Light Mode */
[data-theme="light"] .osmani-testimonial-section,
.theme-light .osmani-testimonial-section {
    background: #f8fafc !important;
}
[data-theme="light"] .modern-testimonial-card,
.theme-light .modern-testimonial-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .testimonial-name,
.theme-light .testimonial-name {
    color: #0f172a !important;
}
[data-theme="light"] .testimonial-role,
.theme-light .testimonial-role {
    color: #64748b !important;
}
[data-theme="light"] .testimonial-quote-text,
.theme-light .testimonial-quote-text {
    color: #1e293b !important;
}

/* 21st.dev 3D Curved Showcase in Light Mode */
[data-theme="light"] .showcase-3d-card,
.theme-light .showcase-3d-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .showcase-3d-card h3,
.theme-light .showcase-3d-card h3 {
    color: #0f172a !important;
}
[data-theme="light"] .showcase-3d-card p,
.theme-light .showcase-3d-card p {
    color: #475569 !important;
}

/* 21st.dev Bespoke Footer in Light Mode */
[data-theme="light"] .osmani-bespoke-footer,
.theme-light .osmani-bespoke-footer {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
    color: #0f172a !important;
    border-top: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .osmani-bespoke-footer.osmani-bg-retro-grid::before,
.theme-light .osmani-bespoke-footer.osmani-bg-retro-grid::before {
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
}
[data-theme="light"] .footer-newsletter-box,
.theme-light .footer-newsletter-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .newsletter-title,
.theme-light .newsletter-title {
    color: #0f172a !important;
}
[data-theme="light"] .newsletter-desc,
.theme-light .newsletter-desc {
    color: #475569 !important;
    font-weight: 600 !important;
}
[data-theme="light"] .newsletter-input,
.theme-light .newsletter-input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .footer-brand-title,
.theme-light .footer-brand-title {
    color: #0f172a !important;
    font-weight: 900 !important;
}
[data-theme="light"] .footer-brand-desc,
.theme-light .footer-brand-desc {
    color: #334155 !important;
    font-weight: 600 !important;
}
[data-theme="light"] .footer-col-heading,
.theme-light .footer-col-heading {
    color: #0f172a !important;
    font-weight: 900 !important;
}
[data-theme="light"] .footer-links-list a,
.theme-light .footer-links-list a {
    color: #1e293b !important;
    font-weight: 800 !important;
}
[data-theme="light"] .footer-links-list a:hover,
.theme-light .footer-links-list a:hover {
    color: var(--osmani-accent, #2563eb) !important;
}
[data-theme="light"] .footer-trust-badge,
.theme-light .footer-trust-badge {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .footer-social-btn,
.theme-light .footer-social-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
[data-theme="light"] .footer-contact-item,
.theme-light .footer-contact-item {
    color: #334155 !important;
}
[data-theme="light"] .footer-contact-val,
.theme-light .footer-contact-val {
    color: #0f172a !important;
    font-weight: 800 !important;
}
[data-theme="light"] .footer-address-item,
.theme-light .footer-address-item {
    color: #64748b !important;
}
[data-theme="light"] .footer-copyright,
.theme-light .footer-copyright {
    color: #475569 !important;
    font-weight: 600 !important;
}
[data-theme="light"] .footer-bottom-bar,
.theme-light .footer-bottom-bar {
    border-top: 1px solid #cbd5e1 !important;
}

/* Bestsellers Cards in Light Mode */
[data-theme="light"] .demo-bestseller-card,
.theme-light .demo-bestseller-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .bestseller-card-title a,
.theme-light .bestseller-card-title a {
    color: #0f172a !important;
}
[data-theme="light"] .bestseller-card-price,
.theme-light .bestseller-card-price {
    color: #0f172a !important;
}
[data-theme="light"] .bestseller-card-footer,
.theme-light .bestseller-card-footer {
    border-top: 1px dashed #e2e8f0 !important;
}

/* Blog Cards in Light Mode */
[data-theme="light"] .demo-blog-card,
.theme-light .demo-blog-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .blog-meta-row,
.theme-light .blog-meta-row {
    color: #64748b !important;
}
[data-theme="light"] .blog-card-title a,
.theme-light .blog-card-title a {
    color: #0f172a !important;
}
[data-theme="light"] .blog-card-desc,
.theme-light .blog-card-desc {
    color: #475569 !important;
}
[data-theme="light"] .blog-card-author,
.theme-light .blog-card-author {
    color: #334155 !important;
}
[data-theme="light"] .blog-card-footer,
.theme-light .blog-card-footer {
    border-top: 1px solid #e2e8f0 !important;
}

/* Course & Clinical Design Cards in Light Mode */
[data-theme="light"] .course-design-card,
.theme-light .course-design-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .course-card-title,
.theme-light .course-card-title {
    color: #0f172a !important;
}
[data-theme="light"] .course-card-desc,
.theme-light .course-card-desc {
    color: #475569 !important;
}
[data-theme="light"] .course-author-name,
.theme-light .course-author-name {
    color: #0f172a !important;
}
[data-theme="light"] .course-author-sub,
.theme-light .course-author-sub {
    color: #64748b !important;
}
[data-theme="light"] .course-badge-pill,
.theme-light .course-badge-pill {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
[data-theme="light"] .course-progress-text span,
.theme-light .course-progress-text span {
    color: #64748b !important;
}
[data-theme="light"] .course-progress-track,
.theme-light .course-progress-track {
    background: #e2e8f0 !important;
}
[data-theme="light"] .course-card-footer,
.theme-light .course-card-footer {
    border-top: 1px solid #e2e8f0 !important;
}

/* Corridor Spotlight Card in Light Mode */
[data-theme="light"] .osmani-corridor-spotlight-card,
.theme-light .osmani-corridor-spotlight-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .spotlight-title,
.theme-light .spotlight-title {
    color: #0f172a !important;
}
[data-theme="light"] .spotlight-desc,
.theme-light .spotlight-desc {
    color: #334155 !important;
}

/* Fan Deck Details Card in Light Mode */
[data-theme="light"] .osmani-fan-details-card,
.theme-light .osmani-fan-details-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .fan-detail-title,
.theme-light .fan-detail-title {
    color: #0f172a !important;
}
[data-theme="light"] .fan-detail-desc,
.theme-light .fan-detail-desc {
    color: #334155 !important;
}

/* Education 50/50 Stage in Light Mode */
[data-theme="light"] .edu-webinar-split-grid,
.theme-light .edu-webinar-split-grid {
    background: linear-gradient(135deg, #ede9fe 0%, #f1f5f9 100%) !important;
    border: 1px solid #c4b5fd !important;
}
[data-theme="light"] .edu-webinar-headline,
.theme-light .edu-webinar-headline {
    color: #1e1b4b !important;
}
[data-theme="light"] .edu-webinar-lead,
.theme-light .edu-webinar-lead {
    color: #5b21b6 !important;
}
[data-theme="light"] .edu-webinar-topic-item,
.theme-light .edu-webinar-topic-item {
    color: #1e293b !important;
}
[data-theme="light"] .edu-webinar-form-box,
.theme-light .edu-webinar-form-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .edu-webinar-input,
.theme-light .edu-webinar-input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .edu-webinar-stage-card,
.theme-light .edu-webinar-stage-card {
    background: #ffffff !important;
    border: 1px solid #c4b5fd !important;
    box-shadow: 0 20px 45px rgba(124, 58, 237, 0.12) !important;
}
[data-theme="light"] .edu-keynote-banner-pill,
.theme-light .edu-keynote-banner-pill {
    background: #f5f3ff !important;
    border: 1px solid #ddd6fe !important;
}
[data-theme="light"] .edu-keynote-banner-pill h5,
.theme-light .edu-keynote-banner-pill h5 {
    color: #1e1b4b !important;
}
/* Education Roadmap in Light Mode */
[data-theme="light"] .edu-roadmap-card,
.theme-light .edu-roadmap-card {
    background: #ffffff !important;
    border: 1px solid #ddd6fe !important;
    box-shadow: 0 15px 45px rgba(124, 58, 237, 0.08) !important;
}
[data-theme="light"] .edu-phase-nav-item,
.theme-light .edu-phase-nav-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .edu-phase-nav-item.active,
.theme-light .edu-phase-nav-item.active {
    background: #f5f3ff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.12) !important;
}
[data-theme="light"] .edu-phase-tab-title,
.theme-light .edu-phase-tab-title {
    color: #1e1b4b !important;
}
[data-theme="light"] .edu-phase-title,
.theme-light .edu-phase-title {
    color: #1e1b4b !important;
}
[data-theme="light"] .edu-phase-desc,
.theme-light .edu-phase-desc {
    color: #334155 !important;
}
[data-theme="light"] .edu-phase-check,
.theme-light .edu-phase-check {
    color: #1e293b !important;
}

/* Digital Configurator in Light Mode */
[data-theme="light"] .digital-config-card,
.theme-light .digital-config-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .digital-config-title,
.theme-light .digital-config-title {
    color: #0f172a !important;
}
[data-theme="light"] .digital-config-desc,
.theme-light .digital-config-desc {
    color: #475569 !important;
}
[data-theme="light"] .digital-config-label,
.theme-light .digital-config-label {
    color: #1e293b !important;
}
[data-theme="light"] .digital-config-subtext,
.theme-light .digital-config-subtext {
    color: #64748b !important;
}
[data-theme="light"] .config-pill,
.theme-light .config-pill {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
[data-theme="light"] .config-pill.active,
.theme-light .config-pill.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* Tourism Day Nav Tabs in Light Mode */
[data-theme="light"] .tourism-day-nav-tabs,
.theme-light .tourism-day-nav-tabs {
    scrollbar-color: rgba(2, 132, 199, 0.4) #f1f5f9;
}
[data-theme="light"] .tourism-day-nav-tabs::-webkit-scrollbar-track,
.theme-light .tourism-day-nav-tabs::-webkit-scrollbar-track {
    background: #f1f5f9;
}
[data-theme="light"] .tourism-day-nav-tabs::-webkit-scrollbar-thumb,
.theme-light .tourism-day-nav-tabs::-webkit-scrollbar-thumb {
    background: #0284c7;
}
[data-theme="light"] .tourism-day-tab-btn,
.theme-light .tourism-day-tab-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0369a1 !important;
}
[data-theme="light"] .tourism-day-tab-btn.active,
.theme-light .tourism-day-tab-btn.active {
    background: linear-gradient(135deg, #0284c7, #06b6d4) !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}
[data-theme="light"] .tourism-itinerary-pane,
.theme-light .tourism-itinerary-pane {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    box-shadow: 0 15px 40px rgba(2, 132, 199, 0.08) !important;
}
[data-theme="light"] .tourism-itinerary-pane h3,
.theme-light .tourism-itinerary-pane h3 {
    color: #0c4a6e !important;
}
[data-theme="light"] .tourism-schedule-node div,
.theme-light .tourism-schedule-node div {
    color: #334155 !important;
}
[data-theme="light"] .tourism-schedule-node strong,
.theme-light .tourism-schedule-node strong {
    color: #0f172a !important;
}

/* Phase Helpers */
.edu-text-purple { color: #7c3aed !important; }
.edu-text-blue { color: #3b82f6 !important; }
.edu-text-green { color: #10b981 !important; }
.edu-text-orange { color: #f59e0b !important; }

[data-theme="light"] .edu-salary-card,
.theme-light .edu-salary-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

/* Medical Doctor Roster in Light Mode */
[data-theme="light"] .med-doctor-roster-card,
.theme-light .med-doctor-roster-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .med-doc-name,
.theme-light .med-doc-name {
    color: #0f172a !important;
}
[data-theme="light"] .med-doc-schedule-box,
.theme-light .med-doc-schedule-box {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}

/* Fashion 50/50 Stages in Light Mode */
[data-theme="light"] .fashion-split-card-stage,
.theme-light .fashion-split-card-stage {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .fashion-stage-title,
.theme-light .fashion-stage-title {
    color: #18181b !important;
}
[data-theme="light"] .fashion-stage-desc,
.theme-light .fashion-stage-desc {
    color: #52525b !important;
}
[data-theme="light"] .fashion-input-group,
.theme-light .fashion-input-group {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}
[data-theme="light"] .fashion-result-box,
.theme-light .fashion-result-box {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}
[data-theme="light"] .fashion-mannequin-card,
.theme-light .fashion-mannequin-card {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}
[data-theme="light"] .fashion-floating-tailor-tag,
.theme-light .fashion-floating-tailor-tag {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .fashion-floating-tailor-tag h5,
.theme-light .fashion-floating-tailor-tag h5 {
    color: #18181b !important;
}

/* Tourism Demo in Light Mode */
[data-theme="light"] .tourism-dest-card,
.theme-light .tourism-dest-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .tourism-dest-card h3,
.theme-light .tourism-dest-card h3 {
    color: #0c4a6e !important;
}
[data-theme="light"] .tourism-dest-card span,
.theme-light .tourism-dest-card span {
    color: #475569 !important;
}
[data-theme="light"] .rubberpoint-stage-box,
.theme-light .rubberpoint-stage-box {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%) !important;
    border: 1px solid #bae6fd !important;
    color: #0c4a6e !important;
}
[data-theme="light"] .rubberpoint-stage-box h2,
.theme-light .rubberpoint-stage-box h2 {
    color: #0c4a6e !important;
}
[data-theme="light"] .rubberpoint-stage-box p,
.theme-light .rubberpoint-stage-box p {
    color: #334155 !important;
}
[data-theme="light"] .rubberpoint-amenities-list,
.theme-light .rubberpoint-amenities-list {
    color: #0f172a !important;
}
[data-theme="light"] .rubberpoint-thumb-item,
.theme-light .rubberpoint-thumb-item {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0c4a6e !important;
}
[data-theme="light"] .rubberpoint-thumb-item span,
.theme-light .rubberpoint-thumb-item span {
    color: #0c4a6e !important;
}

/* Construction Demo in Light Mode */
[data-theme="light"] .osmani-demo-construction .rubberpoint-stage-box,
.theme-light .osmani-demo-construction .rubberpoint-stage-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
}
[data-theme="light"] .osmani-demo-construction .rubberpoint-stage-box h2,
.theme-light .osmani-demo-construction .rubberpoint-stage-box h2 {
    color: #451a03 !important;
}
[data-theme="light"] .osmani-demo-construction .rubberpoint-stage-box p,
.theme-light .osmani-demo-construction .rubberpoint-stage-box p {
    color: #78350f !important;
}
[data-theme="light"] .osmani-demo-construction .rubberpoint-thumb-item,
.theme-light .osmani-demo-construction .rubberpoint-thumb-item {
    background: #ffffff !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
}
[data-theme="light"] .osmani-demo-construction .rubberpoint-thumb-item span,
.theme-light .osmani-demo-construction .rubberpoint-thumb-item span {
    color: #78350f !important;
}

/* Construction Estimator, EPC & Site in Light Mode */
[data-theme="light"] .const-estimator-card,
.theme-light .const-estimator-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.12) !important;
    color: #451a03 !important;
}
[data-theme="light"] .const-card-headline,
.theme-light .const-card-headline {
    color: #451a03 !important;
}
[data-theme="light"] .const-card-subtext,
.theme-light .const-card-subtext {
    color: #78350f !important;
}
[data-theme="light"] .const-form-label,
.theme-light .const-form-label {
    color: #78350f !important;
}
[data-theme="light"] .const-select-input,
.theme-light .const-select-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .const-slider-header,
.theme-light .const-slider-header {
    color: #78350f !important;
}
[data-theme="light"] .const-result-box,
.theme-light .const-result-box {
    background: #ffffff !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .const-result-label,
.theme-light .const-result-label {
    color: #78350f !important;
}
[data-theme="light"] .const-stat-lbl,
.theme-light .const-stat-lbl {
    color: #92400e !important;
}
[data-theme="light"] .const-stat-val,
.theme-light .const-stat-val {
    color: #451a03 !important;
}
[data-theme="light"] .const-epc-step,
.theme-light .const-epc-step {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .const-epc-title,
.theme-light .const-epc-title {
    color: #0f172a !important;
}
[data-theme="light"] .const-epc-desc,
.theme-light .const-epc-desc {
    color: #475569 !important;
}
[data-theme="light"] .const-epc-feature,
.theme-light .const-epc-feature {
    color: #1e293b !important;
}
[data-theme="light"] .const-epc-tag-pill,
.theme-light .const-epc-tag-pill {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
[data-theme="light"] .const-site-card,
.theme-light .const-site-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .const-site-title,
.theme-light .const-site-title {
    color: #0f172a !important;
}
[data-theme="light"] .const-site-desc,
.theme-light .const-site-desc {
    color: #475569 !important;
}
[data-theme="light"] .const-progress-header,
.theme-light .const-progress-header {
    color: #1e293b !important;
}
[data-theme="light"] .const-progress-track,
.theme-light .const-progress-track {
    background: #e2e8f0 !important;
}
[data-theme="light"] .const-site-subcard,
.theme-light .const-site-subcard {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .const-site-subtitle,
.theme-light .const-site-subtitle {
    color: #0f172a !important;
}
[data-theme="light"] .const-site-subtext,
.theme-light .const-site-subtext {
    color: #475569 !important;
}

/* Digital Warranty & Benchmark in Light Mode */
[data-theme="light"] .digital-warranty-card,
.theme-light .digital-warranty-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
}
[data-theme="light"] .digital-warranty-title,
.theme-light .digital-warranty-title {
    color: #0f172a !important;
}
[data-theme="light"] .digital-warranty-desc,
.theme-light .digital-warranty-desc {
    color: #475569 !important;
}
[data-theme="light"] .digital-warranty-input,
.theme-light .digital-warranty-input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .digital-warranty-subcard,
.theme-light .digital-warranty-subcard {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .digital-warranty-subtitle,
.theme-light .digital-warranty-subtitle {
    color: #0f172a !important;
}
[data-theme="light"] .digital-warranty-subdesc,
.theme-light .digital-warranty-subdesc {
    color: #475569 !important;
}
[data-theme="light"] .bench-stat-row,
.theme-light .bench-stat-row {
    color: #1e293b !important;
    border-top: 1px dashed #cbd5e1 !important;
}
[data-theme="light"] .bench-stat-lbl,
.theme-light .bench-stat-lbl {
    color: #334155 !important;
}
[data-theme="light"] .bench-sub-lbl,
.theme-light .bench-sub-lbl {
    color: #475569 !important;
}
[data-theme="light"] .bench-device-title,
.theme-light .bench-device-title {
    color: #0f172a !important;
}

/* ==========================================================================
   18. DARK MODE HIGH-CONTRAST OVERRIDES
   ========================================================================== */
[data-theme="dark"], .theme-dark {
    background-color: #080c14 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] body,
.theme-dark body {
    background-color: #080c14 !important;
    color: #f1f5f9 !important;
}

/* Header in Dark Mode */
[data-theme="dark"] .header,
.theme-dark .header {
    background: rgba(8, 12, 20, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .header-topbar,
.theme-dark .header-topbar {
    background: #05080f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .nav__link,
.theme-dark .nav__link {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .nav__link:hover,
.theme-dark .nav__link:hover {
    color: #38bdf8 !important;
}
[data-theme="dark"] .nav__icon,
.theme-dark .nav__icon {
    color: #cbd5e1 !important;
}

/* Dark Mode Sections */
[data-theme="dark"] .osmani-demo-section,
.theme-dark .osmani-demo-section {
    background-color: #080c14 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .osmani-demo-section.bg-alt,
.theme-dark .osmani-demo-section.bg-alt {
    background-color: #0a0e17 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .osmani-section-title,
.theme-dark .osmani-section-title {
    color: #ffffff !important;
}
[data-theme="dark"] .osmani-section-subtitle,
.theme-dark .osmani-section-subtitle {
    color: #94a3b8 !important;
}

/* 21st.dev Pricing in Dark Mode */
[data-theme="dark"] .osmani-pricing-card,
.theme-dark .osmani-pricing-card {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] .pricing-plan-name,
.theme-dark .pricing-plan-name {
    color: #ffffff !important;
}
[data-theme="dark"] .pricing-plan-desc,
.theme-dark .pricing-plan-desc {
    color: #94a3b8 !important;
}
[data-theme="dark"] .pricing-amount,
.theme-dark .pricing-amount {
    color: #ffffff !important;
}
[data-theme="dark"] .pricing-features-list li,
.theme-dark .pricing-features-list li {
    color: #cbd5e1 !important;
}

/* 21st.dev Course Cards in Dark Mode */
[data-theme="dark"] .osmani-course-design-card,
.theme-dark .osmani-course-design-card {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .course-card-title,
.theme-dark .course-card-title {
    color: #ffffff !important;
}
[data-theme="dark"] .course-card-desc,
.theme-dark .course-card-desc {
    color: #94a3b8 !important;
}

/* Medical Doctor Roster in Dark Mode */
[data-theme="dark"] .med-doctor-roster-card,
.theme-dark .med-doctor-roster-card {
    background: #06231c !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
[data-theme="dark"] .med-doc-name,
.theme-dark .med-doc-name {
    color: #ffffff !important;
}
[data-theme="dark"] .med-doc-schedule-box,
.theme-dark .med-doc-schedule-box {
    background: #0a3429 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

/* Fashion in Dark Mode */
[data-theme="dark"] .fashion-split-card-stage,
.theme-dark .fashion-split-card-stage {
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .fashion-stage-title,
.theme-dark .fashion-stage-title {
    color: #ffffff !important;
}
[data-theme="dark"] .fashion-stage-desc,
.theme-dark .fashion-stage-desc {
    color: #a1a1aa !important;
}
[data-theme="dark"] .fashion-input-group,
.theme-dark .fashion-input-group {
    background: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .fashion-result-box,
.theme-dark .fashion-result-box {
    background: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .fashion-mannequin-card,
.theme-dark .fashion-mannequin-card {
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .fashion-floating-tailor-tag,
.theme-dark .fashion-floating-tailor-tag {
    background: #27272a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .fashion-floating-tailor-tag h5,
.theme-dark .fashion-floating-tailor-tag h5 {
    color: #ffffff !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .edu-webinar-split-grid {
        grid-template-columns: 1fr;
    }
    .med-doctor-roster-grid {
        grid-template-columns: 1fr;
    }
    .fashion-split-card-stage {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .edu-webinar-inline-form {
        grid-template-columns: 1fr;
    }
    .edu-webinar-inline-form button {
        grid-column: span 1;
    }
    .fashion-inputs-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   19. UNIVERSAL HEADER, CONTRAST & STORIES ADAPTATION ACROSS ALL DEMOS
   ========================================================================== */

/* Base Header */
.header {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- LIGHT MODE RULES (Default & [data-theme="light"] & .theme-light) --- */
.header,
[data-theme="light"] .header,
.theme-light .header,
[data-theme="light"] .header[class*="header--"],
.theme-light .header[class*="header--"] {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Nav Link in Light Mode */
.nav__link,
.header .nav__link,
[data-theme="light"] .nav__link,
.theme-light .nav__link,
[data-theme="light"] .header .nav__link,
.theme-light .header .nav__link,
[data-theme="light"] .header[class*="header--"] .nav__link,
.theme-light .header[class*="header--"] .nav__link,
[data-theme="light"] .nav__menu .nav__link,
.theme-light .nav__menu .nav__link {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 0.94rem !important;
    text-decoration: none !important;
    padding: 7px 12px;
    border-radius: 10px;
    transition: all 0.25s ease;
    display: inline-block;
}

.nav__link:hover,
[data-theme="light"] .nav__link:hover,
.theme-light .nav__link:hover,
[data-theme="light"] .header .nav__link:hover,
.theme-light .header .nav__link:hover,
[data-theme="light"] .header[class*="header--"] .nav__link:hover,
.theme-light .header[class*="header--"] .nav__link:hover {
    color: var(--osmani-accent, #2563eb) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    transform: translateY(-1px);
}

/* Topbars in Light Mode */
.header-topbar,
[data-theme="light"] .header-topbar,
.theme-light .header-topbar {
    background: #f8fafc;
    color: #334155;
    font-size: 0.85rem;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
[data-theme="light"] .header-topbar--digital, .theme-light .header-topbar--digital { background: #eff6ff !important; color: #1d4ed8 !important; border-bottom: 1px solid #dbeafe !important; }
[data-theme="light"] .header-topbar--corporate, .theme-light .header-topbar--corporate { background: #f0f9ff !important; color: #0284c7 !important; border-bottom: 1px solid #e0f2fe !important; }
[data-theme="light"] .header-topbar--education, .theme-light .header-topbar--education { background: #f5f3ff !important; color: #6d28d9 !important; border-bottom: 1px solid #ede9fe !important; }
[data-theme="light"] .header-topbar--medical, .theme-light .header-topbar--medical { background: #ecfdf5 !important; color: #047857 !important; border-bottom: 1px solid #d1fae5 !important; }
[data-theme="light"] .header-topbar--fashion, .theme-light .header-topbar--fashion { background: #fff1f2 !important; color: #be123c !important; border-bottom: 1px solid #ffe4e6 !important; }
[data-theme="light"] .header-topbar--construction, .theme-light .header-topbar--construction { background: #fefce8 !important; color: #b45309 !important; border-bottom: 1px solid #fef08a !important; }
[data-theme="light"] .header-topbar--tourism, .theme-light .header-topbar--tourism { background: #f0f9ff !important; color: #0284c7 !important; border-bottom: 1px solid #e0f2fe !important; }

/* Digital Search Bar in Light Mode */
[data-theme="light"] .digital-search-bar,
.theme-light .digital-search-bar {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] .digital-search-bar input,
.theme-light .digital-search-bar input {
    color: #0f172a !important;
}
[data-theme="light"] .digital-search-bar select,
.theme-light .digital-search-bar select {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
}

/* Mobile Nav in Light Mode */
[data-theme="light"] .nav__menu,
.theme-light .nav__menu {
    background: #ffffff !important;
    color: #0f172a !important;
}
[data-theme="light"] .nav__title,
.theme-light .nav__title {
    color: #0f172a !important;
}
[data-theme="light"] .mobile-action-text,
.theme-light .mobile-action-text {
    color: #334155 !important;
}

/* --- DARK MODE RULES ([data-theme="dark"] & .theme-dark) --- */
[data-theme="dark"] .header,
.theme-dark .header,
[data-theme="dark"] .header[class*="header--"],
.theme-dark .header[class*="header--"] {
    background: rgba(8, 12, 22, 0.96) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Nav Link in Dark Mode */
[data-theme="dark"] .nav__link,
.theme-dark .nav__link,
[data-theme="dark"] .header .nav__link,
.theme-dark .header .nav__link,
[data-theme="dark"] .header[class*="header--"] .nav__link,
.theme-dark .header[class*="header--"] .nav__link,
[data-theme="dark"] .nav__menu .nav__link,
.theme-dark .nav__menu .nav__link {
    color: #f8fafc !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .nav__link:hover,
.theme-dark .nav__link:hover,
[data-theme="dark"] .header .nav__link:hover,
.theme-dark .header .nav__link:hover,
[data-theme="dark"] .header[class*="header--"] .nav__link:hover,
.theme-dark .header[class*="header--"] .nav__link:hover {
    color: #38bdf8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

/* Topbars in Dark Mode */
[data-theme="dark"] .header-topbar,
.theme-dark .header-topbar {
    background: #05080f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .header-topbar--digital, .theme-dark .header-topbar--digital { background: #070a12 !important; color: #94a3b8 !important; }
[data-theme="dark"] .header-topbar--corporate, .theme-dark .header-topbar--corporate { background: #071728 !important; color: #94a3b8 !important; }
[data-theme="dark"] .header-topbar--education, .theme-dark .header-topbar--education { background: #0f0d26 !important; color: #c4b5fd !important; }
[data-theme="dark"] .header-topbar--medical, .theme-dark .header-topbar--medical { background: #04291f !important; color: #a7f3d0 !important; }
[data-theme="dark"] .header-topbar--fashion, .theme-dark .header-topbar--fashion { background: #09090b !important; color: #fecdd3 !important; }
[data-theme="dark"] .header-topbar--construction, .theme-dark .header-topbar--construction { background: #0c0a09 !important; color: #fde68a !important; }
[data-theme="dark"] .header-topbar--tourism, .theme-dark .header-topbar--tourism { background: #051e2e !important; color: #bae6fd !important; }

/* Digital Search Bar in Dark Mode */
[data-theme="dark"] .digital-search-bar,
.theme-dark .digital-search-bar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] .digital-search-bar input,
.theme-dark .digital-search-bar input {
    color: #fff !important;
}
[data-theme="dark"] .digital-search-bar select,
.theme-dark .digital-search-bar select {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Nav in Dark Mode */
[data-theme="dark"] .nav__menu,
.theme-dark .nav__menu {
    background: #090d16 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .nav__title,
.theme-dark .nav__title {
    color: #ffffff !important;
}
[data-theme="dark"] .mobile-action-text,
.theme-dark .mobile-action-text {
    color: #cbd5e1 !important;
}

/* Stories section seamless blending */
.osmani-demo-stories-wrapper {
    width: 100%;
    padding: 25px 0 15px 0;
    position: relative;
    background: transparent;
}
.osmani-demo-stories-wrapper .story-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
.story-item {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story-item:hover {
    transform: translateY(-4px) scale(1.05);
}
.story-ring {
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--osmani-accent, #2563eb), #38bdf8, #f59e0b);
    display: inline-block;
}
.story-title {
    font-size: 0.84rem;
    font-weight: 800;
    margin-top: 8px;
    text-align: center;
    color: inherit;
}
[data-theme="light"] .story-title,
.theme-light .story-title {
    color: #1e293b !important;
}
[data-theme="dark"] .story-title,
.theme-dark .story-title {
    color: #f1f5f9 !important;
}