/* Global Styles */
:root {
    --primary: #C81D25;
    /* Vermelho Frutas */
    --primary-dark: #8F0F14;
    /* Vermelho Profundo */
    --accent: #E53935;
    /* Vermelho Framboesa */
    --soft-red: #F26A6A;
    /* Rosa Avermelhado */
    --text-main: #3A3A3A;
    /* Cinza Escuro */
    --text-light: #666666;
    --bg-light: #F5F5F5;
    /* Branco Gelo */
    --white: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 15px 40px rgba(200, 29, 37, 0.25);
    --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 50%, #FFF0F0 100%);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Background Texture for Premium Feel */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(200, 29, 37, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(200, 29, 37, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 1rem;
    font-weight: 700;
    line-height: 1.1;
}

h1 {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
}

p {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

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

/* Utilities */
.rounded-img {
    border-radius: 20px;
}

.shadow-lg {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

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

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

.text-gray {
    color: rgba(255, 255, 255, 0.8);
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass Effect */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    cursor: pointer;
    background-size: 200% auto;
}

.btn-primary {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--accent) 51%, var(--primary) 100%);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(200, 29, 37, 0.4);
}

.btn-primary:hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    background: var(--primary);
    color: white;
    border-radius: 30px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-buy {
    background: #00C851;
    /* Green commonly converts better, but sticking to palette: */
    background: linear-gradient(to right, #11998e, #38ef7d);
    /* Fresh Green for health */
    /* Or User Palette Red? Sales usually green. Let's stick to Red for branding or Green for contrast.
       User requested palette to be strictly adhered to. Let's use the USER RED but very bright. */
    background: linear-gradient(135deg, var(--primary), #ff4d4d);
    color: white;
}

.btn-buy:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    z-index: 1000;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

/* Hero Section */
.hero {
    position: relative;
    padding: 2rem 0 5rem;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

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

.hero-text {
    max-width: 600px;
}

.pill-tag {
    background: rgba(200, 29, 37, 0.1);
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.hero-actions {
    margin-top: 2.5rem;
}

.background-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60rem;
    height: 60rem;
    background: radial-gradient(circle, rgba(200, 29, 37, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(200, 29, 37, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(200, 29, 37, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(200, 29, 37, 0);
    }
}

.hero-image img {
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    border-radius: 20px;
    /* Optional if image is blocky, remove if transparent png */
}

/* Sections */
.section {
    padding: 100px 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* Split Layout for Side-by-Side */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .split-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.split-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

.split-text h2 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.split-text p {
    margin-bottom: 1rem;
    line-height: 1.4;
}

.large-text {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.highlight-bg {
    background: rgba(200, 29, 37, 0.1);
    color: var(--primary);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
}

/* Agitation */

/* Agitation */
.card {
    padding: 2.5rem;
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.icon-box {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

/* Dark Section */
.dark-bg {
    background-color: #1a1a1a;
    color: white;
    position: relative;
}

.dark-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(45deg, rgba(200, 29, 37, 0.1), transparent);
    pointer-events: none;
}

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

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 1.5rem;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(200, 29, 37, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.03);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(200, 29, 37, 0.2);
    z-index: 10;
}

.feature-card:hover::before {
    opacity: 1;
}

/* 3D Icon Container */
.icon-3d-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: radial-gradient(circle at 30% 30%, #fff5f5, #eccbcd);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset -5px -5px 15px rgba(0, 0, 0, 0.1),
        inset 5px 5px 15px rgba(255, 255, 255, 0.8),
        0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
}

.icon-3d {
    font-size: 3.5rem;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
    display: block;
    transition: transform 0.3s ease;
}

.feature-card:hover .icon-3d-container {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
        inset -5px -5px 20px rgba(0, 0, 0, 0.15),
        inset 5px 5px 20px rgba(255, 255, 255, 0.9),
        0 15px 30px rgba(200, 29, 37, 0.3);
}

.feature-card:hover .icon-3d {
    animation: vibrate 0.4s linear infinite both;
}

@keyframes vibrate {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.feature-card h4 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Pivot */
.pivot {
    background: white;
}

.big-statement {
    font-size: 3rem;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.subtitle.twist {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.manifesto {
    max-width: 800px;
    padding: 1.5rem 2rem;
    font-size: 1.25rem;
}

.manifesto p {
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.manifesto p:last-child {
    margin-bottom: 0;
}

/* Solution */
.solution {
    background: linear-gradient(180deg, #fff, #fef2f2);
}

.product-image-container {
    text-align: center;
}

.product-image-container img {
    margin: 0 auto;
    max-height: 500px;
    /* Adjust based on image */
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.benefits-list li {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.benefits-list li:last-child {
    margin-bottom: 0;
}

.check-icon {
    font-size: 1.5rem;
    background: var(--bg-light);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.benefits-list li strong {
    display: block;
    margin-bottom: 0.25rem;
}

.benefits-list li p {
    margin-bottom: 0;
    line-height: 1.3;
    font-size: 1rem;
}

/* Persona */
.grad-bg {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.checklist-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.check-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 2rem;
    width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

.check-item p {
    color: white;
}

.big-check {
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    display: block;
    margin-bottom: 1rem;
}

.highlight-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

/* Method */
.method-card {
    background: white;
    padding: 4rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.badge {
    background: var(--text-main);
    color: white;
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.results-row {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.result-box {
    display: flex;
    flex-direction: column;
}

.result-box strong {
    font-size: 2rem;
    color: var(--primary);
}

/* Usage */
.step-process {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

.step {
    width: 200px;
    position: relative;
}

.step-num {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    font-weight: 900;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 20px rgba(200, 29, 37, 0.3);
}

.step-line {
    height: 2px;
    flex: 1;
    background: #ddd;
    margin: 0 1rem;
    max-width: 100px;
    transform: translateY(-40px);
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
    width: 100%;
}

.pricing-card {
    background: white;
    border-radius: 22px;
    padding: 2px;
    /* Extremely tight fit to the image */
    box-shadow: var(--shadow);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid var(--primary);
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fit-content;
    /* Follow the image height */
}

.pricing-card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 30px 60px rgba(200, 29, 37, 0.3);
    z-index: 10;
}

.pricing-card a {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.price-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.pricing-card:hover .price-img {
    transform: scale(1.02);
}

.best-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(200, 29, 37, 0.4);
    z-index: 10;
}

.pricing-card.bestseller {
    transform: scale(1.05);
    /* Slightly larger by default */
}

.pricing-card.bestseller:hover {
    transform: translateY(-15px) scale(1.1);
}

.btn-buy {
    background: linear-gradient(135deg, var(--primary), #ff4d4d);
    color: white;
    width: 100%;
    max-width: 90%;
    /* Prevent it from being edge-to-edge if it looks too big */
    margin: 0 auto;
    /* Center the button */
    display: block;
    box-sizing: border-box;
    /* Ensures padding doesn't add to width */
}

/* Footer */
.footer {
    background: #0a0a0a;
    color: white;
    padding: 3rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding-bottom: 2rem;
}

.footer-col h4 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.logo-footer {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--primary);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    font-size: 0.9rem;
    color: #ccc;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.contact-item a {
    color: #ccc;
    font-size: 1rem;
    transition: var(--transition);
}

.contact-item a:hover {
    color: white;
}

.footer-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: white;
    transition: var(--transition);
}

.social-icon:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.footer-bottom {
    background: #000;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

.disclaimer {
    font-size: 0.75rem;
    color: #444;
    margin-top: 0.5rem !important;
}

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

    .contact-item,
    .social-icons {
        justify-content: center;
    }
}

/* Reveal on Scroll Class - Efeito Pulo/Bounce */
.reveal {
    opacity: 0;
    transform: translateY(60px) scale(0.8);
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

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

/* Responsive */
@media (max-width: 900px) {
    .navbar {
        width: 90%;
        top: 10px;
    }

    .hero-container,
    .grid-2,
    .results-row,
    .pricing-grid {
        grid-template-columns: 1fr;
        display: block;
        /* For container/grid-2/results-row which might have mixed display types, but pricing-grid needs block or grid-1-col */
        display: grid;
        /* Reset to grid for uniformity or keep block handling */
    }

    /* Specific override for grid elements to ensure stack */
    .hero-container {
        display: flex !important;
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .grid-2,
    .results-row,
    .pricing-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero {
        padding-top: 1rem;
        text-align: center;
    }

    .hero-image {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .hero-text {
        margin: 0 auto;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .grid-2>div {
        margin-bottom: 2rem;
    }

    .step-process {
        flex-direction: column;
    }

    .section {
        padding: 40px 0;
    }

    .mt-2 {
        margin-top: 1.5rem;
    }

    .mt-3 {
        margin-top: 2rem;
    }

    /* Staggered animation for cards on mobile - Efeito Cascata */
    .feature-card:nth-child(1) {
        transition-delay: 0.1s !important;
    }

    .feature-card:nth-child(2) {
        transition-delay: 0.2s !important;
    }

    .feature-card:nth-child(3) {
        transition-delay: 0.3s !important;
    }

    .feature-card:nth-child(4) {
        transition-delay: 0.4s !important;
    }

    .pricing-card:nth-child(1) {
        transition-delay: 0.15s !important;
    }

    .pricing-card:nth-child(2) {
        transition-delay: 0.3s !important;
    }

    .pricing-card:nth-child(3) {
        transition-delay: 0.45s !important;
    }

    .step-line {
        width: 2px;
        height: 30px;
        margin: 0 auto;
        transform: none;
    }

    .feature-card {
        margin-bottom: 0;
        padding: 1.5rem 1rem;
    }

    .cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }

    .icon-3d-container {
        width: 70px;
        height: 70px;
    }

    .icon-3d {
        font-size: 2.2rem;
    }

    .feature-card h4 {
        font-size: 1rem;
    }

    .feature-card p {
        font-size: 0.8rem;
    }

    .pricing-card.bestseller {
        transform: scale(1);
        /* Reset scale on mobile to fit */
    }
}

/* Specific override for red button matching logo with 3D effect */
.btn-primary,
.btn-buy {
    background: linear-gradient(135deg, #C81D25 0%, #D32F2F 100%);
    box-shadow: 0 6px 0 #8F0F14, 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: none;
    outline: none;
}

.btn-primary:hover,
.btn-buy:hover {
    background: linear-gradient(135deg, #B71C1C 0%, #C62828 100%);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 0 #8F0F14, 0 15px 30px rgba(200, 29, 37, 0.4);
}

.btn-primary:active,
.btn-buy:active {
    transform: translateY(4px) scale(0.98);
    box-shadow: 0 2px 0 #8F0F14, 0 5px 10px rgba(200, 29, 37, 0.2);
}

/* Ensure explicit left alignment for split text if needed */
.text-left {
    text-align: left !important;
    align-items: flex-start !important;
}

/* Make sure the split-layout on mobile stacks correctly */
@media (max-width: 900px) {
    .split-layout {
        display: flex;
        flex-direction: column;
    }

    /* Reverse order for sections where image should come first on mobile */
    .usage .split-layout {
        flex-direction: column-reverse;
    }

    .text-left,
    .big-statement,
    .subtitle.twist,
    .manifesto,
    .lead {
        text-align: center !important;
    }

    .split-text {
        text-align: center !important;
    }
}

/* Vertical Usage Steps */
.step-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.step-row .step-num {
    margin: 0;
    flex-shrink: 0;
}

.step-row p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Marquee Banner */
.marquee-banner {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0.8rem 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 2000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee-track span {
    padding: 0 1rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    white-space: nowrap;
    letter-spacing: 1px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Social Proof Scrolling Gallery */
.social-proof {
    padding-bottom: 4rem;
}

.marquee-gallery-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    display: flex;
}

.marquee-gallery-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: galleryScroll 40s linear infinite;
    /* Slow scroll */
}

/* Pause on hover if desired, but user said no clicking needed */
/* .marquee-gallery-track:hover { animation-play-state: paused; } */

.gallery-item {
    width: 300px;
    height: 300px;
    /* Square format */
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    background: #fff;
    border: 4px solid #fff;
    /* White border for photo look */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    /* Large fade area as requested ("vulto branco") */
    z-index: 2;
    pointer-events: none;
}

.fade-left {
    left: 0;
    background: linear-gradient(to right, #FFF5F5 20%, rgba(255, 255, 255, 0) 100%);
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, #FFF5F5 20%, rgba(255, 255, 255, 0) 100%);
}

@keyframes galleryScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Highlight Text Background */
.highlight-bg {
    background: rgba(200, 29, 37, 0.1);
    color: var(--primary);
    padding: 0 0.5rem;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .gallery-item {
        width: 200px;
        height: 280px;
    }

    .fade-overlay {
        width: 80px;
    }
}

/* Turbo Separator (Double Band) */
.turbo-separator {
    position: relative;
    padding: 3rem 0;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.turbo-track-container {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.turbo-band {
    position: absolute;
    width: 120%;
    background: #000;
    color: #fff;
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.turbo-band span {
    display: inline-block;
    padding-right: 3rem;
    animation: turboScroll 20s linear infinite;
}

.turbo-band.back {
    transform: rotate(2deg) scale(1.1);
    opacity: 0.6;
    filter: blur(2px);
    z-index: 1;
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.7);
}

.turbo-band.front {
    transform: rotate(-3deg) scale(1.1);
    z-index: 2;
    background: #000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.turbo-band.front span {
    animation-direction: reverse;
    /* Optional contrast in movement */
    animation-duration: 25s;
}

.separator-icon {
    color: var(--primary);
    /* Red star for brand accent */
    margin: 0 1rem;
}

@keyframes turboScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .turbo-separator {
        padding: 1.5rem 0;
    }

    .turbo-band {
        font-size: 1.5rem;
        padding: 1rem 0;
    }
}

/* Modern Benefits Section */
.benefits-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.benefit-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: var(--transition);
}

.benefit-row:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    border-color: var(--primary);
}

.benefit-icon {
    font-size: 1.5rem;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.benefit-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.benefit-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.4;
}

.glowing-header {
    text-shadow: 0 0 20px rgba(200, 29, 37, 0.5);
    margin-bottom: 2rem;
}

.product-glow-img {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 30px rgba(200, 29, 37, 0.3));
    width: 100%;
    height: auto;
    max-height: none;
    /* Allow full height */
    object-fit: contain;
    /* Ensure full image is shown */
    margin: 0;
}