.tw-portfolio.tw-portfolio--reference {
    --tw-portfolio-bg: #031923;
    --tw-portfolio-bg-deep: #02141d;
    --tw-portfolio-cyan: #19d7fa;
    --tw-portfolio-gold: #f0b534;
    --tw-portfolio-white: #f7fbff;
    --tw-portfolio-muted: rgba(238, 247, 252, 0.84);
    --tw-portfolio-border: rgba(73, 174, 202, 0.46);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(5rem, 7vw, 7rem) 0 clamp(7rem, 11vw, 10rem);
    color: var(--tw-portfolio-white);
    background:
        radial-gradient(48rem 22rem at 50% -7%, rgba(0, 206, 255, 0.12), transparent 72%),
        radial-gradient(26rem 21rem at -4% 53%, rgba(238, 181, 52, 0.14), transparent 76%),
        radial-gradient(25rem 22rem at 104% 56%, rgba(0, 206, 255, 0.10), transparent 76%),
        linear-gradient(180deg, #04202d 0%, var(--tw-portfolio-bg) 45%, var(--tw-portfolio-bg-deep) 100%);
}

/* Reference light trails: cyan/gold arcs that sweep underneath the cards. */
.tw-portfolio.tw-portfolio--reference::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -22rem;
    width: 132%;
    height: 38rem;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: .92;
    background:
        radial-gradient(ellipse at 50% 100%,
            transparent 0 42.8%,
            rgba(17, 219, 255, 0.92) 43.0% 43.18%,
            rgba(17, 219, 255, 0.16) 43.28% 43.5%,
            transparent 43.7% 48.8%,
            rgba(244, 179, 52, 0.82) 49.0% 49.16%,
            rgba(244, 179, 52, 0.14) 49.28% 49.55%,
            transparent 49.75% 55.2%,
            rgba(20, 196, 239, 0.52) 55.35% 55.52%,
            transparent 55.74% 100%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 198, 255, 0.08), transparent 58%);
    filter: drop-shadow(0 -2px 14px rgba(0, 207, 255, 0.11));
}

.tw-portfolio.tw-portfolio--reference::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(13deg, transparent 0 14%, rgba(24, 199, 241, .10) 14.2% 14.35%, transparent 14.6% 100%) left bottom / 47% 46% no-repeat,
        linear-gradient(-12deg, transparent 0 13%, rgba(240, 181, 52, .11) 13.2% 13.36%, transparent 13.65% 100%) right bottom / 48% 45% no-repeat,
        radial-gradient(circle at 7% 76%, rgba(240,181,52,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 11% 82%, rgba(25,215,250,.85) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 79%, rgba(240,181,52,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 85%, rgba(25,215,250,.8) 0 1px, transparent 2px);
    opacity: .75;
}

.tw-portfolio__shell {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 3rem), 91rem);
    margin-inline: auto;
}

.tw-portfolio__top {
    position: relative;
    min-height: 10.6rem;
    margin-bottom: 3.15rem;
}

.tw-portfolio__heading {
    width: min(100%, 59rem);
    margin-inline: auto;
    text-align: center;
}

.tw-portfolio__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 0 0 1.05rem;
    color: var(--tw-portfolio-gold);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1;
}

.tw-portfolio__eyebrow-line {
    width: 3.45rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(240,181,52,0), rgba(240,181,52,.96));
}

.tw-portfolio__eyebrow-line:last-child {
    transform: scaleX(-1);
}

.tw-portfolio__title {
    margin: 0;
    color: var(--tw-portfolio-white);
    font-size: clamp(2.55rem, 4.15vw, 4.25rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 .35rem 1.35rem rgba(0,0,0,.16);
}

.tw-portfolio__title-accent {
    color: var(--tw-portfolio-cyan);
    text-shadow: 0 0 1.6rem rgba(25,215,250,.14);
}

.tw-portfolio__intro {
    width: min(100%, 57rem);
    margin: 1.05rem auto 0;
    color: var(--tw-portfolio-muted);
    font-size: clamp(.98rem, 1.3vw, 1.14rem);
    font-weight: 500;
    line-height: 1.95;
}

.tw-portfolio__intro p { margin: 0; }

.tw-portfolio__all {
    position: absolute;
    top: 3.15rem;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 4.15rem;
    padding-inline: 1.8rem;
    border: 1.5px solid rgba(240,181,52,.92);
    border-radius: 1rem;
    color: #f7fbff;
    background: rgba(2,19,28,.36);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 1.5rem rgba(240,181,52,.035);
    backdrop-filter: blur(8px);
    font-size: 1.03rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.tw-portfolio__all:hover {
    transform: translateY(-2px);
    background: rgba(240,181,52,.075);
    border-color: #ffc651;
}

.tw-portfolio__all-arrow {
    color: var(--tw-portfolio-gold);
    font-size: 1.55rem;
    line-height: 1;
}

.tw-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.45rem;
    direction: rtl;
}

.tw-portfolio-card {
    position: relative;
    min-width: 0;
}

.tw-portfolio-card__inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--tw-portfolio-border);
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(3,26,37,.62) 0%, rgba(2,20,29,.92) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(121,222,246,.035),
        0 1.1rem 2.4rem rgba(0,0,0,.17);
    backdrop-filter: blur(4px);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.tw-portfolio-card__inner:hover {
    transform: translateY(-5px);
    border-color: rgba(43,220,255,.64);
    box-shadow:
        inset 0 0 0 1px rgba(121,222,246,.08),
        0 1.4rem 3rem rgba(0,0,0,.24),
        0 0 2.2rem rgba(25,215,250,.055);
}

.tw-portfolio-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.29 / 1;
    margin: .85rem .85rem 0;
    border-radius: .95rem;
    background: linear-gradient(135deg, #0a3244 0%, #081a25 48%, #e2ac39 150%);
}

.tw-portfolio-card__media img,
.tw-portfolio-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.tw-portfolio-card__media img {
    object-fit: cover;
    transition: transform .42s ease;
}

.tw-portfolio-card__inner:hover .tw-portfolio-card__media img {
    transform: scale(1.04);
}

.tw-portfolio-card__media-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(2,18,28,.16) 100%);
}

.tw-portfolio-card__placeholder {
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.72);
    font-size: 3rem;
    font-weight: 900;
}

.tw-portfolio-card__body {
    position: relative;
    min-height: 10.6rem;
    padding: 1.25rem 1.35rem 1.35rem;
    text-align: right;
}

.tw-portfolio-card__title {
    margin: 0;
    color: var(--tw-portfolio-white);
    font-size: clamp(1.05rem, 1.34vw, 1.28rem);
    font-weight: 900;
    line-height: 1.65;
}

.tw-portfolio-card__category {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: .72rem 0 0;
    color: rgba(239,247,252,.84);
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.7;
}

.tw-portfolio-card__category-dot {
    width: .52rem;
    height: .52rem;
    flex: 0 0 .52rem;
    border-radius: 50%;
    background: var(--tw-portfolio-cyan);
    box-shadow: 0 0 .85rem rgba(25,215,250,.65);
}

.tw-portfolio-card__link {
    position: absolute;
    left: 1.25rem;
    bottom: 1.18rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border: 2px solid rgba(240,181,52,.98);
    border-radius: 50%;
    color: #ffd160;
    background: rgba(3,23,33,.88);
    box-shadow: 0 0 1.1rem rgba(240,181,52,.045);
    font-size: 1.65rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.tw-portfolio-card__link:hover {
    transform: translateY(-2px);
    color: #11171d;
    background: var(--tw-portfolio-gold);
    box-shadow: 0 0 1.4rem rgba(240,181,52,.2);
}

@media (max-width: 1180px) {
    .tw-portfolio__shell { width: min(calc(100% - 2rem), 84rem); }
    .tw-portfolio__grid { gap: 1.15rem; }
    .tw-portfolio__all { top: 3rem; }
}

@media (max-width: 1050px) {
    .tw-portfolio__top {
        display: grid;
        justify-items: center;
        min-height: 0;
        margin-bottom: 2.5rem;
    }

    .tw-portfolio__all {
        position: static;
        margin-top: 1.35rem;
    }

    .tw-portfolio__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .tw-portfolio.tw-portfolio--reference {
        padding: 4rem 0 6rem;
    }

    .tw-portfolio.tw-portfolio--reference::before {
        bottom: -15rem;
        width: 210%;
        height: 28rem;
        opacity: .72;
    }

    .tw-portfolio__shell {
        width: min(calc(100% - 1.25rem), 38rem);
    }

    .tw-portfolio__title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .tw-portfolio__intro {
        font-size: .94rem;
        line-height: 1.85;
    }

    .tw-portfolio__all {
        min-height: 3.5rem;
        padding-inline: 1.25rem;
        font-size: .94rem;
        border-radius: .85rem;
    }

    .tw-portfolio__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tw-portfolio-card__media {
        aspect-ratio: 1.45 / 1;
    }

    .tw-portfolio-card__body {
        min-height: 9.25rem;
        padding: 1.05rem 1.1rem 1.25rem;
    }

    .tw-portfolio-card__link {
        width: 3rem;
        height: 3rem;
        left: 1rem;
        bottom: 1rem;
        font-size: 1.45rem;
    }
}