*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
scroll-behavior:smooth;
}

body{
background:#080808;
color:#fff;
line-height:1.7;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

section{
padding:90px 0;
}

a{
text-decoration:none;
}

/* NAV */

.navbar{

position:sticky;
top:0;
z-index:999;

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

backdrop-filter:blur(20px);

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

}

.nav-wrap{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

font-size:24px;

font-weight:900;

}

.logo span{

color:#ffb000;

}

.nav-buttons{

display:flex;

gap:15px;

}

.btn{

padding:12px 22px;

border-radius:12px;

font-weight:700;

}

.btn-light{

border:1px solid #333;

color:white;

}

.btn-primary{

background:#ffb000;

color:black;

}

/* HERO */

.hero{

text-align:center;

padding:120px 0;

}

.badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:#161616;

margin-bottom:20px;

}

.hero h1{

font-size:70px;

font-weight:900;

line-height:1.1;

}

.hero h1 span{

color:#ffb000;

}

.hero-text{

max-width:700px;

margin:30px auto;

font-size:20px;

opacity:.8;

}

.hero-btn{

display:inline-block;

background:#ffb000;

color:black;

padding:18px 32px;

font-weight:800;

border-radius:14px;

margin-top:20px;

transition:.3s;

}

.hero-btn:hover{

transform:translateY(-5px);

}

.stats{

display:grid;

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

gap:25px;

margin-top:70px;

}

.stat{

padding:30px;

background:#121212;

border-radius:20px;

}

.stat h2{

color:#ffb000;

font-size:42px;

}

/* COMMON */

h2{

font-size:46px;

margin-bottom:50px;

text-align:center;

}

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.card{

background:#111;

padding:40px;

border-radius:20px;

}

.icon{

font-size:45px;

margin-bottom:20px;

}

.steps-grid{

display:grid;

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

gap:25px;

}

.step{

background:#111;

padding:40px;

border-radius:20px;

text-align:center;

}

.step span{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

background:#ffb000;

color:black;

font-size:30px;

border-radius:50%;

margin-bottom:20px;

}

/* MATH */

.compare{

display:grid;

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

gap:20px;

}

.box{

background:#111;

padding:40px;

text-align:center;

border-radius:20px;

}

.box h3{

margin-top:15px;

font-size:38px;

}

.vs{

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

font-weight:900;

}

.lifetime{

background:#ffb000;

color:black;

}

/* PRICING */

.pricing-grid{

display:grid;

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

gap:30px;

}

.price-card{

background:#111;

padding:45px;

border-radius:22px;

position:relative;

}

.price-card.active{

border:3px solid #ffb000;

transform:scale(1.04);

}

.popular{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#ffb000;

color:black;

padding:8px 20px;

border-radius:50px;

font-size:13px;

font-weight:900;

}

.price{

font-size:60px;

color:#ffb000;

margin:25px 0;

}

.price-card ul{

list-style:none;

}

.price-card li{

padding:12px 0;

border-bottom:1px solid #222;

}

.btn-card{

display:block;

text-align:center;

margin-top:30px;

padding:18px;

background:#ffb000;

color:black;

border-radius:14px;

font-weight:900;

}

/* REVIEWS */

.review-grid{

display:grid;

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

gap:25px;

}

.review{

background:#111;

padding:35px;

border-radius:18px;

}

.review p{

margin:20px 0;

}

/* FAQ */

.faq-box{

background:#111;

margin-bottom:20px;

border-radius:15px;

overflow:hidden;

}

.faq-question{

width:100%;

padding:25px;

background:none;

border:none;

color:white;

text-align:left;

font-size:18px;

cursor:pointer;

}

.faq-answer{

display:none;

padding:0 25px 25px;

opacity:.8;

}

.faq-box.active .faq-answer{

display:block;

}

/* CTA */

.cta{

text-align:center;

background:#111;

}

.cta p{

margin:20px 0;

}

/* FOOTER */

footer{

padding:60px 0;

text-align:center;

color:#777;

}

/* FLOAT */

.floating-btn{

position:fixed;

right:25px;

bottom:25px;

background:#ffb000;

color:black;

padding:16px 24px;

border-radius:999px;

font-weight:900;

box-shadow:0 15px 40px rgba(255,176,0,.4);

}

/* MOBILE */

@media(max-width:900px){

.hero h1{

font-size:42px;

}

.stats,
.grid-2,
.steps-grid,
.compare,
.pricing-grid,
.review-grid{

grid-template-columns:1fr;

}

.nav-buttons{

display:none;

}

.price-card.active{

transform:none;

}

}

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

.problem{

padding:130px 0;

background:
linear-gradient(
180deg,
#080808,
#0e0e0e
);

}

.section-title{

text-align:center;

max-width:750px;

margin:auto;

margin-bottom:80px;

}

.section-title span{

display:inline-block;

padding:10px 18px;

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

border-radius:999px;

color:#ffb000;

font-size:12px;

letter-spacing:2px;

margin-bottom:22px;

}

.section-title h2{

font-size:60px;

font-weight:900;

line-height:1.05;

margin-bottom:20px;

}

.section-title p{

font-size:19px;

opacity:.65;

}

.why-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

}

.why-card{

position:relative;

padding:60px;

border-radius:34px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

border:

1px solid rgba(
255,
255,
255,
0.06
);

overflow:hidden;

transition:.4s;

backdrop-filter:blur(20px);

}

.why-card:hover{

transform:

translateY(-10px);

border-color:

rgba(
255,
176,
0,
0.25
);

box-shadow:

0 40px 90px

rgba(
0,
0,
0,
.55
);

}

.why-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

margin-bottom:40px;

background:

linear-gradient(
135deg,
#ffb000,
#ff8600
);

box-shadow:

0 20px 50px

rgba(
255,
176,
0,
.25
);

}

.why-icon svg{

width:42px;

height:42px;

fill:none;

stroke:black;

stroke-width:1.8;

stroke-linecap:round;

stroke-linejoin:round;

}

.why-card h3{

font-size:34px;

font-weight:800;

margin-bottom:18px;

}

.why-card p{

font-size:18px;

opacity:.7;

line-height:1.9;

}

.card-line{

position:absolute;

bottom:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(
90deg,
#ffb000,
#ff7300
);

transition:.5s;

}

.why-card:hover .card-line{

width:100%;

}

@media(max-width:900px){

.why-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:40px;

}

.why-card{

padding:40px;

}
}

.btn-card{
display:block;

text-align:center;

cursor:pointer;

transition:.25s ease;
}

.btn-card:hover{

transform:
translateY(-4px);

box-shadow:
0 18px 40px
rgba(255,176,0,.35);

}