/*======================================
        LPS NODE TRADING HUB
            PART 1
======================================*/

:root{

--bg:#070811;
--bg2:#111324;

--primary:#3B82F6;
--secondary:#8b5cf6;
--blue:#32d9ff;
--green:#28d97b;

--text:#ffffff;
--text2:#c8c8c8;

--glass:rgba(255,255,255,.08);
--border:rgba(255,255,255,.12);

--radius:24px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:linear-gradient(
160deg,
#080810,
#101425,
#080811
);

color:white;

overflow-x:hidden;

}

/*==========================
Scrollbar
==========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
var(--primary),
var(--secondary)
);

border-radius:20px;

}

/*==========================
Container
==========================*/

.container{

width:min(1200px,92%);
margin:auto;

}

/*==========================
Animated Background
==========================*/

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:-2;

}

.circle{

position:absolute;

border-radius:50%;

filter:blur(90px);

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

}

.one{

width:360px;
height:360px;

background:#3B82F6;

top:-120px;
left:-120px;

}

.two{

width:300px;
height:300px;

background:#7c3aed;

right:-80px;
top:220px;

animation-delay:2s;

}

.three{

width:420px;
height:420px;

background:#00d4ff;

left:40%;
bottom:-170px;

animation-delay:5s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(45px);

}

100%{

transform:translateY(0);

}

}

/*==========================
Header
==========================*/

header{

position:sticky;

top:0;

z-index:999;

background:rgba(8,8,20,.6);

backdrop-filter:blur(20px);

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

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

/*==========================
Logo
==========================*/

.logo{

font-size:30px;

font-weight:800;

text-decoration:none;

color:white;

letter-spacing:1px;

}

.logo span{

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*==========================
Navbar
==========================*/

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

position:relative;

}

nav a:hover,
nav a.active{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;
height:2px;

background:var(--primary);

transition:.3s;

}

nav a:hover::after,
nav a.active::after{

width:100%;

}

/*==========================
Mobile Menu
==========================*/

.mobile-btn{

display:none;

font-size:30px;

cursor:pointer;

}

/*==========================
Hero
==========================*/

.hero{

padding:110px 20px 70px;

text-align:center;

}

.tag{

display:inline-block;

padding:10px 20px;

border-radius:50px;

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

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

margin-bottom:25px;

font-size:15px;

}

.hero h1{

font-size:64px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

background:linear-gradient(
90deg,
white,
#ff7bd2,
#8b5cf6
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

max-width:700px;

margin:auto;

font-size:19px;

line-height:1.8;

color:var(--text2);

}

/*==========================
Stats
==========================*/

.stats{

width:min(1200px,92%);

margin:50px auto;

display:grid;

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

gap:25px;

}

.stat{

background:var(--glass);

backdrop-filter:blur(20px);

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

padding:35px;

border-radius:var(--radius);

text-align:center;

transition:.35s;

}

.stat:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(255,0,160,.2);

}

.stat h2{

font-size:36px;

margin-bottom:8px;

}

.stat p{

color:#c4c4c4;

}

/*==========================
Controls
==========================*/

.controls{

width:min(1200px,92%);

margin:60px auto;

display:grid;

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

gap:20px;

}

.controls input{

padding:17px;

border:none;

outline:none;

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

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

border-radius:18px;

color:white;

font-size:16px;

transition:.3s;

}

.controls input::placeholder{

color:#bdbdbd;

}

.controls input:focus{

border-color:var(--primary);

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

}

.controls select{

padding:17px;

border:none;

outline:none;

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

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

border-radius:18px;

color:white;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.controls select:hover{

border-color:var(--primary);

}

.controls option{

background:#151527;

}

/*==========================
Section Title
==========================*/

.section-title{

width:min(1200px,92%);

margin:40px auto 25px;

font-size:34px;

font-weight:700;

}

/*==========================
Trade Grid
==========================*/

.trade-grid{

width:min(1200px,92%);

margin:auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:30px;

padding-bottom:70px;

}

/*==========================
Responsive
==========================*/

@media(max-width:991px){

.hero h1{

font-size:52px;

}

.stats{

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

}

.controls{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.mobile-btn{

display:block;

}

nav{

position:absolute;

top:100%;
left:0;

width:100%;

background:#111324;

display:none;

flex-direction:column;

padding:20px;

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

}

nav.active{

display:flex;

}

.hero{

padding:80px 20px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:16px;

}

.stats{

grid-template-columns:1fr;

}

.trade-grid{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.logo{

font-size:24px;

}

.hero h1{

font-size:34px;

}

.tag{

font-size:13px;

}

.controls input,
.controls select{

font-size:15px;

padding:15px;

}

.section-title{

font-size:28px;

}

}
/*======================================
        PART 2
    FEATURED & TRADE CARDS
======================================*/


/* Featured Trader */

.featured{

width:min(1200px,92%);
margin:60px auto;

}

.featured h2{

font-size:34px;
margin-bottom:30px;

}

.featured-card{

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

padding:35px;

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

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

backdrop-filter:blur(25px);

border-radius:30px;

transition:.4s;

position:relative;

overflow:hidden;

}

.featured-card:hover{

transform:translateY(-8px);

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

}

.featured-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

right:-120px;
top:-120px;

background:

radial-gradient(circle,

rgba(255,62,165,.25),

transparent 70%);

}

.featured-card img{

width:130px;
height:130px;

border-radius:50%;

object-fit:cover;

border:4px solid #3B82F6;

box-shadow:

0 0 30px rgba(255,62,165,.4);

}

.featured-card h3{

font-size:30px;

margin-bottom:10px;

}

.featured-card p{

margin:8px 0;

color:#d0d0d0;

}

.featured-card button{

margin-top:18px;

padding:14px 35px;

border:none;

border-radius:100px;

background:

linear-gradient(

90deg,

#3B82F6,

#8b5cf6

);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.featured-card button:hover{

transform:translateY(-4px);

box-shadow:

0 15px 35px rgba(255,62,165,.35);

}


/* Verified Badge */

.verified{

display:inline-flex;

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

width:24px;
height:24px;

margin-left:8px;

border-radius:50%;

background:#00c3ff;

font-size:14px;

color:white;

}


/* Online Badge */

.online{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 14px;

background:rgba(40,217,123,.1);

border:1px solid rgba(40,217,123,.2);

border-radius:100px;

font-size:14px;

}

.online::before{

content:"";

width:10px;
height:10px;

border-radius:50%;

background:#28d97b;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(2);

opacity:0;

}

}


/* Trade Card */

.trade-card{

position:relative;

overflow:hidden;

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

backdrop-filter:blur(25px);

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

border-radius:28px;

padding:25px;

transition:.35s;

}

.trade-card:hover{

transform:translateY(-10px);

border-color:#3B82F6;

box-shadow:

0 25px 70px rgba(255,0,150,.25);

}


/* Shine */

.trade-card::before{

content:"";

position:absolute;

top:-100%;

left:-50%;

width:70%;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.2),

transparent

);

transform:rotate(25deg);

transition:.8s;

}

.trade-card:hover::before{

left:160%;

}


/* Trader Header */

.trader-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.trader-header img{

width:70px;
height:70px;

border-radius:50%;

border:3px solid #8b5cf6;

object-fit:cover;

}

.trader-info{

flex:1;

}

.trader-info h3{

font-size:22px;

margin-bottom:6px;

}

.trader-info p{

font-size:14px;

color:#cfcfcf;

}


/* Rating */

.rating{

margin-top:8px;

font-size:18px;

color:#ffd700;

}


/* Trade Section */

.trade-box{

margin-top:22px;

padding:18px;

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

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

border-radius:18px;

}

.trade-box h4{

margin-bottom:15px;

font-size:18px;

color:#ff7bd2;

}


/* Brainrot Items */

.trade-items{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.trade-item{

display:flex;

align-items:center;

gap:10px;

padding:10px 15px;

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

border-radius:15px;

transition:.3s;

cursor:pointer;

}

.trade-item:hover{

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

transform:translateY(-3px);

}

.trade-item img{

width:42px;
height:42px;

border-radius:10px;

object-fit:cover;

}

.trade-item span{

font-size:14px;

}


/* Contact Button */

.contact-btn{

margin-top:25px;

width:100%;

padding:15px;

border:none;

border-radius:100px;

background:

linear-gradient(

90deg,

#3B82F6,

#8b5cf6

);

font-size:16px;

font-weight:700;

color:white;

cursor:pointer;

transition:.35s;

}

.contact-btn:hover{

transform:translateY(-3px);

box-shadow:

0 18px 45px rgba(255,62,165,.35);

}


/* Status */

.status{

display:inline-block;

padding:8px 14px;

border-radius:50px;

font-size:13px;

margin-top:15px;

background:rgba(40,217,123,.15);

color:#28d97b;

}


/* Card Footer */

.trade-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20px;

font-size:14px;

color:#cfcfcf;

}


/* Favorite */

.favorite{

width:42px;
height:42px;

border:none;

border-radius:50%;

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

color:white;

font-size:18px;

cursor:pointer;

transition:.3s;

}

.favorite:hover{

background:#3B82F6;

transform:scale(1.1);

}

.favorite.active{

background:#3B82F6;

box-shadow:

0 0 20px rgba(255,62,165,.45);

}


/* Mobile */

@media(max-width:768px){

.featured-card{

flex-direction:column;

text-align:center;

}

.featured-card img{

width:110px;
height:110px;

}

.trade-box{

padding:15px;

}

.trade-items{

justify-content:center;

}

.trade-footer{

flex-direction:column;

gap:15px;

}

}

@media(max-width:480px){

.trade-card{

padding:20px;

}

.trader-header{

flex-direction:column;

text-align:center;

}

.trader-info{

text-align:center;

}

.trade-item{

width:100%;

justify-content:center;

}

.featured h2{

font-size:28px;

}

}
/*======================================
        PART 3
LEADERBOARD • RECENT TRADES • FOOTER
======================================*/


/*=========================
Leaderboard
=========================*/

.leaderboard{

width:min(1200px,92%);
margin:80px auto;

}

.leaderboard h2{

font-size:34px;
margin-bottom:30px;

}

.leaderboard-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}

.leader-card{

position:relative;

padding:30px;

border-radius:25px;

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

backdrop-filter:blur(25px);

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

transition:.35s;

overflow:hidden;

}

.leader-card:hover{

transform:translateY(-10px);

border-color:#3B82F6;

box-shadow:

0 20px 60px rgba(255,0,150,.25);

}

.leader-card::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:260px;
height:260px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,62,165,.2),

transparent 70%);

}

.leader-card h3{

font-size:42px;

margin-bottom:15px;

background:linear-gradient(90deg,#ffd700,#ff9f1c);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.leader-card p{

font-size:22px;

font-weight:700;

margin-bottom:10px;

}

.leader-card span{

font-size:18px;

color:#ffd700;

}



/*=========================
Recent Trades
=========================*/

.recent{

width:min(1200px,92%);
margin:80px auto;

}

.recent h2{

font-size:34px;
margin-bottom:30px;

}

.recent-list{

display:flex;
flex-direction:column;
gap:20px;

}

.recent-list div{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 28px;

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

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

border-radius:20px;

transition:.3s;

}

.recent-list div:hover{

transform:translateX(8px);

border-color:#3B82F6;

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

}

.recent-list span{

color:#bcbcbc;

font-size:14px;

}



/*=========================
Statistics Panel
=========================*/

.trade-stats{

width:min(1200px,92%);
margin:80px auto;

display:grid;

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

gap:25px;

}

.trade-stat{

padding:35px;

text-align:center;

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

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

border-radius:22px;

transition:.35s;

}

.trade-stat:hover{

transform:translateY(-8px);

box-shadow:

0 15px 40px rgba(255,0,150,.25);

}

.trade-stat h2{

font-size:40px;

margin-bottom:10px;

}

.trade-stat p{

color:#cfcfcf;

}



/*=========================
Pagination
=========================*/

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin:70px auto;

}

.pagination button{

padding:14px 28px;

border:none;

border-radius:50px;

background:

linear-gradient(

90deg,

#3B82F6,

#8b5cf6

);

color:white;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.pagination button:hover{

transform:translateY(-3px);

box-shadow:

0 15px 40px rgba(255,62,165,.35);

}

.page-number{

font-size:18px;

font-weight:600;

}



/*=========================
Trade History
=========================*/

.history{

width:min(1200px,92%);
margin:90px auto;

}

.history h2{

font-size:34px;

margin-bottom:30px;

}

.history-table{

width:100%;

overflow:auto;

border-radius:22px;

}

.history-table table{

width:100%;

border-collapse:collapse;

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

}

.history-table th{

padding:18px;

background:#3B82F6;

color:white;

}

.history-table td{

padding:18px;

text-align:center;

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

}

.history-table tr:hover{

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

}



/*=========================
Footer
=========================*/

footer{

margin-top:100px;

padding:70px 20px;

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

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

}

footer h2{

font-size:36px;

text-align:center;

margin-bottom:15px;

background:

linear-gradient(

90deg,

#3B82F6,

#8b5cf6

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

footer p{

text-align:center;

color:#bdbdbd;

margin:10px 0;

}

.footer-links{

display:flex;

justify-content:center;

gap:35px;

margin:35px 0;

flex-wrap:wrap;

}

.footer-links a{

color:white;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#3B82F6;

}

.copyright{

opacity:.6;

font-size:14px;

}



/*=========================
Back To Top
=========================*/

.topButton{

position:fixed;

right:25px;
bottom:25px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:

linear-gradient(

90deg,

#3B82F6,

#8b5cf6

);

color:white;

font-size:22px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.35s;

z-index:999;

}

.topButton.show{

opacity:1;

pointer-events:auto;

}

.topButton:hover{

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

}



/*=========================
Responsive
=========================*/

@media(max-width:992px){

.trade-stats{

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

}

}

@media(max-width:768px){

.leaderboard-grid{

grid-template-columns:1fr;

}

.trade-stats{

grid-template-columns:1fr;

}

.recent-list div{

flex-direction:column;

gap:10px;

text-align:center;

}

.pagination{

flex-wrap:wrap;

}

.history-table{

overflow-x:auto;

}

}

@media(max-width:480px){

.leaderboard h2,
.recent h2,
.history h2{

font-size:28px;

}

.leader-card{

padding:22px;

}

.trade-stat{

padding:25px;

}

.pagination button{

width:100%;

}

}
/*======================================
        PART 4
 PREMIUM EFFECTS & ANIMATIONS
======================================*/


/* ==========================
   Loading Screen
========================== */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#070811;

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

z-index:99999;

transition:.5s;

}

#loader.hide{

opacity:0;
visibility:hidden;

}

.loader-logo{

font-size:48px;

font-weight:800;

background:linear-gradient(
90deg,
#3B82F6,
#8b5cf6,
#32d9ff
);

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

animation:loaderGlow 2s infinite;

}

.loader-bar{

width:260px;
height:8px;

margin-top:30px;

background:#18182a;

border-radius:50px;

overflow:hidden;

}

.loader-progress{

height:100%;
width:0%;

background:linear-gradient(
90deg,
#3B82F6,
#8b5cf6
);

animation:loading 2.8s linear forwards;

}

@keyframes loading{

100%{

width:100%;

}

}

@keyframes loaderGlow{

50%{

filter:drop-shadow(0 0 25px #3B82F6);

}

}



/* ==========================
   Floating Particles
========================== */

.particle{

position:fixed;

width:5px;
height:5px;

border-radius:50%;

background:white;

opacity:.25;

pointer-events:none;

animation:particleMove 18s linear infinite;

z-index:-1;

}

@keyframes particleMove{

0%{

transform:translateY(100vh);

}

100%{

transform:translateY(-120vh);

}

}



/* ==========================
   Cursor Glow
========================== */

.cursor-glow{

position:fixed;

width:300px;
height:300px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,62,165,.15),

transparent 70%);

filter:blur(35px);

pointer-events:none;

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

z-index:-1;

}



/* ==========================
   Toast Notification
========================== */

.toast{

position:fixed;

top:25px;
right:25px;

padding:18px 24px;

background:#141425;

border-left:5px solid #3B82F6;

border-radius:18px;

color:white;

font-weight:600;

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

transform:translateX(450px);

transition:.4s;

z-index:9999;

}

.toast.show{

transform:translateX(0);

}



/* ==========================
   Image Viewer
========================== */

.image-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

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

opacity:0;

pointer-events:none;

transition:.4s;

z-index:99999;

}

.image-modal.active{

opacity:1;

pointer-events:auto;

}

.image-modal img{

max-width:90%;

max-height:85%;

border-radius:20px;

box-shadow:0 20px 80px rgba(0,0,0,.6);

}



/* ==========================
   Discord Button
========================== */

.discord-float{

position:fixed;

left:25px;
bottom:25px;

width:60px;
height:60px;

display:flex;

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

border-radius:50%;

background:#5865F2;

color:white;

font-size:28px;

text-decoration:none;

transition:.35s;

box-shadow:0 20px 40px rgba(0,0,0,.4);

z-index:999;

}

.discord-float:hover{

transform:scale(1.12);

}



/* ==========================
   Animated Borders
========================== */

.trade-card{

overflow:hidden;

}

.trade-card::after{

content:"";

position:absolute;

top:-100%;
left:-60%;

width:70%;
height:260%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:rotate(25deg);

transition:.8s;

}

.trade-card:hover::after{

left:170%;

}



/* ==========================
   Rainbow Badge
========================== */

.rainbow{

background:

linear-gradient(

90deg,

red,

orange,

yellow,

lime,

cyan,

blue,

violet,

red

);

background-size:600%;

animation:rainbow 6s linear infinite;

}

@keyframes rainbow{

100%{

background-position:600%;

}

}



/* ==========================
   Glow Effect
========================== */

.trade-card:hover{

box-shadow:

0 0 20px rgba(255,62,165,.45),

0 0 50px rgba(139,92,246,.25),

0 30px 80px rgba(0,0,0,.45);

}



/* ==========================
   Image Animation
========================== */

.trade-card img{

transition:.45s;

}

.trade-card:hover img{

transform:scale(1.12) rotate(-4deg);

filter:

drop-shadow(0 15px 35px rgba(0,0,0,.45));

}



/* ==========================
   Button Shine
========================== */

button{

position:relative;

overflow:hidden;

}

button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.7s;

}

button:hover::before{

left:120%;

}



/* ==========================
   Hover Glow
========================== */

.trade-item:hover{

box-shadow:

0 0 20px rgba(255,62,165,.2);

}



/* ==========================
   Mobile
========================== */

@media(max-width:768px){

.loader-logo{

font-size:34px;

}

.discord-float{

width:52px;
height:52px;

font-size:24px;

left:18px;
bottom:18px;

}

.toast{

left:15px;
right:15px;

top:auto;
bottom:20px;

transform:translateY(150px);

}

.toast.show{

transform:translateY(0);

}

.image-modal img{

max-width:96%;

}

.cursor-glow{

display:none;

}

}



/* End Part 4 */

/*======================================
        PART 5
 ULTRA PREMIUM FINISH
======================================*/


/*==============================
Animated Background Overlay
==============================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(
135deg,
rgba(255,62,165,.05),
rgba(139,92,246,.05),
rgba(50,217,255,.05),
rgba(255,62,165,.05)
);

background-size:400% 400%;

animation:gradientMove 18s linear infinite;

pointer-events:none;

z-index:-3;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/*==============================
3D Cards
==============================*/

.trade-card{

transform-style:preserve-3d;

will-change:transform;

transition:

transform .35s,

box-shadow .35s,

border-color .35s;

}

.trade-card:hover{

transform:

perspective(1000px)

rotateX(4deg)

rotateY(-4deg)

translateY(-12px);

}


/*==============================
Featured Ribbon
==============================*/

.ribbon{

position:absolute;

top:18px;

right:-45px;

width:170px;

text-align:center;

padding:8px;

font-size:13px;

font-weight:700;

background:linear-gradient(
90deg,
gold,
#ffb700
);

color:#111;

transform:rotate(45deg);

box-shadow:0 8px 20px rgba(0,0,0,.25);

}


/*==============================
Verified Badge Glow
==============================*/

.verified{

box-shadow:

0 0 10px rgba(0,195,255,.6);

}


/*==============================
Live Update Badge
==============================*/

.live{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 14px;

border-radius:100px;

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

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

color:#1E3A8A;

font-size:14px;

font-weight:600;

}

.live::before{

content:"";

width:10px;
height:10px;

border-radius:50%;

background:#1E3A8A;

animation:livePulse 1s infinite;

}

@keyframes livePulse{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(2);

opacity:0;

}

}


/*==============================
Trade Success Badge
==============================*/

.success{

display:inline-block;

padding:8px 16px;

border-radius:50px;

background:rgba(40,217,123,.12);

color:#28d97b;

font-weight:600;

}


/*==============================
Danger Badge
==============================*/

.warning{

display:inline-block;

padding:8px 16px;

border-radius:50px;

background:rgba(255,70,70,.12);

color:#3B82F6;

font-weight:600;

}


/*==============================
Featured Trade Card
==============================*/

.trade-card.featured{

border:2px solid gold;

box-shadow:

0 0 25px rgba(255,215,0,.5),

0 0 60px rgba(255,215,0,.25);

}


/*==============================
Trade Counter
==============================*/

.trade-counter{

display:flex;

gap:15px;

margin-top:20px;

}

.trade-counter div{

flex:1;

padding:18px;

border-radius:18px;

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

text-align:center;

}

.trade-counter h4{

font-size:24px;

margin-bottom:6px;

}

.trade-counter p{

font-size:13px;

color:#cfcfcf;

}


/*==============================
Image Reflection
==============================*/

.trade-card img{

-webkit-box-reflect:

below 0px

linear-gradient(

transparent,

rgba(255,255,255,.05)

);

}


/*==============================
Card Title Hover
==============================*/

.trade-card h3{

transition:.35s;

}

.trade-card:hover h3{

color:#ff7bc8;

}


/*==============================
Premium Divider
==============================*/

.divider{

height:1px;

margin:25px 0;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.2),

transparent

);

}


/*==============================
Dark / Light Mode Ready
==============================*/

body.light{

background:#f3f5fa;

color:#222;

}

body.light .trade-card{

background:white;

color:#222;

border-color:#ddd;

}

body.light header{

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

}

body.light nav a{

color:#333;

}


/*==============================
Theme Toggle Button
==============================*/

.theme-toggle{

position:fixed;

right:25px;

top:90px;

width:55px;
height:55px;

border-radius:50%;

display:flex;

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

background:#222;

color:white;

cursor:pointer;

font-size:22px;

transition:.3s;

z-index:999;

}

.theme-toggle:hover{

transform:rotate(180deg);

}


/*==============================
Premium Scroll Animation
==============================*/

.reveal{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


/*==============================
Extra Mobile Polish
==============================*/

@media(max-width:768px){

.trade-card{

transform:none !important;

}

.ribbon{

display:none;

}

.theme-toggle{

right:15px;

top:75px;

width:48px;
height:48px;

font-size:18px;

}

.trade-counter{

flex-direction:column;

}

}


/*==============================
Very Small Phones
==============================*/

@media(max-width:400px){

.hero h1{

font-size:28px;

}

.trade-card{

padding:18px;

}

.trade-item{

font-size:13px;

}

}


/*======================================
END OF TRADING.CSS
======================================*/