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

:root{

    --bg:#020810;
    --bg2:#04111d;
    --bg3:#071a29;

    --card:#071522;
    --card2:#091c2b;

    --cyan:#00d8ff;
    --cyan2:#42e9ff;
    --blue:#008cff;

    --gold:#e8b84b;
    --gold2:#ffd36a;

    --white:#ffffff;
    --muted:#9eb0bf;

    --border:rgba(0,216,255,.20);

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

}


/* =====================================================
   BASIC
===================================================== */

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    background:
    radial-gradient(
        circle at 80% 10%,
        rgba(0,140,255,.10),
        transparent 30%
    ),
    radial-gradient(
        circle at 15% 35%,
        rgba(0,216,255,.06),
        transparent 25%
    ),
    var(--bg);

    color:#fff;

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

    overflow-x:hidden;
}


h1,h2,h3,h4,h5,h6,
.navbar-brand{
    font-family:'Space Grotesk',sans-serif;
}


a{
    text-decoration:none;
}


section{
    position:relative;
    padding:100px 0;
}


.text-cyan{
    color:var(--cyan)!important;
}

.text-gold{
    color:var(--gold)!important;
}

.text-muted-custom{
    color:var(--muted);
}



/* =====================================================
   SCROLL BAR
===================================================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#020810;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        var(--cyan),
        var(--blue)
    );
    border-radius:20px;
}


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

.main-nav{

    background:rgba(2,8,16,.82);

    border-bottom:
    1px solid rgba(0,216,255,.12);

    backdrop-filter:blur(16px);

    transition:.3s;

    padding:12px 0;
}


.main-nav.scrolled{

    background:rgba(2,8,16,.97);

    box-shadow:
    0 15px 45px rgba(0,0,0,.25);

}


.brand-logo{
    height:56px;
    max-width:240px;
    object-fit:contain;
}


.navbar-nav .nav-link{

    color:#b8c5cf;

    font-size:14px;

    font-weight:600;

    padding:10px 14px!important;

    transition:.3s;
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{

    color:var(--cyan);
}


.navbar-toggler{

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

    box-shadow:none!important;

    width:45px;
    height:42px;

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


.navbar-toggler i{
    color:var(--cyan);
    font-size:26px;
}


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

.btn-main{

    border:1px solid var(--cyan);

    background:
    linear-gradient(
        135deg,
        #00bcdc,
        #0079cd
    );

    color:#fff;

    border-radius:10px;

    font-weight:700;

    padding:13px 24px;

    transition:.3s;

    box-shadow:
    0 10px 35px rgba(0,216,255,.15);
}


.btn-main:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
    0 15px 40px rgba(0,216,255,.28);
}


.btn-outline-custom{

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

    color:#fff;

    padding:13px 24px;

    border-radius:10px;

    font-weight:600;

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

    transition:.3s;
}


.btn-outline-custom:hover{

    border-color:var(--cyan);

    color:var(--cyan);

    background:
    rgba(0,216,255,.06);
}


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

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    padding-top:120px;

    overflow:hidden;

    background:

    linear-gradient(
        90deg,
        rgba(2,8,16,.98) 0%,
        rgba(3,13,23,.92) 45%,
        rgba(2,10,18,.80) 100%
    );

}


.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
        rgba(0,216,255,.025) 1px,
        transparent 1px
    ),

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

    background-size:55px 55px;

    mask-image:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.75),
        transparent
    );

}


.hero-glow{

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    right:-120px;
    top:60px;

    background:
    radial-gradient(
        circle,
        rgba(0,216,255,.13),
        transparent 65%
    );

    pointer-events:none;
}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

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

    background:
    rgba(0,216,255,.055);

    padding:8px 14px;

    border-radius:100px;

    color:var(--cyan);

    font-size:13px;

    font-weight:700;

    margin-bottom:22px;
}


.hero h1{

    font-size:clamp(
        48px,
        6vw,
        88px
    );

    line-height:.98;

    font-weight:700;

    letter-spacing:-3px;

    margin-bottom:25px;
}


.gradient-text{

    background:
    linear-gradient(
        90deg,
        #fff 0%,
        #00d8ff 55%,
        #62efff 100%
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}


.hero-description{

    font-size:18px;

    line-height:1.8;

    color:#aab9c5;

    max-width:650px;
}


.hero-points{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:28px;
}


.hero-point{

    background:
    rgba(6,23,37,.70);

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

    border-radius:9px;

    padding:10px 14px;

    color:#dce5eb;

    font-size:13px;
}


.hero-point i{
    color:var(--cyan);
    margin-right:6px;
}


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

.globe-area{

    position:relative;

    width:100%;

    min-height:550px;

    display:flex;

    align-items:center;

    justify-content:center;
}


.digital-globe{

    position:relative;

    width:390px;
    height:390px;

    border-radius:50%;

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

    background:

    radial-gradient(
        circle at 40% 38%,
        rgba(0,216,255,.24),
        rgba(0,90,150,.05) 45%,
        rgba(0,0,0,.15) 70%
    );

    box-shadow:

    inset 0 0 60px rgba(0,216,255,.16),

    0 0 80px rgba(0,156,255,.15);
}


.digital-globe::before,
.digital-globe::after{

    content:"";

    position:absolute;

    inset:38px;

    border-radius:50%;

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

    transform:rotate(25deg);
}


.digital-globe::after{

    inset:90px 10px;

    transform:rotate(-10deg);
}


.globe-line{

    position:absolute;

    background:
    rgba(0,216,255,.16);
}


.globe-line.v1{

    left:50%;
    top:0;

    height:100%;
    width:1px;
}


.globe-line.h1{

    top:50%;
    left:0;

    width:100%;
    height:1px;
}


.globe-ring{

    position:absolute;

    width:510px;
    height:155px;

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

    border-radius:50%;

    transform:rotate(-12deg);

    box-shadow:
    0 0 30px rgba(0,216,255,.1);
}


.globe-ring.gold{

    width:470px;
    height:135px;

    border-color:
    rgba(232,184,75,.45);

    transform:rotate(15deg);
}


.globe-center{

    position:absolute;

    text-align:center;

    z-index:5;
}


.globe-center img{

    width:170px;

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


.float-card{

    position:absolute;

    background:
    rgba(4,17,29,.88);

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

    box-shadow:var(--shadow);

    backdrop-filter:blur(10px);

    border-radius:14px;

    padding:14px 18px;

    font-size:13px;

    color:#dbe8ef;
}


.float-card i{

    color:var(--cyan);

    margin-right:8px;
}


.fc1{
    top:90px;
    left:5px;
}


.fc2{
    bottom:85px;
    right:5px;
}


/* =====================================================
   SECTION HEAD
===================================================== */

.section-label{

    display:inline-block;

    color:var(--cyan);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:12px;
}


.section-title{

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

    font-weight:700;

    letter-spacing:-1.5px;

    margin-bottom:18px;
}


.section-text{

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}


/* =====================================================
   COMMON CARDS
===================================================== */

.glass-card{

    height:100%;

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:15px;

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

    background:

    linear-gradient(
        145deg,
        rgba(8,28,43,.84),
        rgba(4,13,23,.95)
    );

    transition:.35s;

    box-shadow:
    0 15px 50px rgba(0,0,0,.14);
}


.glass-card::before{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    right:-35px;
    top:-35px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(0,216,255,.10),
        transparent 70%
    );
}


.glass-card:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(0,216,255,.45);

    box-shadow:
    0 20px 60px rgba(0,216,255,.07);
}


.icon-box{

    width:58px;
    height:58px;

    border-radius:13px;

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

    font-size:26px;

    color:var(--cyan);

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

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

    margin-bottom:20px;
}


.glass-card h5{

    font-weight:700;

    font-size:19px;

    margin-bottom:13px;
}


.glass-card p{

    color:#9fb0bc;

    font-size:14px;

    line-height:1.7;

    margin:0;
}


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

.about-area{

    background:
    linear-gradient(
        180deg,
        #020810,
        #03101b
    );
}


.about-image-box{

    min-height:500px;

    border-radius:20px;

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

    background:

    radial-gradient(
        circle at center,
        rgba(0,216,255,.16),
        transparent 55%
    ),

    linear-gradient(
        145deg,
        #071827,
        #020911
    );

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;
}


.network-orbit{

    width:340px;
    height:340px;

    position:relative;

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

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;
}


.network-orbit::after{

    content:"";

    width:230px;
    height:230px;

    border:
    1px solid rgba(232,184,75,.25);

    border-radius:50%;
}


.center-node{

    position:absolute;

    width:110px;
    height:110px;

    background:#061926;

    border:
    1px solid var(--cyan);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    color:var(--cyan);

    box-shadow:
    0 0 40px rgba(0,216,255,.18);

    z-index:2;
}


.node{

    width:52px;
    height:52px;

    position:absolute;

    border-radius:50%;

    background:#061927;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;
}


.n1{
    top:-25px;
}

.n2{
    right:-25px;
}

.n3{
    bottom:-25px;
}

.n4{
    left:-25px;
}


/* =====================================================
   WHY CHOOSE
===================================================== */

.why-card-number{

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

    font-size:38px;

    font-weight:800;

    margin-bottom:15px;
}


/* =====================================================
   ECOSYSTEM
===================================================== */

.ecosystem{

    background:

    radial-gradient(
        circle at 50% 50%,
        rgba(0,127,255,.08),
        transparent 40%
    );
}


.ecosystem-center{

    width:210px;
    height:210px;

    margin:auto;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

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

    background:
    radial-gradient(
        circle,
        rgba(0,216,255,.15),
        #04121e 65%
    );

    box-shadow:
    0 0 60px rgba(0,216,255,.10);
}


.ecosystem-center i{

    color:var(--cyan);

    font-size:53px;

    margin-bottom:10px;
}


/* =====================================================
   TOKEN UTILITY
===================================================== */

.utility-section{

    background:
    linear-gradient(
        180deg,
        #03101b,
        #020810
    );
}


.utility-card{

    height:100%;

    padding:25px;

    border-radius:14px;

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

    background:#051522;
}


.utility-card i{

    display:block;

    font-size:31px;

    color:var(--cyan);

    margin-bottom:15px;
}


.utility-card h5{

    font-size:16px;

    font-weight:700;

    margin-bottom:10px;
}


.utility-card p{

    color:#9babb7;

    font-size:13px;

    line-height:1.7;

    margin:0;
}


/* =====================================================
   TOKENOMICS
===================================================== */

.tokenomics-box{

    border-radius:18px;

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

    overflow:hidden;

    background:

    linear-gradient(
        145deg,
        #071827,
        #03101a
    );

    box-shadow:
    var(--shadow);
}


.token-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

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

    gap:20px;
}


.token-row:last-child{
    border:0;
}


.token-key{

    color:#91a6b5;

    font-size:14px;
}


.token-value{

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-align:right;
}


.contract-box{

    margin-top:18px;

    border:
    1px solid rgba(232,184,75,.35);

    background:
    rgba(232,184,75,.04);

    border-radius:12px;

    padding:18px;

    position:relative;
}


.contract-label{

    font-size:12px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:7px;
}


.contract-address{

    color:#dcebf2;

    word-break:break-all;

    font-family:monospace;

    font-size:13px;
}


.copy-btn{

    border:0;

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

    color:var(--cyan);

    border-radius:8px;

    padding:8px 12px;

    font-size:12px;
}


/* =====================================================
   STATS / HIGHLIGHTS
===================================================== */

.highlight-box{

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

    border-radius:15px;

    padding:28px;

    background:
    linear-gradient(
        145deg,
        #061624,
        #03101a
    );

    text-align:center;

    height:100%;
}


.highlight-box h3{

    color:var(--cyan);

    font-size:30px;

    margin-bottom:6px;
}


.highlight-box p{

    margin:0;

    color:#96a9b6;

    font-size:13px;
}


/* =====================================================
   RISK DISCLOSURE
===================================================== */

.disclosure{

    padding:40px 0;

    background:#01060c;

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

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


.disclosure-box{

    border-left:
    3px solid var(--gold);

    background:
    rgba(232,184,75,.035);

    padding:20px 24px;

    border-radius:0 12px 12px 0;
}


.disclosure-box h5{

    color:var(--gold);

    font-size:16px;

    margin-bottom:10px;
}


.disclosure-box p{

    color:#8fa0ad;

    font-size:12px;

    line-height:1.8;

    margin:0;
}


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

.cta-box{

    padding:55px;

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

    border-radius:20px;

    background:

    radial-gradient(
        circle at 90% 20%,
        rgba(0,216,255,.12),
        transparent 30%
    ),

    linear-gradient(
        145deg,
        #071b2a,
        #030c15
    );

    position:relative;

    overflow:hidden;
}


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

footer{

    padding:
    70px 0 25px;

    background:#01060c;
}


.footer-logo{

    width:210px;

    margin-bottom:18px;
}


.footer-text{

    color:#8495a2;

    line-height:1.8;

    font-size:13px;
}


.footer-title{

    font-size:15px;

    font-weight:700;

    color:#fff;

    margin-bottom:18px;
}


.footer-link{

    display:block;

    color:#8ea0ad;

    font-size:13px;

    margin-bottom:10px;

    transition:.2s;
}


.footer-link:hover{
    color:var(--cyan);
}


.footer-bottom{

    margin-top:50px;

    padding-top:22px;

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

    color:#768794;

    font-size:12px;
}


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

@media(max-width:991px){

    section{
        padding:75px 0;
    }

    .navbar-collapse{

        margin-top:15px;

        background:#04111d;

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

        padding:15px;

        border-radius:12px;
    }

    .hero{

        min-height:auto;

        padding-top:150px;

        padding-bottom:80px;
    }

    .hero h1{
        letter-spacing:-2px;
    }

    .globe-area{
        min-height:500px;
        margin-top:40px;
    }

    .digital-globe{
        width:320px;
        height:320px;
    }

    .globe-ring{
        width:410px;
    }

    .globe-ring.gold{
        width:380px;
    }

}


@media(max-width:575px){

    .brand-logo{
        height:43px;
        max-width:180px;
    }

    .hero h1{

        font-size:44px;

        letter-spacing:-1px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-points{

        display:grid;

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

        width:100%;
    }

    .hero-point{
        text-align:center;
    }

    .globe-area{
        min-height:380px;
    }

    .digital-globe{
        width:240px;
        height:240px;
    }

    .globe-ring{
        width:300px;
        height:100px;
    }

    .globe-ring.gold{
        width:275px;
        height:90px;
    }

    .globe-center img{
        width:125px;
    }

    .float-card{
        display:none;
    }

    .section-title{
        font-size:34px;
    }

    .about-image-box{
        min-height:380px;
    }

    .network-orbit{
        width:245px;
        height:245px;
    }

    .token-row{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;
    }

    .token-value{
        text-align:left;
    }

    .cta-box{
        padding:35px 22px;
    }

}