/*================================================
    GAMES PAGE
================================================*/

.desktop-nav a.active {
    color: #fff;
}


/*================================================
    HERO
================================================*/

.games-hero {
    position: relative;

    min-height: 830px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    padding: 175px 0 75px;

    background:
        radial-gradient(
            circle at 72% 38%,
            rgba(91, 111, 255, .18),
            transparent 30%
        ),
        #050608;
}

.games-hero-grid {
    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 65px 65px;
}

.games-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(85px);
}

.games-glow-one {
    top: 120px;
    right: 8%;

    width: 450px;
    height: 450px;

    background: rgba(84, 105, 255, .09);
}

.games-glow-two {
    left: 25%;
    bottom: -180px;

    width: 430px;
    height: 430px;

    background: rgba(145, 85, 255, .08);
}

.games-hero-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 100px;
}

.games-kicker {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    color: #7b92f0;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.7px;
}

.games-kicker::before {
    width: 34px;
    height: 1px;

    background: #748bec;

    content: "";
}

.games-hero h1 {
    max-width: 800px;

    margin-top: 28px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 82px;
    font-weight: 500;
    line-height: .98;

    letter-spacing: -4px;
}

.games-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #7892ff,
            #a479ff,
            #66d4e6
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.games-hero-content > p {
    max-width: 620px;

    margin-top: 31px;

    color: #8993a2;

    font-size: 13px;
    line-height: 1.9;
}

.games-hero-actions {
    display: flex;

    gap: 10px;

    margin-top: 32px;
}

.games-primary-btn,
.games-secondary-btn {
    display: inline-flex;

    min-height: 50px;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 20px;

    border: 1px solid rgba(255,255,255,.11);

    font-size: 9px;
    font-weight: 800;

    transition: .3s;
}

.games-primary-btn {
    background: #f3f4f6;
    color: #111319;
}

.games-primary-btn:hover {
    background: #6e85e4;
    color: #fff;
}

.games-secondary-btn {
    color: #9aa3b1;
}

.games-secondary-btn:hover {
    border-color: rgba(255,255,255,.3);
    color: #fff;
}


/*================================================
    HERO CONSOLE
================================================*/

.games-hero-console {
    border: 1px solid rgba(255,255,255,.11);

    background:
        linear-gradient(
            145deg,
            rgba(15,19,29,.94),
            rgba(8,10,15,.94)
        );

    backdrop-filter: blur(15px);
}

.game-console-top {
    display: flex;

    min-height: 52px;

    align-items: center;
    justify-content: space-between;

    padding: 0 20px;

    border-bottom: 1px solid rgba(255,255,255,.09);

    color: #596474;

    font-family: monospace;
    font-size: 8px;
}

.game-console-live {
    color: #64dba2;
}

.game-console-project {
    padding: 35px 28px;

    border-bottom: 1px solid rgba(255,255,255,.09);
}

.game-console-project small {
    color: #5c74ca;

    font-size: 7px;

    letter-spacing: 1px;
}

.game-console-project strong {
    display: block;

    margin-top: 9px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;
    font-size: 27px;
    font-weight: 500;
}

.game-console-project > span {
    display: block;

    margin-top: 6px;

    color: #687384;

    font-size: 9px;
}

.game-console-data {
    display: grid;

    grid-template-columns: repeat(2,1fr);
}

.game-console-data > div {
    min-height: 90px;

    padding: 20px;

    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.game-console-data small {
    display: block;

    margin-bottom: 8px;

    color: #4f5969;

    font-size: 6px;

    letter-spacing: 1px;
}

.game-console-data strong {
    color: #a9b1bd;

    font-size: 10px;
}

.game-console-command {
    min-height: 55px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0 20px;

    color: #586273;

    font-family: monospace;
    font-size: 8px;
}

.game-console-command > span {
    color: #7289e0;
}

.game-console-command i {
    width: 6px;
    height: 11px;

    background: #748be5;

    animation: gamesCursor 1s infinite;
}

@keyframes gamesCursor {

    50% {
        opacity: 0;
    }

}

.games-hero-bottom {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    margin-top: 80px;

    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
}

.games-hero-bottom span {
    min-height: 65px;

    display: flex;

    align-items: center;

    padding: 0 20px;

    border-right: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);

    color: #4f5968;

    font-size: 7px;

    letter-spacing: 1px;
}


/*================================================
    FEATURED GAME
================================================*/

.featured-game-section {
    padding: 135px 0;

    background: #090b0f;
}

.featured-game-heading {
    display: grid;

    grid-template-columns: .3fr 1fr .5fr;

    align-items: end;

    gap: 40px;

    margin-bottom: 65px;
}

.featured-game-heading h2 {
    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 56px;
    font-weight: 500;

    letter-spacing: -2px;
}

.featured-game-heading > p {
    color: #747e8d;

    font-size: 11px;
}

.featured-game-card {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    min-height: 700px;

    border: 1px solid rgba(255,255,255,.1);

    background: #0d1016;
}


/*================================================
    GAME VISUAL
================================================*/

.featured-game-visual {
    position: relative;

    overflow: hidden;

    border-right: 1px solid rgba(255,255,255,.1);
}

.hotel-scene {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #182039 0%,
            #283653 53%,
            #11151d 53%,
            #0d1016 100%
        );
}

.hotel-scene-sky {
    position: absolute;

    top: 8%;
    right: 12%;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(226,232,255,.15);

    box-shadow:
        0 0 90px rgba(200,210,255,.12);
}

.hotel-scene-building {
    position: absolute;

    left: 50%;
    bottom: 21%;

    width: 430px;
    height: 360px;

    transform: translateX(-50%);

    border: 1px solid rgba(145,167,255,.35);

    background:
        linear-gradient(
            145deg,
            rgba(38,51,79,.95),
            rgba(20,28,45,.98)
        );

    box-shadow:
        0 40px 80px rgba(0,0,0,.35);
}

.hotel-sign {
    position: absolute;

    top: -38px;
    left: 50%;

    padding: 11px 25px;

    border: 1px solid rgba(145,167,255,.35);

    background: #171f30;

    color: #93a7ef;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;

    transform: translateX(-50%);
}

.hotel-windows {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 17px;

    padding: 50px 38px;
}

.hotel-windows span {
    height: 57px;

    border: 1px solid rgba(139,165,255,.32);

    background:
        linear-gradient(
            135deg,
            rgba(109,138,225,.27),
            rgba(55,71,110,.2)
        );
}

.hotel-door {
    position: absolute;

    bottom: 0;
    left: 50%;

    width: 65px;
    height: 100px;

    border: 1px solid rgba(149,170,255,.35);

    background: #101826;

    transform: translateX(-50%);
}

.hotel-scene-road {
    position: absolute;

    right: -20%;
    bottom: -5%;
    left: -20%;

    height: 24%;

    background:
        linear-gradient(
            180deg,
            #10131a,
            #080a0e
        );

    transform: perspective(300px) rotateX(55deg);
}

.game-ui-card {
    position: absolute;

    min-width: 120px;

    padding: 13px 16px;

    border: 1px solid rgba(255,255,255,.1);

    background: rgba(8,11,17,.78);

    backdrop-filter: blur(12px);
}

.game-ui-card small {
    display: block;

    margin-bottom: 5px;

    color: #596578;

    font-size: 6px;

    letter-spacing: 1px;
}

.game-ui-card strong {
    color: #fff;

    font-size: 13px;
}

.game-ui-money {
    top: 40px;
    left: 35px;
}

.game-ui-rating {
    top: 40px;
    right: 35px;
}

.game-ui-level {
    right: 35px;
    bottom: 35px;
}

.featured-game-status {
    position: absolute;

    bottom: 35px;
    left: 35px;

    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding: 10px 13px;

    border: 1px solid rgba(255,255,255,.1);

    background: rgba(8,11,17,.75);

    color: #8793a4;

    font-size: 7px;

    letter-spacing: 1px;
}

.featured-game-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #65d7a2;
}


/*================================================
    FEATURED CONTENT
================================================*/

.featured-game-content {
    display: flex;

    flex-direction: column;

    padding: 42px;
}

.featured-game-topline {
    display: flex;

    justify-content: space-between;

    color: #505b6a;

    font-size: 7px;

    letter-spacing: 1px;
}

.featured-game-content > h3 {
    margin-top: 65px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 36px;
    font-weight: 500;
    line-height: 1.08;

    letter-spacing: -1.4px;
}

.featured-game-content > p {
    margin-top: 18px;

    color: #737d8d;

    font-size: 11px;
    line-height: 1.85;
}

.game-feature-list {
    margin-top: 35px;

    border-top: 1px solid rgba(255,255,255,.1);
}

.game-feature-list > div {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 12px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.game-feature-list span {
    color: #4d5969;

    font-size: 7px;
}

.game-feature-list strong {
    color: #afb6c1;

    font-size: 10px;
}

.game-feature-list p {
    grid-column: 2;

    color: #636e7f;

    font-size: 8px;
    line-height: 1.6;
}

.featured-game-meta {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    margin-top: 30px;

    border-top: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.1);
}

.featured-game-meta > div {
    padding: 15px;

    border-right: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.featured-game-meta small {
    display: block;

    margin-bottom: 6px;

    color: #4f5967;

    font-size: 6px;
}

.featured-game-meta strong {
    color: #a4acb8;

    font-size: 8px;
}

.featured-game-link {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    margin-top: auto;

    padding-top: 30px;

    color: #8ea6fc;

    font-size: 9px;
    font-weight: 800;
}


/*================================================
    PHILOSOPHY
================================================*/

.game-philosophy {
    padding: 135px 0;

    background: #f2f1ed;
    color: #111319;
}

.game-philosophy-layout {
    display: grid;

    grid-template-columns: .28fr 1fr .4fr;

    gap: 70px;
}

.game-philosophy-main h2 {
    max-width: 780px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 55px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2.2px;
}

.game-philosophy-main p {
    max-width: 680px;

    margin-top: 30px;

    color: #74787f;

    font-size: 13px;
    line-height: 1.9;
}

.game-philosophy-side {
    display: flex;

    flex-direction: column;

    gap: 12px;

    align-self: end;

    padding-top: 25px;

    border-top: 1px solid #ccc9c2;
}

.game-philosophy-side small {
    margin-bottom: 10px;

    color: #999ca2;

    font-size: 7px;

    letter-spacing: 1.3px;
}

.game-philosophy-side strong {
    color: #454950;

    font-family: "Space Grotesk", sans-serif;

    font-size: 14px;
    font-weight: 500;
}


/*================================================
    EXPERIMENTS
================================================*/

.game-experiments {
    padding: 135px 0;

    background: #0a0c10;
}

.game-experiments-heading {
    display: grid;

    grid-template-columns: .3fr 1fr .5fr;

    align-items: end;

    gap: 40px;

    margin-bottom: 65px;
}

.game-experiments-heading h2 {
    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.game-experiments-heading > p {
    color: #737d8c;

    font-size: 11px;
    line-height: 1.7;
}

.experiment-grid {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 16px;
}

.experiment-card {
    border: 1px solid rgba(255,255,255,.1);

    background: #0f131a;
}

.experiment-visual {
    position: relative;

    min-height: 310px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,.1);
}

.puzzle-visual {
    background:
        radial-gradient(
            circle,
            rgba(113,137,255,.18),
            transparent 45%
        ),
        #111620;
}

.puzzle-board {
    display: grid;

    grid-template-columns: repeat(3,55px);

    gap: 9px;
}

.puzzle-board span {
    width: 55px;
    height: 55px;

    border: 1px solid rgba(125,148,255,.4);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(93,116,218,.25),
            rgba(77,64,163,.2)
        );
}

.economy-visual {
    background:
        radial-gradient(
            circle,
            rgba(88,204,179,.12),
            transparent 45%
        ),
        #10161a;
}

.economy-chart {
    display: flex;

    height: 120px;

    align-items: flex-end;
    gap: 10px;
}

.economy-chart span {
    width: 25px;

    background: #638c91;
}

.economy-chart span:nth-child(1) {
    height: 35%;
}

.economy-chart span:nth-child(2) {
    height: 50%;
}

.economy-chart span:nth-child(3) {
    height: 43%;
}

.economy-chart span:nth-child(4) {
    height: 75%;
}

.economy-chart span:nth-child(5) {
    height: 100%;
}

.economy-number {
    position: absolute;

    top: 25px;
    right: 25px;

    text-align: right;
}

.economy-number small {
    display: block;

    color: #596c70;

    font-size: 6px;
}

.economy-number strong {
    display: block;

    margin-top: 3px;

    color: #86c3b5;

    font-size: 16px;
}

.interaction-visual {
    background:
        radial-gradient(
            circle,
            rgba(146,103,255,.18),
            transparent 43%
        ),
        #13131c;
}

.interaction-node {
    position: absolute;

    display: grid;

    width: 76px;
    height: 76px;

    place-items: center;

    border: 1px solid rgba(161,130,255,.28);
    border-radius: 50%;

    color: #8f81c0;

    font-size: 7px;
    font-weight: 700;
}

.center-node {
    top: 50%;
    left: 50%;

    width: 100px;
    height: 100px;

    background: rgba(118,92,205,.12);

    color: #bab0e7;

    transform: translate(-50%,-50%);
}

.node-one {
    top: 30px;
    left: 35px;
}

.node-two {
    top: 40px;
    right: 35px;
}

.node-three {
    right: 50px;
    bottom: 30px;
}

.experiment-content {
    padding: 26px;
}

.experiment-content > span {
    color: #6077cc;

    font-size: 7px;

    letter-spacing: 1px;
}

.experiment-content h3 {
    margin-top: 10px;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 22px;
    font-weight: 500;
}

.experiment-content p {
    margin-top: 11px;

    color: #6e7887;

    font-size: 10px;
    line-height: 1.75;
}

.experiment-content > div {
    margin-top: 24px;

    padding-top: 16px;

    border-top: 1px solid rgba(255,255,255,.08);

    color: #4e5969;

    font-size: 7px;

    text-transform: uppercase;
}


/*================================================
    CAPABILITIES
================================================*/

.game-capabilities {
    padding: 135px 0;

    background: #f2f1ed;
    color: #111319;
}

.game-capabilities-heading {
    display: grid;

    grid-template-columns: .3fr 1fr;

    margin-bottom: 65px;
}

.game-capabilities-heading h2 {
    max-width: 760px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.game-capability-list {
    border-top: 1px solid #cbc8c1;
}

.game-capability-row {
    display: grid;

    grid-template-columns: 60px .7fr 1fr 40px;

    align-items: center;

    gap: 35px;

    min-height: 130px;

    border-bottom: 1px solid #cbc8c1;

    transition: .3s;
}

.game-capability-row:hover {
    padding-left: 15px;

    background: rgba(255,255,255,.42);
}

.game-capability-row > span {
    color: #999ca1;

    font-size: 8px;
}

.game-capability-row strong {
    font-family: "Space Grotesk", sans-serif;

    font-size: 23px;
    font-weight: 500;
}

.game-capability-row p {
    color: #74787e;

    font-size: 10px;
    line-height: 1.7;
}

.game-capability-row i {
    color: #707783;

    font-size: 10px;
}


/*================================================
    PIPELINE
================================================*/

.game-pipeline {
    padding: 135px 0;

    background: #090b0f;
}

.game-pipeline-layout {
    display: grid;

    grid-template-columns: .7fr 1.3fr;

    align-items: start;

    gap: 100px;
}

.game-pipeline-heading h2 {
    margin: 18px 0;

    color: #fff;

    font-family: "Space Grotesk", sans-serif;

    font-size: 52px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.game-pipeline-heading p {
    max-width: 480px;

    color: #727c8b;

    font-size: 11px;
    line-height: 1.8;
}

.game-pipeline-board {
    border-top: 1px solid rgba(255,255,255,.1);
}

.game-pipeline-board > div {
    display: grid;

    grid-template-columns: 45px .35fr 1fr;

    align-items: center;

    min-height: 105px;

    border-bottom: 1px solid rgba(255,255,255,.1);
}

.game-pipeline-board span {
    color: #495362;

    font-size: 8px;
}

.game-pipeline-board small {
    color: #5c74c5;

    font-size: 7px;

    letter-spacing: 1px;
}

.game-pipeline-board strong {
    color: #abb3bf;

    font-size: 10px;
}


/*================================================
    CTA
================================================*/

.games-cta {
    padding: 120px 0;

    background: #f2f1ed;
}

.games-cta-box {
    display: grid;

    grid-template-columns: .25fr 1fr 170px;

    align-items: center;

    gap: 50px;

    padding: 70px 0;

    border-top: 1px solid #cbc8c1;
    border-bottom: 1px solid #cbc8c1;
}

.games-cta-box > span {
    color: #96999e;

    font-size: 8px;
}

.games-cta-box small {
    color: #7488d3;

    font-size: 8px;

    letter-spacing: 1.3px;
}

.games-cta-box h2 {
    max-width: 770px;

    margin-top: 12px;

    color: #111319;

    font-family: "Space Grotesk", sans-serif;

    font-size: 47px;
    font-weight: 500;
    line-height: 1.05;

    letter-spacing: -2px;
}

.games-cta-box p {
    max-width: 570px;

    margin-top: 15px;

    color: #777a80;

    font-size: 11px;
    line-height: 1.8;
}

.games-cta-box > a {
    display: flex;

    width: 155px;
    height: 155px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 20px;

    border-radius: 50%;

    background: #111319;
    color: #fff;

    text-align: center;

    transition: .35s;
}

.games-cta-box > a:hover {
    transform: rotate(-5deg) scale(1.04);

    background: #687fd5;
}

.games-cta-box > a strong {
    font-size: 10px;
}


/*================================================
    RESPONSIVE
================================================*/

@media (max-width: 1050px) {

    .games-hero-layout,
    .game-pipeline-layout {
        grid-template-columns: 1fr;
    }

    .games-hero h1 {
        font-size: 66px;
    }

    .featured-game-card {
        grid-template-columns: 1fr;
    }

    .featured-game-visual {
        min-height: 610px;

        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .experiment-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .games-hero {
        min-height: auto;

        padding: 135px 0 70px;
    }

    .games-hero h1 {
        font-size: 45px;

        letter-spacing: -2.3px;
    }

    .games-hero-actions {
        flex-direction: column;
    }

    .games-primary-btn,
    .games-secondary-btn {
        width: 100%;
    }

    .games-hero-bottom {
        grid-template-columns: repeat(2,1fr);
    }

    .featured-game-section,
    .game-philosophy,
    .game-experiments,
    .game-capabilities,
    .game-pipeline,
    .games-cta {
        padding: 85px 0;
    }

    .featured-game-heading,
    .game-experiments-heading,
    .game-capabilities-heading {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 45px;
    }

    .featured-game-heading h2,
    .game-experiments-heading h2,
    .game-capabilities-heading h2,
    .game-pipeline-heading h2 {
        font-size: 38px;
    }

    .featured-game-visual {
        min-height: 450px;
    }

    .hotel-scene-building {
        width: 280px;
        height: 260px;
    }

    .hotel-windows {
        gap: 10px;

        padding: 40px 24px;
    }

    .hotel-windows span {
        height: 38px;
    }

    .game-ui-card {
        min-width: 95px;

        padding: 10px;
    }

    .game-ui-money {
        top: 18px;
        left: 18px;
    }

    .game-ui-rating {
        top: 18px;
        right: 18px;
    }

    .game-ui-level {
        right: 18px;
        bottom: 18px;
    }

    .featured-game-status {
        left: 18px;
        bottom: 18px;
    }

    .featured-game-content {
        padding: 30px 22px;
    }

    .featured-game-content > h3 {
        margin-top: 45px;

        font-size: 31px;
    }

    .featured-game-meta {
        grid-template-columns: 1fr;
    }

    .game-philosophy-layout {
        grid-template-columns: 1fr;
    }

    .game-philosophy-main h2 {
        font-size: 38px;
    }

    .game-philosophy-side {
        display: none;
    }

    .experiment-grid {
        grid-template-columns: 1fr;
    }

    .game-capability-row {
        grid-template-columns: 32px 1fr;

        gap: 14px;

        padding: 24px 0;
    }

    .game-capability-row p {
        grid-column: 2;
    }

    .game-capability-row i {
        display: none;
    }

    .game-pipeline-layout {
        gap: 50px;
    }

    .game-pipeline-board > div {
        grid-template-columns: 30px 1fr;

        gap: 10px;

        padding: 19px 0;
    }

    .game-pipeline-board strong {
        grid-column: 2;
    }

    .games-cta-box {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .games-cta-box h2 {
        font-size: 37px;
    }

    .games-cta-box > a {
        justify-self: center;
    }

}