body{

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

background:#08111f;

color:#fff;

overflow-x:hidden;

}

.custom-navbar{

background:rgba(5,12,24,.75);

backdrop-filter:blur(18px);

padding:18px 0;

transition:.3s;

}

.hero{

padding-top:120px;

background:

linear-gradient(rgba(6,10,30,.85),

rgba(6,10,30,.85)),

url('../images/hero-bg.jpg');

background-size:cover;

background-position:center;

}

.hero h1{

font-size:64px;

line-height:1.15;

}

.hero p{

color:#b8c1d8;

font-size:20px;

}

.btn-primary{

padding:15px 35px;

border-radius:12px;

}

.floating-image{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.footer{

padding:70px 0;

background:#050b18;

margin-top:100px;

}

.hero-section{

background:#08111f;

padding-top:120px;

padding-bottom:100px;

position:relative;

}

.hero-grid{

position:absolute;

inset:0;

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

background-size:40px 40px;

opacity:.25;

}

.hero-circle{

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:#14d8b3;

filter:blur(220px);

opacity:.15;

top:-250px;

right:-250px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:rgba(20,216,179,.08);

border:1px solid rgba(20,216,179,.35);

border-radius:40px;

color:#5ef4d2;

font-weight:600;

}

.hero-title{

font-size:64px;

font-weight:800;

line-height:1.05;

margin-top:30px;

}

.hero-title span{

color:#18ddb8;

}

.hero-text{

margin-top:30px;

font-size:20px;

color:#bfc8d7;

line-height:1.8;

max-width:620px;

}

.btn-teal{

background:#18ddb8;

color:#08111f;

padding:16px 34px;

font-weight:700;

border-radius:14px;

}

.btn-teal:hover{

background:#2ef5cf;

}

.hero-buttons{

margin-top:40px;

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-image{

border-radius:20px;

overflow:hidden;

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

box-shadow:0 0 60px rgba(24,221,184,.25);

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

}

@keyframes float{

50%{

transform:translateY(-18px);

}

}

.hero-section h3{

color:#18ddb8;

font-weight:700;

}

.hero-section small{

color:#9aa4b7;

}

.market-section{

background:#08111f;

padding-top:90px;

padding-bottom:90px;

}

.section-tag{

color:#18ddb8;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.section-title{

font-size:48px;

font-weight:800;

margin-top:12px;

}

.section-subtitle{

color:#94a3b8;

font-size:18px;

}

.market-card{

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

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

border-radius:18px;

padding:25px;

transition:.35s;

height:100%;

}

.market-card:hover{

border-color:#18ddb8;

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(24,221,184,.12);

}

.market-bottom{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}

.coin-logo{

width:44px;

height:44px;

border-radius:50%;

}

.market-card h5{

margin:0;

font-weight:700;

}

.market-card h3{

font-size:28px;

font-weight:700;

margin:0;

}

.positive{

color:#18ddb8;

font-weight:700;

}

.negative{

color:#ff5c75;

font-weight:700;

}

.loading-card{

height:160px;

border-radius:18px;

background:linear-gradient(90deg,#16202f,#1f2b3b,#16202f);

background-size:300%;

animation:loading 1.3s infinite;

}

@keyframes loading{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}

.sparkline{

width:120px;

height:36px;

}


.converter-section{

background:#0b1423;

}

.converter-card{

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

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

padding:45px;

border-radius:24px;

backdrop-filter:blur(18px);

}

.converter-input{

height:58px;

background:#101d31;

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

color:#fff;

font-size:18px;

}

.converter-input:focus{

background:#101d31;

border-color:#18ddb8;

box-shadow:0 0 0 .2rem rgba(24,221,184,.15);

color:#fff;

}

.converter-arrow{

text-align:center;

margin:25px 0;

font-size:36px;

color:#18ddb8;

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

}

@keyframes converterFloat{

50%{

transform:translateY(-8px);

}

}

.converter-result{

padding:25px;

border-radius:16px;

background:rgba(24,221,184,.08);

border:1px solid rgba(24,221,184,.25);

}

.converter-result h2{

margin:0;

font-size:40px;

font-weight:700;

color:#18ddb8;

}

.converter-result small{

display:block;

margin-top:10px;

color:#b7c2d3;

}

.converter-features{

list-style:none;

padding:0;

margin-top:35px;

}

.converter-features li{

margin-bottom:18px;

font-size:17px;

color:#c8d1df;

}

.converter-features i{

color:#18ddb8;

margin-right:10px;

}

/* ======================================
   TradingView Section
====================================== */

.trading-section{

background:#08111f;

padding-top:100px;

padding-bottom:100px;

}

.tv-card{

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

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

border-radius:22px;

overflow:hidden;

padding:0;

transition:.35s;

backdrop-filter:blur(18px);

}

.tv-card:hover{

border-color:#18ddb8;

box-shadow:0 20px 70px rgba(24,221,184,.18);

transform:translateY(-6px);

}

#tvAdvancedChart{

height:620px;

}

#tvMarketOverview,

#tvCryptoScreener{

height:420px;

}

@media(max-width:991px){

#tvAdvancedChart{

height:520px;

}

}

.tv-card{

position:relative;

}

.tv-card::before{

content:"Loading TradingView...";

position:absolute;

inset:0;

display:flex;

justify-content:center;

align-items:center;

font-size:15px;

color:#8fa4b9;

background:#08111f;

z-index:1;

}

.tv-card iframe{

position:relative;

z-index:2;

}


.features-section{

background:#0b1423;

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

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

}

.feature-card{

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

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

border-radius:20px;

padding:35px;

height:100%;

transition:.35s;

}

.feature-card:hover{

border-color:#18ddb8;

transform:translateY(-8px);

}

.feature-card i{

font-size:42px;

color:#18ddb8;

}

.feature-card h4{

margin-top:25px;

font-weight:700;

}

.feature-card p{

margin-top:15px;

color:#9aa7b9;

}


.plan-card{

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

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

padding:40px;

border-radius:22px;

height:100%;

position:relative;

}

.plan-card.featured{

border:2px solid #18ddb8;

box-shadow:0 0 40px rgba(24,221,184,.15);

}

.popular{

position:absolute;

top:-14px;

left:50%;

transform:translateX(-50%);

background:#18ddb8;

color:#08111f;

padding:6px 18px;

border-radius:40px;

font-weight:700;

font-size:12px;

}

.roi{

font-size:52px;

font-weight:700;

color:#18ddb8;

margin:25px 0;

}

.plan-card ul{

padding-left:18px;

}

.plan-card li{

margin-bottom:15px;

color:#b8c3d3;

}

.testimonial-section{

    background:#0f1421;

    padding:110px 0;

}

.section-label{

    display:inline-block;

    color:#2ee6d6;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.testimonial-title{

    color:#fff;

    font-size:58px;

    font-weight:700;

    margin-bottom:65px;

}

.testimonial-card{

    background:#0b1020;

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

    border-radius:22px;

    padding:36px;

    transition:.35s;

}

.testimonial-card:hover{

    border-color:#2ee6d6;

    transform:translateY(-8px);

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

}

.rating{

    color:#2ee6d6;

    font-size:20px;

    letter-spacing:3px;

}

.testimonial-text{

    color:#f3f4f6;

    font-size:20px;

    line-height:1.8;

    min-height:180px;

    margin-bottom:40px;

}

.testimonial-user{

    display:flex;

    align-items:center;

}

.testimonial-user img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    margin-right:18px;

}

.testimonial-user h5{

    color:#fff;

    font-size:30px;

    font-weight:700;

    margin-bottom:4px;

}

.testimonial-user span{

    color:#8f99ab;

    font-size:18px;

}

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

.cta-section{

    background:#070b17;

    padding:100px 0;

}

.cta-box{

    position:relative;

    overflow:hidden;

    background:#09111c;

    border:1px solid rgba(44,233,212,.35);

    border-radius:32px;

    padding:90px 60px;

}

/* Glow */

.cta-box::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-320px;

    bottom:-320px;

    background:radial-gradient(circle,
    rgba(44,233,212,.22) 0%,
    rgba(44,233,212,.10) 35%,
    transparent 72%);

    pointer-events:none;

}

/* subtle top glow */

.cta-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    180deg,
    rgba(44,233,212,.02),
    transparent 45%);

    pointer-events:none;

}

.cta-title{

    position:relative;

    z-index:2;

    font-size:72px;

    font-weight:800;

    line-height:1.1;

    color:#f4f7fb;

    margin-bottom:22px;

}

.cta-text{

    position:relative;

    z-index:2;

    color:#c2ccd9;

    font-size:22px;

    line-height:1.7;

    max-width:720px;

    margin:0 auto 48px;

}

.cta-btn{

    position:relative;

    z-index:2;

    background:#36d8cb;

    color:#08111f;

    font-weight:700;

    font-size:24px;

    padding:22px 44px;

    border-radius:18px;

    transition:.3s;

    min-width:300px;

}

.cta-btn:hover{

    background:#4be9dd;

    color:#08111f;

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(54,216,203,.30);

}

.cta-btn i{

    font-size:22px;

}

@media(max-width:992px){

.cta-box{

    padding:70px 35px;

}

.cta-title{

    font-size:48px;

}

.cta-text{

    font-size:18px;

}

.cta-btn{

    width:100%;

    min-width:auto;

}

}

@media(max-width:576px){

.cta-title{

    font-size:38px;

}

.cta-box{

    padding:55px 25px;

}

}

.video-wrapper{

    position: relative;

    width: 100%;

    height: 520px;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(53,216,203,.20);

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

}

.video-wrapper iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}

@media (max-width:992px){

    .video-wrapper{

        height:420px;

        margin-top:30px;

    }

}

@media (max-width:768px){

    .video-wrapper{

        height:320px;

    }

}

.market-section{

background:#08111f;

padding-top:90px;

padding-bottom:90px;

}

.section-tag{

color:#18ddb8;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.section-title{

font-size:48px;

font-weight:800;

margin-top:12px;

}

.section-subtitle{

color:#94a3b8;

font-size:18px;

}

.market-card{

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

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

border-radius:18px;

padding:25px;

transition:.35s;

height:100%;

}

.market-card:hover{

border-color:#18ddb8;

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(24,221,184,.12);

}

.market-bottom{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

}

.coin-logo{

width:44px;

height:44px;

border-radius:50%;

}

.market-card h5{

margin:0;

font-weight:700;

}

.market-card h3{

font-size:28px;

font-weight:700;

margin:0;

}

.positive{

color:#18ddb8;

font-weight:700;

}

.negative{

color:#ff5c75;

font-weight:700;

}

.loading-card{

height:160px;

border-radius:18px;

background:linear-gradient(90deg,#16202f,#1f2b3b,#16202f);

background-size:300%;

animation:loading 1.3s infinite;

}

@keyframes loading{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}

.sparkline{

width:120px;

height:36px;

}




.hero-grid,
.hero-glow,
.hero-circle,
.hero-circle-1,
.hero-circle-2{
    pointer-events: none;
}
/* 

.tv-card{

    background:#0d1523;

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

    border-radius:20px;

    overflow:hidden;

    min-height:500px;

} */