/* ============================================
   COMPONENTS STYLES
   ============================================ */

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-lg) 0;
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space-md) 0;
}

.header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo-icon {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

.logo-text {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text-primary);
}

.btn-header {
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-lg);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    z-index: -1;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(180, 255, 57, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--font-size-6xl);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-hero {
    font-size: var(--font-size-xl);
    padding: var(--space-lg) var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

/* Currency Carousel */
.currency-carousel {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    border-radius: var(--radius-2xl);
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.currency-track {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.currency-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
}

.currency-item:hover {
    background: rgba(180, 255, 57, 0.1);
    transform: translateY(-4px) scale(1.05);
}

.currency-flag {
    width: 32px;
    height: auto;
    border-radius: 4px;
    animation: float 3s ease-in-out infinite;
}

.currency-item span {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   DIFFERENTIATOR SECTION
   ============================================ */
.differentiator {
    background: var(--color-bg-primary);
}

.feature-card {
    text-align: left;
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 20, 0.6);
    overflow: visible;
    margin-top: var(--space-lg);
}

/* Fix for neon hover effect with overflow: visible */
.feature-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    /* Cover the border area exactly */
    height: 100%;
    /* Full height to map border-radius correctly */
    background: transparent;
    /* Remove solid fill */
    border-top: 3px solid var(--color-primary);
    /* Apply neon as true border */
    border-radius: inherit;
    /* Inherit perfect curves */
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 -2px 10px var(--color-primary-glow);
    /* Add glow */
}

/* Ensure parent always has a radius to inherit, just in case */
.feature-card {
    border-radius: var(--radius-xl);
}

.feature-number {
    position: absolute;
    top: -25px;
    left: var(--space-xl);
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-family-heading);
    box-shadow: 0 0 20px rgba(180, 255, 57, 0.4);
    z-index: 5;
}

.feature-header-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    margin-top: var(--space-sm);
}

.feature-icon-small {
    color: var(--color-primary);
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.feature-title {
    font-size: var(--font-size-xl);
    margin-bottom: 0;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.feature-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ============================================
   MARKETS SECTION (COMPARISON REDESIGN)
   ============================================ */
.markets {
    position: relative;
    background: #050810;
    /* Deepest black requested */
    padding: 120px 0;
}

/* Comparison Grid Layout */
.comp-card {
    background: #0d1117;
    border: 1px solid #1f2937;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    /* Split layout */
    height: 100%;
    /* Uniform height */
}

.comp-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
}

/* Split Sides */
.side-brazil {
    flex: 1;
    background: rgba(26, 29, 41, 0.5);
    padding: 30px 20px;
    border-left: 3px solid #6b7280;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.side-global {
    flex: 1;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), transparent);
    padding: 30px 20px;
    border-right: 3px solid #00ff88;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Comparison Wrapper & Headline */
.comparison-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.comp-card-headline {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.comp-card-headline .vs-text {
    color: #8b92a8;
    font-size: 0.8rem;
    font-weight: 400;
}

.comp-card-headline .text-neon {
    color: #00ff88;
}

/* VS Badge (Center) */
.comp-vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #050810;
    color: #6b7280;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #1f2937;
    text-transform: uppercase;
}

/* Country Setup */
.comp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.comp-flag {
    font-size: 24px;
}

.comp-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.side-brazil .comp-label {
    color: #6b7280;
}

.side-global .comp-label {
    color: #00ff88;
}

/* Metrics */
.comp-metric {
    display: flex;
    flex-direction: column;
    /* Fixed height to ensure perfect sync between left/right columns */
    height: 90px;
    justify-content: center;
    /* Subtle separator line */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
}

.comp-metric:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.metric-name {
    font-size: 13px;
    color: #8b92a8;
    margin-bottom: 4px;
}

.metric-value-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.metric-value {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1;
}

.side-brazil .metric-value {
    font-size: 1.5rem;
    /* 24px */
    color: #6b7280;
}

.side-global .metric-value {
    font-size: 2rem;
    /* 32px */
    color: #ffffff;
}

.metric-conversion {
    font-size: 12px;
    color: #8b92a8;
    font-weight: 400;
}

/* Badges & Icons */
.metric-badge {
    background: #00ff88;
    color: #000000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-icon {
    font-size: 14px;
}

.side-brazil .metric-icon {
    color: #ef4444;
    /* Red down arrow */
}

.side-global .metric-icon {
    color: #00ff88;
    /* Green up arrow */
}

/* Tooltip (Removed as per request) */
.comp-metric {
    position: relative;
}

/* Text Utilities */
.text-neon {
    color: #00ff88;
}

/* Responsive */
@media (max-width: 768px) {
    .markets {
        padding: 60px 0;
    }

    .comp-card {
        /* Maintain split layout on mobile as requested */
        flex-direction: row;
    }

    .side-brazil,
    .side-global {
        border-top: none;
        padding: 20px 10px;
        /* Reduces padding */
        gap: 15px;
    }

    /* Optimize fonts for side-by-side mobile */
    .comp-flag {
        font-size: 18px;
    }

    .comp-label {
        font-size: 10px;
    }

    .side-brazil .metric-value {
        font-size: 1.1rem;
    }

    .side-global .metric-value {
        font-size: 1.3rem;
    }

    .metric-name {
        font-size: 11px;
    }

    /* Badge adjustments */
    .metric-badge {
        padding: 1px 4px;
        font-size: 9px;
    }

    /* VS Badge */
    .comp-vs {
        width: 20px;
        height: 20px;
        font-size: 8px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   SHOWCASE SECTIONS
   ============================================ */
.showcase {
    background: var(--color-bg-secondary);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-3xl);
    align-items: center;
}

.showcase-label {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(180, 255, 57, 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-md);
}

.showcase-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-lg);
}

.showcase-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* New Benefits Grid */
.showcase-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns for wider cards */
    gap: var(--space-lg);
    /* Increased gap */
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
    /* Reduced bottom margin from 3xl to lg */
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    /* Reduced vertical padding */
    text-align: left;
    /* Left align text */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    /* Horizontal layout */
    align-items: center;
    /* Center vertically */
    justify-content: flex-start;
    gap: var(--space-md);
    /* Removed min-height for compact look */
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    background: rgba(180, 255, 57, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.benefit-icon {
    width: 32px;
    /* Slightly smaller */
    height: 32px;
    border-radius: 50%;
    background: rgba(180, 255, 57, 0.2);
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
    /* Prevent icon shrinking */
    margin-bottom: 0;
    /* Remove bottom margin */
    box-shadow: 0 0 15px rgba(180, 255, 57, 0.3);
}

.benefit-text {
    font-size: 15px;
    font-weight: 600;
    /* Bolder text */
    color: #fff;
    /* White text */
    line-height: 1.4;
}

/* Obsolete list styles removed */

.showcase-mockup {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    /* Removed padding and background for cleaner look as requested */
    /* Reseting padding but adding bottom padding for dots */
    padding: 0 0 24px 0;
    background: transparent;
    border: none;
    transition: all var(--transition-base);
}

.showcase-mockup:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl), 0 16px 48px rgba(180, 255, 57, 0.2);
}

.mockup-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

.showcase-grid-reverse {
    direction: rtl;
}

.showcase-grid-reverse>* {
    direction: ltr;
}

/* ============================================
   IMPACT STATEMENT
   ============================================ */
.impact-section {
    background: var(--color-bg-primary);
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
}

.impact-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-lg);
}

.impact-text {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-6xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.05);
    line-height: 1;
    user-select: none;
}



/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
    background-color: #050810;
    background-image: var(--gradient-hero);
}

.cta-card {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
}

.cta-description {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-lg {
    font-size: var(--font-size-xl);
    padding: var(--space-lg) var(--space-3xl);
    margin-bottom: var(--space-2xl);
}

.cta-preview {
    margin-top: var(--space-2xl);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.cta-preview-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: var(--radius-xl);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--color-bg-primary);
    padding: var(--space-2xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.footer-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-base);
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn-header {
        width: 100%;
    }

    .hero {
        min-height: auto;
        padding-top: 150px;
    }

    .hero-title {
        font-size: var(--font-size-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .btn-hero {
        font-size: var(--font-size-base);
        padding: var(--space-md) var(--space-lg);
    }

    .currency-track {
        gap: var(--space-md);
    }

    .showcase-grid,
    .showcase-grid-reverse {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }



    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: var(--font-size-3xl);
    }

    .impact-text {
        font-size: var(--font-size-4xl);
    }

    .cta-title {
        font-size: var(--font-size-3xl);
    }
}

/* Scroll Hint */
.hero-scroll-hint {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    color: #8b92a8;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    /* Larger size */
    font-weight: 500;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 3.5s forwards;
    /* Delayed sequence after cards */
    /* Delayed sequence after cards */
    width: 100%;
    line-height: 1.4;
}

.scroll-cta {
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
    /* Extra space before arrow */
}

.scroll-arrow {
    width: 48px;
    /* Larger arrow */
    height: 48px;
    color: #c4ff00;
    /* Neon green */
    animation: bounce 2s infinite;
    display: block;
    filter: drop-shadow(0 0 5px rgba(196, 255, 0, 0.5));
    /* SVG Glow */
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

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

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-scroll-hint {
        margin-top: 40px;
        font-size: 16px;
        padding: 0 20px;
    }

    .scroll-arrow {
        width: 36px;
        /* Explicit mobile size */
        height: 36px;
        display: block;
        /* Ensure visibility */
    }

    .btn-lg,
    .cta-card .btn {
        width: 100%;
        max-width: 100%;
        padding: 1rem 1.5rem;
        /* Reduced padding for mobile */
        font-size: 15px;
        /* Slightly smaller font */
        white-space: normal !important;
        /* Force text wrap */
        height: auto;
        line-height: 1.3;
        display: inline-block;
        /* Helps with sizing */
    }
}

/* ============================================
   CAROUSEL STYLES
   ============================================ */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Removed background and border radius constraint for cleaner look */
    border-radius: var(--radius-xl);
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 0;
    /* Reduced padding-bottom makes the container shorter relative to width, 
       but for cover images we might want taller? 
       Actually, user wants "increase display size of images".
       If we want them bigger, we might need less padding or just different aspect ratio.
       Let's stick to 16:9 but remove the inner padding of the container if any. 
    */
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
}

.carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Show full image without cropping */
    background: #000;
    /* Black background for letterboxing if needed */
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    border-radius: var(--radius-xl);
}

.carousel-img.active {
    opacity: 1;
    z-index: 1;
}

.carousel-btn {
    display: none;
    /* Hidden as requested */
}

.carousel-nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    padding-bottom: 4px;
    /* Optical adjustment for arrow center */
}

.carousel-nav-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(180, 255, 57, 0.1);
    transform: scale(1.1);
}

/* Dots already styled, positioning handled inline or here if needed */
.carousel-dots {
    display: flex;
    gap: 12px;
    /* Increased gap */
    z-index: 2;
}


.carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 2;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.carousel-dot.active {
    background: var(--color-primary);
    border-color: white;
    transform: scale(1.3);
}

@media (max-width: 900px) {
    .showcase-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .showcase-grid {
        gap: var(--space-lg);
        /* Reduced from 3xl for tighter mobile spacing */
    }

    /* Market Comparison Mobile Refinements */
    .markets .container {
        padding: 0 20px !important;
    }

    .markets .grid {
        gap: 50px !important;
        /* Spacing between cards on mobile */
    }

    .comparison-wrapper {
        gap: 15px !important;
        margin-bottom: 0 !important;
    }

    .comp-card-headline {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1rem !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .comp-card-headline span {
        text-align: center !important;
        display: block !important;
        width: auto !important;
    }

    .comp-card-headline img {
        width: 24px !important;
        height: auto !important;
    }

    .showcase-benefits-grid {
        grid-template-columns: 1fr;
    }

    .carousel-btn {
        font-size: 1.8rem;
        padding: 0.3rem 0.7rem;
    }

    .carousel-prev {
        left: 0.5rem;
    }

    .carousel-next {
        right: 0.5rem;
    }

    .carousel-dots {
        bottom: 1rem;
        gap: 0.5rem;
    }

    .carousel-dot {
        width: 10px;
        height: 10px;
    }
}