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

body{
font-family:'Poppins',sans-serif;
background:#020202;
color:#fff;
overflow-x:hidden;
}

html{
scroll-behavior:smooth;
}

body::before{
content:'';
position:fixed;
right:-300px;
top:-200px;
width:700px;
height:700px;
background:radial-gradient(circle,#ff0080 0%,transparent 70%);
opacity:.12;
pointer-events:none;
}

.hero{
padding:25px 6%;
background:linear-gradient(to right,rgba(0,0,0,.92),rgba(0,0,0,.65));
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,.08);
gap:20px;
flex-wrap:wrap;
}

.logo{
height:220px;
}

.menu{
display:flex;
gap:35px;
}

.menu a{
text-decoration:none;
color:#fff;
font-weight:600;
}

.top-button{
padding:16px 30px;
border-radius:60px;
background:linear-gradient(90deg,#ff0080,#ff8c00,#00d9ff);
color:#fff;
text-decoration:none;
font-weight:700;
}

.hero-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
padding-top:60px;
}

.hero-image img{
width:100%;
border-radius:30px;
}

.badge{
display:inline-block;
padding:12px 22px;
border-radius:40px;
border:1px solid #ff0080;
margin-bottom:25px;
}

.hero-text h1{
font-size:5rem;
line-height:1.05;
margin-bottom:25px;
font-weight:800;
}

.hero-text span,
.section-title span{
background:linear-gradient(90deg,#ff0080,#ff8c00,#9cff00,#00d9ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-text p{
font-size:1.2rem;
line-height:1.9;
color:#d0d0d0;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
gap:20px;
margin-bottom:35px;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:18px 32px;
border-radius:60px;
text-decoration:none;
font-weight:700;
}

.btn-primary{
background:linear-gradient(90deg,#ff0080,#ff8c00,#00d9ff);
color:#fff;
}

.btn-secondary{
border:1px solid rgba(255,255,255,.15);
color:#fff;
}

.hero-cards{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.mini-card{
padding:16px 20px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
}

.benefits,
.plans,
.cta{
padding:120px 6%;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:3.5rem;
margin-bottom:20px;
}

.section-title p{
color:#c8c8c8;
font-size:1.1rem;
}

.benefits-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.benefit-card{
padding:40px;
border-radius:30px;
background:#0c0c0c;
border:1px solid rgba(255,255,255,.08);
}

.icon{
width:75px;
height:75px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
margin-bottom:25px;
}

.pink{background:linear-gradient(135deg,#ff0080,#ff5fb0);}
.blue{background:linear-gradient(135deg,#00d9ff,#0099ff);}
.purple{background:linear-gradient(135deg,#8f00ff,#ff00ea);}
.green{background:linear-gradient(135deg,#00ff95,#9cff00);}
.orange{background:linear-gradient(135deg,#ff8c00,#ffd000);}
.cyan{background:linear-gradient(135deg,#00d9ff,#00ffc8);}

.benefit-card h3{
font-size:1.6rem;
margin-bottom:18px;
}

.benefit-card p{
line-height:1.8;
color:#ccc;
}

.family-highlight{
padding:0 6% 120px;
}

.family-box{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:40px;
align-items:center;
padding:50px;
border-radius:35px;
background:linear-gradient(135deg,#0d0d0d,#09131a);
border:2px solid #00ff95;
}

.family-image img{
width:100%;
border-radius:25px;
}

.family-badge{
display:inline-block;
padding:12px 22px;
border-radius:40px;
background:linear-gradient(90deg,#00ff95,#00d9ff);
color:#000;
font-weight:800;
margin-bottom:25px;
}

.family-text h2{
font-size:3rem;
margin-bottom:25px;
}

.family-text p{
font-size:1.2rem;
line-height:1.9;
margin-bottom:35px;
color:#d0d0d0;
}

.comparison{
display:flex;
gap:25px;
margin-bottom:35px;
flex-wrap:wrap;
}

.comparison-item{
flex:1;
min-width:220px;
padding:25px;
border-radius:25px;
background:#121212;
border:1px solid rgba(255,255,255,.08);
text-align:center;
}

.featured-comparison{
border:2px solid #ff00ea;
transform:scale(1.05);
}

.comparison-price{
font-size:2rem;
font-weight:800;
margin-bottom:10px;
}

.featured-comparison strong{
display:block;
margin-top:12px;
color:#ff4fd8;
}

.family-text a{
display:inline-block;
padding:18px 32px;
border-radius:60px;
background:linear-gradient(90deg,#ff0080,#ff8c00,#00d9ff);
text-decoration:none;
color:#fff;
font-weight:700;
}

.plans-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:1200px;
margin:auto;
}

.plan{
padding:50px;
border-radius:35px;
background:#0d0d0d;
position:relative;
}

.gold{
border:1px solid rgba(255,174,0,.3);
}

.diamond{
border:2px solid #ff00ea;
box-shadow:0 0 35px rgba(255,0,234,.18);
}

.recommended{
position:absolute;
top:-15px;
right:25px;
padding:10px 18px;
border-radius:30px;
background:linear-gradient(90deg,#ff0080,#ff8c00);
font-size:.8rem;
font-weight:700;
}

.plan-top{
font-size:2rem;
font-weight:700;
margin-bottom:20px;
}

.plan h3{
font-size:4rem;
margin-bottom:25px;
}

.plan h3 span{
font-size:1rem;
color:#aaa;
}

.family-price{
padding:22px;
border-radius:20px;
background:#131313;
border:1px solid rgba(255,255,255,.08);
margin-bottom:30px;
line-height:1.8;
}

.diamond-family{
border:2px solid #ff00ea;
background:rgba(255,0,234,.08);
}

.family-price strong{
display:block;
font-size:2rem;
}

.plan ul{
list-style:none;
margin-bottom:35px;
}

.plan li{
margin-bottom:16px;
line-height:1.8;
color:#d2d2d2;
}

.plan a,
.cta-text a{
display:inline-block;
padding:18px 30px;
border-radius:60px;
background:linear-gradient(90deg,#ff0080,#ff8c00,#00d9ff);
color:#fff;
text-decoration:none;
font-weight:700;
}

.stats{
padding:40px 6%;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.stat{
padding:35px;
border-radius:25px;
background:#0d0d0d;
border:1px solid rgba(255,255,255,.08);
text-align:center;
}

.stat h3{
font-size:2rem;
margin-bottom:10px;
}

.stat p{
color:#ccc;
}

.cta-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
padding:50px;
border-radius:35px;
background:#0d0d0d;
border:1px solid rgba(255,255,255,.08);
}

.cta-image img{
width:100%;
border-radius:30px;
}

.cta-text h2{
font-size:3rem;
margin-bottom:25px;
}

.cta-text p{
font-size:1.1rem;
line-height:1.9;
margin-bottom:35px;
color:#d0d0d0;
}

.phone{
margin-top:25px;
color:#ccc;
font-size:1.1rem;
}

footer{
padding:40px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
color:#999;
}

.whatsapp-float{
position:fixed;
right:25px;
bottom:25px;
z-index:9999;
}

.whatsapp-float a{
width:75px;
height:75px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:2rem;
color:#fff;
box-shadow:0 0 35px rgba(37,211,102,.45);
}

@media(max-width:1200px){

.hero-content,
.benefits-grid,
.plans-grid,
.stats,
.cta-content,
.family-box{
grid-template-columns:1fr;
}

.hero-text h1{
font-size:3.5rem;
}

.section-title h2,
.family-text h2,
.cta-text h2{
font-size:2.5rem;
}
}

@media(max-width:700px){

.hero,
.benefits,
.plans,
.cta{
padding:25px;
}

.family-highlight{
padding:0 25px 80px;
}

.logo{
height:100px;
}

.navbar{
justify-content:center;
}

.menu{
justify-content:center;
flex-wrap:wrap;
}

.hero-text h1{
font-size:2.5rem;
}

.hero-text p{
font-size:1rem;
}

.plan{
padding:35px;
}

.plan h3{
font-size:3rem;
}

.cta-content,
.family-box{
padding:30px;
}

.whatsapp-float a{
width:65px;
height:65px;
}
}