@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: 'Inter', sans-serif;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(168, 255, 62, 0.04),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(110, 70, 255, 0.05),
            transparent 35%
        ),
        #08090b;

    color: #ffffff;

    overflow-x: hidden;

    line-height: 1.6;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


img {
    max-width: 100%;
}


.container {
    width: min(1180px, 90%);

    margin: 0 auto;
}


/* =====================================================
   GLOBAL BACKGROUND
===================================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 80%,
            rgba(168, 255, 62, 0.025),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(95, 70, 255, 0.035),
            transparent 25%
        );

    z-index: -2;

    animation:
        backgroundFloat 12s ease-in-out infinite alternate;
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

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

    background-size: 80px 80px;

    opacity: 0.35;

    z-index: -1;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(8, 9, 11, 0.68);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

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

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.navbar.scrolled {

    background:
        rgba(8, 9, 11, 0.9);

    border-bottom:
        1px solid rgba(168, 255, 62, 0.08);

    box-shadow:
        0 10px 40px rgba(0,0,0,0.25);
}


.nav-container {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;
}


.logo img {

    width: 135px;

    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.logo:hover img {

    transform:
        scale(1.04);

    filter:
        brightness(1.08)
        drop-shadow(
            0 0 10px
            rgba(168, 255, 62, 0.25)
        );
}


/* =====================================================
   NAVIGATION LINKS
===================================================== */

.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 34px;

    margin-left: auto;
}


.nav-links a {

    position: relative;

    font-size: 14px;

    font-weight: 500;

    color:
        rgba(255,255,255,0.72);

    transition:
        color 0.3s ease;
}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        #a8ff3e;

    box-shadow:
        0 0 10px
        rgba(168,255,62,0.45);

    transition:
        width 0.3s ease;
}


.nav-links a:hover {

    color:
        #ffffff;
}


.nav-links a:hover::after {

    width: 100%;
}


/* =====================================================
   NAV BUTTON
===================================================== */

.nav-button {

    padding:
        11px 20px;

    border:
        1px solid
        rgba(168,255,62,0.45);

    border-radius: 999px;

    color:
        #a8ff3e;

    font-size: 13px;

    font-weight: 600;

    background:
        rgba(168,255,62,0.05);

    transition:
        all 0.3s ease;
}


.nav-button:hover {

    background:
        #a8ff3e;

    color:
        #08090b;

    box-shadow:
        0 0 24px
        rgba(168,255,62,0.2);

    transform:
        translateY(-2px);
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle {

    display: none;

    border: none;

    background: transparent;

    color: #ffffff;

    font-size: 25px;

    cursor: pointer;
}


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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        140px 0 100px;
}


.hero-grid {

    position: absolute;

    inset: 0;

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

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    animation:
        gridMove 18s linear infinite;

    opacity: 0.55;
}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 820px;
}


.hero-label,
.section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        #a8ff3e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #a8ff3e;

    box-shadow:
        0 0 12px
        rgba(168,255,62,0.7);

    animation:
        pulse 2s ease-in-out infinite;
}


.hero h1 {

    margin-top: 25px;

    max-width: 850px;

    font-size:
        clamp(58px, 8vw, 105px);

    line-height:
        0.95;

    letter-spacing:
        -0.065em;

    font-weight: 800;
}


.hero h1 span {

    color:
        #a8ff3e;

    text-shadow:
        0 0 35px
        rgba(168,255,62,0.12);
}


.hero p {

    max-width: 610px;

    margin-top: 30px;

    color:
        rgba(255,255,255,0.62);

    font-size:
        17px;

    line-height:
        1.8;
}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 38px;
}


/* =====================================================
   BUTTONS
===================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding:
        0 24px;

    border-radius:
        999px;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        all 0.3s ease;
}


.btn-primary {

    background:
        #a8ff3e;

    color:
        #08090b;

    box-shadow:
        0 0 25px
        rgba(168,255,62,0.12);
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(168,255,62,0.2);
}


.btn-secondary {

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

    color:
        rgba(255,255,255,0.82);

    background:
        rgba(255,255,255,0.025);
}


.btn-secondary:hover {

    background:
        rgba(255,255,255,0.07);

    border-color:
        rgba(255,255,255,0.2);

    transform:
        translateY(-3px);
}


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

.hero-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(90px);

    opacity: 0.16;

    animation:
        backgroundFloat 10s ease-in-out infinite alternate;
}


.hero-glow-one {

    width: 430px;

    height: 430px;

    right: -150px;

    top: 15%;

    background:
        #a8ff3e;
}


.hero-glow-two {

    width: 500px;

    height: 500px;

    left: 45%;

    bottom: -300px;

    background:
        #6347ff;

    animation:
        backgroundFloatReverse 13s ease-in-out infinite alternate;
}


/* =====================================================
   GAMES SECTION
===================================================== */

.games-section {

    position: relative;

    padding:
        120px 0 130px;
}


.section-heading {

    max-width: 700px;

    margin-bottom: 55px;
}


.section-heading h2 {

    margin-top: 17px;

    font-size:
        clamp(38px, 5vw, 65px);

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.section-heading h2 span {

    color:
        #a8ff3e;
}


.section-heading p {

    margin-top: 20px;

    color:
        rgba(255,255,255,0.52);

    font-size:
        15px;
}


/* =====================================================
   GAME GRID
===================================================== */

.games-grid {

    display: grid;

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

    gap: 22px;
}


/* =====================================================
   GAME CARD
===================================================== */

.game-card {

    position: relative;

    overflow: hidden;

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

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.18);

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}


.game-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(168,255,62,0.2);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.3);
}


/* =====================================================
   GAME IMAGE
===================================================== */

.game-image {

    position: relative;

    height: 270px;

    overflow: hidden;

    background:
        #111318;
}


.game-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


.game-card:hover
.game-image img {

    transform:
        scale(1.08);

    filter:
        brightness(1.08)
        saturate(1.08);
}


/* =====================================================
   GAME IMAGE ATMOSPHERE
===================================================== */

.game-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: 0.4;

    mix-blend-mode:
        screen;
}


.game-image-one::before {

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(168,255,62,0.25),
            transparent 45%
        );
}


.game-image-two::before {

    background:
        radial-gradient(
            circle at 30% 40%,
            rgba(100,80,255,0.25),
            transparent 45%
        );
}


.game-image-three::before {

    background:
        radial-gradient(
            circle at 70% 60%,
            rgba(0,180,255,0.18),
            transparent 45%
        );
}


/* =====================================================
   GAME IMAGE SHINE
===================================================== */

.game-image::after {

    content: "";

    position: absolute;

    top: -120%;

    left: -40%;

    width: 40%;

    height: 300%;

    z-index: 3;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.08),
            transparent
        );

    transition:
        left 0.7s ease;

    pointer-events: none;
}


.game-card:hover
.game-image::after {

    left: 130%;
}


/* =====================================================
   GAME OVERLAY
===================================================== */

.game-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            to top,
            rgba(5,6,8,0.85),
            rgba(5,6,8,0.05) 65%
        );
}


/* =====================================================
   GAME STATUS
===================================================== */

.game-status {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 4;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(168,255,62,0.25);

    border-radius:
        999px;

    background:
        rgba(8,9,11,0.7);

    backdrop-filter:
        blur(10px);

    color:
        #a8ff3e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


/* =====================================================
   GAME CONTENT
===================================================== */

.game-content {

    padding:
        26px;
}


.game-platform {

    color:
        rgba(255,255,255,0.4);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;
}


.game-content h3 {

    margin-top: 10px;

    font-size:
        24px;

    letter-spacing:
        -0.03em;
}


.game-content p {

    margin-top: 10px;

    min-height: 50px;

    color:
        rgba(255,255,255,0.52);

    font-size:
        13px;

    line-height:
        1.7;
}


.game-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

    padding-top: 18px;

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

    color:
        rgba(255,255,255,0.38);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.1em;
}


.game-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    border:
        1px solid
        rgba(168,255,62,0.2);

    border-radius: 50%;

    color:
        #a8ff3e;

    font-size:
        15px;

    transition:
        all 0.3s ease;
}


.game-card:hover
.game-arrow {

    background:
        #a8ff3e;

    color:
        #08090b;

    transform:
        rotate(45deg);
}


/* =====================================================
   ABOUT SECTION
===================================================== */

.about-section {

    position: relative;

    padding:
        120px 0;

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

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

    background:
        rgba(255,255,255,0.012);
}


.about-container {

    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 80px;

    align-items: center;
}


.about-container
.section-heading {

    margin-bottom: 0;
}


.about-content {

    display: grid;

    gap: 24px;
}


.about-content p {

    color:
        rgba(255,255,255,0.58);

    font-size:
        17px;

    line-height:
        1.9;
}


.about-content p:first-child {

    color:
        rgba(255,255,255,0.8);

    font-size:
        21px;
}


/* =====================================================
   CONTACT
===================================================== */

.contact-section {

    padding:
        120px 0;
}


.contact-box {

    position: relative;

    overflow: hidden;

    padding:
        80px 50px;

    text-align: center;

    border:
        1px solid
        rgba(168,255,62,0.12);

    border-radius:
        30px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(168,255,62,0.07),
            transparent 45%
        ),
        rgba(255,255,255,0.025);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.25);
}


.contact-box::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    top: -250px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #a8ff3e;

    filter:
        blur(150px);

    opacity: 0.08;
}


.contact-box h2 {

    position: relative;

    margin-top: 20px;

    font-size:
        clamp(38px, 5vw, 65px);

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.contact-box h2 span {

    color:
        #a8ff3e;
}


.contact-box p {

    position: relative;

    max-width: 500px;

    margin:
        24px auto 0;

    color:
        rgba(255,255,255,0.52);

    font-size:
        15px;
}


.contact-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 32px;

    padding:
        14px 25px;

    border-radius:
        999px;

    background:
        #a8ff3e;

    color:
        #08090b;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        all 0.3s ease;
}


.contact-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(168,255,62,0.2);
}


/* =====================================================
   FOOTER
===================================================== */

.footer {

    padding:
        30px 0;

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


.footer-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-logo {

    display: flex;

    align-items: center;
}


.footer-logo img {

    width: 125px;

    height: auto;

    display: block;

    object-fit: contain;
}


.footer p {

    color:
        rgba(255,255,255,0.35);

    font-size:
        11px;
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.reveal-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* Stagger game cards */

.game-card:nth-child(1) {

    transition-delay:
        0.05s;
}


.game-card:nth-child(2) {

    transition-delay:
        0.15s;
}


.game-card:nth-child(3) {

    transition-delay:
        0.25s;
}


/* About animation */

.about-content.reveal {

    transform:
        translateX(40px);
}


.about-content.reveal-visible {

    transform:
        translateX(0);
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes pulse {

    0%,
    100% {

        opacity: 0.5;

        transform:
            scale(0.9);
    }

    50% {

        opacity: 1;

        transform:
            scale(1.15);
    }
}


@keyframes backgroundFloat {

    0% {

        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100% {

        transform:
            translate3d(25px,-20px,0)
            scale(1.05);
    }
}


@keyframes backgroundFloatReverse {

    0% {

        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100% {

        transform:
            translate3d(-25px,20px,0)
            scale(1.05);
    }
}


@keyframes gridMove {

    0% {

        background-position:
            0 0;
    }

    100% {

        background-position:
            70px 70px;
    }
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .games-grid {

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


    .about-container {

        grid-template-columns:
            1fr;

        gap: 40px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .nav-container {

        min-height: 70px;
    }


    .logo img {

        width: 115px;
    }


    .nav-button {

        display: none;
    }


    .menu-toggle {

        display: block;
    }


    .nav-links {

        position: absolute;

        top: 70px;

        left: 5%;

        width: 90%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 12px;

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

        border-radius:
            18px;

        background:
            rgba(10,11,14,0.95);

        backdrop-filter:
            blur(20px);

        box-shadow:
            0 20px 50px
            rgba(0,0,0,0.35);

        animation:
            mobileMenuIn 0.25s ease;
    }


    .nav-links.mobile-active {

        display: flex;
    }


    .nav-links a {

        padding:
            14px 12px;

        border-radius:
            10px;
    }


    .nav-links a:hover {

        background:
            rgba(255,255,255,0.04);
    }


    .nav-links a::after {

        display: none;
    }


    .hero {

        min-height:
            90vh;

        padding:
            130px 0 80px;
    }


    .hero h1 {

        font-size:
            clamp(48px, 15vw, 75px);
    }


    .hero p {

        font-size:
            15px;
    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .btn {

        width: 100%;
    }


    .games-grid {

        grid-template-columns:
            1fr;
    }


    .games-section,
    .about-section,
    .contact-section {

        padding:
            90px 0;
    }


    .game-image {

        height:
            240px;
    }


    .contact-box {

        padding:
            60px 25px;
    }


    .footer-container {

        flex-direction:
            column;

        text-align:
            center;
    }


    .footer-logo img {

        width:
            110px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .container {

        width:
            88%;
    }


    .hero {

        padding-top:
            120px;
    }


    .hero h1 {

        font-size:
            48px;
    }


    .section-heading h2,
    .contact-box h2 {

        font-size:
            40px;
    }


    .game-content {

        padding:
            22px;
    }


    .game-image {

        height:
            220px;
    }

}


/* =====================================================
   MOBILE MENU ANIMATION
===================================================== */

@keyframes mobileMenuIn {

    from {

        opacity: 0;

        transform:
            translateY(-10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}
/* =====================================================
   FINAL HERO POLISH
===================================================== */

.hero-content {
    animation: heroContentIn 1s ease-out both;
}

.hero-label {
    animation: heroLabelIn 0.8s ease-out 0.15s both;
}

.hero h1 {
    text-wrap: balance;
}

.hero p {
    text-wrap: pretty;
}

.hero-buttons {
    animation: heroButtonsIn 0.8s ease-out 0.45s both;
}


/* Premium heading glow */

.hero h1 span {
    position: relative;
    display: inline-block;
}

.hero h1 span::after {
    content: "";
    position: absolute;

    left: 5%;
    right: 5%;
    bottom: -8px;

    height: 2px;

    background: #a8ff3e;

    opacity: 0.35;

    filter: blur(3px);

    border-radius: 50%;
}


/* Subtle floating effect */

.hero-content {
    transform: translateY(0);
}


/* Button shine */

.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 140%;
}


/* Hero entrance animations */

@keyframes heroContentIn {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes heroLabelIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes heroButtonsIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Mobile adjustment */

@media (max-width: 768px) {

    .hero h1 span::after {
        bottom: -5px;
    }

}
 /* =====================================================
    PREMIUM GAME CARD POLISH
 ===================================================== */

 .game-card {
     isolation: isolate;
 }

 .game-card::before {
     content: "";

     position: absolute;

     inset: 0;

     border-radius: 24px;

     padding: 1px;

     background:
         linear-gradient(
             135deg,
             rgba(168,255,62,0.25),
             transparent 35%,
             transparent 65%,
             rgba(255,255,255,0.08)
         );

     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);

     -webkit-mask-composite: xor;

     mask-composite: exclude;

     opacity: 0;

     transition:
         opacity 0.45s ease;

     pointer-events: none;

     z-index: 5;
 }


 .game-card:hover::before {
     opacity: 1;
 }


 /* Image zoom */

 .game-image img {
     transform-origin: center center;
 }


 .game-card:hover .game-image img {
     transform:
         scale(1.08);
 }


 /* Stronger image overlay on hover */

 .game-card:hover .game-overlay {
     background:
         linear-gradient(
             to top,
             rgba(5,6,8,0.92),
             rgba(5,6,8,0.08) 70%
         );
 }


 /* Game title interaction */

 .game-content h3 {
     transition:
         color 0.3s ease,
         transform 0.3s ease;
 }


 .game-card:hover .game-content h3 {
     color:
         #a8ff3e;

     transform:
         translateX(3px);
 }


 /* Platform label */

 .game-platform {
     transition:
         color 0.3s ease;
 }


 .game-card:hover .game-platform {
     color:
         rgba(168,255,62,0.65);
 }


 /* Footer */

 .game-footer {
     transition:
         border-color 0.3s ease,
         color 0.3s ease;
 }


 .game-card:hover .game-footer {
     border-color:
         rgba(168,255,62,0.14);

     color:
         rgba(255,255,255,0.55);
 }


 /* Status badge */

 .game-status {
     transition:
         background 0.3s ease,
         border-color 0.3s ease,
         box-shadow 0.3s ease;
 }


 .game-card:hover .game-status {
     background:
         rgba(168,255,62,0.08);

     border-color:
         rgba(168,255,62,0.4);

     box-shadow:
         0 0 18px
         rgba(168,255,62,0.08);
 }


 /* Arrow */

 .game-arrow {
     position: relative;

     overflow: hidden;
 }


 .game-arrow::before {
     content: "";

     position: absolute;

     width: 100%;
     height: 100%;

     border-radius: 50%;

     background:
         rgba(168,255,62,0.12);

     transform:
         scale(0);

     transition:
         transform 0.3s ease;
 }


 .game-card:hover .game-arrow::before {
     transform:
         scale(1);
 }


 .game-arrow {
     z-index: 1;
 }


 .game-arrow::before {
     z-index: -1;
 }


 /* =====================================================
    GAME CARD MOBILE
 ===================================================== */

 @media (max-width: 768px) {

     .game-card:hover {
         transform:
             translateY(-5px);
     }

     .game-card:hover .game-image img {
         transform:
             scale(1.04);
     }

 }


 /* =====================================================
    TOUCH DEVICES
 ===================================================== */

 @media (hover: none) {

     .game-card:hover {
         transform:
             none;
     }

     .game-card:hover .game-image img {
         transform:
             none;
     }

     .game-card:hover .game-content h3 {
         color:
             inherit;

         transform:
             none;
     }

 }
 /* =====================================================
    PREMIUM ABOUT SECTION
 ===================================================== */

 .about-section {
     position: relative;
     overflow: hidden;
 }


 /* Decorative background glow */

 .about-section::before {
     content: "";

     position: absolute;

     width: 420px;
     height: 420px;

     left: -220px;
     top: 50%;

     transform: translateY(-50%);

     border-radius: 50%;

     background:
         #a8ff3e;

     filter:
         blur(160px);

     opacity:
         0.035;

     pointer-events: none;
 }


 .about-section::after {
     content: "";

     position: absolute;

     width: 300px;
     height: 300px;

     right: -160px;
     bottom: -180px;

     border-radius: 50%;

     background:
         #6347ff;

     filter:
         blur(130px);

     opacity:
         0.04;

     pointer-events: none;
 }


 /* About heading */

 .about-container .section-heading {
     position: relative;

     z-index: 2;
 }


 .about-container .section-heading h2 {
     max-width: 430px;
 }


 /* About content card */

 .about-content {
     position: relative;

     padding: 38px;

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

     border-radius:
         24px;

     background:
         linear-gradient(
             145deg,
             rgba(255,255,255,0.055),
             rgba(255,255,255,0.018)
         );

     backdrop-filter:
         blur(18px);

     -webkit-backdrop-filter:
         blur(18px);

     box-shadow:
         0 25px 70px
         rgba(0,0,0,0.2);

     z-index: 2;

     transition:
         transform 0.4s ease,
         border-color 0.4s ease,
         box-shadow 0.4s ease;
 }


 .about-content:hover {
     transform:
         translateY(-6px);

     border-color:
         rgba(168,255,62,0.15);

     box-shadow:
         0 30px 80px
         rgba(0,0,0,0.28);
 }


 /* Decorative line */

 .about-content::before {
     content: "";

     position: absolute;

     top: 0;
     left: 38px;

     width: 70px;
     height: 2px;

     background:
         #a8ff3e;

     border-radius:
         999px;

     box-shadow:
         0 0 14px
         rgba(168,255,62,0.4);
 }


 /* Main paragraph */

 .about-content p:first-child {
     margin-top:
         4px;

     color:
         rgba(255,255,255,0.88);
 }


 /* Remaining paragraphs */

 .about-content p:not(:first-child) {
     padding-top:
         20px;

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


 /* Small highlight effect */

 .about-content p {
     transition:
         color 0.3s ease;
 }


 .about-content:hover p {
     color:
         rgba(255,255,255,0.65);
 }


 .about-content:hover p:first-child {
     color:
         rgba(255,255,255,0.92);
 }


 /* =====================================================
    MOBILE ABOUT
 ===================================================== */

 @media (max-width: 768px) {

     .about-content {
         padding:
             32px 24px;
     }


     .about-content::before {
         left:
             24px;
     }


     .about-content:hover {
         transform:
             none;
     }

 }


 @media (max-width: 480px) {

     .about-content {
         padding:
             30px 20px;
     }


     .about-content p:first-child {
         font-size:
             18px;
     }

 }
/* =====================================================
   CONTACT INFORMATION
===================================================== */

.contact-info {
    position: relative;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}


.contact-item {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 210px;

    padding: 15px 18px;

    text-align: left;

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

    border-radius: 16px;

    background:
        rgba(255,255,255,0.025);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.contact-item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(168,255,62,0.2);

    background:
        rgba(168,255,62,0.035);
}


.contact-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(168,255,62,0.08);

    color:
        #a8ff3e;

    font-size: 17px;
}


.contact-item div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.contact-item small {
    color:
        rgba(255,255,255,0.35);

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.contact-item strong,
.contact-item a {
    color:
        rgba(255,255,255,0.82);

    font-size: 13px;

    font-weight: 600;

    transition:
        color 0.3s ease;
}


.contact-item a:hover {
    color:
        #a8ff3e;
}


/* Mobile */

@media (max-width: 768px) {

    .contact-info {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-item {
        width: 100%;

        min-width: 0;
    }

}


@media (max-width: 480px) {

    .contact-item {
        padding:
            14px;
    }

}
```css
/* =========================================
   PREMIUM CONTACT SECTION
   ========================================= */

.contact-section {
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: rgba(168, 255, 62, 0.08);
    filter: blur(100px);
    border-radius: 50%;
    top: 10%;
    left: -180px;
    pointer-events: none;
}

.contact-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(168, 255, 62, 0.05);
    filter: blur(90px);
    border-radius: 50%;
    bottom: -150px;
    right: -100px;
    pointer-events: none;
}

.contact-box {
    position: relative;
    z-index: 2;
    padding: 70px 60px;
    border: 1px solid rgba(168, 255, 62, 0.16);
    border-radius: 28px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.018)
    );
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.contact-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(168, 255, 62, 0.7),
        transparent
    );
}

.contact-box h2 {
    margin-bottom: 18px;
}

.contact-box > p {
    max-width: 650px;
    margin-bottom: 38px;
}

/* Contact details */

.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 38px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    transition: 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px);
    border-color: rgba(168, 255, 62, 0.35);
    background: rgba(168, 255, 62, 0.045);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.contact-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(168, 255, 62, 0.09);
    border: 1px solid rgba(168, 255, 62, 0.18);
    color: #a8ff3e;
    font-size: 19px;
}

.contact-item small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.contact-item strong,
.contact-item a {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-item a:hover {
    color: #a8ff3e;
}

/* Contact button */

.contact-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 25px;
    border-radius: 12px;
    background: #a8ff3e;
    color: #08090b;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s ease;
    box-shadow: 0 10px 35px rgba(168, 255, 62, 0.15);
}

.contact-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(168, 255, 62, 0.28);
}

.contact-button:hover span {
    transform: translateX(5px);
}

/* Mobile */

@media (max-width: 850px) {
    .contact-box {
        padding: 50px 30px;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .contact-box {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .contact-item {
        padding: 16px;
    }
}
```
```css
/* =========================================
   PREMIUM PLAYBEE FOOTER
   ========================================= */

.footer {
    position: relative;
    padding: 35px 0;
    background: #050608;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 1px;
    background: #a8ff3e;
    box-shadow: 0 0 18px rgba(168, 255, 62, 0.6);
}

.footer-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    transition: 0.3s ease;
}

.footer-logo img {
    width: 125px;
    height: auto;
    display: block;
    transition: 0.3s ease;
}

.footer-logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(168, 255, 62, 0.35));
}

.footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Footer hover glow */

.footer-container::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    bottom: -130px;
    border-radius: 50%;
    background: rgba(168, 255, 62, 0.06);
    filter: blur(60px);
    pointer-events: none;
}

/* Mobile footer */

@media (max-width: 600px) {
    .footer {
        padding: 28px 0;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .footer-logo img {
        width: 110px;
    }

    .footer p {
        font-size: 12px;
    }
}
```css
/* =========================================
   PREMIUM PLAYBEE NAVBAR
   ========================================= */

.navbar {
    background: rgba(8, 9, 11, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(5, 6, 8, 0.92);
    border-bottom-color: rgba(168, 255, 62, 0.12);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25);
}

/* Logo */

.logo img {
    width: 135px;
    height: auto;
    display: block;
    transition: 0.3s ease;
}

.logo:hover img {
    transform: scale(1.04);
    filter: drop-shadow(0 0 12px rgba(168, 255, 62, 0.35));
}

/* Navigation links */

.nav-links {
    gap: 34px;
}

.nav-links a {
    position: relative;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    background: #a8ff3e;
    box-shadow: 0 0 10px rgba(168, 255, 62, 0.65);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: #ffffff;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Let's Play button */

.nav-button {
    position: relative;
    padding: 11px 20px;
    border: 1px solid rgba(168, 255, 62, 0.35);
    border-radius: 10px;
    background: rgba(168, 255, 62, 0.08);
    color: #a8ff3e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.nav-button:hover {
    background: #a8ff3e;
    color: #08090b;
    border-color: #a8ff3e;
    box-shadow: 0 0 25px rgba(168, 255, 62, 0.25);
    transform: translateY(-2px);
}

/* Mobile menu button */

.menu-toggle {
    border: 1px solid rgba(168, 255, 62, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    border-color: rgba(168, 255, 62, 0.5);
    color: #a8ff3e;
    background: rgba(168, 255, 62, 0.08);
}

/* Mobile navigation */

@media (max-width: 768px) {

    .nav-links.mobile-active {
        background: rgba(8, 9, 11, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(168, 255, 62, 0.12);
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }

    .nav-links.mobile-active a {
        padding: 13px 18px;
    }

    .nav-links.mobile-active a::after {
        display: none;
    }
}