/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:target,[id]{scroll-margin-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;color:#1c1d29;background:#fdfdfa;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button,a{font:inherit;color:inherit;text-decoration:none;cursor:pointer;border:0;background:transparent}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.15}

/* ============ Tokens ============ */
:root{
  --fg:#1c1d29;
  --bg:#fdfdfa;
  --card:#ffffff;
  --muted:#f4f4f3;
  --muted-fg:#6b6f7d;
  --border:#e6e7ea;
  --success:#15a35b;
  --success-dark:#0f7a44;
  --success-fg:#ffffff;
  --urgent:#d83a3a;
  --urgent-fg:#ffffff;
  --highlight:#7c3aed;
  --highlight-fg:#ffffff;
  --soft:#f5f0fc;
  --destructive:#dc2626;
  --yellow:#facc15;
  --shadow-card:0 8px 24px -12px rgba(20,24,46,.18);
  --shadow-pop:0 20px 40px -15px rgba(20,24,46,.25);
  --radius:.875rem;
}

/* ============ Layout helpers ============ */
.container{max-width:1152px;margin:0 auto;padding:0 1rem}
.container-sm{max-width:768px;margin:0 auto;padding:0 1rem}
.container-md{max-width:896px;margin:0 auto;padding:0 1rem}
.section{padding:56px 0}
@media(min-width:640px){.section{padding:80px 0}}
.text-center{text-align:center}
.text-justify{text-align:justify}

/* ============ Typography ============ */
.h1{font-size:clamp(1.875rem,5vw + .5rem,3.75rem);font-weight:900;text-align:center;line-height:1.05}
.h2{font-size:1.5rem;font-weight:700;text-align:center}
@media(min-width:640px){.h2{font-size:2.25rem}}
.h2-lg{font-size:1.875rem;font-weight:800;text-transform:uppercase;text-align:center}
@media(min-width:640px){.h2-lg{font-size:3rem}}
.lead{color:var(--muted-fg);text-align:center;font-size:1rem;max-width:42rem;margin:.75rem auto 0}
@media(min-width:640px){.lead{font-size:1.125rem}}
.small{color:var(--muted-fg);font-size:.875rem}
.muted{color:var(--muted-fg)}
.text-highlight{color:var(--highlight)}
.text-success{color:var(--success)}
.text-urgent{color:var(--urgent)}
.text-destructive{color:var(--destructive)}
.text-yellow{color:var(--yellow)}
.text-fg{color:var(--fg)}
.line-through{text-decoration:line-through}
.font-bold{font-weight:700}.font-black{font-weight:900}.font-semibold{font-weight:600}
.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.04em}.tracking-wider{letter-spacing:.07em}
.tabular{font-variant-numeric:tabular-nums}

/* ============ Urgency bar ============ */
.urgency-bar{background:var(--urgent);color:var(--urgent-fg)}
.urgency-bar .inner{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;font-size:.8rem;font-weight:700;text-align:center}
@media(min-width:640px){.urgency-bar .inner{font-size:.9rem}}
.urgency-bar .emoji{font-size:1.05rem;animation:pulse-dot 1.5s ease-in-out infinite}

/* ============ Hero ============ */
.hero{background:linear-gradient(to bottom,var(--soft),var(--bg) 60%);padding:32px 0 40px}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.25rem}
.tag-pill{border:1px solid rgba(124,58,237,.25);background:rgba(124,58,237,.1);color:var(--highlight);padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600}
.hero-img{max-width:640px;margin:2rem auto 0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-pop)}
.hero-cta{max-width:28rem;margin:2rem auto 0;display:flex;flex-direction:column;align-items:center;gap:1rem}
.hero-bullets{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem;color:var(--muted-fg);font-size:.875rem}
.hero-bullets li{display:flex;align-items:center;gap:.35rem}

/* ============ Buttons / CTA ============ */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border-radius:16px;background:var(--success);color:var(--success-fg);font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:.95rem 1.5rem;font-size:1rem;box-shadow:0 6px 0 0 var(--success-dark);transition:transform .15s,box-shadow .15s,filter .15s;animation:cta-pulse 1.8s ease-in-out infinite}
@media(min-width:640px){.cta{width:auto;font-size:1.05rem}}
.cta:hover{filter:brightness(1.05);transform:translateY(2px);box-shadow:0 3px 0 0 var(--success-dark);animation-play-state:paused}
.cta:active{transform:translateY(6px);box-shadow:0 0 0 0 var(--success-dark)}
.cta .arrow{transition:transform .15s}
.cta:hover .arrow{transform:translateX(4px)}
.cta-sm{padding:.75rem 1.25rem;font-size:.85rem;border-radius:14px;box-shadow:0 5px 0 0 var(--success-dark)}
.cta-sm:hover{box-shadow:0 2px 0 0 var(--success-dark)}
.cta-block{display:flex;flex-direction:column;align-items:center;gap:.1rem}
@media(prefers-reduced-motion:reduce){.cta{animation:none}}

/* ============ Cards / grids ============ */
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow-card);transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.4)}
.icon-square{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(124,58,237,.1);color:var(--highlight);transition:background .15s,color .15s}
.card:hover .icon-square{background:var(--highlight);color:var(--highlight-fg)}
.chip-purple{background:rgba(124,58,237,.1);color:var(--highlight);padding:.25rem .75rem;border-radius:9999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.chip-success{background:rgba(21,163,91,.15);color:var(--success);padding:.4rem .75rem;border-radius:9999px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.chip-urgent{background:rgba(216,58,58,.15);color:var(--urgent);padding:.4rem .75rem;border-radius:9999px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.kit-badge{display:inline-block;background:var(--muted);color:var(--fg);padding:.5rem 1rem;border-radius:12px;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem}

/* ============ Benefits ============ */
.benefit{display:flex;gap:1rem;background:var(--card);border-radius:18px;padding:1.25rem;box-shadow:var(--shadow-card)}
.benefit-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:rgba(21,163,91,.15);color:var(--success);display:flex;align-items:center;justify-content:center}

/* ============ Steps ============ */
.steps{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow-card)}
.step-num{position:absolute;top:-18px;left:1.5rem;width:36px;height:36px;border-radius:9999px;background:var(--highlight);color:var(--highlight-fg);font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop)}

/* ============ Image gallery ============ */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.gallery .item{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s}
.gallery .item:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.gallery .item img{aspect-ratio:1/1;width:100%;object-fit:cover;transition:transform .5s}
.gallery .item:hover img{transform:scale(1.1)}
.section-soft{background:#f5f0fc}
.receive-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}

/* ============ Receive cards ============ */
.receive-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.5rem;text-align:center;box-shadow:var(--shadow-card);margin-top:1rem}
.receive-card .ico{margin:0 auto;width:56px;height:56px;border-radius:18px;background:rgba(124,58,237,.18);color:var(--highlight);display:flex;align-items:center;justify-content:center}
.receive-card.dashed{border:2px dashed rgba(124,58,237,.4)}

/* ============ Plans ============ */
.plans{display:grid;gap:1.25rem;margin-top:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.plans{grid-template-columns:1fr 1fr}}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:1.25rem;box-shadow:var(--shadow-card)}
.plan-featured{border:3px solid var(--highlight);padding-top:2.5rem;position:relative;box-shadow:var(--shadow-pop)}
.plan-ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92%;background:var(--highlight);color:#fff;padding:.4rem .75rem;border-radius:0 0 16px 16px;text-align:center;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;justify-content:center;gap:.4rem}
.price{display:flex;align-items:baseline;justify-content:center;gap:.25rem;margin-top:.15rem}
.price .currency{font-size:1rem;font-weight:700;color:var(--success)}
.price .amount{font-size:2.25rem;font-weight:900;color:var(--success);letter-spacing:-.02em}
.plan-list{margin-top:1.25rem;flex:1;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.plan-list li{display:flex;gap:.5rem}
.bonus-box{margin-top:1.25rem;border-radius:12px;background:var(--soft);padding:.75rem}
.plan-secure{display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--muted-fg);font-size:.7rem;margin-top:.6rem}

/* ============ Countdown banner ============ */
.countdown{display:inline-flex;align-items:center;gap:.75rem;background:var(--urgent);color:var(--urgent-fg);padding:.75rem 1.25rem;border-radius:16px;box-shadow:var(--shadow-pop)}
.countdown .timer{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,0,0,.25);padding:.4rem .75rem;border-radius:12px;font-weight:900;font-variant-numeric:tabular-nums}

/* ============ Testimonials ============ */
.testimonial{background:var(--card);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.testimonial .stars{display:flex;gap:.15rem;color:var(--yellow)}
.testimonial blockquote{margin-top:.75rem;flex:1;font-size:.875rem;line-height:1.55}
.testimonial figcaption{margin-top:1rem;display:flex;align-items:center;gap:.75rem}
.testimonial figcaption img{width:40px;height:40px;border-radius:9999px;object-fit:cover;flex-shrink:0}
.testimonial figcaption .meta{flex:1}
.testimonial figcaption .meta .name{font-size:.875rem;font-weight:700}
.testimonial figcaption .meta .role{font-size:.75rem;color:var(--muted-fg)}

/* ============ Guarantee ============ */
.guarantee-box{position:relative;overflow:hidden;border-radius:24px;border:2px solid var(--success);background:#fff;padding:1.5rem}
@media(min-width:640px){.guarantee-box{padding:2.5rem}}
.guarantee-inner{display:grid;gap:1.5rem;align-items:center}
@media(min-width:640px){.guarantee-inner{grid-template-columns:auto 1fr}}
.seal{width:112px;height:112px;border-radius:9999px;background:#fff;box-shadow:var(--shadow-pop);display:flex;align-items:center;justify-content:center;margin:0 auto;border:4px solid rgba(21,163,91,.3)}
@media(min-width:640px){.seal{margin:0}}
.seal-inner{width:80px;height:80px;border-radius:9999px;background:var(--success);color:var(--success-fg);display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ============ FAQ ============ */
.faq{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.25rem;text-align:left;font-weight:600;transition:background .15s}
.faq-q:hover{background:rgba(124,58,237,.05)}
.faq-q svg{flex-shrink:0;color:var(--muted-fg);transition:transform .2s}
.faq-q[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-a{display:none;border-top:1px solid var(--border);padding:1rem 1.25rem;font-size:.875rem;color:var(--muted-fg);line-height:1.6;animation:slide-in-up .3s ease-out}
.faq-item.open .faq-a{display:block}

/* ============ Footer ============ */
footer{border-top:1px solid var(--border);background:var(--card);padding:2rem 0;text-align:center;font-size:.75rem;color:var(--muted-fg)}
footer p+p{margin-top:.5rem}

/* ============ Sales notifier ============ */
.notifier{position:fixed;right:.75rem;top:.75rem;z-index:50;max-width:240px;transform:translateX(120%);opacity:0;transition:transform .5s ease,opacity .5s ease;pointer-events:none}
.notifier.show{transform:translateX(0);opacity:1;pointer-events:auto}
.notifier-card{position:relative;border:1px solid rgba(21,163,91,.4);background:#fff;border-radius:12px;padding:.5rem .75rem;padding-right:1.5rem;box-shadow:var(--shadow-pop)}
.notifier-close{position:absolute;top:.4rem;right:.4rem;padding:.15rem;border-radius:4px;color:#9ca3af}
.notifier-close:hover{background:#f3f4f6}
.notifier .name{font-size:.75rem;font-weight:700;color:#111}
.notifier .plan{font-size:.7rem;color:#374151;margin-top:.1rem}
.notifier .plan b{color:var(--success)}
.notifier .ago{display:flex;align-items:center;gap:.25rem;font-size:.65rem;color:#9ca3af;margin-top:.25rem}

/* ============ Modal (upsell) ============ */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);padding:1.5rem 1rem;overflow-y:auto}
@media(min-width:640px){.modal{align-items:center;padding:2.5rem 1rem}}
.modal.hidden{display:none}
.modal-card{position:relative;width:100%;max-width:24rem;background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-pop);padding:1rem 1.25rem 1rem;animation:slide-in-up .4s ease-out}
.modal-close{position:absolute;top:.6rem;right:.6rem;width:28px;height:28px;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:var(--muted-fg)}
.modal-close:hover{background:var(--muted);color:var(--fg)}
.modal-badge{display:inline-flex;align-items:center;gap:.25rem;background:var(--fg);color:var(--bg);padding:.25rem .75rem;border-radius:9999px;font-size:.625rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.modal-list{margin-top:.75rem;border:1px solid var(--border);background:rgba(244,244,243,.5);border-radius:12px;padding:.6rem;display:flex;flex-direction:column;gap:.25rem;font-size:.7rem}
.modal-list li{display:flex;gap:.4rem}
.modal-decline{display:block;text-align:center;font-size:.7rem;color:var(--muted-fg);text-decoration:underline;text-underline-offset:4px;margin-top:.6rem}
.modal-decline:hover{color:var(--fg)}

/* ============ Reveal on scroll ============ */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out;will-change:opacity,transform}
[data-reveal].is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ============ Animations ============ */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
@keyframes cta-pulse{0%,100%{transform:scale(1);box-shadow:0 6px 0 0 var(--success-dark),0 0 0 0 rgba(21,163,91,.55)}50%{transform:scale(1.03);box-shadow:0 6px 0 0 var(--success-dark),0 0 0 14px rgba(21,163,91,0)}}
@keyframes slide-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ============ Utils ============ */
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}
.no-shrink{flex-shrink:0}