:root {
            --primary: #06b6d4;
            --primary-dark: #0891b2;
            --secondary: #2563eb;
            --dark: #0f172a;
            --dark-2: #1e293b;
            --text: #172033;
            --text-light: #64748b;
            --bg: #f7fbff;
            --card: #ffffff;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --radius: 20px;
            --shadow: 0 15px 45px rgba(15, 23, 42, 0.08);
            --shadow-hover: 0 25px 60px rgba(6, 182, 212, 0.18);
            --heading: "Cairo", sans-serif;
            --body: "Tajawal", sans-serif;
            --transition: .3s ease;
        }

        body.dark {
            --text: #e2e8f0;
            --text-light: #94a3b8;
            --bg: #07111f;
            --card: #0f1c2e;
            --border: #243449;
            --dark: #f8fafc;
            --dark-2: #cbd5e1;
            --shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
            --shadow-hover: 0 25px 60px rgba(6, 182, 212, 0.12);
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }

        body {
            font-family: var(--body);
            background: var(--bg);
            color: var(--text);
            line-height: 1.8;
            overflow-x: hidden;
            transition: background .3s ease, color .3s ease;
        }

        body.menu-open {
            overflow: hidden;
        }

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

        button, input {
            font-family: inherit;
        }

        button {
            border: none;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            width: min(1180px, 92%);
            margin: auto;
        }

        .scroll-progress {
            position: fixed;
            top: 0;
            right: 0;
            height: 3px;
            width: 0;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            z-index: 9999;
        }

        header {
            position: sticky;
            top: 0;
            z-index: 2000;
            background: rgba(255,255,255,.85);
            border-bottom: 1px solid rgba(226,232,240,.7);
            backdrop-filter: blur(18px);
            transition: var(--transition);
        }

        body.dark header {
            background: rgba(7,17,31,.88);
            border-color: rgba(36,52,73,.7);
        }

        nav {
            height: 76px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--heading);
            font-size: 27px;
            font-weight: 900;
            color: var(--dark);
            white-space: nowrap;
        }

        .logo-icon {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            color: white;
            border-radius: 13px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 8px 20px rgba(6,182,212,.25);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 27px;
        }

        .nav-links a {
            font-family: var(--heading);
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            position: relative;
        }

        .nav-links a:not(.login-btn)::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .icon-btn {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: var(--bg);
            color: var(--text);
            border: 1px solid var(--border);
            transition: var(--transition);
        }

        .icon-btn:hover {
            color: white;
            background: var(--primary);
            border-color: var(--primary);
            transform: rotate(8deg);
        }

        .login-btn {
            padding: 10px 22px;
            color: white !important;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 8px 22px rgba(6,182,212,.25);
        }

        .login-btn:hover {
            transform: translateY(-2px);
        }

        .menu-btn {
            display: none;
        }

        .mobile-menu {
            position: fixed;
            top: 76px;
            right: -100%;
            width: min(330px, 90%);
            height: calc(100vh - 76px);
            background: var(--card);
            padding: 35px 25px;
            box-shadow: -15px 0 50px rgba(0,0,0,.12);
            transition: .4s ease;
            z-index: 1500;
        }

        .mobile-menu.active {
            right: 0;
        }

        body[dir="ltr"] .mobile-menu {
            right: auto;
            left: -100%;
            box-shadow: 15px 0 50px rgba(0,0,0,.12);
        }

        body[dir="ltr"] .mobile-menu.active {
            left: 0;
        }

        .mobile-menu ul {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mobile-menu a {
            display: block;
            padding: 14px 16px;
            border-radius: 12px;
            font-family: var(--heading);
            font-weight: 700;
            color: var(--text);
        }

        .mobile-menu a:hover {
            background: var(--bg);
            color: var(--primary);
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 110px 0 130px;
            color: white;
            background: radial-gradient(circle at 15% 20%, rgba(6,182,212,.28), transparent 28%),
                        radial-gradient(circle at 85% 70%, rgba(37,99,235,.3), transparent 30%),
                        linear-gradient(135deg, #07152e, #0b2b57 55%, #075985);
        }

        .hero::before, .hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.1);
        }

        .hero::before {
            width: 450px;
            height: 450px;
            left: -200px;
            top: -200px;
        }

        .hero::after {
            width: 550px;
            height: 550px;
            right: -250px;
            bottom: -350px;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 850px;
            margin: auto;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 15px;
            margin-bottom: 25px;
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.08);
            border-radius: 999px;
            font-family: var(--heading);
            font-size: 13px;
            font-weight: 700;
            backdrop-filter: blur(10px);
        }

        .hero-badge i {
            color: #67e8f9;
        }

        .hero h1 {
            font-family: var(--heading);
            font-size: clamp(35px, 5vw, 62px);
            line-height: 1.3;
            font-weight: 900;
            margin-bottom: 23px;
        }

        .hero h1 span {
            color: #67e8f9;
        }

        .hero-description {
            max-width: 720px;
            margin: auto auto 32px;
            color: rgba(255,255,255,.78);
            font-size: 18px;
        }

        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 13px 26px;
            border-radius: 999px;
            font-family: var(--heading);
            font-weight: 800;
            transition: var(--transition);
        }

        .btn-primary {
            color: #063047;
            background: #67e8f9;
            box-shadow: 0 10px 30px rgba(103,232,249,.18);
        }

        .btn-primary:hover {
            transform: translateY(-4px);
            background: white;
        }

        .btn-outline {
            color: white;
            border: 1px solid rgba(255,255,255,.25);
            background: rgba(255,255,255,.06);
        }

        .btn-outline:hover {
            background: white;
            color: var(--dark);
            transform: translateY(-4px);
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            max-width: 650px;
            margin: 55px auto 0;
            border-top: 1px solid rgba(255,255,255,.12);
            padding-top: 30px;
        }

        .hero-stat {
            text-align: center;
            position: relative;
        }

        .hero-stat:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 0;
            top: 10%;
            width: 1px;
            height: 80%;
            background: rgba(255,255,255,.12);
        }

        .hero-stat strong {
            display: block;
            font-family: var(--heading);
            font-size: 27px;
            font-weight: 900;
        }

        .hero-stat span {
            font-size: 13px;
            color: rgba(255,255,255,.6);
        }

        .section {
            padding: 90px 0;
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 45px;
        }

        .section-label {
            display: inline-block;
            color: var(--primary);
            font-family: var(--heading);
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 7px;
        }

        .section-title {
            font-family: var(--heading);
            font-size: clamp(27px, 4vw, 38px);
            font-weight: 900;
            color: var(--dark);
            margin-bottom: 10px;
        }

        .section-description {
            color: var(--text-light);
        }

        .courses-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
        }

        .search-box {
            position: relative;
            flex: 1;
            max-width: 470px;
        }

        .search-box i {
            position: absolute;
            right: 17px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
        }

        body[dir="ltr"] .search-box i {
            right: auto;
            left: 17px;
        }

        .search-box input {
            width: 100%;
            padding: 14px 45px 14px 18px;
            border-radius: 14px;
            border: 1px solid var(--border);
            outline: none;
            background: var(--card);
            color: var(--text);
            transition: var(--transition);
        }

        body[dir="ltr"] .search-box input {
            padding: 14px 18px 14px 45px;
        }

        .search-box input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(6,182,212,.08);
        }

        .filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 9px 15px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text-light);
            font-weight: 700;
            font-size: 13px;
            transition: var(--transition);
        }

        .filter-btn:hover, .filter-btn.active {
            color: white;
            background: var(--primary);
            border-color: var(--primary);
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .course-card {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .course-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(6,182,212,.3);
        }

        .course-card.hidden {
            display: none;
        }

        .course-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
        }

        .course-icon {
            width: 62px;
            height: 62px;
            display: grid;
            place-items: center;
            border-radius: 17px;
            font-size: 30px;
        }

        .python { background: #e8f3ff; color: #3776ab; }
        .linux { background: #fff8dc; color: #d49b00; }
        .data { background: #e5fbff; color: #0891b2; }
        .web { background: #fff0eb; color: #e34f26; }
        .computer { background: #f4e9ff; color: #7c3aed; }
        .javascript { background: #fffbd8; color: #b49500; }

        body.dark .python { background: rgba(55,118,171,.15); }
        body.dark .linux { background: rgba(212,155,0,.12); }
        body.dark .data { background: rgba(8,145,178,.12); }
        body.dark .web { background: rgba(227,79,38,.12); }
        body.dark .computer { background: rgba(124,58,237,.12); }
        body.dark .javascript { background: rgba(180,149,0,.12); }

        .level {
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-family: var(--heading);
            font-weight: 800;
        }

        .beginner { color: #047857; background: #d1fae5; }
        .intermediate { color: #b45309; background: #fef3c7; }
        .advanced { color: #b91c1c; background: #fee2e2; }

        .course-card h3 {
            font-family: var(--heading);
            font-size: 20px;
            color: var(--dark);
            margin-bottom: 8px;
        }

        .course-card p {
            color: var(--text-light);
            font-size: 14px;
            margin-bottom: 20px;
        }

        .course-meta {
            display: flex;
            gap: 17px;
            margin-bottom: 20px;
            color: var(--text-light);
            font-size: 12px;
        }

        .course-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .progress-wrapper {
            margin-bottom: 20px;
        }

        .progress-info {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 6px;
        }

        .progress {
            width: 100%;
            height: 6px;
            overflow: hidden;
            border-radius: 999px;
            background: var(--border);
        }

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

        .course-footer {
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .course-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--primary);
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            background: transparent;
        }

        .course-link:hover {
            gap: 12px;
        }

        .course-rating {
            font-size: 12px;
            color: #f59e0b;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(5px);
            display: grid;
            place-items: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: .3s ease;
            padding: 20px;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-box {
            background: var(--card);
            border: 1px solid var(--border);
            width: min(550px, 90%);
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: 0 25px 60px rgba(0,0,0,.2);
            transform: translateY(20px);
            transition: .3s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-overlay.active .modal-box {
            transform: translateY(0);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h3 {
            font-family: var(--heading);
            font-size: 22px;
            color: var(--dark);
        }

        .close-modal {
            background: var(--bg);
            border: 1px solid var(--border);
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--text);
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
        }

        .close-modal:hover {
            background: var(--danger);
            color: white;
            border-color: var(--danger);
        }

        .modal-body p {
            color: var(--text-light);
            font-size: 14px;
            margin-bottom: 20px;
        }

        .modal-lessons-list {
            display: grid;
            gap: 10px;
            margin-bottom: 25px;
            max-height: 260px;
            overflow-y: auto;
        }

        .modal-lesson-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: var(--bg);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            gap: 10px;
        }

        .modal-lesson-item.locked {
            opacity: .6;
        }

        .modal-lesson-item.done {
            color: var(--success);
        }

        /* Auth Forms */
        .auth-tabs {
            display: flex;
            gap: 6px;
            padding: 5px;
            background: var(--bg);
            border-radius: 12px;
            margin-bottom: 22px;
        }

        .auth-tab {
            flex: 1;
            padding: 10px;
            border-radius: 9px;
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            color: var(--text-light);
            background: transparent;
            transition: var(--transition);
        }

        .auth-tab.active {
            color: white;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .auth-form {
            display: none;
            flex-direction: column;
            gap: 14px;
        }

        .auth-form.active {
            display: flex;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-field label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-light);
        }

        .form-field input {
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--bg);
            color: var(--text);
            outline: none;
            font-size: 14px;
            transition: var(--transition);
        }

        .form-field input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(6,182,212,.08);
        }

        .form-error {
            display: none;
            align-items: center;
            gap: 7px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(239,68,68,.1);
            color: var(--danger);
            font-size: 12px;
            font-weight: 700;
        }

        .form-error.show {
            display: flex;
        }

        .form-note {
            font-size: 11px;
            color: var(--text-light);
            text-align: center;
        }

        /* Account panel */
        .account-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }

        .account-avatar {
            width: 55px;
            height: 55px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 50%;
            font-family: var(--heading);
            font-weight: 900;
            font-size: 20px;
            color: white;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .account-name {
            font-family: var(--heading);
            font-weight: 800;
            font-size: 17px;
            color: var(--dark);
        }

        .account-email {
            font-size: 12px;
            color: var(--text-light);
        }

        .account-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 22px;
        }

        .account-stat {
            text-align: center;
            padding: 14px 8px;
            border-radius: 14px;
            background: var(--bg);
            border: 1px solid var(--border);
        }

        .account-stat strong {
            display: block;
            font-family: var(--heading);
            font-size: 20px;
            color: var(--primary);
        }

        .account-stat span {
            font-size: 11px;
            color: var(--text-light);
        }

        .account-courses-title {
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 10px;
        }

        .account-course-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            margin-bottom: 10px;
            cursor: pointer;
            transition: var(--transition);
        }

        .account-course-item:hover {
            border-color: var(--primary);
        }

        .account-course-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 11px;
            font-size: 17px;
        }

        .account-course-info {
            flex: 1;
            min-width: 0;
        }

        .account-course-info strong {
            display: block;
            font-size: 13px;
            font-family: var(--heading);
            color: var(--dark);
            margin-bottom: 5px;
        }

        .account-empty {
            text-align: center;
            padding: 25px 10px;
            color: var(--text-light);
            font-size: 13px;
        }

        .logout-btn {
            width: 100%;
            padding: 12px;
            border-radius: 12px;
            background: rgba(239,68,68,.1);
            color: var(--danger);
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            margin-top: 18px;
            transition: var(--transition);
        }

        .logout-btn:hover {
            background: var(--danger);
            color: white;
        }


        /* Course Page - full screen navigation */
        .course-page-overlay {
            position: fixed;
            inset: 0;
            z-index: 9997;
            display: none;
            overflow-y: auto;
            background:
                radial-gradient(circle at 12% 8%, rgba(6,182,212,.10), transparent 28%),
                radial-gradient(circle at 88% 14%, rgba(37,99,235,.10), transparent 28%),
                var(--bg);
        }
        .course-page-overlay.active { display: block; }
        .course-page-shell { max-width: 1180px; margin: 0 auto; padding: 22px 22px 70px; }
        .course-page-topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; }
        .course-page-back { display:inline-flex; align-items:center; gap:9px; padding:11px 16px; border-radius:14px; background:var(--card); color:var(--text); border:1px solid var(--border); font-family:var(--heading); font-weight:800; box-shadow:var(--shadow); }
        .course-page-back:hover { color:var(--primary); border-color:var(--primary); transform:translateY(-2px); }
        .course-page-brand { color:var(--text-light); font-size:12px; font-weight:700; }
        .course-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:30px; border:1px solid var(--border); border-radius:28px; background:linear-gradient(135deg,var(--card),rgba(6,182,212,.06)); box-shadow:var(--shadow); margin-bottom:28px; }
        .course-hero::after { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(6,182,212,.08); inset-inline-end:-80px; top:-80px; }
        .course-hero-icon { position:relative; z-index:1; width:92px; height:92px; border-radius:24px; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); box-shadow:0 14px 35px rgba(15,23,42,.12); overflow:hidden; }
        .course-hero-icon i { font-size:48px; }
        .course-hero-icon img { width:66px; height:66px; object-fit:contain; }
        .course-hero-copy { position:relative; z-index:1; }
        .course-hero-kicker { display:inline-flex; align-items:center; gap:7px; color:var(--primary); font-size:12px; font-weight:900; margin-bottom:5px; }
        .course-hero h1 { font-family:var(--heading); color:var(--dark); font-size:clamp(25px,4vw,38px); line-height:1.35; margin-bottom:7px; }
        .course-hero p { color:var(--text-light); max-width:720px; font-size:14px; }
        .course-hero-stats { position:relative; z-index:1; min-width:160px; padding:16px; border-radius:18px; background:rgba(255,255,255,.55); border:1px solid var(--border); text-align:center; }
        body.dark .course-hero-stats { background:rgba(15,28,46,.65); }
        .course-hero-stats strong { display:block; font-family:var(--heading); font-size:27px; color:var(--primary); }
        .course-hero-stats span { display:block; color:var(--text-light); font-size:12px; font-weight:700; }
        .course-progress-card { margin-top:14px; }
        .course-progress-row { display:flex; justify-content:space-between; gap:10px; color:var(--text-light); font-size:12px; font-weight:800; margin-bottom:7px; }
        .course-progress-track { height:8px; border-radius:99px; overflow:hidden; background:var(--border); }
        .course-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--secondary)); width:0; transition:width .35s ease; }
        .course-lessons-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:28px 0 14px; }
        .course-lessons-head h2 { font-family:var(--heading); color:var(--dark); font-size:24px; }
.course-continue-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:11px 16px; border:1px solid rgba(24,216,207,.25); border-radius:14px; background:linear-gradient(135deg,rgba(24,216,207,.16),rgba(22,135,255,.13)); color:#eafcff; font-family:var(--heading); font-weight:900; cursor:pointer; transition:var(--transition); box-shadow:0 10px 30px rgba(24,216,207,.08); }
.course-continue-btn:hover { transform:translateY(-2px); border-color:rgba(24,216,207,.55); box-shadow:0 14px 35px rgba(24,216,207,.14); }
.course-continue-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
        .course-lessons-head p { color:var(--text-light); font-size:12px; }
        .course-lessons-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
        .course-lesson-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; width:100%; padding:16px; text-align:inherit; border:1px solid var(--border); border-radius:17px; background:var(--card); color:var(--text); box-shadow:0 8px 25px rgba(15,23,42,.05); transition:var(--transition); }
        .course-lesson-card:hover:not(.locked) { transform:translateY(-3px); border-color:rgba(6,182,212,.45); box-shadow:var(--shadow); }
        .course-lesson-card.locked { opacity:.58; cursor:not-allowed; }
        .course-lesson-num { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--border); color:var(--text-light); font-family:var(--heading); font-weight:900; font-size:13px; }
        .course-lesson-card.done .course-lesson-num { color:white; background:var(--success); border-color:var(--success); }
        .course-lesson-card.active .course-lesson-num { color:white; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-color:transparent; }
        .course-lesson-info strong { display:block; font-family:var(--heading); font-size:14px; margin-bottom:3px; color:var(--dark); }
        .course-lesson-info span { color:var(--text-light); font-size:11px; }
        .course-lesson-action { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--bg); color:var(--primary); }
        .course-lesson-card.done .course-lesson-action { color:var(--success); }
        .course-course-icons { display:flex; align-items:center; gap:7px; margin-top:11px; }
        .course-mini-icon { width:25px; height:25px; border-radius:8px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--border); overflow:hidden; }
        .course-mini-icon img { width:18px; height:18px; object-fit:contain; }
        .course-mini-icon i { font-size:14px; }
        @media (max-width:850px) {
            .course-page-shell { padding:14px 14px 55px; }
            .course-hero { grid-template-columns:auto 1fr; padding:21px; }
            .course-hero-stats { grid-column:1/-1; width:100%; }
            .course-lessons-grid { grid-template-columns:1fr; }
        }
        @media (max-width:560px) {
            .course-hero { grid-template-columns:1fr; text-align:center; }
            .course-hero-icon { margin:0 auto; }
            .course-hero p { margin:0 auto; }
            .course-page-topbar { align-items:flex-start; }
            .course-page-brand { display:none; }
            .course-lessons-head { align-items:stretch; flex-direction:column; }
            .course-continue-btn { width:100%; }
        }

        /* Lesson Player */
        .lesson-overlay {
            position: fixed;
            inset: 0;
            z-index: 9998;
            background: var(--bg);
            display: none;
            grid-template-columns: 280px 1fr;
            overflow: hidden;
        }

        .lesson-overlay.active {
            display: grid !important;
            position: fixed !important;
            inset: 0 !important;
            width: 100vw;
            height: 100dvh;
            min-height: 100%;
            visibility: visible;
            opacity: 1;
        }

        /* The lesson player must completely replace the course page.
           This is especially important on iOS/mobile browsers. */
        body.lesson-open #coursePage {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        body.lesson-open #lessonOverlay {
            display: grid !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Keep the active lesson isolated from the page behind it. */
        body.lesson-open {
            overflow: hidden !important;
            overscroll-behavior: none;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        @media (max-width: 850px) {
            .lesson-overlay.active { grid-template-columns: 1fr; }
            .lesson-sidebar { display: none; }
            .lesson-sidebar.open { display: flex; position: fixed; inset: 0; z-index: 20; }
        }

        .lesson-sidebar {
            display: flex;
            flex-direction: column;
            background: var(--card);
            border-inline-end: 1px solid var(--border);
            padding: 20px;
            overflow-y: auto;
        }

        .lesson-sidebar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .lesson-back {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            color: var(--text-light);
            padding: 8px 10px;
            border-radius: 10px;
            background: var(--bg);
        }

        .lesson-back:hover {
            color: var(--primary);
        }

        .lesson-sidebar-course {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 20px;
        }

        .lesson-progress-ring {
            --ring-pct: 0deg;
            position: relative;
            width: 52px;
            height: 52px;
            flex-shrink: 0;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: conic-gradient(var(--primary) var(--ring-pct), var(--border) 0);
            transition: background 0.5s ease;
        }

        .lesson-progress-ring::before {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: var(--card);
        }

        .lesson-progress-ring span {
            position: relative;
            z-index: 1;
            font-family: var(--heading);
            font-weight: 800;
            font-size: 11px;
            color: var(--dark);
        }

        .lesson-sidebar-course-info {
            min-width: 0;
        }

        .lesson-sidebar h4 {
            font-family: var(--heading);
            font-size: 15px;
            color: var(--dark);
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lesson-sidebar-progress {
            font-size: 11.5px;
            color: var(--text-light);
        }

        .lesson-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            border-radius: 12px;
            border-inline-start: 3px solid transparent;
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
            transition: background .2s ease, border-color .2s ease, transform .2s ease;
            text-align: inherit;
            width: 100%;
        }

        .lesson-nav-item:hover {
            background: var(--bg);
            transform: translateX(-2px);
        }

        body[dir="ltr"] .lesson-nav-item:hover {
            transform: translateX(2px);
        }

        .lesson-nav-item.active {
            background: rgba(6,182,212,.1);
            border-inline-start-color: var(--primary);
            color: var(--primary);
        }

        .lesson-nav-check {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 50%;
            border: 2px solid var(--border);
            font-size: 10px;
        }

        .lesson-nav-item.done .lesson-nav-check {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .lesson-nav-item.locked {
            opacity: .5;
            cursor: not-allowed;
        }

        .lesson-main {
            position: relative;
            overflow-y: auto;
            padding: 30px 40px 80px;
            scroll-behavior: smooth;
        }

        .lesson-read-progress {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--border);
            z-index: 5;
            margin: -30px -40px 26px;
        }

        .lesson-read-progress span {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width .15s ease-out;
        }

        @media (max-width: 850px) {
            .lesson-read-progress { margin: calc(-20px - env(safe-area-inset-top)) -18px 20px; }
        }

        .lesson-main-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 25px;
        }

        .lesson-menu-toggle {
            display: none;
        }

        @media (max-width: 850px) {
            .lesson-menu-toggle { display: grid; }
            .lesson-main {
                padding: calc(20px + env(safe-area-inset-top)) 18px calc(70px + env(safe-area-inset-bottom));
                min-height: 100dvh;
            }
            .lesson-content-wrap { width: 100%; }
            .lesson-footer-nav {
                flex-wrap: wrap;
                gap: 8px;
            }
            .lesson-footer-nav .btn { flex: 1 1 30%; min-width: 105px; }
            .lesson-code { font-size: 12px; -webkit-overflow-scrolling: touch; }
        }

        .lesson-content-wrap {
            max-width: 720px;
            margin: 0 auto;
            animation: lessonFadeIn .35s ease;
        }

        @keyframes lessonFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .lesson-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 6px;
        }

        .lesson-read-time {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-light);
            font-weight: 700;
        }

        .lesson-listen-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 18px;
            margin-bottom: 18px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--primary);
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            transition: var(--transition);
        }

        .lesson-listen-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .lesson-listen-btn.is-playing {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .lesson-listen-btn i {
            font-size: 14px;
        }

        .lesson-eyebrow {
            color: var(--primary);
            font-family: var(--heading);
            font-weight: 800;
            font-size: 13px;
            margin-bottom: 6px;
        }

        .lesson-content-wrap h1 {
            font-family: var(--heading);
            font-size: clamp(24px, 3.4vw, 32px);
            color: var(--dark);
            margin-bottom: 22px;
        }

        .lesson-body {
            font-size: 16px;
            line-height: 1.95;
            color: var(--text);
        }

        .lesson-body p {
            margin-bottom: 18px;
        }

        .lesson-body h3 {
            font-family: var(--heading);
            font-size: 18px;
            color: var(--dark);
            margin: 30px 0 14px;
            padding-inline-start: 12px;
            border-inline-start: 3px solid var(--primary);
        }

        .lesson-body ul, .lesson-body ol {
            margin: 0 0 18px;
            padding-inline-start: 22px;
            display: grid;
            gap: 10px;
        }

        .lesson-body li {
            list-style: revert;
        }

        .lesson-body strong {
            color: var(--dark);
        }

        .lesson-code-card {
            margin: 22px 0;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,.12);
        }

        .lesson-code-header {
            direction: ltr;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 14px;
            background: #0c1a2c;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }

        .lesson-code-lang {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--heading);
            font-weight: 700;
            font-size: 11px;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .lesson-code-dots {
            display: flex;
            gap: 5px;
        }

        .lesson-code-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #334155;
        }

        .lesson-code-copy {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 8px;
            background: rgba(255,255,255,.06);
            color: #cbd5e1;
            font-size: 11px;
            font-weight: 700;
            font-family: var(--heading);
            transition: var(--transition);
        }

        .lesson-code-copy:hover {
            background: rgba(255,255,255,.14);
            color: white;
        }

        .lesson-code-copy.copied {
            background: rgba(16,185,129,.18);
            color: #6ee7b7;
        }

        .lesson-code {
            direction: ltr;
            text-align: left;
            background: #07111f;
            color: #cbd5e1;
            padding: 18px 20px;
            font-family: "SF Mono", "Fira Code", monospace;
            font-size: 13px;
            line-height: 1.9;
            overflow-x: auto;
            white-space: pre;
        }

        .lesson-code .kw { color: #67e8f9; }
        .lesson-code .st { color: #86efac; }
        .lesson-code .fn { color: #c4b5fd; }
        .lesson-code .cm { color: #64748b; }

        .lesson-quiz {
            margin: 26px 0;
            padding: 20px;
            border-radius: 16px;
            background: var(--card);
            border: 1px solid var(--border);
        }

        .lesson-quiz h4 {
            font-family: var(--heading);
            font-size: 14px;
            color: var(--dark);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .quiz-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 14px;
            border-radius: 12px;
            border: 1.5px solid var(--border);
            margin-bottom: 8px;
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 600;
            transition: border-color .2s ease, background .2s ease, transform .15s ease;
        }

        .quiz-option-marker {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            font-size: 11px;
            color: var(--text-light);
            transition: var(--transition);
        }

        .quiz-option:hover {
            border-color: var(--primary);
            transform: translateY(-1px);
        }

        .quiz-option.correct {
            border-color: var(--success);
            background: rgba(16,185,129,.08);
            color: var(--success);
            transform: scale(1.01);
        }

        .quiz-option.correct .quiz-option-marker {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .quiz-option.wrong {
            border-color: var(--danger);
            background: rgba(239,68,68,.08);
            color: var(--danger);
        }

        .quiz-option.wrong .quiz-option-marker {
            background: var(--danger);
            border-color: var(--danger);
            color: white;
        }

        .quiz-feedback {
            display: none;
            margin-top: 10px;
            font-size: 12.5px;
            font-weight: 700;
        }

        .quiz-feedback.show {
            display: block;
        }

        .lesson-locked-msg {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-light);
        }

        .lesson-locked-msg i {
            font-size: 34px;
            color: var(--primary);
            margin-bottom: 14px;
            display: block;
        }

        .lesson-footer-nav {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 34px;
            padding-top: 22px;
            border-top: 1px solid var(--border);
        }

        .lesson-footer-nav .btn {
            font-size: 13px;
            padding: 11px 20px;
        }

        .lesson-up-next {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 18px;
            padding: 16px 18px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(37,99,235,.06));
            border: 1px solid rgba(6,182,212,.18);
            cursor: pointer;
            transition: var(--transition);
        }

        .lesson-up-next:hover {
            transform: translateY(-2px);
            border-color: var(--primary);
        }

        .lesson-up-next-icon {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 11px;
            background: var(--primary);
            color: white;
            font-size: 14px;
        }

        .lesson-up-next-info {
            flex: 1;
            min-width: 0;
        }

        .lesson-up-next-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: .03em;
            margin-bottom: 3px;
        }

        .lesson-up-next-title {
            font-family: var(--heading);
            font-weight: 800;
            font-size: 14px;
            color: var(--dark);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .btn-ghost {
            color: var(--text);
            background: var(--card);
            border: 1px solid var(--border);
        }

        .btn-ghost:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .btn-success {
            color: white;
            background: var(--success);
        }

        .btn-success:hover {
            filter: brightness(1.08);
        }

        .btn:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none !important;
        }

        .why-section {
            background: linear-gradient(180deg, transparent, rgba(6,182,212,.025));
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .feature {
            text-align: center;
            padding: 30px 20px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            transition: var(--transition);
        }

        .feature:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            display: grid;
            place-items: center;
            margin: 0 auto 18px;
            border-radius: 17px;
            background: rgba(6,182,212,.1);
            color: var(--primary);
            font-size: 24px;
        }

        .feature h3 {
            font-family: var(--heading);
            color: var(--dark);
            font-size: 17px;
            margin-bottom: 8px;
        }

        .feature p {
            color: var(--text-light);
            font-size: 13px;
        }

        .stats-section {
            padding: 70px 0;
            color: white;
            background: linear-gradient(135deg, #0f172a, #0c4a6e);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .stat {
            text-align: center;
        }

        .stat i {
            font-size: 25px;
            color: #67e8f9;
            margin-bottom: 10px;
        }

        .stat strong {
            display: block;
            font-family: var(--heading);
            font-size: 35px;
            font-weight: 900;
        }

        .stat span {
            color: rgba(255,255,255,.6);
            font-size: 13px;
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-visual {
            position: relative;
            min-height: 380px;
            display: grid;
            place-items: center;
            border-radius: 30px;
            overflow: hidden;
            background: radial-gradient(circle at 30% 30%, rgba(6,182,212,.35), transparent 30%),
                        linear-gradient(135deg, #07152e, #075985);
        }

        .code-window {
            width: 78%;
            border-radius: 15px;
            overflow: hidden;
            background: #07111f;
            box-shadow: 0 25px 60px rgba(0,0,0,.3);
        }

        .window-bar {
            display: flex;
            gap: 6px;
            padding: 12px 15px;
            background: #101b2d;
        }

        .window-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #64748b;
        }

        .code-content {
            direction: ltr;
            text-align: left;
            padding: 25px;
            color: #cbd5e1;
            font-family: monospace;
            font-size: 13px;
            line-height: 2;
        }

        .code-keyword { color: #67e8f9; }
        .code-string { color: #86efac; }
        .code-function { color: #c4b5fd; }

        .about-content .section-label {
            margin-bottom: 4px;
        }

        .about-content h2 {
            font-family: var(--heading);
            color: var(--dark);
            font-size: 35px;
            line-height: 1.4;
            margin-bottom: 15px;
        }

        .about-content > p {
            color: var(--text-light);
            margin-bottom: 25px;
        }

        .check-list {
            display: grid;
            gap: 13px;
        }

        .check-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 14px;
        }

        .check-list i {
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: rgba(16,185,129,.12);
            color: var(--success);
            font-size: 11px;
        }

        .faq-container {
            max-width: 800px;
            margin: auto;
        }

        .faq-item {
            margin-bottom: 12px;
            border: 1px solid var(--border);
            border-radius: 15px;
            overflow: hidden;
            background: var(--card);
        }

        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: transparent;
            color: var(--text);
            text-align: inherit;
            font-family: var(--heading);
            font-weight: 800;
            font-size: 14px;
        }

        .faq-question i {
            transition: var(--transition);
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
            color: var(--primary);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: .35s ease;
        }

        .faq-answer p {
            padding: 0 20px 20px;
            color: var(--text-light);
            font-size: 13px;
        }

        .faq-item.active .faq-answer {
            max-height: 200px;
        }

        .cta {
            padding: 75px 30px;
            text-align: center;
            border-radius: 30px;
            color: white;
            background: radial-gradient(circle at 15% 30%, rgba(103,232,249,.22), transparent 25%),
                        linear-gradient(135deg, #0f172a, #075985);
        }

        .cta h2 {
            font-family: var(--heading);
            font-size: 32px;
            margin-bottom: 10px;
        }

        .cta p {
            color: rgba(255,255,255,.7);
            max-width: 600px;
            margin: 0 auto 25px;
        }

        footer {
            margin-top: 90px;
            padding: 60px 0 25px;
            background: #07111f;
            color: white;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .footer-brand p {
            max-width: 350px;
            margin-top: 15px;
            color: #94a3b8;
            font-size: 13px;
        }

        .footer-title {
            font-family: var(--heading);
            font-size: 15px;
            margin-bottom: 15px;
        }

        .footer-links {
            display: grid;
            gap: 8px;
        }

        .footer-links a {
            color: #94a3b8;
            font-size: 13px;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: #67e8f9;
            padding-inline-start: 5px;
        }

        .socials {
            display: flex;
            gap: 8px;
            margin-top: 20px;
        }

        .social {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: rgba(255,255,255,.06);
            color: #cbd5e1;
            transition: var(--transition);
        }

        .social:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 22px;
            color: #64748b;
            font-size: 12px;
        }

        .back-top {
            position: fixed;
            bottom: 25px;
            inset-inline-start: 25px;
            width: 45px;
            height: 45px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: white;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 10px 25px rgba(6,182,212,.25);
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px);
            transition: var(--transition);
            z-index: 1000;
        }

        .back-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .toast {
            position: fixed;
            inset-inline-start: 25px;
            bottom: 85px;
            max-width: 330px;
            padding: 15px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 14px;
            color: white;
            background: #0f172a;
            box-shadow: 0 20px 50px rgba(0,0,0,.2);
            transform: translateY(30px);
            opacity: 0;
            visibility: hidden;
            transition: .35s ease;
            z-index: 5000;
            font-size: 13px;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .toast i {
            color: #67e8f9;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .7s ease, transform .7s ease;
        }

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

        .empty-state {
            display: none;
            text-align: center;
            padding: 50px 20px;
            color: var(--text-light);
        }

        .empty-state i {
            display: block;
            margin-bottom: 12px;
            font-size: 35px;
            color: var(--primary);
        }

        @media (max-width: 1000px) {
            .features-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 800px) {
            .nav-links { display: none; }
            .menu-btn { display: grid; }
            .about-grid { grid-template-columns: 1fr; }
            .about-visual { min-height: 320px; }
            .courses-toolbar { flex-direction: column; align-items: stretch; }
            .search-box { max-width: none; }
        }

        @media (max-width: 600px) {
            .section { padding: 65px 0; }
            .hero { padding: 75px 0 90px; }
            .hero-description { font-size: 15px; }
            .hero-stats { grid-template-columns: 1fr; gap: 20px; }
            .hero-stat:not(:last-child)::after { display: none; }
            .features-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
            .cta { padding: 55px 20px; }
            .cta h2 { font-size: 26px; }
            .about-content h2 { font-size: 27px; }
            .logo { font-size: 23px; }
            .logo-icon { width: 38px; height: 38px; }
            .header-actions .login-btn, .header-start-btn { display: none; }
        }

        /* =========================================================
           KODNA DARK ACADEMY REDESIGN — inspired by the supplied reference
        ========================================================== */
        :root {
            --primary: #18d8cf;
            --primary-dark: #0fa9a4;
            --secondary: #1687ff;
            --dark: #f5fbff;
            --dark-2: #b9c9d7;
            --text: #e9f5fb;
            --text-light: #8ca2b4;
            --bg: #050b12;
            --card: #0b141e;
            --border: rgba(96, 132, 155, .22);
            --shadow: 0 22px 70px rgba(0,0,0,.35);
            --shadow-hover: 0 28px 90px rgba(24,216,207,.14);
        }
        body {
            background:
              radial-gradient(circle at 10% 5%, rgba(22,135,255,.10), transparent 24%),
              radial-gradient(circle at 90% 20%, rgba(24,216,207,.08), transparent 25%),
              #050b12;
            color: var(--text);
        }
        body::before {
            content:"";
            position:fixed; inset:0; pointer-events:none; z-index:-1;
            opacity:.34;
            background-image:
              radial-gradient(circle at 12px 12px, rgba(87,144,178,.32) 1px, transparent 1.6px),
              linear-gradient(115deg, transparent 49.7%, rgba(61,115,145,.09) 50%, transparent 50.3%);
            background-size: 92px 92px, 180px 180px;
        }
        header {
            background: rgba(4,10,16,.78);
            border-bottom: 1px solid rgba(87,130,153,.18);
            backdrop-filter: blur(20px);
        }
        .logo { color:#fff; font-size:25px; }
        .logo-icon {
            width:46px; height:46px; border-radius:12px;
            background: linear-gradient(145deg,#07151f,#112433);
            border:1px solid rgba(24,216,207,.48);
            color:var(--primary);
            box-shadow:0 0 26px rgba(24,216,207,.12), inset 0 0 18px rgba(24,216,207,.05);
        }
        .logo-icon i { text-shadow:0 0 14px rgba(24,216,207,.55); }
        .nav-links { gap:24px; }
        .nav-links a { color:#d8e5ed; font-size:13px; }
        .nav-links a:hover { color:var(--primary); }
        .header-start-btn {
            display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:9px;
            color:#031015; background:linear-gradient(135deg,#16d7ce,#18a7f2); font-family:var(--heading);
            font-size:11px; font-weight:900; box-shadow:0 8px 24px rgba(24,216,207,.14);
        }
        .header-start-btn:hover { transform:translateY(-2px); }

        .header-actions .icon-btn {
            background:#09131d; color:#d8e5ed; border-color:rgba(87,130,153,.28);
        }
        .header-actions .icon-btn:hover { background:var(--primary); color:#021012; border-color:var(--primary); }
        .login-btn {
            background:linear-gradient(135deg,#15cfc6,#18a7f2)!important;
            color:#041015!important;
            box-shadow:0 8px 28px rgba(24,216,207,.18);
        }
        .hero {
            min-height:610px;
            padding:92px 0 76px;
            background:
              radial-gradient(circle at 50% 12%, rgba(24,216,207,.12), transparent 24%),
              radial-gradient(circle at 8% 55%, rgba(22,135,255,.14), transparent 25%),
              linear-gradient(180deg,#07131d 0%,#061019 60%,#050b12 100%);
            border-bottom:1px solid rgba(87,130,153,.15);
        }
        .hero::before { width:620px; height:620px; left:-340px; top:-240px; border-color:rgba(24,216,207,.12); box-shadow:0 0 120px rgba(24,216,207,.04); }
        .hero::after { width:720px; height:720px; right:-410px; bottom:-490px; border-color:rgba(22,135,255,.12); }
        .hero-content { max-width:920px; }
        .hero-badge {
            border-color:rgba(24,216,207,.28); background:rgba(24,216,207,.06); color:#b9e9e7;
            box-shadow:0 0 30px rgba(24,216,207,.06);
        }
        .hero-badge i { color:var(--primary); }
        .hero h1 { color:#f7fcff; font-size:clamp(34px,5vw,58px); text-shadow:0 10px 35px rgba(0,0,0,.3); }
        .hero h1 span { color:var(--primary); text-shadow:0 0 24px rgba(24,216,207,.22); }
        .hero-description { color:#9db1c0; font-size:16px; max-width:680px; }
        .btn-primary { background:linear-gradient(135deg,#16d7ce,#18a7f2); color:#031015; box-shadow:0 12px 32px rgba(24,216,207,.16); }
        .btn-outline { border-color:rgba(130,163,181,.26); background:rgba(255,255,255,.035); color:#e7f4fb; }
        .btn-outline:hover { background:#eafcff; color:#07131d; }
        .hero-stats { border-color:rgba(87,130,153,.18); }
        .hero-stat strong { color:#fff; }
        .hero-stat span { color:#71899a; }
        .section { padding:76px 0; }
        .section-header { margin-bottom:34px; }
        .section-label { color:var(--primary); text-transform:none; }
        .section-title { color:#f5fbff; }
        .section-description { color:#8197a7; }
        #paths, #why, #about, #faq { background:transparent; }
        .courses-toolbar { background:rgba(8,18,27,.72); border:1px solid rgba(87,130,153,.16); border-radius:20px; padding:13px; box-shadow:var(--shadow); }
        .search-box input, .filter-btn {
            background:#08131d; color:#dceaf1; border-color:rgba(87,130,153,.24);
        }
        .filter-btn:hover, .filter-btn.active { background:var(--primary); color:#041015; border-color:var(--primary); }
        .courses-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
        .course-card {
            background:linear-gradient(145deg,rgba(12,24,35,.96),rgba(7,15,23,.96));
            border-color:rgba(87,130,153,.18); border-radius:18px; padding:18px;
            box-shadow:0 14px 40px rgba(0,0,0,.28); min-height:300px;
        }
        .course-card::before {
            content:""; position:absolute; inset:0; pointer-events:none;
            background:linear-gradient(135deg,rgba(24,216,207,.05),transparent 45%);
        }
        .course-card:hover { transform:translateY(-5px); border-color:rgba(24,216,207,.42); box-shadow:var(--shadow-hover); }
        .course-top { margin-bottom:18px; }
        .course-icon { width:68px; height:68px; border-radius:16px; background:#0c1924!important; border:1px solid rgba(87,130,153,.18); box-shadow:inset 0 0 22px rgba(255,255,255,.025); }
        .python i { color:#4fa9ff; } .linux i { color:#ffd447; } .data i { color:#18d8cf; } .web i { color:#ff6b3d; } .computer i { color:#a978ff; } .javascript i { color:#ffe33b; }
        .level { background:rgba(24,216,207,.08)!important; color:#75d8d4!important; border:1px solid rgba(24,216,207,.18); }
        .course-card h3 { color:#f0f7fb; font-size:18px; }
        .course-card p { color:#7f95a5; font-size:13px; min-height:58px; }
        .course-meta { color:#71899a; }
        .course-footer { border-color:rgba(87,130,153,.15); }
        .course-link { color:var(--primary); }
        .course-rating { color:#ffd24d; }
        .progress { background:#12222f; }
        .progress span { background:linear-gradient(90deg,#14d5cd,#1687ff); }
        .features-grid .feature-card, .stats-grid .stat-card, .about-visual, .about-content, .faq-item, .cta {
            background:linear-gradient(145deg,rgba(10,22,32,.95),rgba(6,14,21,.95));
            border-color:rgba(87,130,153,.18); box-shadow:0 16px 50px rgba(0,0,0,.24);
        }
        .features-grid .feature-card h3, .stats-grid .stat-card strong, .about-content h2, .faq-question, .cta h2 { color:#f4fbff; }
        .features-grid .feature-card p, .stats-grid .stat-card span, .about-content p, .faq-answer { color:#8197a7; }
        .cta { position:relative; overflow:hidden; }
        footer { background:#03080d; border-top:1px solid rgba(87,130,153,.16); }
        .footer-brand h3, .footer-col h4 { color:#eff8fc; }
        .footer-brand p, .footer-col a { color:#71899a; }
        .footer-col a:hover { color:var(--primary); }
        .copyright { color:#536a79; }

        /* Full course view in the same dark academy language */
        .course-page-overlay {
            background:
              radial-gradient(circle at 12% 8%, rgba(24,216,207,.09), transparent 26%),
              radial-gradient(circle at 88% 12%, rgba(22,135,255,.10), transparent 26%),
              #050b12;
        }
        .course-page-back, .course-hero, .course-hero-stats, .course-lesson-card {
            background:linear-gradient(145deg,rgba(10,22,32,.97),rgba(6,14,21,.97));
            border-color:rgba(87,130,153,.2); color:#e8f5fb;
            box-shadow:0 18px 55px rgba(0,0,0,.28);
        }
        .course-page-brand, .course-hero p, .course-lessons-head p, .course-lesson-info p { color:#8197a7; }
        .course-hero h1, .course-lessons-head h2, .course-lesson-info h3 { color:#f3fbff; }
        .course-hero-icon { background:#07131d; border-color:rgba(24,216,207,.2); }
        .course-lesson-card:hover:not(.locked) { border-color:rgba(24,216,207,.42); box-shadow:0 20px 55px rgba(24,216,207,.08); }
        .course-lesson-number { background:#0b1c28!important; color:#76ded9!important; border-color:rgba(24,216,207,.18)!important; }
        .course-lesson-card.done .course-lesson-number { background:rgba(16,185,129,.15)!important; color:#5ee0b0!important; }
        .course-lesson-card.locked { background:#09131c; }

        @media (max-width: 1000px) { .courses-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
        @media (max-width: 600px) {
            .courses-grid { grid-template-columns:1fr; }
            .hero { min-height:auto; padding:68px 0 60px; }
            .courses-toolbar { padding:10px; }
            .course-card { min-height:0; }
        }

    
/* ===== References / Curriculum Authority ===== */
.references-section{position:relative;overflow:hidden;padding:72px 20px 78px;margin-top:20px;background:linear-gradient(180deg,rgba(4,14,28,.15),rgba(2,10,20,.72));border-top:1px solid rgba(63,224,255,.12);border-bottom:1px solid rgba(63,224,255,.08)}
.references-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 12% 30%,rgba(41,213,255,.13) 0 1px,transparent 2px),radial-gradient(circle at 82% 70%,rgba(41,213,255,.1) 0 1px,transparent 2px);background-size:90px 90px,120px 120px;pointer-events:none;opacity:.55}
.references-inner{position:relative;max-width:1120px;margin:auto}
.references-heading{text-align:center;margin-bottom:34px}
.references-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid rgba(48,220,255,.22);border-radius:999px;background:rgba(9,29,47,.72);color:#54dfff;font-size:.86rem;font-weight:800;box-shadow:0 0 26px rgba(26,203,255,.08)}
.references-heading h2{margin:16px 0 10px;font-size:clamp(1.8rem,4vw,2.65rem);font-weight:950;color:#f4fbff}
.references-heading h2 span{color:#4edfff}
.references-heading p{max-width:760px;margin:auto;color:#9fb1c3;line-height:1.9}
.references-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.reference-card{position:relative;min-height:145px;padding:22px 14px;border-radius:18px;border:1px solid rgba(127,178,205,.16);background:linear-gradient(145deg,rgba(18,35,53,.88),rgba(7,18,31,.92));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.28s ease;box-shadow:0 15px 35px rgba(0,0,0,.16)}
.reference-card:hover{transform:translateY(-5px);border-color:rgba(67,222,255,.48);box-shadow:0 18px 42px rgba(0,213,255,.12)}
.reference-logo{height:58px;min-width:110px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;color:#fff;font-weight:950;letter-spacing:-.5px;font-size:1.05rem}
.reference-logo.stanford{font-family:Georgia,serif;font-size:1.15rem;color:#f2f4f7}
.reference-logo.mit{font-weight:1000;font-size:2rem;letter-spacing:2px;color:#efefef}
.reference-logo.harvard{font-family:Georgia,serif;font-size:1rem;color:#f7f7f7}
.reference-logo.google{font-size:1.05rem;color:#e9f5ff}
.reference-logo.linux{font-size:.98rem;color:#f4f7fa}
.reference-name{font-size:.92rem;font-weight:850;color:#e7f7ff}
.reference-note{margin-top:5px;font-size:.74rem;color:#8297aa}
.references-bottom{margin-top:24px;padding:20px 24px;border:1px solid rgba(63,224,255,.13);border-radius:18px;background:rgba(8,22,36,.72);display:flex;align-items:center;gap:18px}
.references-bottom-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;background:rgba(53,218,255,.1);color:#51ddff;font-size:1.25rem}
.references-bottom h3{margin:0 0 5px;color:#eefaff;font-size:1.05rem}
.references-bottom p{margin:0;color:#8fa6b8;line-height:1.8;font-size:.88rem}
@media(max-width:900px){.references-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.references-section{padding:52px 15px}.references-grid{grid-template-columns:repeat(2,1fr)}.reference-card{min-height:125px;padding:15px 9px}.reference-logo{height:45px;margin-bottom:8px}.references-bottom{align-items:flex-start;padding:16px}.references-heading p{font-size:.9rem}}


/* ===== References: reference-design card treatment ===== */
.references-section{margin-top:0;padding-top:58px;padding-bottom:58px}
.references-heading{text-align:right;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"kicker title" "kicker desc";column-gap:18px;align-items:center;margin-bottom:28px}
.references-kicker{grid-area:kicker;justify-self:start;flex-direction:column;min-width:92px;min-height:92px;justify-content:center;border-radius:22px;font-size:.8rem}
.references-kicker i{font-size:1.45rem}
.references-heading h2{grid-area:title;margin:0 0 5px}
.references-heading p{grid-area:desc;margin:0;max-width:850px}
.reference-card{min-height:155px;border-radius:20px;position:relative;overflow:hidden}
.reference-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(51,220,255,.10),transparent 55%);pointer-events:none}
.reference-logo{position:relative;z-index:1;height:68px;min-width:130px;gap:10px;margin-bottom:10px}
.reference-logo i{font-size:2.1rem;color:#58e2ff}
.reference-logo span{display:block}
.reference-logo.mit i{color:#fff}
.reference-logo.harvard i{color:#f0f0f0}
.reference-logo.google i{color:#fff}
.reference-logo.linux i{font-size:2.35rem;color:#f2f2f2}
.reference-name,.reference-note{position:relative;z-index:1}
@media(max-width:900px){.references-heading{display:block;text-align:center}.references-kicker{display:inline-flex;flex-direction:row;min-width:0;min-height:0;margin-bottom:12px}.references-heading p{margin:0 auto}.references-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.references-section{padding:44px 15px 52px}.references-grid{grid-template-columns:repeat(2,1fr);gap:11px}.reference-card{min-height:140px;padding:14px 8px}.reference-logo{min-width:0;height:54px}.reference-logo i{font-size:1.65rem}.reference-name{font-size:.82rem}.reference-note{font-size:.68rem}}