html{

scroll-behavior:smooth;

}
*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;

}

body{

background:#08111f;
overflow-x:hidden;

}

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 70px;

background:rgba(8,17,31,.8);

backdrop-filter:blur(20px);

z-index:1000;

}

.logo{

font-size:30px;

font-weight:700;

color:white;

}

.menu{

display:flex;

gap:40px;

}

.menu a{

text-decoration:none;

color:#d1d5db;

transition:.3s;

}

.menu a:hover{

color:#2563eb;

}

.nav-buttons{

display:flex;

gap:15px;

}

.login-btn{

text-decoration:none;

color:white;

padding:10px 20px;

border:1px solid #2563eb;

border-radius:30px;

}

.signup-btn{

background:#2563eb;

color:white;

text-decoration:none;

padding:10px 24px;

border-radius:30px;

transition:.3s;

}

.signup-btn:hover{

transform:translateY(-2px);

box-shadow:0 0 20px #2563eb;

}

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background:

radial-gradient(circle at top,#2563eb22,#08111f);

overflow:hidden;

}

.hero-content{

position:relative;

z-index:5;

max-width:850px;

}

.hero h1{

font-size:70px;

color:white;

font-weight:800;

line-height:1.1;

}

.hero span{

color:#3b82f6;

}

.hero p{

margin-top:30px;

font-size:22px;

color:#d1d5db;

line-height:1.8;

}

.hero-buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:20px;

}

.start-btn{

background:#2563eb;

padding:18px 35px;

border-radius:40px;

text-decoration:none;

color:white;

font-size:18px;

transition:.3s;

}

.learn-btn{

border:1px solid white;

padding:18px 35px;

border-radius:40px;

text-decoration:none;

color:white;

transition:.3s;

}

.start-btn:hover{

transform:translateY(-5px);

box-shadow:0 0 30px #2563eb;

}

.learn-btn:hover{

background:white;

color:black;

}

.floating{

position:absolute;

font-size:50px;

opacity:.12;

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

}

.floating1{

top:15%;

left:12%;

}

.floating2{

right:15%;

top:22%;

animation-delay:2s;

}

.floating3{

left:25%;

bottom:12%;

animation-delay:4s;

}

.floating4{

right:18%;

bottom:15%;

animation-delay:1s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0px);

}

}

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

.stats{

padding:90px 80px;

display:grid;

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

gap:30px;

background:#0b1424;

}

.stat-card{

background:#101d32;

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

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

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(37,99,235,.25);

}

.stat-card h2{

font-size:45px;

color:#3b82f6;

margin-bottom:15px;

}

.stat-card p{

color:#d1d5db;

font-size:18px;

}

/*==========================
        FEATURES
===========================*/

.features{

padding:100px 80px;

background:#08111f;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:48px;

color:white;

margin-bottom:15px;

}

.section-title p{

font-size:20px;

color:#9ca3af;

}

.feature-grid{

display:grid;

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

gap:35px;

}

.feature-card{

background:#101d32;

padding:40px;

border-radius:25px;

text-align:center;

transition:.35s;

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

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(37,99,235,.25);

}

.feature-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

background:#2563eb22;

border-radius:50%;

}

.feature-card h3{

font-size:25px;

color:white;

margin-bottom:15px;

}

.feature-card p{

color:#cbd5e1;

line-height:1.8;

font-size:17px;

}
/*==========================
      SHOWCASE
==========================*/

.showcase{

padding:120px 80px;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

background:#0b1424;

}

.showcase h2{

font-size:52px;

color:white;

margin-bottom:25px;

}

.showcase p{

font-size:19px;

line-height:1.9;

color:#cbd5e1;

margin-bottom:30px;

}

.showcase ul{

list-style:none;

margin-bottom:35px;

}

.showcase ul li{

margin:18px 0;

font-size:19px;

color:white;

}

.dashboard-preview{

background:#111827;

border-radius:25px;

padding:25px;

box-shadow:0 25px 60px rgba(37,99,235,.25);

}

.screen-header{

display:flex;

gap:10px;

margin-bottom:25px;

}

.dot{

width:15px;

height:15px;

border-radius:50%;

}

.red{

background:#ef4444;

}

.yellow{

background:#facc15;

}

.green{

background:#22c55e;

}

.chart-area{

height:220px;

border-radius:15px;

background:#0f172a;

position:relative;

overflow:hidden;

margin-bottom:25px;

}

.graph-line{

position:absolute;

width:200%;

height:3px;

background:#2563eb;

top:55%;

animation:moveGraph 8s linear infinite;

}

@keyframes moveGraph{

0%{

transform:translateX(-50%) translateY(20px);

}

25%{

transform:translateX(-35%) translateY(-10px);

}

50%{

transform:translateX(-20%) translateY(35px);

}

75%{

transform:translateX(-10%) translateY(-20px);

}

100%{

transform:translateX(0%) translateY(15px);

}

}

.dashboard-cards{

display:grid;

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

gap:15px;

}

.mini-card{

background:#1e293b;

padding:20px;

border-radius:15px;

text-align:center;

color:white;

}
/*==========================
      REFERRAL
===========================*/

.referral-section{

padding:120px 80px;

background:#08111f;

text-align:center;

}

.referral-title h2{

font-size:50px;

color:white;

margin-bottom:20px;

}

.referral-title p{

font-size:20px;

color:#cbd5e1;

max-width:800px;

margin:auto;

margin-bottom:70px;

line-height:1.8;

}

.referral-grid{

display:grid;

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

gap:35px;

}

.reward-card{

background:#101d32;

padding:45px;

border-radius:25px;

transition:.4s;

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

}

.reward-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 60px rgba(37,99,235,.30);

}

.reward-percent{

font-size:70px;

font-weight:700;

color:#22c55e;

margin-bottom:25px;

}

.reward-card h3{

color:white;

font-size:28px;

margin-bottom:20px;

}

.reward-card p{

color:#cbd5e1;

font-size:17px;

line-height:1.8;

}
/*==========================
      TESTIMONIALS
==========================*/

.testimonials{

padding:120px 80px;

background:#0b1424;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

background:#101d32;

padding:40px;

border-radius:25px;

color:white;

transition:.35s;

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

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(37,99,235,.25);

}

.testimonial-card p{

font-size:18px;

line-height:1.9;

color:#dbeafe;

margin-bottom:30px;

}

.testimonial-card h4{

color:#60a5fa;

font-size:20px;

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

.faq{

padding:120px 80px;

background:#08111f;

}

.faq-container{

max-width:900px;

margin:auto;

}

.faq-item{

background:#101d32;

padding:30px;

margin-bottom:20px;

border-radius:20px;

}

.faq-item h3{

color:white;

margin-bottom:15px;

}

.faq-item p{

color:#cbd5e1;

line-height:1.8;

}
/* ===========================
   MOBILE RESPONSIVE
=========================== */

@media screen and (max-width:768px){

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

/* Hide Desktop Navbar */
.navbar{
    display:none;
}

/* Hero */

.hero{
    min-height:100vh;
    padding:80px 20px 50px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content{
    width:100%;
    max-width:100%;
    margin:0 auto;
}

.hero h1{
    font-size:42px;
    line-height:1.2;
}

.hero p{
    font-size:17px;
    line-height:1.8;
    margin-top:20px;
}

.hero-buttons{
    margin-top:35px;
    display:flex;
    flex-direction:column;
    gap:15px;
    align-items:center;
}

.start-btn,
.learn-btn{
    width:100%;
    max-width:320px;
    padding:16px;
}

/* Floating Icons */

.floating{
    font-size:32px;
}

/* Statistics */

.stats{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    padding:60px 20px;
}

/* Features */

.features{
    padding:70px 20px;
}

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

.section-title p{
    font-size:16px;
}

.feature-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

/* Showcase */

.showcase{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    padding:70px 20px;
}

.showcase h2{
    font-size:34px;
}

.showcase p{
    font-size:17px;
}

.showcase ul li{
    font-size:17px;
}

.dashboard-cards{
    grid-template-columns:1fr;
}

/* Referral */

.referral-section{
    padding:70px 20px;
}

.referral-title h2{
    font-size:34px;
}

.referral-title p{
    font-size:17px;
}

.referral-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

.reward-percent{
    font-size:55px;
}

/* Testimonials */

.testimonials{
    padding:70px 20px;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
}

/* FAQ */

.faq{
    padding:70px 20px;
}

.faq-container{
    width:100%;
}

/* Footer */

.footer{
    padding:60px 20px;
}

.footer-container{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
}

.footer-column{
    width:100%;
}

}