* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Manrope', sans-serif;
            background: #f8fbff;
            color: #0f172a;
            overflow-x: hidden;
        }
        .font-mono { font-family: 'JetBrains Mono', monospace; }

        :root {
            --brand: #0f62fe;
            --brand2: #00a6fb;
            --soft: rgba(15, 98, 254, 0.08);
            --line: rgba(15, 98, 254, 0.14);
        }

        .grid-bg {
            background-image:
                linear-gradient(rgba(15, 98, 254, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(15, 98, 254, 0.04) 1px, transparent 1px);
            background-size: 56px 56px;
        }

        .glow {
            position: absolute;
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(15, 98, 254, 0.10) 0%, transparent 72%);
            border-radius: 50%;
            filter: blur(72px);
            pointer-events: none;
        }

        .nav-blur {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(15, 98, 254, 0.08);
        }

        .glass-card {
            background: rgba(255,255,255,0.94);
            backdrop-filter: blur(14px);
            border: 1px solid var(--line);
            box-shadow: 0 8px 30px rgba(15, 98, 254, 0.07);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-3px);
            border-color: rgba(15, 98, 254, 0.24);
            box-shadow: 0 16px 44px rgba(15, 98, 254, 0.12);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--brand), var(--brand2));
            color: white;
            box-shadow: 0 10px 28px rgba(15, 98, 254, 0.24);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 34px rgba(15, 98, 254, 0.30);
        }

        .btn-outline {
            border: 1.5px solid var(--brand);
            color: var(--brand);
            background: rgba(255,255,255,0.75);
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            background: rgba(15, 98, 254, 0.05);
            box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.06);
        }

        .text-gradient {
            background: linear-gradient(135deg, #0f62fe, #00a6fb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tag {
            background: rgba(15, 98, 254, 0.08);
            border: 1px solid rgba(15, 98, 254, 0.18);
            color: #0f62fe;
        }

        .tier-basic { background: linear-gradient(135deg, #10b981, #059669); }
        .tier-enterprise { background: linear-gradient(135deg, #0f62fe, #00a6fb); }
        .tier-flagship { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

        .code-block {
            background: #0b1220;
            border-left: 3px solid #0f62fe;
            font-family: 'JetBrains Mono', monospace;
        }

        .article-card {
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
        }

        .article-card:hover {
            border-color: rgba(15, 98, 254, 0.28);
            box-shadow: 0 10px 28px rgba(15, 98, 254, 0.08);
        }

        .scene-icon {
            background: linear-gradient(135deg, rgba(15, 98, 254, 0.10), rgba(0, 166, 251, 0.06));
            border: 1px solid rgba(15, 98, 254, 0.16);
        }

        .step-line {
            background: linear-gradient(to bottom, #0f62fe, rgba(15, 98, 254, 0.16));
        }

        .input-glow:focus {
            outline: none;
            border-color: #0f62fe;
            box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.10);
        }

        .holo-accent {
            background: linear-gradient(135deg, #0f62fe, #1d4ed8);
        }

        .infra-accent {
            background: linear-gradient(135deg, #00a6fb, #0f62fe);
        }