:root{
  --black:#000000; 
  --white:#ffffff; 
  --blue:#007BFF;
  --green:#28a745;
  --red:#ff4757;
  --orange:#ff6b35;
  --muted:#8f9ba8;
  --shadow:0 2px 10px rgba(0,0,0,.08);
  --radius:16px;
  --container:1200px;
}

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--container); margin-inline:auto; padding:0 24px}

/* Utilities */
.grid{display:grid; gap:24px}
.center{text-align:center}
.muted{color:var(--muted)}
.tag{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:linear-gradient(135deg, #ff6b35, #ff4757); font-size:clamp(11px, 2vw, 13px); font-weight:700; letter-spacing:.08em; text-transform:uppercase; animation:pulse 2s infinite}
.shadow{box-shadow:var(--shadow)}
.highlight{color:#ff6b35; font-weight:800}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:18px 36px; border-radius:999px; background:linear-gradient(135deg, var(--blue), #0056b3); color:var(--white); font-weight:700; font-size:clamp(16px, 2.5vw, 18px); letter-spacing:.3px; border:2px solid rgba(255,255,255,.1); transition:all .3s ease; text-transform:uppercase; text-align:center; min-height:60px; line-height:1.2}
.btn:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 12px 32px rgba(0,123,255,.4)}
.btn:focus{outline:3px solid var(--white); outline-offset:4px}

.btn-pulse{animation:btnPulse 2s infinite}
.btn-mega{font-size:clamp(16px, 2.5vw, 18px); padding:20px 40px; background:linear-gradient(135deg, var(--green), #1e7e34); min-height:64px}
.btn-mega:hover{box-shadow:0 12px 32px rgba(40,167,69,.4)}

@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.8; transform:scale(1.02)}}
@keyframes btnPulse{0%,100%{transform:scale(1)}25%{transform:scale(1.05)}75%{transform:scale(1.02)}}
@keyframes slideIn{from{transform:translateX(-400px); opacity:0}to{transform:translateX(0); opacity:1}}

/* Header/Hero */
header{
  position:relative; padding:80px 0 60px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,107,53,.1) 0%, transparent 60%);
  z-index:1;
}
.headline{font-family:'Montserrat', sans-serif; font-size:clamp(32px, 6vw, 64px); line-height:1.2; letter-spacing:.3px; text-transform:uppercase; font-weight:800}
.subheadline{margin-top:16px; font-weight:700; font-size:clamp(16px, 3vw, 20px); letter-spacing:.08em; text-transform:uppercase; color:#ff6b35; line-height:1.3}
.lead{margin:24px auto; max-width:900px; font-size:clamp(18px, 3vw, 22px); color:#dbe2ea; line-height:1.7}

/* Price Box */
.price-box{margin:32px auto; padding:24px; background:rgba(255,255,255,.05); border:2px solid rgba(255,107,53,.3); border-radius:var(--radius); max-width:400px}
.old-price{font-size:16px; color:#8f9ba8; text-decoration:line-through}
.current-price{font-size:28px; font-weight:800; color:var(--white); margin:8px 0}
.urgency{font-size:14px; color:#ff6b35; font-weight:600; animation:pulse 2s infinite}

/* Online Counter */
.online-counter{margin-top:32px; display:flex; justify-content:center}
.online-indicator{display:flex; align-items:center; gap:8px; background:rgba(40,167,69,.1); padding:8px 16px; border-radius:999px; border:1px solid rgba(40,167,69,.3); font-size:14px; font-weight:600; color:#28a745}
.online-dot{width:8px; height:8px; background:#28a745; border-radius:50%; animation:pulse 2s infinite}

/* Social Proof */
.social-proof{margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:20px}
.proof-item{background:rgba(255,255,255,.05); padding:12px 20px; border-radius:999px; font-size:14px; font-weight:600; border:1px solid rgba(255,255,255,.1)}

.hero-cta{margin-top:32px}
.hero-note{margin-top:32px; padding:24px; border-radius:var(--radius); background:rgba(40,167,69,.1); border:2px solid rgba(40,167,69,.3)}
.hero-note .title{font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--green)}
.hero-note .desc{color:#cbd5e1; margin-top:8px; font-size:16px}

/* Sections */
section{padding:80px 0}

/* Problem Section */
.problem-section{background:linear-gradient(180deg, rgba(255,71,87,.05) 0%, transparent 100%)}
.problems-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:32px; margin-top:48px}
.problem-item{text-align:center; padding:32px 24px; background:rgba(255,255,255,.03); border:1px solid rgba(255,71,87,.2); border-radius:var(--radius)}
.problem-icon{font-size:48px; margin-bottom:16px}
.problem-item h3{font-size:20px; font-weight:700; margin:16px 0; color:#ff4757}
.problem-item p{color:#cbd5e1; line-height:1.6}

/* Solution Section */
.solution-section{background:linear-gradient(180deg, rgba(0,123,255,.05) 0%, transparent 100%)}
.benefits-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:32px; margin-top:48px}
.benefit-item{padding:32px; background:rgba(255,255,255,.04); border:2px solid rgba(0,123,255,.2); border-radius:var(--radius); position:relative}
.benefit-number{position:absolute; top:-16px; left:32px; background:var(--blue); color:white; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px}
.benefit-item h3{font-size:22px; font-weight:700; margin:16px 0; color:var(--blue)}
.benefit-item p{color:#cbd5e1; line-height:1.6; font-size:16px}

/* Testimonials */
.testimonials-section{background:linear-gradient(180deg, rgba(40,167,69,.05) 0%, transparent 100%)}
.testimonials-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:32px; margin-top:48px}
.testimonial-card{background:rgba(255,255,255,.06); border:2px solid rgba(40,167,69,.2); border-radius:var(--radius); padding:32px; position:relative}
.stars{font-size:20px; margin-bottom:16px}
.testimonial-card blockquote{margin:0; font-size:16px; color:#e6ebf2; line-height:1.6; font-style:italic}
.testimonial-author{display:flex; justify-content:space-between; align-items:center; margin-top:20px; flex-wrap:wrap; gap:12px}
.author-info cite{display:block; color:var(--green); font-style:normal; font-weight:700; font-size:16px}
.author-info span{color:#a9b6c6; font-size:14px}
.result{background:var(--green); color:white; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase}

/* Purchase Section */
.purchase-section{background:linear-gradient(180deg, rgba(255,107,53,.1) 0%, rgba(0,123,255,.05) 100%); padding:100px 0}
.offer-box{max-width:800px; margin:40px auto; background:rgba(255,255,255,.08); border:3px solid rgba(255,107,53,.3); border-radius:24px; overflow:hidden}
.offer-header{background:linear-gradient(135deg, #ff6b35, #ff4757); padding:24px; text-align:center}
.offer-header h3{margin:0; font-size:clamp(18px, 3vw, 24px); font-weight:800; text-transform:uppercase}
.countdown{margin-top:12px; font-size:clamp(16px, 2.5vw, 18px); font-weight:700; background:rgba(0,0,0,.3); padding:8px 16px; border-radius:999px; display:inline-block}

.offer-content{padding:40px}
.what-you-get h4{font-size:22px; font-weight:800; text-transform:uppercase; margin-bottom:24px; text-align:center; color:var(--blue)}
.bonus-list{display:grid; gap:16px}
.bonus-item{display:flex; align-items:center; gap:16px; padding:16px; background:rgba(255,255,255,.03); border-radius:12px; border:1px solid rgba(255,255,255,.1)}
.bonus-highlight{border-color:rgba(255,107,53,.3); background:rgba(255,107,53,.05)}
.check{font-size:20px; flex-shrink:0}
.bonus-item strong{color:var(--white); font-size:16px}
.value{color:var(--green); font-weight:700; font-size:14px; margin-left:8px}

.total-value{margin:32px 0; padding:24px; background:rgba(0,0,0,.3); border-radius:16px; text-align:center}
.old-total{font-size:16px; color:#8f9ba8; text-decoration:line-through}
.new-total{font-size:32px; font-weight:800; margin:8px 0; color:var(--white)}
.savings{font-size:18px; color:var(--green); font-weight:700}

.cta-section{text-align:center; padding:32px 40px}
.guarantee{margin:24px 0; padding:20px; background:rgba(40,167,69,.1); border:2px solid rgba(40,167,69,.3); border-radius:12px}
.guarantee-badge{font-size:16px; font-weight:700; color:var(--green); margin-bottom:8px}
.guarantee p{margin:0; color:#cbd5e1; font-size:14px}
.urgency-text{color:#ff4757; font-weight:700; font-size:16px; animation:pulse 2s infinite}

/* FAQ Section */
.faq-section{background:rgba(255,255,255,.02)}
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:24px; max-width:1000px; margin:0 auto}
.faq-item{padding:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius)}
.faq-item h4{margin:0 0 12px 0; font-size:18px; font-weight:700; color:var(--blue)}
.faq-item p{margin:0; color:#cbd5e1; line-height:1.6}

/* Marquee */
.marquee{
  position:relative; overflow:hidden; border-block:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02)
}
.marquee-track{
  display:flex; gap:clamp(24px, 5vw, 48px); padding:16px 0; will-change:transform; 
  animation:scroll-left 18s linear infinite;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#cfe1ff;
  font-size:clamp(14px, 2vw, 16px)
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{white-space:nowrap; opacity:.9}
@keyframes scroll-left{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Cards */
.card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px}

/* Footer CTA */
.foot-cta{background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 100%)}

/* Loading state */
body{opacity:0; transition:opacity .5s ease}
body.loaded{opacity:1}

/* Enhanced animations */
.reveal{opacity:0; transform:translateY(40px) scale(0.95); transition:all .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.reveal.is-visible{opacity:1; transform:translateY(0) scale(1)}

/* Stagger animations */
.stagger-container > *{opacity:0; transform:translateY(30px); transition:all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.stagger-container > *.stagger-visible{opacity:1; transform:translateY(0)}

/* Hover transitions */
.testimonial-card, .benefit-item, .problem-item, .faq-item{
  transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

/* Pulse animations */
.urgency, .urgency-text{transition:transform .2s ease}



/* Enhanced button animations */
.btn{transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change:transform}
.btn:active{transform:translateY(-1px) scale(0.98)}

/* Floating elements */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.benefit-number{animation:float 3s ease-in-out infinite}
.problem-icon{animation:float 2.5s ease-in-out infinite; animation-delay:.5s}

/* Glow effects */
.highlight{animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 5px #ff6b35}to{text-shadow:0 0 20px #ff6b35, 0 0 30px #ff6b35}}

/* Shake animation for urgent elements */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.countdown{animation:shake .5s ease-in-out infinite; animation-delay:2s}

/* Bounce animation for stars */
.stars{animation:bounce 1s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Gradient animation for tags */
.tag{background:linear-gradient(45deg, #ff6b35, #ff4757, #ff6b35, #ff4757); background-size:300% 300%; animation:gradientShift 3s ease infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Purchase Notification */
.purchase-notification{
  position:fixed; bottom:20px; left:20px; z-index:1000;
  background:linear-gradient(135deg, var(--green), #1e7e34);
  border-radius:12px; padding:16px; box-shadow:0 8px 32px rgba(0,0,0,.3);
  transform:translateX(-400px); opacity:0;
  transition:all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  max-width:300px; border:2px solid rgba(255,255,255,.2);
}
.purchase-notification.show{
  transform:translateX(0); opacity:1;
}
.notification-content{
  display:flex; align-items:center; gap:12px;
}
.notification-icon{
  font-size:24px; flex-shrink:0;
}
.notification-text{
  color:white; font-size:14px; line-height:1.4;
}
.notification-name{
  font-weight:700; margin-bottom:2px;
}
.notification-message{
  opacity:.9;
}

@media (max-width: 480px){
  .purchase-notification{
    left:16px; right:16px; max-width:none;
    transform:translateY(100px);
  }
  .purchase-notification.show{
    transform:translateY(0);
  }
}

/* Mobile First - Celular */
@media (max-width: 480px){
  .container{padding:0 20px}
  .headline{font-size:clamp(28px, 8vw, 40px); line-height:1.3}
  .subheadline{font-size:16px; line-height:1.4}
  .lead{font-size:18px; line-height:1.6}
  
  section{padding:50px 0}
  header{padding:50px 0 40px}
  
  .price-box{margin:24px auto; padding:20px}
  .current-price{font-size:26px}
  
  .social-proof{flex-direction:column; gap:16px}
  .proof-item{font-size:14px; padding:12px 16px}
  
  .problems-grid, .benefits-grid, .testimonials-grid, .faq-grid{grid-template-columns:1fr; gap:24px}
  .problem-item, .benefit-item, .testimonial-card, .faq-item{padding:24px}
  
  .problem-item h3, .benefit-item h3, .faq-item h4{font-size:20px}
  .problem-item p, .benefit-item p, .faq-item p{font-size:16px; line-height:1.6}
  
  .offer-box{margin:24px 16px}
  .offer-content{padding:24px}
  .cta-section{padding:24px}
  .btn{padding:16px 28px; font-size:16px}
  .btn-mega{padding:18px 32px; font-size:18px}
  
  .testimonial-author{flex-direction:column; text-align:center; gap:12px}
  .bonus-item{flex-direction:column; text-align:center; gap:12px}
  
  .marquee-track{font-size:16px}
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px){
  .container{padding:0 20px}
  .headline{font-size:clamp(28px, 6vw, 48px)}
  .lead{font-size:18px}
  
  section{padding:60px 0}
  header{padding:60px 0 40px}
  
  .social-proof{flex-wrap:wrap; justify-content:center; gap:16px}
  .proof-item{font-size:13px}
  
  .problems-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:repeat(2, 1fr)}
  .testimonials-grid{grid-template-columns:repeat(2, 1fr)}
  .faq-grid{grid-template-columns:repeat(2, 1fr)}
  
  .offer-content{padding:32px}
  .cta-section{padding:28px}
  
  .testimonial-author{flex-wrap:wrap; justify-content:space-between}
}

/* Desktop */
@media (min-width: 769px){
  .problems-grid{grid-template-columns:repeat(3, 1fr)}
  .benefits-grid{grid-template-columns:repeat(3, 1fr)}
  .testimonials-grid{grid-template-columns:repeat(3, 1fr)}
  .faq-grid{grid-template-columns:repeat(2, 1fr)}
}

/* Large Desktop */
@media (min-width: 1200px){
  .benefits-grid{grid-template-columns:repeat(3, 1fr)}
  .testimonials-grid{grid-template-columns:repeat(3, 1fr)}
  .container{max-width:1400px}
}