:root {
    /* Palette inspired by Pink Aesthetic - STRONGER */
    --vibrant-a: #db2777;
    /* Strong Pink 600 */
    --vibrant-b: #831843;
    /* Deep Pink 900 */
    --highlight: #f43f5e;
    /* Rose/Red for warning/highlight ("Lanche Pronto") */

    --light: #ffffff;
    --light-off: #f8fafc;
    --text-on-gradient: #010101;
    /* White text for contrast on dark pink bg */
    --text-on-card: #1e293b;
    /* Slate 800 - High contrast on white cards */

    --card-bg: rgba(255, 255, 255, 0.95);
    --shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --border-radius-pill: 9999px;
    --border-radius-card: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    /* 1. Novo Fundo (Gradiente Linear - Rosa Vibrante + Efeito Vidro/Profundidade) */
    background: #efe5ca;
    background-size: 100% 100%;

    min-height: 100vh;
    color: var(--text-on-gradient);
    overflow-x: hidden;
    line-height: 1.6;
    background-attachment: fixed;
    /* Keeps gradient nice while scrolling */
}

/* 2. Tipografia de Alto Contraste */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-on-gradient);
    font-weight: 800;
    /* Extra Bold */
    line-height: 1.1;
    margin-bottom: 1rem;
}

p,
li,
span {
    color: #010101;
    /* Off-white for readability on dark bg */
}

a {
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Utilities */
.text-center {
    text-align: center;
}

/* Highlight Elements */
.highlight-warn {
    color: var(--highlight);
    text-shadow: 0 2px 10px rgba(250, 204, 21, 0.3);
}

.gradient-text {
    /* On this blue background, gradient text might be hard to read if it's blue. 
       Let's make it stand out with the Highlight color or pure white with glow.
       User requested high contrast. Let's stick to White or Highlight. */
    color: var(--light);
    text-shadow: 0 0 20px rgba(219, 39, 119, 0.3);
}

/* 3. Botões (Pill Shape & Clean) */
/* Disable hover effect for specific mockup */
.bonus-card-premium.no-hover-mockup:hover .bonus-mockup {
    transform: none !important;
}

/* 3. Botões (Hyper-Glossy Neon Glass Effect - Darker & Animated Shine) */
.cta-button {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 18px 45px;
    border-radius: 999px;

    /* Vivid Green Base #168221 */
    background: linear-gradient(135deg, #25a230 0%, #168221 80%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Text */
    color: white !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Stronger text shadow for contrast */

    /* Border Light */
    border: 1px solid rgba(134, 239, 172, 0.4);

    /* Hyper Glow & Shadows - Adjusted for Green #168221 */
    box-shadow:
        /* Deep Inner Glow */
        inset 0 0 30px rgba(22, 130, 33, 0.7),
        /* Sharp Top Reflection */
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        /* Bottom Depth */
        inset 0 -5px 15px rgba(0, 0, 0, 0.3),
        /* External Glow */
        0 10px 25px -5px rgba(22, 130, 33, 0.6),
        0 0 15px rgba(34, 197, 94, 0.4);

    /* Animation & Transition */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateZ(0);
    overflow: hidden;
}

/* Shining Light Passing Through (New Effect) */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    animation: shine-pass 3.5s infinite ease-in-out;
    z-index: 2;
}

/* Static Glass Top Reflection */
.cta-button::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 40%;
    border-radius: 999px 999px 200px 200px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.15);
    box-shadow:
        inset 0 0 40px rgba(16, 185, 129, 0.8),
        0 20px 40px rgba(5, 150, 105, 0.6);
}

.cta-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
        inset 0 0 20px rgba(0, 255, 127, 0.9),
        0 5px 15px rgba(0, 255, 127, 0.4);
}

.cta-button.pulse-animation {
    /* Combine pulse with shine? No, shine is on ::before. Pulse is on element. */
    animation: neon-pulse 2s infinite ease-in-out;
}

@keyframes shine-pass {
    0% {
        left: -100%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        left: 200%;
        opacity: 0;
    }

    100% {
        left: 200%;
        opacity: 0;
    }
}

@keyframes neon-pulse {
    0% {
        box-shadow:
            inset 0 0 30px rgba(0, 255, 127, 0.6),
            inset 0 4px 6px rgba(255, 255, 255, 0.6),
            0 15px 35px -5px rgba(0, 200, 100, 0.5),
            0 0 20px rgba(0, 255, 127, 0.4);
    }

    50% {
        box-shadow:
            inset 0 0 30px rgba(0, 255, 127, 0.8),
            inset 0 4px 6px rgba(255, 255, 255, 0.7),
            0 15px 45px -5px rgba(0, 200, 100, 0.6),
            0 0 35px rgba(0, 255, 127, 0.7);
        /* Larger Halo */
    }

    100% {
        box-shadow:
            inset 0 0 30px rgba(0, 255, 127, 0.6),
            inset 0 4px 6px rgba(255, 255, 255, 0.6),
            0 15px 35px -5px rgba(0, 200, 100, 0.5),
            0 0 20px rgba(0, 255, 127, 0.4);
    }
}


.sub-cta {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
    margin-top: 4px;
    text-align: center;
    color: inherit;
}

/* SECTION RESET - REMOVE OLD BACKGROUNDS */
.hero-section,
.pain-section,
.objections-section,
.solution-section,
.bonuses-section,
.offer-section,
.faq-section {
    background: transparent !important;
    /* Allow body gradient to show */
    padding: 80px 0;
    position: relative;
}

/* Hero Section Specifics */
.hero-section {
    padding-top: 100px;
    text-align: center;
}

.hero-title-centered {
    font-family: 'Nunito', sans-serif;
    /* Rounded font */
    font-size: 4.5rem;
    /* Slightly larger for impact */
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 1.5rem;

    /* Glass Text Base Effect (White/Ice) */
    color: #010101;
    /* Fallback */
    background: none;
    background-size: auto;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;

    /* Static Shine/Glow */
    filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.15));
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
    /* Subtle outer glow */
}

/* Ensure child spans also get the rounded look but distinct glassy colors */
.hero-title-centered .highlight-warn {
    font-family: 'Nunito', sans-serif;

    /* Red Lamp Effect - Balanced & Readable */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
    color: #ef4444;
    /* Slightly deeper red for better text definition */

    font-size: 1.05em;

    /* Balanced Glow: Tighter shadows for legibility, softer outer glow for atmosphere */
    text-shadow:
        0 0 2px rgba(255, 50, 50, 0.6),
        /* Very tight crisp glow */
        0 0 12px rgba(220, 20, 60, 0.5);
    /* Ambient lamp glow */

    /* Slight drop shadow to lift it off the background for readability */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.hero-title-centered .gradient-text {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(180deg,
            #fef08a 0%,
            /* Yellow 200 */
            #facc15 45%,
            /* Yellow 400 - Safety Yellow */
            #ca8a04 55%,
            /* Yellow 600 - Sharp Cut */
            #eab308 100%
            /* Yellow 500 */
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(161, 98, 7, 0.4));
}

/* Match 'Tempo para si mesma' (#d97706) style for +100 lanches */
.hero-subtitle-centered strong {
    color: #d97706;
    /* Darker Gold / Amber */
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

.pain-conclusion {
    margin-top: 80px;
    /* Increased separation */
    margin-bottom: 30px;
}

/* Hero Carousel */
.carousel-container-hero {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    margin-bottom: 30px;
    z-index: 10;
    /* Soft fade mask on edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track-hero {
    display: flex;
    width: max-content;
    gap: 8px;
    /* Reduced gap for closer images */
    animation: scroll-left 40s linear infinite;
}

.carousel-track-hero:hover {
    animation-play-state: paused;
}

.carousel-item {
    flex: 0 0 auto;
    width: 200px;
    /* Fixed width for consistency */
    height: 140px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.4);
    background: #fff;
    transition: transform 0.3s ease;
}

.carousel-item:hover {
    transform: scale(1.05);
    border-color: #fff;
    z-index: 20;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

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

/* Remove artifacts */
.wave-bottom svg {
    display: none;
}

/* 4. Cards (Clean, Glass-like but Opaque White) */
.pain-card,
.flip-card-front,
.flip-card-back,
.bonus-card-premium,
.offer-card,
.accordion-item {
    background: var(--card-bg) !important;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2rem;
    color: var(--text-on-card);
    /* Ensure readability inside cards */
}

/* Typography override INSIDE cards */
.pain-card p,
.pain-card h1,
.pain-card h2,
.flip-card-front h3,
.flip-card-back p,
.bonus-card-premium h4,
.bonus-card-premium p,
.accordion-content p,
.accordion-header {
    color: var(--text-on-card) !important;
}

/* Pain Grid */
.grid-pain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.pain-card .icon-box {
    font-size: 2.5rem;
    color: #ef4444;
    /* Keep error color but make sure it pops on white */
    margin-bottom: 20px;
    background: #fee2e2;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Objections Flip Cards */
/* Force them to be simple clean cards or keep flip? 
   User asked for "Cards de Conteúdo... mesmo padrão". 
   I will simplify them to static cards or cleaner flip cards matching the theme.*/

.cards-3d-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.flip-card {
    background: transparent !important;
    /* Container transparency */
    width: 300px;
    height: 300px;
    perspective: 1000px;
    box-shadow: none;
    /* Shadow is on inner */
    border: none;
    padding: 0;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Hover effect removed for JS Scroll Control */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
    transition-delay: 1.5s;
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--card-bg) !important;
    color: var(--text-on-card);
}

.flip-card-back {
    transform: rotateY(180deg);
    background: white !important;
    /* Back is also white/clean */
}

.icon-large {
    color: var(--vibrant-a);
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

/* Solution Section */
.timeline {
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

.timeline li {
    padding-left: 30px;
    margin-bottom: 30px;
}

.timeline .time-marker {
    color: var(--highlight);
    /* Yellow highlight */
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content {
    /* Since this is directly on gradient (no card mentioned), text needs to be white */
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
}

.timeline li::after {
    background: var(--highlight);
    box-shadow: 0 0 10px var(--highlight);
}

/* Bonuses */
.bonuses-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.bonus-card-premium {
    background: var(--card-bg) !important;
    border-radius: 30px;
    /* More rounded like reference */
    padding: 30px 20px;
    /* More padding */
    border: 3px solid #fbbf24;
    /* Golden border as requested/referenced */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Center everything */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.bonus-mockup-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    /* Ensure image area is distinct if needed, but transparent is fine */
}

.bonus-mockup {
    width: auto;
    max-width: 160px;
    /* Much smaller constraint */
    max-height: 220px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.2));
    /* Nice floating shadow */
    transition: transform 0.3s ease;
}

.bonus-card-premium:hover .bonus-mockup {
    transform: scale(1.05) translateY(-5px);
}

.bonus-info h4 {
    color: var(--vibrant-b) !important;
    /* Blue text */
    margin-top: 15px;
}

/* Offer Section */
.offer-card {
    background: var(--card-bg) !important;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    border: 4px solid var(--highlight);
    /* Distinctive highlight border if needed, or clean? */
    /* User: "Botões e Cards... Clean". Lets keep border minimal or remove. 
       "Elementos de destaque: ... para badges use cor quente". 
       I will use the highlight color for the price and ribbon. */
    border: none;
}

.offer-card h3 {
    color: var(--text-on-card) !important;
}

/* Delights Section (Reference Style) */
.delights-section {
    padding-bottom: 50px;
    padding-top: 20px;
}

.delights-card-reference {
    background: #fdfaf7;
    /* Cream/Off-white background like print */
    border-radius: 30px;
    padding: 50px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 4px solid #fff;
    /* Slight inner border effect */
}

.delights-header-ref {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    text-align: center;
}

.delights-header-ref h3 {
    color: #be185d;
    /* Strong Pink/Red */
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
}

.cookie-icon {
    font-size: 2rem;
    animation: spin-slow 10s linear infinite;
}

.delights-list-ref {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.delight-column {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.list-item-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    color: #9f1239;
    /* Deep Red/Brown to match print contrast */
    font-weight: 700;
}

.list-item-ref i {
    color: #16a34a;
    /* Green Check */
    font-size: 1.2rem;
    min-width: 24px;
    /* Align text properly */
}

.list-item-ref .small-note {
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 5px;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .delights-card-reference {
        padding: 30px 20px;
    }

    .delights-header-ref h3 {
        font-size: 1.4rem;
    }

    .list-item-ref {
        font-size: 0.95rem;
    }
}

.old-price-red {
    color: #ef4444;
    /* Vibrant Red */
    font-weight: 800;
}


.offer-text {
    color: var(--text-on-card) !important;
    opacity: 0.8;
}

.offer-bundle-img {
    width: 100%;
    max-width: 320px;
    /* Constrain the bundle image size */
    margin: 0 auto 30px;
    /* Center it */
    display: block;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s;
}

.offer-bundle-img:hover {
    transform: scale(1.05);
    /* Slight grow on hover */
}

.price-box {
    margin: 20px 0;
}

.currency,
.amount {
    /* Gold Dark Brilhando */
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 60%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Fallback */
    filter: drop-shadow(0 2px 4px rgba(180, 83, 9, 0.3));
    font-weight: 900;
}

.amount {
    font-size: 5rem;
    letter-spacing: -2px;
}

/* Old ribbon styles removed, see end of file for new 3D Ribbon */
.ribbon-placeholder {
    display: none;
}

.comparison {
    color: #ef4444 !important;
    /* Urgent Red */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* FAQ */
.accordion {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Space between items */
}

.accordion-item {
    background: var(--card-bg) !important;
    border-radius: var(--border-radius-card);
    /* Consistent rounding */
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle border */
    transition: transform 0.2s;
    padding: 0;
    /* Reset padding from generic card rule */
}

.accordion-item:hover {
    transform: translateY(-2px);
}

.accordion-header {
    width: 100%;
    padding: 25px 30px;
    background: transparent;
    border: none;
    text-align: left;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-on-card) !important;
    outline: none;
}

.accordion-header i {
    transition: transform 0.3s ease;
    color: var(--vibrant-a);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s;
    padding: 0 30px;
    /* No vertical padding when closed */
    color: var(--text-on-card) !important;
    opacity: 0.9;
    line-height: 1.6;
}

.accordion-item.active .accordion-content {
    max-height: 300px;
    /* Increased max-height to be safe */
    padding-bottom: 25px;
    /* Add padding when open */
}

/* Footer */
footer {
    padding: 50px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer p {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title-centered {
        font-size: 2.5rem;
    }

    .cta-button {
        width: 100%;
        padding: 20px;
        font-size: 1rem;
    }

    .hero-subtitle-centered {
        font-size: 1.1rem;
    }

    .container {
        padding: 0 1.5rem;
    }
}

/* Mission Section */
.mission-section {
    padding: 80px 0;
}

.mission-card {
    background: #db2777 !important;
    /* Strong Pink */
    border-radius: var(--border-radius-card);
    padding: 50px;
    box-shadow: 0 20px 40px -10px rgba(219, 39, 119, 0.4);
    /* Pink glow shadow */
    max-width: 800px;
    margin: 0 auto;
    color: white;
    /* White text for contrast on strong pink */
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.mission-card h2 {
    color: white !important;
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.benefits-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    background: white;
    /* White background to pop on pink */
    padding: 10px 25px;
    border-radius: 50px;
    color: #db2777;
    /* Pink text to match theme */
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.benefit-item i {
    color: #db2777 !important;
    /* Pink icon (same as box background) */
}

.benefit-item span {
    color: #d97706 !important;
    /* Gold text */
    font-weight: 800;
    /* Extra bold for gold visibility */
}

/* Solução Intro Section */
.solution-intro-section {
    padding: 40px 0 80px;
    /* Less top padding to sit close to Pain section */
}

.solution-card {
    background: white;
    border-radius: 30px;
    padding: 60px 40px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    /* Subtle Outline */
    position: relative;
    overflow: visible;
}

.icon-floating-top {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    /* Gold Gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
    border: 4px solid white;
}

.icon-floating-top i {
    font-size: 2rem;
    color: white;
}

.solution-badge {
    color: #d97706;
    /* Gold text matching other badges */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-top: 30px;
    margin-bottom: 10px;
    display: inline-block;
}

.solution-card h2 {
    color: #1e293b !important;
    /* Solar Slate 800 - High contrast */
    font-size: 2.5rem;
    margin-bottom: 25px;
    background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution-text {
    font-size: 1.25rem;
    color: #475569;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 20px;
}

.solution-text strong {
    color: var(--vibrant-b);
    /* Blue highlight for keywords */
    font-weight: 700;
}

.payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Mechanism Section (Batch-Flow 120) - Colors Updated to Dark Gold */
.mechanism-section {
    padding: 60px 0 100px;
}

.mechanism-card {
    /* Warm/Gold Tint Background */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 251, 235, 0.95) 100%);
    border-radius: 40px;
    padding: 60px 40px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.8);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Decorative Glow behind card (Gold) */
.mechanism-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.mechanism-header {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* Badge rules can be removed or kept, user removed from HTML */
.mechanism-badge {
    display: none;
}

.mechanism-header h2 {
    display: none;
    /* Removed from HTML as per request */
}

.method-name {
    font-size: 2.2rem;
    color: #451a03 !important;
    /* Dark Bronze/Brown */
    font-family: 'Nunito', sans-serif;
    margin-top: 10px;
}

.highlight-flow {
    color: #d97706;
    /* Dark Gold */
    background: linear-gradient(90deg, #d97706 0%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    position: relative;
}

.mechanism-body {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 1;
}

.mechanism-body p {
    color: #475569;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.mechanism-body strong {
    color: #d97706;
    /* Dark Gold */
    font-weight: 700;
}

/* Checklist Styles */
.mechanism-checklist {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 1;
}

.check-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.6);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(217, 119, 6, 0.15);
    /* Gold Border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.check-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 20px rgba(217, 119, 6, 0.05);
    /* Gold Shadow */
    background: white;
    border-color: rgba(217, 119, 6, 0.3);
}

.check-icon {
    font-size: 1.8rem;
    color: #d97706;
    /* Icon Dark Gold */
    flex-shrink: 0;
    margin-top: 2px;
    filter: drop-shadow(0 4px 6px rgba(217, 119, 6, 0.2));
}

.check-text h4 {
    color: #451a03;
    /* Dark Bronze */
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.check-text p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .mechanism-card {
        padding: 40px 20px;
    }

    .method-name {
        font-size: 1.6rem;
    }

    .check-item:hover {
        transform: translateY(-5px);
    }
}

/* 3D Gold Ribbon - Dark Gold & Piano Black */
/* 3D Gold Ribbon - Centered & Overlapping */
.ribbon {
    width: 320px;
    height: 70px;
    background: linear-gradient(135deg, #f59e0b 0%, #aa5806 100%);
    /* Gold Gradient */
    position: absolute;
    top: -35px;
    /* Overlap top more */
    left: 50%;
    transform: translateX(-50%);
    /* Centered */
    right: auto;
    /* Reset right */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000 !important;
    /* Piano Black */
    font-weight: 900;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 10;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Ribbon legs/folds removed since it's centered top */
.ribbon::after {
    display: none;
}

/* Recap List Styles (Clean List) */
.recap-list-box {
    /* Pink Gradient Background restored */
    background: linear-gradient(180deg, #db2777 0%, #831843 100%);
    padding: 30px;
    /* Restored padding for the background */
    border-radius: 20px;
    margin: 40px auto 40px;
    /* Space for Ribbon */
    max-width: 650px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Inset shadow for depth */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recap-title {
    color: white !important;
    font-size: 1.4rem;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: none;
    border: none;
    padding: 0;
}

.recap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Very subtle separator */
}

.recap-name {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    border: none;
    padding: 0;
}

.recap-price {
    color: white !important;
    /* White Numbers */
    font-weight: 800;
    font-size: 1.2rem;
    position: relative;
    padding: 0;
    /* Remove padding so strike fits text EXACTLY */
    opacity: 0.9;
    flex-shrink: 0;
    /* Ensure it stays on one line */
}

/* Diagonal Red Strike "Risco" */
.recap-price::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -3px;
    /* Subtle overhang */
    right: -3px;
    height: 3px;
    /* Thickness */
    background: #ef4444;
    /* Red Line */
    transform: translateY(-50%) rotate(-12deg);
    /* Diagonal but tight */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}