/* =========================================================
   SHARED SECTION EYEBROW — WHAT I DO / ABOUT ME / FEATURED WORK
   Kept here because these labels use the same visual language.
========================================================= */
.jg-flow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .90);
    border: 1px solid rgba(56, 189, 248, .40);
    color: #38bdf8;
    font-family: Azonix, Inter, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 15px rgba(56, 189, 248, .12);
    position: relative;
    top: -20px;
    overflow: hidden;
}

.jg-flow-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    transform: translateX(-120%);
    animation: jgFlowSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.jg-flow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #38bdf8;
    animation: jgFlowPulse 2s infinite;
}

@keyframes jgFlowPulse {
    0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(56,189,248,.70); }
    70% { transform: scale(1.10); box-shadow: 0 0 0 8px rgba(56,189,248,0); }
    100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}

@keyframes jgFlowSweep {
    0%, 20% { transform: translateX(-120%); }
    55%, 75% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

@media (max-width: 700px) {
    .jg-flow-pill {
        font-size: 9px;
        padding: 6px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jg-flow-pill::after,
    .jg-flow-dot {
        animation: none;
    }
}

/* =========================================================
   JABIRGFX — PROCESS MATRIX
   Fully scoped to .jg-process-matrix to avoid conflicts
   with the existing portfolio styles.
========================================================= */

.jg-process-matrix-section {
    position: relative;
    isolation: isolate;
    width: 100%;
    box-sizing: border-box;
    padding-top: 70px !important;
    padding-bottom: 75px !important;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(90, 169, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(90, 169, 255, 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Process-section grid overlay — kept behind all content */
.jg-process-matrix-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 20%, rgba(138, 36, 255, 0.08), transparent 42%),
        radial-gradient(circle at 85% 80%, rgba(90, 169, 255, 0.08), transparent 42%);
}

.jg-process-matrix {
    width: min(100%, 1280px);
    margin: 0 auto;
    color: #f8fafc;
    font-family: Inter, sans-serif;
}

.jg-process-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 760px;
    margin: 0 0 44px;
}

.jg-process-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 14px;
    border: 1px solid rgba(56, 189, 248, .40);
    border-radius: 999px;
    background: rgba(15, 23, 42, .90);
    color: #38bdf8;
    font-family: Azonix, Inter, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 15px rgba(56, 189, 248, .12);
    overflow: hidden;
}

.jg-process-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transform: translateX(-120%);
    animation: jgProcessSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.jg-process-live-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #38bdf8;
    animation: jgProcessPulse 2s infinite;
}

.jg-process-header h2 {
    margin: 0 0 16px;
    margin: 0;
    color: #fff;
    font-family: Azonix, Inter, sans-serif;
    font-size: clamp(30px, 4.2vw, 52px);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jg-process-gradient-text {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #5AA9FF,
        #514BFF,
        #4B00FF,
        #8A24FF,
        #C46CFF
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.jg-process-header p {
    max-width: 650px;
    margin: 0;
    color: #d7deea;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
}

.jg-process-status {
    width: 100%;
    margin-bottom: 28px;
    font-family: Inter, sans-serif;
}

.jg-process-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
    padding: 0 2px;
    color: #dbe3ef;
    font-size: 12px;
    font-weight: 500;
}

.jg-process-status-label {
    margin-right: 8px;
    color: #38bdf8;
    font-weight: 700;
    letter-spacing: .06em;
}

.jg-process-percent {
    color: #38bdf8;
    font-size: 16px;
    font-weight: 800;
}

.jg-process-energy-bg {
    position: relative;
    width: 100%;
    height: 14px;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(138, 36, 255, .30);
    border-radius: 999px;
    background: rgba(15, 23, 42, .90);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}

.jg-process-energy-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #5AA9FF 0%,
        #514BFF 25%,
        #4B00FF 50%,
        #8A24FF 75%,
        #C46CFF 100%
    );
    box-shadow:
        0 0 15px #8A24FF,
        0 0 30px rgba(216,180,254,.65);
    transition: width .45s cubic-bezier(.16,1,.3,1);
}

.jg-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    font-family: Inter, sans-serif;
}

.jg-process-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 300px;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 26px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(90, 169, 255, .25);
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(18, 25, 48, .85) 0%,
        rgba(10, 15, 30, .92) 100%
    );
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        box-shadow .4s ease;
}

.jg-process-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(138,36,255,.60),
        transparent,
        rgba(90,169,255,.60)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .20;
    pointer-events: none;
    transition: opacity .4s ease;
}

.jg-process-card > * {
    position: relative;
    z-index: 1;
}

.jg-process-card:hover,
.jg-process-card.jg-process-active,
.jg-process-card:focus-within {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(138, 36, 255, .85);
    box-shadow:
        0 20px 40px -10px rgba(138,36,255,.30),
        0 0 25px rgba(216,180,254,.25);
}

.jg-process-card:hover::before,
.jg-process-card.jg-process-active::before,
.jg-process-card:focus-within::before {
    opacity: 1;
}

.jg-process-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.jg-process-icon {
    display: flex;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(138,36,255,.40);
    border-radius: 18px;
    background: rgba(30,18,60,.95);
    color: #d8b4fe;
    transition:
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        transform .4s ease,
        box-shadow .4s ease;
}

.jg-process-icon svg {
    width: 28px;
    height: 28px;
}

.jg-process-card:hover .jg-process-icon,
.jg-process-card.jg-process-active .jg-process-icon,
.jg-process-card:focus-within .jg-process-icon {
    border-color: #d8b4fe;
    background: linear-gradient(135deg, #8A24FF, #C46CFF);
    color: #fff;
    transform: rotate(6deg) scale(1.1);
    box-shadow: 0 0 20px rgba(216,180,254,.70);
}

.jg-process-badge {
    padding: 5px 11px;
    border: 1px solid rgba(216,180,254,.35);
    border-radius: 20px;
    background: rgba(138,36,255,.15);
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .05em;
    white-space: nowrap;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.jg-process-card:hover .jg-process-badge,
.jg-process-card.jg-process-active .jg-process-badge,
.jg-process-card:focus-within .jg-process-badge {
    border-color: transparent;
    background: linear-gradient(90deg, #8A24FF, #C46CFF);
    color: #fff;
    box-shadow: 0 0 12px rgba(216,180,254,.60);
}

.jg-process-card h3 {
    margin: 0 0 10px;
    color: #d8b4fe;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
}

.jg-process-card p {
    margin: 0;
    color: #d7deea;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}

.jg-process-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(71,85,105,.60);
}

.jg-process-card-footer > span {
    color: #e9d5ff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
}

.jg-process-card-footer button {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.jg-process-card-footer button svg {
    width: 16px;
    height: 16px;
}

.jg-process-card:hover .jg-process-card-footer button,
.jg-process-card.jg-process-active .jg-process-card-footer button,
.jg-process-card:focus-within .jg-process-card-footer button {
    border-color: #d8b4fe;
    background: #d8b4fe;
    color: #070913;
    transform: translate(2px,-2px);
    box-shadow: 0 0 15px rgba(216,180,254,.90);
}

@keyframes jgProcessPulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(56,189,248,.70);
    }
    70% {
        transform: scale(1.10);
        box-shadow: 0 0 0 8px rgba(56,189,248,0);
    }
    100% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(56,189,248,0);
    }
}

@keyframes jgProcessSweep {
    0%, 20% { transform: translateX(-120%); }
    55%, 75% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

@media (max-width: 1050px) {
    .jg-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jg-process-card {
        min-height: 285px;
    }
}

@media (max-width: 700px) {
    .jg-process-matrix-section {
        padding: 52px 18px 60px !important;
    }

    .jg-process-header {
        margin-bottom: 34px;
    }

    .jg-process-pill {
        padding: 6px 10px;
        font-size: 9px;
    }

    .jg-process-header h2 {
        font-size: clamp(30px, 9vw, 48px);
    }

    .jg-process-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .jg-process-status-row {
        align-items: flex-end;
        font-size: 10px;
    }

    .jg-process-status-row > span:first-child {
        max-width: calc(100% - 55px);
        line-height: 1.5;
    }

    .jg-process-percent {
        font-size: 14px;
    }

    .jg-process-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jg-process-card {
        min-height: 0;
        padding: 21px;
    }

    .jg-process-card-top {
        margin-bottom: 20px;
    }

    .jg-process-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 16px;
    }

    .jg-process-icon svg {
        width: 25px;
        height: 25px;
    }

    .jg-process-badge {
        font-size: 9px;
        padding: 5px 9px;
    }

    .jg-process-card h3 {
        font-size: 18px;
    }

    .jg-process-card p {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jg-process-pill::after,
    .jg-process-live-dot {
        animation: none;
    }

    .jg-process-card,
    .jg-process-icon,
    .jg-process-energy-fill,
    .jg-process-badge,
    .jg-process-card-footer button {
        transition: none;
    }
}