@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary-blue:#2563eb;
    --deep-blue:#1e3a8a;
    --dark-bg:#030712;
    --dark-2:#020617;
    --card-bg:#0f172a;
    --text-white:#f8fafc;
    --text-dim:#94a3b8;
    --accent-cyan:#38bdf8;
}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Plus Jakarta Sans',sans-serif;
background:linear-gradient(
180deg,
#020617 0%,
#020617 30%,
#030712 60%,
#020617 100%
);
color:var(--text-white);
overflow-x:hidden;
}

/* CONTAINER */

.container{
max-width:1200px;
margin:auto;
padding:0 2rem;
}

/* BACKGROUND FX */

.glow-container{
position:fixed;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
}

.glow{
position:absolute;
border-radius:50%;
filter:blur(120px);
opacity:.25;
animation:glowMove 12s infinite alternate;
}

.glow-1{
width:500px;
height:500px;
background:#2563eb;
top:-150px;
left:-100px;
}

.glow-2{
width:450px;
height:450px;
background:#38bdf8;
bottom:-150px;
right:-100px;
animation-delay:4s;
}

@keyframes glowMove{
0%{transform:translate(0,0) scale(1)}
100%{transform:translate(80px,80px) scale(1.3)}
}

/* NAV */

.glass-nav{
position:fixed;
top:0;
width:100%;
z-index:1000;

background:rgba(3,7,18,.7);
backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,.06);

padding:18px 0;
}

.nav-content{
display:flex;
justify-content:space-between;
align-items:center;
}

.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:800;
font-size:1.3rem;
}

.brand i{
color:var(--primary-blue);
}

.nav-menu{
display:flex;
align-items:center;
gap:2rem;
}

.nav-menu a{
text-decoration:none;
color:var(--text-dim);
font-weight:500;
transition:.3s;
}

.nav-menu a:hover{
color:white;
}

.btn-login{
border:1px solid var(--primary-blue);
padding:10px 24px;
border-radius:10px;
color:white !important;
}

.btn-login:hover{
background:var(--primary-blue);
}

/* HERO */

.main-hero{
padding:200px 0 120px;
text-align:center;
}

.tagline{
background:rgba(37,99,235,.15);
color:#60a5fa;
padding:8px 18px;
border-radius:100px;
font-size:.8rem;
font-weight:700;
display:inline-block;
border:1px solid rgba(37,99,235,.3);
}

h1{
font-size:clamp(3rem,6vw,4.6rem);
font-weight:800;
margin:1.5rem 0;
line-height:1.05;
letter-spacing:-2px;
}

.gradient-text{
color: rgb(201, 168, 76);
}

p{
color:var(--text-dim);
font-size:1.2rem;
max-width:700px;
margin:auto;
margin-bottom:3rem;
}

/* BUTTONS */

.cta-group{
display:flex;
justify-content:center;
gap:1.5rem;
}

.btn-main{
background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);

padding:18px 40px;
border-radius:14px;
border:none;
color:white;
font-weight:700;
font-size:1.05rem;
cursor:pointer;

box-shadow:
0 10px 30px rgba(37,99,235,.4);

transition:.35s;
}

.btn-main:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:
0 20px 45px rgba(37,99,235,.5);
}

.btn-secondary{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
color:white;
text-decoration:none;
opacity:.9;
}

.btn-secondary:hover{
opacity:.7;
}

/* FEATURES */

.grid-layout{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
padding:120px 0;
}

.card-modern{

background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);

padding:3rem;
border-radius:24px;

transition:.4s;
backdrop-filter:blur(10px);
}

.card-modern:hover{
transform:translateY(-10px);
border:1px solid rgba(37,99,235,.4);
background:rgba(37,99,235,.05);
}

.card-modern i{
background:var(--primary-blue);
padding:12px;
border-radius:12px;
margin-bottom:1rem;
}

/* VIDEO */

.video-modern{
margin-top:40px;
border-radius:24px;
overflow:hidden;

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 40px 80px rgba(0,0,0,.6);
}

.video-modern iframe{
width:100%;
height:500px;
border:none;
}

/* PRICING */

.pricing-modern{
padding:120px 0;
}

.pricing-cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:2rem;
max-width:900px;
margin:auto;
}

.p-card{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);

padding:3rem;
border-radius:26px;

transition:.4s;
}

.p-card:hover{
transform:translateY(-10px);
}

.p-card.premium{

background:
linear-gradient(
180deg,
rgba(37,99,235,.15),
rgba(15,23,42,1)
);

border:1px solid #2563eb;
}

.p-price{
font-size:3.2rem;
font-weight:800;
margin:1.5rem 0;
}

.p-price span{
font-size:1rem;
color:var(--text-dim);
}

.p-card ul{
list-style:none;
margin-bottom:2rem;
}

.p-card li{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.p-card li i{
color:#2563eb;
}

.p-card button{
width:100%;
padding:14px;
border-radius:12px;
border:none;

background:rgba(255,255,255,.05);
color:white;

cursor:pointer;
font-weight:700;
}

.p-card button:hover{
background:white;
color:black;
}

.p-card.premium button{
background:#2563eb;
}

/* FOOTER */

.contact-footer{
text-align:center;
padding:120px 0;
}

.wa-modern{
background:#16a34a;
padding:18px 36px;
border-radius:14px;

display:inline-flex;
align-items:center;
gap:10px;

font-weight:700;
text-decoration:none;
color:white;

margin-top:20px;

transition:.35s;
}

.wa-modern:hover{
transform:scale(1.05);
box-shadow:
0 10px 30px rgba(22,163,74,.5);
}

/* MOBILE */

@media(max-width:768px){

.nav-menu{
display:none;
}

.cta-group{
flex-direction:column;
}

.video-modern iframe{
height:300px;
}

}