:root {

            /**
   * colors
   */

            /* ===== GRADIENTS (Professional Dark + Muted Champagne) ===== */

            --bg-gradient-onyx: linear-gradient(145deg,
                    hsl(222, 18%, 9%) 0%,
                    hsl(222, 20%, 6%) 55%,
                    hsl(222, 24%, 4%) 100%);

            --bg-gradient-jet: linear-gradient(to bottom right,
                    hsla(222, 20%, 16%, 0.6) 0%,
                    hsla(222, 22%, 9%, 0.3) 45%,
                    hsla(222, 24%, 5%, 0) 100%),
                linear-gradient(to top left,
                    hsla(42, 55%, 65%, 0.07),
                    transparent);

            /* primary glow (used in buttons / hover) */
            --bg-gradient-yellow-1: linear-gradient(to bottom right,
                    hsl(42, 70%, 60%),
                    hsl(32, 60%, 52%));

            --bg-gradient-yellow-2: linear-gradient(135deg,
                    hsla(42, 70%, 60%, 0.35) 0%,
                    hsla(32, 60%, 52%, 0.16) 60%),
                linear-gradient(to bottom,
                    hsl(222, 20%, 7%),
                    hsl(222, 22%, 5%));

            --border-gradient-onyx: linear-gradient(to bottom right,
                    hsla(42, 70%, 60%, 0.38),
                    hsla(222, 22%, 35%, 0.15),
                    transparent);

            --text-gradient-yellow: linear-gradient(to right,
                    hsl(42, 72%, 62%),
                    hsl(32, 65%, 54%));

            /* ===== SOLID COLORS (Balanced & Clean) ===== */

            --jet: hsl(222, 14%, 19%);
            --onyx: hsl(222, 16%, 13%);
            --eerie-black-1: hsl(222, 22%, 6%);
            --eerie-black-2: hsl(222, 20%, 9%);
            --smoky-black: hsl(222, 26%, 3%);

            --white-1: hsl(0, 0%, 100%);
            --white-2: hsl(220, 20%, 96%);

            /* Accent (muted champagne – background friendly) */
            --orange-yellow-crayola: hsl(42, 70%, 60%);
            --vegas-gold: hsl(32, 60%, 52%);

            --light-gray: hsl(220, 10%, 78%);
            --light-gray-70: hsla(220, 10%, 78%, 0.7);

            --bittersweet-shimmer: hsl(0, 72%, 55%);

            /**
   * typography
   */

            --ff-poppins: 'Poppins', sans-serif;

            --fs-1: 24px;
            --fs-2: 18px;
            --fs-3: 17px;
            --fs-4: 16px;
            --fs-5: 15px;
            --fs-6: 14px;
            --fs-7: 13px;
            --fs-8: 11px;

            --fw-300: 300;
            --fw-400: 400;
            --fw-500: 500;
            --fw-600: 600;

            /**
   * shadow (controlled, premium depth)
   */

            --shadow-1:
                0 8px 24px hsla(222, 45%, 2%, 0.38),
                inset 0 1px 0 hsla(0, 0%, 100%, 0.05);

            --shadow-2:
                0 16px 46px hsla(222, 50%, 2%, 0.48),
                inset 0 1px 0 hsla(0, 0%, 100%, 0.08);

            --shadow-3:
                0 28px 82px hsla(222, 55%, 1%, 0.58),
                inset 0 1px 0 hsla(0, 0%, 100%, 0.1);

            --shadow-4:
                0 40px 112px hsla(222, 60%, 1%, 0.63);

            --shadow-5:
                0 55px 150px hsla(222, 65%, 1%, 0.68);

            /**
   * transition
   */

            --transition-1: 0.25s ease;
            --transition-2: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

        }

        /* RESET */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--ff-poppins);
        }

        /* BODY */
        body {
            background: var(--bg-gradient-onyx);
            color: var(--white-2);
        }

        /* HEADER */
        .project-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: var(--bg-gradient-jet);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid hsla(42, 70%, 60%, 0.15);
            padding: 14px 24px;
        }

        .header-left {
            max-width: 1200px;
            margin: auto;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .header-left img {
            width: 44px;
            height: 44px;
            background: var(--onyx);
            padding: 6px;
            border-radius: 12px;
            border: 1px solid hsla(42, 70%, 60%, 0.2);
        }

        .header-text h1 {
            font-size: 1.2rem;
            font-weight: var(--fw-600);
        }

        .header-text p {
            font-size: 0.85rem;
            color: var(--light-gray-70);
        }

        /* CONTAINER */
        .container {
            max-width: 1250px;
            margin: auto;
            padding: 50px 20px 70px;
        }

        /* BACK BTN */
        .back-btn {
            display: inline-block;
            margin-bottom: 20px;
            color: var(--orange-yellow-crayola);
            font-weight: var(--fw-500);
            text-decoration: none;
        }

        /* CARD */
        .project-card {
            background: var(--eerie-black-2);
            border-radius: 18px;
            padding: 28px;
            border: 1px solid hsla(42, 70%, 60%, 0.12);
            box-shadow: var(--shadow-2);
            max-width: 900px;

            margin: auto;
            margin-bottom: 40px;
            transition: var(--transition-1);
        }

        .project-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-3);
        }

        .project-card img {
            width: 100%;
            border-radius: 12px;
            margin-bottom: 18px;
        }

        .project-card h2 {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

        .project-card p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--light-gray);
            margin-bottom: 20px;
        }

        /* BUTTONS */
        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: var(--fw-500);
            text-decoration: none;
            transition: var(--transition-1);
        }

        /* PRIMARY */
        .btn-primary {
            background: var(--bg-gradient-yellow-1);
            color: var(--smoky-black);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px hsla(42, 70%, 60%, 0.25);
        }

        /* OUTLINE */
        .btn-outline {
            border: 1px solid hsla(42, 70%, 60%, 0.25);
            color: var(--orange-yellow-crayola);
        }

        .btn-outline:hover {
            background: var(--bg-gradient-yellow-2);
            color: var(--white-1);
        }

        /* MOBILE */
        @media (max-width: 768px) {
            .container {
                padding: 24px 14px 40px;
            }

            .project-card {
                padding: 18px;
            }

            .btn-group .btn-primary {
                flex: 0 0 100%;
                text-align: center;
            }

            .btn-group .btn-outline {
                flex: 1;
                text-align: center;
            }
        }