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

:root {
    --bg: #0b0b0c;
    --bg-2: #121214;
    --text: #eaeaea;
    --muted: #b9b9b9;
    --brand: #ff7a00;
    --brand-2: #ff4d00;
    --accent: #22c55e;
    --card: #16171a;
    --stroke: rgba(255,255,255,0.08);
}

html, body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(255,122,0,0.12), transparent 40%),
                radial-gradient(1200px 600px at 10% 110%, rgba(34,197,94,0.10), transparent 40%),
                linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(10px);
    background: rgba(10,10,12,0.6);
    border-bottom: 1px solid var(--stroke);
}

.topbar__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.brand__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 4px rgba(255,122,0,0.15);
}

.brand__name { color: #fff; }

.topbar__cta {
    color: #0b0b0c;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(255, 122, 0, 0.35);
}

/* Hero */
.hero {
    padding: 64px 20px 32px;
}

.hero__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

.headline {
    font-size: 48px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

.headline span {
    color: var(--brand);
}

.sub {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.bullets {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.bullets li::before {
    content: "✔";
    color: var(--accent);
    margin-right: 10px;
}

.ctas {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.btn {
    display: inline-block;
    padding: 14px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.btn--primary {
    color: #0b0b0c;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 12px 32px rgba(255,122,0,0.35);
}

.btn--ghost {
    color: #fff;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.04);
}

.trust { display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,0.03);
}

.hero__visual { position: relative; }

.card-hero {
    position: relative;
    background: linear-gradient(180deg, #1a1b20, #121318);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    padding: 26px;
    overflow: hidden;
    min-height: 320px;
}

.card-hero .tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-weight: 800;
    font-size: 12px;
    color: #0b0b0c;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    padding: 6px 10px;
    border-radius: 999px;
}

.card-hero .rings {
    position: absolute;
    inset: -40% -20% auto auto;
    height: 240px;
    width: 240px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,122,0,0.35), transparent 70%);
    filter: blur(8px);
}

.card-hero .shine {
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.35), transparent 60%);
    filter: blur(10px);
}

.card-hero .numbers {
    position: relative;
    display: grid;
    gap: 14px;
    margin-top: 40px;
}

.card-hero .numbers div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: baseline;
}

.card-hero .numbers strong { font-size: 22px; }
.card-hero .numbers small { color: var(--muted); }

/* Highlights */
.highlights { padding: 40px 20px; }
.highlights .grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.highlights .card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 18px;
}

.card__icon { font-size: 22px; margin-bottom: 8px; }
.card__title { font-weight: 800; margin-bottom: 6px; }
.card__text { color: var(--muted); font-size: 14px; }

/* Steps */
.steps { padding: 42px 20px; }
.section__head {
    max-width: 1200px;
    margin: 0 auto 16px;
    padding: 0 2px;
}
.section__head h2 { font-size: 28px; letter-spacing: -0.3px; }
.section__head p { color: var(--muted); }

.steps__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.step {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 18px;
}

.step__num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #0b0b0c;
    font-weight: 900;
    margin-bottom: 10px;
}

/* Offer */
.offer { padding: 46px 20px; }
.offer__container {
    max-width: 1000px;
    margin: 0 auto;
}

.offer__content {
    background: linear-gradient(180deg, #191a1f, #121318);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.offer__content::after {
    content: '';
    position: absolute;
    inset: -20% 60% auto -20%;
    height: 260px;
    background: radial-gradient(circle, rgba(255,122,0,0.25), transparent 60%);
    filter: blur(10px);
}

.offer h2 { font-size: 28px; margin-bottom: 8px; }
.anchor { color: var(--muted); margin-bottom: 16px; }
.anchor .old { text-decoration: line-through; opacity: 0.6; margin-right: 6px; }
.anchor .price { color: var(--brand); font-weight: 900; font-size: 24px; }

.offer__list {
    list-style: none;
    display: grid;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto 18px;
}

.offer__list li::before { content: "✔"; color: var(--accent); margin-right: 8px; }

.btn--shine {
    display: inline-block;
    color: #0b0b0c;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    padding: 16px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 0.4px;
    box-shadow: 0 16px 44px rgba(255,122,0,0.38);
}

.offer__note { color: var(--muted); margin-top: 12px; font-size: 14px; }

/* Testimonials */
.socialproof { padding: 42px 20px; }
.testimonials {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.testimonial { background: var(--card); border: 1px solid var(--stroke); border-radius: 14px; padding: 18px; }
.testimonial__text { margin-bottom: 8px; }
.testimonial__meta { color: var(--muted); font-size: 14px; }

/* FAQ */
.faq { padding: 42px 20px; }
.faq__grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.faq__item { background: var(--card); border: 1px solid var(--stroke); border-radius: 14px; padding: 16px 18px; }
.faq__item summary { cursor: pointer; font-weight: 700; }
.faq__item p { color: var(--muted); margin-top: 8px; }

/* Footer */
.footer { padding: 30px 20px 50px; }
.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer .brand__dot { box-shadow: 0 0 0 4px rgba(255,122,0,0.12); }
.footer__links { display: flex; gap: 14px; }
.footer__links a { color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: #fff; }
.footer__bottom { text-align: center; margin-top: 18px; color: var(--muted); }

/* WhatsApp Floating */
.whatsapp {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: #25D366;
    color: #0b0b0c;
    border-radius: 50%;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 12px 28px rgba(37,211,102,0.35);
    z-index: 60;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero__container { grid-template-columns: 1fr; gap: 24px; }
    .headline { font-size: 40px; }
}

@media (max-width: 768px) {
    .highlights .grid { grid-template-columns: 1fr 1fr; }
    .steps__grid { grid-template-columns: 1fr; }
    .testimonials { grid-template-columns: 1fr; }
    .faq__grid { grid-template-columns: 1fr; }
}