/* =========================================================
   GIO WORLDS
   GLOBAL STYLE FOUNDATION
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --gw-black:
        #050805;

    --gw-black-soft:
        #080d09;

    --gw-green:
        #7dff45;

    --gw-green-light:
        #a8ff7d;

    --gw-green-dark:
        #35a51c;

    --gw-green-glow:
        rgba(125, 255, 69, 0.18);

    --gw-white:
        #ffffff;

    --gw-white-soft:
        rgba(255, 255, 255, 0.82);

    --gw-white-muted:
        rgba(255, 255, 255, 0.58);

    --gw-white-faint:
        rgba(255, 255, 255, 0.35);

    --gw-border:
        rgba(255, 255, 255, 0.09);

    --gw-border-green:
        rgba(125, 255, 69, 0.25);

    --gw-card:
        rgba(12, 19, 14, 0.72);

}


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

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


html {
    scroll-behavior: smooth;
    background: var(--gw-black);
}


body {

    width: 100%;
    min-height: 100vh;

    background:
        var(--gw-black);

    color:
        var(--gw-white);

    font-family:
        "Inter",
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.6;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


img {

    max-width: 100%;

    height: auto;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font-family:
        inherit;

}


button {

    border: none;

}


ul,
ol {

    list-style: none;

}


/* =========================================================
   MAIN WEBSITE
========================================================= */

#gioWebsite {

    width: 100%;

    min-height: 100vh;

    position: relative;

    background:
        var(--gw-black);

}


/* =========================================================
   GLOBAL SELECTION
========================================================= */

::selection {

    background:
        var(--gw-green);

    color:
        #061006;

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 7px;

}


::-webkit-scrollbar-track {

    background:
        #030503;

}


::-webkit-scrollbar-thumb {

    background:
        rgba(125, 255, 69, 0.35);

    border-radius:
        10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        rgba(125, 255, 69, 0.65);

}


/* =========================================================
   COMMON SECTION FOUNDATION
========================================================= */

.gw-section {

    position: relative;

    width: 100%;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.gw-container {

    width: 100%;

    max-width: 1320px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 24px;

    padding-right: 24px;

}


/* =========================================================
   COMMON GREEN TEXT
========================================================= */

.gw-green-text {

    color:
        var(--gw-green);

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.gw-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 10px;

    border:
        1px solid
        var(--gw-border-green);

    border-radius:
        5px;

    background:
        rgba(125, 255, 69, 0.035);

    color:
        var(--gw-green-light);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


/* =========================================================
   EYEBROW DOT
========================================================= */

.gw-eyebrow-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 10px
        var(--gw-green);

}


/* =========================================================
   COMMON GLOW
========================================================= */

.gw-glow {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    background:
        var(--gw-green-glow);

    filter:
        blur(90px);

}


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

@media (max-width: 1199px) {

    .gw-container {

        max-width:
            1140px;

    }

}


@media (max-width: 991px) {

    .gw-container {

        max-width:
            960px;

        padding-left:
            20px;

        padding-right:
            20px;

    }

}


@media (max-width: 767px) {

    body {

        font-size:
            13px;

    }

    .gw-container {

        max-width:
            100%;

        padding-left:
            16px;

        padding-right:
            16px;

    }

}


@media (max-width: 575px) {

    .gw-container {

        padding-left:
            14px;

        padding-right:
            14px;

    }

}


/* =========================================================
   GIO WORLDS
   NAVBAR
========================================================= */


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

.gw-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 76px;

    z-index: 1000;

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

    background:
        rgba(5, 8, 5, 0.72);

    backdrop-filter:
        blur(18px);

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

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

}


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

.gw-navbar.scrolled {

    background:
        rgba(5, 8, 5, 0.93);

    border-bottom-color:
        rgba(125, 255, 69, 0.12);

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

}


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

.gw-navbar-inner {

    width: 100%;

    max-width: 1440px;

    height: 100%;

    margin: 0 auto;

    padding:
        0 30px;

    display: flex;

    align-items: center;

}


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

.gw-navbar-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.gw-navbar-logo img {

    width: 75px;

    height: auto;

    display: block;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

}


.gw-navbar-logo:hover img {

    transform:
        scale(1.025);

    filter:
        drop-shadow(
            0 0 12px
            rgba(125, 255, 69, 0.18)
        );

}


/* =========================================================
   DESKTOP MENU
========================================================= */

.gw-desktop-menu {

    display: flex;

    align-items: center;

    gap: 28px;

    margin-left: auto;

    margin-right: 38px;

    height: 100%;

}


.gw-nav-link {

    position: relative;

    display: flex;

    align-items: center;

    height: 100%;

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

    font-size: 11px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color 0.25s ease;

}


.gw-nav-link:hover {

    color:
        #ffffff;

}


.gw-nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 17px;

    height: 1px;

    background:
        var(--gw-green);

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.25s ease;

    box-shadow:
        0 0 8px
        rgba(125, 255, 69, 0.55);

}


.gw-nav-link:hover::after,
.gw-nav-link.active::after {

    transform:
        scaleX(1);

}


.gw-nav-link.active {

    color:
        #ffffff;

}


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

.gw-navbar-actions {

    display: flex;

    align-items: center;

    gap: 17px;

    flex-shrink: 0;

}


/* =========================================================
   LOGIN
========================================================= */

.gw-login-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 38px;

    padding:
        0 9px;

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

    font-size: 11px;

    font-weight: 500;

    transition:
        color 0.25s ease;

}


.gw-login-btn:hover {

    color:
        var(--gw-green);

}


/* =========================================================
   REGISTER
========================================================= */

.gw-register-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    height: 38px;

    padding:
        0 16px;

    border:
        1px solid
        var(--gw-green);

    border-radius:
        6px;

    background:
        var(--gw-green);

    color:
        #071006;

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        0.03em;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.gw-register-btn i {

    font-size:
        12px;

}


.gw-register-btn:hover {

    transform:
        translateY(-1px);

    background:
        var(--gw-green-light);

    box-shadow:
        0 7px 24px
        rgba(125, 255, 69, 0.22);

}


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

.gw-mobile-toggle {

    display: none;

    width: 40px;

    height: 40px;

    padding: 0;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

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

    border-radius:
        6px;

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

    cursor:
        pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;

}


.gw-mobile-toggle:hover {

    border-color:
        rgba(125, 255, 69, 0.35);

    background:
        rgba(125, 255, 69, 0.05);

}


.gw-mobile-toggle span {

    width:
        17px;

    height:
        1px;

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

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;

}


/* Hamburger -> X */

.gw-mobile-toggle.open span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.gw-mobile-toggle.open span:nth-child(2) {

    opacity:
        0;

}


.gw-mobile-toggle.open span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


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

.gw-mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 998;

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter:
        blur(3px);

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

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

}


.gw-mobile-overlay.open {

    opacity:
        1;

    visibility:
        visible;

}


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

.gw-mobile-menu {

    position: fixed;

    top: 0;

    right: 0;

    width:
        min(390px, 88vw);

    height:
        100vh;

    height:
        100dvh;

    z-index: 999;

    display: flex;

    flex-direction: column;

    padding:
        20px 20px 18px;

    background:
        #071008;

    border-left:
        1px solid
        rgba(125, 255, 69, 0.13);

    box-shadow:
        -25px 0 80px
        rgba(0, 0, 0, 0.48);

    transform:
        translateX(105%);

    visibility:
        hidden;

    transition:
        transform 0.38s cubic-bezier(.22,.61,.36,1),
        visibility 0.38s ease;

    overflow-y:
        auto;

}


.gw-mobile-menu.open {

    transform:
        translateX(0);

    visibility:
        visible;

}


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

.gw-mobile-menu-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom:
        20px;

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

}


.gw-mobile-logo img {

    width:
        75px;

    height:
        auto;

}


.gw-mobile-close {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

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

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

    cursor:
        pointer;

    transition:
        all 0.25s ease;

}


.gw-mobile-close:hover {

    color:
        var(--gw-green);

    border-color:
        rgba(125, 255, 69, 0.3);

    background:
        rgba(125, 255, 69, 0.05);

}


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

.gw-mobile-menu-label {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    margin-bottom:
        9px;

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

    font-size:
        8px;

    letter-spacing:
        0.15em;

}


.gw-mobile-menu-label span {

    width:
        17px;

    height:
        1px;

    background:
        var(--gw-green);

}


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

.gw-mobile-links {

    display:
        flex;

    flex-direction:
        column;

}


.gw-mobile-link {

    min-height:
        56px;

    display:
        grid;

    grid-template-columns:
        35px 1fr 22px;

    align-items:
        center;

    gap:
        7px;

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

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

    transition:
        color 0.25s ease,
        padding 0.25s ease,
        background 0.25s ease;

}


.gw-mobile-link:hover,
.gw-mobile-link.active {

    color:
        #ffffff;

    padding-left:
        6px;

}


.gw-mobile-number {

    color:
        rgba(125, 255, 69, 0.55);

    font-size:
        9px;

    font-family:
        "Manrope",
        sans-serif;

}


.gw-mobile-link-text {

    font-size:
        14px;

    font-weight:
        500;

}


.gw-mobile-link > i {

    justify-self:
        end;

    font-size:
        12px;

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

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.gw-mobile-link:hover > i,
.gw-mobile-link.active > i {

    color:
        var(--gw-green);

    transform:
        translate(2px, -2px);

}


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

.gw-mobile-auth {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

    margin-top:
        24px;

}


.gw-mobile-login,
.gw-mobile-register {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        6px;

    font-size:
        10px;

    font-weight:
        600;

    transition:
        all 0.25s ease;

}


.gw-mobile-login {

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

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

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

}


.gw-mobile-login:hover {

    border-color:
        rgba(125, 255, 69, 0.25);

    color:
        #ffffff;

}


.gw-mobile-register {

    background:
        var(--gw-green);

    color:
        #071006;

}


.gw-mobile-register:hover {

    background:
        var(--gw-green-light);

}


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

.gw-mobile-bottom {

    margin-top:
        auto;

    padding-top:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

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

}


.gw-mobile-bottom span {

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

    font-size:
        7px;

    letter-spacing:
        0.09em;

}


.gw-mobile-bottom span:first-child {

    color:
        rgba(125, 255, 69, 0.6);

}


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

@media (max-width: 1050px) {

    .gw-navbar-inner {

        padding:
            0 22px;

    }


    .gw-desktop-menu {

        gap:
            20px;

        margin-right:
            25px;

    }


    .gw-nav-link {

        font-size:
            10px;

    }

}


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

@media (max-width: 850px) {

    .gw-navbar {

        height:
            68px;

    }


    .gw-navbar-inner {

        padding:
            0 18px;

    }


    .gw-navbar-logo img {

        width:
            75px;

    }


    .gw-desktop-menu,
    .gw-navbar-actions {

        display:
            none;

    }


    .gw-mobile-toggle {

        display:
            flex;

        margin-left:
            auto;

    }

}


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

@media (max-width: 400px) {

    .gw-mobile-menu {

        width:
            92vw;

        padding-left:
            16px;

        padding-right:
            16px;

    }


    .gw-mobile-link {

        min-height:
            53px;

    }


    .gw-mobile-link-text {

        font-size:
            13px;

    }


    .gw-mobile-bottom span {

        font-size:
            6px;

    }

}


/* =========================================================
   GIO WORLDS
   HERO SECTION
========================================================= */

.gw-hero {

    min-height:
        calc(100vh - 0px);

    min-height:
        720px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding-top:
        76px;

    padding-bottom:
        55px;

    background:
        #050805;

    isolation:
        isolate;

}


/* =========================================================
   HERO BACKGROUND GRID
========================================================= */

.gw-hero-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    opacity:
        0.55;

    background-image:

        linear-gradient(
            rgba(125, 255, 69, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(125, 255, 69, 0.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 55%,
            transparent 100%
        );

}


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

.gw-hero-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(100px);

    z-index:
        -3;

}


.gw-hero-glow-left {

    width:
        420px;

    height:
        420px;

    left:
        -200px;

    top:
        38%;

    background:
        rgba(58, 255, 62, 0.055);

}


.gw-hero-glow-right {

    width:
        600px;

    height:
        600px;

    right:
        -150px;

    top:
        15%;

    background:
        rgba(51, 190, 74, 0.105);

}


/* =========================================================
   PARTICLES
========================================================= */

.gw-hero-particles {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    overflow:
        hidden;

    pointer-events:
        none;

}


.gw-hero-particle {

    position:
        absolute;

    width:
        2px;

    height:
        2px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 9px
        rgba(125, 255, 69, 0.75);

    opacity:
        0;

    animation:
        gwParticleMove
        linear
        infinite;

}


@keyframes gwParticleMove {

    0% {

        transform:
            translate3d(0, 30px, 0);

        opacity:
            0;

    }

    15% {

        opacity:
            0.55;

    }

    80% {

        opacity:
            0.35;

    }

    100% {

        transform:
            translate3d(35px, -170px, 0);

        opacity:
            0;

    }

}


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

.gw-hero-container {

    position:
        relative;

    z-index:
        2;

}


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

.gw-hero-content {

    position:
        relative;

    max-width:
        590px;

}


.gw-hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(125, 255, 69, 0.3);

    border-radius:
        5px;

    background:
        rgba(125, 255, 69, 0.035);

    color:
        var(--gw-green-light);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        0.12em;

    margin-bottom:
        22px;

}


.gw-hero-title {

    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(45px, 5vw, 70px);

    line-height:
        1.05;

    font-weight:
        600;

    letter-spacing:
        -0.045em;

    color:
        #ffffff;

}


.gw-hero-title span {

    color:
        var(--gw-green);

    text-shadow:
        0 0 35px
        rgba(125, 255, 69, 0.11);

}


.gw-hero-description {

    max-width:
        510px;

    margin:
        21px 0 0;

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

    font-size:
        14px;

    line-height:
        1.8;

}


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

.gw-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        28px;

}


.gw-hero-primary-btn,
.gw-hero-secondary-btn {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        0 18px;

    border-radius:
        7px;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

}


.gw-hero-primary-btn {

    background:
        var(--gw-green);

    color:
        #071006;

    box-shadow:
        0 9px 30px
        rgba(125, 255, 69, 0.12);

}


.gw-hero-primary-btn:hover {

    transform:
        translateY(-2px);

    background:
        var(--gw-green-light);

    box-shadow:
        0 13px 35px
        rgba(125, 255, 69, 0.22);

}


.gw-hero-primary-btn i {

    font-size:
        13px;

}


.gw-hero-secondary-btn {

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

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

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

}


.gw-hero-secondary-btn:hover {

    color:
        #ffffff;

    border-color:
        rgba(125, 255, 69, 0.3);

    background:
        rgba(125, 255, 69, 0.045);

    transform:
        translateY(-2px);

}


/* =========================================================
   TRUST ITEMS
========================================================= */

.gw-hero-trust {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        24px;

    margin-top:
        33px;

}


.gw-hero-trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.gw-trust-icon {

    width:
        31px;

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(125, 255, 69, 0.17);

    border-radius:
        50%;

    background:
        rgba(125, 255, 69, 0.045);

    color:
        var(--gw-green);

}


.gw-trust-icon i {

    font-size:
        12px;

}


.gw-hero-trust-item div {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.25;

}


.gw-hero-trust-item strong {

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

    font-size:
        9px;

    font-weight:
        500;

}


.gw-hero-trust-item small {

    margin-top:
        3px;

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

    font-size:
        7px;

}


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

.gw-hero-visual {

    position:
        relative;

    width:
        100%;

    height:
        555px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.gw-globe-ambient {

    position:
        absolute;

    width:
        370px;

    height:
        370px;

    border-radius:
        50%;

    background:
        rgba(84, 255, 63, 0.11);

    filter:
        blur(65px);

    animation:
        gwAmbientPulse
        5s
        ease-in-out
        infinite;

}


@keyframes gwAmbientPulse {

    0%,
    100% {

        transform:
            scale(0.95);

        opacity:
            0.7;

    }

    50% {

        transform:
            scale(1.07);

        opacity:
            1;

    }

}


/* =========================================================
   GLOBE
========================================================= */

.gw-hero-globe {

    position:
        relative;

    width:
        310px;

    height:
        310px;

    border-radius:
        50%;

    overflow:
        hidden;

    z-index:
        4;

    background:

        radial-gradient(
            circle at 32% 25%,
            rgba(182, 255, 134, 0.28),
            transparent 8%
        ),

        radial-gradient(
            circle at 35% 35%,
            #326f2b 0%,
            #143d1b 27%,
            #07150a 65%,
            #020603 100%
        );

    border:
        1px solid
        rgba(125, 255, 69, 0.3);

    box-shadow:

        inset
        -30px -25px 50px
        rgba(0, 0, 0, 0.85),

        inset
        10px 10px 30px
        rgba(157, 255, 102, 0.1),

        0 0 60px
        rgba(78, 255, 73, 0.16);

    animation:
        gwGlobeFloat
        6s
        ease-in-out
        infinite;

}


@keyframes gwGlobeFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateY(-4deg);

    }

    50% {

        transform:
            translateY(-8px)
            rotateY(4deg);

    }

}


/* =========================================================
   GLOBE HIGHLIGHT
========================================================= */

.gw-globe-highlight {

    position:
        absolute;

    width:
        120px;

    height:
        85px;

    top:
        25px;

    left:
        42px;

    border-radius:
        50%;

    background:
        rgba(178, 255, 143, 0.17);

    filter:
        blur(25px);

    transform:
        rotate(-25deg);

}


/* =========================================================
   GLOBE GRID
========================================================= */

.gw-globe-latitude,
.gw-globe-longitude {

    position:
        absolute;

    border:
        1px solid
        rgba(124, 255, 91, 0.18);

    pointer-events:
        none;

}


.gw-globe-latitude {

    left:
        -8%;

    width:
        116%;

    height:
        85px;

    border-left-color:
        transparent;

    border-right-color:
        transparent;

    border-radius:
        50%;

}


.latitude-one {

    top:
        42px;

}


.latitude-two {

    top:
        112px;

}


.latitude-three {

    top:
        183px;

}


.gw-globe-longitude {

    top:
        -8%;

    height:
        116%;

    width:
        100px;

    border-top-color:
        transparent;

    border-bottom-color:
        transparent;

    border-radius:
        50%;

}


.longitude-one {

    left:
        60px;

    transform:
        rotate(15deg);

}


.longitude-two {

    left:
        105px;

}


.longitude-three {

    left:
        150px;

    transform:
        rotate(-15deg);

}


/* =========================================================
   GLOBE LAND SHAPES
========================================================= */

.gw-globe-land {

    position:
        absolute;

    background:
        rgba(108, 242, 62, 0.68);

    filter:
        drop-shadow(
            0 0 6px
            rgba(125, 255, 69, 0.24)
        );

    opacity:
        0.85;

}


.land-one {

    width:
        75px;

    height:
        48px;

    left:
        88px;

    top:
        65px;

    border-radius:
        48% 42% 55% 40%;

    transform:
        rotate(-20deg);

}


.land-two {

    width:
        57px;

    height:
        70px;

    left:
        150px;

    top:
        108px;

    border-radius:
        45% 55% 35% 55%;

    transform:
        rotate(25deg);

}


.land-three {

    width:
        35px;

    height:
        60px;

    left:
        92px;

    top:
        154px;

    border-radius:
        50% 45% 55% 50%;

    transform:
        rotate(18deg);

}


.land-four {

    width:
        68px;

    height:
        34px;

    left:
        190px;

    top:
        205px;

    border-radius:
        55% 35% 45% 50%;

    transform:
        rotate(-12deg);

}


/* =========================================================
   ORBITS
========================================================= */

.gw-globe-orbit {

    position:
        absolute;

    width:
        445px;

    height:
        145px;

    border:
        1px solid
        rgba(125, 255, 69, 0.5);

    border-radius:
        50%;

    z-index:
        6;

    pointer-events:
        none;

}


.orbit-one {

    transform:
        rotate(-19deg);

    animation:
        gwOrbitOne
        12s
        linear
        infinite;

}


.orbit-two {

    width:
        390px;

    height:
        115px;

    border-color:
        rgba(125, 255, 69, 0.18);

    transform:
        rotate(62deg);

}


.gw-globe-orbit span {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    right:
        30px;

    top:
        12px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 15px
        var(--gw-green);

}


@keyframes gwOrbitOne {

    from {

        transform:
            rotate(-19deg);

    }

    to {

        transform:
            rotate(341deg);

    }

}


/* =========================================================
   MARKET CARDS
========================================================= */

.gw-market-card {

    position:
        absolute;

    z-index:
        10;

    min-width:
        126px;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(125, 255, 69, 0.2);

    border-radius:
        7px;

    background:
        rgba(7, 16, 9, 0.72);

    backdrop-filter:
        blur(14px);

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

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.28);

}


.gw-market-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

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

    font-size:
        9px;

    font-weight:
        500;

}


.gw-market-card-top i {

    color:
        var(--gw-green);

    font-size:
        10px;

}


.gw-market-card strong {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--gw-green);

    font-size:
        14px;

    font-weight:
        600;

}


.gw-market-card small {

    display:
        block;

    margin-top:
        3px;

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

    font-size:
        7px;

}


.gw-market-eurusd {

    top:
        13%;

    left:
        5%;

    animation:
        gwCardFloat
        5s
        ease-in-out
        infinite;

}


.gw-market-gbpusd {

    top:
        17%;

    right:
        3%;

    animation:
        gwCardFloat
        6s
        -2s
        ease-in-out
        infinite;

}


.gw-market-xauusd {

    bottom:
        21%;

    left:
        8%;

    animation:
        gwCardFloat
        5.5s
        -1.5s
        ease-in-out
        infinite;

}


.gw-market-usoil {

    bottom:
        24%;

    right:
        3%;

    animation:
        gwCardFloat
        6.5s
        -3s
        ease-in-out
        infinite;

}


@keyframes gwCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* =========================================================
   CENTER LABEL
========================================================= */

.gw-globe-center-label {

    position:
        absolute;

    left:
        50%;

    bottom:
        8%;

    transform:
        translateX(-50%);

    z-index:
        12;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(125, 255, 69, 0.18);

    border-radius:
        4px;

    background:
        rgba(5, 10, 6, 0.7);

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

    font-size:
        7px;

    letter-spacing:
        0.1em;

    white-space:
        nowrap;

}


.gw-globe-center-label span {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 8px
        var(--gw-green);

}


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

.gw-hero-stats {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    margin-top:
        28px;

    padding:
        19px 0;

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

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

}


.gw-hero-stat {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.gw-hero-stat strong {

    color:
        var(--gw-green);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        18px;

    line-height:
        1.1;

    font-weight:
        600;

}


.gw-hero-stat span {

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

    font-size:
        8px;

    white-space:
        nowrap;

}


.gw-stat-divider {

    width:
        1px;

    height:
        28px;

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

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.gw-hero-scroll {

    position:
        absolute;

    z-index:
        15;

    left:
        50%;

    bottom:
        14px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

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

    font-size:
        7px;

    letter-spacing:
        0.12em;

    white-space:
        nowrap;

}


.gw-scroll-mouse {

    width:
        16px;

    height:
        23px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    padding-top:
        5px;

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

    border-radius:
        10px;

}


.gw-scroll-mouse i {

    width:
        2px;

    height:
        5px;

    border-radius:
        2px;

    background:
        var(--gw-green);

    animation:
        gwScrollDot
        1.7s
        ease-in-out
        infinite;

}


@keyframes gwScrollDot {

    0% {

        transform:
            translateY(0);

        opacity:
            0.3;

    }

    50% {

        transform:
            translateY(5px);

        opacity:
            1;

    }

    100% {

        transform:
            translateY(0);

        opacity:
            0.3;

    }

}


.gw-hero-scroll > i {

    color:
        var(--gw-green);

    font-size:
        9px;

}


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

@media (max-width: 991px) {

    .gw-hero {

        min-height:
            auto;

        padding-top:
            115px;

        padding-bottom:
            70px;

    }


    .gw-hero-content {

        max-width:
            650px;

    }


    .gw-hero-title {

        font-size:
            clamp(43px, 7vw, 62px);

    }


    .gw-hero-visual {

        height:
            510px;

        margin-top:
            5px;

    }


    .gw-hero-stats {

        margin-top:
            10px;

    }

}


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

@media (max-width: 767px) {

    .gw-hero {

        padding-top:
            95px;

        padding-bottom:
            60px;

    }


    .gw-hero-grid {

        background-size:
            55px 55px;

        opacity:
            0.28;

    }


    .gw-hero-glow-right {

        width:
            350px;

        height:
            350px;

        right:
            -180px;

        top:
            30%;

    }


    .gw-hero-content {

        max-width:
            100%;

    }


    .gw-hero-eyebrow {

        margin-bottom:
            17px;

        font-size:
            8px;

    }


    .gw-hero-title {

        font-size:
            clamp(39px, 11vw, 53px);

        line-height:
            1.08;

    }


    .gw-hero-description {

        margin-top:
            17px;

        font-size:
            13px;

        line-height:
            1.75;

    }


    .gw-hero-actions {

        margin-top:
            23px;

    }


    .gw-hero-primary-btn,
    .gw-hero-secondary-btn {

        min-height:
            44px;

        padding:
            0 15px;

        font-size:
            9px;

    }


    .gw-hero-trust {

        gap:
            13px 18px;

        margin-top:
            24px;

    }


    .gw-trust-icon {

        width:
            28px;

        height:
            28px;

    }


    .gw-hero-trust-item strong {

        font-size:
            8px;

    }


    .gw-hero-trust-item small {

        font-size:
            6px;

    }


    /* Visual */

    .gw-hero-visual {

        height:
            400px;

        margin-top:
            0;

    }


    .gw-globe-ambient {

        width:
            290px;

        height:
            290px;

    }


    .gw-hero-globe {

        width:
            235px;

        height:
            235px;

    }


    .gw-globe-latitude {

        height:
            64px;

    }


    .latitude-one {

        top:
            30px;

    }


    .latitude-two {

        top:
            84px;

    }


    .latitude-three {

        top:
            138px;

    }


    .gw-globe-longitude {

        width:
            76px;

    }


    .longitude-one {

        left:
            45px;

    }


    .longitude-two {

        left:
            80px;

    }


    .longitude-three {

        left:
            115px;

    }


    .land-one {

        width:
            58px;

        height:
            37px;

        left:
            67px;

        top:
            49px;

    }


    .land-two {

        width:
            43px;

        height:
            53px;

        left:
            113px;

        top:
            81px;

    }


    .land-three {

        width:
            27px;

        height:
            45px;

        left:
            69px;

        top:
            114px;

    }


    .land-four {

        width:
            51px;

        height:
            26px;

        left:
            145px;

        top:
            151px;

    }


    /* Orbits */

    .gw-globe-orbit {

        width:
            330px;

        height:
            108px;

    }


    .orbit-two {

        width:
            290px;

        height:
            88px;

    }


    /* Cards */

    .gw-market-card {

        min-width:
            105px;

        padding:
            9px 10px;

    }


    .gw-market-card strong {

        font-size:
            12px;

    }


    .gw-market-eurusd {

        top:
            11%;

        left:
            1%;

    }


    .gw-market-gbpusd {

        top:
            15%;

        right:
            0;

    }


    .gw-market-xauusd {

        bottom:
            18%;

        left:
            2%;

    }


    .gw-market-usoil {

        bottom:
            20%;

        right:
            0;

    }


    .gw-globe-center-label {

        bottom:
            4%;

    }


    /* Stats */

    .gw-hero-stats {

        display:
            grid;

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

        gap:
            16px 20px;

        margin-top:
            8px;

        padding:
            18px 0;

    }


    .gw-stat-divider {

        display:
            none;

    }


    .gw-hero-stat strong {

        font-size:
            16px;

    }


    .gw-hero-stat span {

        font-size:
            7px;

    }


    .gw-hero-scroll {

        display:
            none;

    }

}


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

@media (max-width: 420px) {

    .gw-hero {

        padding-top:
            90px;

    }


    .gw-hero-title {

        font-size:
            38px;

    }


    .gw-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .gw-hero-primary-btn,
    .gw-hero-secondary-btn {

        width:
            100%;

    }


    .gw-hero-trust {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .gw-hero-visual {

        height:
            365px;

    }


    .gw-hero-globe {

        width:
            215px;

        height:
            215px;

    }


    .gw-globe-orbit {

        width:
            300px;

        height:
            98px;

    }


    .gw-market-card {

        min-width:
            98px;

    }


    .gw-market-card small {

        display:
            none;

    }


    .gw-market-eurusd {

        left:
            -2px;

    }


    .gw-market-gbpusd {

        right:
            -2px;

    }


    .gw-market-xauusd {

        left:
            -2px;

    }


    .gw-market-usoil {

        right:
            -2px;

    }

}

/* =========================================================
   GIO WORLDS
   ABOUT SECTION
========================================================= */

.gw-about-section {

    position:
        relative;

    padding:
        105px 0 85px;

    background:
        #050805;

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

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.gw-about-grid {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.28;

    background-image:

        linear-gradient(
            rgba(125, 255, 69, 0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(125, 255, 69, 0.025) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

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

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.gw-about-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(100px);

}


.gw-about-glow-one {

    width:
        450px;

    height:
        450px;

    left:
        -220px;

    top:
        25%;

    background:
        rgba(79, 255, 70, 0.045);

}


.gw-about-glow-two {

    width:
        500px;

    height:
        500px;

    right:
        -230px;

    top:
        10%;

    background:
        rgba(43, 156, 67, 0.055);

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.gw-about-content {

    position:
        relative;

    max-width:
        490px;

}


.gw-about-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(125, 255, 69, 0.22);

    border-radius:
        5px;

    color:
        rgba(190, 255, 170, 0.78);

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

    font-size:
        8px;

    letter-spacing:
        0.13em;

}


.gw-about-label span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 8px
        rgba(125, 255, 69, 0.7);

}


/* =========================================================
   ABOUT TITLE
========================================================= */

.gw-about-title {

    margin:
        20px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(34px, 4vw, 50px);

    line-height:
        1.1;

    letter-spacing:
        -0.04em;

    font-weight:
        600;

    color:
        #ffffff;

}


.gw-about-title span {

    color:
        var(--gw-green);

    text-shadow:
        0 0 30px
        rgba(125, 255, 69, 0.1);

}


/* =========================================================
   ABOUT TEXT
========================================================= */

.gw-about-text {

    max-width:
        470px;

    margin:
        21px 0 0;

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

    font-size:
        13px;

    line-height:
        1.8;

}


.gw-about-text-muted {

    margin-top:
        12px;

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

}


/* =========================================================
   ABOUT BUTTON
========================================================= */

.gw-about-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-height:
        44px;

    margin-top:
        27px;

    padding:
        0 17px;

    border-radius:
        7px;

    background:
        var(--gw-green);

    color:
        #071006;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    transition:
        all 0.25s ease;

}


.gw-about-btn i {

    font-size:
        12px;

}


.gw-about-btn:hover {

    transform:
        translateY(-2px);

    background:
        var(--gw-green-light);

    box-shadow:
        0 10px 28px
        rgba(125, 255, 69, 0.18);

}


/* =========================================================
   ABOUT VISUAL
========================================================= */

.gw-about-visual {

    position:
        relative;

    width:
        100%;

    height:
        510px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   CORE AMBIENT
========================================================= */

.gw-about-core-glow {

    position:
        absolute;

    width:
        270px;

    height:
        270px;

    border-radius:
        50%;

    background:
        rgba(94, 255, 73, 0.14);

    filter:
        blur(65px);

    animation:
        gwCoreGlow
        5s
        ease-in-out
        infinite;

}


@keyframes gwCoreGlow {

    0%,
    100% {

        transform:
            scale(.9);

        opacity:
            .65;

    }

    50% {

        transform:
            scale(1.08);

        opacity:
            1;

    }

}


/* =========================================================
   GROUND
========================================================= */

.gw-about-ground {

    position:
        absolute;

    width:
        390px;

    height:
        105px;

    bottom:
        75px;

    border-radius:
        50%;

    background:
        rgba(44, 130, 52, 0.09);

    filter:
        blur(16px);

}


/* =========================================================
   CORE PLATFORM
========================================================= */

.gw-core-platform {

    position:
        relative;

    width:
        310px;

    height:
        300px;

    transform:
        perspective(900px)
        rotateX(7deg);

}


/* =========================================================
   BASE PLATFORM
========================================================= */

.gw-platform-base {

    position:
        absolute;

    left:
        50%;

    bottom:
        30px;

    width:
        255px;

    height:
        90px;

    transform:
        translateX(-50%)
        rotateX(55deg);

    border:
        1px solid
        rgba(125, 255, 69, 0.22);

    background:
        linear-gradient(
            135deg,
            #132016,
            #071009
        );

    box-shadow:
        0 0 35px
        rgba(125, 255, 69, 0.08);

}


/* Platform details */

.gw-platform-base::before {

    content:
        "";

    position:
        absolute;

    inset:
        12px;

    border:
        1px solid
        rgba(125, 255, 69, 0.1);

}


.gw-platform-base div {

    position:
        absolute;

    width:
        22px;

    height:
        5px;

    bottom:
        -14px;

    background:
        rgba(125, 255, 69, 0.5);

    box-shadow:
        0 0 10px
        rgba(125, 255, 69, 0.3);

}


.gw-platform-base div:nth-child(1) {

    left:
        32px;

}


.gw-platform-base div:nth-child(2) {

    left:
        82px;

}


.gw-platform-base div:nth-child(3) {

    right:
        82px;

}


.gw-platform-base div:nth-child(4) {

    right:
        32px;

}


/* =========================================================
   MIDDLE PLATFORM
========================================================= */

.gw-platform-middle {

    position:
        absolute;

    left:
        50%;

    bottom:
        83px;

    width:
        205px;

    height:
        55px;

    transform:
        translateX(-50%)
        rotateX(55deg);

    border:
        1px solid
        rgba(125, 255, 69, 0.32);

    background:
        linear-gradient(
            135deg,
            #1a2b1b,
            #0a150b
        );

}


.gw-platform-middle::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        115px;

    height:
        25px;

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

    border:
        1px solid
        rgba(125, 255, 69, 0.22);

    background:
        rgba(125, 255, 69, 0.04);

}


.gw-platform-light {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        45px;

    height:
        4px;

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

    background:
        var(--gw-green);

    box-shadow:
        0 0 18px
        rgba(125, 255, 69, 0.8);

}


/* =========================================================
   MAIN CUBE
========================================================= */

.gw-core-cube {

    position:
        absolute;

    left:
        50%;

    bottom:
        123px;

    width:
        125px;

    height:
        125px;

    transform:
        translateX(-50%)
        rotateX(-7deg)
        rotateY(-8deg);

    transform-style:
        preserve-3d;

    animation:
        gwCubeFloat
        5s
        ease-in-out
        infinite;

}


@keyframes gwCubeFloat {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0)
            rotateX(-7deg)
            rotateY(-8deg);

    }

    50% {

        transform:
            translateX(-50%)
            translateY(-8px)
            rotateX(-7deg)
            rotateY(-2deg);

    }

}


.gw-cube-face {

    position:
        absolute;

    width:
        125px;

    height:
        125px;

    border:
        1px solid
        rgba(125, 255, 69, 0.35);

    background:
        linear-gradient(
            145deg,
            rgba(25, 45, 26, 0.95),
            rgba(6, 15, 8, 0.97)
        );

}


.cube-front {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateZ(62.5px);

    box-shadow:
        inset 0 0 35px
        rgba(125, 255, 69, 0.07);

}


.cube-right {

    transform:
        rotateY(90deg)
        translateZ(62.5px);

    background:
        linear-gradient(
            180deg,
            #142718,
            #071009
        );

}


.cube-top {

    transform:
        rotateX(90deg)
        translateZ(62.5px);

    background:
        linear-gradient(
            135deg,
            #254a28,
            #0b190c
        );

}


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

.gw-cube-logo {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    line-height:
        1;

}


.gw-cube-logo span {

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        29px;

    font-weight:
        700;

    letter-spacing:
        -0.06em;

    color:
        #e5bd5d;

    text-shadow:
        0 0 15px
        rgba(225, 188, 93, 0.25);

}


.gw-cube-logo small {

    margin-top:
        5px;

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

    font-size:
        7px;

    letter-spacing:
        0.22em;

}


/* =========================================================
   CORE LIGHT
========================================================= */

.gw-core-light {

    position:
        absolute;

    left:
        50%;

    bottom:
        250px;

    width:
        70px;

    height:
        10px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        var(--gw-green);

    filter:
        blur(10px);

    opacity:
        .65;

}


/* =========================================================
   FLOATING PARTICLES
========================================================= */

.gw-core-particle {

    position:
        absolute;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 10px
        var(--gw-green);

}


.particle-1 {

    left:
        20px;

    top:
        175px;

    animation:
        gwParticleFloat1
        4s
        infinite;

}


.particle-2 {

    right:
        24px;

    top:
        125px;

    animation:
        gwParticleFloat2
        5s
        -1s
        infinite;

}


.particle-3 {

    left:
        60px;

    top:
        75px;

    animation:
        gwParticleFloat1
        5.5s
        -2s
        infinite;

}


.particle-4 {

    right:
        65px;

    bottom:
        75px;

    animation:
        gwParticleFloat2
        4.5s
        -1s
        infinite;

}


@keyframes gwParticleFloat1 {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            .25;

    }

    50% {

        transform:
            translateY(-18px);

        opacity:
            1;

    }

}


@keyframes gwParticleFloat2 {

    0%,
    100% {

        transform:
            translate(0, 0);

        opacity:
            .2;

    }

    50% {

        transform:
            translate(10px, -15px);

        opacity:
            .9;

    }

}


/* =========================================================
   FEATURE CARDS
========================================================= */

.gw-about-feature {

    position:
        absolute;

    z-index:
        15;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        155px;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(125, 255, 69, 0.2);

    border-radius:
        7px;

    background:
        rgba(6, 13, 8, 0.78);

    backdrop-filter:
        blur(13px);

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

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.28);

    transition:
        transform .25s ease,
        border-color .25s ease;

}


.gw-about-feature:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(125, 255, 69, 0.38);

}


.gw-feature-icon {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(125, 255, 69, 0.16);

    border-radius:
        6px;

    background:
        rgba(125, 255, 69, 0.045);

    color:
        var(--gw-green);

}


.gw-feature-icon i {

    font-size:
        12px;

}


.gw-about-feature div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.gw-about-feature strong {

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

    font-size:
        9px;

    font-weight:
        500;

}


.gw-about-feature small {

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

    font-size:
        7px;

}


/* Feature Positions */

.feature-technology {

    top:
        17%;

    left:
        3%;

}


.feature-community {

    top:
        29%;

    right:
        1%;

}


.feature-transparency {

    bottom:
        23%;

    left:
        1%;

}


.feature-trading {

    bottom:
        14%;

    right:
        5%;

}


/* =========================================================
   INFORMATION STRIP
========================================================= */

.gw-about-info-row {

    display:
        grid;

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

    margin-top:
        58px;

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

    border-radius:
        10px;

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

}


.gw-about-info {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    padding:
        20px;

}


.gw-about-info + .gw-about-info {

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

}


.gw-info-number {

    color:
        rgba(125, 255, 69, 0.5);

    font-size:
        9px;

    font-family:
        "Manrope",
        sans-serif;

}


.gw-about-info div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-about-info strong {

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

    font-size:
        10px;

    font-weight:
        500;

}


.gw-about-info small {

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

    font-size:
        8px;

    line-height:
        1.5;

}


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

@media (max-width: 991px) {

    .gw-about-section {

        padding:
            85px 0 70px;

    }


    .gw-about-content {

        max-width:
            600px;

    }


    .gw-about-visual {

        height:
            480px;

    }


    .gw-about-info-row {

        margin-top:
            35px;

    }

}


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

@media (max-width: 767px) {

    .gw-about-section {

        padding:
            72px 0 60px;

    }


    .gw-about-title {

        margin-top:
            17px;

        font-size:
            clamp(32px, 9vw, 43px);

    }


    .gw-about-text {

        font-size:
            12px;

        line-height:
            1.75;

        margin-top:
            17px;

    }


    .gw-about-text-muted {

        margin-top:
            9px;

    }


    .gw-about-btn {

        margin-top:
            22px;

    }


    /* Visual */

    .gw-about-visual {

        height:
            420px;

        margin-top:
            10px;

    }


    .gw-core-platform {

        transform:
            perspective(700px)
            rotateX(7deg)
            scale(.82);

    }


    .gw-about-core-glow {

        width:
            230px;

        height:
            230px;

    }


    .gw-about-ground {

        width:
            310px;

        bottom:
            52px;

    }


    /* Feature cards */

    .gw-about-feature {

        min-width:
            132px;

        padding:
            8px 9px;

    }


    .gw-feature-icon {

        width:
            27px;

        height:
            27px;

    }


    .gw-about-feature strong {

        font-size:
            8px;

    }


    .gw-about-feature small {

        font-size:
            6px;

    }


    .feature-technology {

        top:
            8%;

        left:
            0;

    }


    .feature-community {

        top:
            18%;

        right:
            0;

    }


    .feature-transparency {

        bottom:
            20%;

        left:
            0;

    }


    .feature-trading {

        bottom:
            9%;

        right:
            0;

    }


    /* Info */

    .gw-about-info-row {

        grid-template-columns:
            1fr;

        margin-top:
            30px;

    }


    .gw-about-info {

        padding:
            16px;

    }


    .gw-about-info + .gw-about-info {

        border-left:
            0;

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

    }

}


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

@media (max-width: 420px) {

    .gw-about-visual {

        height:
            375px;

    }


    .gw-core-platform {

        transform:
            perspective(700px)
            rotateX(7deg)
            scale(.67);

    }


    .gw-about-feature {

        min-width:
            118px;

    }


    .feature-technology {

        left:
            -4px;

    }


    .feature-community {

        right:
            -4px;

    }


    .feature-transparency {

        left:
            -4px;

    }


    .feature-trading {

        right:
            -4px;

    }


    .gw-about-info strong {

        font-size:
            9px;

    }

}


/* =========================================================
   GIO WORLDS
   GLOBAL MARKETS SECTION
========================================================= */

.gw-markets-section {

    position:
        relative;

    padding:
        105px 0 95px;

    background:
        #050805;

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

    isolation:
        isolate;

}


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

.gw-markets-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    opacity:
        .25;

    background-image:

        linear-gradient(
            rgba(125,255,69,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(125,255,69,.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

}


.gw-markets-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(110px);

    pointer-events:
        none;

    z-index:
        -3;

}


.gw-markets-glow-left {

    width:
        450px;

    height:
        450px;

    left:
        -300px;

    top:
        15%;

    background:
        rgba(76,255,67,.045);

}


.gw-markets-glow-right {

    width:
        550px;

    height:
        550px;

    right:
        -300px;

    bottom:
        5%;

    background:
        rgba(52,185,69,.055);

}


/* =========================================================
   HEADER
========================================================= */

.gw-markets-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}


.gw-section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        6px 10px;

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

    border-radius:
        5px;

    color:
        rgba(190,255,170,.78);

    background:
        rgba(125,255,69,.025);

    font-size:
        8px;

    letter-spacing:
        .13em;

}


.gw-section-label span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 8px
        var(--gw-green);

}


.gw-markets-heading h2 {

    margin:
        19px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(35px, 4vw, 51px);

    line-height:
        1.08;

    letter-spacing:
        -.04em;

    font-weight:
        600;

}


.gw-markets-heading h2 span {

    color:
        var(--gw-green);

}


.gw-markets-heading p {

    max-width:
        510px;

    margin:
        17px 0 0;

    color:
        rgba(255,255,255,.43);

    font-size:
        12px;

    line-height:
        1.75;

}


/* =========================================================
   MARKET STATUS
========================================================= */

.gw-market-status {

    min-width:
        225px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px 15px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.018);

}


.gw-status-dot {

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 12px
        rgba(125,255,69,.75);

    animation:
        gwStatusPulse
        2s
        infinite;

}


@keyframes gwStatusPulse {

    0%,
    100% {

        opacity:
            1;

        box-shadow:
            0 0 12px
            rgba(125,255,69,.75);

    }

    50% {

        opacity:
            .45;

        box-shadow:
            0 0 4px
            rgba(125,255,69,.3);

    }

}


.gw-market-status div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.gw-market-status strong {

    color:
        rgba(255,255,255,.72);

    font-size:
        9px;

    font-weight:
        500;

}


.gw-market-status small {

    color:
        rgba(255,255,255,.28);

    font-size:
        7px;

}


/* =========================================================
   TABS
========================================================= */

.gw-market-tabs {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        3px;

    margin-top:
        42px;

    padding:
        4px;

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

    border-radius:
        7px;

    background:
        rgba(255,255,255,.018);

}


.gw-market-tab {

    min-width:
        82px;

    height:
        31px;

    border-radius:
        5px;

    background:
        transparent;

    color:
        rgba(255,255,255,.38);

    font-size:
        8px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        all .25s ease;

}


.gw-market-tab:hover {

    color:
        rgba(255,255,255,.75);

}


.gw-market-tab.active {

    background:
        rgba(125,255,69,.1);

    color:
        var(--gw-green);

}


/* =========================================================
   DASHBOARD
========================================================= */

.gw-market-dashboard {

    display:
        grid;

    grid-template-columns:
        1fr 1.05fr;

    gap:
        14px;

    margin-top:
        17px;

}


/* =========================================================
   MARKET LIST
========================================================= */

.gw-market-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.gw-market-item {

    min-height:
        87px;

    display:
        grid;

    grid-template-columns:
        1.45fr .9fr 1fr 20px;

    align-items:
        center;

    gap:
        15px;

    padding:
        13px 15px;

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

    border-radius:
        8px;

    background:
        rgba(11,17,12,.68);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.gw-market-item:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(125,255,69,.2);

    background:
        rgba(125,255,69,.025);

}


.gw-market-name {

    min-width:
        0;

}


.gw-market-symbol {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255,255,255,.8);

    font-size:
        11px;

    font-weight:
        600;

}


.gw-market-name small {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.26);

    font-size:
        7px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.gw-currency-flag {

    width:
        29px;

    height:
        29px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

    background:
        rgba(125,255,69,.045);

    color:
        var(--gw-green);

    font-size:
        10px;

    font-weight:
        600;

}


.gw-currency-flag.gold {

    color:
        #e8c65e;

    border-color:
        rgba(232,198,94,.2);

    background:
        rgba(232,198,94,.04);

}


.gw-currency-flag.silver {

    color:
        #c9d2d5;

}


.gw-currency-flag.oil {

    color:
        #ffb45d;

}


.gw-currency-flag.gas {

    color:
        #8ab4ff;

}


/* =========================================================
   PRICE
========================================================= */

.gw-market-price {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-market-price strong {

    color:
        rgba(255,255,255,.78);

    font-size:
        11px;

    font-weight:
        500;

}


.gw-market-price span {

    font-size:
        8px;

    font-weight:
        500;

}


.positive {

    color:
        var(--gw-green);

}


.negative {

    color:
        #ff6767;

}


/* =========================================================
   MINI CHART
========================================================= */

.gw-mini-chart {

    position:
        relative;

    width:
        100%;

    max-width:
        105px;

    height:
        34px;

    overflow:
        hidden;

}


.gw-mini-chart::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    height:
        1px;

    background:
        rgba(255,255,255,.035);

}


.gw-mini-chart span {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    height:
        1px;

    background:
        var(--gw-green);

    box-shadow:
        0 0 7px
        rgba(125,255,69,.4);

    transform:
        rotate(-8deg);

}


.chart-up span {

    clip-path:
        polygon(
            0 75%,
            8% 65%,
            16% 73%,
            25% 45%,
            34% 57%,
            43% 36%,
            51% 48%,
            61% 21%,
            70% 35%,
            78% 12%,
            88% 25%,
            100% 0,
            100% 100%,
            0 100%
        );

    height:
        32px;

    top:
        2px;

    background:
        linear-gradient(
            135deg,
            rgba(125,255,69,.8),
            rgba(125,255,69,.12)
        );

}


.chart-down span {

    background:
        #ff6767;

    box-shadow:
        0 0 7px
        rgba(255,103,103,.25);

    transform:
        rotate(7deg);

}


.chart-three span {

    transform:
        rotate(-4deg);

}


.chart-gold span {

    background:
        #d9ba51;

    box-shadow:
        0 0 7px
        rgba(217,186,81,.3);

}


.gw-market-arrow {

    justify-self:
        end;

    color:
        var(--gw-green);

    font-size:
        11px;

}


.negative-arrow {

    color:
        #ff6767;

}


/* =========================================================
   HIDDEN MARKET ITEMS
========================================================= */

.gw-market-hidden {

    display:
        none;

}


/* =========================================================
   MARKET OVERVIEW
========================================================= */

.gw-market-overview {

    position:
        relative;

    min-height:
        0;

    padding:
        19px;

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

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            rgba(16,25,17,.88),
            rgba(7,12,8,.72)
        );

    overflow:
        hidden;

}


.gw-market-overview::before {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -90px;

    top:
        -100px;

    border-radius:
        50%;

    background:
        rgba(125,255,69,.055);

    filter:
        blur(50px);

}


/* =========================================================
   OVERVIEW HEADER
========================================================= */

.gw-overview-header {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.gw-overview-header > div:first-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-overview-header span {

    color:
        rgba(255,255,255,.27);

    font-size:
        7px;

    letter-spacing:
        .12em;

}


.gw-overview-header strong {

    color:
        rgba(255,255,255,.82);

    font-size:
        15px;

    font-weight:
        600;

}


.gw-live-badge {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 7px;

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

    border-radius:
        4px;

    background:
        rgba(125,255,69,.035);

    color:
        rgba(125,255,69,.65);

    font-size:
        6px;

    letter-spacing:
        .1em;

}


.gw-live-badge span {

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--gw-green);

}


/* =========================================================
   OVERVIEW PRICE
========================================================= */

.gw-overview-price {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;

    margin-top:
        22px;

}


.gw-overview-price strong {

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        27px;

    font-weight:
        500;

}


.gw-overview-price span {

    color:
        var(--gw-green);

    font-size:
        9px;

}


/* =========================================================
   LARGE CHART
========================================================= */

.gw-large-chart {

    position:
        relative;

    height:
        205px;

    margin-top:
        18px;

    overflow:
        hidden;

}


.gw-chart-grid {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

}


.gw-chart-grid span {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(255,255,255,.045);

}


.gw-chart-svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

}


.gw-chart-area {

    fill:
        rgba(125,255,69,.06);

}


.gw-chart-line {

    fill:
        none;

    stroke:
        var(--gw-green);

    stroke-width:
        2;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 5px
            rgba(125,255,69,.45)
        );

}


.gw-chart-current {

    position:
        absolute;

    right:
        -2px;

    top:
        17px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 0 5px
        rgba(125,255,69,.07),
        0 0 16px
        rgba(125,255,69,.75);

}


/* =========================================================
   CHART TIMES
========================================================= */

.gw-chart-times {

    display:
        flex;

    justify-content:
        space-between;

    color:
        rgba(255,255,255,.2);

    font-size:
        6px;

}


/* =========================================================
   OVERVIEW STATS
========================================================= */

.gw-overview-stats {

    display:
        grid;

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

    gap:
        8px;

    margin-top:
        22px;

    padding-top:
        15px;

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

}


.gw-overview-stats div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-overview-stats small {

    color:
        rgba(255,255,255,.23);

    font-size:
        6px;

    letter-spacing:
        .08em;

}


.gw-overview-stats strong {

    color:
        rgba(255,255,255,.65);

    font-size:
        9px;

    font-weight:
        500;

}


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

.gw-markets-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        28px;

}


.gw-markets-bottom > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(255,255,255,.28);

    font-size:
        7px;

    letter-spacing:
        .1em;

}


.gw-markets-bottom-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 8px
        var(--gw-green);

}


.gw-markets-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        40px;

    padding:
        0 15px;

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

    border-radius:
        6px;

    color:
        rgba(255,255,255,.68);

    background:
        rgba(125,255,69,.025);

    font-size:
        8px;

    font-weight:
        500;

    transition:
        all .25s ease;

}


.gw-markets-button i {

    color:
        var(--gw-green);

}


.gw-markets-button:hover {

    color:
        #ffffff;

    border-color:
        rgba(125,255,69,.4);

    background:
        rgba(125,255,69,.06);

    transform:
        translateY(-2px);

}


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

@media (max-width: 991px) {

    .gw-markets-section {

        padding:
            85px 0 75px;

    }


    .gw-market-dashboard {

        grid-template-columns:
            1fr;

    }


    .gw-market-overview {

        min-height:
            380px;

    }

}


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

@media (max-width: 767px) {

    .gw-markets-section {

        padding:
            72px 0 62px;

    }


    .gw-markets-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            22px;

    }


    .gw-markets-heading h2 {

        margin-top:
            17px;

        font-size:
            clamp(32px, 9vw, 43px);

    }


    .gw-markets-heading p {

        margin-top:
            14px;

        font-size:
            11px;

    }


    .gw-market-status {

        min-width:
            0;

        width:
            100%;

    }


    .gw-market-tabs {

        width:
            100%;

        margin-top:
            28px;

    }


    .gw-market-tab {

        flex:
            1;

        min-width:
            0;

    }


    .gw-market-item {

        min-height:
            76px;

        grid-template-columns:
            1.35fr .75fr 75px 15px;

        gap:
            7px;

        padding:
            10px;

    }


    .gw-market-symbol {

        font-size:
            9px;

    }


    .gw-market-name small {

        font-size:
            6px;

    }


    .gw-currency-flag {

        width:
            26px;

        height:
            26px;

        font-size:
            8px;

    }


    .gw-market-price strong {

        font-size:
            9px;

    }


    .gw-market-price span {

        font-size:
            7px;

    }


    .gw-mini-chart {

        height:
            28px;

    }


    .gw-market-arrow {

        font-size:
            9px;

    }


    .gw-market-overview {

        padding:
            15px;

        min-height:
            350px;

    }


    .gw-overview-price strong {

        font-size:
            23px;

    }


    .gw-large-chart {

        height:
            175px;

    }


    .gw-overview-stats {

        margin-top:
            18px;

    }


    .gw-markets-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;

    }


    .gw-markets-button {

        width:
            100%;

        justify-content:
            center;

    }

}


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

@media (max-width: 430px) {

    .gw-market-item {

        grid-template-columns:
            1.2fr .7fr 58px 12px;

    }


    .gw-market-name small {

        display:
            none;

    }


    .gw-market-symbol {

        font-size:
            8px;

    }


    .gw-currency-flag {

        width:
            24px;

        height:
            24px;

    }


    .gw-mini-chart {

        display:
            none;

    }


    .gw-market-price strong {

        font-size:
            8px;

    }


    .gw-market-price span {

        font-size:
            6px;

    }


    .gw-market-overview {

        min-height:
            325px;

    }


    .gw-large-chart {

        height:
            150px;

    }


    .gw-overview-stats {

        gap:
            5px;

    }

}

/* =========================================================
   GIO WORLDS
   TRADING SERVICES SECTION
========================================================= */

.gw-trading-section {

    position:
        relative;

    padding:
        105px 0 95px;

    background:
        #050805;

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

    isolation:
        isolate;

}


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

.gw-trading-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    opacity:
        .25;

    background-image:

        linear-gradient(
            rgba(125,255,69,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(125,255,69,.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

}


.gw-trading-glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(110px);

    pointer-events:
        none;

}


.gw-trading-glow-left {

    width:
        470px;

    height:
        470px;

    left:
        -300px;

    top:
        20%;

    background:
        rgba(80,255,65,.045);

}


.gw-trading-glow-right {

    width:
        550px;

    height:
        550px;

    right:
        -300px;

    bottom:
        0;

    background:
        rgba(43,170,60,.05);

}


/* =========================================================
   HEADER
========================================================= */

.gw-trading-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

}


.gw-trading-heading h2 {

    margin:
        19px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(35px,4vw,51px);

    line-height:
        1.08;

    letter-spacing:
        -.04em;

    font-weight:
        600;

    color:
        #ffffff;

}


.gw-trading-heading h2 span {

    color:
        var(--gw-green);

}


.gw-trading-intro {

    max-width:
        410px;

    margin:
        0 0 4px;

    color:
        rgba(255,255,255,.39);

    font-size:
        12px;

    line-height:
        1.8;

}


/* =========================================================
   MAIN EXPERIENCE
========================================================= */

.gw-trading-experience {

    display:
        grid;

    grid-template-columns:
        285px 1fr;

    gap:
        14px;

    margin-top:
        48px;

}


/* =========================================================
   SERVICE NAV
========================================================= */

.gw-trading-services {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.gw-trading-service {

    position:
        relative;

    min-height:
        80px;

    display:
        grid;

    grid-template-columns:
        30px 1fr 15px;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.015);

    cursor:
        pointer;

    transition:
        all .25s ease;

}


.gw-trading-service:hover {

    border-color:
        rgba(125,255,69,.22);

    background:
        rgba(125,255,69,.025);

    transform:
        translateX(3px);

}


.gw-trading-service.active {

    border-color:
        rgba(125,255,69,.3);

    background:
        linear-gradient(
            100deg,
            rgba(125,255,69,.07),
            rgba(125,255,69,.015)
        );

}


.gw-trading-service.active::before {

    content:
        "";

    position:
        absolute;

    left:
        -1px;

    top:
        12px;

    bottom:
        12px;

    width:
        2px;

    border-radius:
        2px;

    background:
        var(--gw-green);

    box-shadow:
        0 0 10px
        rgba(125,255,69,.55);

}


.gw-service-number {

    color:
        rgba(125,255,69,.45);

    font-size:
        7px;

    font-family:
        "Manrope",
        sans-serif;

}


.gw-service-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.gw-service-content strong {

    color:
        rgba(255,255,255,.76);

    font-size:
        10px;

    font-weight:
        500;

}


.gw-service-content span {

    color:
        rgba(255,255,255,.27);

    font-size:
        7px;

}


.gw-trading-service > i {

    color:
        rgba(255,255,255,.22);

    font-size:
        10px;

}


.gw-trading-service.active > i {

    color:
        var(--gw-green);

}


/* =========================================================
   SERVICE NOTE
========================================================= */

.gw-trading-service-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        auto;

    padding:
        14px 12px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.012);

}


.gw-note-icon {

    width:
        28px;

    height:
        28px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

    background:
        rgba(125,255,69,.04);

    color:
        var(--gw-green);

}


.gw-note-icon i {

    font-size:
        11px;

}


.gw-trading-service-note div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-trading-service-note strong {

    color:
        rgba(255,255,255,.55);

    font-size:
        8px;

    font-weight:
        500;

}


.gw-trading-service-note small {

    color:
        rgba(255,255,255,.24);

    font-size:
        7px;

    line-height:
        1.5;

}


/* =========================================================
   TRADING TERMINAL
========================================================= */

.gw-trading-terminal {

    position:
        relative;

    min-height:
        425px;

    padding:
        16px;

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

    border-radius:
        10px;

    background:
        linear-gradient(
            145deg,
            rgba(14,23,15,.94),
            rgba(5,10,6,.92)
        );

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

    overflow:
        hidden;

}


.gw-trading-terminal::before {

    content:
        "";

    position:
        absolute;

    width:
        330px;

    height:
        330px;

    right:
        -150px;

    top:
        -170px;

    border-radius:
        50%;

    background:
        rgba(125,255,69,.055);

    filter:
        blur(60px);

}


/* =========================================================
   TERMINAL TOP
========================================================= */

.gw-terminal-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        13px;

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

}


.gw-terminal-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(255,255,255,.3);

    font-size:
        7px;

    letter-spacing:
        .1em;

}


.gw-terminal-status {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 8px
        rgba(125,255,69,.65);

}


.gw-terminal-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


.gw-terminal-actions span {

    min-width:
        27px;

    height:
        23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        4px;

    color:
        rgba(255,255,255,.25);

    font-size:
        7px;

}


.gw-terminal-actions span.active {

    color:
        var(--gw-green);

    background:
        rgba(125,255,69,.07);

}


.gw-terminal-actions i {

    margin-left:
        7px;

    color:
        rgba(255,255,255,.22);

    font-size:
        9px;

}


/* =========================================================
   PAIR
========================================================= */

.gw-terminal-pair {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        18px 2px 14px;

}


.gw-terminal-pair-name {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.gw-pair-symbol {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        7px;

    color:
        var(--gw-green);

    background:
        rgba(125,255,69,.045);

    font-size:
        14px;

}


.gw-terminal-pair-name div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-terminal-pair-name strong {

    color:
        rgba(255,255,255,.8);

    font-size:
        12px;

    font-weight:
        600;

}


.gw-terminal-pair-name small {

    color:
        rgba(255,255,255,.25);

    font-size:
        7px;

}


.gw-terminal-current {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        4px;

}


.gw-terminal-current strong {

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        20px;

    font-weight:
        500;

}


.gw-terminal-current span {

    color:
        var(--gw-green);

    font-size:
        8px;

}


/* =========================================================
   TERMINAL CHART
========================================================= */

.gw-terminal-chart {

    position:
        relative;

    height:
        255px;

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

    border-radius:
        5px;

    background:
        rgba(0,0,0,.1);

    overflow:
        hidden;

}


/* Vertical grid */

.gw-terminal-vgrid {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    justify-content:
        space-between;

}


.gw-terminal-vgrid span {

    width:
        1px;

    height:
        100%;

    background:
        rgba(255,255,255,.035);

}


/* Horizontal grid */

.gw-terminal-hgrid {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

}


.gw-terminal-hgrid span {

    width:
        100%;

    height:
        1px;

    background:
        rgba(255,255,255,.035);

}


/* SVG */

.gw-terminal-svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

}


.gw-terminal-area {

    fill:
        url(#gwTerminalFill);

}


.gw-terminal-line {

    fill:
        none;

    stroke:
        var(--gw-green);

    stroke-width:
        2;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0 0 5px
            rgba(125,255,69,.45)
        );

}


.gw-terminal-secondary-line {

    fill:
        none;

    stroke:
        rgba(125,255,69,.18);

    stroke-width:
        1.2;

    vector-effect:
        non-scaling-stroke;

}


/* Current point */

.gw-terminal-current-point {

    position:
        absolute;

    right:
        4px;

    top:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.gw-terminal-current-point span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--gw-green);

    box-shadow:
        0 0 0 5px
        rgba(125,255,69,.07),
        0 0 15px
        rgba(125,255,69,.7);

}


.gw-terminal-current-point div {

    padding:
        4px 6px;

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

    border-radius:
        3px;

    color:
        var(--gw-green);

    background:
        rgba(5,15,6,.85);

    font-size:
        6px;

}


/* Time */

.gw-terminal-time {

    position:
        absolute;

    left:
        10px;

    right:
        10px;

    bottom:
        7px;

    display:
        flex;

    justify-content:
        space-between;

    color:
        rgba(255,255,255,.2);

    font-size:
        6px;

}


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

.gw-terminal-footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    margin-top:
        14px;

}


.gw-terminal-footer div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-terminal-footer small {

    color:
        rgba(255,255,255,.22);

    font-size:
        6px;

}


.gw-terminal-footer strong {

    color:
        rgba(255,255,255,.6);

    font-size:
        9px;

    font-weight:
        500;

}


.gw-terminal-view-btn {

    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

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

    border-radius:
        5px;

    color:
        rgba(255,255,255,.55);

    background:
        rgba(125,255,69,.025);

    font-size:
        7px;

    cursor:
        pointer;

    transition:
        all .25s ease;

}


.gw-terminal-view-btn i {

    color:
        var(--gw-green);

}


.gw-terminal-view-btn:hover {

    color:
        #ffffff;

    border-color:
        rgba(125,255,69,.4);

    background:
        rgba(125,255,69,.07);

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.gw-trading-features {

    display:
        grid;

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

    margin-top:
        14px;

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

    border-radius:
        8px;

    background:
        rgba(255,255,255,.012);

}


.gw-trading-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        18px;

}


.gw-trading-feature + .gw-trading-feature {

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

}


.gw-trading-feature-icon {

    width:
        31px;

    height:
        31px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        6px;

    color:
        var(--gw-green);

    background:
        rgba(125,255,69,.035);

}


.gw-trading-feature-icon i {

    font-size:
        12px;

}


.gw-trading-feature div:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.gw-trading-feature strong {

    color:
        rgba(255,255,255,.65);

    font-size:
        9px;

    font-weight:
        500;

}


.gw-trading-feature span {

    color:
        rgba(255,255,255,.25);

    font-size:
        7px;

    line-height:
        1.5;

}


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

@media (max-width: 991px) {

    .gw-trading-section {

        padding:
            85px 0 75px;

    }


    .gw-trading-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .gw-trading-intro {

        margin:
            0;

    }


    .gw-trading-experience {

        grid-template-columns:
            1fr;

    }


    .gw-trading-services {

        display:
            grid;

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

    }


    .gw-trading-service-note {

        grid-column:
            1 / -1;

    }


    .gw-trading-terminal {

        min-height:
            420px;

    }

}


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

@media (max-width: 767px) {

    .gw-trading-section {

        padding:
            72px 0 62px;

    }


    .gw-trading-heading h2 {

        margin-top:
            17px;

        font-size:
            clamp(32px,9vw,43px);

    }


    .gw-trading-intro {

        font-size:
            11px;

        line-height:
            1.75;

    }


    .gw-trading-experience {

        margin-top:
            30px;

    }


    .gw-trading-services {

        grid-template-columns:
            1fr;

        gap:
            6px;

    }


    .gw-trading-service {

        min-height:
            68px;

    }


    .gw-trading-service-note {

        margin-top:
            3px;

    }


    .gw-trading-terminal {

        min-height:
            0;

        padding:
            12px;

    }


    .gw-terminal-top {

        padding-bottom:
            10px;

    }


    .gw-terminal-actions span {

        min-width:
            24px;

        height:
            21px;

    }


    .gw-terminal-pair {

        padding:
            15px 2px 12px;

    }


    .gw-pair-symbol {

        width:
            30px;

        height:
            30px;

    }


    .gw-terminal-pair-name strong {

        font-size:
            10px;

    }


    .gw-terminal-current strong {

        font-size:
            17px;

    }


    .gw-terminal-chart {

        height:
            205px;

    }


    .gw-terminal-footer {

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

        gap:
            13px;

    }


    .gw-terminal-view-btn {

        grid-column:
            1 / -1;

        width:
            100%;

    }


    .gw-trading-features {

        grid-template-columns:
            1fr;

    }


    .gw-trading-feature {

        padding:
            15px;

    }


    .gw-trading-feature + .gw-trading-feature {

        border-left:
            0;

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

    }

}


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

@media (max-width: 420px) {

    .gw-terminal-current strong {

        font-size:
            15px;

    }


    .gw-terminal-chart {

        height:
            180px;

    }


    .gw-terminal-footer strong {

        font-size:
            8px;

    }


    .gw-terminal-actions i {

        display:
            none;

    }

}


/* =========================
   STAKING SECTION
========================= */

.gw-staking-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(circle at 75% 45%, rgba(151, 255, 0, 0.055), transparent 30%),
        radial-gradient(circle at 15% 80%, rgba(151, 255, 0, 0.035), transparent 28%),
        #050805;
}


/* Background Glow */

.gw-staking-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.gw-staking-glow-1 {
    top: 15%;
    right: -250px;
    background: rgba(151, 255, 0, 0.08);
}

.gw-staking-glow-2 {
    bottom: -250px;
    left: -200px;
    background: rgba(151, 255, 0, 0.05);
}


/* Heading */

.gw-staking-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 65px;
}

.gw-section-mini-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--gw-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.gw-section-mini-label span {
    width: 28px;
    height: 1px;
    background: var(--gw-green);
    opacity: 0.65;
}

.gw-staking-heading h2 {
    margin: 0;
    color: #f4f7f1;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.8px;
}

.gw-staking-heading h2 strong {
    color: var(--gw-green);
    font-weight: 600;
}

.gw-staking-heading p {
    max-width: 650px;
    margin: 22px auto 0;
    color: rgba(235, 240, 232, 0.58);
    font-size: 15px;
    line-height: 1.8;
}


/* Main Vault */

.gw-staking-vault {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 70px;
    align-items: center;

    max-width: 1180px;
    margin: 0 auto;
}


/* Left Information */

.gw-staking-info {
    padding-right: 20px;
}

.gw-staking-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 13px;
    margin-bottom: 24px;

    border: 1px solid rgba(151, 255, 0, 0.17);
    border-radius: 100px;

    background: rgba(151, 255, 0, 0.045);

    color: var(--gw-green);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.gw-staking-badge i {
    font-size: 13px;
}

.gw-staking-info h3 {
    max-width: 510px;
    margin: 0;

    color: #f2f5ef;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.gw-staking-info h3 span {
    display: block;
    color: var(--gw-green);
}

.gw-staking-info > p {
    max-width: 500px;
    margin: 22px 0 35px;

    color: rgba(235, 240, 232, 0.56);
    font-size: 14px;
    line-height: 1.85;
}


/* Points */

.gw-staking-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gw-staking-point {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gw-staking-point-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151, 255, 0, 0.14);
    border-radius: 12px;

    background: rgba(151, 255, 0, 0.045);

    color: var(--gw-green);
    font-size: 17px;
}

.gw-staking-point strong {
    display: block;
    color: #e9ede7;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
}

.gw-staking-point span {
    display: block;
    color: rgba(235, 240, 232, 0.43);
    font-size: 11px;
}


/* Vault Card */

.gw-staking-vault-card {
    position: relative;

    padding: 30px;

    border: 1px solid rgba(151, 255, 0, 0.13);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.035);

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

.gw-staking-vault-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(151,255,0,0.65),
        transparent
    );

    opacity: 0.55;
}


/* Vault Top */

.gw-vault-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.gw-vault-label {
    display: block;
    margin-bottom: 7px;

    color: rgba(235, 240, 232, 0.37);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.gw-vault-top h4 {
    margin: 0;
    color: #edf2ea;
    font-size: 21px;
    font-weight: 600;
}

.gw-vault-status {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border-radius: 100px;
    background: rgba(151,255,0,0.055);

    color: var(--gw-green);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gw-vault-status span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gw-green);
    box-shadow: 0 0 8px var(--gw-green);
}


/* Vault Visual */

.gw-vault-visual {
    position: relative;

    width: 255px;
    height: 255px;

    margin: 25px auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gw-vault-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(151,255,0,0.12);
}

.gw-vault-ring-outer {
    width: 245px;
    height: 245px;

    border-color: rgba(151,255,0,0.08);
    border-right-color: rgba(151,255,0,0.48);

    animation: gwVaultRotate 16s linear infinite;
}

.gw-vault-ring-middle {
    width: 190px;
    height: 190px;

    border-color: rgba(151,255,0,0.07);
    border-left-color: rgba(151,255,0,0.42);

    animation: gwVaultRotateReverse 11s linear infinite;
}

.gw-vault-core {
    position: relative;
    z-index: 3;

    width: 128px;
    height: 128px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(151,255,0,0.11),
            rgba(8,12,7,0.95) 68%
        );

    border: 1px solid rgba(151,255,0,0.25);

    box-shadow:
        0 0 35px rgba(151,255,0,0.08),
        inset 0 0 30px rgba(151,255,0,0.04);
}

.gw-vault-core-icon {
    color: var(--gw-green);
    font-size: 17px;
    margin-bottom: 5px;
}

.gw-vault-core span {
    color: rgba(235,240,232,0.42);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.gw-vault-core strong {
    margin-top: 5px;
    color: #edf2ea;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}


/* Orbit Elements */

.gw-vault-orbit {
    position: absolute;
    z-index: 4;

    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.2);
    border-radius: 50%;

    background: #0b1009;

    color: var(--gw-green);
    font-size: 11px;

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

.gw-vault-orbit-1 {
    top: 27px;
    right: 32px;
}

.gw-vault-orbit-2 {
    bottom: 28px;
    left: 31px;
}


/* Plan Selector */

.gw-plan-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;

    margin-top: 8px;
}

.gw-plan-btn {
    min-height: 58px;

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

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

    color: rgba(235,240,232,0.45);

    cursor: pointer;
    transition: all 0.25s ease;
}

.gw-plan-btn span {
    display: block;
    font-size: 10px;
    margin-bottom: 4px;
}

.gw-plan-btn strong {
    font-size: 12px;
    font-weight: 600;
}

.gw-plan-btn:hover {
    border-color: rgba(151,255,0,0.2);
    color: #dce5d6;
}

.gw-plan-btn.active {
    border-color: rgba(151,255,0,0.38);
    background: rgba(151,255,0,0.07);
    color: var(--gw-green);

    box-shadow: inset 0 0 20px rgba(151,255,0,0.025);
}


/* Stats */

.gw-vault-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 18px;

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

.gw-vault-stat {
    padding: 16px 12px;
    border-right: 1px solid rgba(255,255,255,0.055);
}

.gw-vault-stat:last-child {
    border-right: 0;
}

.gw-vault-stat span {
    display: block;

    color: rgba(235,240,232,0.32);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;

    margin-bottom: 6px;
}

.gw-vault-stat strong {
    color: #e9eee7;
    font-size: 13px;
    font-weight: 600;
}

.gw-vault-stat strong#gwPlanReturn {
    color: var(--gw-green);
}

.gw-live-text {
    color: var(--gw-green) !important;
}


/* Button */

.gw-staking-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;

    margin-top: 18px;
    padding: 14px 20px;

    border: 1px solid rgba(151,255,0,0.4);
    border-radius: 11px;

    background: var(--gw-green);

    color: #071004 !important;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;

    transition: all 0.25s ease;
}

.gw-staking-btn:hover {
    transform: translateY(-2px);

    background: #b2ff42;

    box-shadow:
        0 10px 30px rgba(151,255,0,0.13);
}

.gw-staking-btn i {
    font-size: 14px;
}


/* Disclaimer */

.gw-staking-disclaimer {
    margin-top: 11px;

    color: rgba(235,240,232,0.27);
    font-size: 8px;
    line-height: 1.6;
    text-align: center;
}


/* Bottom Features */

.gw-staking-bottom {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;

    max-width: 1050px;
    margin: 70px auto 0;

    padding: 23px 0;

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

.gw-staking-bottom-item {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 0 22px;
}

.gw-staking-bottom-item > i {
    color: var(--gw-green);
    font-size: 18px;
}

.gw-staking-bottom-item strong {
    display: block;

    color: #e5eae2;
    font-size: 11px;
    font-weight: 600;

    margin-bottom: 3px;
}

.gw-staking-bottom-item span {
    display: block;

    color: rgba(235,240,232,0.32);
    font-size: 9px;
}

.gw-staking-divider {
    width: 1px;
    height: 35px;
    background: rgba(255,255,255,0.07);
}


/* Animations */

@keyframes gwVaultRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gwVaultRotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


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

@media (max-width: 991px) {

    .gw-staking-section {
        padding: 95px 0;
    }

    .gw-staking-vault {
        grid-template-columns: 1fr;
        gap: 55px;
        max-width: 700px;
    }

    .gw-staking-info {
        padding-right: 0;
        text-align: center;
    }

    .gw-staking-info h3,
    .gw-staking-info > p {
        margin-left: auto;
        margin-right: auto;
    }

    .gw-staking-points {
        max-width: 470px;
        margin: 0 auto;
        text-align: left;
    }

    .gw-staking-vault-card {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .gw-staking-bottom {
        max-width: 700px;
    }

    .gw-staking-bottom-item {
        padding: 0 12px;
    }
}


@media (max-width: 767px) {

    .gw-staking-section {
        padding: 80px 0;
    }

    .gw-staking-heading {
        margin-bottom: 45px;
    }

    .gw-staking-heading h2 {
        font-size: 40px;
    }

    .gw-staking-info h3 {
        font-size: 36px;
    }

    .gw-staking-vault {
        gap: 45px;
    }

    .gw-staking-vault-card {
        padding: 23px 18px;
        border-radius: 21px;
    }

    .gw-vault-visual {
        width: 225px;
        height: 225px;
    }

    .gw-vault-ring-outer {
        width: 215px;
        height: 215px;
    }

    .gw-vault-ring-middle {
        width: 170px;
        height: 170px;
    }

    .gw-vault-orbit-1 {
        right: 24px;
    }

    .gw-vault-orbit-2 {
        left: 24px;
    }

    .gw-staking-bottom {
        display: flex;
        flex-direction: column;
        gap: 20px;

        margin-top: 50px;
    }

    .gw-staking-divider {
        width: 70%;
        height: 1px;
    }

    .gw-staking-bottom-item {
        width: 100%;
        padding: 0 20px;
    }
}


@media (max-width: 420px) {

    .gw-staking-section {
        padding: 70px 0;
    }

    .gw-staking-heading h2 {
        font-size: 34px;
    }

    .gw-staking-heading p {
        font-size: 13px;
    }

    .gw-staking-info h3 {
        font-size: 31px;
    }

    .gw-staking-info > p {
        font-size: 13px;
    }

    .gw-staking-vault-card {
        padding: 20px 14px;
    }

    .gw-vault-top h4 {
        font-size: 18px;
    }

    .gw-vault-status {
        font-size: 7px;
    }

    .gw-vault-visual {
        width: 205px;
        height: 205px;
    }

    .gw-vault-ring-outer {
        width: 195px;
        height: 195px;
    }

    .gw-vault-ring-middle {
        width: 153px;
        height: 153px;
    }

    .gw-vault-core {
        width: 112px;
        height: 112px;
    }

    .gw-vault-orbit-1 {
        right: 17px;
        top: 23px;
    }

    .gw-vault-orbit-2 {
        left: 17px;
        bottom: 23px;
    }

    .gw-plan-selector {
        gap: 6px;
    }

    .gw-plan-btn {
        min-height: 53px;
    }

    .gw-plan-btn span {
        font-size: 9px;
    }

    .gw-plan-btn strong {
        font-size: 11px;
    }

    .gw-vault-stat {
        padding: 13px 7px;
    }

    .gw-vault-stat span {
        font-size: 7px;
        letter-spacing: 0.7px;
    }

    .gw-vault-stat strong {
        font-size: 11px;
    }

    .gw-staking-point-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }
}

/* =========================
   REWARDS SECTION
========================= */

.gw-rewards-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    background:
        radial-gradient(
            circle at 18% 45%,
            rgba(151, 255, 0, 0.045),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(151, 255, 0, 0.04),
            transparent 25%
        ),
        #050805;
}


/* Background Grid */

.gw-rewards-bg-grid {
    position: absolute;
    inset: 0;

    opacity: 0.16;
    pointer-events: none;

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

    background-size: 65px 65px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}


/* Glows */

.gw-rewards-glow {
    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;
}

.gw-rewards-glow-1 {
    left: -250px;
    top: 25%;

    background: rgba(151,255,0,0.06);
}

.gw-rewards-glow-2 {
    right: -260px;
    bottom: 10%;

    background: rgba(151,255,0,0.05);
}


/* =========================
   HEADING
========================= */

.gw-rewards-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 0 65px;
}

.gw-rewards-heading .gw-section-mini-label {
    justify-content: flex-start;
}

.gw-rewards-heading h2 {
    margin: 0;

    color: #f2f6ef;

    font-size: clamp(40px, 5vw, 63px);
    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1.8px;
}

.gw-rewards-heading h2 strong {
    color: var(--gw-green);
    font-weight: 600;
}

.gw-rewards-heading p {
    max-width: 650px;

    margin: 21px 0 0;

    color: rgba(235,240,232,0.53);

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


/* =========================
   MAIN LAYOUT
========================= */

.gw-rewards-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.08fr 0.92fr;

    gap: 65px;

    align-items: center;

    max-width: 1180px;
}


/* =========================
   NETWORK
========================= */

.gw-reward-network {
    position: relative;

    min-height: 535px;

    border: 1px solid rgba(151,255,0,0.09);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at center,
            rgba(151,255,0,0.055),
            transparent 38%
        ),
        rgba(255,255,255,0.014);

    overflow: hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 30px 80px rgba(0,0,0,0.35);
}

.gw-reward-network::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(151,255,0,0.035) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            0deg,
            transparent 49.8%,
            rgba(151,255,0,0.035) 50%,
            transparent 50.2%
        );

    background-size: 90px 90px;

    opacity: 0.4;
}


/* Network Label */

.gw-network-label {
    position: absolute;

    top: 24px;
    left: 26px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(235,240,232,0.38);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.gw-network-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--gw-green);

    box-shadow:
        0 0 8px rgba(151,255,0,0.7);
}


/* Canvas */

.gw-network-canvas {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 390px;
    height: 390px;

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


/* Center Core */

.gw-network-core {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    width: 135px;
    height: 135px;

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

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    border: 1px solid rgba(151,255,0,0.35);

    background:
        radial-gradient(
            circle,
            rgba(151,255,0,0.12),
            #081007 68%
        );

    box-shadow:
        0 0 50px rgba(151,255,0,0.08),
        inset 0 0 30px rgba(151,255,0,0.04);
}

.gw-network-core-icon {
    color: var(--gw-green);

    font-size: 20px;

    margin-bottom: 7px;
}

.gw-network-core strong {
    color: #edf2e9;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
}

.gw-network-core span {
    margin-top: 4px;

    color: rgba(235,240,232,0.32);

    font-size: 7px;
    letter-spacing: 1.5px;
}


/* Pulse */

.gw-core-pulse {
    position: absolute;

    inset: -12px;

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

    border-radius: 50%;

    animation: gwRewardPulse 2.8s ease-out infinite;
}

@keyframes gwRewardPulse {

    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }

}


/* Network Nodes */

.gw-network-node {
    position: absolute;

    z-index: 4;

    width: 47px;
    height: 47px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(151,255,0,0.19);

    background: #0a0f09;

    color: var(--gw-green);

    font-size: 14px;

    box-shadow:
        0 0 22px rgba(151,255,0,0.05);
}

.gw-node-1 {
    top: 25px;
    left: 50%;

    transform: translateX(-50%);
}

.gw-node-2 {
    right: 22px;
    top: 50%;

    transform: translateY(-50%);
}

.gw-node-3 {
    bottom: 24px;
    left: 50%;

    transform: translateX(-50%);
}

.gw-node-4 {
    left: 21px;
    top: 50%;

    transform: translateY(-50%);
}


/* Network Lines */

.gw-network-line {
    position: absolute;

    z-index: 1;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(151,255,0,0.35),
            rgba(151,255,0,0.08)
        );
}

.gw-line-1 {
    width: 142px;

    left: 50%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);
}

.gw-line-2 {
    width: 142px;

    left: 50%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(0deg);
}

.gw-line-3 {
    width: 142px;

    left: 50%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);
}

.gw-line-4 {
    width: 142px;

    left: 50%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(180deg);
}

.gw-line-5 {
    width: 235px;

    left: 50%;
    top: 50%;

    opacity: 0.25;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* Floating Tags */

.gw-network-tag {
    position: absolute;

    z-index: 6;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border: 1px solid rgba(151,255,0,0.11);
    border-radius: 8px;

    background: rgba(6,10,6,0.8);

    color: rgba(235,240,232,0.5);

    font-size: 8px;

    backdrop-filter: blur(10px);
}

.gw-network-tag i {
    color: var(--gw-green);
}

.gw-tag-1 {
    top: 102px;
    left: 7px;
}

.gw-tag-2 {
    right: 0;
    top: 110px;
}

.gw-tag-3 {
    bottom: 88px;
    left: 24px;
}


/* Network Footer */

.gw-network-footer {
    position: absolute;

    bottom: 21px;
    left: 26px;
    right: 26px;

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

    padding-top: 16px;

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

    color: rgba(235,240,232,0.24);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.gw-network-bars {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 10px;
}

.gw-network-bars i {
    display: block;

    width: 3px;

    border-radius: 2px;

    background: var(--gw-green);

    opacity: 0.6;
}

.gw-network-bars i:nth-child(1) {
    height: 4px;
}

.gw-network-bars i:nth-child(2) {
    height: 7px;
}

.gw-network-bars i:nth-child(3) {
    height: 10px;
}

.gw-network-bars i:nth-child(4) {
    height: 7px;
}

.gw-network-bars i:nth-child(5) {
    height: 5px;
}


/* =========================
   REWARD CONTENT
========================= */

.gw-reward-content {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* Reward Card */

.gw-reward-card {
    display: flex;
    align-items: flex-start;

    gap: 17px;

    padding: 21px;

    border: 1px solid rgba(255,255,255,0.065);
    border-radius: 17px;

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

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

.gw-reward-card:hover {
    transform: translateX(4px);

    border-color: rgba(151,255,0,0.18);

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

.gw-reward-card-main {
    border-color: rgba(151,255,0,0.14);

    background:
        linear-gradient(
            110deg,
            rgba(151,255,0,0.045),
            rgba(255,255,255,0.012)
        );
}


/* Icon */

.gw-reward-card-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.15);
    border-radius: 11px;

    background: rgba(151,255,0,0.045);

    color: var(--gw-green);

    font-size: 16px;
}


/* Card Body */

.gw-reward-card-body {
    flex: 1;
}

.gw-reward-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 6px;
}

.gw-reward-card-top span {
    color: rgba(235,240,232,0.25);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.gw-reward-card-top i {
    color: rgba(151,255,0,0.45);
    font-size: 12px;
}

.gw-reward-card h3 {
    margin: 0 0 7px;

    color: #e9eee7;

    font-size: 15px;
    font-weight: 600;
}

.gw-reward-card p {
    margin: 0;

    color: rgba(235,240,232,0.4);

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


/* Mini CTA */

.gw-reward-mini-cta {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 8px;

    padding: 17px 18px;

    border: 1px solid rgba(151,255,0,0.11);
    border-radius: 14px;

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

.gw-reward-mini-icon {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 35px;

    border-radius: 9px;

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

    color: var(--gw-green);

    font-size: 14px;
}

.gw-reward-mini-cta strong {
    display: block;

    color: #e8ede5;

    font-size: 11px;
    font-weight: 600;

    margin-bottom: 3px;
}

.gw-reward-mini-cta span {
    color: rgba(235,240,232,0.32);

    font-size: 9px;
}

.gw-reward-mini-cta a {
    width: 31px;
    height: 31px;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.15);
    border-radius: 50%;

    color: var(--gw-green);

    text-decoration: none;

    transition: 0.25s ease;
}

.gw-reward-mini-cta a:hover {
    background: var(--gw-green);
    color: #071004;
}


/* =========================
   BOTTOM STRIP
========================= */

.gw-reward-strip {
    position: relative;
    z-index: 2;

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

    max-width: 1180px;

    margin-top: 60px;

    padding: 20px 0;

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

.gw-reward-strip-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

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

    color: rgba(235,240,232,0.38);

    font-size: 9px;
}

.gw-reward-strip-item:last-child {
    border-right: 0;
}

.gw-reward-strip-item i {
    color: var(--gw-green);
    font-size: 13px;
}


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

@media (max-width: 991px) {

    .gw-rewards-section {
        padding: 95px 0;
    }

    .gw-rewards-layout {
        grid-template-columns: 1fr;

        max-width: 700px;

        gap: 45px;
    }

    .gw-rewards-heading {
        max-width: 700px;
        margin-bottom: 50px;
    }

    .gw-reward-network {
        min-height: 500px;
    }

    .gw-reward-content {
        max-width: 600px;
        width: 100%;
        margin: auto;
    }

    .gw-reward-strip {
        max-width: 700px;
    }
}


@media (max-width: 767px) {

    .gw-rewards-section {
        padding: 80px 0;
    }

    .gw-rewards-heading h2 {
        font-size: 40px;
    }

    .gw-rewards-heading p {
        font-size: 13px;
    }

    .gw-reward-network {
        min-height: 430px;
        border-radius: 22px;
    }

    .gw-network-canvas {
        transform: translate(-50%, -50%) scale(0.86);
    }

    .gw-network-footer {
        left: 18px;
        right: 18px;
    }

    .gw-network-label {
        left: 18px;
        top: 18px;
    }

    .gw-reward-card {
        padding: 18px;
    }

    .gw-reward-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
    }

    .gw-reward-strip-item:nth-child(2) {
        border-right: 0;
    }

    .gw-reward-strip-item:nth-child(3),
    .gw-reward-strip-item:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 18px;
    }
}


@media (max-width: 480px) {

    .gw-rewards-section {
        padding: 70px 0;
    }

    .gw-rewards-heading h2 {
        font-size: 34px;
    }

    .gw-reward-network {
        min-height: 365px;
    }

    .gw-network-canvas {
        transform: translate(-50%, -50%) scale(0.70);
    }

    .gw-network-footer {
        bottom: 15px;
    }

    .gw-network-tag {
        display: none;
    }

    .gw-reward-card {
        gap: 12px;
    }

    .gw-reward-card-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 14px;
    }

    .gw-reward-card h3 {
        font-size: 14px;
    }

    .gw-reward-card p {
        font-size: 10px;
    }

    .gw-reward-strip {
        grid-template-columns: 1fr;
    }

    .gw-reward-strip-item,
    .gw-reward-strip-item:nth-child(3),
    .gw-reward-strip-item:nth-child(4) {
        justify-content: flex-start;

        border-right: 0;
        border-top: 0;

        padding: 4px 18px;
    }

    .gw-reward-strip-item + .gw-reward-strip-item {
        padding-top: 10px;
    }
}


/* =========================
   WHY GIO WORLDS
========================= */

.gw-why-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(151,255,0,0.055),
            transparent 27%
        ),
        #050805;
}


/* Background Grid */

.gw-why-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

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

    background-size: 70px 70px;

    opacity: 0.25;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}


/* Glow */

.gw-why-glow {
    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.gw-why-glow-1 {
    top: 15%;
    left: -300px;

    background: rgba(151,255,0,0.055);
}

.gw-why-glow-2 {
    right: -300px;
    bottom: 10%;

    background: rgba(151,255,0,0.05);
}


/* =========================
   HEADING
========================= */

.gw-why-heading {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 0 auto 80px;
}

.gw-why-heading h2 {
    margin: 0;

    color: #f2f6ef;

    font-size: clamp(40px, 5vw, 63px);
    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1.8px;
}

.gw-why-heading h2 strong {
    color: var(--gw-green);
    font-weight: 600;
}

.gw-why-heading p {
    max-width: 650px;

    margin: 21px auto 0;

    color: rgba(235,240,232,0.52);

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


/* =========================
   ECOSYSTEM
========================= */

.gw-why-ecosystem {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 350px 1fr;

    gap: 45px;

    align-items: center;

    max-width: 1200px;

    margin: auto;
}


/* =========================
   SIDE ITEMS
========================= */

.gw-why-side {
    display: flex;
    flex-direction: column;

    gap: 65px;
}

.gw-why-left {
    text-align: right;
}

.gw-why-right {
    text-align: left;
}


.gw-why-item {
    position: relative;

    display: grid;

    grid-template-columns: auto auto 1fr;

    align-items: center;

    gap: 14px;
}

.gw-why-left .gw-why-item {
    grid-template-columns: 1fr auto auto;
}

.gw-why-left .gw-why-item-number {
    order: 1;
}

.gw-why-left .gw-why-item-icon {
    order: 2;
}

.gw-why-left .gw-why-item-content {
    order: 3;
}

.gw-why-right .gw-why-item-number {
    order: 1;
}

.gw-why-right .gw-why-item-icon {
    order: 2;
}

.gw-why-right .gw-why-item-content {
    order: 3;
}


/* Number */

.gw-why-item-number {
    color: rgba(151,255,0,0.25);

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

    letter-spacing: 1.5px;
}


/* Icon */

.gw-why-item-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.14);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(151,255,0,0.075),
            rgba(255,255,255,0.012)
        );

    color: var(--gw-green);

    font-size: 17px;

    transition: 0.3s ease;
}

.gw-why-item:hover .gw-why-item-icon {
    border-color: rgba(151,255,0,0.4);

    background: rgba(151,255,0,0.08);

    box-shadow:
        0 0 25px rgba(151,255,0,0.07);
}


/* Content */

.gw-why-item-content h3 {
    margin: 0 0 6px;

    color: #e9eee7;

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

.gw-why-item-content p {
    max-width: 220px;

    margin: 0;

    color: rgba(235,240,232,0.4);

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

.gw-why-left .gw-why-item-content p {
    margin-left: auto;
}


/* =========================
   CENTRAL CORE
========================= */

.gw-why-core {
    position: relative;

    width: 350px;
    height: 350px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;
}


/* Orbits */

.gw-why-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(151,255,0,0.09);
}

.gw-orbit-outer {
    width: 340px;
    height: 340px;

    border-right-color: rgba(151,255,0,0.35);

    animation:
        gwWhyOrbit 18s linear infinite;
}

.gw-orbit-middle {
    width: 270px;
    height: 270px;

    border-left-color: rgba(151,255,0,0.3);

    animation:
        gwWhyOrbitReverse 13s linear infinite;
}

.gw-orbit-inner {
    width: 200px;
    height: 200px;

    border-top-color: rgba(151,255,0,0.27);

    animation:
        gwWhyOrbit 9s linear infinite;
}


/* Core Pulse */

.gw-why-core-pulse {
    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(151,255,0,0.045);

    filter: blur(10px);

    animation: gwWhyPulse 3s ease-in-out infinite;
}


/* Center */

.gw-why-core-center {
    position: relative;
    z-index: 5;

    width: 130px;
    height: 130px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    border: 1px solid rgba(151,255,0,0.3);

    background:
        radial-gradient(
            circle,
            rgba(151,255,0,0.12),
            #080d07 68%
        );

    box-shadow:
        0 0 45px rgba(151,255,0,0.08),
        inset 0 0 25px rgba(151,255,0,0.04);
}

.gw-core-symbol {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    border: 1px solid rgba(151,255,0,0.25);
    border-radius: 10px;

    color: var(--gw-green);

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

.gw-why-core-center strong {
    color: #eef3ea;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;
}

.gw-why-core-center > span {
    margin-top: 3px;

    color: rgba(235,240,232,0.35);

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

    letter-spacing: 2.5px;
}


/* Floating Icons */

.gw-core-floating {
    position: absolute;

    z-index: 6;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.17);
    border-radius: 50%;

    background: #080d07;

    color: var(--gw-green);

    font-size: 11px;

    box-shadow:
        0 0 20px rgba(151,255,0,0.06);
}

.gw-core-float-1 {
    top: 38px;
    left: 78px;
}

.gw-core-float-2 {
    top: 76px;
    right: 38px;
}

.gw-core-float-3 {
    bottom: 43px;
    right: 80px;
}

.gw-core-float-4 {
    bottom: 76px;
    left: 37px;
}


/* Orbit Animations */

@keyframes gwWhyOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes gwWhyOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes gwWhyPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.8;
    }

}


/* =========================
   BOTTOM STATEMENT
========================= */

.gw-why-bottom {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 35px;

    align-items: center;

    max-width: 900px;

    margin: 85px auto 0;

    text-align: center;
}

.gw-why-bottom-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(151,255,0,0.18)
        );
}

.gw-why-bottom-line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(151,255,0,0.18),
            transparent
        );
}

.gw-why-bottom-label {
    display: block;

    color: rgba(151,255,0,0.48);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.gw-why-bottom-content h3 {
    margin: 0;

    color: #edf2e9;

    font-size: 22px;
    font-weight: 600;

    letter-spacing: -0.4px;
}

.gw-why-bottom-content h3 span {
    color: var(--gw-green);
}

.gw-why-bottom-content p {
    max-width: 430px;

    margin: 10px auto 0;

    color: rgba(235,240,232,0.35);

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


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

@media (max-width: 1100px) {

    .gw-why-ecosystem {
        grid-template-columns: 1fr 300px 1fr;
        gap: 25px;
    }

    .gw-why-core {
        width: 300px;
        height: 300px;
    }

    .gw-orbit-outer {
        width: 290px;
        height: 290px;
    }

    .gw-orbit-middle {
        width: 230px;
        height: 230px;
    }

    .gw-orbit-inner {
        width: 175px;
        height: 175px;
    }

    .gw-core-float-1 {
        left: 58px;
    }

    .gw-core-float-2 {
        right: 28px;
    }

    .gw-core-float-3 {
        right: 59px;
    }

    .gw-core-float-4 {
        left: 27px;
    }
}


@media (max-width: 991px) {

    .gw-why-section {
        padding: 95px 0;
    }

    .gw-why-heading {
        margin-bottom: 55px;
    }

    .gw-why-ecosystem {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 650px;
    }

    .gw-why-core {
        grid-row: 1;

        width: 330px;
        height: 330px;

        margin: 0 auto;
    }

    .gw-why-side {
        gap: 20px;
    }

    .gw-why-left,
    .gw-why-right {
        text-align: left;
    }

    .gw-why-left {
        order: 2;
    }

    .gw-why-right {
        order: 3;
    }

    .gw-why-item,
    .gw-why-left .gw-why-item {
        grid-template-columns: auto auto 1fr;
        text-align: left;
    }

    .gw-why-left .gw-why-item-number,
    .gw-why-left .gw-why-item-icon,
    .gw-why-left .gw-why-item-content {
        order: initial;
    }

    .gw-why-item-content p,
    .gw-why-left .gw-why-item-content p {
        margin-left: 0;
    }

    .gw-why-bottom {
        max-width: 650px;
    }
}


@media (max-width: 767px) {

    .gw-why-section {
        padding: 80px 0;
    }

    .gw-why-heading h2 {
        font-size: 40px;
    }

    .gw-why-heading p {
        font-size: 13px;
    }

    .gw-why-core {
        width: 285px;
        height: 285px;
    }

    .gw-orbit-outer {
        width: 280px;
        height: 280px;
    }

    .gw-orbit-middle {
        width: 220px;
        height: 220px;
    }

    .gw-orbit-inner {
        width: 165px;
        height: 165px;
    }

    .gw-core-float-1 {
        left: 45px;
    }

    .gw-core-float-2 {
        right: 23px;
    }

    .gw-core-float-3 {
        right: 46px;
    }

    .gw-core-float-4 {
        left: 23px;
    }

    .gw-why-item {
        padding: 16px;

        border: 1px solid rgba(255,255,255,0.045);
        border-radius: 15px;

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

    .gw-why-item-content h3 {
        font-size: 13px;
    }

    .gw-why-item-content p {
        font-size: 10px;
    }

    .gw-why-bottom {
        display: block;

        margin-top: 55px;
    }

    .gw-why-bottom-line {
        display: none;
    }

    .gw-why-bottom-content {
        padding-top: 25px;

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


@media (max-width: 480px) {

    .gw-why-section {
        padding: 70px 0;
    }

    .gw-why-heading h2 {
        font-size: 34px;
    }

    .gw-why-core {
        width: 240px;
        height: 240px;
    }

    .gw-orbit-outer {
        width: 235px;
        height: 235px;
    }

    .gw-orbit-middle {
        width: 185px;
        height: 185px;
    }

    .gw-orbit-inner {
        width: 140px;
        height: 140px;
    }

    .gw-why-core-center {
        width: 112px;
        height: 112px;
    }

    .gw-core-symbol {
        width: 31px;
        height: 31px;

        font-size: 16px;
    }

    .gw-why-core-center strong {
        font-size: 12px;
    }

    .gw-core-floating {
        width: 28px;
        height: 28px;

        font-size: 9px;
    }

    .gw-core-float-1 {
        left: 36px;
        top: 26px;
    }

    .gw-core-float-2 {
        right: 18px;
        top: 55px;
    }

    .gw-core-float-3 {
        right: 37px;
        bottom: 28px;
    }

    .gw-core-float-4 {
        left: 17px;
        bottom: 52px;
    }

    .gw-why-item {
        grid-template-columns: auto auto 1fr;
        gap: 10px;
        padding: 13px;
    }

    .gw-why-item-icon {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .gw-why-item-number {
        font-size: 8px;
    }

    .gw-why-item-content h3 {
        font-size: 12px;
    }

    .gw-why-item-content p {
        font-size: 9px;
    }

    .gw-why-bottom-content h3 {
        font-size: 19px;
    }
}

.gw-why-core.gw-core-active
.gw-why-core-center {
    border-color: rgba(151,255,0,0.5);

    box-shadow:
        0 0 60px rgba(151,255,0,0.12),
        inset 0 0 30px rgba(151,255,0,0.06);
}


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

.gw-footer {
    position: relative;

    overflow: hidden;

    padding: 85px 0 25px;

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(151,255,0,0.045),
            transparent 27%
        ),
        #030503;
}


/* Background Grid */

.gw-footer-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

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

    background-size: 65px 65px;

    opacity: 0.4;

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


/* Glow */

.gw-footer-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    top: -280px;
    right: 10%;

    border-radius: 50%;

    background: rgba(151,255,0,0.055);

    filter: blur(120px);

    pointer-events: none;
}


/* =========================
   MAIN
========================= */

.gw-footer-main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.5fr
        0.75fr
        0.75fr
        1.1fr;

    gap: 55px;

    padding-bottom: 65px;
}


/* =========================
   BRAND
========================= */

.gw-footer-brand {
    max-width: 330px;
}

.gw-footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: #edf2e9 !important;

    text-decoration: none;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.gw-footer-logo-mark {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.38);
    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            rgba(151,255,0,0.1),
            rgba(151,255,0,0.025)
        );

    color: var(--gw-green);

    font-size: 19px;

    box-shadow:
        0 0 25px rgba(151,255,0,0.045);
}

.gw-footer-logo small {
    display: block;

    margin-top: -2px;

    color: rgba(235,240,232,0.35);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 3px;
}

.gw-footer-brand p {
    margin: 20px 0 22px;

    color: rgba(235,240,232,0.4);

    font-size: 11px;

    line-height: 1.8;
}


/* Status */

.gw-footer-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 11px;

    border: 1px solid rgba(151,255,0,0.11);
    border-radius: 100px;

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

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.gw-footer-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--gw-green);

    box-shadow:
        0 0 9px rgba(151,255,0,0.8);
}


/* =========================
   COLUMNS
========================= */

.gw-footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.gw-footer-column h4 {
    margin: 5px 0 20px;

    color: #e9eee7;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.gw-footer-column a {
    margin-bottom: 12px;

    color: rgba(235,240,232,0.38);

    text-decoration: none;

    font-size: 10px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.gw-footer-column a:hover {
    color: var(--gw-green);

    transform: translateX(3px);
}


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

.gw-footer-contact p {
    max-width: 230px;

    margin: 0 0 18px;

    color: rgba(235,240,232,0.38);

    font-size: 10px;

    line-height: 1.75;
}

.gw-footer-contact-btn {
    display: inline-flex !important;

    align-items: center;

    gap: 9px;

    margin: 0 !important;

    padding: 10px 15px;

    border: 1px solid rgba(151,255,0,0.25);

    border-radius: 9px;

    background: rgba(151,255,0,0.045);

    color: var(--gw-green) !important;

    font-size: 9px !important;

    font-weight: 700;

    letter-spacing: 0.4px;
}

.gw-footer-contact-btn:hover {
    background: rgba(151,255,0,0.09);

    transform: translateY(-2px) !important;
}

.gw-footer-contact-btn i {
    font-size: 11px;
}


/* =========================
   DIVIDER
========================= */

.gw-footer-divider {
    position: relative;
    z-index: 2;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(151,255,0,0.15) 25%,
            rgba(255,255,255,0.06) 50%,
            rgba(151,255,0,0.15) 75%,
            transparent
        );
}


/* =========================
   DISCLAIMER
========================= */

.gw-footer-disclaimer {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 1000px;

    margin: 25px auto;

    padding: 14px 17px;

    border: 1px solid rgba(255,255,255,0.045);
    border-radius: 11px;

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

.gw-footer-disclaimer-icon {
    flex: 0 0 auto;

    color: rgba(151,255,0,0.45);

    font-size: 13px;
}

.gw-footer-disclaimer p {
    margin: 0;

    color: rgba(235,240,232,0.27);

    font-size: 8px;

    line-height: 1.7;
}


/* =========================
   BOTTOM
========================= */

.gw-footer-bottom {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 25px;

    padding-top: 19px;
}

.gw-footer-copy {
    color: rgba(235,240,232,0.25);

    font-size: 8px;

    letter-spacing: 0.2px;
}

.gw-footer-legal {
    display: flex;

    align-items: center;

    gap: 22px;
}

.gw-footer-legal a {
    color: rgba(235,240,232,0.27);

    text-decoration: none;

    font-size: 8px;

    transition: color 0.2s ease;
}

.gw-footer-legal a:hover {
    color: var(--gw-green);
}


/* Back To Top */

.gw-footer-top a {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(151,255,0,0.15);
    border-radius: 8px;

    color: var(--gw-green);

    text-decoration: none;

    transition: all 0.25s ease;
}

.gw-footer-top a:hover {
    background: var(--gw-green);

    color: #071004;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .gw-footer {
        padding-top: 70px;
    }

    .gw-footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;

        gap: 40px;
    }

    .gw-footer-contact {
        grid-column: 1 / -1;

        padding-top: 10px;

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

    .gw-footer-contact p {
        max-width: 400px;
    }
}


@media (max-width: 767px) {

    .gw-footer {
        padding: 65px 0 22px;
    }

    .gw-footer-main {
        grid-template-columns: 1fr 1fr;

        gap: 40px 25px;

        padding-bottom: 45px;
    }

    .gw-footer-brand {
        grid-column: 1 / -1;

        max-width: 420px;
    }

    .gw-footer-contact {
        grid-column: 1 / -1;
    }

    .gw-footer-disclaimer {
        margin: 20px 0;
    }

    .gw-footer-bottom {
        grid-template-columns: 1fr auto;

        gap: 15px;
    }

    .gw-footer-legal {
        grid-column: 1 / -1;

        order: 3;

        flex-wrap: wrap;

        gap: 10px 18px;
    }

    .gw-footer-top {
        justify-self: end;
    }
}


@media (max-width: 480px) {

    .gw-footer-main {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .gw-footer-brand {
        grid-column: auto;
    }

    .gw-footer-column {
        padding-top: 4px;
    }

    .gw-footer-column h4 {
        margin-bottom: 14px;
    }

    .gw-footer-column a {
        margin-bottom: 9px;
    }

    .gw-footer-disclaimer {
        padding: 12px;

        gap: 9px;
    }

    .gw-footer-disclaimer p {
        font-size: 7px;
    }

    .gw-footer-bottom {
        grid-template-columns: 1fr auto;
    }

    .gw-footer-copy {
        line-height: 1.6;
    }

    .gw-footer-legal {
        gap: 8px 14px;
    }
}


/* =========================================
   REGISTRATION SUCCESS POPUP
========================================= */


/* =========================
   POPUP OVERLAY
========================= */

.popup-overlay{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:
        rgba(5,7,13,.80);

    backdrop-filter:blur(8px);

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

    z-index:9999;

    animation:
        overlayFade .35s ease;

}


/* =========================
   POPUP
========================= */

.popup{

    width:430px;

    max-width:100%;

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,
            rgba(9,12,19,.98),
            rgba(5,7,13,.98)
        );

    border:1px solid
        rgba(214,168,79,.45);

    border-radius:26px;

    box-shadow:

        0 30px 90px
        rgba(0,0,0,.65),

        0 0 45px
        rgba(214,168,79,.10);

    animation:
        popupFade .45s
        cubic-bezier(.17,.67,.35,1.25);

}


/* =========================
   DECORATIVE GLOW
========================= */

.popup::before{

    content:'';

    position:absolute;

    width:260px;
    height:260px;

    top:-150px;
    right:-100px;

    border-radius:50%;

    background:
        rgba(214,168,79,.09);

    filter:blur(80px);

    pointer-events:none;

}

.popup::after{

    content:'';

    position:absolute;

    width:220px;
    height:220px;

    bottom:-140px;
    left:-100px;

    border-radius:50%;

    background:
        rgba(214,168,79,.045);

    filter:blur(80px);

    pointer-events:none;

}


/* =========================
   POPUP HEADER
========================= */

.popup-header{

    position:relative;

    padding:25px 25px 22px;

    text-align:center;

    background:

        linear-gradient(
            180deg,
            rgba(214,168,79,.09),
            rgba(214,168,79,.02)
        );

    border-bottom:
        1px solid
        rgba(214,168,79,.15);

}


/* =========================
   TOP GOLD LINE
========================= */

.popup-header::before{

    content:'';

    position:absolute;

    top:0;
    left:50%;

    width:90px;
    height:2px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            #D6A84F,
            #F0CB75,
            #D6A84F,
            transparent
        );

    box-shadow:

        0 0 12px
        rgba(214,168,79,.6);

}


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

.company-logo{

    display:block;

    width:105px;

    height:auto;

    max-height:85px;

    object-fit:contain;

    margin:0 auto;

    filter:

        drop-shadow(
            0 5px 15px
            rgba(214,168,79,.20)
        );

}


/* =========================
   CLOSE BUTTON
========================= */

.close-btn{

    position:absolute;

    top:15px;
    right:15px;

    width:34px;
    height:34px;

    display:flex;

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

    padding:0;

    border:1px solid
        rgba(214,168,79,.25);

    border-radius:50%;

    background:
        rgba(5,7,13,.75);

    color:#aaa;

    font-size:16px;

    cursor:pointer;

    transition:

        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.close-btn:hover{

    color:#05070D;

    background:
        linear-gradient(
            135deg,
            #D6A84F,
            #F0CB75
        );

    border-color:#D6A84F;

    transform:
        rotate(90deg);

}


/* =========================
   POPUP CONTENT
========================= */

.popup-content{

    padding:30px 30px 32px;

    text-align:center;

    position:relative;

    z-index:2;

}


/* =========================
   SUCCESS ICON
========================= */

.popup-content::before{

    content:'✓';

    width:62px;
    height:62px;

    display:flex;

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

    margin:0 auto 18px;

    border-radius:50%;

    border:1px solid
        rgba(214,168,79,.35);

    background:
        rgba(214,168,79,.07);

    color:var(--gold-light);

    font-size:30px;

    font-weight:700;

    box-shadow:

        0 0 25px
        rgba(214,168,79,.12);

}


/* =========================
   CONGRATULATIONS
========================= */

.congratulations{

    margin:0 0 12px;

    font-size:28px;

    font-weight:700;

    line-height:1.2;

    background:

        linear-gradient(
            135deg,
            #D6A84F,
            #F0CB75,
            #D6A84F
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


/* =========================
   MESSAGE
========================= */

.message{

    margin:0 auto;

    max-width:340px;

    color:#9DA4B3;

    font-size:14px;

    line-height:1.75;

}


/* =========================
   OPTIONAL USER DETAILS
========================= */

.popup-content .user-info{

    margin-top:20px;

    padding:13px 16px;

    border-radius:13px;

    border:1px solid
        rgba(214,168,79,.15);

    background:
        rgba(255,255,255,.025);

    color:#aaa;

    font-size:13px;

}


/* =========================
   LOGIN BUTTON
========================= */

.login-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-width:190px;

    min-height:52px;

    margin-top:24px;

    padding:14px 25px;

    border:none;

    outline:none;

    border-radius:60px;

    background:

        linear-gradient(
            135deg,
            #D6A84F,
            #F0CB75
        );

    color:#05070D;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    text-decoration:none;

    box-shadow:

        0 8px 25px
        rgba(214,168,79,.14);

    transition:

        transform .3s ease,
        box-shadow .3s ease;

}

.login-btn:hover{

    color:#05070D;

    transform:
        translateY(-3px);

    box-shadow:

        0 12px 35px
        rgba(214,168,79,.30);

}

.login-btn:active{

    transform:
        translateY(0);

}


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

.popup-footer{

    margin-top:22px;

    color:#606875;

    font-size:11px;

    letter-spacing:.7px;

}


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

@keyframes overlayFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes popupFade{

    from{

        opacity:0;

        transform:
            scale(.82)
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}


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

@media(max-width:576px){

    .popup-overlay{

        padding:15px;

    }

    .popup{

        width:100%;

        border-radius:22px;

    }

    .popup-header{

        padding:22px 20px 20px;

    }

    .company-logo{

        width:90px;

        max-height:75px;

    }

    .close-btn{

        width:32px;
        height:32px;

        top:12px;
        right:12px;

        font-size:14px;

    }

    .popup-content{

        padding:25px 20px 28px;

    }

    .popup-content::before{

        width:55px;
        height:55px;

        font-size:26px;

        margin-bottom:16px;

    }

    .congratulations{

        font-size:24px;

    }

    .message{

        font-size:13px;

        line-height:1.7;

    }

    .login-btn{

        width:100%;

        min-height:52px;

    }

}


/* =========================
   PHONE INPUT
========================= */

.phone-input-group{

    width:100%;

    height:58px;

    display:flex;

    align-items:center;

    margin-bottom:14px;

    background:
        rgba(255,255,255,.025);

    border:1px solid
        rgba(214,168,79,.16);

    border-radius:16px;

}


/* Mobile icon */

.phone-input-group > i{

    flex:0 0 55px;

    width:55px;

    text-align:center;

    color:#D6A84F;

    font-size:17px;

}


/* Phone library container */

.phone-input-group .iti{

    flex:1;

    width:100%;

    height:100%;

}


/* Input */

.phone-input-group .iti input{

    width:100%;

    height:100%;

    border:none;

    outline:none;

    background:transparent !important;

    color:#f1f1f1 !important;

    font-size:15px;

    padding-right:15px;

}


/* Placeholder */

.phone-input-group .iti input::placeholder{

    color:#727986;

}


/* Country selector */

.phone-input-group .iti__selected-country{

    background:transparent !important;

}


/* Country dropdown */

.phone-input-group .iti__dropdown{

    background:#090C13 !important;

    border:1px solid
        rgba(214,168,79,.30);

    border-radius:12px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.5);

    color:#ddd;

    z-index:99999;

}


/* Dropdown country */

.phone-input-group .iti__country{

    color:#ddd;

}

.phone-input-group .iti__country:hover{

    background:
        rgba(214,168,79,.10);

}


/* Dial code */

.phone-input-group .iti__dial-code{

    color:#aaa;

}


/* Focus */

.phone-input-group:focus-within{

    border-color:
        rgba(214,168,79,.60);

    background:
        rgba(255,255,255,.035);

    box-shadow:
        0 0 0 3px
        rgba(214,168,79,.05);

}


/* Mobile */

@media(max-width:576px){

    .phone-input-group{

        height:56px;

        border-radius:15px;

    }

    .phone-input-group > i{

        flex:0 0 50px;

        width:50px;

        font-size:16px;

    }

    .phone-input-group .iti input{

        font-size:14px;

    }

}