/* ==========================================================
   ROBINRADAR v1.0
   Premium Dark UI
========================================================== */

:root{

--primary:#00C805;
--primary2:#1AFF6A;
--bg:#07090D;
--card:#10151F;
--card2:#141B26;
--text:#ffffff;
--muted:#8B95A7;
--border:#1E2734;
--shadow:0 15px 45px rgba(0,0,0,.45);

}

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

html{
overflow-x:hidden;
}

body{

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

background:var(--bg);

color:white;

overflow-x:hidden;

}

a{

text-decoration:none;

color:white;

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1400px,92%);

margin:auto;

}

/* ===========================
Background Blur
=========================== */

.background-blur{

position:fixed;

border-radius:50%;

filter:blur(140px);

z-index:-1;

opacity:.18;

}

.blur1{

width:420px;

height:420px;

background:#00C805;

top:-120px;

right:-120px;

}

.blur2{

width:350px;

height:350px;

background:#006D2C;

bottom:-100px;

left:-100px;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(18px);

background:rgba(8,11,16,.70);

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

}

.navbar{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-size:25px;

font-weight:800;

}

.logo img{

width:52px;

}

nav{

display:flex;

gap:35px;

}

nav a{

color:#d7dde7;

font-weight:600;

transition:.35s;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

height:2px;

width:0;

background:var(--primary);

transition:.35s;

}

nav a:hover::after{

width:100%;

}

.socials{

display:flex;

gap:18px;

}

.socials a{

font-size:19px;

transition:.3s;

}

.socials a:hover{

color:var(--primary);

transform:translateY(-4px);

}

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

.hero{

position:relative;

height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

opacity:.18;

transform:scale(1.08);

animation:zoomHero 24s linear infinite;

}

@keyframes zoomHero{

50%{

transform:scale(1.18);

}

100%{

transform:scale(1.08);

}

}

.hero-overlay{

position:absolute;

inset:0;

background:
/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats{

display:grid;

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

gap:25px;

}

.hero-stats div{

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

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

backdrop-filter:blur(18px);

border-radius:22px;

padding:28px;

transition:.35s;

}

.hero-stats div:hover{

transform:translateY(-10px);

border-color:var(--primary);

box-shadow:0 15px 40px rgba(0,200,5,.18);

}

.hero-stats h2{

font-size:34px;

color:var(--primary);

margin-bottom:8px;

}

.hero-stats span{

color:var(--muted);

}


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

section{

padding:110px 0;

}

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:45px;

}

.section-title h2{

font-size:42px;

font-weight:800;

display:flex;

gap:14px;

align-items:center;

}

.section-title i{

color:var(--primary);

}

.section-title a{

color:var(--primary);

font-weight:700;

}


/* ==========================================================
LIVE MARKET
========================================================== */

.market-grid{

display:grid;

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

gap:30px;

}

.market-card{

background:linear-gradient(180deg,#121925,#0C1018);

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

border-radius:24px;

padding:35px;

transition:.35s;

position:relative;

overflow:hidden;

}

.market-card::before{

content:"";

position:absolute;

left:-60px;

top:-60px;

width:160px;

height:160px;

background:rgba(0,200,5,.10);

border-radius:50%;

filter:blur(40px);

}

.market-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.market-card h3{

color:var(--muted);

font-size:18px;

margin-bottom:15px;

}

.market-card p{

font-size:36px;

font-weight:800;

}


/* ==========================================================
BREAKING NEWS
========================================================== */

.news-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

}

.news-card{

background:#101722;

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

border-radius:24px;

overflow:hidden;

transition:.4s;

}

.news-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

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

}

.news-card img{

height:350px;

width:100%;

object-fit:cover;

}

.news-content{

padding:35px;

}

.news-tag{

position:absolute;

margin:20px;

padding:8px 18px;

background:var(--primary);

color:#000;

font-weight:700;

border-radius:999px;

z-index:5;

}

.category{

display
/* ==========================================================
   WHALE TRACKER
========================================================== */

.whale-table{

background:#101722;

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

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

}

.whale-table table{

width:100%;

border-collapse:collapse;

}

.whale-table th{

background:#151D2A;

padding:24px;

text-align:left;

font-size:15px;

letter-spacing:.8px;

color:#00C805;

text-transform:uppercase;

}

.whale-table td{

padding:22px;

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

font-size:16px;

color:#d8dde7;

}

.whale-table tbody tr{

transition:.35s;

}

.whale-table tbody tr:hover{

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

}


/* ==========================================================
FEATURED PROJECTS
========================================================== */

.project-grid{

display:grid;

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

gap:30px;

}

.project-card{

background:linear-gradient(180deg,#121925,#0D121B);

padding:40px;

border-radius:26px;

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

text-align:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.project-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

top:-140px;

right:-90px;

filter:blur(40px);

}

.project-card:hover{

transform:translateY(-12px);

border-color:#00C805;

}

.project-card img{

width:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

}

.project-card h3{

font-size:26px;

margin-bottom:18px;

}

.project-card p{

color:var(--muted);

line-height:1.7;

margin-bottom:30px;

}

.project-card button{

background:#00C805;

color:black;

border:none;

padding:15px 34px;

border-radius:999px;

font-weight:800;

cursor:pointer;

transition:.35s;

}

.project-card button:hover{

transform:scale(1.05);

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

}


/* ==========================================================
LIVE STATS
========================================================== */

.stats{

background:#0B1018;

margin-top:100px;

}

.stats-grid{

display:grid;

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

gap:35px;

}

.stats-grid div{

text-align:center;

padding:45px;

background:#101722;

border-radius:24px;

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

transition:.35s;

}

.stats-grid div:hover{

transform:translateY(-10px);

border-color:#00C805;

}

.stats-grid h2{

font-size:54px;

color:#00C805;

margin-bottom:12px;

}

.stats-grid p{

font-size:18px;

color:#AAB5C5;

}


/* ==========================================================
ROADMAP
========================================================== */

.timeline{

display:flex;

justify-content:space-between;

gap:30px;

margin-top:60px;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

top:40px;

left:0;

width:100%;

height:3px;

background:#1F2937;

}

.step{

flex:1;

background:#101722;

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

padding:35px;

border-radius:24px;

text-align:center;

position:relative;

z-index:2;

transition:.35s;

}

.step::before{

content:"";

position:absolute;

top:-12px;

left:50%;

transform:translateX(-50%);

width:24px;

height:24px;

background:#00C805;

border-radius:50%;

}

.step:hover{

transform:translateY(-10px);

border-color:#00C805;

}

.step h3{

margin-bottom:18px;

font-size:24px;

}

.step p{

color:#9AA5B5;

}


/* ==========================================================
SECTION ANIMATION
========================================================== */

.market-card,
.news-card,
.small-news,
.token-card,
.project-card,
.step,
.stats-grid div{

transition:all .35s ease;

}

.market-card:hover,
.news-card:hover,
.token-card:hover,
.project-card:hover,
.step:hover{

box-shadow:

0 0 40px rgba(0,200,5,.18);

}
/* ==========================================================
LATEST ARTICLES
========================================================== */

.articles-grid{

display:grid;

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

gap:30px;

}

.article-card{

background:#101722;

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

border-radius:24px;

overflow:hidden;

transition:.35s;

}

.article-card:hover{

transform:translateY(-10px);

border-color:#00C805;

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

}

.article-card img{

height:220px;

width:100%;

object-fit:cover;

}

.article-content{

padding:30px;

}

.article-category{

display:inline-block;

padding:6px 14px;

border-radius:999px;

background:rgba(0,200,5,.12);

color:#00C805;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

.article-content h3{

font-size:28px;

margin-bottom:18px;

line-height:1.35;

}

.article-content p{

color:var(--muted);

line-height:1.8;

margin-bottom:20px;

}

.article-meta{

display:flex;

justify-content:space-between;

font-size:14px;

color:#9CA6B6;

}

/* ==========================================================
NEWSLETTER
========================================================== */

.newsletter-box{

background:linear-gradient(145deg,#101722,#171F2D);

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

border-radius:28px;

padding:70px;

text-align:center;

}

.newsletter-box h2{

font-size:48px;

margin-bottom:18px;

}

.newsletter-box p{

color:var(--muted);

font-size:18px;

margin-bottom:35px;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter input{

width:420px;

padding:18px;

border-radius:14px;

background:#0B1018;

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

color:white;

font-size:16px;

}

.newsletter button{

padding:18px 35px;

border:none;

background:#00C805;

border-radius:14px;

font-weight:800;

cursor:pointer;

transition:.3s;

}

.newsletter button:hover{

transform:translateY(-3px);

box-shadow:0 0 30px rgba(0,200,5,.35);

}

/* ==========================================================
FAQ
========================================================== */

.faq{

max-width:900px;

margin:auto;

}

.faq-item{

background:#101722;

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

border-radius:20px;

padding:28px;

margin-bottom:20px;

}

.faq-item h3{

font-size:22px;

margin-bottom:15px;

}

.faq-item p{

color:var(--muted);

line-height:1.8;

}

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

footer{

margin-top:120px;

padding:80px 0 40px;

background:#090D14;

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

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-logo{

width:70px;

margin-bottom:20px;

}

.footer-grid h4{

margin-bottom:20px;

font-size:20px;

}

.footer-grid a{

display:block;

margin-bottom:12px;

color:#9DA7B6;

transition:.3s;

}

.footer-grid a:hover{

color:#00C805;

padding-left:6px;

}

.footer-bottom{

margin-top:60px;

padding-top:30px;

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

text-align:center;

color:#798392;

}

/* ==========================================================
SCROLL BUTTON
========================================================== */

#scrollTop{

position:fixed;

right:35px;

bottom:35px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#00C805;

color:black;

font-size:22px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 15px 35px rgba(0,200,5,.35);

transition:.35s;

}

#scrollTop:hover{

transform:translateY(-6px);

}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#00C805;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#07090D;

}

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

@media(max-width:1200px){

.market-grid,
.token-grid,
.project-grid,
.stats-grid,
.articles-grid{

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

}

.hero h1{

font-size:56px;

}

.hero-stats{

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

}

.footer-grid{

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

}

}

@media(max-width:768px){

nav{

display:none;

}

.socials{

display:none;

}

.hero{

height:auto;

padding-top:140px;

padding-bottom:70px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.market-grid,
.token-grid,
.project-grid,
.stats-grid,
.articles-grid,
.hero-stats{

grid-template-columns:1fr;

}

.news-grid{

grid-template-columns:1fr;

}

.timeline{

flex-direction:column;

}

.timeline::before{

display:none;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter-box{

padding:40px 25px;

}

.newsletter input{

width:100%;

}

.section-title{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

}
linear-gradient(to bottom,
rgba(6,8,11,.35),
rgba(6,8,