/* =========================
MELONWIN123 CUSTOM CSS
========================= */

:root{
--bg:#000000;
--bg-soft:#111111;
--card:#0f0f0f;
--text:#f5f5f5;
--muted:#b3b3b3;
--brand:#05c26a;
--brand2:#00ff88;
--yellow:#fff000;
}

body{
margin:0;
padding:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',sans-serif;
}

/* CONTAINER */
.shell{
max-width:520px;
margin:auto;
padding:20px 16px 40px;
}

/* HEADER */
.header{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:20px;
}

.logo{
max-width:130px;
height:auto;
}

/* CARD */
.card{
background:linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:14px;
margin-bottom:18px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* HERO IMAGE */
.hero-img{
width:100%;
border-radius:12px;
display:block;
}

/* BUTTON */
.cta{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:14px;
}

.btn{
display:block;
text-align:center;
text-decoration:none;
padding:14px;
border-radius:12px;
font-size:14px;
font-weight:700;
transition:.3s ease;
}

.btn-primary{
background:linear-gradient(
135deg,
var(--brand),
var(--brand2)
);
color:#000;
}

.btn-primary:hover{
transform:translateY(-2px);
opacity:.95;
}

.btn-secondary{
background:var(--yellow);
color:#000;
}

.btn-secondary:hover{
transform:translateY(-2px);
opacity:.95;
}

/* BADGE */
.badges{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin-top:16px;
}

.badge{
background:linear-gradient(
135deg,
var(--brand),
var(--brand2)
);
color:#000;
padding:7px 12px;
border-radius:999px;
font-size:11px;
font-weight:700;
}

/* FEATURES */
.features h2{
margin-top:0;
font-size:16px;
margin-bottom:14px;
}

.list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:10px;
}

.item{
background:linear-gradient(
135deg,
var(--brand),
var(--brand2)
);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
padding:12px;
font-size:13px;
line-height:1.5;
}

.item::before{
content:"✓ ";
color:#00ff88;
font-weight:bold;
}

/* FAQ */
.faq-item{
background:var(--bg-soft);
border:1px solid rgba(255,255,255,.05);
border-radius:12px;
padding:14px;
margin-bottom:12px;
}

.faq-item h3{
margin:0 0 8px;
font-size:14px;
color:#fff;
}

.faq-item p{
margin:0;
font-size:13px;
line-height:1.6;
color:var(--muted);
}

/* FOOTER */
.footer{
text-align:center;
font-size:12px;
color:#888;
padding-top:10px;
}

.footer b{
color:#fff;
}

/* RESPONSIVE */
@media(max-width:480px){

.cta{
grid-template-columns:1fr;
}

.btn{
font-size:13px;
padding:13px;
}

.item{
font-size:12px;
}

}