/* =========================================================
   FUTUREVERSE — LEARNING HUB
   course.css
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #635bff;
    --primary-dark: #5046e5;
    --secondary: #7c3aed;

    --blue: #3b82f6;
    --cyan: #06b6d4;

    --text: #111827;
    --text-soft: #64748b;
    --text-light: #94a3b8;

    --white: #ffffff;
    --background: #f7f8fc;
    --surface: #ffffff;
    --surface-soft: #f8faff;

    --border: #e8eaf1;

    --shadow-sm:
        0 4px 18px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 14px 40px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 24px 70px rgba(15, 23, 42, 0.12);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        "Poppins",
        "Inter",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    min-height: 100vh;

    overflow-x: hidden;

}

body.modal-open {
    overflow: hidden;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   LOADER
========================================================= */

.page-loader {

    position: fixed;

    inset: 0;

    z-index: 10000;

    background:
        #ffffff;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 18px;

    transition:
        opacity .4s ease,
        visibility .4s ease;

}

.page-loader.hidden {

    opacity: 0;

    visibility: hidden;

}

.page-loader > span {

    font-size: 13px;

    font-weight: 600;

    color:
        var(--text-soft);

}


.loader-orbit {

    width: 64px;
    height: 64px;

    border-radius: 50%;

    border:
        2px solid rgba(99, 91, 255, .15);

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    animation:
        loaderRotate 2s linear infinite;

}

.loader-orbit::before {

    content: "";

    position: absolute;

    width: 12px;
    height: 12px;

    top: -6px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        var(--primary);

    box-shadow:
        0 0 18px rgba(99, 91, 255, .7);

}


.loader-core {

    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        var(--primary);

    background:
        #f1f0ff;

}

@keyframes loaderRotate {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    position: sticky;

    top: 0;

    z-index: 500;

    height: 76px;

    background:
        rgba(255,255,255,.90);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(226, 229, 238, .8);

}

.topbar-inner {

    max-width: 1240px;

    height: 100%;

    margin: auto;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    gap: 10px;

}


/* Back */

.back-button {

    width: 42px;
    height: 42px;

    border:
        1px solid var(--border);

    background:
        var(--white);

    border-radius:
        13px;

    color:
        var(--text);

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        .25s ease;

}

.back-button:hover {

    background:
        var(--primary);

    color:
        white;

    border-color:
        var(--primary);

    transform:
        translateX(-2px);

}


/* Brand */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

}

.brand-mark {

    width: 38px;
    height: 38px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #635bff,
            #8b5cf6
        );

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        white;

    font-weight: 800;

    box-shadow:
        0 7px 20px rgba(99,91,255,.22);

}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}

.brand-text strong {

    font-size: 15px;

    letter-spacing: -.3px;

}

.brand-text span {

    margin-top: 4px;

    font-size: 9px;

    color:
        var(--text-light);

    font-weight: 600;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


/* Navigation */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-left: 22px;

}

.desktop-nav a {

    padding:
        9px 14px;

    border-radius:
        10px;

    font-size: 12px;

    font-weight: 600;

    color:
        var(--text-soft);

    transition:
        .2s ease;

}

.desktop-nav a:hover {

    color:
        var(--primary);

    background:
        #f5f4ff;

}

.desktop-nav a.active {

    color:
        var(--primary);

    background:
        #f0efff;

}


/* Course Count */

.course-count-pill {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 14px;

    border:
        1px solid #e6e4ff;

    background:
        #f8f7ff;

    border-radius:
        999px;

    color:
        var(--primary);

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   HERO
========================================================= */

.hero-section {

    position: relative;

    overflow: hidden;

    background:
        #0d1025;

    min-height:
        500px;

    color:
        white;

}

.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

}

.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

}

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(80px);

    opacity: .4;

}

.hero-glow-one {

    width: 450px;
    height: 450px;

    background:
        #635bff;

    top: -220px;
    left: -100px;

}

.hero-glow-two {

    width: 400px;
    height: 400px;

    background:
        #06b6d4;

    right: -180px;
    bottom: -220px;

}


.hero-container {

    position: relative;

    z-index: 2;

    max-width:
        1240px;

    margin:
        auto;

    min-height:
        500px;

    padding:
        72px 24px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    align-items:
        center;

    gap:
        50px;

}


/* Hero Content */

.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 11px;

    border:
        1px solid rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.06);

    border-radius:
        999px;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.6px;

    color:
        #c9c7ff;

}

.eyebrow-dot {

    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        #8b85ff;

    box-shadow:
        0 0 12px #8b85ff;

}


.hero-content h1 {

    margin-top:
        22px;

    font-size:
        clamp(42px, 5vw, 68px);

    line-height:
        1.03;

    letter-spacing:
        -3px;

    font-weight:
        800;

}

.hero-content h1 span {

    background:
        linear-gradient(
            90deg,
            #9b95ff,
            #6ee7f9
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    max-width:
        600px;

    margin-top:
        20px;

    color:
        rgba(255,255,255,.68);

    font-size:
        14px;

    line-height:
        1.8;

}


/* Search */

.hero-search {

    margin-top:
        28px;

    width:
        min(580px, 100%);

    height:
        58px;

    padding:
        0 15px;

    border:
        1px solid rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.08);

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    backdrop-filter:
        blur(15px);

}

.hero-search > i {

    color:
        #a7a3ff;

    font-size:
        15px;

}

.hero-search input {

    flex: 1;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        white;

    font-size:
        13px;

}

.hero-search input::placeholder {

    color:
        rgba(255,255,255,.45);

}

.search-key {

    width:
        25px;

    height:
        25px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255,255,255,.55);

    font-size:
        12px;

}


/* Tags */

.hero-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        16px;

}

.hero-tags span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 10px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        8px;

    color:
        rgba(255,255,255,.62);

    font-size:
        9px;

    font-weight:
        600;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position:
        relative;

    width:
        380px;

    height:
        380px;

    margin:
        auto;

}

.visual-ring {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(139,133,255,.20);

    border-radius:
        50%;

}

.ring-one {

    width:
        180px;

    height:
        180px;

}

.ring-two {

    width:
        270px;

    height:
        270px;

}

.ring-three {

    width:
        360px;

    height:
        360px;

}


.visual-center {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%);

    width:
        110px;

    height:
        110px;

    border-radius:
        32px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.05)
        );

    border:
        1px solid rgba(255,255,255,.15);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 25px 60px rgba(0,0,0,.25);

}

.center-icon {

    position:
        relative;

    z-index:
        2;

    width:
        66px;

    height:
        66px;

    border-radius:
        21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #7069ff,
            #8b5cf6
        );

    font-size:
        25px;

    box-shadow:
        0 12px 35px rgba(99,91,255,.4);

}

.center-glow {

    position:
        absolute;

    width:
        130px;

    height:
        130px;

    border-radius:
        50%;

    background:
        #635bff;

    filter:
        blur(40px);

    opacity:
        .3;

}


/* Floating icons */

.floating-tech {

    position:
        absolute;

    width:
        52px;

    height:
        52px;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    color:
        #b5b1ff;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

    animation:
        floating 4s ease-in-out infinite;

}

.tech-one {

    top:
        48px;

    left:
        72px;

}

.tech-two {

    top:
        68px;

    right:
        40px;

    animation-delay:
        .8s;

}

.tech-three {

    bottom:
        54px;

    left:
        42px;

    animation-delay:
        1.5s;

}

.tech-four {

    bottom:
        36px;

    right:
        70px;

    animation-delay:
        2.1s;

}

@keyframes floating {

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

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

}


/* =========================================================
   STATS
========================================================= */

.stats-section {

    position:
        relative;

    z-index:
        5;

    margin-top:
        -42px;

}

.stats-container {

    max-width:
        1160px;

    margin:
        auto;

    padding:
        0 20px;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        14px;

}

.stat-card {

    min-height:
        104px;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    box-shadow:
        var(--shadow-sm);

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        18px;

    transition:
        .25s ease;

}

.stat-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-md);

}

.stat-icon {

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    border-radius:
        13px;

    background:
        #f0efff;

    color:
        var(--primary);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.stat-content {

    display:
        flex;

    flex-direction:
        column;

}

.stat-content strong {

    font-size:
        22px;

    line-height:
        1;

}

.stat-content span {

    margin-top:
        6px;

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        500;

}


/* =========================================================
   COMMON SECTION
========================================================= */

.section-container {

    max-width:
        1160px;

    margin:
        auto;

    padding:
        0 20px;

}

.courses-section {

    padding:
        95px 0 80px;

}

.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        34px;

}

.section-label {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

    color:
        var(--primary);

}

.section-heading h2 {

    margin-top:
        7px;

    font-size:
        clamp(28px, 4vw, 38px);

    letter-spacing:
        -1.4px;

}

.section-heading p {

    margin-top:
        7px;

    color:
        var(--text-soft);

    font-size:
        12px;

}


/* Filters */

.course-filters {

    display:
        flex;

    gap:
        7px;

    padding:
        5px;

    border:
        1px solid var(--border);

    background:
        white;

    border-radius:
        12px;

}

.filter-button {

    border:
        0;

    background:
        transparent;

    padding:
        9px 13px;

    border-radius:
        8px;

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        700;

}

.filter-button.active {

    background:
        #efeeff;

    color:
        var(--primary);

}


/* =========================================================
   EMPTY COURSE STATE
========================================================= */

.empty-course-state {

    min-height:
        360px;

    border:
        1px dashed #dfe2ee;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fafaff
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        55px;

    padding:
        55px;

    overflow:
        hidden;

    position:
        relative;

}

.empty-course-state::before {

    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    border-radius:
        50%;

    background:
        rgba(99,91,255,.045);

    top:
        -160px;

    right:
        -80px;

}


.empty-visual {

    width:
        170px;

    height:
        170px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

}

.empty-orbit {

    position:
        absolute;

    border:
        1px solid #dddafe;

    border-radius:
        50%;

}

.orbit-a {

    width:
        150px;

    height:
        150px;

    animation:
        emptySpin 8s linear infinite;

}

.orbit-b {

    width:
        110px;

    height:
        110px;

    border-style:
        dashed;

    animation:
        emptySpin 6s linear infinite reverse;

}

.empty-icon {

    width:
        74px;

    height:
        74px;

    border-radius:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f0efff;

    color:
        var(--primary);

    font-size:
        27px;

    position:
        relative;

    z-index:
        2;

}

@keyframes emptySpin {

    to {
        transform:
            rotate(360deg);
    }

}


.empty-content {

    max-width:
        520px;

}

.empty-badge {

    display:
        inline-block;

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        #f0efff;

    color:
        var(--primary);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}

.empty-content h3 {

    margin-top:
        12px;

    font-size:
        24px;

    letter-spacing:
        -.7px;

}

.empty-content p {

    margin-top:
        10px;

    color:
        var(--text-soft);

    font-size:
        12px;

    line-height:
        1.7;

}

.empty-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        17px;

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        600;

}

.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #a3aab8;

}


/* =========================================================
   REAL COURSE GRID
========================================================= */

.course-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}

.course-card {

    overflow:
        hidden;

    background:
        white;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-sm);

    transition:
        .3s ease;

}

.course-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-md);

}

.course-card-image {

    height:
        190px;

    position:
        relative;

    background:
        linear-gradient(
            135deg,
            #ebe9ff,
            #eaf5ff
        );

    overflow:
        hidden;

}

.course-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}

.course-image-placeholder {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary);

    font-size:
        38px;

}

.course-card-category {

    position:
        absolute;

    top:
        13px;

    left:
        13px;

    padding:
        6px 9px;

    border-radius:
        8px;

    background:
        rgba(255,255,255,.9);

    color:
        var(--primary);

    font-size:
        8px;

    font-weight:
        800;

}

.course-card-body {

    padding:
        18px;

}

.course-card-level {

    color:
        var(--primary);

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}

.course-card h3 {

    margin-top:
        7px;

    font-size:
        17px;

}

.course-card p {

    margin-top:
        7px;

    color:
        var(--text-soft);

    font-size:
        10px;

    line-height:
        1.6;

}

.course-card-meta {

    display:
        flex;

    gap:
        14px;

    margin-top:
        14px;

    padding-top:
        13px;

    border-top:
        1px solid var(--border);

    color:
        var(--text-soft);

    font-size:
        9px;

}

.course-card-meta span {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}

.course-card-meta i {

    color:
        var(--primary);

}

.course-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        16px;

}

.course-instructor {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--text-soft);

    font-size:
        9px;

}

.course-instructor i {

    color:
        var(--primary);

}

.course-open-btn {

    border:
        0;

    background:
        #f0efff;

    color:
        var(--primary);

    border-radius:
        9px;

    padding:
        8px 10px;

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================================
   CATEGORY SECTION
========================================================= */

.categories-section {

    padding:
        20px 0 90px;

    background:
        #fbfbfe;

}

.category-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;

}

.category-card {

    width:
        100%;

    border:
        1px solid var(--border);

    background:
        white;

    border-radius:
        17px;

    min-height:
        110px;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    text-align:
        left;

    transition:
        .25s ease;

}

.category-card:hover {

    border-color:
        #d8d5ff;

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-sm);

}

.category-icon {

    width:
        46px;

    height:
        46px;

    flex-shrink:
        0;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;

}

.ai-icon {
    background: #eeeefe;
    color: #635bff;
}

.programming-icon {
    background: #eaf3ff;
    color: #3b82f6;
}

.web-icon {
    background: #e9fbff;
    color: #06b6d4;
}

.app-icon {
    background: #f4edff;
    color: #8b5cf6;
}

.security-icon {
    background: #fff1f1;
    color: #ef4444;
}

.robotics-icon {
    background: #edfaf4;
    color: #10b981;
}

.category-content {

    flex:
        1;

}

.category-content h3 {

    font-size:
        12px;

    line-height:
        1.4;

}

.category-content span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-light);

    font-size:
        9px;

}

.category-content b {

    color:
        var(--primary);

}

.category-arrow {

    color:
        #b5bac7;

    font-size:
        12px;

    transition:
        .2s ease;

}

.category-card:hover .category-arrow {

    color:
        var(--primary);

    transform:
        translateX(3px);

}


/* =========================================================
   INSTRUCTOR CTA
========================================================= */

.instructor-section {

    padding:
        70px 0;

    background:
        #fbfbfe;

}

.instructor-card {

    min-height:
        230px;

    padding:
        35px 42px;

    border-radius:
        25px;

    overflow:
        hidden;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    background:
        linear-gradient(
            115deg,
            #5148df,
            #695eff 55%,
            #765eea
        );

    color:
        white;

    box-shadow:
        0 22px 55px rgba(79,70,229,.22);

}

.instructor-pattern {

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        50%;

    right:
        -160px;

    top:
        -130px;

}

.instructor-icon {

    width:
        72px;

    height:
        72px;

    flex-shrink:
        0;

    border-radius:
        22px;

    background:
        rgba(255,255,255,.13);

    border:
        1px solid rgba(255,255,255,.15);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        25px;

}

.instructor-content {

    position:
        relative;

    z-index:
        2;

    flex:
        1;

}

.instructor-content span {

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    opacity:
        .7;

}

.instructor-content h2 {

    margin-top:
        7px;

    font-size:
        28px;

    letter-spacing:
        -1px;

}

.instructor-content p {

    margin-top:
        8px;

    max-width:
        570px;

    color:
        rgba(255,255,255,.7);

    font-size:
        11px;

    line-height:
        1.6;

}

.instructor-button {

    position:
        relative;

    z-index:
        3;

    border:
        0;

    padding:
        13px 17px;

    border-radius:
        11px;

    background:
        white;

    color:
        var(--primary-dark);

    font-size:
        10px;

    font-weight:
        800;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    white-space:
        nowrap;

    transition:
        .25s ease;

}

.instructor-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

}


/* =========================================================
   TOP RIGHT ALERT
========================================================= */

.site-alert {

    position:
        fixed;

    top:
        22px;

    right:
        22px;

    z-index:
        9999;

    width:
        330px;

    min-height:
        72px;

    padding:
        13px 14px;

    border:
        1px solid rgba(226,229,238,.95);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 15px 45px rgba(15,23,42,.12);

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    transform:
        translateX(calc(100% + 30px));

    opacity:
        0;

    pointer-events:
        none;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        opacity .3s ease;

}

.site-alert.show {

    transform:
        translateX(0);

    opacity:
        1;

    pointer-events:
        auto;

}

.alert-icon {

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        #efeeff;

    color:
        var(--primary);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        13px;

}

.alert-content {

    flex:
        1;

    min-width:
        0;

}

.alert-content strong {

    display:
        block;

    font-size:
        11px;

}

.alert-content p {

    margin-top:
        3px;

    color:
        var(--text-soft);

    font-size:
        9px;

    line-height:
        1.45;

}

.alert-close {

    width:
        25px;

    height:
        25px;

    flex-shrink:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #a0a5b2;

    border-radius:
        7px;

}

.alert-close:hover {

    background:
        #f2f3f6;

    color:
        var(--text);

}


/* =========================================================
   RIGHT TOAST
========================================================= */

.right-toast {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        9998;

    width:
        320px;

    padding:
        13px 14px;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 15px 45px rgba(15,23,42,.12);

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    transform:
        translateX(calc(100% + 30px));

    opacity:
        0;

    pointer-events:
        none;

    transition:
        .4s cubic-bezier(.22,1,.36,1);

}

.right-toast.show {

    transform:
        translateX(0);

    opacity:
        1;

    pointer-events:
        auto;

}

.toast-icon {

    width:
        33px;

    height:
        33px;

    border-radius:
        10px;

    background:
        #ecfdf5;

    color:
        #10b981;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.toast-content {

    flex:
        1;

}

.toast-content strong {

    display:
        block;

    font-size:
        11px;

}

.toast-content p {

    margin-top:
        3px;

    color:
        var(--text-soft);

    font-size:
        9px;

}

.toast-close {

    width:
        25px;

    height:
        25px;

    border:
        0;

    background:
        transparent;

    color:
        #9ca3af;

}


/* =========================================================
   COURSE MODAL
========================================================= */

.course-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        9000;

    padding:
        20px;

    background:
        rgba(15,23,42,.55);

    backdrop-filter:
        blur(8px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .25s ease;

}

.course-modal.active {

    opacity:
        1;

    visibility:
        visible;

}

.course-modal-box {

    width:
        min(470px, 100%);

    background:
        white;

    border-radius:
        24px;

    padding:
        32px;

    position:
        relative;

    text-align:
        center;

    transform:
        translateY(15px) scale(.98);

    transition:
        .3s ease;

}

.course-modal.active .course-modal-box {

    transform:
        translateY(0) scale(1);

}

.course-modal-close {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        10px;

    background:
        #f3f4f7;

    color:
        #6b7280;

}

.modal-course-icon {

    width:
        65px;

    height:
        65px;

    margin:
        auto;

    border-radius:
        20px;

    background:
        #efeeff;

    color:
        var(--primary);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        23px;

}

.modal-course-category {

    display:
        inline-block;

    margin-top:
        18px;

    color:
        var(--primary);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}

.course-modal-box h2 {

    margin-top:
        7px;

    font-size:
        25px;

}

.course-modal-box p {

    margin-top:
        10px;

    color:
        var(--text-soft);

    font-size:
        11px;

    line-height:
        1.7;

}

.modal-start-button {

    margin-top:
        20px;

    border:
        0;

    padding:
        12px 18px;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .hero-container {

        grid-template-columns:
            1fr;

        padding-top:
            55px;

        padding-bottom:
            65px;

    }

    .hero-content {

        text-align:
            center;

    }

    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .hero-search {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .hero-tags {

        justify-content:
            center;

    }

    .hero-visual {

        width:
            300px;

        height:
            300px;

    }

    .ring-three {

        width:
            290px;

        height:
            290px;

    }

    .stats-container {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .category-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .course-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 700px) {

    .topbar {
        height: auto;
    }

    .topbar-inner {
        min-height: 68px;
        padding: 10px 15px;

        flex-wrap: wrap;

        gap: 10px;
    }

    .brand-text {
        display: none;
    }

    /* Mobile Navigation */

    .desktop-nav {

        order: 10;

        width: 100%;

        display: flex;

        margin-left: 0;

        justify-content: center;

        gap: 4px;

        padding: 6px 0 2px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .desktop-nav::-webkit-scrollbar {
        display: none;
    }

    .desktop-nav a {

        flex: 0 0 auto;

        padding: 8px 11px;

        font-size: 10px;

        white-space: nowrap;
    }

    .course-count-pill {
        font-size: 9px;
    }

    /* बाकी तुम्हारा existing mobile CSS */


    .hero-container {

        padding:
            50px 18px 60px;

    }

    .hero-content h1 {

        font-size:
            43px;

        letter-spacing:
            -2px;

    }

    .hero-description {

        font-size:
            12px;

    }

    .hero-visual {

        transform:
            scale(.85);

        margin-top:
            -15px;

        margin-bottom:
            -15px;

    }

    .stats-container {

        padding:
            0 14px;

        gap:
            9px;

    }

    .stat-card {

        padding:
            13px;

        min-height:
            90px;

    }

    .stat-icon {

        width:
            38px;

        height:
            38px;

    }

    .stat-content strong {

        font-size:
            18px;

    }

    .stat-content span {

        font-size:
            8px;

    }

    .courses-section {

        padding:
            70px 0 60px;

    }

    .section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

    .course-filters {

        width:
            100%;

    }

    .filter-button {

        flex:
            1;

    }

    .empty-course-state {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            15px;

        padding:
            45px 22px;

    }

    .empty-status {

        justify-content:
            center;

    }

    .course-grid {

        grid-template-columns:
            1fr;

    }

    .category-grid {

        grid-template-columns:
            1fr;

    }

    .instructor-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            28px;

    }

    .instructor-button {

        width:
            100%;

        justify-content:
            center;

    }

    .site-alert {

        top:
            14px;

        right:
            14px;

        width:
            calc(100vw - 28px);

    }

    .right-toast {

        right:
            14px;

        bottom:
            14px;

        width:
            calc(100vw - 28px);

    }

}


@media (max-width: 390px) {

    .hero-content h1 {
        font-size:
            37px;
    }

    .hero-tags span:nth-child(4) {
        display:
            none;
    }

    .stats-container {

        grid-template-columns:
            1fr 1fr;

    }

    .stat-card {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline:
        3px solid rgba(99,91,255,.25);

    outline-offset:
        2px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}