/* 
   Futuristic, High-Tech, yet Accessible CSS for "Antes de Clicar"
   Target Audience: 40-60 years old (High contrast dark mode, clear legibility)
*/

:root {
    --primary-bg: #0b1120;
    /* Very Dark Blue/Black */
    --secondary-bg: #152238;
    /* Slightly lighter for cards */
    --accent-color: #00d4ff;
    /* Neon Cyan - Futuristic Signal */
    --accent-glow: rgba(0, 212, 255, 0.4);
    --text-main: #e6f1ff;
    /* Bright White-Blue for text */
    --text-muted: #8892b0;
    /* Muted blue-grey */
    --cta-color: #ff0055;
    /* Neon Red/Pink for urgent action or pure high-vis orange */
    /* Let's go with a vibrant gradient for CTA */
    --cta-gradient: linear-gradient(90deg, #ff416c 0%, #ff4b2b 100%);
    --success-color: #00ff9d;
    /* Neon Green */

    --max-width: 1100px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 5rem;
    /* More spacing for modern look */
    --border-radius: 16px;
    /* Specially rounded modern look */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --border-glass: 1px solid rgba(255, 255, 255, 0.1);
}

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

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
    color: var(--text-main);
    background-color: var(--primary-bg);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 85, 0.05) 0%, transparent 20%);
    font-size: 18px;
}

h1,
h2,
h3 {
    font-family: 'Inter', sans-serif;
    /* Switch to Sans for futuristic look */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--white);
    letter-spacing: -0.5px;
}

h1 {
    font-size: 3rem;
    background: linear-gradient(to right, #ffffff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-muted);
}

strong {
    color: var(--text-main);
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.container-narrow {
    max-width: 800px;
}

.section {
    padding: var(--spacing-lg) 0;
    position: relative;
    overflow: hidden;
}

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

.text-blue {
    color: var(--accent-color);
}

/* Keeps the checkmarks cyan */

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    background: var(--cta-gradient);
    color: white;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 75, 43, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--spacing-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 30px rgba(255, 75, 43, 0.6);
}

.cta-large {
    padding: 1.5rem 4rem;
    font-size: 1.5rem;
}

/* --- Hero Section Enhanced --- */
.hero-section {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 30% 50%, rgba(0, 78, 146, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(200, 0, 70, 0.15) 0%, transparent 60%);
    overflow: visible;
}

/* Add a grid overlay for tech feel with movement */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
    animation: panGrid 20s linear infinite;
}

@keyframes panGrid {
    0% {
        transform: translateY(0);
    }

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

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Give more space to text */
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-content {
    animation: slideUpFade 1s ease-out forwards;
}

.hero-title {
    font-size: 4.5rem;
    /* Massive title */
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(to right, #ffffff 0%, #00d4ff 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
    animation: shine 4s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--accent-color);
    padding-left: 20px;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
}

.hero-image {
    display: flex;
    justify-content: center;
    position: relative;
    animation: zoomInFade 1.2s ease-out forwards;
}

/* Hyper Glow behind the hero image */
.hero-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.4;
    z-index: -1;
    animation: pulseGlow 4s infinite alternate;
}

@keyframes pulseGlow {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.hero-main-img {
    max-height: 550px;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
    transform: perspective(1000px) rotateY(-10deg);
    transition: transform 0.5s;
}

.hero-container:hover .hero-main-img {
    transform: perspective(1000px) rotateY(-5deg) translateY(-10px);
}

/* Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomInFade {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Identification Section --- */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.checklist-item {
    background: var(--secondary-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: var(--border-glass);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    transition: transform 0.3s;
}

.checklist-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.checklist-item i {
    font-size: 1.5rem;
    color: var(--success-color);
    /* Green checkmarks for positive feel, or red for 'danger'? Section is 'Isso ja aconteceu..'. Steps are negative events. But checklist style usually implies 'yes'. Let's stick to accent color or red. */
    color: var(--cta-color);
    /* Red checks for "Danger happened" */
}

.checklist-item p {
    margin: 0;
    color: var(--text-main);
}

/* --- Alert Section --- */
.alert-section {
    background: linear-gradient(180deg, var(--primary-bg) 0%, #1a1a2e 100%);
}

.alert-box {
    background: rgba(255, 65, 108, 0.1);
    border: 1px solid rgba(255, 65, 108, 0.3);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    max-width: 800px;
    margin: 0 auto;
}

.alert-text.lead {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff416c;
    /* Warning Color */
    transform: uppercase;
}

.alert-text {
    color: var(--text-main);
}

/* --- What Is It --- */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.what-is-section {
    background: var(--secondary-bg);
}

.benefits-list-simple li {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--text-main);
    display: flex;
    /* Ensure icon and text align */
    align-items: center;
    gap: 12px;
}

.benefits-list-simple i {
    color: var(--accent-color);
    filter: drop-shadow(0 0 5px var(--accent-glow));
}

/* --- Benefits Cards --- */
.grid-3-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.benefit-card {
    background: var(--glass-bg);
    border: var(--border-glass);
    backdrop-filter: blur(10px);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    text-align: center;
    transition: 0.3s;
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-color);
}

.icon-box {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 15px var(--accent-glow);
}

/* --- What's Inside --- */
.detailed-checklist {
    list-style: none;
    background: var(--secondary-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: var(--border-glass);
}

.detailed-checklist li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 15px;
}

.detailed-checklist i {
    color: var(--accent-color);
}

/* --- Target Audience --- */
.target-card {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: var(--glass-bg);
    /* Darker glass */
    border: var(--border-glass);
}

.target-card h3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    padding-bottom: 10px;
}

.target-card ul {
    list-style: none;
    margin-top: 15px;
}

.target-card li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    color: var(--text-muted);
}

.target-card li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.5em;
    line-height: 0.8;
}

.target-card.positive {
    border-top: 4px solid var(--success-color);
}

.target-card.positive h3 i {
    color: var(--success-color);
}

.target-card.negative {
    border-top: 4px solid var(--cta-color);
}

.target-card.negative h3 i {
    color: var(--cta-color);
}

/* --- Price Section --- */
.price-section {
    background: linear-gradient(135deg, #111 0%, #0b1120 100%);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
    padding: 3rem;
    border-radius: 20px;
    margin: var(--spacing-md) 0;
    position: relative;
}

/* Label 'Oferta' */
.price-box::before {
    content: 'OFERTA ESPECIAL';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: #000;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 20px;
}

.currency {
    font-size: 2rem;
    vertical-align: top;
    color: var(--text-muted);
}

.value {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(to bottom, #fff, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.payment-type {
    color: var(--accent-color);
}

.secure-badge {
    margin-top: 20px;
    color: var(--success-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- Footer --- */
footer {
    background: #02040a;
    color: #555;
    border-top: 1px solid #111;
}

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

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

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

.floating-anim {
    animation: float 5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(255, 75, 43, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
    }
}

.pulse-anim {
    animation: pulse 2s infinite;
}

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

    .hero-title {
        font-size: 2.5rem;
        /* Force smaller size on mobile */
    }

    .hero-container {
        grid-template-columns: 1fr;
        /* Stack */
        text-align: center;
        padding-top: 5rem;
        /* Better top spacing for mobile */
    }

    .hero-image {
        order: 2;
        /* Image below text on mobile was requested */
        margin-top: 0;
    }

    .grid-2-col {
        grid-template-columns: 1fr;
    }

    .hero-main-img {
        max-width: 70%;
        /* Smaller on mobile so it doesn't take up whole screen */
    }
}

/* --- NEW SECTIONS STYLING (Added in Update) --- */

/* Utility */
.text-green {
    color: var(--success-color);
}

.lead-text {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.mt-large {
    margin-top: 4rem;
}

/* What You Receive - Highlight Box */
.highlight-box {
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid var(--accent-color);
    padding: 1.5rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin-top: 1.5rem;
}

/* What's Inside - Feature Grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-item {
    background: var(--secondary-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.05);
}

.feature-item .icon-wrap {
    font-size: 1.8rem;
    color: var(--accent-color);
    min-width: 50px;
    height: 50px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-item h3 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
    color: var(--white);
}

.feature-item p {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-muted);
}

/* Target Audience - Centered */
.target-box-centered {
    background: var(--glass-bg);
    border: var(--border-glass);
    padding: 3rem;
    border-radius: var(--border-radius);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.target-list-centered {
    list-style: none;
    margin-top: 2rem;
    display: inline-block;
    text-align: left;
}

.target-list-centered li {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.target-list-centered i {
    font-size: 1.4rem;
}

/* Important & Rules Section */
.important-section {
    background: linear-gradient(180deg, #1a1a2e 0%, var(--primary-bg) 100%);
    padding: 4rem 0;
}

.info-block {
    margin-bottom: 4rem;
}

.highlight-title {
    font-size: 2rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.large-text {
    font-size: 1.5rem;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* 
   MODIFIED RULE BLOCK
   Style: Elegant Transparent Glass, Cleaner, Less Aggressive
*/
.rule-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(12px);
    padding: 3.5rem 3rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 750px;
    margin: 5rem auto 0;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

/* Adds a subtle elegant top sheen */
.rule-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.highlight-title-red {
    font-size: 2.2rem;
    color: #ff8fa3;
    /* Softer, elegant salmon pink/red - easier on eyes */
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 65, 108, 0.15);
    /* Very subtle glow */
}

.rule-text {
    font-size: 1.4rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-weight: 300;
}

.rule-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Elegant Pill Buttons for Steps */
.rule-steps .step {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    /* Very subtle fill */
    padding: 1rem 2rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    cursor: default;
}

.rule-steps .step:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.rule-steps .separator {
    color: var(--accent-color);
    font-size: 1.2rem;
    opacity: 0.6;
}

/* Price Section Updates */
.price-section {
    padding-top: 4rem;
}

.price-title {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.price-subtitle {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 2rem;
}

.included-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.included-list span {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.price-box-simple {
    margin-bottom: 1.5rem;
}

.micro-security {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.sec-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sec-item i {
    color: var(--success-color);
}

/* --- UPDATE STYLES: BONUSES --- */
.bonuses-section {
    background: linear-gradient(135deg, #162447 0%, #1f4068 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bonuses-list {
    margin-top: 2rem;
    display: grid;
    gap: 1.5rem;
}

.bonus-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    transition: 0.3s;
}

.bonus-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
    border-color: var(--accent-color);
}

.bonus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.bonus-tag {
    background: var(--accent-color);
    color: #0b1120;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.bonus-value {
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.bonus-card h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 0.5rem;
}

.bonus-desc {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* --- UPDATE STYLES: FAQ --- */
.faq-section {
    background: var(--primary-bg);
}

.faq-list {
    margin-top: 2.5rem;
}

.faq-item {
    background: var(--secondary-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item h3 {
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.faq-item p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* --- PRICE DISPLAY UPDATE --- */
.price-display {
    margin: 2rem 0 1rem;
    animation: fadeIn 1s ease-out;
}

.price-tag {
    display: block;
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.price-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    display: block;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .price-value {
        font-size: 2.8rem;
    }
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .rule-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .rule-steps .separator {
        transform: rotate(90deg);
    }

    .included-list {
        flex-direction: column;
        gap: 0.8rem;
    }

    .target-box-centered {
        padding: 1.5rem;
    }

    .highlight-title,
    .highlight-title-red {
        font-size: 1.8rem;
    }

    .micro-security {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* --- GUARANTEE SECTION UPDATES --- */
.guarantee-section {
    background: transparent;
    padding: 4rem 0;
}

.guarantee-logo-container {
    margin-bottom: 1.5rem;
}

.guarantee-img {
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.2));
    /* Subtle glow matching theme */
    transition: transform 0.3s ease;
}

.guarantee-img:hover {
    transform: scale(1.05);
}

.guarantee-title {
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 600;
}

.guarantee-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.guarantee-icon-large {
    font-size: 4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
}

/* --- NEW BONUS LIST (STACK STYLE) --- */
.bonuses-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.bonus-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    transition: transform 0.2s;
}

.bonus-row:hover {
    transform: translateX(5px);
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.06);
}

.bonus-icon {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    background: rgba(0, 212, 255, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bonus-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--white);
}

.bonus-info p {
    margin: 0;
    color: var(--text-muted);
}

.bonus-important-box {
    margin-top: 3rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: var(--border-radius);
    display: inline-block;
    width: 100%;
    max-width: 700px;
}

.highlight-title-small {
    color: var(--warning-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.important-items {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

/* Mobile responsive for stack */
@media (max-width: 600px) {
    .bonus-row {
        flex-direction: column;
        text-align: center;
    }

    flex-direction: column;
    gap: 0.8rem;
}

/* --- NEW BONUS CARD DESIGN (IMAGE MATCH) --- */
.bonuses-grid-design {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 750px;
    margin: 0 auto;
}

.bonus-card-design {
    background: #1e293b;
    /* Dark Slate Blue/Grey match */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.bonus-card-design:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.bonus-badge-cyan {
    background: #00d4ff;
    /* Cyan */
    color: #000;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.bonus-value-green {
    color: #00ff9d;
    /* Neon Green */
    font-weight: 700;
    font-size: 0.95rem;
}

.bonus-card-design h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.card-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-check-row i.text-purple {
    color: #a855f7;
    /* Purple/Indigo match */
    font-size: 1.1rem;
}

.card-check-row p {
    color: #94a3b8;
    /* Slate 400 */
    margin: 0;
    font-size: 1rem;
}

/* --- NEW CLEAN BONUS GRID (REFERENCE STYLE) --- */
.bonuses-clean-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bonuses-clean-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Centers the last item if it's odd */
    .bonuses-clean-grid .bonus-card-clean:last-child:nth-child(odd) {
        grid-column: span 2;
        max-width: 60%;
        margin: 0 auto;
        width: 100%;
    }
}

.bonus-card-clean {
    background: #0f172a;
    /* Deep Slate from image */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    transition: transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.bonus-card-clean:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.15);
    background: #1e293b;
}

.clean-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background: #0ea5e9;
    /* Sky Blue/Cyan from image */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
}

.clean-icon-box i {
    font-size: 1.4rem;
    color: #0f172a;
    /* Dark icon on light bg */
}

.clean-content h3 {
    margin: 0 0 0.3rem 0;
    font-size: 1.15rem;
    color: white;
    font-weight: 700;
}

.clean-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #94a3b8;
    /* Slate 400 */
    line-height: 1.4;
}

/* --- TESTIMONIALS SECTION --- */
.testimonials-section {
    background: transparent;
    padding: 2rem 0 4rem 0;
}

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

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.8rem;
    border-radius: 12px;
    position: relative;
    transition: transform 0.3s;
}

.testimonial-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.stars {
    font-size: 1rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.testi-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.testi-author {
    font-weight: 700;
    color: var(--white);
    text-align: right;
    font-size: 0.95rem;
    margin: 0;
}

/* --- SLIDER TESTIMONIALS STYLE --- */
.testimonials-slider-wrapper {
    position: relative;
    max-width: 100%;
    margin-top: 2rem;
    overflow: hidden;
    /* Hide scrollbar if needed, but let inner scroll */
}

.testimonials-slider {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 1rem 0 2rem 1rem;
    /* Padding for shadow/hover space */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.testimonials-slider::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.testimonial-card-slider {
    background: #111827;
    /* Dark BG */
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 300px;
    max-width: 300px;
    padding: 1.5rem;
    border-radius: 12px;
    flex-shrink: 0;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.testimonial-card-slider:hover {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.15);
}

.headers-new {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.avatar-circle {
    width: 3rem;
    height: 3rem;
    background: #8b5cf6;
    /* Default Purple-ish */
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
}

.avatar-circle.purple {
    background: #8b5cf6;
}

.avatar-circle.blue {
    background: #3b82f6;
}

.avatar-circle.pink {
    background: #ec4899;
}

.avatar-circle.green {
    background: #10b981;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-info .name {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.user-info .role {
    color: #9ca3af;
    font-size: 0.85rem;
}

.stars-gold {
    color: #fca510;
    /* Gold Star Color */
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    display: flex;
    gap: 3px;
}

.testi-text-new {
    color: #d1d5db;
    /* Light Gray text */
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
}