/* ─── Base ─────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; }
        html { background-color: #020617; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #e2e8f0; scroll-behavior: smooth; }

        /* ─── Mesh background ───────────────────────── */
        .bg-mesh {
            background-color: #020617;
            background-image:
                radial-gradient(ellipse at 0% 0%,   rgba(37, 99, 235, 0.18) 0px, transparent 55%),
                radial-gradient(ellipse at 100% 100%,rgba(109, 40, 217, 0.15) 0px, transparent 55%),
                radial-gradient(ellipse at 60% 40%,  rgba(6, 182, 212, 0.07) 0px, transparent 40%);
        }

        /* ─── Glass panels ──────────────────────────── */
        .glass {
            background: rgba(13, 22, 40, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.07);
            transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        }
        .glass:hover {
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 0 32px rgba(59,130,246,0.08);
        }
        .glass-lift:hover { transform: translateY(-6px); }

        /* ─── Text glow ─────────────────────────────── */
        .glow-blue   { text-shadow: 0 0 28px rgba(59,130,246,0.6); }
        .glow-cyan   { text-shadow: 0 0 28px rgba(6,182,212,0.5); }
        .glow-violet { text-shadow: 0 0 28px rgba(139,92,246,0.5); }

        /* ─── Gradient text ─────────────────────────── */
        .grad-text {
            background: linear-gradient(135deg, #60a5fa 0%, #06b6d4 50%, #8b5cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .grad-text-warm {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ─── Badges ────────────────────────────────── */
        .badge {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 999px;
        }
        .badge-blue   { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
        .badge-cyan   { background: rgba(6,182,212,0.12);  color: #22d3ee; border: 1px solid rgba(6,182,212,0.25); }
        .badge-violet { background: rgba(139,92,246,0.12); color: #a78bfa; border: 1px solid rgba(139,92,246,0.25); }
        .badge-green  { background: rgba(34,197,94,0.12);  color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }

        /* ─── Tag pill ──────────────────────────────── */
        .tag {
            font-size: 0.6rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: #94a3b8;
        }
        .tag-blue   { background: rgba(59,130,246,0.1);  border-color: rgba(59,130,246,0.2);  color: #93c5fd; }
        .tag-cyan   { background: rgba(6,182,212,0.1);   border-color: rgba(6,182,212,0.2);   color: #67e8f9; }
        .tag-violet { background: rgba(139,92,246,0.1);  border-color: rgba(139,92,246,0.2);  color: #c4b5fd; }
        .tag-green  { background: rgba(34,197,94,0.1);   border-color: rgba(34,197,94,0.2);   color: #86efac; }
        .tag-orange { background: rgba(249,115,22,0.1);  border-color: rgba(249,115,22,0.2);  color: #fdba74; }

        /* ─── Pipeline ──────────────────────────────── */
        .pipeline-node { transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: default; }
        .pipeline-node:hover { transform: scale(1.04); }
        .pipeline-node.active {
            box-shadow: 0 0 0 2px rgba(59,130,246,0.6), 0 8px 32px rgba(59,130,246,0.2);
        }
        .pipeline-arrow {
            display: flex;
            align-items: center;
            color: #334155;
        }
        .pipe-line {
            height: 2px;
            width: 100%;
            background: linear-gradient(90deg, #1e3a5f, #334155);
            position: relative;
            overflow: hidden;
        }
        .pipe-line::after {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            animation: flowLine 3s ease-in-out infinite;
        }
        @keyframes flowLine {
            0%   { left: -60%; }
            100% { left: 160%; }
        }

        /* ─── Terminal ──────────────────────────────── */
        .terminal-line { opacity: 0; }
        .terminal-line.visible { opacity: 1; }
        .cursor-blink {
            display: inline-block;
            width: 8px; height: 15px;
            background: #22d3ee;
            animation: blink 1s step-end infinite;
            vertical-align: text-bottom;
            margin-left: 2px;
        }
        @keyframes blink { 50% { opacity: 0; } }

        /* ─── Section label ─────────────────────────── */
        .section-label {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #3b82f6;
        }

        /* ─── Scanline effect for terminal ─────────── */
        .scanlines {
            position: relative;
            overflow: hidden;
        }
        .scanlines::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.15) 2px,
                rgba(0,0,0,0.15) 4px
            );
            pointer-events: none;
            z-index: 1;
        }

        /* ─── Dot grid decoration ───────────────────── */
        .dot-grid {
            background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        /* ─── Infra stat number ─────────────────────── */
        .stat-num { font-variant-numeric: tabular-nums; }

        /* ─── Scroll-reveal ─────────────────────────── */
        .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
        .reveal.in-view { opacity: 1; transform: translateY(0); }

/* ─── Contact ─── */
body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #020617;
            background-image:
                radial-gradient(ellipse at 10% 20%, rgba(37,99,235,0.15) 0, transparent 55%),
                radial-gradient(ellipse at 90% 80%, rgba(109,40,217,0.12) 0, transparent 55%);
            color: #e2e8f0;
        }
        .glass {
            background: rgba(13,22,40,0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.07);
        }
        .grad-text {
            background: linear-gradient(135deg,#60a5fa 0%,#06b6d4 50%,#8b5cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .input-field {
            width: 100%;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            color: #e2e8f0;
            font-size: 0.875rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .input-field::placeholder { color: #475569; }
        .input-field:focus {
            border-color: rgba(59,130,246,0.6);
            box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
        }
        .input-field.is-invalid {
            border-color: rgba(239,68,68,0.7) !important;
            box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
        }
        .input-field.is-valid {
            border-color: rgba(34,197,94,0.5);
        }
        .field-error { font-size: 0.65rem; color: #f87171; margin-top: 0.3rem; display: none; }
        .field-error.visible { display: block; }
        .label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; margin-bottom: 0.4rem; display: block; }
        .label-required::after { content: ' *'; color: #3b82f6; }

/* ─── Admin ─── */
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #020617; color: #e2e8f0; }
        .glass { background: rgba(13,22,40,0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.07); }
        .badge-unread { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
        .badge-read   { background: rgba(255,255,255,0.04); color: #475569; border: 1px solid rgba(255,255,255,0.08); font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
        .mono { font-family: 'JetBrains Mono', monospace; }