:root {
    --bg-dark: #0B0620;
    --bg-darker: #050314;
    --primary: #6FB921;
    /* Neon Lime */
    --secondary: #7a00df;
    /* Vibrant Purple */
    --text-white: #ffffff;
    --text-gray: #B0B0C0;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Background Ambient Glow */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* Behind everything */
    pointer-events: none;
}

.background-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background:
        radial-gradient(circle at 10% 20%, rgba(122, 0, 223, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(111, 185, 33, 0.1) 0%, transparent 40%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #fff, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* HERO SECTION */
.hero-section {
    padding: 6rem 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.highlight {
    color: var(--secondary);
    text-shadow: 0 0 20px rgba(122, 0, 223, 0.5);
}

.highlight-alt {
    color: var(--primary);
    font-weight: 800;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-gray);
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--text-gray);
}

.hero-image .image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
}

.hero-image:hover .image-wrapper {
    transform: perspective(1000px) rotateY(0deg);
}

.hero-image img {
    width: 100%;
    display: block;
}

.badge {
    background: rgba(111, 185, 33, 0.2);
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 1rem;
    border: 1px solid var(--primary);
}

/* BUTTONS */
.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), #8FD840);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(111, 185, 33, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(111, 185, 33, 0.6);
}

.cta-button.large-btn {
    font-size: 1.2rem;
    padding: 1.2rem 3rem;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(111, 185, 33, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(111, 185, 33, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(111, 185, 33, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* GLASS CARDS */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 20px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

/* PAIN POINTS SECTION */
.pain-points-section {
    padding: 5rem 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.glass-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.glass-card h3 {
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.glass-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
}

/* IMPACT SECTION */
.impact-section {
    padding: 5rem 0;
    background: rgba(0, 0, 0, 0.2);
}

.impact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.impact-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    opacity: 0.9;
}

.impact-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.check-list {
    list-style: none;
    margin-top: 2rem;
}

.check-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
}

/* PRODUCT SECTION */
.product-section {
    padding: 6rem 0;
}

.product-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    align-items: center;
}

.product-image img {
    max-width: 450px;
    width: 100%;
    border-radius: 10px;
    /* Simulate 3D Book Cover */
    box-shadow:
        -15px 15px 30px rgba(0, 0, 0, 0.5),
        -5px 0 10px rgba(0, 0, 0, 0.3);
    transform: rotateY(-15deg);
    transition: transform 0.5s ease;
}

.product-image:hover img {
    transform: rotateY(0deg) scale(1.05);
}

.product-details {
    max-width: 500px;
}

.product-details h3 {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.product-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.feature-list {
    list-style: none;
    margin-bottom: 2rem;
}

.feature-list li {
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BONUS SECTION */
.bonus-section {
    padding: 5rem 0;
}

/* FEATURED BONUSES */
.featured-bonuses {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
}

.featured-bonus-card {
    background: #1a0f35;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: visible;
    margin-top: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* RIBBON STYLE */
.bonus-ribbon-wrapper {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 80%;
    max-width: 300px;
}

.bonus-ribbon {
    background: #FFD700;
    color: #000;
    font-weight: 900;
    text-align: center;
    padding: 10px 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    clip-path: polygon(0% 0%, 100% 0%, 95% 50%, 100% 100%, 0% 100%, 5% 50%);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    transform: rotate(-2deg);
}

.badge-free {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #FFD700;
    color: #000;
    font-weight: 800;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 11;
    transform: rotate(5deg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.fb-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
}

.fb-img img {
    width: 100%;
    border-radius: 10px;
    transform: rotate(-3deg);
    box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3);
    border: 3px solid #fff;
}

.fb-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
}

.fb-info p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
}

.fb-value {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* EXTRA BONUSES LIST */
.extra-bonuses-container {
    border: 2px solid var(--secondary);
    border-radius: 20px;
    background: rgba(11, 6, 32, 0.8);
    overflow: hidden;
    margin-top: 3rem;
}

.extra-bonuses-header {
    background: #FFD700;
    color: #000;
    text-align: center;
    padding: 15px;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    margin-bottom: 2rem;
}

.extra-bonuses-header h3 {
    font-weight: 900;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: #000;
}

.extra-bonuses-header p {
    font-weight: 700;
    font-size: 1rem;
    margin-top: 5px;
    color: #333;
}

.extra-bonuses-list {
    display: grid;
    gap: 1.5rem;
    padding: 0 2rem 2rem 2rem;
}

.small-bonus-item {
    display: flex;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 10px;
    align-items: center;
}

.sb-img {
    width: 70px;
    min-width: 70px;
}

.sb-img img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.sb-info h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #fff;
}

.sb-header {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.sb-tag {
    color: var(--primary);
    font-weight: 700;
}

.sb-val {
    color: var(--text-gray);
}

@media (max-width: 768px) {
    .fb-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .fb-img img {
        max-width: 200px;
        margin: 0 auto;
    }

    .small-bonus-item {
        flex-direction: column;
        text-align: center;
    }
}

/* TESTIMONIALS SECTION */
.testimonials-section {
    padding: 5rem 0;
    overflow: hidden;
}

.testimonials-scroller {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonials-scroller::-webkit-scrollbar {
    display: none;
}

.scroller-inner {
    display: flex;
    gap: 20px;
}

.testimonials-scroller img {
    width: 300px;
    border-radius: 15px;
    scroll-snap-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.testimonials-scroller img:hover {
    transform: scale(1.02);
}

/* FOOTER */
footer {
    padding: 3rem 0;
    background: var(--bg-darker);
    text-align: center;
    color: var(--text-gray);
    font-size: 0.9rem;
    border-top: 1px solid var(--glass-border);
}


/* ANIMATIONS */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* FAQ SPECIFIC STYLES */
.faq-card {
    margin-bottom: 15px;
    cursor: pointer;
    overflow: hidden;
    /* Essential for animation */
}

.faq-card summary {
    list-style: none;
    /* Hide default triangle */
    font-weight: 600;
    min-height: 55px;
    /* Enforce consistent height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Or center if preferred, usually left aligned for questions looks better, but image shows centeredish? Let's keep existing flow or check image. Image looks Left aligned text but centered block? User said "ajustar o tamanho... ficarem da mesma altura". */
    padding: 15px 20px;
    position: relative;
    transition: color 0.3s ease;
}

/* Custom indicator if needed, or just cleaner look */
.faq-card summary::-webkit-details-marker {
    display: none;
}

.faq-card p {
    margin-top: 15px;
    color: var(--text-gray);
    padding-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle separator */
    padding-top: 15px;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .section-title {
        font-size: 2rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .impact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .impact-image {
        order: -1;
    }

    /* Image on top */

    .product-display {
        flex-direction: column;
        text-align: center;
    }

    .feature-list li {
        justify-content: center;
    }

    .glass-card {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 15px;
    }

    .hero-section {
        padding-top: 4rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .cta-button {
        width: 100%;
        text-align: center;
    }

    /* Compact FAQ on Mobile */
    .faq-card summary {
        min-height: 45px;
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}


/* GUARANTEE SECTION STYLES */
.guarantee-section {
    padding: 5rem 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.guarantee-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
}

.guarantee-badge-wrapper {
    display: flex;
    justify-content: center;
}

.guarantee-badge-img {
    max-width: 250px;
    width: 100%;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
    animation: pulse-slow 3s infinite;
}

@keyframes pulse-slow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.guarantee-content h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.guarantee-content p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-gray);
}

.guarantee-content strong {
    color: var(--text-white);
}

.guarantee-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 2rem;
}

.g-feature {
    background: linear-gradient(90deg, rgba(111, 185, 33, 0.1) 0%, transparent 100%);
    border: none;
    border-left: 3px solid var(--primary);
    padding: 15px 20px;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.g-feature:hover {
    padding-left: 25px;
    background: linear-gradient(90deg, rgba(111, 185, 33, 0.2) 0%, transparent 100%);
}

.g-icon {
    font-size: 1.5rem;
    color: var(--primary);
    filter: drop-shadow(0 0 5px var(--primary));
}

@media (max-width: 768px) {
    .guarantee-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .guarantee-badge-wrapper {
        margin-bottom: 1rem;
    }

    .guarantee-badge-img {
        max-width: 200px;
    }

    .guarantee-features-grid {
        grid-template-columns: 1fr;
    }

    .guarantee-content h2 {
        font-size: 1.8rem;
    }
}