/*==============================
 GOOGLE FONTS
==============================*/

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

:root{

    --bg:#090C16;
    --bg2:#0F1528;

    --card:#131A2F;
    --card-hover:#182447;

    --primary:#67E8FF;
    --secondary:#8A6BFF;
    --accent:#FF82D1;

    --white:#F7F9FF;

    --text:#EAF2FF;
    --text2:#B9C7E4;

    --border:rgba(103,232,255,.18);

    --transition:.45s;

}

html{

    scroll-behavior:smooth;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.custom-container{

    width:1320px;
    max-width:92%;
    margin:auto;

}

/*==================================

BACKGROUND

===================================*/

.site-wrapper{
    position:relative;
    min-height:100vh;
    overflow:hidden;

    background:transparent;

    z-index:2;
}

.site-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 10%,
    rgba(103,232,255,.12),
    transparent 30%),

    radial-gradient(circle at 85% 18%,
    rgba(138,107,255,.12),
    transparent 28%),

    radial-gradient(circle at 50% 100%,
    rgba(255,130,209,.08),
    transparent 40%);

    z-index:-5;

}

/*==================================

NAVBAR

===================================*/

.header{

    position:fixed;

    width:100%;

    top:20px;

    left:0;

    z-index:999;

}

.navbar-custom{

    height:86px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 45px;

    border-radius:20px;

    backdrop-filter:blur(18px);

    background:rgba(19,26,47,.72);

    border-top:none;
    border-bottom:none;

    border-left:4px solid rgba(103,232,255,.45);

    border-right:4px solid rgba(138,107,255,.45);

    box-shadow:
    0 12px 45px rgba(0,0,0,.35),
    0 0 25px rgba(103,232,255,.08);

    transition:var(--transition);

}

.navbar-custom:hover{

    background:rgba(22,31,56,.82);

    border-left-color:rgba(103,232,255,.8);

    border-right-color:rgba(255,130,209,.7);

    box-shadow:
    0 18px 60px rgba(103,232,255,.15),
    0 0 25px rgba(138,107,255,.12);

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:54px;

    filter:
    drop-shadow(0 0 12px rgba(103,232,255,.30));

    transition:.45s;

}

.logo:hover img{

    transform:rotate(-5deg) scale(1.05);

    filter:
    drop-shadow(0 0 18px rgba(103,232,255,.45));

}

.logo span{

    font-size:22px;

    font-weight:700;

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

    background:linear-gradient(
    90deg,
    #67E8FF 0%,
    #8A6BFF 55%,
    #FF82D1 100%);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    letter-spacing:.5px;

}

.menu{

    display:flex;

    gap:45px;

}

.menu li a{

    color:var(--text);

    font-size:16px;

    font-weight:500;

    transition:.35s;

    position:relative;

}

.menu li a:hover{

    color:var(--primary);

}

.menu li a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:linear-gradient(
    90deg,
    #67E8FF,
    #8A6BFF,
    #FF82D1);

    left:0;

    bottom:-10px;

    border-radius:50px;

    transition:.35s;

}

.menu li a:hover::after{

    width:100%;

}

/*==================================

NAV BUTTON

===================================*/

.nav-btn{

    width:170px;

    height:52px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.12),
    rgba(138,107,255,.10));

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

    backdrop-filter:blur(10px);

    position:relative;

    overflow:hidden;

    transition:.45s;

}

.nav-btn::before{

    content:"";

    position:absolute;

    width:80px;

    height:180%;

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

    transform:rotate(35deg);

    left:-120px;

    transition:1s;

}

.nav-btn:hover::before{

    left:230px;

}

.nav-btn:hover{

    color:#fff;

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.22),
    rgba(138,107,255,.20),
    rgba(255,130,209,.18));

    border-color:rgba(103,232,255,.45);

    transform:translateY(-3px);

    box-shadow:
    0 12px 35px rgba(103,232,255,.18),
    0 0 18px rgba(138,107,255,.15);

}

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

.navbar-custom{

    transition:.45s ease;

}

.navbar-custom:hover{

    border-left-color:rgba(103,232,255,.80);

    border-right-color:rgba(255,130,209,.75);

    background:rgba(23,31,56,.85);

    box-shadow:
    0 18px 60px rgba(103,232,255,.18),
    0 0 30px rgba(138,107,255,.15);

}

/*==================================

HERO

===================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:120px;

}

/* Top Right Glow */

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-180px;

    top:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.18),

    rgba(138,107,255,.12),

    transparent 72%);

    filter:blur(80px);

    z-index:0;

}

/* Bottom Left Glow */

.hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-180px;

    bottom:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,130,209,.12),

    rgba(138,107,255,.08),

    transparent 72%);

    filter:blur(90px);

    z-index:0;

}

.hero .row{

    align-items:center;

    position:relative;

    z-index:5;

}

.hero-content{

    position:relative;

    z-index:10;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:11px 24px;

    border-radius:100px;

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

    color:#67E8FF;

    font-size:13px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:32px;

    backdrop-filter:blur(12px);

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.08),
    rgba(138,107,255,.08));

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

}

.hero h1{

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

    font-size:72px;

    line-height:1.08;

    margin-bottom:28px;

    font-weight:700;

    background:linear-gradient(
    180deg,
    #FFFFFF 0%,
    #DCEBFF 45%,
    #B7C9F8 100%);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
    0 0 30px rgba(103,232,255,.08);

}

.hero h1 span{

    background:linear-gradient(
    90deg,
    #67E8FF 0%,
    #8A6BFF 55%,
    #FF82D1 100%);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.hero p{

    color:var(--text2);

    line-height:1.95;

    font-size:18px;

    max-width:620px;

    font-weight:400;

    opacity:.92;

}

/*==================================

BUTTONS

===================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.primary-btn{
    width:210px;
    height:62px;

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

    position:relative;
    isolation:isolate;

    border-radius:18px;

    color:#fff;
    font-size:17px;
    font-weight:600;
    letter-spacing:.4px;

    background:#070B18;

    border:none;

    overflow:hidden;

    transition:.45s;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 20px rgba(103,232,255,.08);
}

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

    position:absolute;

    width:160%;
    height:400%;

    background:conic-gradient(
        transparent 0deg,
        transparent 250deg,
        #67E8FF 285deg,
        #8A6BFF 315deg,
        #FF82D1 345deg,
        transparent 360deg
    );

    animation:premiumBorder 3s linear infinite;

    z-index:-2;
}

.primary-btn:hover{

    transform:translateY(-5px) scale(1.02);

    letter-spacing:.8px;

    color:#fff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.50),
        0 0 20px rgba(103,232,255,.20),
        0 0 35px rgba(138,107,255,.12),
        0 0 45px rgba(255,130,209,.08);
}

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

    position:absolute;

    inset:2px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        #0B1020,
        #11172B
    );

    z-index:-1;
}



@keyframes premiumBorder{

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

    100%{
        transform:rotate(360deg);
    }

}

.secondary-btn{

    width:210px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    color:#fff;

    font-size:17px;

    font-weight:600;

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

    background:rgba(19,26,47,.45);

    backdrop-filter:blur(12px);

    transition:.45s;

}

.secondary-btn:hover{

    transform:translateY(-5px);

    border-color:rgba(103,232,255,.45);

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.10),
    rgba(138,107,255,.12));

    box-shadow:
    0 15px 35px rgba(103,232,255,.15);

}

/*==================================

RIGHT IMAGE

===================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(103,232,255,.18),
    rgba(138,107,255,.12),
    transparent 72%);

    filter:blur(65px);

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

    z-index:0;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,130,209,.12),
    transparent 70%);

    filter:blur(60px);

    bottom:0;

    right:20px;

    z-index:0;

}

.hero-image img{

    width:min(100%,530px);

    position:relative;

    z-index:5;

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

    filter:
    drop-shadow(0 0 20px rgba(103,232,255,.30))
    drop-shadow(0 0 45px rgba(138,107,255,.22))
    drop-shadow(0 0 70px rgba(255,130,209,.12));

}

/*==================================

BACKGROUND WAVE

===================================*/

.hero-bg{

    position:absolute;

    top:0;

    left:0;

    width:400px;

    opacity:.28;

    pointer-events:none;

    z-index:1;

    filter:
    drop-shadow(0 0 25px rgba(103,232,255,.18));

}

/*==================================

FLOATING OBJECTS

===================================*/

.floating{

    position:absolute;

    z-index:2;

    pointer-events:none;

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

    filter:
    drop-shadow(0 0 18px rgba(103,232,255,.18));

}

.coin{

    width:50px;

    left:5%;

    top:180px;

}

.cube{

    width:120px;

    left:43%;

    top:150px;

    animation-delay:1s;

}

.shape{

    width:140px;

    right:100px;

    top:180px;

    opacity:.82;

    animation-delay:2s;

}

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

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes heroGlow{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}

@keyframes floatingAnimation{

    0%,100%{

        transform:translateY(0px) rotate(0deg);

    }

    50%{

        transform:translateY(-15px) rotate(5deg);

    }

}

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

@media(max-width:1200px){

.hero h1{

font-size:60px;

line-height:1.12;

}

.hero-image img{

width:750px;

}

.hero-image::before{

width:430px;

height:430px;

}

.menu{

gap:32px;

}

.menu li a{

font-size:15px;

}

.navbar-custom{

padding:0 35px;

}

}


/*=========================================

991

=========================================*/

@media(max-width:991px){

.menu{

display:none;

}

.nav-btn{

display:none;

}

.navbar-custom{

min-height:86px;

padding:18px 35px;

border-left:3px solid rgba(103,232,255,.45);

border-right:3px solid rgba(138,107,255,.45);

}

.hero{

padding-top:180px;

text-align:center;

}

.hero-content{

margin-bottom:70px;

}

.hero h1{

font-size:52px;

line-height:1.18;

}

.hero p{

margin:auto;

max-width:620px;

}

.hero-buttons{

justify-content:center;

}

.hero-image img{

width:360px;

}

.hero-image::before{

width:360px;

height:360px;

}

.hero-image::after{

width:220px;

height:220px;

}

.coin,

.shape,

.cube{

display:none;

}

}


/*=========================================

768

=========================================*/

@media(max-width:768px){

.hero{

padding-top:165px;

}

.hero h1{

font-size:42px;

line-height:1.22;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:18px;

}

.primary-btn,

.secondary-btn{

width:100%;

max-width:320px;

}

.hero-image{

margin-top:30px;

}

.hero-image img{

width:290px;

}

.hero-image::before{

width:290px;

height:290px;

}

.hero-image::after{

width:180px;

height:180px;

}

.hero-bg{

bottom:-50px;

opacity:.22;

}

}


/*=========================================

480

=========================================*/

@media(max-width:480px){

.logo span{

font-size:18px;

}

.logo img{

width:42px;

}

.navbar-custom{

padding:16px 22px;

border-radius:16px;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:34px;

line-height:1.25;

}

.hero p{

font-size:16px;

line-height:1.85;

padding:0 8px;

}

.hero-badge{

font-size:11px;

padding:9px 18px;

letter-spacing:1.5px;

}

.primary-btn,

.secondary-btn{

height:58px;

font-size:16px;

max-width:280px;

}

.hero-image img{

width:240px;

}

.hero-image::before{

width:240px;

height:240px;

}

.hero-image::after{

width:140px;

height:140px;

}

}

.hero{

    padding-top:160px;

}

.hero-badge{

    font-size:12px;

}


/*=========================================
 PREMIUM DARK BACKGROUND
=========================================*/

body{

    background-color:#01030A;

    background-image:

        /* Very subtle center blue depth */
        radial-gradient(
            circle at 50% 35%,
            rgba(20,45,90,.10),
            transparent 38%
        ),

        /* Very subtle cyan glow */
        radial-gradient(
            circle at 10% 20%,
            rgba(103,232,255,.025),
            transparent 25%
        ),

        /* Very subtle purple glow */
        radial-gradient(
            circle at 90% 25%,
            rgba(138,107,255,.025),
            transparent 28%
        ),

        /* Main dark navy background */
        linear-gradient(
            180deg,
            #01030A 0%,
            #020611 35%,
            #030817 65%,
            #01030A 100%
        );

    color:var(--text);

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

    overflow-x:hidden;

}


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

body::before{

    content:"";

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background-image:

        linear-gradient(
            rgba(103,232,255,.025) 1px,
            transparent 1px
        ),

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

    background-size:70px 70px;

    /* Grid ko bahut subtle rakha hai */
    opacity:.08;

    pointer-events:none;

    z-index:-10;

}


/*=========================================
 SUBTLE NOISE TEXTURE
=========================================*/

body::after{

    content:"";

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    /* Noise bhi bahut subtle */
    opacity:.015;

    background-image:url("../images/noise.png");

    background-repeat:repeat;

    mix-blend-mode:soft-light;

    pointer-events:none;

    z-index:-9;

}



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

.hero::before{

    content:"";

    position:absolute;

    width:680px;

    height:680px;

    right:-150px;

    top:-150px;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.20),

    rgba(138,107,255,.12),

    transparent 72%);

    filter:blur(85px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}


/*=========================================
LEFT GLOW
=========================================*/

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-140px;

    background:

    radial-gradient(circle,

    rgba(255,130,209,.14),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.floating{

    opacity:.9;

    filter:

    drop-shadow(0 0 20px rgba(103,232,255,.18))

    drop-shadow(0 0 35px rgba(138,107,255,.12));

}


.hero-image::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.16),

    rgba(138,107,255,.12),

    rgba(255,130,209,.08),

    transparent 72%);

    filter:blur(60px);

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

    z-index:-1;

}


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

.menu-toggle{

    width:48px;
    height:48px;

    display:none;

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

    flex-direction:column;

    gap:6px;

    cursor:pointer;

    border-radius:14px;

    background:rgba(19,26,47,.65);

    backdrop-filter:blur(12px);

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

    transition:.4s;

}

.menu-toggle:hover{

    transform:translateY(-2px);

    border-color:rgba(103,232,255,.45);

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.10),
    rgba(138,107,255,.12));

    box-shadow:

    0 10px 30px rgba(103,232,255,.15);

}

.menu-toggle span{

    width:22px;
    height:2px;

    border-radius:20px;

    background:linear-gradient(
    90deg,
    #67E8FF,
    #8A6BFF,
    #FF82D1);

    transition:.35s;

}

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

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;
    max-width:85%;

    height:100vh;

    background:rgba(13,18,34,.96);

    backdrop-filter:blur(22px);

    border-left:1px solid rgba(103,232,255,.18);

    box-shadow:

    -20px 0 60px rgba(0,0,0,.45);

    z-index:99999;

    transition:.45s ease;

    padding:90px 35px;

    overflow-y:auto;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.mobile-menu ul li a{

    color:var(--text);

    font-size:18px;

    font-weight:500;

    transition:.35s;

}

.mobile-menu ul li a:hover{

    color:#67E8FF;

    padding-left:10px;

    text-shadow:

    0 0 12px rgba(103,232,255,.35);

}

.mobile-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:55px;

    border-radius:14px;

    color:#fff;

    font-weight:600;

    background:linear-gradient(
    135deg,
    #36CFFF,
    #6C72FF,
    #C96CFF);

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

    box-shadow:

    0 12px 35px rgba(103,232,255,.18);

    transition:.4s;

}

.mobile-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 45px rgba(103,232,255,.25),

    0 0 25px rgba(138,107,255,.18);

}

/*=========================================
CLOSE BUTTON
=========================================*/

.mobile-close{

    position:absolute;

    top:25px;

    right:25px;

    width:44px;

    height:44px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    color:var(--text);

    font-size:32px;

    background:rgba(19,26,47,.60);

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

    backdrop-filter:blur(12px);

    transition:.4s;

}

.mobile-close:hover{

    color:#67E8FF;

    transform:rotate(90deg) scale(1.08);

    border-color:rgba(103,232,255,.45);

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.10),
    rgba(138,107,255,.12));

    box-shadow:

    0 10px 30px rgba(103,232,255,.18);

}

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

.menu-overlay{

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(5,10,20,.72);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9990;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

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

@media(max-width:991px){

    .menu{

        display:none;

    }

    .nav-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .mobile-menu{

        width:340px;

    }

}

/*====================================

ABOUT

====================================*/

.about{

    position:relative;

    padding:130px 0;

    overflow:hidden;

}

.about::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:-180px;

    top:40px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.14),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(95px);

    animation:heroGlow 8s ease-in-out infinite;

}

.about-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-image::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    rgba(255,130,209,.08),

    transparent 72%);

    filter:blur(65px);

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

    z-index:0;

}

.about-image img:first-child{

    width:470px;

    z-index:5;

    position:relative;

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

    filter:

    drop-shadow(0 0 20px rgba(103,232,255,.28))

    drop-shadow(0 0 45px rgba(138,107,255,.22))

    drop-shadow(0 0 70px rgba(255,130,209,.12));

}

.about-coin{

    position:absolute;

    width:120px;

    top:40px;

    left:20px;

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

    filter:drop-shadow(0 0 20px rgba(103,232,255,.18));

}

.about-cube{

    position:absolute;

    width:90px;

    right:30px;

    bottom:50px;

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

    animation-delay:1.5s;

    filter:drop-shadow(0 0 18px rgba(138,107,255,.18));

}

.about-content{

    padding-left:40px;

}

.section-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:100px;

    background:linear-gradient(
    135deg,
    rgba(103,232,255,.08),
    rgba(138,107,255,.08));

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

    color:#67E8FF;

    letter-spacing:2px;

    font-size:13px;

    font-weight:600;

    margin-bottom:25px;

    backdrop-filter:blur(12px);

    box-shadow:

    0 0 20px rgba(103,232,255,.08);

}

.about-content h2{

    font-size:52px;

    line-height:1.2;

    margin-bottom:25px;

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

    background:linear-gradient(
    180deg,
    #FFFFFF,
    #D8E7FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.about-content p{

    color:var(--text2);

    line-height:1.9;

    margin-bottom:35px;

}

.about-list{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.about-item{

    color:var(--text);

    font-size:17px;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.about-item:hover{

    color:#67E8FF;

    transform:translateX(6px);

}

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

@media(max-width:991px){

.about{

padding:90px 0;

text-align:center;

}

.about-content{

padding-left:0;

margin-top:60px;

}

.about-list{

grid-template-columns:1fr;

}

.about-item{

justify-content:center;

}

.about-image img:first-child{

width:330px;

}

.about-image::before{

width:340px;

height:340px;

}

.about-content h2{

font-size:40px;

}

.about .primary-btn{

display:flex;

margin:0 auto;

}

}

@media(max-width:576px){

.about-content h2{

font-size:32px;

}

.about-image img:first-child{

width:260px;

}

.about-image::before{

width:260px;

height:260px;

}

}

/*====================================

FEATURES

====================================*/

.features{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.features::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.08),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.section-title{

    text-align:center;

    max-width:700px;

    margin:auto auto 70px;

    position:relative;

    z-index:5;

}

.section-title h2{

    font-size:52px;

    line-height:1.2;

    margin-top:25px;

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

    background:linear-gradient(

    180deg,

    #FFFFFF,

    #D8E7FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.feature-card{

    background:rgba(19,26,47,.60);

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

    border-radius:24px;

    padding:40px;

    height:100%;

    transition:.45s;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

.feature-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transition:.8s;

}

.feature-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.20),

    rgba(138,107,255,.12),

    rgba(255,130,209,.15));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.feature-card:hover::before{

    left:100%;

}

.feature-card:hover::after{

    opacity:1;

}

.feature-card:hover{

    transform:translateY(-12px);

    border-color:rgba(103,232,255,.30);

    box-shadow:

    0 25px 60px rgba(103,232,255,.15),

    0 0 25px rgba(138,107,255,.10);

}

.feature-icon{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    color:#fff;

    border-radius:18px;

    margin-bottom:30px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.22),

    rgba(138,107,255,.20),

    rgba(255,130,209,.16));

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

    box-shadow:

    0 12px 35px rgba(103,232,255,.12);

}

.feature-card h3{

    margin-bottom:20px;

    font-size:26px;

    color:var(--text);

}

.feature-card p{

    color:var(--text2);

    line-height:1.85;

}

@media(max-width:991px){

.section-title h2{

font-size:40px;

}

.feature-card{

text-align:center;

}

.feature-icon{

margin:auto auto 25px;

}

}

@media(max-width:576px){

.section-title h2{

font-size:30px;

}

.feature-card{

padding:30px;

}

}

/*====================================

HOW IT WORKS

====================================*/

.works{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.works::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-180px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.work-card{

    background:rgba(19,26,47,.60);

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

    border-radius:24px;

    padding:45px;

    text-align:center;

    height:100%;

    transition:.45s;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

.work-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transition:.8s;

}

.work-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.20),

    rgba(138,107,255,.14),

    rgba(255,130,209,.16));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.work-card:hover::before{

    left:100%;

}

.work-card:hover::after{

    opacity:1;

}

.work-card:hover{

    transform:translateY(-12px);

    border-color:rgba(103,232,255,.28);

    box-shadow:

    0 25px 60px rgba(103,232,255,.15),

    0 0 25px rgba(138,107,255,.12);

}

.work-number{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:auto auto 30px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

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

    color:#fff;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.22),

    rgba(138,107,255,.22),

    rgba(255,130,209,.18));

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

    box-shadow:

    0 12px 35px rgba(103,232,255,.15);

}

.work-card h3{

    margin-bottom:20px;

    font-size:28px;

    color:var(--text);

}

.work-card p{

    line-height:1.85;

    color:var(--text2);

}

@media(max-width:991px){

.work-card{

margin-bottom:20px;

}

.work-card h3{

font-size:24px;

}

}

/*====================================

STATISTICS

====================================*/

.stats{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.stats::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.stats-wrapper{

    display:grid;

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

    gap:25px;

    position:relative;

    z-index:5;

}

.stat-box{

    background:rgba(19,26,47,.60);

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

    border-radius:22px;

    padding:45px 20px;

    text-align:center;

    transition:.45s;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

.stat-box::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transition:.8s;

}

.stat-box::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.22),

    rgba(138,107,255,.16),

    rgba(255,130,209,.18));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.stat-box:hover::before{

    left:100%;

}

.stat-box:hover::after{

    opacity:1;

}

.stat-box:hover{

    transform:translateY(-12px);

    border-color:rgba(103,232,255,.28);

    box-shadow:

    0 25px 60px rgba(103,232,255,.15),

    0 0 25px rgba(138,107,255,.12);

}

.stat-box h2{

    display:inline-block;

    font-size:56px;

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

    margin-bottom:8px;

    background:linear-gradient(

    90deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.stat-box span{

    font-size:34px;

    font-weight:700;

    background:linear-gradient(

    90deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.stat-box p{

    margin-top:18px;

    color:var(--text2);

    font-size:17px;

    line-height:1.7;

}

@media(max-width:991px){

.stats-wrapper{

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

}

}

@media(max-width:576px){

.stats-wrapper{

grid-template-columns:1fr;

}

.stat-box{

padding:35px 20px;

}

.stat-box h2{

font-size:42px;

}

}

/*====================================

CTA

====================================*/

.cta{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-220px;

    bottom:-220px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.08),

    transparent 72%);

    filter:blur(100px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.cta-box{

    padding:90px 70px;

    border-radius:35px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.08),

    rgba(138,107,255,.08),

    rgba(255,130,209,.06));

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

    backdrop-filter:blur(20px);

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 20px 60px rgba(0,0,0,.22);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    top:-180px;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.18),

    rgba(138,107,255,.12),

    transparent 72%);

    filter:blur(70px);

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

}

.cta-box::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:35px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.22),

    rgba(138,107,255,.16),

    rgba(255,130,209,.18));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

.cta h2{

    font-size:56px;

    margin:30px auto;

    max-width:760px;

    line-height:1.2;

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

    background:linear-gradient(

    180deg,

    #FFFFFF,

    #D9E8FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.cta p{

    max-width:650px;

    margin:auto;

    line-height:1.9;

    color:var(--text2);

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

}

@media(max-width:991px){

.cta-box{

padding:60px 30px;

}

.cta h2{

font-size:42px;

}

}

@media(max-width:576px){

.cta h2{

font-size:30px;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

}

/*============================

ROADMAP

=============================*/

.roadmap{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.roadmap::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.timeline{

    position:relative;

    max-width:1100px;

    margin:auto;

    z-index:5;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:3px;

    height:100%;

    background:linear-gradient(

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    box-shadow:

    0 0 20px rgba(103,232,255,.35);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:25px 60px;

}

.timeline-item.left{

    left:0;

    text-align:right;

}

.timeline-item.right{

    left:50%;

}

.timeline-content{

    background:rgba(19,26,47,.60);

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

    padding:35px;

    border-radius:22px;

    backdrop-filter:blur(18px);

    transition:.45s;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

.timeline-content::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.20),

    rgba(138,107,255,.14),

    rgba(255,130,209,.16));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.timeline-content:hover::after{

    opacity:1;

}

.timeline-content:hover{

    transform:translateY(-10px);

    border-color:rgba(103,232,255,.28);

    box-shadow:

    0 25px 60px rgba(103,232,255,.15),

    0 0 25px rgba(138,107,255,.12);

}

.timeline-content::before{

    content:"";

    position:absolute;

    top:45px;

    width:18px;

    height:18px;

    background:linear-gradient(

    135deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    border-radius:50%;

    box-shadow:

    0 0 22px rgba(103,232,255,.45);

}

.timeline-item.left .timeline-content::before{

    right:-70px;

}

.timeline-item.right .timeline-content::before{

    left:-70px;

}

.timeline-content span{

    display:inline-block;

    margin-bottom:12px;

    font-weight:700;

    background:linear-gradient(

    90deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.timeline-content h3{

    margin-bottom:15px;

    font-size:28px;

    color:var(--text);

}

.timeline-content p{

    line-height:1.85;

    color:var(--text2);

}

@media(max-width:991px){

.timeline::before{

left:25px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:70px;

padding-right:0;

text-align:left!important;

margin-bottom:35px;

}

.timeline-item.left .timeline-content::before,

.timeline-item.right .timeline-content::before{

left:-54px;

right:auto;

}

}

/*====================================

TOKENOMICS

====================================*/

.tokenomics{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.tokenomics::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:-200px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(95px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.token-image{

    position:relative;

    text-align:center;

    z-index:5;

}

.token-image::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.14),

    rgba(138,107,255,.12),

    rgba(255,130,209,.08),

    transparent 72%);

    filter:blur(70px);

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

    z-index:0;

}

.token-image img{

    max-width:420px;

    width:100%;

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

    position:relative;

    z-index:2;

    /*filter:*/

    /*drop-shadow(0 0 25px rgba(103,232,255,.28))*/

    /*drop-shadow(0 0 45px rgba(138,107,255,.20))*/

    /*drop-shadow(0 0 70px rgba(255,130,209,.12));*/

}

.token-glow{

    position:absolute;

    width:340px;

    height:340px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(103,232,255,.30),

    rgba(138,107,255,.18),

    rgba(255,130,209,.10),

    transparent 72%);

    filter:blur(120px);

    opacity:.9;

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

}

@keyframes floatToken{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

}

.tokenomics h2{

    font-size:52px;

    margin:20px 0;

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

    background:linear-gradient(

    180deg,

    #FFFFFF,

    #D8E7FF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.tokenomics p{

    color:var(--text2);

    margin-bottom:40px;

    line-height:1.9;

}

.token-item{

    margin-bottom:28px;

}

.token-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

    font-weight:600;

    color:var(--text);

}

.progress{

    height:12px;

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

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

    border-radius:30px;

    overflow:hidden;

    backdrop-filter:blur(10px);

}

.progress-fill{

    height:100%;

    border-radius:30px;

    background:linear-gradient(

    90deg,

    #67E8FF 0%,

    #8A6BFF 55%,

    #FF82D1 100%);

    box-shadow:

    0 0 18px rgba(103,232,255,.30);

}

.w40{width:40%;}
.w20{width:20%;}
.w15{width:15%;}
.w10{width:10%;}
.w5{width:5%;}

@media(max-width:991px){

.tokenomics{

text-align:center;

}

.tokenomics h2{

font-size:40px;

}

.token-image{

margin-bottom:50px;

/* IMAGE CENTER */
width:100%;
display:flex;
justify-content:center;
align-items:center;
position:relative;

}

.token-image::before{

width:360px;

height:360px;

}

}

@media(max-width:576px){

.tokenomics h2{

font-size:30px;

}

.token-image img{

max-width:280px;

}

.token-image::before{

width:260px;

height:260px;

}

.token-glow{

width:240px;

height:240px;

}

}

/*====================================

SUPPORTED WALLETS

====================================*/

.wallets{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.wallets::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    bottom:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(103,232,255,.12),

    rgba(138,107,255,.10),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.wallets .section-title{

    margin-bottom:70px;

    position:relative;

    z-index:5;

}

.wallets .section-title p{

    max-width:650px;

    margin:20px auto 0;

    color:var(--text2);

}

.wallet-card{

    background:rgba(19,26,47,.60);

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

    border-radius:24px;

    padding:45px 25px;
    
    /* ADD THESE */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    transition:.45s;

    backdrop-filter:blur(18px);

    height:100%;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 10px 35px rgba(0,0,0,.18);

}

.wallet-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.08),

    transparent);

    transition:.8s;

}

.wallet-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(

    135deg,

    rgba(103,232,255,.20),

    rgba(138,107,255,.14),

    rgba(255,130,209,.16));

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.wallet-card:hover::before{

    left:100%;

}

.wallet-card:hover::after{

    opacity:1;

}

.wallet-card:hover{

    transform:translateY(-12px);

    border-color:rgba(103,232,255,.28);

    box-shadow:

    0 25px 60px rgba(103,232,255,.15),

    0 0 25px rgba(138,107,255,.12);

}

.wallet-card img{

    width:80px;

    height:80px;

    object-fit:contain;

    margin-bottom:25px;

    transition:.45s;

    filter:

    drop-shadow(0 0 15px rgba(103,232,255,.18));
    
    

}

.wallet-card:hover img{

    transform:scale(1.12) rotate(5deg);

    filter:

    drop-shadow(0 0 25px rgba(103,232,255,.30))

    drop-shadow(0 0 20px rgba(138,107,255,.18));

}

.wallet-card h4{

    font-size:24px;

    margin:0;

    font-weight:600;

    color:var(--text);

}

@media(max-width:576px){

.wallet-card{

padding:35px 20px;

}

.wallet-card img{

width:65px;

height:65px;

}

.wallet-card h4{

font-size:20px;

}

}

/*====================================

FAQ

====================================*/

.faq{

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

.faq::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,130,209,.10),

    rgba(138,107,255,.08),

    transparent 72%);

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:0;

}

.faq .section-title{

    margin-bottom:70px;

    position:relative;

    z-index:5;

}

.faq-wrapper{

    max-width:900px;

    margin:auto;

    position:relative;

    z-index:5;

}

.faq-item{

    background:rgba(19,26,47,.60);

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

    border-radius:20px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.45s;

    backdrop-filter:blur(18px);

    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

}

.faq-item:hover{

    border-color:rgba(103,232,255,.25);

    box-shadow:

    0 15px 40px rgba(103,232,255,.10);

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 35px;

    cursor:pointer;

}

.faq-question h4{

    margin:0;

    font-size:22px;

    font-weight:600;

    color:var(--text);

}

.faq-question span{

    font-size:34px;

    font-weight:300;

    background:linear-gradient(

    90deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    transition:.45s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.45s ease;

}

.faq-answer p{

    padding:0 35px 30px;

    margin:0;

    line-height:1.85;

    color:var(--text2);

}

.faq-item.active{

    border-color:rgba(103,232,255,.28);

    box-shadow:

    0 18px 45px rgba(103,232,255,.12);

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

}

@media(max-width:768px){

.faq-question{

padding:22px;

}

.faq-question h4{

font-size:18px;

padding-right:15px;

}

.faq-answer p{

padding:0 22px 22px;

}

}

/*====================================

FOOTER

====================================*/

.footer{

    padding:90px 0 30px;

    background:linear-gradient(
    180deg,
    #0B1020 0%,
    #090C16 100%);

    border-top:1px solid rgba(103,232,255,.12);

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(103,232,255,.14),

    rgba(138,107,255,.10),

    rgba(255,130,209,.08),

    transparent 72%);

    filter:blur(120px);

    animation:heroGlow 8s ease-in-out infinite;

}

.footer::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-150px;

    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(255,130,209,.08),

    rgba(138,107,255,.08),

    transparent 72%);

    filter:blur(120px);

    z-index:0;

}

.footer-logo{

    position:relative;

    z-index:5;

}

.footer-logo img{

    height:55px;

    margin-bottom:25px;

    filter:

    drop-shadow(0 0 20px rgba(103,232,255,.18));

    transition:.45s;

}

.footer-logo img:hover{

    transform:scale(1.05);

    filter:

    drop-shadow(0 0 30px rgba(103,232,255,.30))

    drop-shadow(0 0 20px rgba(138,107,255,.20));

}

.footer-logo p{

    line-height:1.9;

    color:var(--text2);

    margin-bottom:30px;

}

.footer h4{

    margin-bottom:25px;

    font-size:22px;

    color:var(--text);

}

.footer ul{

    padding:0;

    margin:0;

    list-style:none;

}

.footer ul li{

    margin-bottom:15px;

    color:var(--text2);

}

.footer ul li a{

    color:var(--text2);

    text-decoration:none;

    transition:.35s;

}

.footer ul li a:hover{

    color:#67E8FF;

    padding-left:8px;

    text-shadow:

    0 0 12px rgba(103,232,255,.30);

}

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(19,26,47,.70);

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

    color:var(--text);

    font-size:18px;

    backdrop-filter:blur(12px);

    transition:.4s;

}

.social-icons a:hover{

    background:linear-gradient(

    135deg,

    #67E8FF,

    #8A6BFF,

    #FF82D1);

    color:#fff;

    border-color:rgba(255,255,255,.20);

    transform:translateY(-6px) scale(1.08);

    box-shadow:

    0 15px 35px rgba(103,232,255,.22),

    0 0 25px rgba(138,107,255,.18);

}

.footer hr{

    margin:60px 0 25px;

    border:none;

    height:1px;

    background:linear-gradient(

    90deg,

    transparent,

    rgba(103,232,255,.18),

    rgba(138,107,255,.18),

    rgba(255,130,209,.18),

    transparent);

}

.footer-bottom{

    text-align:center;

    color:var(--text2);

    font-size:15px;

}

@media(max-width:991px){

.footer{

text-align:center;

}

.social-icons{

justify-content:center;

margin-bottom:20px;

}

.footer h4{

margin-top:20px;

}

}

/*=========================
LOADER
=========================*/

#loader{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

    180deg,

    #090C16,

    #11182B);

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.8s;

}

.loader-content{

    text-align:center;

}

.loader-content img{

    width:90px;

    margin-bottom:35px;

    filter:

    drop-shadow(0 0 25px rgba(103,232,255,.30))

    drop-shadow(0 0 35px rgba(138,107,255,.18));

    animation:logoFloat 2s ease-in-out infinite;

}

.loader-spinner{

    width:70px;

    height:70px;

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

    border-top:4px solid #67E8FF;

    border-right:4px solid #8A6BFF;

    border-radius:50%;

    margin:auto;

    box-shadow:

    0 0 25px rgba(103,232,255,.18);

    animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*====================================
 SCROLL ROTATING BACKGROUND COIN
====================================*/

.scroll-coin{
    position:fixed;
    top:50%;
    left:50%;
    width:500px;

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

    z-index:5;
    opacity:.10;

    pointer-events:none;
}

.scroll-coin img{
    width:100%;
    display:block;
    will-change:transform;
}


/* TABLET */

@media(max-width:991px){

    .scroll-coin{
        width:400px;
        height:400px;
        opacity:.06;
    }

}


/* MOBILE */

@media(max-width:576px){

    .scroll-coin{
        width:300px;
        height:300px;
        opacity:.05;
    }

}

.site-wrapper{
    position:relative;
    z-index:2;
}

.hero,
.about,
.features,
.works,
.stats,
.cta,
.roadmap,
.tokenomics,
.wallets,
.faq{
    background:transparent;
}