:root {

            --bg-primary: #050914;
            --bg-secondary: #08111f;

            --card: rgba(13, 27, 47, 0.72);
            --card-solid: #0d1b2f;

            --accent: #25d9c4;
            --accent-blue: #4d8dff;

            --accent-soft: rgba(37, 217, 196, 0.10);

            --text: #f4f7ff;
            --text-secondary: #92a1b8;
            --text-muted: #64738a;

            --border: rgba(255,255,255,0.08);
            --border-hover: rgba(37,217,196,0.30);

            --radius: 20px;

            --max-width: 1200px;
        }


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

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


        html {
            scroll-behavior: smooth;
        }


        body {

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

            background:
                radial-gradient(
                    circle at 15% 10%,
                    rgba(37,217,196,0.08),
                    transparent 30%
                ),

                radial-gradient(
                    circle at 85% 20%,
                    rgba(77,141,255,0.08),
                    transparent 30%
                ),

                var(--bg-primary);

            color: var(--text);

            line-height: 1.6;

            overflow-x: hidden;
        }


        body::before {

            content: "";

            position: fixed;

            inset: 0;

            background-image:

                linear-gradient(
                    rgba(255,255,255,0.015) 1px,
                    transparent 1px
                ),

                linear-gradient(
                    90deg,
                    rgba(255,255,255,0.015) 1px,
                    transparent 1px
                );

            background-size: 60px 60px;

            pointer-events: none;

            z-index: -1;
        }


        button {
            font: inherit;
            cursor: pointer;
        }


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


        .container {

            width: min(
                92%,
                var(--max-width)
            );

            margin: auto;
        }


        /* =========================================================
           NAVBAR
        ========================================================= */

        .navbar {

            position: fixed;

            top: 0;
            left: 0;

            width: 100%;

            z-index: 1000;

            padding: 18px 0;

            transition: 0.3s;
        }


        .navbar.scrolled {

            background:
                rgba(5,9,20,0.78);

            backdrop-filter:
                blur(18px);

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

            padding: 12px 0;
        }


        .nav-inner {

            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        .logo {

            display: flex;

            align-items: center;

            gap: 10px;

            font-family:
                "Space Grotesk",
                sans-serif;

            font-weight: 700;

            font-size: 1.2rem;
        }


        .logo-icon {

            width: 40px;
            height: 40px;

            display: grid;

            place-items: center;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    var(--accent),
                    var(--accent-blue)
                );

            color: #041019;
        }


        .nav-links {

            display: flex;

            align-items: center;

            gap: 30px;
        }


        .nav-links a {

            color:
                var(--text-secondary);

            font-size:
                0.9rem;

            transition:
                0.25s;
        }


        .nav-links a:hover {
            color: white;
        }


        .mobile-menu {

            display: none;

            border: none;

            background: transparent;

            color: white;
        }


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

        .hero {

            min-height: 92vh;

            display: flex;

            align-items: center;

            justify-content: center;

            text-align: center;

            padding-top: 100px;
        }


        .hero-content {
            max-width: 850px;
        }


        .badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding:
                8px 14px;

            border-radius:
                999px;

            background:
                var(--accent-soft);

            border:
                1px solid
                rgba(37,217,196,0.20);

            color:
                var(--accent);

            font-size:
                0.78rem;

            font-weight:
                600;

            margin-bottom:
                25px;
        }


        .hero h1 {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                clamp(
                    3rem,
                    8vw,
                    6rem
                );

            line-height:
                0.95;

            letter-spacing:
                -0.06em;

            background:
                linear-gradient(
                    135deg,
                    #ffffff,
                    #91f8ea,
                    #6e9cff
                );

            -webkit-background-clip:
                text;

            background-clip:
                text;

            color:
                transparent;

            margin-bottom:
                25px;
        }


        .hero-subtitle {

            font-size:
                clamp(
                    1.2rem,
                    3vw,
                    1.7rem
                );

            font-weight:
                600;

            margin-bottom:
                15px;
        }


        .hero-description {

            max-width:
                650px;

            margin:
                auto;

            color:
                var(--text-secondary);
        }


        .hero-buttons {

            display:
                flex;

            justify-content:
                center;

            gap:
                12px;

            margin-top:
                30px;
        }


        .btn {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                8px;

            padding:
                13px 20px;

            border-radius:
                12px;

            border:
                none;

            font-weight:
                600;

            transition:
                0.25s;
        }


        .btn-primary {

            background:
                linear-gradient(
                    135deg,
                    var(--accent),
                    var(--accent-blue)
                );

            color:
                #041019;
        }


        .btn-primary:hover {

            transform:
                translateY(-3px);

            box-shadow:
                0 15px 40px
                rgba(37,217,196,0.20);
        }


        .btn-secondary {

            background:
                rgba(255,255,255,0.04);

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

            color:
                white;
        }


        .btn-secondary:hover {

            background:
                rgba(255,255,255,0.08);

            transform:
                translateY(-3px);
        }


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

        section {
            padding: 100px 0;
        }


        .section-label {

            color:
                var(--accent);

            font-size:
                0.72rem;

            font-weight:
                700;

            letter-spacing:
                0.15em;

            text-transform:
                uppercase;

            margin-bottom:
                10px;
        }


        .section-title {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                clamp(
                    2rem,
                    5vw,
                    3.2rem
                );

            line-height:
                1.1;
        }


        .section-description {

            color:
                var(--text-secondary);

            max-width:
                650px;

            margin-top:
                12px;
        }


        /* =========================================================
           SEMESTERS
        ========================================================= */

        .semester-grid {

            display:
                grid;

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

            gap:
                18px;

            margin-top:
                45px;
        }


        .semester-card {

            position:
                relative;

            min-height:
                200px;

            padding:
                27px;

            border-radius:
                var(--radius);

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

            background:
                linear-gradient(
                    145deg,
                    rgba(16,34,57,0.8),
                    rgba(7,16,29,0.85)
                );

            overflow:
                hidden;

            cursor:
                pointer;

            transition:
                0.3s;
        }


        .semester-card::after {

            content:
                "";

            position:
                absolute;

            width:
                130px;

            height:
                130px;

            right:
                -55px;

            top:
                -55px;

            border-radius:
                50%;

            background:
                radial-gradient(
                    circle,
                    rgba(37,217,196,0.18),
                    transparent 70%
                );
        }


        .semester-card:hover {

            transform:
                translateY(-8px);

            border-color:
                var(--border-hover);

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


        .semester-icon {

            width:
                45px;

            height:
                45px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                13px;

            background:
                var(--accent-soft);

            color:
                var(--accent);

            margin-bottom:
                28px;
        }


        .semester-code {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                2rem;

            font-weight:
                700;
        }


        .semester-name {

            color:
                var(--text-secondary);

            font-size:
                0.8rem;
        }


        .semester-footer {

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                center;

            margin-top:
                20px;
        }


        .course-count {

            color:
                var(--text-muted);

            font-size:
                0.72rem;
        }


        .semester-arrow {

            color:
                var(--accent);

            transition:
                0.25s;
        }


        .semester-card:hover
        .semester-arrow {

            transform:
                translateX(5px);
        }


        /* =========================================================
           COURSE SECTION
        ========================================================= */

        #coursesSection {
            display: none;
        }


        #coursesSection.active {
            display: block;
        }


        .back-button {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                8px;

            border:
                none;

            background:
                transparent;

            color:
                var(--text-secondary);

            margin-bottom:
                25px;
        }


        .back-button:hover {
            color: white;
        }


        .selected-semester {

            color:
                var(--accent);

            font-size:
                0.75rem;

            font-weight:
                700;

            letter-spacing:
                0.14em;

            text-transform:
                uppercase;
        }


        .course-grid {

            display:
                grid;

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

            gap:
                18px;

            margin-top:
                40px;
        }


        .course-card {

            position:
                relative;

            padding:
                28px;

            min-height:
                180px;

            border-radius:
                var(--radius);

            background:
                var(--card);

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

            backdrop-filter:
                blur(15px);

            cursor:
                pointer;

            transition:
                0.3s;
        }


        .course-card:hover {

            transform:
                translateY(-7px);

            border-color:
                var(--border-hover);

            box-shadow:
                0 20px 50px
                rgba(0,0,0,0.35);
        }


        .course-icon {

            width:
                48px;

            height:
                48px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                14px;

            background:
                rgba(77,141,255,0.10);

            color:
                var(--accent-blue);

            margin-bottom:
                25px;
        }


        .course-code {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                1.7rem;

            font-weight:
                700;
        }


        .course-description {

            color:
                var(--text-secondary);

            font-size:
                0.78rem;

            margin-top:
                5px;
        }


        .course-arrow {

            position:
                absolute;

            right:
                20px;

            bottom:
                20px;

            color:
                var(--accent);
        }


        /* =========================================================
           RESOURCE TYPE SECTION
        ========================================================= */

        #resourceTypesSection {
            display: none;
        }


        #resourceTypesSection.active {
            display: block;
        }


        .resource-type-grid {

            display:
                grid;

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

            gap:
                20px;

            margin-top:
                40px;
        }


        .resource-type-card {

            padding:
                35px;

            border-radius:
                var(--radius);

            background:
                var(--card);

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

            transition:
                0.3s;
        }


        .resource-type-card:hover {

            transform:
                translateY(-7px);

            border-color:
                var(--border-hover);
        }


        .resource-type-icon {

            width:
                60px;

            height:
                60px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                18px;

            background:
                var(--accent-soft);

            color:
                var(--accent);

            margin-bottom:
                25px;
        }


        .resource-type-card h3 {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                1.35rem;

            margin-bottom:
                10px;
        }


        .resource-type-card p {

            color:
                var(--text-secondary);

            font-size:
                0.88rem;

            min-height:
                55px;
        }


        .drive-button {

            width:
                100%;

            margin-top:
                25px;

            padding:
                12px;

            border-radius:
                11px;

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

            background:
                rgba(255,255,255,0.04);

            color:
                white;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                8px;

            transition:
                0.25s;
        }


        .drive-button:hover {

            background:
                var(--accent-soft);

            color:
                var(--accent);

            border-color:
                var(--border-hover);
        }


        /* =========================================================
           RESOURCE LIST SECTION
        ========================================================= */

        #resourceListSection {
            display: none;
        }


        #resourceListSection.active {
            display: block;
        }


        .resource-list {

            display:
                grid;

            gap:
                14px;

            margin-top:
                40px;

            max-width:
                850px;
        }


        .resource-item {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                20px;

            padding:
                20px 22px;

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

            border-radius:
                16px;

            background:
                var(--card);

            backdrop-filter:
                blur(15px);

            transition:
                0.25s;
        }


        .resource-item:hover {

            border-color:
                var(--border-hover);

            transform:
                translateX(5px);
        }


        .resource-item-left {

            display:
                flex;

            align-items:
                center;

            gap:
                15px;

            min-width:
                0;
        }


        .resource-item-icon {

            width:
                45px;

            height:
                45px;

            flex-shrink:
                0;

            display:
                grid;

            place-items:
                center;

            border-radius:
                12px;

            background:
                var(--accent-soft);

            color:
                var(--accent);
        }


        .resource-item-name {

            font-weight:
                600;

            word-break:
                break-word;
        }


        .resource-item-type {

            color:
                var(--text-muted);

            font-size:
                0.72rem;

            margin-top:
                2px;
        }


        .resource-open-button {

            flex-shrink:
                0;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                7px;

            padding:
                9px 14px;

            border-radius:
                10px;

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

            background:
                rgba(255,255,255,0.04);

            color:
                white;

            transition:
                0.25s;
        }


        .resource-open-button:hover {

            background:
                var(--accent-soft);

            color:
                var(--accent);

            border-color:
                var(--border-hover);
        }


        .empty-resource {

            padding:
                35px;

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

            border-radius:
                16px;

            color:
                var(--text-secondary);

            text-align:
                center;
        }


        /* =========================================================
           ABOUT
        ========================================================= */

        .about-grid {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                40px;

            align-items:
                center;
        }


        .about-card {

            padding:
                35px;

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

            border-radius:
                var(--radius);

            background:
                linear-gradient(
                    135deg,
                    rgba(37,217,196,0.07),
                    rgba(77,141,255,0.06)
                );
        }


        .about-card h3 {

            font-family:
                "Space Grotesk",
                sans-serif;

            font-size:
                1.7rem;

            margin-bottom:
                15px;
        }


        .about-card p {

            color:
                var(--text-secondary);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {

            padding:
                55px 0 30px;

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

            background:
                #040711;
        }


        .footer-top {

            display:
                flex;

            justify-content:
                space-between;

            gap:
                30px;
        }


        .footer-description {

            color:
                var(--text-secondary);

            max-width:
                350px;

            margin-top:
                10px;
        }


        .footer-links {

            display:
                flex;

            gap:
                20px;

            flex-wrap:
                wrap;
        }


        .footer-links a {

            color:
                var(--text-secondary);

            font-size:
                0.85rem;
        }


        .footer-links a:hover {
            color: white;
        }


        .copyright {

            margin-top:
                35px;

            padding-top:
                20px;

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

            color:
                var(--text-muted);

            font-size:
                0.75rem;
        }


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

        .toast {

            position:
                fixed;

            right:
                20px;

            bottom:
                20px;

            padding:
                14px 18px;

            background:
                #0d2035;

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

            border-radius:
                12px;

            display:
                flex;

            align-items:
                center;

            gap:
                8px;

            transform:
                translateY(100px);

            opacity:
                0;

            transition:
                0.3s;

            z-index:
                2000;
        }


        .toast.show {

            transform:
                translateY(0);

            opacity:
                1;
        }


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

        @media (max-width: 1000px) {

            .semester-grid,
            .course-grid {

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


            .resource-type-grid {

                grid-template-columns:
                    1fr;
            }

        }


        @media (max-width: 700px) {

            .nav-links {

                position:
                    absolute;

                top:
                    70px;

                left:
                    4%;

                right:
                    4%;

                padding:
                    20px;

                background:
                    rgba(8,17,31,0.97);

                backdrop-filter:
                    blur(20px);

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

                border-radius:
                    16px;

                display:
                    none;

                flex-direction:
                    column;

                align-items:
                    stretch;
            }


            .nav-links.active {
                display: flex;
            }


            .mobile-menu {
                display: block;
            }


            .about-grid {
                grid-template-columns: 1fr;
            }


            .resource-item {

                align-items:
                    flex-start;

                flex-direction:
                    column;
            }


            .resource-open-button {

                width:
                    100%;
            }

        }


        @media (max-width: 480px) {

            .semester-grid,
            .course-grid {

                grid-template-columns:
                    1fr;
            }


            .hero-buttons {

                flex-direction:
                    column;
            }


            section {

                padding:
                    70px 0;
            }

        }