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

:root{

    --bg:#02040d;
    --bg2:#05091a;

    --blue:#00b7ff;
    --cyan:#00eaff;
    --purple:#8c4dff;
    --pink:#ff29d9;
    --gold:#ffc928;
    --green:#32ff88;

    --white:#ffffff;
    --muted:#aeb8d4;

    --border:rgba(0,200,255,.25);

    --glass:rgba(8,14,35,.72);

    --shadow:
        0 0 25px rgba(0,180,255,.12);

    --radius:24px;

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

    --display:
        "Orbitron",
        sans-serif;
}


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

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

html{
    scroll-behavior:smooth;
}

body{

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(0,170,255,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 50%,
            rgba(160,0,255,.10),
            transparent 30%
        ),
        var(--bg);

    color:var(--white);

    font-family:var(--font);

    overflow-x:hidden;
}

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

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


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

.bg-grid{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-5;

    opacity:.22;

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

    background-size:55px 55px;

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

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(55px);
    }

}

.noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-4;

    opacity:.035;

    background-image:url(
        "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"
    );
}

.floating-orb{

    position:fixed;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

    z-index:-3;

    transition:transform .4s ease;
}

.orb-1{

    width:280px;
    height:280px;

    background:rgba(0,180,255,.12);

    left:-120px;
    top:25%;
}

.orb-2{

    width:300px;
    height:300px;

    background:rgba(180,0,255,.11);

    right:-120px;
    top:50%;
}

.orb-3{

    width:200px;
    height:200px;

    background:rgba(0,255,220,.08);

    left:45%;
    bottom:-80px;
}


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

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 6%;

    z-index:1000;

    border-bottom:1px solid transparent;

    transition:.35s ease;
}

.navbar.scrolled{

    background:rgba(2,4,13,.82);

    backdrop-filter:blur(20px);

    border-bottom-color:rgba(0,210,255,.16);

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

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:var(--display);
}

.brand-symbol{

    width:42px;
    height:42px;

    border-radius:13px;

    display:grid;

    place-items:center;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 0 25px rgba(0,190,255,.35);

}

.brand strong{

    display:block;

    font-size:20px;

    letter-spacing:2px;
}

.brand small{

    display:block;

    font-size:9px;

    letter-spacing:5px;

    color:var(--cyan);

    margin-top:2px;
}

.nav-links{

    display:flex;

    gap:28px;
}

.nav-links a{

    color:#b8c4df;

    font-size:13px;

    font-weight:600;

    transition:.3s;
}

.nav-links a:hover{
    color:#fff;
    text-shadow:0 0 15px var(--cyan);
}

.nav-btn{

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 18px;

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

    border-radius:50px;

    background:rgba(0,180,255,.07);

    color:#fff;

    font-size:12px;

    font-weight:700;

    transition:.3s;
}

.nav-btn:hover{

    transform:translateY(-2px);

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

}


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

.hero{

    min-height:100vh;

    padding:
        150px 7%
        100px;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    gap:60px;

    position:relative;
}

.hero-content{
    max-width:700px;
}

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 14px;

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

    background:rgba(0,180,255,.05);

    border-radius:50px;

    color:#b9d9f6;

    font-size:11px;

    letter-spacing:2px;

    margin-bottom:25px;
}

.live-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--green);

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

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    50%{
        transform:scale(1.5);
        opacity:.5;
    }

}

.hero h1{

    font-family:var(--display);

    font-size:
        clamp(50px,7vw,105px);

    line-height:.95;

    letter-spacing:-5px;

    text-transform:uppercase;
}

.hero h1 span{

    display:block;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            #00eaff,
            var(--purple)
        );

    -webkit-background-clip:text;

    color:transparent;

}

.hero h1 strong{

    display:block;

    background:
        linear-gradient(
            90deg,
            #fff,
            #91a7ca
        );

    -webkit-background-clip:text;

    color:transparent;

}

.hero-description{

    max-width:620px;

    color:var(--muted);

    font-size:16px;

    line-height:1.8;

    margin:
        28px
        0
        30px;
}

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 22px;

    border-radius:13px;

    font-size:13px;

    font-weight:800;

    transition:.35s;

}

.btn-primary{

    color:#001019;

    background:
        linear-gradient(
            100deg,
            #00eaff,
            #5cf1ff
        );

    box-shadow:
        0 0 30px rgba(0,220,255,.22);
}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
        0 0 40px rgba(0,220,255,.45);
}

.btn-outline{

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

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

    color:#fff;
}

.btn-outline:hover{

    transform:translateY(-4px);

    border-color:var(--cyan);

    background:rgba(0,220,255,.08);
}

.hero-stats{

    display:flex;

    gap:40px;

    margin-top:55px;
}

.hero-stats div{

    padding-left:17px;

    border-left:
        2px solid
        var(--blue);
}

.hero-stats strong{

    display:block;

    font-family:var(--display);

    font-size:27px;

    color:#fff;
}

.hero-stats span{

    color:#7885a4;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;
}


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

.hero-visual{

    min-height:550px;

    display:grid;

    place-items:center;

    position:relative;
}

.globe{

    width:min(450px,80vw);

    aspect-ratio:1;

    position:relative;

    display:grid;

    place-items:center;
}

.globe-core{

    width:62%;

    aspect-ratio:1;

    border-radius:50%;

    overflow:hidden;

    position:relative;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(0,240,255,.25),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #071a3c,
            #030716
        );

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

    box-shadow:
        0 0 50px rgba(0,180,255,.25),
        inset 0 0 50px rgba(0,120,255,.18);
}

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

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

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

.globe-core:before{
    transform:rotateY(65deg);
}

.globe-core:after{
    transform:rotateY(-65deg);
}

.globe-ring{

    position:absolute;

    inset:10%;

    border-radius:50%;

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

.ring-1{
    transform:rotateX(70deg);
}

.ring-2{
    transform:rotateY(70deg);
}

.ring-3{
    transform:rotateX(70deg) rotateZ(55deg);
}

.continent{

    position:absolute;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            rgba(0,238,255,.75),
            rgba(80,80,255,.1)
        );

    filter:blur(.3px);
}

.continent-1{

    width:80px;
    height:120px;

    left:22%;
    top:23%;

    transform:rotate(35deg);
}

.continent-2{

    width:100px;
    height:65px;

    right:14%;
    top:40%;

    transform:rotate(-25deg);
}

.continent-3{

    width:70px;
    height:80px;

    left:43%;
    bottom:12%;
}

.chart-line{

    position:absolute;

    inset:30% 12% 25%;

    display:flex;

    align-items:flex-end;

    gap:5px;
}

.chart-line span{

    flex:1;

    background:
        linear-gradient(
            to top,
            var(--cyan),
            var(--pink)
        );

    box-shadow:
        0 0 12px
        rgba(0,230,255,.5);

    animation:
        chartPulse
        2s
        ease-in-out
        infinite
        alternate;
}

.chart-line span:nth-child(1){height:25%}
.chart-line span:nth-child(2){height:45%}
.chart-line span:nth-child(3){height:35%}
.chart-line span:nth-child(4){height:65%}
.chart-line span:nth-child(5){height:52%}
.chart-line span:nth-child(6){height:80%}

@keyframes chartPulse{

    to{
        transform:translateY(-7px);
    }

}

.coin{

    position:absolute;

    width:76px;
    height:76px;

    border-radius:50%;

    display:grid;

    place-items:center;

    font-size:30px;

    border:2px solid rgba(255,255,255,.3);

    animation:float 4s ease-in-out infinite;
}

.coin-btc{

    left:5%;

    top:20%;

    color:#48c7ff;

    background:
        radial-gradient(
            circle,
            #173f67,
            #040a18
        );

    box-shadow:
        0 0 35px rgba(0,190,255,.4);
}

.coin-dollar{

    right:3%;

    top:15%;

    color:#ff6cff;

    font-family:var(--display);

    background:#15082a;

    box-shadow:
        0 0 35px rgba(255,30,230,.3);

    animation-delay:-2s;
}

@keyframes float{

    50%{
        transform:translateY(-18px);
    }

}

.market-card{

    position:absolute;

    bottom:3%;

    left:50%;

    transform:translateX(-50%);

    width:280px;

    padding:17px;

    border-radius:17px;

    background:
        rgba(4,9,25,.88);

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

    box-shadow:
        0 0 35px
        rgba(0,170,255,.16);

    backdrop-filter:blur(15px);
}

.market-top,
.market-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#7f8da9;

    font-size:9px;

    letter-spacing:1px;
}

.market-top i{
    color:var(--cyan);
}

.mini-chart{

    height:90px;

    display:flex;

    align-items:flex-end;

    gap:7px;

    padding:15px 0;
}

.mini-chart span{

    flex:1;

    border-radius:3px 3px 0 0;

    background:
        linear-gradient(
            to top,
            var(--blue),
            var(--purple)
        );

    box-shadow:
        0 0 10px rgba(0,180,255,.2);

    animation:
        barPulse
        2.5s
        ease-in-out
        infinite
        alternate;
}

@keyframes barPulse{

    to{
        opacity:.55;
    }

}

.market-bottom strong{
    color:#fff;
}


/* =====================================================
   SECTIONS
===================================================== */

.section{

    padding:
        110px 7%;

    position:relative;
}

.dark-section{

    background:
        linear-gradient(
            180deg,
            rgba(4,8,23,.4),
            rgba(0,0,0,.12)
        );

    border-top:
        1px solid
        rgba(0,200,255,.07);

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

.section-heading{

    max-width:780px;

    margin:
        0
        auto
        65px;

    text-align:center;
}

.section-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--cyan);

    font-family:var(--display);

    font-size:10px;

    letter-spacing:2px;

    margin-bottom:15px;
}

.section-heading h2{

    font-family:var(--display);

    font-size:
        clamp(34px,5vw,62px);

    line-height:1.1;

    margin-bottom:18px;
}

.section-heading h2 span{

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--purple),
            var(--pink)
        );

    -webkit-background-clip:text;

    color:transparent;
}

.section-heading p{

    color:var(--muted);

    line-height:1.8;

    font-size:15px;
}


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

.about-grid{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap:20px;

    max-width:1200px;

    margin:auto;
}

.about-card{

    min-height:260px;

    padding:30px;

    border-radius:var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(10,20,48,.82),
            rgba(3,7,20,.78)
        );

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

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

    transition:.4s;
}

.about-card:before{

    content:"";

    position:absolute;

    width:150px;
    height:150px;

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

    right:-50px;
    top:-50px;
}

.about-card:hover{

    transform:translateY(-8px);

    border-color:
        rgba(0,220,255,.5);

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

.card-icon{

    width:55px;
    height:55px;

    border-radius:16px;

    display:grid;

    place-items:center;

    color:var(--cyan);

    background:rgba(0,210,255,.08);

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

    font-size:20px;

    margin-bottom:24px;
}

.card-icon.purple{
    color:#d36cff;
    background:rgba(170,0,255,.08);
}

.card-icon.gold{
    color:var(--gold);
    background:rgba(255,200,0,.08);
}

.about-card h3{

    font-family:var(--display);

    font-size:20px;

    margin-bottom:13px;
}

.about-card p{

    color:#8995b0;

    line-height:1.7;

    font-size:14px;
}

.card-line{

    width:70px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            transparent
        );

    margin:25px 0;
}

.about-points{

    display:grid;

    gap:12px;
}

.about-points div{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    color:#c7d1e7;
}

.about-points i{
    color:var(--green);
}


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

.trading-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}

.trading-card{

    min-height:650px;

    padding:35px;

    border-radius:30px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,39,.95),
            rgba(3,5,17,.95)
        );

    border:1px solid;

    transition:.5s;
}

.option-card{
    border-color:rgba(0,190,255,.3);
}

.forex-card{
    border-color:rgba(235,60,255,.3);
}

.trading-card:hover{

    transform:translateY(-10px);

}

.option-card:hover{

    box-shadow:
        0 25px 80px
        rgba(0,190,255,.14);
}

.forex-card:hover{

    box-shadow:
        0 25px 80px
        rgba(240,40,255,.14);
}

.platform-number{

    position:absolute;

    top:25px;
    right:28px;

    width:55px;
    height:55px;

    border-radius:15px;

    display:grid;

    place-items:center;

    font-family:var(--display);

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

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

    color:var(--cyan);
}

.forex-card .platform-number{

    color:#ff69ed;

    background:rgba(255,0,220,.08);

    border-color:rgba(255,0,220,.3);
}

.platform-icon{

    width:65px;
    height:65px;

    display:grid;

    place-items:center;

    border-radius:19px;

    font-size:26px;

    color:var(--cyan);

    background:rgba(0,200,255,.08);

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

    margin-bottom:25px;
}

.forex-card .platform-icon{

    color:#ff64e9;

    background:rgba(255,0,220,.08);

    border-color:rgba(255,0,220,.25);
}

.platform-label{

    font-size:10px;

    letter-spacing:2px;

    color:#71809f;
}

.trading-card h3{

    font-family:var(--display);

    font-size:34px;

    margin:
        10px
        0
        14px;
}

.trading-card p{

    color:#8793ad;

    line-height:1.75;

    font-size:14px;
}

.chart-box{

    height:270px;

    margin-top:30px;

    position:relative;

    border-radius:18px;

    overflow:hidden;

    background:
        rgba(0,20,40,.7);

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

.chart-grid{

    position:absolute;

    inset:0;

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

    background-size:35px 35px;
}

.candles{

    position:absolute;

    inset:40px 25px 30px;

    display:flex;

    align-items:flex-end;

    gap:13px;
}

.candles i{

    width:12px;

    position:relative;

    background:
        linear-gradient(
            to top,
            var(--cyan),
            var(--blue)
        );

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

.candles i:nth-child(even){

    background:
        linear-gradient(
            to top,
            var(--pink),
            var(--purple)
        );
}

.line-svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}

.line-svg polyline{

    fill:none;

    stroke:#00efff;

    stroke-width:5;

    filter:
        drop-shadow(
            0 0 7px
            rgba(0,230,255,.8)
        );
}

.platform-footer{

    display:flex;

    gap:10px;

    margin-top:20px;

    flex-wrap:wrap;
}

.platform-footer span{

    padding:10px 13px;

    border-radius:50px;

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

    color:#9eabc5;

    font-size:10px;
}

.platform-footer i{
    margin-right:5px;
}


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

.forex-globe{

    height:270px;

    margin-top:30px;

    position:relative;

    display:grid;

    place-items:center;
}

.forex-world{

    width:205px;
    height:205px;

    border-radius:50%;

    position:relative;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(80,150,255,.35),
            #05091a 65%
        );

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

    box-shadow:
        0 0 55px
        rgba(200,0,255,.2);

    overflow:hidden;
}

.world-lines{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 49%,
            rgba(0,220,255,.25) 50%,
            transparent 51%
        ),
        linear-gradient(
            0deg,
            transparent 49%,
            rgba(0,220,255,.25) 50%,
            transparent 51%
        );

    background-size:45px 45px;

    transform:rotate(20deg);

    animation:worldRotate 8s linear infinite;
}

@keyframes worldRotate{

    to{
        transform:
            rotate(20deg)
            scale(1.15);
    }

}

.currency{

    position:absolute;

    width:45px;
    height:45px;

    border-radius:50%;

    display:grid;

    place-items:center;

    font-family:var(--display);

    font-size:18px;

    background:#08091c;

    border:1px solid;

    animation:currencyFloat 3s ease-in-out infinite;
}

@keyframes currencyFloat{

    50%{
        transform:translateY(-8px);
    }

}

.usd{

    top:5%;
    left:12%;

    color:var(--cyan);

    border-color:var(--cyan);
}

.eur{

    top:7%;
    right:10%;

    color:#ff62df;

    border-color:#ff62df;
}

.gbp{

    bottom:7%;
    left:10%;

    color:#b86aff;

    border-color:#b86aff;
}

.jpy{

    bottom:5%;
    right:12%;

    color:var(--pink);

    border-color:var(--pink);
}

.forex-bars{

    position:absolute;

    bottom:28px;

    right:30px;

    display:flex;

    align-items:flex-end;

    gap:5px;
}

.forex-bars span{

    width:7px;

    background:
        linear-gradient(
            to top,
            var(--pink),
            var(--cyan)
        );

    box-shadow:
        0 0 10px rgba(0,220,255,.5);
}

.forex-bars span:nth-child(1){height:30px}
.forex-bars span:nth-child(2){height:50px}
.forex-bars span:nth-child(3){height:40px}
.forex-bars span:nth-child(4){height:70px}
.forex-bars span:nth-child(5){height:60px}
.forex-bars span:nth-child(6){height:90px}


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

.fund-hero{

    max-width:1200px;

    margin:
        0
        auto
        40px;

    padding:55px;

    border-radius:32px;

    display:grid;

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

    gap:60px;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            rgba(9,25,48,.9),
            rgba(5,5,23,.95)
        );

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

    box-shadow:
        0 0 70px
        rgba(0,170,255,.08);

    overflow:hidden;

    position:relative;
}

.fund-hero:before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    left:-150px;
    top:-150px;

    background:
        radial-gradient(
            circle,
            rgba(0,230,255,.12),
            transparent 65%
        );
}

.fund-visual{

    position:relative;

    display:grid;

    place-items:center;

    min-height:330px;
}

.utilization-ring{

    width:270px;
    height:270px;

    border-radius:50%;

    position:relative;

    display:grid;

    place-items:center;

    background:
        conic-gradient(
            var(--cyan),
            var(--purple),
            var(--pink),
            var(--cyan)
        );

    animation:spinRing 10s linear infinite;
}

@keyframes spinRing{

    to{
        transform:rotate(360deg);
    }

}

.utilization-ring:before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    background:#050917;

}

.ring-progress{

    position:absolute;

    inset:23px;

    border-radius:50%;

    border:
        1px dashed
        rgba(0,220,255,.3);
}

.ring-center{

    position:relative;

    z-index:2;

    text-align:center;

    animation:
        counterSpin
        10s
        linear
        infinite;
}

@keyframes counterSpin{

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

}

.ring-center strong{

    display:block;

    font-family:var(--display);

    font-size:52px;

    color:var(--green);

    text-shadow:
        0 0 25px
        rgba(50,255,136,.45);
}

.ring-center span{

    color:#7787a9;

    font-size:9px;

    letter-spacing:2px;

    line-height:1.6;
}

.fund-coins{

    position:absolute;

    bottom:10px;
    right:15%;

    font-size:70px;

    color:var(--gold);

    filter:
        drop-shadow(
            0 0 20px
            rgba(255,200,0,.35)
        );

    animation:float 3.5s ease-in-out infinite;
}

.fund-content h2{

    font-family:var(--display);

    font-size:
        clamp(35px,5vw,58px);

    line-height:1.1;

    margin-bottom:20px;
}

.fund-content h2 span{

    display:block;

    color:var(--cyan);

    text-shadow:
        0 0 20px
        rgba(0,220,255,.25);
}

.fund-content p{

    color:#8d99b2;

    line-height:1.8;

    max-width:600px;
}

.fund-highlight{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

    padding:18px;

    border-radius:15px;

    background:
        rgba(0,220,255,.05);

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

.fund-highlight strong{

    font-family:var(--display);

    font-size:35px;

    color:var(--gold);
}

.fund-highlight span{

    color:#b8c4da;

    font-size:12px;

    line-height:1.5;
}


/* =====================================================
   UTILIZATION CARDS
===================================================== */

.utilization-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:18px;
}

.util-card{

    min-height:300px;

    padding:28px;

    border-radius:23px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(9,18,43,.9),
            rgba(3,5,17,.9)
        );

    border:1px solid;

    transition:.4s;
}

.util-card:hover{

    transform:
        translateY(-8px)
        scale(1.015);
}

.util-card i{

    font-size:28px;

    margin:
        25px
        0
        20px;
}

.util-number{

    position:absolute;

    right:20px;
    top:18px;

    font-family:var(--display);

    font-size:11px;

    opacity:.5;
}

.util-card h3{

    font-family:var(--display);

    font-size:17px;

    margin-bottom:12px;
}

.util-card p{

    color:#7f8ca8;

    font-size:12px;

    line-height:1.7;
}

.util-card .percentage{

    display:block;

    font-family:var(--display);

    font-size:26px;

    margin-top:20px;
}

.util-card small{

    display:block;

    color:#6e7b96;

    margin-top:6px;

    font-size:10px;
}

.blue{
    border-color:rgba(0,200,255,.25);
}
.blue i,
.blue .percentage{
    color:var(--cyan);
}

.purple{
    border-color:rgba(190,70,255,.3);
}
.purple i,
.purple .percentage{
    color:#d66cff;
}

.green{
    border-color:rgba(60,255,130,.25);
}
.green i,
.green .percentage{
    color:var(--green);
}

.gold{
    border-color:rgba(255,200,30,.3);
}
.gold i,
.gold .percentage{
    color:var(--gold);
}

.cyan{
    border-color:rgba(0,255,240,.3);
}
.cyan i,
.cyan .percentage{
    color:#00fff0;
}

.pink{
    border-color:rgba(255,50,210,.3);
}
.pink i,
.pink .percentage{
    color:#ff4be2;
}


/* =====================================================
   CALCULATION
===================================================== */

.calculation-flow{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr
        60px
        1fr
        60px
        1fr;

    align-items:center;

    gap:15px;
}

.calc-card{

    padding:35px 25px;

    min-height:230px;

    border-radius:24px;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(10,22,47,.9),
            rgba(3,6,19,.9)
        );

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

    transition:.4s;
}

.calc-card:hover{
    transform:translateY(-7px);
}

.calc-card.active{

    border-color:var(--cyan);

    box-shadow:
        0 0 45px
        rgba(0,220,255,.12);
}

.purple-calc{

    border-color:
        rgba(230,60,255,.3);
}

.calc-icon{

    width:55px;
    height:55px;

    margin:
        0
        auto
        18px;

    display:grid;

    place-items:center;

    border-radius:16px;

    color:var(--cyan);

    background:rgba(0,210,255,.08);
}

.calc-card span{

    display:block;

    color:#8997b2;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.calc-card strong{

    display:block;

    font-family:var(--display);

    font-size:34px;

    margin:12px 0;

    color:#fff;
}

.calc-card small{

    color:#64718c;

    font-size:10px;
}

.flow-arrow{

    text-align:center;

    color:var(--cyan);

    font-size:23px;

    animation:
        arrowPulse
        1.5s
        infinite;
}

@keyframes arrowPulse{

    50%{
        transform:translateX(7px);
    }

}

.distribution{

    max-width:1200px;

    margin:
        45px
        auto
        0;
}

.distribution-heading{

    padding:17px 25px;

    border-radius:
        15px
        15px
        0
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0,190,255,.18),
            rgba(110,70,255,.14)
        );

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

    font-family:var(--display);

    letter-spacing:1px;

    font-size:13px;
}

.distribution-grid{

    display:grid;

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

    gap:1px;

    background:
        rgba(0,220,255,.12);

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

    border-top:0;
}

.distribution-grid div{

    min-height:170px;

    padding:25px 15px;

    text-align:center;

    background:#050a1b;
}

.distribution-grid i{

    display:block;

    font-size:25px;

    color:var(--cyan);

    margin-bottom:18px;
}

.distribution-grid strong{

    display:block;

    font-family:var(--display);

    font-size:21px;

    margin-bottom:8px;
}

.distribution-grid span{

    color:#74819c;

    font-size:10px;
}


/* =====================================================
   LEVELS
===================================================== */

.levels-container{

    max-width:1200px;

    margin:auto;
}

.levels-intro{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;
}

.level-stat{

    padding:25px;

    border-radius:18px;

    background:
        rgba(8,16,37,.7);

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

    text-align:center;
}

.level-stat strong{

    display:block;

    font-family:var(--display);

    color:var(--cyan);

    font-size:28px;
}

.level-stat span{

    color:#71809b;

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.level-track{

    display:grid;

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

    gap:12px;
}

.level-item{

    min-height:125px;

    padding:17px 12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            rgba(8,18,40,.9),
            rgba(4,7,20,.9)
        );

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

    transition:.3s;
}

.level-item:hover{

    transform:translateY(-6px);

    border-color:var(--cyan);

}

.level-item span{

    font-family:var(--display);

    font-size:9px;

    color:#6e7c98;

    margin-bottom:10px;
}

.level-item strong{

    color:#fff;

    font-size:15px;

    word-break:break-word;
}

.level-item small{

    color:var(--cyan);

    font-size:9px;

    margin-top:6px;
}


/* =====================================================
   TIMELINE
===================================================== */

.timeline{

    max-width:1050px;

    margin:auto;

    position:relative;
}

.timeline-line{

    position:absolute;

    left:50%;

    top:0;
    bottom:0;

    width:2px;

    background:
        linear-gradient(
            to bottom,
            var(--cyan),
            var(--purple),
            var(--pink),
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(0,220,255,.4);
}

.timeline-item{

    width:50%;

    padding:
        0
        55px
        65px
        0;

    position:relative;

    text-align:right;
}

.timeline-item.reverse{

    margin-left:50%;

    padding:
        0
        0
        65px
        55px;

    text-align:left;
}

.timeline-icon{

    position:absolute;

    top:0;

    width:60px;
    height:60px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#070d21;

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

    color:var(--cyan);

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

    z-index:2;
}

.timeline-item:not(.reverse) .timeline-icon{
    right:-30px;
}

.timeline-item.reverse .timeline-icon{

    left:-30px;

    color:#ff55e6;

    border-color:#ff55e6;

    box-shadow:
        0 0 25px
        rgba(255,50,220,.25);
}

.timeline-date{

    color:var(--gold);

    font-family:var(--display);

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:12px;
}

.timeline-content{

    padding:25px;

    border-radius:20px;

    background:
        rgba(7,14,34,.8);

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

    transition:.35s;
}

.timeline-content:hover{

    transform:translateY(-5px);

    border-color:
        rgba(0,220,255,.4);
}

.timeline-content span{

    color:var(--cyan);

    font-size:9px;

    letter-spacing:2px;
}

.timeline-content h3{

    font-family:var(--display);

    font-size:20px;

    margin:
        9px
        0
        10px;
}

.timeline-content p{

    color:#77859f;

    font-size:12px;

    line-height:1.6;
}


/* =====================================================
   NOTICE
===================================================== */

.notice-box{

    max-width:1100px;

    margin:auto;

    padding:45px;

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(8,14,34,.96),
            rgba(3,5,17,.98)
        );

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

    box-shadow:
        0 0 80px
        rgba(0,150,255,.08);
}

.notice-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:25px;

    text-align:center;
}

.notice-symbol{

    width:70px;
    height:70px;

    border-radius:20px;

    display:grid;

    place-items:center;

    color:var(--gold);

    font-size:28px;

    background:
        rgba(255,190,0,.08);

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

    box-shadow:
        0 0 30px
        rgba(255,190,0,.12);
}

.notice-header span{

    color:#7d8ba6;

    font-size:9px;

    letter-spacing:3px;
}

.notice-header h2{

    font-family:var(--display);

    font-size:50px;

    color:var(--gold);

    text-shadow:
        0 0 25px
        rgba(255,200,0,.25);
}

.update-title{

    text-align:center;

    padding:18px;

    border-radius:15px;

    margin-bottom:20px;

    font-family:var(--display);

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

    background:
        linear-gradient(
            90deg,
            rgba(0,210,255,.08),
            rgba(180,0,255,.08)
        );

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

.update-title span{

    color:var(--gold);
}

.updates-list{

    display:grid;

    gap:12px;
}

.update-row{

    display:grid;

    grid-template-columns:110px 1fr;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:17px;

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

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

    transition:.3s;
}

.update-row:hover{

    transform:translateX(5px);

    border-color:
        rgba(0,220,255,.4);
}

.update-icon{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--cyan);

}

.update-icon span{

    font-family:var(--display);

    font-size:12px;
}

.update-icon i{

    font-size:22px;
}

.update-row p{

    color:#aab6ce;

    font-size:13px;

    line-height:1.6;
}

.update-row strong{
    color:var(--cyan);
}

.purple-row{
    border-color:rgba(220,50,255,.18);
}
.purple-row strong{
    color:#e064ff;
}

.green-row{
    border-color:rgba(60,255,130,.18);
}
.green-row strong{
    color:var(--green);
}

.gold-row{
    border-color:rgba(255,200,0,.18);
}
.gold-row strong{
    color:var(--gold);
}

.cyan-row{
    border-color:rgba(0,240,255,.18);
}

.pink-row{
    border-color:rgba(255,50,220,.18);
}
.pink-row strong{
    color:#ff64e9;
}

.blue-row{
    border-color:rgba(0,150,255,.18);
}


/* =====================================================
   LEADERSHIP
===================================================== */

.founder-card{

    max-width:900px;

    margin:
        0
        auto
        30px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:22px;

    border-radius:25px;

    background:
        linear-gradient(
            110deg,
            rgba(0,150,255,.10),
            rgba(160,0,255,.08)
        );

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

.founder-icon{

    width:70px;
    height:70px;

    border-radius:20px;

    display:grid;

    place-items:center;

    font-size:25px;

    color:var(--gold);

    background:
        rgba(255,200,0,.08);

    border:
        1px solid
        rgba(255,200,0,.3);
}

.founder-card span{

    color:#74819d;

    font-size:9px;

    letter-spacing:2px;
}

.founder-card h3{

    font-family:var(--display);

    font-size:24px;

    margin-top:5px;
}

.founder-badge{

    margin-left:auto;

    padding:9px 14px;

    border-radius:50px;

    font-size:9px;

    letter-spacing:1px;

    color:var(--gold);

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

    background:
        rgba(255,200,0,.05);
}

.partners-grid{

    max-width:1100px;

    margin:auto;

    display:grid;

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

    gap:15px;
}

.partner-card{

    min-height:180px;

    padding:25px;

    border-radius:20px;

    position:relative;

    background:
        rgba(7,14,33,.8);

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

    transition:.4s;
}

.partner-card:hover{

    transform:translateY(-8px);

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

    box-shadow:
        0 15px 45px
        rgba(0,170,255,.1);
}

.partner-card > span{

    position:absolute;

    right:15px;
    top:15px;

    color:#5e6c88;

    font-family:var(--display);

    font-size:9px;
}

.partner-card i{

    color:var(--cyan);

    font-size:22px;

    margin-bottom:25px;
}

.partner-card h3{

    font-size:15px;

    margin-bottom:7px;
}

.partner-card small{

    color:#6e7b96;

    font-size:10px;
}


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

.cta-section{

    padding:
        130px 7%;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0,190,255,.13),
            transparent 50%
        );
}

.cta-glow{

    position:absolute;

    width:600px;
    height:300px;

    left:50%;
    top:50%;

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

    background:
        radial-gradient(
            ellipse,
            rgba(150,0,255,.13),
            transparent 70%
        );

    filter:blur(30px);

    pointer-events:none;
}

.cta-content{

    position:relative;

    max-width:850px;

    margin:auto;
}

.cta-icon{

    width:80px;
    height:80px;

    margin:
        0
        auto
        25px;

    display:grid;

    place-items:center;

    border-radius:25px;

    font-size:30px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple),
            var(--pink)
        );

    box-shadow:
        0 0 50px
        rgba(0,180,255,.2);
}

.cta-content h2{

    font-family:var(--display);

    font-size:
        clamp(35px,6vw,70px);

    line-height:1.15;

    margin:
        10px
        0
        20px;
}

.cta-content h2 span{

    color:var(--cyan);
}

.cta-content p{

    color:#8b98b1;

    line-height:1.8;

    max-width:650px;

    margin:
        0
        auto
        30px;
}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:13px;

    flex-wrap:wrap;
}


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

.footer{

    padding:
        55px 7%
        25px;

    background:#01030a;

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

.footer-main{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    gap:40px;
}

.footer-brand p{

    margin-top:15px;

    color:#62718e;

    font-size:10px;

    letter-spacing:2px;
}

.footer-links{

    display:flex;

    gap:80px;
}

.footer-links h4{

    font-family:var(--display);

    font-size:11px;

    margin-bottom:18px;

    color:#fff;
}

.footer-links div{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.footer-links a{

    color:#677590;

    font-size:11px;

    transition:.3s;
}

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

.footer-bottom{

    max-width:1200px;

    margin:
        50px
        auto
        0;

    padding-top:20px;

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

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

    color:#56647e;

    font-size:9px;

    letter-spacing:1px;
}

.footer-url{

    color:var(--cyan);
}


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

@media(max-width:1100px){

    .nav-links{
        display:none;
    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding-top:140px;
    }

    .hero-content{
        margin:auto;
    }

    .hero-description{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
    }

    .hero-visual{
        min-height:500px;
    }

    .about-grid{

        grid-template-columns:
            1fr
            1fr;
    }

    .large-card{
        grid-column:1/-1;
    }

    .fund-hero{

        grid-template-columns:1fr;

        text-align:center;
    }

    .fund-content p{
        margin:auto;
    }

    .fund-highlight{
        justify-content:center;
        max-width:500px;
        margin-left:auto;
        margin-right:auto;
    }

    .level-track{
        grid-template-columns:
            repeat(4,1fr);
    }

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

}


/* TABLET */

@media(max-width:800px){

    .section{
        padding:80px 5%;
    }

    .hero{
        padding-left:5%;
        padding-right:5%;
    }

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

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

    .calculation-flow{

        grid-template-columns:1fr;

        max-width:500px;
    }

    .flow-arrow{

        transform:rotate(90deg);

    }

    @keyframes arrowPulse{

        50%{
            transform:
                rotate(90deg)
                translateX(7px);
        }

    }

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

    .distribution-grid div:last-child{
        grid-column:1/-1;
    }

    .timeline-line{
        left:25px;
    }

    .timeline-item,
    .timeline-item.reverse{

        width:100%;

        margin-left:0;

        padding:
            0
            0
            45px
            70px;

        text-align:left;
    }

    .timeline-item:not(.reverse) .timeline-icon,
    .timeline-item.reverse .timeline-icon{

        left:-5px;
        right:auto;
    }

    .update-row{
        grid-template-columns:90px 1fr;
    }

    .footer-main{
        flex-direction:column;
    }

}


/* MOBILE */

@media(max-width:560px){

    .navbar{
        padding:0 5%;
    }

    .nav-btn{
        display:none;
    }

    .hero{
        padding-top:125px;
    }

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

    .hero-stats{

        gap:20px;

        flex-wrap:wrap;
    }

    .hero-visual{
        min-height:390px;
    }

    .globe{
        width:320px;
    }

    .coin{

        width:55px;
        height:55px;

        font-size:20px;
    }

    .market-card{
        width:230px;
    }

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

    .large-card{
        grid-column:auto;
    }

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

    .fund-hero{
        padding:30px 20px;
    }

    .utilization-ring{
        width:220px;
        height:220px;
    }

    .fund-coins{
        right:5%;
        font-size:55px;
    }

    .levels-intro{
        grid-template-columns:1fr;
    }

    .level-track{
        grid-template-columns:
            repeat(2,1fr);
    }

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

    .distribution-grid div:last-child{
        grid-column:auto;
    }

    .notice-box{
        padding:25px 15px;
    }

    .notice-header h2{
        font-size:38px;
    }

    .notice-symbol{
        width:55px;
        height:55px;
        font-size:21px;
    }

    .update-row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .update-icon{
        justify-content:flex-start;
    }

    .founder-card{
        flex-wrap:wrap;
    }

    .founder-badge{
        margin-left:0;
    }

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

    .footer-links{
        gap:40px;
    }

    .footer-bottom{
        flex-direction:column;
    }

}