/* ======================================================
       HOME PAGE — UNIFIED BACKGROUND
       Single deep dark base, animated elements run full-page
    ====================================================== */

    /* Page wrapper holding the animated canvas */
    .home-page {
        position: relative;
        background: #0a0c14;
        overflow: hidden;
    }

    /* Fixed canvas draws particles behind everything */
    #home-canvas {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        opacity: .55;
    }

    /* Floating glow blobs — purely CSS, no JS needed */
    .home-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0;
    }

    .home-blob-1 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(117,79,254,.18) 0%, transparent 70%);
        top: -100px;
        inset-inline-start: -100px;
        animation: blobDrift1 18s ease-in-out infinite alternate;
    }

    .home-blob-2 {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(34,211,238,.10) 0%, transparent 70%);
        top: 40vh;
        inset-inline-end: -80px;
        animation: blobDrift2 22s ease-in-out infinite alternate;
    }

    .home-blob-3 {
        width: 350px;
        height: 350px;
        background: radial-gradient(circle, rgba(168,85,247,.12) 0%, transparent 70%);
        bottom: 10vh;
        inset-inline-start: 20%;
        animation: blobDrift3 26s ease-in-out infinite alternate;
    }

    @keyframes blobDrift1 {
        0%   { transform: translate(0, 0) scale(1); }
        50%  { transform: translate(60px, 80px) scale(1.1); }
        100% { transform: translate(30px, 40px) scale(.95); }
    }

    @keyframes blobDrift2 {
        0%   { transform: translate(0, 0) scale(1); }
        50%  { transform: translate(-50px, 60px) scale(1.08); }
        100% { transform: translate(20px, -40px) scale(.92); }
    }

    @keyframes blobDrift3 {
        0%   { transform: translate(0, 0) scale(1); }
        50%  { transform: translate(40px, -60px) scale(1.05); }
        100% { transform: translate(-30px, 30px) scale(.97); }
    }

    /* All sections sit above blobs + canvas */
    .home-page > section, .home-page > .no-data-state { position: relative; z-index: 1; }
    .home-page > canvas { position: fixed; z-index: 0; }
    .home-page > .home-blob { position: absolute; z-index: 0; }

    /* Make ALL section backgrounds transparent — page bg does the work */
    .hero-modern,
    .categories-section,
    .courses-section,
    .universities-section,
    .why-us-section {
        background: transparent !important;
    }

    /* Remove individual section ::before/::after dot patterns — canvas replaces them */
    .hero-modern::before,
    .categories-section::before,
    .categories-section::after,
    .universities-section::before,
    .universities-section::after,
    .why-us-section::before,
    .why-us-section::after {
        display: none !important;
    }

    /* Subtle divider between sections */
    .home-section + .home-section {
        border-top: 1px solid rgba(255,255,255,.035);
    }

    /* ---------- Section base ---------- */
    .home-section { padding: 90px 0; }
    .home-section-sm { padding: 60px 0; }

    /* ---------- Section label chip ---------- */
    .section-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        border-radius: 99px;
        background: color-mix(in srgb, var(--accent-color), transparent 88%);
        border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
        font-size: 12.5px;
        font-weight: 600;
        color: #c4b5fd;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 16px;
    }

    /* ---------- Section heading ---------- */
    .home-heading {
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
        font-weight: 800;
        line-height: 1.2;
        color: #f1f5f9;
        margin-bottom: 14px;
    }

    .home-subtext {
        font-size: 16px;
        color: #64748b;
        max-width: 520px;
        line-height: 1.7;
    }


    /* ======================================================
       HERO — Fullscreen Swiper / Single
    ====================================================== */
    .hero-modern {
        position: relative;
        width: 100%;
        min-height: 60vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        background: #0a0c14;
    }

    /* Starfield dots shared pattern */
    .hero-modern::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px),
            radial-gradient(circle, rgba(117,79,254,.05) 1px, transparent 1px);
        background-size: 60px 60px, 90px 90px;
        background-position: 0 0, 30px 30px;
        pointer-events: none;
    }

    .hero-modern .hero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .hero-modern .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(10,12,20,.92) 0%, rgba(10,12,20,.60) 60%, rgba(10,12,20,.30) 100%);
        z-index: 2;
    }

    .hero-modern .hero-content {
        position: relative;
        z-index: 3;
        max-width: 660px;
    }

    html[dir="rtl"] .hero-modern .hero-content {
        margin-right: 0;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        background: rgba(255,255,255,.08);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 99px;
        font-size: 13px;
        color: rgba(255,255,255,.85);
        margin-bottom: 22px;
    }

    .hero-badge .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 0 3px rgba(34,211,238,.25);
        animation: pulseDot 2s infinite;
        flex-shrink: 0;
    }

    @keyframes pulseDot {
        0%, 100% { box-shadow: 0 0 0 3px rgba(34,211,238,.25); }
        50%       { box-shadow: 0 0 0 6px rgba(34,211,238,.10); }
    }

    .hero-title {
        font-size: clamp(2.2rem, 5vw, 3.5rem);
        font-weight: 900;
        line-height: 1.15;
        color: #fff;
        margin-bottom: 18px;
    }

    .hero-title .accent-word {
        background: linear-gradient(90deg, var(--accent-color), #22d3ee);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-desc {
        font-size: 17px;
        color: rgba(255,255,255,.72);
        line-height: 1.75;
        margin-bottom: 32px;
    }

    .hero-cta-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .btn-hero-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 30px;
        background: var(--accent-color);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        border-radius: 12px;
        border: none;
        text-decoration: none;
        transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
        box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color), transparent 55%);
    }

    .btn-hero-primary:hover {
        background: color-mix(in srgb, var(--accent-color), #000 12%);
        transform: translateY(-2px);
        box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color), transparent 45%);
        color: #fff;
    }

    .btn-hero-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 13px 28px;
        background: rgba(255,255,255,.07);
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.18);
        text-decoration: none;
        backdrop-filter: blur(8px);
        transition: background 0.25s, border-color 0.25s, transform 0.25s;
    }

    .btn-hero-outline:hover {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.35);
        color: #fff;
        transform: translateY(-2px);
    }

    /* Hero stat pills */
    .hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 42px;
        padding-top: 32px;
        border-top: 1px solid rgba(255,255,255,.1);
    }

    .hero-stat-item .stat-value {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        line-height: 1;
    }

    .hero-stat-item .stat-label {
        font-size: 13px;
        color: rgba(255,255,255,.55);
        margin-top: 3px;
    }

    .hero-stat-divider {
        width: 1px;
        height: 36px;
        background: rgba(255,255,255,.12);
        align-self: center;
    }

    /* Swiper pagination override */
    .hero-swiper-pagination {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        gap: 8px;
    }

    .hero-swiper-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: rgba(255,255,255,.4);
        transition: width .35s, background .35s;
        cursor: pointer;
    }

    .hero-swiper-pagination .swiper-pagination-bullet-active {
        width: 24px;
        background: var(--accent-color);
    }

    /* ======================================================
       CATEGORIES SECTION
    ====================================================== */
    .categories-section {
        background: #0a0c14;
        position: relative;
        overflow: hidden;
    }

    .categories-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px),
            radial-gradient(circle, rgba(117,79,254,.05) 1px, transparent 1px);
        background-size: 60px 60px, 90px 90px;
        background-position: 0 0, 30px 30px;
        pointer-events: none;
        z-index: 0;
    }

    .categories-section::after {
        content: '';
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(117,79,254,.1) 0%, transparent 70%);
        bottom: -80px;
        inset-inline-end: -60px;
        pointer-events: none;
        z-index: 0;
    }

    .categories-section .container {
        position: relative;
        z-index: 1;
    }

    .category-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 22px;
        border-radius: 16px;
        background: #161b27;
        border: 1px solid rgba(255,255,255,.07);
        text-decoration: none;
        transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
        cursor: default;
    }

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0,0,0,.4);
        border-color: rgba(117,79,254,.4);
    }

    .category-icon-wrap {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 20px;
        background: color-mix(in srgb, var(--accent-color), transparent 88%);
        color: var(--accent-color);
        transition: background 0.25s;
    }

    .category-card:hover .category-icon-wrap {
        background: color-mix(in srgb, var(--accent-color), transparent 80%);
    }

    .category-name {
        font-size: 15px;
        font-weight: 600;
        color: #f1f5f9;
        margin: 0;
    }

    /* ======================================================
       COURSES SECTION
    ====================================================== */
    .courses-section {
        background: #111827;
    }

    .course-card-modern {
        background: #1a2035;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.07);
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s, border-color 0.3s;
    }

    .course-card-modern:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 48px rgba(0,0,0,.5);
        border-color: rgba(117,79,254,.3);
    }

    .course-thumb-wrap {
        position: relative;
        overflow: hidden;
    }

    .course-thumb-wrap img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        transition: transform 0.45s ease;
    }

    .course-card-modern:hover .course-thumb-wrap img {
        transform: scale(1.05);
    }

    .course-price-badge {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        padding: 5px 12px;
        border-radius: 99px;
        font-size: 12.5px;
        font-weight: 700;
        background: var(--accent-color);
        color: #fff;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color), transparent 50%);
    }

    .course-category-badge {
        position: absolute;
        bottom: 12px;
        inset-inline-start: 12px;
        padding: 4px 10px;
        border-radius: 99px;
        font-size: 11.5px;
        font-weight: 600;
        background: rgba(0,0,0,.55);
        color: #fff;
        backdrop-filter: blur(6px);
    }

    .course-card-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .course-card-title {
        font-size: 16px;
        font-weight: 700;
        color: #f1f5f9;
        margin-bottom: 8px;
        line-height: 1.4;
        text-decoration: none;
        transition: color 0.2s;
    }

    .course-card-title:hover {
        color: #c4b5fd;
        text-decoration: none;
    }

    .course-card-desc {
        font-size: 13.5px;
        color: #64748b;
        line-height: 1.65;
        flex: 1;
        margin-bottom: 16px;
    }

    .course-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.06);
    }

    .instructor-mini img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(117,79,254,.35);
    }

    .instructor-mini span {
        font-size: 13px;
        font-weight: 500;
        color: #94a3b8;
    }

    .enrollments-count {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: #94a3b8;
    }

    /* ======================================================
       UNIVERSITIES — Infinite Marquee
    ====================================================== */
    .universities-section {
        background: #0a0c14;
        overflow: hidden;
        position: relative;
    }

    .universities-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px),
            radial-gradient(circle, rgba(117,79,254,.05) 1px, transparent 1px);
        background-size: 60px 60px, 90px 90px;
        background-position: 0 0, 30px 30px;
        pointer-events: none;
        z-index: 0;
    }

    .universities-section::after {
        content: '';
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(117,79,254,.1) 0%, transparent 70%);
        top: -60px;
        inset-inline-start: -60px;
        pointer-events: none;
        z-index: 0;
    }

    .universities-section .container,
    .universities-section .uni-marquee-outer {
        position: relative;
        z-index: 1;
    }

    /* Marquee outer clip */
    .uni-marquee-outer {
        position: relative;
        overflow: hidden;
        /* fade edges */
    }

    .uni-marquee-outer::before,
    .uni-marquee-outer::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 120px;
        z-index: 2;
        pointer-events: none;
    }

    .uni-marquee-outer::before {
        inset-inline-start: 0;
        background: linear-gradient(to inline-end, #0d0f14 0%, transparent 100%);
    }

    .uni-marquee-outer::after {
        inset-inline-end: 0;
        background: linear-gradient(to inline-start, #0d0f14 0%, transparent 100%);
    }

    /* Scrolling track */
    .uni-marquee-track {
        display: flex;
        gap: 16px;
        width: max-content;
        animation: uniMarquee 28s linear infinite;
    }

    .uni-marquee-track:hover { animation-play-state: paused; }

    @keyframes uniMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

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

    @keyframes uniMarqueeRTL {
        0%   { transform: translateX(0); }
        100% { transform: translateX(50%); }
    }

    .uni-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        border-radius: 99px;
        background: #161b27;
        border: 1px solid rgba(255,255,255,.08);
        white-space: nowrap;
        font-size: 14.5px;
        font-weight: 600;
        color: #e2e8f0;
        flex-shrink: 0;
        transition: border-color .25s, background .25s, color .25s;
        cursor: default;
        user-select: none;
    }

    .uni-pill:hover {
        border-color: rgba(117,79,254,.45);
        background: rgba(117,79,254,.1);
        color: #c4b5fd;
    }

    .uni-pill i {
        font-size: 15px;
        color: var(--accent-color);
    }

    /* ======================================================
       WHY US — Features Section
    ====================================================== */
    .why-us-section {
        background: #0a0c14;
        position: relative;
        overflow: hidden;
    }

    /* starfield dots */
    .why-us-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px),
            radial-gradient(circle, rgba(117,79,254,.06) 1px, transparent 1px);
        background-size: 60px 60px, 90px 90px;
        background-position: 0 0, 30px 30px;
        pointer-events: none;
    }

    /* glow blobs */
    .why-us-section::after {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(117,79,254,.12) 0%, transparent 70%);
        top: -80px;
        inset-inline-start: -80px;
        pointer-events: none;
    }

    .why-us-inner { position: relative; z-index: 1; }

    /* grid */
    .why-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255,255,255,.04);
    }

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

    .why-card {
        background: #10131e;
        padding: 36px 28px;
        text-align: center;
        border: 1px solid rgba(255,255,255,.04);
        transition: background .3s;
        cursor: default;
        position: relative;
        overflow: hidden;
    }

    .why-card:hover { background: #161b2e; }

    .why-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 0%, rgba(117,79,254,.1) 0%, transparent 60%);
        opacity: 0;
        transition: opacity .4s;
    }

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

    .why-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin: 0 auto 20px;
        transition: transform .3s;
    }

    .why-card:hover .why-icon-wrap { transform: translateY(-4px) scale(1.08); }

    .why-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: #f1f5f9;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .why-card p {
        font-size: 13.5px;
        color: #64748b;
        line-height: 1.7;
        margin: 0;
    }

    /* ======================================================
       NO DATA
    ====================================================== */
    .no-data-state {
        padding: 80px 0;
        text-align: center;
    }

    .no-data-state .no-data-icon {
        font-size: 56px;
        color: #cbd5e1;
        margin-bottom: 16px;
    }

    .no-data-state p {
        color: #94a3b8;
        font-size: 16px;
    }

    /* ======================================================
       Shared swiper nav hidden (we use pagination only)
    ====================================================== */
    .courses-swiper .swiper-pagination-bullet {
        background: #cbd5e1;
        opacity: 1;
    }

    .courses-swiper .swiper-pagination-bullet-active {
        background: var(--accent-color);
        width: 20px;
        border-radius: 99px;
    }