:root {
    --primary: #8A9CFF; /* Lavender Blue */
    --secondary: #FFB37C; /* Soft Tangerine */
    --accent: #A8E6CF; /* Mint Green */
    --bg-main: #FDFCF0; /* Warm Cream */
    --text-main: #1A2B4C; /* Deep Navy */
    --text-light: #4A5B7C;
    --card-bg: rgba(255, 255, 255, 0.7); 
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 90%; max-width: 1100px; margin: 0 auto; padding: 3.5rem 0;
}

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }

/* FIXING HERO LAYOUT (No white space) */
.hero {
    position: relative;
    background-color: var(--bg-main);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 2rem;
    overflow: hidden;
}
.hero-bg-accent {
    position: absolute; top: -20%; left: -10%; width: 60%; height: 80%;
    background: radial-gradient(circle, rgba(138,156,255,0.25) 0%, rgba(253,252,240,0) 70%);
    border-radius: 50%; z-index: 0;
}
.hero-content {
    display: flex; align-items: center; justify-content: space-between; gap: 3rem; z-index: 2; width: 100%;
}
.hero-text { flex: 1.2; }
.hero-image { flex: 1; }
.badge {
    background-color: var(--accent); color: var(--text-main); font-weight: 600; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; display: inline-block; margin-bottom: 1.5rem;
}
.headline { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--text-main); }
.sub-headline { font-size: 1.2rem; color: var(--text-light); margin-bottom: 2rem; max-width: 550px; }
.image-wrapper img { max-width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); display: block; }
.hero-wave { position: absolute; bottom: -2px; left: 0; width: 100%; z-index: 1; }
.hero-wave svg { display: block; width: 100%; height: 80px; }
.trust-indicators { margin-top: 2rem; font-size: 0.9rem; color: var(--text-light); display: flex; flex-direction: column; gap: 0.5rem; font-weight: 500;}

/* BUTTONS */
.cta-button {
    display: inline-block; background-color: var(--secondary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; padding: 1.2rem 2.5rem; border-radius: 50px; border: none; cursor: pointer; box-shadow: 0 10px 20px rgba(255, 179, 124, 0.4); transition: all 0.3s ease;
}
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(255, 179, 124, 0.6); }
.pulse-effect { animation: pulse 2s infinite; }
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 179, 124, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(255, 179, 124, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 179, 124, 0); }
}

/* GLASSMORPHISM */
.glass-effect, .glass-panel {
    background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; box-shadow: 0 20px 40px rgba(138, 156, 255, 0.08);
}

/* AGITATION */
.agitation { padding: 4rem 0; text-align: center; }
.section-title { font-size: 2.5rem; margin-bottom: 3rem; color: var(--text-main); text-align: center; }
.pain-points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 4rem; }
.pain-card { padding: 2.5rem; transition: transform 0.3s; }
.pain-card:hover { transform: translateY(-10px); }
.highlight-card { border: 2px solid var(--secondary); background: rgba(255, 179, 124, 0.1); }
.icon-box { font-size: 3rem; margin-bottom: 1rem; }
.relief-box { background: var(--primary); color: #fff; padding: 3rem; border-radius: 24px; max-width: 800px; margin: 0 auto; }
.relief-box h3 { font-size: 1.8rem; margin-bottom: 1rem; }
.relief-box h3 span { color: var(--accent); }

/* VISUAL JOURNEY TIMELINE */
.journey { padding: 5rem 0; background: linear-gradient(180deg, #FDFCF0 0%, #fff 100%); }
.timeline-container { position: relative; max-width: 800px; margin: 4rem auto 0; padding: 2rem 0; }
.timeline-line {
    position: absolute; left: 40px; top: 0; bottom: 0; width: 6px; background: rgba(138,156,255,0.2); border-radius: 10px;
}
.timeline-fill {
    position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--primary); border-radius: 10px; transition: height 0.5s ease-out;
}
.timeline-step { display: flex; align-items: flex-start; margin-bottom: 4rem; position: relative; width: 100%; padding-left: 100px;}
.timeline-step:last-child { margin-bottom: 0; }
.step-dot {
    position: absolute; left: 23px; top: 10px; width: 40px; height: 40px; background: var(--secondary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; z-index: 2; border: 4px solid #fff; box-shadow: 0 5px 15px rgba(255,179,124,0.4);
}
.step-content { padding: 2rem; width: 100%; border-top: 4px solid var(--primary); }
.step-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary); }
.step-content p { color: var(--text-light); }

/* SOLUTIONS */
.solution { padding: 5rem 0; background: #fff; }
.solution-header { text-align: center; margin-bottom: 4rem; }
.volumes-grid { display: flex; flex-direction: column; gap: 4rem; }
.volume-item { display: flex; align-items: center; gap: 3rem; }
.volume-item:nth-child(even) { flex-direction: row-reverse; }
.vol-image { flex: 1; border-radius: 24px; overflow: hidden; }
.vol-image img { width: 100%; display: block; object-fit: cover; }
.vol-content { flex: 1.2; padding: 3rem; }
.vol-content h3 { font-size: 2rem; margin: 1rem 0; }
.vol-content li { margin-bottom: 1rem; position: relative; padding-left: 1.8rem; color: var(--text-light); }
.vol-content li::before { content: '✓'; color: var(--accent); position: absolute; left: 0; font-weight: bold; font-size: 1.2rem; }
.highlight-badge { background: var(--secondary); }

/* OFFER STACK (BÔNUS) */
.offer-stack-section { padding: 4rem 0; background: #FDFCF0; }
.stack-container { max-width: 700px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 3rem; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
.stack-items { display: flex; flex-direction: column; gap: 1rem; }
.stack-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px dashed rgba(0,0,0,0.1); }
.stack-item:last-child { border-bottom: none; }
.stack-text { flex: 1; display: flex; flex-direction: column; }
.stack-text strong { font-size: 1.1rem; color: var(--text-main); }
.stack-text span { font-size: 0.9rem; color: var(--text-light); }
.stack-value { font-weight: bold; color: var(--text-light); text-decoration: line-through; }
.premium-stack { background: rgba(255, 179, 124, 0.1); border-radius: 12px; padding: 1.5rem; border: 2px solid var(--secondary); }
.premium-stack .stack-value { color: var(--secondary); font-size: 1.2rem; }

/* FINAL OFFER */
.offer { padding: 6.5rem 0 5rem; text-align: center; background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="%238A9CFF" opacity="0.2"/></svg>') repeat; }
.offer-box { max-width: 800px; margin: 0 auto; padding: 3rem 3rem 4rem; position: relative; }
.mockup-floating { margin: -9rem auto 2rem; width: 240px; animation: float 6s infinite ease-in-out; }
.mockup-floating img { width: 100%; height: auto; display: block; border-radius: 15px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.offer-box h2 { font-size: 2rem; margin-bottom: 1rem; }
.price-strike { font-size: 1.2rem; color: var(--text-light); text-decoration: line-through; }
.price-tag { color: var(--primary); font-family: var(--font-heading); font-weight: 800; line-height: 1; margin: 1.5rem 0; }
.currency { font-size: 2rem; vertical-align: super; } .amount { font-size: 7rem; } .cents { font-size: 2rem; }
.safe-checkout { margin-top: 1.5rem; font-size: 1rem; color: var(--text-light); font-weight: 600; }
.large-btn { font-size: 1.3rem; padding: 1.5rem 3rem; width: 100%; max-width: 500px; }

/* FAQ ACCORDION */
.faq-section { padding: 5rem 0; background: #fff; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-title { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: var(--text-main); }
.cm-accordion { border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1rem; }
.accordion-header { padding: 1.5rem 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content p { padding-bottom: 1.5rem; color: var(--text-light); }
.cm-accordion.active .accordion-content { max-height: 500px; }
.cm-accordion.active .icon { transform: rotate(45deg); }
.icon { transition: transform 0.3s ease; font-size: 1.5rem; color: var(--primary); }

/* SCROLL REVEAL & FOOTER */
.footer { background: var(--text-main); color: #fff; text-align: center; padding: 2.5rem 0; font-size: 0.9rem; }
.cm-reveal-up, .cm-reveal-down, .cm-reveal-left, .cm-reveal-right, .cm-reveal-fade { opacity: 0; }

@media (max-width: 992px) {
    .hero { min-height: auto; padding: 6rem 0 4rem; text-align: center; }
    .hero-content { flex-direction: column; }
    .headline { font-size: 2.8rem; }
    .trust-indicators { align-items: center; }
    .volume-item, .volume-item:nth-child(even) { flex-direction: column; }
    .vol-content { padding: 2rem; }
}

@media (max-width: 768px) {
    .container { padding: 2.5rem 0; }
    .headline { font-size: 2.2rem; }
    .sub-headline { font-size: 1rem; margin-bottom: 1.5rem; }
    .cta-button { font-size: 1rem; padding: 1rem 1.5rem; width: 100%; text-align: center; }
    .section-title { font-size: 2rem; margin-bottom: 2rem; }
    
    .timeline-line { left: 20px; }
    .step-dot { left: 3px; width: 34px; height: 34px; font-size: 1rem; }
    .timeline-step { padding-left: 60px; margin-bottom: 2rem; }
    .step-content { padding: 1.5rem; }
    .step-content h3 { font-size: 1.2rem; }
    
    .stack-container { padding: 1.5rem; border-radius: 16px; }
    .stack-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem 0; }
    .stack-text strong { font-size: 1rem; }
    .premium-stack { padding: 1rem; }
    
    .offer-box { padding: 2rem 1.5rem 3rem; }
    .mockup-floating { margin: -7rem auto 1rem; width: 180px; }
    .offer-box h2 { font-size: 1.5rem; }
    .amount { font-size: 4.5rem; }
    .currency, .cents { font-size: 1.5rem; }
    .safe-checkout { font-size: 0.85rem; }
    
    .faq-title { font-size: 2rem; }
    .accordion-header { font-size: 1.1rem; padding: 1rem 0; }
}