:root {
            --pgs-bg: #0b1020;
            --pgs-card: rgba(255, 255, 255, .06);
            --pgs-border: rgba(255, 255, 255, .12);
            --pgs-muted: rgba(255, 255, 255, .72);
        }

        body {
            background: #0b1020;
            color: #fff;
        }

        .text-muted-soft {
            color: var(--pgs-muted) !important;
        }

        /* Subtle gradient + grid */
        .hero {
            background:
                radial-gradient(1200px 600px at 15% 0%, rgba(99, 102, 241, .35), transparent 60%),
                radial-gradient(900px 500px at 90% 10%, rgba(34, 197, 94, .25), transparent 55%),
                radial-gradient(800px 500px at 60% 90%, rgba(59, 130, 246, .25), transparent 55%),
                linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 35%);
            position: relative;
            overflow: hidden;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
            background-size: 42px 42px;
            opacity: .08;
            pointer-events: none;
        }

        .glass {
            background: var(--pgs-card);
            border: 1px solid var(--pgs-border);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 1.25rem;
        }

        .nav-blur {
            background: rgba(11, 16, 32, .65);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .badge-soft {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .85);
        }

        .icon-pill {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
        }

        .btn-primary {
            background: #6366f1;
            border-color: #6366f1;
        }

        .btn-primary:hover {
            background: #5458e8;
            border-color: #5458e8;
        }

        .btn-outline-light {
            border-color: rgba(255, 255, 255, .22);
            color: rgba(255, 255, 255, .88);
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .28);
            color: #fff;
        }

        .section {
            padding: 80px 0;
        }

        .divider {
            border-top: 1px solid rgba(255, 255, 255, .1);
        }

        code.kbdlike {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            padding: .15rem .4rem;
            border-radius: .5rem;
            color: rgba(255, 255, 255, .9);
        }