*,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .bg-grid-pattern {
            background-image:
                linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
            background-size: 40px 40px;
        }

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

        .reveal.visible {
            opacity: 1;
            transform: none;
            filter: none;
        }

        .reveal.delay-100 {
            transition-delay: .1s;
        }

        .reveal.delay-200 {
            transition-delay: .2s;
        }

        .reveal.delay-300 {
            transition-delay: .3s;
        }

        /* ===== UPDATED: Browser-frame card ===== */
        .project-card-wrap {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
            cursor: pointer;
        }

        .project-card-wrap:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 60px rgba(37, 99, 235, .22);
        }

        .project-card-wrap::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%), rgba(37, 99, 235, .12), transparent 60%);
            opacity: 0;
            transition: opacity .4s;
            pointer-events: none;
            z-index: 1;
        }

        .project-card-wrap:hover::before {
            opacity: 1;
        }

        /* Browser bar inside card */
        .browser-bar {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 12px;
            height: 26px;
            background: #1e1e1e;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            flex-shrink: 0;
        }

        .browser-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .dot-r {
            background: #ff5f57;
        }

        .dot-y {
            background: #febc2e;
        }

        .dot-g {
            background: #28c840;
        }

        .url-pill {
            flex: 1;
            height: 11px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.08);
            margin: 0 8px;
        }

        /* Screenshot container below browser bar */
        .card-img-wrap {
            position: relative;
            width: 100%;
            /* fixed height for archive grid (3 col) */
            height: 180px;
            background: #0d1117;
            overflow: hidden;
        }

        .card-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
            transition: transform .7s cubic-bezier(.25, .46, .45, .94);
        }

        .project-card-wrap:hover .card-img-wrap img {
            transform: scale(1.06);
        }

        /* Gradient fade at bottom of image */
        .card-img-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 50%, rgba(10, 10, 10, 0.7) 100%);
            pointer-events: none;
        }

        /* Hover overlay */
        .img-hover-overlay {
            position: absolute;
            inset: 0;
            background: rgba(37, 99, 235, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity .3s;
            z-index: 2;
        }

        .project-card-wrap:hover .img-hover-overlay {
            opacity: 1;
        }

        .filter-btn.active {
            background: #2563eb;
            color: white;
            border-color: #2563eb;
        }

        .tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            background: rgba(37, 99, 235, .12);
            color: #2563eb;
        }

        .grad-text {
            background: linear-gradient(135deg, #2563eb, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .noise-overlay {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: .03;
            mix-blend-mode: overlay;
        }

        .project-item.hidden-filter {
            display: none;
        }

        #project-modal {
            display: none;
        }

        #project-modal.open {
            display: flex;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #2563eb44;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #2563eb99;
        }