:root {
    --ga-bg: #050711;
    --ga-bg-2: #080c17;
    --ga-surface: #0d1321;
    --ga-surface-2: #111827;
    --ga-primary: #635bff;
    --ga-blue: #2563eb;
    --ga-cyan: #00c2ff;
    --ga-violet: #8b5cf6;
    --ga-gold: #c9a227;
    --ga-text: #f5f7fa;
    --ga-muted: #929bad;
    --ga-border: rgba(255,255,255,.09);
}
.gameapi-projects {
    background:
        radial-gradient(circle at 12% 0%, rgba(99,91,255,.08), transparent 28rem),
        radial-gradient(circle at 90% 12%, rgba(0,194,255,.055), transparent 24rem),
        var(--ga-bg);
    color: var(--ga-text);
    overflow: hidden;
}
.projects-hero {
    padding: 40px 10px;
}
.projects-hero__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 54px;
    align-items: center;
}
.projects-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
}

.projects-hero__meta span {
    padding: 8px 10px;
    border: 1px solid var(--ga-border);
    background: rgba(255,255,255,.025);
    color: #b8c0d2;
    font-size: 10px;
    letter-spacing: .12em;
}

.projects-filter-section {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 12px 0;
    border-top: 1px solid var(--gameapi-border);
    border-bottom: 1px solid var(--gameapi-border);
    background: rgba(5, 7, 17, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.projects-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.projects-filter::-webkit-scrollbar {
    display: none;
}
.projects-filter-button {
	position: relative;
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--gameapi-border);
    border-radius: 8px;
	background: transparent;
	color: #858fa2;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.projects-filter-button:hover {
    color: #eaf8ff;
    border-color: rgba(0, 194, 255, .25);
    background: rgba(0, 194, 255, .035);
}
.projects-filter-button.is-active {
    color: #eaf8ff;
    border-color: rgba(0, 194, 255, .42);
    background: rgba(0, 194, 255, .07);
    box-shadow: inset 0 -1px 0 var(--gameapi-cyan),
        0 0 18px rgba(0, 194, 255, .035);
}

.projects-showcase {
    padding: 40px 10px;
}
.projects-section-heading {
    max-width: 780px;
    gap: 40px;
    align-items: end;
    margin-bottom: 46px;
}
.projects-section-heading  h2 {
    max-width: 500px;
	margin: 0 0 10px;
	font-size: clamp(30px, 5vw, 40px);
	line-height: 1.03;
	letter-spacing: -.04em;
}
.projects-section-heading  h2 span {
	color: #969fb2;
}
.projects-section-heading > p {
	max-width: 500px;
	color: var(--ga-muted);
	font-size: 17px;
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.project-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ga-border);
    background: linear-gradient(145deg, rgba(17, 24, 39, .78), rgba(8, 12, 23, .88));
    cursor: pointer;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        opacity .25s ease;
}
.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(0, 194, 255, .35);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
    outline: none;
}
.project-card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #0b1120;
}
.project-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .7s ease,
        filter .7s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.045);
}

.project-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 17, .05) 25%, rgba(5, 7, 17, .35) 60%, rgba(5, 7, 17, .82) 100%);
    pointer-events: none;
}
.project-card__tag {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(5, 7, 17, .66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #dce1ec;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    pointer-events: none;
}
.project-card__body {
    padding: 22px;
}
.project-card__topline {
	color: #a5a8ad;
	font-size: 10px;
	letter-spacing: 0.1em;
}
.project-card__topline span:last-child {
    text-align: right;
}
.project-card__body h3 {
    margin: 12px 0 10px;
    color: var(--ga-text);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.03em;
}
.project-card__body p {
	min-height: 60px;
	margin: 0;
	color: #a2a4a9;
	font-size: 15px;
	line-height: 1.35;
}
.project-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}
.project-card__tech span {
	padding: 6px 10px;
	border: 1px solid var(--ga-border);
	color: #a2a4a9;
	font-size: 10px;
	letter-spacing: .04em;
	transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.project-card:hover .project-card__tech span {
    border-color: rgba(0, 194, 255, .15);
}
.project-card[hidden] {
    display: none;
}
@media (max-width: 1100px) {
    .projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 650px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .project-card-image {
        height: 300px;
    }
    .project-card__body {
        padding: 19px;
    }
    .project-card__body h3 {
        font-size: 25px;
    }
}
@media (max-width: 420px) {
    .projects-grid {
        gap: 12px;
    }
    .project-card-image {
        height: 260px;
    }
    .project-card__tag {
        top: 12px;
        left: 12px;
        font-size: 8px;
    }
    .project-card__body {
        padding: 17px;
    }
    .project-card__topline {
        font-size: 8px;
    }
    .project-card__body h3 {
        font-size: 23px;
    }
    .project-card__body p {
        min-height: auto;
        font-size: 12px;
    }
}
.projects-empty {
    padding: 60px 20px;
    border: 1px solid var(--ga-border);
    text-align: center;
    background: rgba(255,255,255,.02);
}
.projects-empty strong,
.projects-empty span {
    display: block;
}
.projects-empty span {
    margin-top: 7px;
    color: var(--ga-muted);
    font-size: 13px;
}

.projects-capabilities {
    padding: 40px 10px;
    border-top: 1px solid var(--ga-border);
    background: var(--ga-bg-2);
}
.capabilities-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
}
.capabilities-heading p:last-child {
    max-width: 530px;
    margin-top: 24px;
}
.capabilities-list {
    border-top: 1px solid var(--ga-border);
}
.capabilities-list > div {
    display: grid;
    grid-template-columns: 45px 1fr 1fr;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--ga-border);
}
.capabilities-list span {
    color: var(--ga-cyan);
    font-size: 12px;
}
.capabilities-list strong {
    font-size: 15px;
}
.capabilities-list small {
    color: var(--ga-muted);
    font-size: 13px;
}
.projects-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: max-content;
    padding: 12px 16px;
    border: 1px solid var(--ga-border);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    transition: .25s ease;
}
.projects-button--primary {
    border-color: rgba(99,91,255,.55);
    background: var(--ga-primary);
}
.projects-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(99,91,255,.2);
}
.project-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}
.project-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.project-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.project-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(920px, 100%);
	max-height: calc(90vh - 70px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 25px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: #090e1a;
	box-shadow: 0 30px 100px rgba(0, 0, 0, .5);
	transform: translateY(15px) scale(.985);
	transition: transform .3s ease;
	margin-top: 55px;
}
.project-modal.is-open .project-modal__dialog {
    transform: translateY(0) scale(1);
}
.project-modal__close {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ga-border);
    background: rgba(255, 255, 255, .035);
    color: #fff;
    cursor: pointer;
    font-size: 23px;
    line-height: 1;
    transition:
        background .2s ease,
        border-color .2s ease;
}
.project-modal__close:hover {
    border-color: rgba(0, 194, 255, .35);
    background: rgba(0, 194, 255, .07);
}
.project-modal__header {
    padding-right: 45px;
}
.project-modal__header h2 {
    color: var(--ga-cyan);
	margin: 0;
	font-size: clamp(30px, 5vw, 40px);
	letter-spacing: -.045em;
}
.project-modal__header > p:last-child {
	max-width: 700px;
	margin: 5px 0 0;
	color: var(--ga-muted);
	line-height: 1.3;
}
.project-modal__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 20px;
}

.project-modal__grid > div {
    padding: 15px;
    border: 1px solid var(--ga-border);
    background: rgba(255, 255, 255, .018);
}
.modal-label {
    color: #b4b8c0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}
.project-modal__grid p, .project-modal__grid li {
	color: #adb3be;
	font-size: 14px;
	line-height: 1.5;
}
.project-modal__grid p {
    margin-bottom: 0;
}
.project-modal__grid ul {
    margin: 12px 0 0;
    padding-left: 18px;
}
.project-modal__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}
.modal-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.modal-tech span {
    color: var(--ga-cyan);
}
.project-modal__dialog {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 194, 255, .25) transparent;
}
.project-modal__dialog::-webkit-scrollbar {
    width: 5px;
}
.project-modal__dialog::-webkit-scrollbar-track {
    background: transparent;
}
.project-modal__dialog::-webkit-scrollbar-thumb {
    background: rgba(0, 194, 255, .25);
}
.project-modal__dialog::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 194, 255, .45);
}
@media (max-width: 700px) {
    .project-modal {
        padding: 20px;
    }
    .project-modal__dialog {
        width: 100%;
        max-height: calc(100vh - 40px);

        padding: 27px 22px;
    }
    .project-modal__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 27px;
    }
    .project-modal__footer {
        align-items: flex-start;
        flex-direction: column;
    }

}
@media (max-width: 420px) {
    .project-modal {
        padding: 12px;
    }
    .project-modal__dialog {
        max-height: calc(100vh - 24px);
        padding: 24px 17px;
    }
    .project-modal__close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    .project-modal__header {
        padding-right: 40px;
    }
    .project-modal__header h2 {
        font-size: 32px;
    }
    .project-modal__header > p:last-child {
        font-size: 12px;
    }
    .project-modal__grid > div {
        padding: 17px;
    }

}
@media (max-width: 1100px) {
    .projects-hero__grid,
    .capabilities-layout {
        grid-template-columns: 1fr;
    }
    .projects-hero__visual {
        min-height: 470px;
    }
    .projects-section-heading {
        grid-template-columns: 1fr;
    }
    .capabilities-layout {
        gap: 50px;
    }
}

@media (max-width: 700px) {
    .projects-hero__grid {
        gap: 35px;
    }
    .projects-hero__content h2 {
        font-size: clamp(25px, 5vw, 35px);
    }
    .projects-hero__lead {
        font-size: 15px;
    }
    .projects-hero__visual {
        min-height: 390px;
    }
    .capabilities-list > div {
        grid-template-columns: 35px 1fr;
    }
    .capabilities-list small {
        grid-column: 2;
    }
    .projects-button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .projects-hero__visual {
        min-height: 330px;
    }
    .projects-hero__caption {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }
    .projects-hero__meta span {
        font-size: 9px;
    }
    .project-card__body {
        padding: 18px;
    }
    .project-card__body p {
        min-height: auto;
    }
    .ops-visual {
        width: 90%;
    }
    .ops-visual div {
        padding: 11px;
    }
    .ops-visual strong {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .project-card,
    .project-card-image img,
    .project-modal,
    .project-modal__dialog {
        transition: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}