/* ============================================
   FRANK EAs DEVELOPER - CYBERPUNK THEME
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Colors - Neon Theme */
    --color-zafiro: #FF00FF;
    --color-emerald: #00FF00;
    --color-diamond: #00FFFF;
    --color-bg-dark: #000000;
    --color-bg-darker: #000000;
    --color-bg-card: rgba(20, 20, 30, 0.85);
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-accent: #00FFFF;

    /* Glow Effects */
    --glow-zafiro: 0 0 20px rgba(255, 0, 255, 0.8), 0 0 40px rgba(255, 0, 255, 0.4);
    --glow-emerald: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 40px rgba(0, 255, 0, 0.4);
    --glow-diamond: 0 0 20px rgba(0, 255, 255, 0.8), 0 0 40px rgba(0, 255, 255, 0.4);
    --glow-text: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.4);

    /* Typography */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Technical Information - Unified Card */
.tech-info-unified {
    margin: 3rem 0;
}

.tech-unified-card {
    background: rgba(10, 10, 30, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 255, 255, 0.2);
}

.tech-unified-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-diamond);
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(0, 255, 255, 1);
}

.tech-section {
    margin-bottom: 2.5rem;
}

.tech-section-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-diamond);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tech-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
    margin: 2rem 0;
}

/* Community Section */
.community {
    padding: var(--spacing-xl) 0;
    background: transparent;
}

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

.community-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: var(--radius-lg);
    margin: 2rem auto 2rem;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 255, 255, 0.3);
    border: 2px solid rgba(0, 255, 255, 0.4);
}

.community-text {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 2rem 0;
    font-weight: 600;
}

/* ============================================
   TESTIMONIALS SECTION - INFINITE CAROUSEL
   ============================================ */

.testimonials {
    padding: var(--spacing-xl) 0;
    overflow: hidden;
    width: 100%;
}

.testimonials .container {
    max-width: 100%;
    padding: 0;
    overflow: visible;
}

.testimonials-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
}

.testimonials-carousel-track {
    display: flex;
    gap: 2rem;
    animation: scrollTestimonials 60s linear infinite;
    width: max-content;
    /* PERFORMANCE: GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
}

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

@keyframes scrollTestimonials {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.testimonial-card {
    flex: 0 0 350px;
    min-width: 350px;
    background: rgba(10, 10, 30, 0.98);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* PERFORMANCE: Removed backdrop-filter (GPU heavy) */
    contain: layout style;
}

.testimonial-card:hover {
    border-color: var(--color-emerald);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2);
}

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

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-emerald);
}

.testimonial-info h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.25rem;
}

.testimonial-location {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
}

.testimonial-rating {
    margin-bottom: 1rem;
}

.testimonial-rating .star {
    color: #FFD700;
    font-size: 1.1rem;
}

.testimonial-rating .star.empty {
    color: rgba(255, 255, 255, 0.3);
}

.testimonial-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-style: italic;
}

.testimonial-date {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
}

/* ============================================
   FAQ SECTION (GLOW UP - Premium Glassmorphism)
   ============================================ */

.faq {
    padding: var(--spacing-xl) 0;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(135deg, rgba(5, 15, 30, 0.95) 0%, rgba(10, 25, 45, 0.92) 100%);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 16px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    /* Hover effect removed - no visual changes */
}

.faq-item.active {
    border-color: var(--color-diamond);
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 255, 0.25),
        inset 0 0 20px rgba(0, 255, 255, 0.03);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.8rem;
    cursor: pointer;
    background: transparent;
    user-select: none;
    transition: background 0.2s ease;
}

.faq-question:hover {
    /* Hover effect removed - no background change */
}

.faq-question h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    flex: 1;
    padding-right: 1.2rem;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.faq-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-diamond);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 200, 255, 0.1) 100%);
    border: 1px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.faq-item:hover .faq-icon {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

.faq-answer {
    display: none;
    padding: 0 1.8rem 1.5rem 1.8rem;
    background: transparent;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin: 0;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(0, 255, 255, 0.3);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
    scroll-behavior: auto;
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: static;
}

/* MOBILE: Eliminar espacio en blanco al final de la página */
@media (max-width: 768px) {
    html {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: 4850px !important;
    }

    /* Cortar cualquier contenido después del FAQ */
    section.faq~* {
        display: none !important;
    }

    /* FAQ: limitar altura solo en mobile */
    section.faq {
        max-height: 4850px !important;
    }
}

/* Custom Scrollbar - Cyan Only */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--color-diamond);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #33ffff;
}

/* ============================================
   PARTICLE BACKGROUND (Performance Optimized)
   ============================================ */

.particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* PERFORMANCE: Simple solid gradient, no pseudo-elements */
    background: #000000;
    /* Unified solid background */
    contain: strict;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.glow-text {
    color: var(--color-diamond);
    /* PERFORMANCE: Static glow, reduced opacity for better legibility */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4), 0 0 15px rgba(0, 255, 255, 0.2);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.1;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #000000;
    color: #ffffff;
    border: 2px solid var(--color-diamond);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.btn-primary:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
    transform: translateY(-2px);
    border-color: #ffffff;
}

.btn-secondary {
    background: #000000;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1.5rem 3rem;
    font-size: 1.2rem;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    background: rgba(0, 0, 0, 0.85);
}

.navbar .container {
    padding-left: 0.5rem;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    cursor: pointer;
    margin-left: 0;
    margin-right: 3rem;
    transform: none;
    flex-shrink: 0;
}

.nav-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--color-diamond);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    object-fit: cover;
}

.brand-text-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    white-space: nowrap;
    position: relative;
    color: #ffffff;
    /* Clip mask animation - reveals from left, F always stays (5%) */
    clip-path: inset(0 95% 0 0);
    animation: revealText 6s ease-in-out infinite;
    will-change: clip-path, transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

@keyframes revealText {
    0% {
        clip-path: inset(0 95% 0 0);
        transform: skewX(0deg);
        opacity: 1;
    }

    3% {
        transform: skewX(-5deg) scaleY(1.1);
        opacity: 0.8;
    }

    6% {
        transform: skewX(3deg) scaleY(0.95);
        opacity: 1;
    }

    10% {
        clip-path: inset(0 50% 0 0);
        transform: skewX(-2deg);
        opacity: 0.9;
    }

    15% {
        transform: skewX(0deg);
        opacity: 1;
    }

    25% {
        clip-path: inset(0 0% 0 0);
        transform: skewX(0deg);
        opacity: 1;
    }

    75% {
        clip-path: inset(0 0% 0 0);
        transform: skewX(0deg);
        opacity: 1;
    }

    80% {
        transform: skewX(3deg);
        opacity: 0.8;
    }

    83% {
        clip-path: inset(0 20% 0 0);
        transform: skewX(-5deg) scaleY(1.1);
        opacity: 0.5;
    }

    86% {
        transform: skewX(4deg) scaleY(0.9);
        opacity: 0.7;
    }

    89% {
        clip-path: inset(0 50% 0 0);
        transform: skewX(-3deg);
        opacity: 0.4;
    }

    92% {
        transform: skewX(5deg) scaleY(1.15);
        opacity: 0.6;
    }

    95% {
        clip-path: inset(0 75% 0 0);
        transform: skewX(-4deg);
        opacity: 0.3;
    }

    98% {
        transform: skewX(2deg);
        opacity: 0.5;
    }

    100% {
        clip-path: inset(0 95% 0 0);
        transform: skewX(0deg);
        opacity: 1;
    }
}

/* EAs span - CYAN with pulse scale */
.brand-eas {
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
    display: inline-block;
    animation: pulseEAs 6s ease-in-out infinite;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

@keyframes pulseEAs {

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

    30%,
    40% {
        transform: scale(1.15);
    }

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

.brand-subtitle {
    display: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
    justify-content: flex-end;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    transition: var(--transition-base);
    position: relative;
    min-width: 90px;
    text-align: center;
    display: inline-block;
}

.nav-links a:nth-child(5) {
    transform: none;
}

.nav-links a:not(.faq-btn):not(.cart-btn)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #FF00FF !important;
    box-shadow: 0 0 8px #FF00FF !important;
    transition: var(--transition-base);
}

.nav-links a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav-links a:not(.faq-btn):not(.cart-btn):hover::after {
    width: 100%;
}

/* Language Toggle Button */
.lang-toggle {
    background: transparent;
    border: none;
    border-radius: 25px;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 160px;
    justify-content: center;
    flex-shrink: 0;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: none;
}

.lang-toggle .lang-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    position: relative;
}

.lang-toggle .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lang-toggle .lang-codes {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.lang-toggle .lang-codes span {
    display: inline-block;
    width: 1.4em;
    text-align: center;
    line-height: 1;
    vertical-align: middle;
    font-weight: 800;
}

.lang-toggle .lang-codes .lang-separator {
    position: relative;
    top: -2px;
    width: auto;
    font-weight: normal;
}

.lang-toggle .lang-codes .active {
    color: var(--color-diamond);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cart-btn,
.faq-btn {
    background: transparent !important;
    border: 1px solid cyan !important;
    color: white !important;
    padding: 0 1rem !important;
    height: 42px !important;
    border-radius: 25px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0.6rem !important;
    transition: all 0.3s ease;
    position: relative;
    width: auto !important;
    min-width: 100px !important;
    flex-shrink: 0;
    text-decoration: none !important;
    font-family: inherit;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

.faq-btn {
    min-width: 90px !important;
    font-size: 0.85rem !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
}

.faq-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.faq-icon svg {
    display: block !important;
    vertical-align: middle !important;
}

.faq-btn::after,
.cart-btn::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
}

.cart-btn:hover,
.faq-btn:hover {
    background: rgba(0, 255, 255, 0.1) !important;
    transform: scale(1.05);
}

.cart-text,
.faq-pill-text {
    color: white !important;
    font-weight: 700;
    font-size: 0.9rem !important;
    letter-spacing: 1px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.faq-icon {
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

.cart-icon,
.faq-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem;
    animation: none !important;
}

@keyframes cartBounce {

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

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

/* Cart Item Colors */
.cart-item-zafiro {
    color: #FF00FF;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.cart-item-emerald {
    color: #00ff88;
    /* Correct Emerald Green */
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.cart-item-diamond {
    color: #00FFFF;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.cart-badge {
    background: var(--color-diamond);
    color: black;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 50%;
    min-width: 20px;
    text-align: center;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 100px;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    display: none;
}

.hero-content {
    text-align: center;
    z-index: 1;
}

.hero-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: var(--spacing-md);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    /* Simplified */
    animation: float 3s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes float {

    /* PERFORMANCE: Simplified animation */
    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-10px) translateZ(0);
    }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

.title-line {
    display: block;
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFD700;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* ============================================
   HERO MARQUEE ANIMATION - REWRITTEN FROM SCRATCH
   ============================================ */

.hero-marquee-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 20, 40, 0.6) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding: 0.8rem 0;
    margin-bottom: var(--spacing-md);
}

.hero-marquee-track {
    display: inline-block;
    white-space: nowrap;
    animation: slide-left 20s linear infinite;
}

@keyframes slide-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

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

.hero-marquee-text {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
    padding: 0 2rem;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.4);
}

.hero-badges {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.badge {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 2px;
    color: var(--color-diamond);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(0, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    /* PERFORMANCE: Static glow, no animation */
    box-shadow: 0 0 10px #00ff00;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ============================================
   HERO VIDEO CONTAINER (Performance Optimized)
   ============================================ */

.hero-video-container {
    position: relative;
    max-width: 600px;
    width: 90%;
    margin: var(--spacing-md) auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 3px solid var(--color-diamond);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    /* PERFORMANCE: Layer isolation + containment */
    transform: translateZ(0);
    contain: layout paint;
}

.hero-video-container video,
.hero-video-container iframe {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* PERFORMANCE: GPU layer for video decoding */
    transform: translateZ(0);
}

.video-mute-btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--color-diamond);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.video-mute-btn:hover {
    background: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
}

.video-mute-btn .mute-icon {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* ============================================
   PRODUCTS SECTION
   ============================================ */

.products {
    padding: var(--spacing-xl) 0;
}

/* Ensure buttons are physically above any invisible layers */
.add-to-cart {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

/* Decor elements should NEVER intercept clicks */
.product-card::before,
.product-card::after,
.video-glitch-overlay,
.particles-bg {
    pointer-events: none !important;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

/* Navigation arrows: hidden on desktop, shown on mobile via media query */
.card-nav-arrows {
    display: none;
}

.products .container {
    position: relative;
}

.product-card {
    background: linear-gradient(180deg, rgba(8, 8, 18, 0.98) 0%, rgba(2, 2, 8, 1) 100%);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    padding-top: calc(0.25rem + 16px);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

/* Animated glowing border - OPTIMIZED */
.product-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--card-color), transparent, var(--card-color), transparent);
    background-size: 400% 400%;
    border-radius: calc(var(--radius-lg) + 2px);
    z-index: -1;
    /* PERFORMANCE: Remove expensive animation */
    opacity: 0.2;
    /* Reduced from 0.4 */
    transform: translateZ(0);
    will-change: auto;
}

/* Inner glow effect - OPTIMIZED */
.product-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.4);
    /* Simplified */
    pointer-events: none;
    transform: translateZ(0);
}

/* REMOVED: @keyframes borderGlow - too expensive */

.product-card.zafiro {
    --card-color: var(--color-zafiro);
    box-shadow: 0 0 40px rgba(255, 0, 255, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.product-card.emerald {
    --card-color: var(--color-emerald);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.product-card.diamond {
    --card-color: var(--color-diamond);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.product-marquee {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border-bottom: 1px solid var(--card-color);
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    align-items: center;
}

.marquee-content {
    display: flex;
    animation: marqueeScroll 15s linear infinite;
    white-space: nowrap;
}

.marquee-content span {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--card-color);
    letter-spacing: 2px;
    padding: 0 1.5rem;
    text-shadow: 0 0 10px var(--card-color);
}

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

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

.product-gem {
    text-align: center;
    margin: 1.5rem 0 0.5rem 0;
    position: relative;
}

.product-gem img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
    filter: drop-shadow(0 0 25px var(--card-color));
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
    object-fit: contain;
}

/* HOVER - Simple elegant effect */
.product-card:hover .product-gem img {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 0 35px var(--card-color)) drop-shadow(0 0 50px var(--card-color));
}

/* Three.js Canvas */
.product-gem canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Animación 3D de gemas (video) - DISABLED */
.product-gem-animation {
    display: none;
}

.product-gem-animation video {
    display: none;
}



.product-title {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    text-align: center;
    color: var(--card-color);
    text-shadow: 0 0 15px var(--card-color);
    margin: 0.2rem 0 0.1rem;
    line-height: 1.1;
}

.product-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.product-pricing {
    text-align: center;
    margin: 0.2rem 0;
    padding: 0;
    position: relative;
}

.price-label {
    font-size: 1.4rem;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    margin-bottom: 0.6rem;
    display: block;
    position: relative;
    z-index: 10;
}

/* Animated Price Label Container */
.price-label-container {
    position: relative;
    height: 1.8rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.price-label-phase {
    position: absolute;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    opacity: 0;
    white-space: nowrap;
}

/* Phase 1: PRECIO ORIGINAL - white, synced with price phase 1 */
.price-label-1 {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    animation: labelPhase1 5s ease-in-out infinite;
}

@keyframes labelPhase1 {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    5%,
    40% {
        opacity: 1;
        transform: translateY(0);
    }

    45%,
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Phase 2: PRECIO DE LANZAMIENTO - yellow, synced with price phase 3 */
.price-label-2 {
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    animation: labelPhase2 5s ease-in-out infinite;
}

@keyframes labelPhase2 {

    0%,
    62% {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }

    68% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }

    75%,
    95% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

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

/* Unified Price Animation Container */
.price-animated {
    position: relative;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.price-phase {
    position: absolute;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    opacity: 0;
    white-space: nowrap;
}

/* Phase 1: Original price WHITE - visible for 2 seconds */
.price-phase-1 {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    animation: pricePhase1 5s ease-in-out infinite;
}

@keyframes pricePhase1 {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    5%,
    40% {
        opacity: 1;
        transform: scale(1);
        color: #ffffff;
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    45%,
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Phase 2: Same price WHITE with RED strikethrough appearing */
.price-phase-2 {
    color: #ffffff;
    animation: pricePhase2 5s ease-in-out infinite;
}

.price-phase-2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 4px;
    background: #ff0000;
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
    animation: strikeAppear 5s ease-in-out infinite;
}

@keyframes strikeAppear {

    0%,
    38% {
        width: 0;
    }

    45% {
        width: 100%;
    }

    50%,
    100% {
        width: 100%;
    }
}

@keyframes pricePhase2 {

    0%,
    35% {
        opacity: 0;
        transform: scale(1) translateY(0);
    }

    40%,
    50% {
        opacity: 1;
        transform: scale(1) translateY(-1rem);
        color: #ffffff;
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    55% {
        opacity: 1;
        transform: scale(1.1) rotate(-2deg) translateY(-1rem);
        color: #ff3333;
        text-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale(0.95) rotate(2deg) translateY(-1rem);
        color: #ff0000;
        text-shadow: 0 0 30px rgba(255, 0, 0, 1);
    }

    65%,
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(0);
    }
}

/* Phase 3: Offer price EXPLODES in robot color */
.price-phase-3 {
    color: var(--card-color);
    animation: pricePhase3 5s ease-in-out infinite;
}

@keyframes pricePhase3 {

    0%,
    62% {
        opacity: 0;
        transform: scale(0.3);
    }

    68% {
        opacity: 1;
        transform: scale(1.5);
        text-shadow: 0 0 50px var(--card-color), 0 0 100px var(--card-color), 0 0 150px var(--card-color);
    }

    75% {
        opacity: 1;
        transform: scale(1.1);
        text-shadow: 0 0 40px var(--card-color), 0 0 80px var(--card-color);
    }

    85%,
    95% {
        opacity: 1;
        transform: scale(1.05);
        text-shadow: 0 0 30px var(--card-color), 0 0 60px var(--card-color);
    }

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

.product-features {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0 0.4rem;
    text-align: left;
}

.product-features li {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
    line-height: 1.3;
    opacity: 0;
    transform: translateX(-10px);
    animation: featureFadeIn 0.4s ease forwards;
    display: block;
    transition: color 0.3s, text-shadow 0.3s;
}

/* Staggered animation for each feature */
.product-features li:nth-child(1) {
    animation-delay: 0.1s;
}

.product-features li:nth-child(2) {
    animation-delay: 0.2s;
}

.product-features li:nth-child(3) {
    animation-delay: 0.3s;
}

.product-features li:nth-child(4) {
    animation-delay: 0.4s;
}

.product-features li:nth-child(5) {
    animation-delay: 0.5s;
}

.product-features li:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes featureFadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Green pulsing checkmark */
.product-features li::before {
    content: '✓';
    color: #00ff88;
    font-weight: 900;
    margin-right: 0.5rem;
    animation: checkPulse 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes checkPulse {

    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 5px #00ff88;
    }

    50% {
        opacity: 0.6;
        text-shadow: 0 0 15px #00ff88, 0 0 25px #00ff88;
    }
}

.product-card:hover .product-features li {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.product-features li:nth-child(1) {
    transition-delay: 0.05s;
}

.product-features li:nth-child(2) {
    transition-delay: 0.1s;
}

.product-features li:nth-child(3) {
    transition-delay: 0.15s;
}

.product-features li:nth-child(4) {
    transition-delay: 0.2s;
}

.product-features li:nth-child(5) {
    transition-delay: 0.25s;
}

.product-features li:nth-child(6) {
    transition-delay: 0.3s;
}

/* Already defined above with characteristic colors */

.product-features li:last-child {
    border-bottom: none;
}

/* ============================================
   PLATFORMS SECTION
   ============================================ */

.platforms {
    padding: var(--spacing-xl) 0;
    background: transparent;
}

.platforms-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-lg);
}

.platforms-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(10, 10, 30, 0.8);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 160px;
    min-height: 160px;
}

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

.platform-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.platform-card:hover img {
    filter: grayscale(0%) brightness(1.1);
}

.platform-name {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.add-to-cart {
    width: 100%;
    margin-top: var(--spacing-md);
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: transparent;
    border: 2px solid var(--card-color);
    color: var(--card-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 10px var(--card-color);
}

.add-to-cart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--card-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.add-to-cart:hover {
    color: #fff;
    text-shadow: 0 0 20px var(--card-color), 0 0 40px var(--card-color), 0 0 60px var(--card-color);
    box-shadow: 0 0 30px var(--card-color),
        0 0 60px var(--card-color),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    transform: translateY(-3px) scale(1.02);
    border-color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
}

.add-to-cart:hover::before {
    width: 0;
    height: 0;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */

.comparison {
    padding: var(--spacing-xl) 0 10px;
    background: transparent;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin: 3rem 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(5, 5, 20, 0.95);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid rgba(0, 255, 255, 0.4);
}

.comparison-table thead {
    background: rgba(0, 20, 40, 0.8);
}

.comparison-table th {
    padding: 1.5rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
    position: relative;
}

.comparison-table th.feature-col {
    text-align: left;
    color: var(--color-diamond);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
    font-size: 1.1rem;
    background: rgba(0, 50, 100, 0.3);
}

.comparison-table th.robot-col {
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    background: transparent;
}

.comparison-table th.zafiro {
    color: #ff00ff;
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
}

.comparison-table th.emerald {
    color: #00ff88;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
}

.comparison-table th.diamond {
    color: #00ffff;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

.comparison-table tbody tr {
    border-bottom: 1px solid rgba(0, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.comparison-table tbody tr:hover {
    background: rgba(0, 255, 255, 0.08);
    transform: scale(1.01);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2);
}

.comparison-table tbody tr.section-header {
    background: linear-gradient(90deg, rgba(0, 100, 200, 0.3), rgba(0, 150, 255, 0.2));
    border-top: 2px solid rgba(0, 255, 255, 0.4);
    border-bottom: 2px solid rgba(0, 255, 255, 0.4);
}

.comparison-table tbody tr.section-header td {
    padding: 1.2rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--color-diamond);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    text-shadow: 0 0 20px rgba(0, 255, 255, 1);
}

.comparison-table td {
    padding: 1.2rem 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    font-weight: 500;
    border-right: 1px solid rgba(0, 255, 255, 0.1);
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: rgba(200, 230, 255, 0.9);
    background: rgba(0, 30, 60, 0.3);
    border-right: 2px solid rgba(0, 255, 255, 0.3);
}

.comparison-table td:last-child {
    border-right: none;
}

/* Comparison Notes */
.comparison-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.note-card {
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.95), rgba(0, 40, 80, 0.85));
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.25);
}

@keyframes noteGlow {

    0%,
    100% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
    }
}

.note-card:hover {
    border-color: var(--color-diamond);
    box-shadow: 0 15px 50px rgba(0, 255, 255, 0.5);
    transform: translateY(-5px);
    background: linear-gradient(135deg, rgba(0, 30, 60, 0.95), rgba(0, 50, 100, 0.9));
}

.note-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
}

.note-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.8;
}

.note-card strong {
    color: var(--color-diamond);
    font-weight: 800;
    font-size: 1.2rem;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* ============================================
   PLATFORMS
   ============================================ */

/* FIXED: Orphan CSS properties removed - they were corrupting CSS parsing
font-weight: 700;
padding: 1.5rem;
text-align: left;
color: var(--color-diamond);
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid var(--color-diamond);
*/

.comparison-table td {
    padding: 1.5rem;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table tbody tr {
    transition: all var(--transition-fast);
}

.comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.row-zafiro .robot-name {
    color: var(--color-zafiro);
    font-weight: 700;
}

.row-emerald .robot-name {
    color: var(--color-emerald);
    font-weight: 700;
}

.row-diamond .robot-name {
    color: var(--color-diamond);
    font-weight: 700;
}

.status-yes {
    color: var(--color-emerald);
    font-weight: 700;
    text-shadow: 0 0 10px var(--color-emerald);
}

.probability {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-diamond);
}

/* Platforms Grid */
.platforms-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    padding: 2rem 0;
}

.platform-link {
    display: block;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.platform-link:hover {
    transform: translateY(-10px) scale(1.1);
}

.platform-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: brightness(1) drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
    transition: all var(--transition-normal);
}

.platform-link:hover .platform-logo {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
}

/* ============================================
   TESTIMONIALS - HORIZONTAL CAROUSEL
   ============================================ */

.testimonials {
    padding: var(--spacing-xl) 0;
    overflow: hidden;
}

.testimonials-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: var(--spacing-lg);
}

.testimonials-carousel-track {
    display: flex;
    gap: 2rem;
    animation: scrollTestimonials 60s linear infinite;
    will-change: transform;
}

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

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

    100% {
        transform: translateX(calc(-320px * 15 - 2rem * 15));
    }
}

.testimonial-card {
    min-width: 320px;
    max-width: 320px;
    background: var(--color-bg-card);
    /* REMOVED: backdrop-filter: blur(10px); - GPU KILLER */
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    flex-shrink: 0;
}

.testimonial-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
    border-color: var(--color-diamond);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--color-diamond);
    object-fit: cover;
}

.testimonial-info h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-diamond);
    margin-bottom: 0.25rem;
}

.testimonial-location {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: var(--spacing-sm);
}

.star {
    color: #ffd700;
    font-size: 1.2rem;
}

.star.empty {
    color: #333;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.testimonial-date {
    font-size: 1.1rem;
    color: #666;
    text-align: right;
}

/* ============================================
   COMMUNITY SECTION
   ============================================ */

.community {
    padding: 0;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.community .section-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

/* Telegram Paper Planes Animation */
.telegram-planes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* Increased from 0 */
    overflow: hidden;
}

.telegram-plane {
    position: absolute;
    width: 35px;
    height: 35px;
    opacity: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    will-change: transform, opacity;
}

.telegram-plane.flying {
    background-image: url('./avionhacialaderecha.webp');
    animation: planeFly var(--fly-duration, 3s) linear forwards;
    filter: drop-shadow(-15px 5px 10px rgba(200, 210, 220, 0.2)) drop-shadow(-35px 12px 20px rgba(180, 190, 200, 0.12));
}

@keyframes planeFly {
    0% {
        opacity: 0;
        transform: translate(-80px, -50px);
    }

    5% {
        opacity: 0.85;
    }

    95% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform: translate(calc(100vw + 80px), 150px);
    }
}

@keyframes planeFlyReverse {
    0% {
        opacity: 0;
        transform: translate(calc(100vw + 80px), -50px);
    }

    5% {
        opacity: 0.85;
    }

    95% {
        opacity: 0.85;
    }

    100% {
        opacity: 0;
        transform: translate(-80px, 150px);
    }
}

.telegram-plane.flying-reverse {
    background-image: url('./avionhacialaizquierda.webp');
    animation: planeFlyReverse var(--fly-duration, 3s) linear forwards;
    filter: drop-shadow(15px 5px 10px rgba(200, 210, 220, 0.2)) drop-shadow(35px 12px 20px rgba(180, 190, 200, 0.12));
}

.community .container {
    position: relative;
    z-index: 2;
    /* Increased from 1 */
}

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

.community-text {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Telegram Cards Grid */
.telegram-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 850px;
    margin: 0 auto 0.25rem;
}

@media (max-width: 768px) {
    .telegram-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Telegram Card Recreation - Using Telegram's actual font styles */
.telegram-card {
    background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
    border: 2px solid rgba(0, 180, 216, 0.5);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.15);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* Symmetry fix - flexbox layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 160px;
}

/* Ensure button is always at bottom */
.telegram-card .telegram-btn {
    margin-top: auto;
}

.telegram-description {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    font-size: 16px;
    margin: 0.5rem 0;
}

.telegram-avatar {
    width: 40px;
    height: 40px;
    margin: 0 auto 0.15rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #00b4d8;
    box-shadow: 0 0 8px rgba(0, 180, 216, 0.25);
}

.telegram-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.telegram-title {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 0.1rem;
    font-weight: 700;
}

.telegram-chart {
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.15rem;
}

.telegram-members {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    color: #7d8b99;
    margin-bottom: 0.25rem;
    font-weight: 400;
}

.telegram-verified {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.telegram-username {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    color: #00b4d8;
    margin-bottom: 0.25rem;
}

.telegram-main-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-bottom: 0.4rem;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
}

.telegram-main-group span:first-child {
    color: #ffd700;
    font-weight: 600;
}

.telegram-link {
    color: #7d8b99;
    font-size: 14px;
}

.telegram-btn {
    display: inline-block;
    background: #2481cc;
    color: #ffffff;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border-radius: 16px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 136, 204, 0.3);
    min-width: 140px;
    text-align: center;
}

.telegram-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.6);
}

/* Pulse Animation for Telegram Button */
.pulse-animation {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.85;
        transform: scale(1);
    }
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq {
    padding: var(--spacing-xl) 0;
}

.faq-list {
    max-width: 900px;
    margin: var(--spacing-lg) auto 0;
}

.faq-item {
    background: var(--color-bg-card);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.faq-item:hover {
    border-color: var(--color-diamond);
}

.faq-question {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    padding: var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-diamond);
}

.faq-icon {
    font-size: 1.5rem;
    transition: transform var(--transition-normal);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--color-bg-darker);
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: var(--glow-diamond);
}

.footer-links h4,
.footer-contact h4 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.footer-links a,
.footer-contact a {
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--color-diamond);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-secondary);
}

.powered-by {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* ============================================
   MODALS
   ============================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2147483646;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.modal.active {
    display: flex;
}

/* PERFORMANCE: Pause ALL background animations when any modal is open */
body.modal-open *:not(.modal):not(.modal *) {
    animation-play-state: paused !important;
    transition: none !important;
}

.modal-content {
    position: relative;
    background: var(--color-bg-card);
    border: 2px solid var(--color-diamond);
    border-radius: var(--radius-lg);
    max-width: 440px;
    width: 90%;
    max-height: none;
    overflow: visible;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    animation: modalSlideIn 0.25s ease-out;
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-diamond);
    text-shadow: var(--glow-text);
}

.modal-header .modal-close {
    position: static;
    flex-shrink: 0;
    align-self: center;
    margin-top: -5px;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 12px;
    background: rgba(255, 50, 50, 0.2);
    border: 2px solid #ff4444;
    color: #ff4444;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    line-height: 1;
    padding: 0 0 3px 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 100;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.modal-close:hover {
    background: #ff4444;
    color: white;
    transform: rotate(90deg) scale(1.1);
}

.modal-body {
    padding: 0.5rem 1rem;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 255, 255, 0.3);
}

/* Cart Modal Specific */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    /* Ligeramente compactado */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-item-logo-container {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
}

.cart-item-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-item-info h4 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: 0.25rem;
}

.cart-item-price {
    font-size: 1.2rem;
    font-weight: 700;
}

.remove-item {
    background: #ff4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.remove-item:hover {
    background: #ff0000;
    transform: scale(1.05);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem;
    /* Reducido proporcionalmente */
    font-family: var(--font-heading);
    font-size: 1.5rem;
    /* Ajustado de 1.8rem */
    font-weight: 900;
    color: var(--color-diamond);
    border-top: 2px solid var(--color-diamond);
    margin-top: 0.5rem;
}

/* Checkout Modal Specific */
.order-summary {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.order-summary h4 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.order-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-diamond);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--color-diamond);
}

.order-number {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    text-align: center;
}

.payment-section {
    margin-top: var(--spacing-md);
}

.payment-section h4 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.payment-btn {
    background: var(--color-bg-card);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.payment-btn:hover {
    border-color: var(--color-diamond);
    box-shadow: var(--glow-diamond);
    transform: translateY(-5px);
}

.payment-btn.selected[data-method="bep20"] {
    border-color: #F0B90B;
    background: rgba(240, 185, 11, 0.1);
    box-shadow: 0 0 20px rgba(240, 185, 11, 0.4);
}

.payment-btn.selected[data-method="trc20"] {
    border-color: #FF0013;
    background: rgba(255, 0, 19, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 19, 0.4);
}

.payment-icon {
    font-size: 2rem;
}

.discount-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff0000;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
}

.payment-details {
    margin-top: var(--spacing-md);
}

.wallet-address h5 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.address-box {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.address-box code {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-diamond);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    font-family: 'Courier New', monospace;
    color: var(--color-emerald);
    word-break: break-all;
}

.copy-btn {
    background: var(--color-diamond);
    color: var(--color-bg-dark);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-diamond);
}

.payment-note {
    text-align: center;
    color: var(--color-emerald);
    font-weight: 600;
    margin: var(--spacing-sm) 0;
}

/* Confirm Payment Button - Centered */
#confirmPayment {
    display: block;
    margin: var(--spacing-md) auto 0 auto;
}

/* Customer Info Form */
.customer-info-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.info-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

@media (max-width: 480px) {
    .info-field-row {
        grid-template-columns: 1fr;
    }
}

.info-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--color-diamond);
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.optional-tag {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0;
    text-transform: none;
}

.info-field input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.95rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.info-field input:focus {
    border-color: var(--color-diamond);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
}

.info-field input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.input-icon-wrap {
    position: relative;
}

.input-icon-wrap .input-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
}

.input-icon-wrap input {
    padding-left: 2.3rem;
}

.info-field input.invalid {
    border-color: #ff4444;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.3);
}

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

.success-icon {
    font-size: 5rem;
    color: var(--color-emerald);
    text-shadow: var(--glow-emerald);
    margin-bottom: var(--spacing-md);
}

.delivery-n.probability {
    color: var(--color-emerald);
    font-weight: 700;
    font-size: 1.3rem;
}

/* Technical Information Cards */
.tech-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.tech-card {
    background: rgba(10, 10, 30, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: 2rem;
    /* REMOVED: backdrop-filter: blur(10px); - GPU KILLER */
    transition: all var(--transition-normal);
}

.tech-card:hover {
    border-color: var(--color-diamond);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    transform: translateY(-5px);
}

.tech-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-diamond);
    text-align: center;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
}

.tech-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tech-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.tech-item:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateX(5px);
}

.zafiro-item {
    border-left-color: var(--color-zafiro);
}

.emerald-item {
    border-left-color: var(--color-emerald);
}

.diamond-item {
    border-left-color: var(--color-diamond);
}

.gem-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.robot-label {
    flex: 1;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.zafiro-item .robot-label {
    color: var(--color-zafiro);
}

.emerald-item .robot-label {
    color: var(--color-emerald);
}

.diamond-item .robot-label {
    color: var(--color-diamond);
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-diamond);
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 3px;
    margin-top: -5px;
}

.tech-value {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--color-diamond);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
}

.yes-value {
    color: var(--color-emerald);
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
}

.no-value {
    color: #ff0066;
    text-shadow: 0 0 10px rgba(255, 0, 102, 0.6);
}

.included-value {
    color: #ff00ff;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.6);
}

.tech-footer {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
}

.tech-footer strong {
    color: #fff;
    font-weight: 900;
}

.tech-footer-yellow {
    text-align: center;
    font-size: 1rem;
    color: #FFD700;
    font-weight: 700;
    margin-top: 1rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.tech-info-box {
    background: rgba(0, 100, 150, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tech-info-box p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Platforms Grid */
.delivery-note {
    color: var(--color-emerald);
    font-weight: 700;
    font-size: 1.2rem;
    margin: var(--spacing-md) 0;
}

.download-section {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.download-section h5 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.download-link {
    display: block;
    background: linear-gradient(135deg, var(--color-diamond), var(--color-zafiro));
    color: white;
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
    font-weight: 700;
    transition: all var(--transition-normal);
}

.download-link:hover {
    transform: translateX(10px);
    box-shadow: var(--glow-diamond);
}

.delivery-includes {
    margin-top: var(--spacing-md);
    text-align: left;
}

.delivery-includes h5 {
    font-family: var(--font-heading);
    color: var(--color-diamond);
    margin-bottom: var(--spacing-sm);
}

.delivery-includes ul {
    list-style: none;
}

.delivery-includes li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }

    .nav-links a {
        font-size: 0.9rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        font-size: 0.9rem;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 1rem;
    }

    .testimonials-carousel {
        grid-template-columns: 1fr;
    }

    .modal-footer {
        flex-direction: column;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-avatar {
        width: 150px;
        height: 150px;
    }

    .section-title {
        font-size: 2rem;
    }

    .product-gem img {
        width: auto;
        height: auto;
        max-width: 70px;
        max-height: 70px;
    }

    .price-current {
        font-size: 2rem;
    }
}

/* Payment Logos - Animated Design */
.payment-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.logo-usdt {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(38, 161, 123, 0.8));
    animation: logoFloat 2s ease-in-out infinite;
    background: transparent;
}

@keyframes logoFloat {

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

    50% {
        transform: translateY(-5px) scale(1.05);
    }
}

.network-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: badgeGlow 1.5s ease-in-out infinite alternate;
}

.network-badge.bep20 {
    background: linear-gradient(135deg, #F3BA2F, #E8A700);
    color: #000;
    box-shadow: 0 0 15px rgba(243, 186, 47, 0.6);
}

.network-badge.trc20 {
    background: linear-gradient(135deg, #FF0013, #CC0010);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 19, 0.6);
}

@keyframes badgeGlow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

.payment-btn {
    flex-direction: column;
    padding: 1.5rem 2rem;
    min-width: 180px;
}

.payment-btn:hover .logo-usdt {
    animation: logoSpin 0.6s ease-in-out;
    filter: drop-shadow(0 0 25px rgba(38, 161, 123, 1));
}

@keyframes logoSpin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* Order item and Cart item product name colors */
.order-item-zafiro,
.cart-item-zafiro {
    color: #ff00ff !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.order-item-emerald,
.cart-item-emerald {
    color: #00ff88 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.order-item-diamond,
.cart-item-diamond {
    color: #00ffff !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* ============================================
   FAQ SECTION
   ============================================ */

.faq {
    padding: var(--spacing-xl) 0;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.9), rgba(0, 40, 80, 0.7));
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(0, 255, 255, 0.05);
}

.faq-question h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--color-diamond);
    font-weight: 300;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 2rem 1.5rem;
}

.faq-answer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* ============================================
   COMMUNITY SECTION (Enhanced)
   ============================================ */

.community {
    padding: 7.0rem 0 5rem 0;
    background: transparent;
}

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

/* Hide telegram card nav arrows on desktop - shown via mobile media query */
.tg-nav-arrows {
    display: none;
}

/* Telegram Card - LARGER SIZE */
.telegram-card {
    background: linear-gradient(180deg, #0d1525 0%, #080c15 100%);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 20px;
    padding: 2.5rem 3rem;
    max-width: 550px;
    margin: 0 auto 1.5rem;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.25);
}

.telegram-avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-diamond);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

.telegram-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.telegram-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.telegram-chart {
    font-size: 1.3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.telegram-members {
    font-size: 1rem;
    color: #7a8b9a;
    margin-bottom: 1rem;
}

.telegram-verified {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.telegram-username {
    font-size: 1.05rem;
    color: var(--color-diamond);
    margin-bottom: 1rem;
    font-weight: 600;
}

.telegram-main-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.telegram-main-group span:first-child {
    color: #ffd700;
    font-weight: 600;
}

.telegram-link {
    color: #7a8b9a;
    font-size: 0.95rem;
}

.telegram-btn {
    display: inline-block;
    background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 25px rgba(0, 136, 204, 0.4);
    transition: all 0.3s ease;
}

.telegram-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(0, 136, 204, 0.6);
}

/* Community Text - Golden Yellow */
.community-text {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
}

/* ============================================
   FRANK CHATBOT - Animated & Fluid
   ============================================ */

.chat-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #00ffff 0%, #0088cc 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 5px 25px rgba(0, 255, 255, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 35px rgba(0, 255, 255, 0.7);
}

.chat-icon {
    font-size: 1.8rem;
    z-index: 2;
}

.chat-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 255, 255, 0.4);
    animation: chatPulse 2s ease-out infinite;
}

@keyframes chatPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.chat-window {
    position: fixed;
    bottom: 110px;
    right: 30px;
    width: 380px;
    max-height: 500px;
    background: linear-gradient(180deg, #0a0f1a 0%, #050810 100%);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 20px;
    display: none;
    flex-direction: column;
    z-index: 9999;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.2);
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.chat-window.active {
    display: flex;
    transform: translateY(0) scale(1);
    opacity: 1;
    animation: chatSlideUp 0.25s ease forwards;
}

@keyframes chatSlideUp {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

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

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.2rem;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-diamond);
    flex-shrink: 0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-header-text {
    display: flex;
    flex-direction: column;
}

.chat-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

.chat-status {
    font-size: 1rem;
    color: #00ff88;
}

.chat-header-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-expand,
.chat-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.chat-expand:hover {
    color: var(--color-diamond);
    background: rgba(0, 255, 255, 0.1);
}

.chat-close:hover {
    color: #ff4444;
    background: rgba(255, 0, 0, 0.1);
}

/* Expanded mode - x3 larger */
.chat-window.expanded {
    width: 90vw;
    max-width: 900px;
    max-height: 80vh;
    bottom: 5vh;
    right: 5vw;
}

.chat-window.expanded .chat-messages {
    min-height: 50vh;
    max-height: 60vh;
}

.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 280px;
    max-height: 320px;
}

.chat-msg {
    display: flex;
    animation: msgFadeIn 0.2s ease;
}

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

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

.chat-msg.user {
    justify-content: flex-end;
}

.chat-msg.bot {
    justify-content: flex-start;
}

.msg-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    font-size: 14px !important;
    line-height: 1.6;
}

.chat-msg.user .msg-bubble {
    background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-msg.bot .msg-bubble {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-bottom-left-radius: 4px;
}

.msg-bubble b {
    color: #00ffff;
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
}

#chatInput {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 25px;
    padding: 0.7rem 1.2rem;
    color: white;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#chatInput:focus {
    border-color: var(--color-diamond);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

#chatInput::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-send {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #00ffff 0%, #0088cc 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-send:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 15px rgba(0, 255, 255, 0.5);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .chat-window {
        width: calc(100% - 20px);
        right: 10px;
        bottom: 100px;
        max-height: 70vh;
    }

    .chat-toggle {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
}

/* Quick Access Buttons */
.quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.quick-btn {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: white;
    padding: 0.4rem 0.7rem;
    border-radius: 20px;
    font-size: 11px !important;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.quick-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.quick-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: scale(1.05);
}

.quick-btn.zafiro {
    border-color: #ff00ff;
    color: #ff66ff;
}

.quick-btn.zafiro:hover {
    background: rgba(255, 0, 255, 0.2);
}

.quick-btn.emerald {
    border-color: #00ff88;
    color: #66ffaa;
}

.quick-btn.emerald:hover {
    background: rgba(0, 255, 136, 0.2);
}

.quick-btn.diamond {
    border-color: #00ffff;
    color: #66ffff;
}

.quick-btn.diamond:hover {
    background: rgba(0, 255, 255, 0.2);
}

/* ============================================
   FLOATING MUTE BUTTON
   ============================================ */

.floating-mute-button {
    position: fixed;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid rgba(0, 255, 255, 0.5);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.floating-mute-button:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(0, 255, 255, 0.6);
}

.mute-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    transition: transform 0.3s ease;
}

/* Sound Wave Animations */
.sound-wave {
    position: absolute;
    border: 2px solid rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    animation: soundPulse 2s ease-out infinite;
    background: transparent;
}

.wave-1 {
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.wave-2 {
    width: 80px;
    height: 80px;
    animation-delay: 0.6s;
}

.wave-3 {
    width: 80px;
    height: 80px;
    animation-delay: 1.2s;
}

@keyframes soundPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Mute Icon (Hidden by default) */
.mute-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    z-index: 3;
    opacity: 0;
    transition: all 0.3s ease;
}

/* State with sound (NOT muted) - SOLO logo Frank visible */
.floating-mute-button:not(.muted) .mute-logo {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
    display: block;
}

.floating-mute-button:not(.muted) .mute-icon {
    opacity: 0;
    display: none;
}

/* Muted State (NO sound) - SOLO icono de mute visible */
.floating-mute-button.muted .sound-wave {
    animation: none;
    opacity: 0;
}

.floating-mute-button.muted .mute-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
    display: block;
}

.floating-mute-button.muted .mute-logo {
    opacity: 0;
    display: none;
}

.floating-mute-button.muted {
    border-color: rgba(255, 0, 0, 0.5);
    background: transparent;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .floating-mute-button {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }

    .mute-logo {
        width: 35px;
        height: 35px;
    }

    .mute-icon {
        font-size: 2rem;
    }

    .wave-1,
    .wave-2,
    .wave-3 {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU Acceleration for all transformed elements */
/* GPU layers — ONLY for elements with active continuous animations */
.product-card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* CRITICAL: Prevent html/body from creating containing blocks */
html,
body {
    transform-style: flat !important;
}

/* Reduce paint on scrolling */
.container,
section {
    contain: layout style;
}


/* Optimize box-shadows for performance — auto resets after transition */
.product-card:hover,
.platform-card:hover,
.note-card:hover {
    will-change: auto;
}

/* Reduce animation complexity for better performance */
.sound-wave {
    will-change: transform, opacity;
    contain: strict;
}

/* Image rendering optimization */
img {
    image-rendering: -webkit-optimize-contrast;
    will-change: auto;
}

/* ============================================
   PRODUCT CARD SYMMETRY FIX
   ============================================ */

/* Force all product cards to have same height */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.product-card {
    display: flex;
    flex-direction: column;
    min-height: 650px;
}

/* Fixed heights for consistent alignment */
.product-gem {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-title {
    min-height: 50px;
}

.product-subtitle {
    min-height: 60px;
}

.product-pricing {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-features {
    flex: 1;
    min-height: 200px;
}

/* Button always at bottom */
.product-cta {
    margin-top: auto;
    padding-top: 1rem;
}

/* Ensure consistent feature list height */
.product-features li {
    min-height: 28px;
}

/* ============================================
   DRAMATIC STRIKETHROUGH PRICE - ULTRA VISIBLE
   ============================================ */

.price-original {
    font-size: 2.5rem !important;
    color: #ff3333 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 4px !important;
    text-decoration-color: #ff0000 !important;
    font-weight: 800 !important;
    display: block !important;
    opacity: 1 !important;
    margin-bottom: 0.5rem !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3) !important;
    animation: priceFlash 2s ease-in-out infinite;
}

@keyframes priceFlash {

    0%,
    100% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}

/* ============================================
   LIGHT RAY ALIGNMENT FIX
   ============================================ */

.product-gem::after {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* ============================================
   FORCE FLOATING BUTTONS - CRITICAL FIX
   ============================================ */

.chat-toggle {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 99999 !important;
}

.floating-mute-button {
    position: fixed !important;
    top: 50% !important;
    left: 30px !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
}

.floating-mute-button:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* ============================================
   COMPARISON TABLE HOVER ANIMATIONS
   ============================================ */

/* Base transition for all table cells */
.comparison-table tbody td {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Row hover effect - subtle background highlight */
.comparison-table tbody tr:not(.section-header):hover {
    background: linear-gradient(90deg,
            rgba(0, 255, 255, 0.05) 0%,
            rgba(0, 255, 255, 0.08) 50%,
            rgba(0, 255, 255, 0.05) 100%);
}

/* Cell hover - fluid font-size increase */
.comparison-table tbody tr:not(.section-header):hover td {
    font-size: 1.15em;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* Even stronger effect on direct cell hover */
.comparison-table tbody td:hover {
    font-size: 1.25em !important;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
}

/* Preserve robot-specific colors on hover */
.comparison-table tbody td:hover span[style*="color"] {
    filter: brightness(1.3);
}

/* Smooth cursor indicator */
.comparison-table tbody tr:not(.section-header) {
    cursor: pointer;
}

/* Section headers - NO animation at all */
.comparison-table tbody tr.section-header,
.comparison-table tbody tr.section-header td {
    pointer-events: none;
    cursor: default;
    transition: none !important;
    transform: none !important;
    font-size: inherit !important;
}

/* Payment rows - special styling (no robot colors) */
.comparison-table tbody tr.payment-row {
    cursor: default;
}

.comparison-table tbody tr.payment-row:hover {
    background: linear-gradient(90deg,
            rgba(255, 200, 0, 0.05) 0%,
            rgba(255, 200, 0, 0.08) 50%,
            rgba(255, 200, 0, 0.05) 100%) !important;
}

.comparison-table tbody tr.payment-row:hover td {
    font-size: 1.1em !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(255, 200, 0, 0.3) !important;
    transform: none !important;
}

.comparison-table tbody tr.payment-row td {
    border-left: none !important;
    overflow: hidden;
}

/* ============================================
   COMMUNITY MARQUEE ANIMATION
   ============================================ */

.community-marquee-wrapper {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(10, 10, 20, 0.95) 50%,
            rgba(0, 0, 0, 0.9) 100%);
    border-top: 1px solid rgba(255, 200, 0, 0.4);
    border-bottom: 1px solid rgba(255, 200, 0, 0.4);
    padding: 12px 0;
    margin-top: 0.75rem;
}

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

.community-marquee-text {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffc800;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    padding: 0 3rem;
    text-shadow: 0 0 10px rgba(255, 200, 0, 0.5);
}

.community-marquee-text::before {
    content: '★';
    margin-right: 1.5rem;
    color: #ffc800;
}

.community-marquee-text::after {
    content: '★';
    margin-left: 1.5rem;
    color: #ffc800;
}

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

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

/* =========================================
   VIDEO GLITCH EFFECT - TV SIGNAL LOSS
   ========================================= */
.hero-video-container {
    position: relative;
    overflow: hidden;
}

.video-glitch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    background: linear-gradient(0deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 100%);
    background-size: 100% 4px;
}

.video-glitch-overlay.active {
    opacity: 1;
    animation: tvGlitch 0.5s ease-out;
}

@keyframes tvGlitch {
    0% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.9);
        transform: scale(1.02) skewX(2deg);
        filter: brightness(3) contrast(2);
    }

    10% {
        opacity: 0.8;
        background-color: rgba(0, 0, 0, 0.8);
        transform: scale(0.98) skewX(-3deg);
        filter: brightness(0.2);
    }

    20% {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.5);
        transform: scale(1.01) skewX(1deg);
        filter: brightness(2) hue-rotate(90deg);
    }

    30% {
        opacity: 0.6;
        background-color: transparent;
        transform: scale(1) translateX(-5px);
        filter: none;
    }

    40% {
        transform: translateX(5px) skewX(-1deg);
    }

    50% {
        transform: scale(1.01);
        opacity: 0.4;
    }

    60% {
        transform: scale(0.99) translateY(2px);
        opacity: 0.2;
    }

    80% {
        transform: scale(1);
        opacity: 0.1;
    }

    100% {
        opacity: 0;
        transform: scale(1);
        filter: none;
        background-color: transparent;
    }
}

/* Scanlines effect during glitch */
.video-glitch-overlay.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.3) 2px,
            rgba(0, 0, 0, 0.3) 4px);
    animation: scanlines 4s linear infinite;
}

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

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

/* =========================================
   PRODUCT LOGO - HOLOGRAPHIC GLOW ANIMATION
   ========================================= */
.product-gem {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-gem img {
    transition: all 0.3s ease;
}

/* Zafiro - Magenta/Pink glow */
.zafiro .product-gem img {
    animation: gemFloatZafiro 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.5));
}

/* Emerald - Green glow */
.emerald .product-gem img {
    animation: gemFloatEmerald 4s ease-in-out infinite;
    animation-delay: 1.33s;
    filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.5));
}

/* Diamond - Cyan glow */
.diamond .product-gem img {
    animation: gemFloatDiamond 4s ease-in-out infinite;
    animation-delay: 2.66s;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.5));
}

@keyframes gemFloatZafiro {

    0%,
    100% {
        transform: translateY(13px) scale(1);
        filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.4));
    }

    25% {
        transform: translateY(5px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(255, 0, 255, 0.7)) drop-shadow(0 0 50px rgba(255, 0, 255, 0.4));
    }

    50% {
        transform: translateY(1px) scale(1.05);
        filter: drop-shadow(0 0 35px rgba(255, 0, 255, 0.9)) drop-shadow(0 0 70px rgba(255, 0, 255, 0.5)) drop-shadow(0 0 100px rgba(255, 0, 255, 0.3));
    }

    75% {
        transform: translateY(7px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 45px rgba(255, 0, 255, 0.3));
    }
}

@keyframes gemFloatEmerald {

    0%,
    100% {
        transform: translateY(13px) scale(1);
        filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.4));
    }

    25% {
        transform: translateY(5px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(0, 255, 0, 0.7)) drop-shadow(0 0 50px rgba(0, 255, 0, 0.4));
    }

    50% {
        transform: translateY(1px) scale(1.05);
        filter: drop-shadow(0 0 35px rgba(0, 255, 0, 0.9)) drop-shadow(0 0 70px rgba(0, 255, 0, 0.5)) drop-shadow(0 0 100px rgba(0, 255, 0, 0.3));
    }

    75% {
        transform: translateY(7px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(0, 255, 0, 0.6)) drop-shadow(0 0 45px rgba(0, 255, 0, 0.3));
    }
}

@keyframes gemFloatDiamond {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.4));
    }

    25% {
        transform: translateY(-8px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 255, 255, 0.4));
    }

    50% {
        transform: translateY(-12px) scale(1.05);
        filter: drop-shadow(0 0 35px rgba(0, 255, 255, 0.9)) drop-shadow(0 0 70px rgba(0, 255, 255, 0.5)) drop-shadow(0 0 100px rgba(0, 255, 255, 0.3));
    }

    75% {
        transform: translateY(-6px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 45px rgba(0, 255, 255, 0.3));
    }
}

/* Hover enhancement */
.product-gem:hover img {
    transform: translateY(-15px) scale(1.1) !important;
}

/* =========================================
   PRODUCT BUTTON - CHARACTERISTIC COLORS ON HOVER
   ========================================= */
.zafiro .btn-primary:hover,
.zafiro .add-to-cart:hover {
    background: rgba(255, 0, 255, 0.2) !important;
    border-color: #ff00ff !important;
    color: #ff00ff !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.emerald .btn-primary:hover,
.emerald .add-to-cart:hover {
    background: rgba(0, 255, 0, 0.2) !important;
    border-color: #00ff00 !important;
    color: #00ff00 !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5), inset 0 0 20px rgba(0, 255, 0, 0.1);
}

.diamond .btn-primary:hover,
.diamond .add-to-cart:hover {
    background: rgba(0, 255, 255, 0.2) !important;
    border-color: #00ffff !important;
    color: #00ffff !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

/* Hero CTA button - cyan hover */
.hero-cta .btn-primary:hover {
    background: rgba(0, 255, 255, 0.2) !important;
    border-color: #00ffff !important;
    color: #00ffff !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

/* =========================================
   PRODUCT CARDS - PROPORTIONAL SCALE (85%)
   ========================================= */
.products-grid {
    transform: scale(0.85) translateY(-43px);
    transform-origin: top center;
    margin-bottom: -10%;
}

/* =========================================
   FIX: Button glow colors + Card corners
   ========================================= */

/* Button default state - each with its own color */
.zafiro .btn,
.zafiro .add-to-cart {
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4), inset 0 0 10px rgba(255, 0, 255, 0.1) !important;
    border-color: #ff00ff !important;
}

.emerald .btn,
.emerald .add-to-cart {
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), inset 0 0 10px rgba(0, 255, 0, 0.1) !important;
    border-color: #00ff00 !important;
}

.diamond .btn,
.diamond .add-to-cart {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 10px rgba(0, 255, 255, 0.1) !important;
    border-color: #00ffff !important;
}

/* Fix card corners - consistent border-radius */
.product-card {
    border-radius: 12px !important;
}

.product-card::before,
.product-card::after {
    border-radius: 12px !important;
}

/* =========================================
   FAQ SEARCH BAR - PREMIUM STYLE
   ========================================= */
.faq-search-wrapper {
    max-width: 900px;
    margin: 0 auto 1rem;
    padding: 0;
}

.faq-search-container {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(5, 15, 30, 0.95) 0%, rgba(10, 25, 45, 0.92) 100%);
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 16px;
    padding: 1.4rem 1.8rem;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(0, 255, 255, 0.3),
        0 0 30px rgba(0, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: searchNeonPulse 2s ease-in-out infinite;
}

@keyframes searchNeonPulse {

    0%,
    100% {
        opacity: 0.85;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

.faq-search-container:focus-within {
    border-color: rgba(0, 200, 220, 0.7);
    box-shadow: 0 0 25px rgba(0, 200, 220, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.faq-search-icon {
    font-size: 1.2rem;
    margin-right: 0.8rem;
    opacity: 0.7;
}

.faq-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
    font-family: var(--font-body);
    padding: 0.5rem 0;
}

.faq-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.faq-search-clear {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.faq-search-clear:hover {
    background: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.faq-search-results {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 1.2rem;
}

/* FAQ item hidden state for search */
.faq-item.hidden {
    display: none !important;
}

.faq-item.highlight {
    border-color: #00ffff !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

/* ============================================
   CHECKOUT MODAL - EXPANDABLE V5
   ============================================ */

/* Modal Content - Dynamic Width */
#checkoutModal .checkout-content {
    width: fit-content;
    max-width: 95vw;
    min-width: 384px;
    padding: 0 !important;
    background: rgba(8, 8, 12, 0.98);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 255, 255, 0.2);
    transition: min-width 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: min-width;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Expanded State - Reducido 20% */
#checkoutModal .checkout-content.expanded {
    min-width: 720px;
    /* Antes 900px */
}

#checkoutModal .modal-header {
    background: rgba(0, 0, 0, 0.6);
    padding: 1.5rem 2rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#checkoutModal .modal-header h3 {
    font-size: 2rem;
    letter-spacing: 4px;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* 2-Column Wrapper */
.checkout-columns-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    /* Hide right column until ready */
}

#checkoutModal .checkout-body {
    padding: 0;
    /* Remove padding here, apply to columns */
    overflow-y: hidden;
    /* Manage scroll internally if needed */
    scrollbar-width: none;
    display: block;
    /* Flex handled by wrapper */
}

/* Left Column - Always Visible */
.checkout-left-column {
    flex: 1;
    min-width: 480px;
    padding: 2rem 2.5rem;
    border-right: none;
    background: rgba(8, 8, 12, 0.98);
    z-index: 2;
    transition: flex 0.4s ease, padding 0.4s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Right Column - Hidden initially */
.checkout-right-column {
    flex: 0 0 0;
    width: 0;
    opacity: 0;
    padding: 0;
    background: rgba(15, 15, 20, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    overflow: hidden;
    transition: flex 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.4s ease;
    white-space: nowrap;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#checkoutModal .checkout-content.expanded .checkout-left-column {
    flex: 0 0 480px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Expanded Right Column */
#checkoutModal .checkout-content.expanded .checkout-right-column {
    flex: 1;
    /* Take remaining space */
    width: auto;
    opacity: 1;
    padding: 2rem 2.5rem;
    min-width: 420px;
}

/* Desktop: show full wallet address without truncation */
@media (min-width: 901px) {
    #checkoutModal .checkout-content.expanded .address-container {
        max-width: none !important;
    }

    #checkoutModal .checkout-content.expanded .address-container code {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: unset !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 1. Order Summary Bar */
.checkout-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 255, 255, 0.03);
    border: 2px solid rgba(0, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.2rem 2rem;
    margin-bottom: 2rem;
}

.summary-item {
    font-size: 1.2rem;
}

.summary-item .value {
    font-size: 1.6rem;
    font-weight: 800;
}

/* 2. Payment Selector */
.section-label {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 3px;
    font-weight: 700;
    text-align: center;
}

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

.payment-card {
    flex: 0 0 calc(33.33% - 1rem);
    background: rgba(20, 25, 35, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    min-height: 120px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

.payment-card.type-btc,
.payment-card.type-eth {
    flex: 0 0 calc(50% - 0.75rem);
    flex-direction: row;
    justify-content: center;
}

.payment-card img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}

.network-tag {
    font-size: 1rem;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.network-tag.bep20 {
    background: rgba(240, 185, 11, 0.2);
    color: #F0B90B;
    border: 1px solid #F0B90B;
    box-shadow: 0 0 10px rgba(240, 185, 11, 0.2);
}

.network-tag.erc20 {
    background: rgba(98, 126, 234, 0.2);
    color: #4a90e2;
    border: 1px solid #4a90e2;
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}

.network-tag.trc20 {
    background: rgba(255, 0, 19, 0.2);
    color: #ff3333;
    border: 1px solid #ff3333;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.3);
}

.payment-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
}

.payment-card.selected {
    background: rgba(0, 255, 255, 0.05);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
}

.payment-card[data-method="btc"].selected {
    border-color: #F7931A;
    box-shadow: 0 0 30px rgba(247, 147, 26, 0.4);
}

.payment-card[data-method="eth"].selected {
    border-color: #627EEA;
    box-shadow: 0 0 30px rgba(98, 126, 234, 0.4);
}

.payment-card[data-method="usdt_bep20"].selected {
    border-color: #F0B90B;
}

.payment-card[data-method="usdt_erc20"].selected {
    border-color: #4a90e2;
}

.payment-card[data-method="usdt_trc20"].selected {
    border-color: #ff3333;
}

/* 3. Right Column Elements */
.qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.qr-glow-frame {
    padding: 10px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

.qr-glow-frame img {
    width: 250px;
    /* Massive QR */
    height: 250px;
    display: block;
}

.scan-text {
    font-size: 1.2rem;
    letter-spacing: 2px;
    font-weight: 700;
}

.address-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Address Container + Tab Button */
.address-container {
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    height: 50px;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
}

.address-container code {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    padding: 0 1.5rem;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* YELLOW TAB BUTTON "COPIAR" */
.copy-tab-btn {
    appearance: none;
    border: none;
    background: rgba(8, 8, 12, 1);
    /* Match modal bg */
    color: #ffd700;
    /* Yellow Text */
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.1rem;
    padding: 0 2rem;
    cursor: pointer;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.copy-tab-btn:hover {
    background: #ffd700;
    /* Yellow BG */
    color: #000;
    /* Black Text */
}

/* Prevent mobile squashing */
@media (max-width: 900px) {

    #checkoutModal .checkout-content,
    #checkoutModal .checkout-content.expanded {
        min-width: 95vw;
        max-width: 95vw;
        overflow-y: auto;
    }

    .checkout-columns-wrapper {
        flex-direction: column;
    }

    .checkout-left-column {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .checkout-right-column {
        width: 100% !important;
        flex: 0 0 auto !important;
        opacity: 1 !important;
        /* Show by default on mobile if active? Or handle via JS */
        /* JS logic handles visibility, CSS handles style */
    }

    #checkoutModal .checkout-content.expanded .checkout-right-column {
        height: auto;
        opacity: 1;
        padding: 2rem;
    }
}

.checkout-actions {
    width: 100%;
}

.btn-block {
    padding: 1.2rem;
    font-size: 1.3rem;
    /* Huge Button Text */
    letter-spacing: 2px;
    font-weight: 800;
    border-radius: 10px;
}

/* Mobile responsive for horizontal layout */
@media (max-width: 850px) {
    #checkoutModal .checkout-content {
        max-width: 95vw !important;
        height: auto;
        max-height: 95vh;
    }

    .payment-details-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .qr-glow-frame img {
        width: 160px;
        height: 160px;
    }

    .address-wrapper {
        min-width: 100%;
    }
}

/* Checkout Button Hover - Light Blue */
#checkoutBtn:hover {
    background-color: var(--color-diamond) !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
    transform: translateY(-2px);
    border-color: var(--color-diamond) !important;
}

/* ============================================
   FLOATING BUTTONS - RESTORED VIA BACKUP FIX
   ============================================ */

/* Ensure html and body don't break fixed positioning */
html {
    height: 100% !important;
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    height: auto !important;
    min-height: 100% !important;
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Chat Toggle Button - ALWAYS VISIBLE */
#chatToggle,
.chat-toggle {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 65px !important;
    height: 65px !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #00ffff 0%, #0088cc 100%) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 5px 25px rgba(0, 255, 255, 0.5) !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Floating Mute Button - ALWAYS VISIBLE */
#floating-mute-btn,
.floating-mute-button {
    position: fixed !important;
    top: 50% !important;
    left: 30px !important;
    transform: translateY(-50%) !important;
    width: 80px !important;
    height: 80px !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 100, 255, 0.2)) !important;
    border: 3px solid rgba(0, 255, 255, 0.5) !important;
    cursor: pointer !important;
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.floating-mute-button:hover {
    transform: translateY(-50%) scale(1.1) !important;
}

/* Chat Window */
#chatWindow,
.chat-window {
    position: fixed !important;
    bottom: 110px !important;
    right: 30px !important;
    z-index: 2147483646 !important;
}

/* ============================================
   MISSING INNER ELEMENT STYLES - RESTORED
   ============================================ */

/* Chat Icon Text */
.chat-icon {
    font-size: 32px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
    line-height: 1;
}

/* Chat Pulse Animation */
.chat-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.6);
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    z-index: 1;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Sound Waves */
.sound-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.5);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.wave-1 {
    width: 100%;
    height: 100%;
    animation: wave 1.5s infinite;
    animation-delay: 0s;
}

.wave-2 {
    width: 120%;
    height: 120%;
    animation: wave 1.5s infinite;
    animation-delay: 0.5s;
}

.wave-3 {
    width: 140%;
    height: 140%;
    animation: wave 1.5s infinite;
    animation-delay: 1.0s;
}

@keyframes wave {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Mute Logo Image - Centered Background */
.mute-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    object-fit: contain;
    z-index: 20;
    opacity: 0.85;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mute Icon Text - Centered Foreground */
.mute-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    z-index: 25;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
    pointer-events: none;
}

/* ============================================
   CHATBOT ROBOT IMAGES - SIZE CONSTRAINT
   ============================================ */

.chat-robot-img {
    display: inline-block;
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    margin: -3px 6px -3px 0;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 2px 6px rgba(0, 255, 255, 0.5)) brightness(1.1) saturate(1.15);
}

/* ============================================
   TRUSTPILOT WIDGET STYLES
   ============================================ */

.trustpilot-widget {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 1.5rem;
}

.trustpilot-label {
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transform: translateY(2px);
}

.trustpilot-stars {
    display: flex;
    align-items: center;
}

.tp-stars-img {
    height: 48px;
    width: auto;
    transform: scale(3.5);
    transform-origin: center;
    margin-left: 40px;
    margin-right: 30px;
}

.trustpilot-reviews {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-left: 5px;
}

.trustpilot-reviews:hover {
    color: #ffffff;
}

.tp-logo-img {
    height: 24px;
    width: auto;
    vertical-align: middle;
    transform: scale(2.5) translateY(-1.5px);
    transform-origin: center;
}

.trustpilot-text {
    color: #ffffff;
    font-weight: 600;
}

.reviews-text {
    text-decoration: underline;
    text-decoration-color: #ffffff;
}

.trustpilot-logo {
    color: #00b67a;
    font-weight: 700;
    text-decoration: none;
}

.tp-star-icon {
    color: #00b67a;
    font-size: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trustpilot-widget {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 8px 14px;
    }

    .trustpilot-label {
        font-size: 0.95rem;
    }

    .tp-stars-img {
        height: 20px;
    }

    .trustpilot-reviews {
        font-size: 0.85rem;
    }
}

/* ========== REVIEWS CAROUSEL SECTION ========== */
.reviews-carousel-section {
    background: transparent;
    padding: 60px 0;
}

.reviews-carousel-section .container {
    text-align: center;
}

.reviews-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.reviews-rating-text {
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    font-weight: 600;
}

.reviews-stars-img {
    height: 32px;
    width: auto;
}

.reviews-subtitle {
    text-align: center;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    margin-bottom: 40px;
}

.reviews-subtitle strong {
    color: #ffffff;
}

.reviews-tp-logo {
    height: 20px;
    width: auto;
    vertical-align: middle;
    margin: 0 5px;
}

.reviews-tp-text {
    color: #ffffff;
    font-weight: 600;
}

/* Carrusel Vertical de 2 columnas */
.reviews-carousel-vertical {
    display: flex;
    gap: 20px;
    height: 500px;
    overflow: hidden;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.reviews-column {
    width: 320px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
}

.reviews-track-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reviews-track-up {
    animation: scrollUp 43s linear infinite;
}

.reviews-track-down {
    animation: scrollDown 43s linear infinite;
}

/* Columnas del medio más lentas */
.reviews-column-left .reviews-track-up {
    animation: scrollUp 52s linear infinite;
}

.reviews-column-right .reviews-track-down {
    animation: scrollDown 52s linear infinite;
}

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

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

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

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

.reviews-track-vertical:hover {
    animation-play-state: paused;
}

.review-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 12px;
    padding: 20px;
    min-width: 320px;
    max-width: 320px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.review-card-featured {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.review-rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.review-stars {
    display: inline-block;
    width: fit-content;
}

.review-stars img {
    height: 14px;
    width: auto;
}

.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 400;
    position: relative;
    top: -3px;
    margin-left: -6px;
}

.review-verified svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 2;
}

.review-stars-gray {
    display: inline-block;
    opacity: 0.5;
    width: fit-content;
}

.review-stars-gray img {
    height: 14px;
    width: auto;
}

.review-verified {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
}

.review-author {
    color: #ffffff;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.review-author span:first-child,
.review-author strong {
    color: #ffffff;
    font-weight: 600;
}

.review-date {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400;
}

.review-title {
    color: #ffffff;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    text-align: left;
}

.review-text {
    color: rgba(255, 255, 255, 0.85);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
    text-align: left;
}

/* Reviews Carousel Responsive */
@media (max-width: 768px) {
    .reviews-carousel-section {
        padding: 40px 0;
    }

    .reviews-rating-text {
        font-size: 1.5rem;
    }

    .reviews-stars-img {
        height: 24px;
    }

    .review-card {
        min-width: 260px;
        max-width: 260px;
        padding: 15px;
    }
}

/* ============================================
   AUDITED ACCOUNTS SECTION
   ============================================ */
.audited-section {
    padding: 25px 0;
    background: transparent;
    /* Inherit from body/particles */
    position: relative;
    overflow: hidden;
}

.audited-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -60px;
    margin-bottom: -20px;
}

.powered-text {
    color: #ffffff;
    font-size: 0.9rem;
    font-family: var(--font-body);
    font-weight: 400;
}

.myfxbook-logo {
    height: 130px;
    width: auto;
    vertical-align: middle;
}

/* Override container max-width for audited section */
.audited-section .container {
    max-width: 100%;
    width: 100%;
    padding: 0 20px;
}

.audited-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 97%;
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
}

.audited-card {
    background: rgba(10, 10, 20, 0.8);
    border: 2px solid #00FFFF;
    border-radius: 15px;
    padding: 80px 30px;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.audited-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), 0 10px 40px rgba(0, 0, 0, 0.4);
    border-color: #00FFFF;
}

.audited-card-content {
    text-align: center;
}

.audited-card-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: #00FFFF;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.audited-card-text {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-family: var(--font-body);
    margin-bottom: 20px;
}

.btn-request-link {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: 2px solid #E87E04;
    padding: 15px 80px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    position: relative;
    z-index: 2147483647;
}

.btn-request-link:hover,
.btn-request-link:active {
    background: rgba(232, 126, 4, 0.3);
    color: #ffffff;
    border-color: #E87E04;
    box-shadow: 0 0 20px rgba(232, 126, 4, 0.6), 0 0 40px rgba(232, 126, 4, 0.4), 0 0 60px rgba(232, 126, 4, 0.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.audited-button-container {
    text-align: center;
    margin-top: -150px;
}

/* Responsive */
@media (max-width: 992px) {
    .audited-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

/* Desktop: Hide carousel, show original audited-card grid */
.curved-carousel-container {
    display: none;
}

.neon-sphere {
    display: none;
}

/* ============================================
   PROFIT CALCULATORS SECTION
   ============================================ */
.calculators-section {
    padding: 50px 0;
    background: transparent;
    /* Inherit from body/particles */
    position: relative;
    overflow: hidden;
}

.calculators-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
}

.calc-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 30px;
    font-family: var(--font-body);
}

.calculators-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Hide mobile calculator on desktop */
.mobile-calc {
    display: none !important;
}

/* EA Selector Tabs */
.ea-selector-tabs {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px 15px 0 0;
}

.ea-tab {
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: rgba(20, 20, 30, 0.8);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ea-tab:hover {
    background: rgba(40, 40, 60, 0.8);
    color: #ffffff;
}

.ea-tab.active[data-ea="zafiro"] {
    border-color: #FF00FF;
    background: rgba(255, 0, 255, 0.2);
    color: #FF00FF;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

.ea-tab.active[data-ea="emerald"] {
    border-color: #00FF00;
    background: rgba(0, 255, 0, 0.2);
    color: #00FF00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

.ea-tab.active[data-ea="diamond"] {
    border-color: #00FFFF;
    background: rgba(0, 255, 255, 0.2);
    color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Unified Calculator Theme Colors */
.unified-calc[data-current-ea="zafiro"] {
    border-color: rgba(255, 0, 255, 0.5);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.2);
}

.unified-calc[data-current-ea="emerald"] {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
}

.unified-calc[data-current-ea="diamond"] {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
}

/* Calculator Card Base */
.calc-card {
    background: rgba(15, 15, 25, 0.9);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.calc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-color), transparent);
}

.calc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Card Colors */
.calc-card.zafiro {
    --card-color: #FF00FF;
}

.calc-card.emerald {
    --card-color: #00FF00;
}

.calc-card.diamond {
    --card-color: #00FFFF;
}

.calc-card.zafiro:hover {
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 20px 40px rgba(255, 0, 255, 0.15);
}

.calc-card.emerald:hover {
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 255, 0, 0.15);
}

.calc-card.diamond:hover {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.15);
}

/* Data Attribute Colors for Unified Calculator (Mobile) */
.unified-calc[data-current-ea="zafiro"] {
    --card-color: #FF00FF;
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 20px 40px rgba(255, 0, 255, 0.15);
}

.unified-calc[data-current-ea="emerald"] {
    --card-color: #00FF00;
    border-color: rgba(0, 255, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 255, 0, 0.15);
}

.unified-calc[data-current-ea="diamond"] {
    --card-color: #00FFFF;
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.15);
}

/* Calculator Header */
.calc-header {
    text-align: center;
    padding: 15px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.calc-logo {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calc-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.calc-logo.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px var(--card-color));
    }

    50% {
        filter: drop-shadow(0 0 25px var(--card-color));
    }
}

.calc-robot-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--card-color);
    margin-bottom: 5px;
    text-shadow: 0 0 10px var(--card-color);
}

.calc-badge {
    display: inline-block;
    background: var(--card-color);
    border: 1px solid var(--card-color);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #000;
    font-family: var(--font-body);
    text-shadow: none;
    letter-spacing: 0.5px;
}

/* Calculator Body */
.calc-body {
    padding: 15px;
}

.calc-input-group {
    margin-bottom: 12px;
}

.calc-input-group label {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 6px;
    font-family: var(--font-body);
}

.calc-balance {
    flex: 1;
    width: 100%;
    padding: 10px 15px;
    background: transparent !important;
    border: none !important;
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
    text-align: center;
}

/* Hide default numeric arrows */
.calc-balance::-webkit-outer-spin-button,
.calc-balance::-webkit-inner-spin-button,
.calc-custom-risk::-webkit-outer-spin-button,
.calc-custom-risk::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-balance,
.calc-custom-risk {
    -moz-appearance: textfield;
}

/* Custom Number Controls */
.calc-number-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.calc-number-wrapper:focus-within {
    border-color: var(--card-color);
    box-shadow: 0 0 15px rgba(var(--card-color), 0.3);
}

.calc-ctrl {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.custom-risk-wrapper {
    background: rgba(255, 200, 0, 0.1) !important;
    border: 1px solid rgba(255, 200, 0, 0.3);
    margin-top: 10px;
}

.custom-risk-wrapper .calc-ctrl {
    color: #FFC800;
    background: rgba(255, 200, 0, 0.05);
}

.custom-risk-wrapper .calc-ctrl:hover {
    background: rgba(255, 200, 0, 0.15);
}

.custom-risk-wrapper:focus-within {
    border-color: #FFC800;
    box-shadow: 0 0 15px rgba(255, 200, 0, 0.3);
}

.calc-ctrl:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--card-color);
}

.calc-ctrl:active {
    transform: scale(0.9);
}

.calc-ctrl.decrement {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-ctrl.increment {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-balance:focus {
    outline: none;
    border-color: var(--card-color);
    box-shadow: 0 0 15px rgba(var(--card-color), 0.3);
}

/* Risk Buttons */
.risk-buttons,
.period-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.risk-btn,
.period-btn {
    flex: 1;
    min-width: 40px;
    padding: 6px 3px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.risk-btn:hover,
.period-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--card-color);
}

.risk-btn.active,
.period-btn.active {
    background: var(--card-color);
    color: #000;
    font-weight: 600;
    border-color: var(--card-color);
    box-shadow: 0 0 15px var(--card-color);
}

.custom-risk-btn {
    background: rgba(255, 200, 0, 0.1);
    border-color: rgba(255, 200, 0, 0.3);
    color: #FFC800;
}

.calc-custom-risk {
    flex: 1;
    width: 100%;
    padding: 10px 15px;
    background: transparent !important;
    border: none !important;
    color: #FFC800;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: 0 !important;
    /* Reset margin since it is now in a wrapper */
}

.calc-custom-risk.hidden,
.custom-risk-wrapper.hidden {
    display: none !important;
}

/* Chart Container */
.calc-chart {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 10px;
    margin: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 80px;
}

.calc-chart canvas {
    width: 100% !important;
    height: 70px !important;
}

/* Results */
.calc-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 255, 100, 0.1);
    border: 1px solid rgba(0, 255, 100, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.result-label {
    color: rgba(0, 255, 100, 0.8);
    font-size: 0.75rem;
    font-family: var(--font-body);
    flex-shrink: 0;
    white-space: nowrap;
}

.result-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #00FF64;
    text-shadow: 0 0 15px rgba(0, 255, 100, 0.5);
    animation: result-glow 1.5s ease-in-out infinite;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

@keyframes result-glow {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}

.calc-final-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.final-label {
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-family: var(--font-body);
    flex-shrink: 0;
    white-space: nowrap;
}

.final-value {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #fff;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.calc-disclaimer {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin-top: 40px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 1200px) {
    .calculators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .calculators-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }

    .calculators-section {
        padding: 50px 0;
    }

    .risk-buttons,
    .period-buttons {
        flex-wrap: wrap;
    }

    .risk-btn,
    .period-btn {
        min-width: 45px;
        padding: 8px 4px;
        font-size: 0.8rem;
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile - iPhone and similar (max-width: 480px) */
@media (max-width: 480px) {

    /* Header/Nav adjustments */
    .navbar {
        padding: 10px 5px !important;
        transition: transform 0.25s ease-out, opacity 0.2s ease-out;
    }

    .navbar.navbar-hidden {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }

    .navbar .container {
        padding: 0 10px !important;
        max-width: 100% !important;
    }

    .nav-content {
        justify-content: center !important;
        padding: 0 !important;
        width: 100%;
    }

    .nav-brand {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        margin: 0;
        transform: none;
    }

    .nav-logo {
        width: 50px !important;
        height: 50px !important;
    }

    .brand-text {
        font-size: 1.4rem !important;
        white-space: nowrap;
    }

    .nav-links {
        display: none !important;
    }

    /* Trustpilot widget - single row on mobile */
    .trustpilot-widget {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        transform: scale(1);
        transform-origin: center;
        margin-top: -200px !important;
    }

    .trustpilot-label {
        font-size: 0.9rem !important;
    }

    .tp-stars-svg {
        width: 80px !important;
        height: 15px !important;
    }

    .trustpilot-reviews {
        font-size: 0.75rem !important;
        gap: 3px !important;
        margin-left: -3px;
    }

    .tp-logo-img {
        height: 14px !important;
    }

    .trustpilot-text {
        font-size: 0.75rem !important;
    }

    /* Hero title - 2 lines on mobile */
    .hero-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-title .title-line {
        display: block !important;
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .hero-title .title-line.glow-text {
        font-size: 2.2rem !important;
        white-space: nowrap !important;
    }

    /* Marquee strip - smaller on mobile */
    .hero-marquee-wrapper {
        padding: 6px 0 !important;
    }

    .hero-marquee-text {
        font-size: 0.7rem !important;
    }

    /* Hero badges - horizontal on mobile */
    .hero-badges {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    .hero-badges .badge {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        gap: 0.25rem !important;
    }

    .hero-badges .badge::before {
        position: relative;
        top: -1px;
    }

    /* Hero CTA buttons - horizontal on mobile */
    .hero-cta {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        margin-top: -40px !important;
    }

    .hero-cta .btn {
        font-size: 0.75rem !important;
        padding: 12px 16px !important;
        white-space: nowrap !important;
    }

    /* Hide second Trustpilot widget on mobile */
    .reviews-carousel-section .trustpilot-widget {
        display: none !important;
    }

    /* Reviews carousel - stacked horizontal on mobile */
    .reviews-carousel-vertical {
        flex-direction: column !important;
        gap: 15px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: -200px !important;
    }

    .reviews-column {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
        -webkit-mask-image: linear-gradient(to right,
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%) !important;
        mask-image: linear-gradient(to right,
                transparent 0%,
                black 10%,
                black 90%,
                transparent 100%) !important;
    }

    /* Hide 2 columns, keep 2 */
    .reviews-column-far-left,
    .reviews-column-far-right {
        display: none !important;
    }

    .reviews-track-vertical {
        flex-direction: row !important;
        gap: 15px !important;
        width: max-content !important;
    }

    /* First visible column moves right */
    .reviews-column-left .reviews-track-vertical {
        animation: scrollRight 45s linear infinite !important;
    }

    /* Second visible column moves left */
    .reviews-column-right .reviews-track-vertical {
        animation: scrollLeft 45s linear infinite !important;
    }

    .review-card {
        width: 200px !important;
        flex-shrink: 0 !important;
        padding: 12px !important;
    }

    .review-title {
        font-size: 0.75rem !important;
    }

    .review-text {
        font-size: 0.6rem !important;
        line-height: 1.3 !important;
    }

    .review-author {
        font-size: 0.55rem !important;
    }

    /* Products section - move up on mobile */
    .products {
        margin-top: -100px !important;
    }

    /* Products grid - horizontal swipeable on mobile */
    .products-grid {
        display: flex !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding: 20px 10px !important;
        scrollbar-width: none !important;
        perspective: 1000px !important;
        position: relative !important;
        min-height: 630px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .products-grid::-webkit-scrollbar {
        display: none !important;
    }

    .product-card {
        position: absolute !important;
        width: 75vw !important;
        max-width: 300px !important;
        font-size: 0.8rem !important;
        transition: transform 0.3s ease !important;
        border: 1px solid #111 !important;
        box-shadow: none !important;
        overflow: visible !important;
        height: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    .product-card::before {
        display: none !important;
        opacity: 0 !important;
    }

    .product-card.zafiro,
    .product-card.emerald,
    .product-card.diamond {
        box-shadow: none !important;
    }

    /* Zafiro - CENTER, FRONT */
    .product-card.zafiro {
        transform: translateZ(50px) !important;
        z-index: 30 !important;
        left: 50% !important;
        margin-left: -37.5vw !important;
        top: 30px !important;
    }

    /* Emerald - LEFT, BEHIND, tilted like a card in hand */
    .product-card.emerald {
        transform: translateX(-75px) rotate(-8deg) scale(0.85) translateZ(-50px) !important;
        z-index: 20 !important;
        left: 50% !important;
        margin-left: -37.5vw !important;
        opacity: 0.9 !important;
        top: -30px !important;
    }

    /* Diamond - RIGHT, BEHIND, tilted like a card in hand */
    .product-card.diamond {
        transform: translateX(75px) rotate(8deg) scale(0.85) translateZ(-50px) !important;
        z-index: 10 !important;
        left: 50% !important;
        margin-left: -37.5vw !important;
        opacity: 0.9 !important;
        top: -30px !important;
    }

    .product-title {
        font-size: 1.8rem !important;
    }

    .product-subtitle {
        font-size: 0.7rem !important;
    }

    .product-features li {
        font-size: 0.7rem !important;
        padding: 6px 0 !important;
    }

    .price-phase {
        font-size: 2rem !important;
    }

    /* ADD TO CART button styling */
    .product-card .btn {
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 20px !important;
    }

    /* Dynamic card position classes */
    .product-card.card-front {
        transform: translateZ(50px) !important;
        z-index: 30 !important;
        opacity: 1 !important;
        top: 0px !important;
        cursor: default !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease !important;
    }

    .product-card.card-left {
        transform: translateX(-75px) rotate(-8deg) scale(0.85) translateZ(-50px) !important;
        z-index: 20 !important;
        opacity: 0.9 !important;
        top: -30px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease !important;
    }

    .product-card.card-right {
        transform: translateX(75px) rotate(8deg) scale(0.85) translateZ(-50px) !important;
        z-index: 10 !important;
        opacity: 0.9 !important;
        top: -30px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease !important;
    }


    /* Card shuffle transition - controlled by JavaScript */
    .product-card.card-shuffling {
        transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.15s ease !important;
    }

    /* ========= NEON ARROW NAVIGATION ========= */
    .card-nav-arrows {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 50;
        pointer-events: none;
        padding: 0 4px;
    }

    .card-nav-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 60px;
        background: transparent;
        border: none;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        color: rgba(0, 255, 255, 0.8);
        text-shadow: 0 0 8px currentColor;
        transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        padding: 0;
    }

    .card-nav-arrow:active {
        transform: scale(0.9);
    }

    /* Dynamic neon colors matching active card */
    /* Zafiro (pink/magenta) */
    .card-active-zafiro .card-nav-arrow {
        color: rgba(255, 0, 200, 0.85);
        text-shadow: 0 0 10px rgba(255, 0, 200, 0.6), 0 0 20px rgba(255, 0, 200, 0.3);
    }

    /* Emerald (green) */
    .card-active-emerald .card-nav-arrow {
        color: rgba(0, 255, 100, 0.85);
        text-shadow: 0 0 10px rgba(0, 255, 100, 0.6), 0 0 20px rgba(0, 255, 100, 0.3);
    }

    /* Diamond (cyan) */
    .card-active-diamond .card-nav-arrow {
        color: rgba(0, 255, 255, 0.85);
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.3);
    }

    /* ========= GEM-COLORED GLOW ON FRONT CARD ========= */
    /* Base transition for smooth color change */
    .product-card.card-front {
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.35s ease,
            border-color 0.4s ease,
            box-shadow 0.4s ease !important;
    }

    /* Zafiro front card - Pink/Magenta glow */
    .card-active-zafiro .product-card.card-front {
        border: 2px solid rgba(255, 0, 200, 0.7) !important;
        box-shadow: 0 0 15px rgba(255, 0, 200, 0.4),
            0 0 30px rgba(255, 0, 200, 0.2),
            inset 0 0 15px rgba(255, 0, 200, 0.05) !important;
    }

    /* Emerald front card - Green glow */
    .card-active-emerald .product-card.card-front {
        border: 2px solid rgba(0, 255, 100, 0.7) !important;
        box-shadow: 0 0 15px rgba(0, 255, 100, 0.4),
            0 0 30px rgba(0, 255, 100, 0.2),
            inset 0 0 15px rgba(0, 255, 100, 0.05) !important;
    }

    /* Diamond front card - Cyan glow */
    .card-active-diamond .product-card.card-front {
        border: 2px solid rgba(0, 255, 255, 0.7) !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.4),
            0 0 30px rgba(0, 255, 255, 0.2),
            inset 0 0 15px rgba(0, 255, 255, 0.05) !important;
    }

    /* ========= GEM-COLORED BORDERS ON SIDE CARDS (50% opacity) ========= */
    .product-card.card-left,
    .product-card.card-right {
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.35s ease,
            border-color 0.4s ease,
            box-shadow 0.4s ease !important;
    }

    /* Zafiro side card */
    .product-card.zafiro.card-left,
    .product-card.zafiro.card-right {
        border: 2px solid rgba(255, 0, 200, 0.35) !important;
        box-shadow: 0 0 8px rgba(255, 0, 200, 0.15) !important;
    }

    /* Emerald side card */
    .product-card.emerald.card-left,
    .product-card.emerald.card-right {
        border: 2px solid rgba(0, 255, 100, 0.35) !important;
        box-shadow: 0 0 8px rgba(0, 255, 100, 0.15) !important;
    }

    /* Diamond side card */
    .product-card.diamond.card-left,
    .product-card.diamond.card-right {
        border: 2px solid rgba(0, 255, 255, 0.35) !important;
        box-shadow: 0 0 8px rgba(0, 255, 255, 0.15) !important;
    }

    /* ========= COMMUNITY TELEGRAM CARD NAV ARROWS ========= */
    /* Parent needs position: relative for absolute arrow positioning */
    .community-content {
        position: relative;
    }

    .tg-nav-arrows {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: -10px;
        right: -10px;
        transform: translateY(-50%);
        z-index: 60;
        padding: 0;
        pointer-events: none;
    }

    .tg-nav-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 60px;
        background: transparent;
        border: none;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        color: rgba(0, 255, 255, 0.8);
        text-shadow: 0 0 8px currentColor;
        transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        padding: 0;
    }

    .tg-nav-arrow:active {
        transform: scale(0.9);
    }

    /* Hide static audited cards on mobile */
    .audited-card {
        display: none !important;
    }

    /* Show carousel on mobile */
    .curved-carousel-container {
        display: flex !important;
    }

    /* Reduce top spacing for audited section on mobile */
    .audited-section {
        padding-top: 0px !important;
        margin-top: -60px !important;
    }

    .audited-section .section-title {
        margin-bottom: 10px !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        font-size: 1.3rem !important;
        gap: 6px !important;
        line-height: 1.4 !important;
    }

    .audited-section .section-title>span {
        display: block !important;
        white-space: normal !important;
    }

    .audited-powered-by {
        margin-top: -30px !important;
        margin-bottom: 10px !important;
    }

    /* Unified Calculator Mobile Styles */
    /* Hide desktop calculators on mobile */
    .desktop-calc {
        display: none !important;
    }

    /* Show mobile unified calculator */
    .mobile-calc {
        display: block !important;
    }

    .calculators-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        gap: 15px !important;
    }

    .unified-calc {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* EA Selector Tabs - Outside calculator, bigger */
    .ea-selector-tabs {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .ea-tab {
        padding: 12px 18px !important;
        font-size: 0.8rem !important;
        letter-spacing: 0.5px !important;
        border-radius: 25px !important;
        flex: 1 !important;
        max-width: 110px !important;
    }

    /* Restore Desktop Look for Inner Elements */
    .calc-header {
        padding: 15px !important;
    }

    .calc-logo {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 10px !important;
    }

    /* Scale only Emerald gem */
    .unified-calc[data-current-ea="emerald"] .calc-logo {
        transform: scale(1.35);
    }

    .calc-robot-name {
        font-size: 1.1rem !important;
        margin-bottom: 5px !important;
    }

    .calc-badge {
        font-size: 0.75rem !important;
        padding: 4px 12px !important;
    }

    .calc-body {
        padding: 20px !important;
        /* Original desktop padding implied or slightly reduced if needed, but 20px is good */
    }

    .calc-input-group {
        margin-bottom: 15px !important;
    }

    .calc-input-group label {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }

    .calc-balance {
        padding: 12px !important;
        font-size: 1rem !important;
    }

    .risk-buttons,
    .period-buttons {
        gap: 5px !important;
        flex-wrap: wrap !important;
    }

    .risk-btn,
    .period-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    .calc-chart {
        margin: 15px 0 !important;
    }

    .calc-result,
    .calc-final-balance {
        padding: 12px !important;
    }

    .result-value,
    .final-value {
        font-size: 1.25rem !important;
    }

    /* Audited cards - Horizontal 3D Carousel with Neon Sphere */
    .audited-grid {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        height: 580px !important;
        perspective: 800px !important;
        margin: -120px auto 0 auto !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Move Request Link button down on mobile */
    .audited-button-container {
        margin-top: 450px !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Remove fade effects */
    .audited-grid::before,
    .audited-grid::after {
        display: none !important;
    }

    /* Glowing Neon Sphere */
    .neon-sphere {
        position: absolute !important;
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
        background: radial-gradient(circle at 30% 30%, #00FFFF 0%, #0088aa 40%, #005566 70%, #002233 100%) !important;
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.6) !important;
        z-index: 1 !important;
        transform: translateZ(0) !important;
        animation: spherePulse 3s ease-in-out infinite !important;
    }

    @keyframes spherePulse {

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

        50% {
            opacity: 1;
            transform: scale(1.05) translateZ(0);
        }
    }

    /* JavaScript Curved 3D Carousel */
    .curved-carousel-container {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }

    .curved-carousel {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        transform-style: preserve-3d !important;
    }

    .flat-card-3d {
        transform-style: preserve-3d !important;
    }

    .card-front {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        backface-visibility: hidden !important;
        border: 1px solid #333 !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .card-back {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        background: #1a1a1a !important;
        backface-visibility: hidden !important;
        transform: rotateY(180deg) !important;
        border: 2px solid #333 !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .card-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }

    .card-overlay {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 10px !important;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .card-title {
        font-size: 0.9rem !important;
        font-weight: bold !important;
        color: #00FFFF !important;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8) !important;
    }

    .card-subtitle {
        font-size: 0.65rem !important;
        color: #ffffff !important;
        margin-top: 3px !important;
    }

    /* Legacy styles hidden */
    .carousel-3d-wrapper {
        display: none !important;
    }
}

/* Horizontal scroll animations for mobile */
@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

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

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

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

/* Tablets and small devices (max-width: 768px) */
@media (max-width: 768px) {
    .navbar .container {
        padding: 0 15px;
    }

    .nav-brand {
        margin-left: -5px;
    }

    .brand-text {
        font-size: 1rem;
    }
}

/* Mobile Sticky Header - Hidden by default */
.mobile-sticky-header {
    display: none;
}

@media (max-width: 480px) {
    .mobile-sticky-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #000000;
        border-bottom: 2px solid #00FFFF;
        padding: 10px 8px;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
        transition: transform 0.15s ease;
        box-shadow: none;
        gap: 0;
    }

    .mobile-sticky-header.visible {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(255, 0, 255, 0.3);
    }

    .mobile-header-nav {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-sticky-header a {
        color: #ffffff;
        text-decoration: none;
        font-size: 0.65rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        padding: 4px 2px;
        transition: color 0.2s ease;
        white-space: nowrap;
    }

    .mobile-sticky-header a:hover,
    .mobile-sticky-header a:active {
        color: #ffffff;
    }

    .mobile-sticky-header a.active-section {
        color: #ffffff !important;
        border-bottom: 2px solid #FF00FF !important;
        padding-bottom: 2px !important;
    }

    .mobile-header-icons {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: 6px !important;
        flex-shrink: 0 !important;
    }

    .mobile-lang-btn,
    .mobile-cart-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transition: opacity 0.2s ease;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    .mobile-lang-btn:hover,
    .mobile-cart-btn:hover,
    .mobile-lang-btn:focus,
    .mobile-cart-btn:focus,
    .mobile-lang-btn:active,
    .mobile-cart-btn:active {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        opacity: 0.8;
    }

    .mobile-lang-btn svg,
    .mobile-cart-btn svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .mobile-lang-btn svg {
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    .mobile-cart-btn {
        position: relative;
    }

    .mobile-cart-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #ff0066;
        color: white;
        font-size: 0.55rem;
        font-weight: bold;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Adjust scroll position for anchor links */
    #reviews {
        scroll-margin-top: 500px;
    }

    #comparison {
        scroll-margin-top: 100px;
    }

    #community {
        scroll-margin-top: 100px;
    }

    /* Mobile Notification Styles - ensure visibility only */
    .frank-notification {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Mobile Modal Styles */
    .modal .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 10px !important;
        padding: 15px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .modal .modal-header h3 {
        font-size: 1rem !important;
    }

    .modal .cart-item {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .modal .cart-item-info h4 {
        font-size: 0.9rem !important;
    }

    .modal .btn {
        font-size: 0.8rem !important;
        padding: 10px 15px !important;
    }

    .modal .modal-footer {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }

    .modal .modal-footer .btn {
        width: 100% !important;
    }

    /* Checkout Modal Mobile Styles */
    #checkoutModal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #checkoutModal .modal-content {
        width: 95% !important;
        max-width: none !important;
        min-width: unset !important;
        padding: 10px !important;
        transform: scale(0.92) !important;
        transform-origin: center center !important;
        margin: auto !important;
        overflow-y: auto !important;
        max-height: 90vh !important;
    }

    #checkoutModal .checkout-content {
        padding: 0 !important;
        overflow-y: auto !important;
        min-width: unset !important;
    }

    #checkoutModal .checkout-columns-wrapper {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    #checkoutModal .checkout-body,
    #checkoutModal .checkout-left-column {
        overflow: visible !important;
        flex: none !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    #checkoutModal .payment-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        justify-items: center !important;
    }

    #checkoutModal .payment-card {
        width: 100% !important;
        max-width: none !important;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        grid-column: span 1 !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        margin-bottom: 20px !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    #checkoutModal .payment-card img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    #checkoutModal .network-tag {
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
    }

    /* Make Bitcoin and Ethereum row centered */
    #checkoutModal .payment-card:nth-child(4) {
        grid-column: 1 / span 1 !important;
    }

    #checkoutModal .payment-card:nth-child(5) {
        grid-column: 2 / span 1 !important;
    }

    #checkoutModal .qr-glow-frame {
        position: relative !important;
        z-index: 100 !important;
        box-shadow: none !important;
        width: 180px !important;
        height: 180px !important;
        margin: -30px auto 0 auto !important;
    }

    #checkoutModal .qr-glow-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    #checkoutModal .checkout-content.expanded .checkout-right-column {
        padding: 0 !important;
    }

    #checkoutModal .qr-glow-frame::before,
    #checkoutModal .qr-glow-frame::after {
        display: none !important;
    }

    #checkoutModal .checkout-content {
        overflow: visible !important;
    }

    #checkoutModal .payment-grid {
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    #checkoutModal .checkout-right-column,
    #checkoutModal .qr-wrapper {
        display: none !important;
    }

    #checkoutModal .checkout-content.expanded .checkout-right-column,
    #checkoutModal .checkout-content.expanded .qr-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: none !important;
        background: transparent !important;
        position: relative !important;
        z-index: 100 !important;
        width: 100% !important;
        margin-top: -20px !important;
    }

    #checkoutModal .checkout-content.expanded .qr-glow-frame {
        margin: 0 auto !important;
        transform: none !important;
    }

    #checkoutModal .checkout-right-column::before,
    #checkoutModal .checkout-right-column::after {
        display: none !important;
    }

    #checkoutModal .payment-label {
        font-size: 0.55rem !important;
        margin-top: 5px !important;
    }


    #checkoutModal h3 {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }

    #checkoutModal h4 {
        font-size: 0.9rem !important;
    }

    #checkoutModal .order-summary,
    #checkoutModal .checkout-summary-bar {
        padding: 5px 10px !important;
        margin-bottom: 8px !important;
        min-height: auto !important;
        height: auto !important;
    }

    #checkoutModal .address-wrapper {
        transform: scale(0.92) !important;
        margin-top: -5px !important;
    }

    #checkoutModal .address-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 15px !important;
        gap: 15px !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }

    #checkoutModal .address-container code {
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        display: block !important;
    }

    #checkoutModal .copy-tab-btn {
        font-size: 0.8rem !important;
        padding: 8px 20px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item {
        padding: 3px 0 !important;
    }

    #checkoutModal #confirmPayment,
    #checkoutModal .checkout-body button[id="confirmPayment"] {
        display: block !important;
        margin: -10px auto 10px auto !important;
        text-align: center !important;
    }

    /* Move Compatible Platforms Title Up */
    .platforms {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }

    /* Move Community Section Up - Reduce top margin */
    section.community,
    #community {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Reduce comparison section bottom space on mobile */
    section.comparison,
    .comparison,
    #comparison {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    /* Move Subtitle Up */
    .platforms .section-title {
        margin-bottom: 5px !important;
    }

    .platforms-subtitle {
        margin-top: 0 !important;
        display: block !important;
        /* Ensure it's visible */
        font-size: 0.85rem !important;
        /* Adjusted for single line fit */
        padding: 0 5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* CORRECTED: 5 Platforms in one row - Small and Centered */
    .platforms-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 10px !important;
        margin-top: -15px !important;
        /* Reduce space above */
    }

    .platform-card {
        flex: 0 0 auto !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        min-height: 70px !important;
        height: 70px !important;
        aspect-ratio: 1/1 !important;
        padding: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(0, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .platform-card .platform-name {
        display: none !important;
    }

    .platform-card img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
        max-height: none !important;
    }

    /* Move Robot Comparison title up */
    .comparison {
        padding-top: 20px !important;
        margin-top: -20px !important;
    }

    /* Scale comparison table to fit mobile screen */
    .comparison-table-wrapper {
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .comparison-table {
        transform: scale(0.65) !important;
        transform-origin: top left !important;
        width: 154% !important;
        margin-bottom: -500px !important;
        /* Pull content up moderately after scaling */
    }

    /* Hide comparison notes on mobile */
    .comparison-notes {
        display: none !important;
    }

    /* Community section - title on one line and moved up */
    section.community {
        margin-top: 50px !important;
        padding-top: 0 !important;
        background: transparent !important;
    }

    section.community .section-title {
        font-size: 1.6rem !important;
        margin-bottom: 20px !important;
    }

    /* Telegram cards shuffle effect - expanded for mobile */
    .telegram-cards-grid {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 550px !important;
        perspective: 1000px !important;
        margin-top: 81px !important;
        margin-bottom: 0px !important;
    }

    .telegram-card {
        position: absolute !important;
        width: 68vw !important;
        max-width: 275px !important;
        padding: 2.8rem 1.8rem !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease !important;
        cursor: pointer !important;
    }

    .telegram-card .telegram-avatar {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 1.1rem !important;
    }

    .telegram-card .telegram-title {
        font-size: 1.35rem !important;
        margin-bottom: 0.4rem !important;
    }

    .telegram-card .telegram-chart {
        font-size: 1.15rem !important;
        margin-bottom: 0.4rem !important;
    }

    .telegram-card .telegram-members {
        font-size: 0.95rem !important;
        margin-bottom: 0.7rem !important;
    }

    .telegram-card .telegram-verified {
        font-size: 1rem !important;
        margin-bottom: 0.3rem !important;
    }

    .telegram-card .telegram-username {
        font-size: 1rem !important;
        margin-bottom: 0.8rem !important;
    }

    .telegram-card .telegram-main-group {
        font-size: 0.95rem !important;
        margin-bottom: 0.9rem !important;
        gap: 0.2rem !important;
    }

    .telegram-card .telegram-link {
        font-size: 0.9rem !important;
    }

    .telegram-card .telegram-btn {
        padding: 1.05rem 2rem !important;
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }

    .telegram-card.tg-card-front {
        transform: translateX(0) rotate(0deg) scale(1) !important;
        z-index: 50 !important;
        opacity: 1 !important;
        cursor: default !important;
    }

    .telegram-card.tg-card-back {
        transform: translateX(45px) translateY(10px) rotate(8deg) scale(0.92) !important;
        z-index: 10 !important;
        opacity: 0.9 !important;
    }

    /* Disable mobile tap highlight on telegram cards */
    .telegram-card {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* Community marquee - same size as top marquee */
    .community-marquee-wrapper {
        margin-top: 0px !important;
        padding: 0.8rem 0 !important;
    }

    .community-marquee-text {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        padding: 0 1rem !important;
    }

    /* FAQ section - move up */
    section.faq {
        margin-top: 0 !important;
        /* Reset negative margin to avoid gaps with Challenges section */
        background: transparent !important;
    }

    section.faq .section-title {
        font-size: 2.44rem !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.4 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 110px !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Scale FAQ content (search and questions) */
    section.faq .container {
        transform: scale(0.65) !important;
        transform-origin: top center !important;
        width: 154% !important;
        margin-left: -27% !important;
        /* Compensate for scale transform: reduce the bottom margin by 35% of the content height */
        /* Since we scale to 65%, we have 35% empty space at the bottom */
        margin-bottom: -35% !important;
    }

    /* Uniform height for FAQ items */
    .faq-item {
        min-height: 60px !important;
    }

    .faq-question {
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .faq-question h3 {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* Hide FAQ icon - clicking anywhere on question toggles answer */
    .faq-icon {
        display: none !important;
    }

    .faq-item.active .faq-icon {
        display: none !important;
    }

    /* Make question take full width */
    .faq-question h3 {
        flex: 1 !important;
        padding-right: 15px !important;
    }

    /* Move ROBOT COMPARISON title up to center it better */
    .comparison .section-title {
        margin-top: -15px !important;
    }

    /* Center answer text with proper padding */
    .faq-answer {
        padding: 15px 1.5rem 20px 1.5rem !important;
    }

    .faq-answer p {
        margin: 0 !important;
        text-align: left !important;
    }

    /* See more questions link */
    .faq-see-more-container {
        text-align: center !important;
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }

    .faq-see-more-link {
        color: #00ffff !important;
        text-decoration: underline !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* End page at FAQ section */
    .faq-see-more-container {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    section.faq {
        padding-bottom: 5px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    .faq-container,
    #faqList {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
        max-height: fit-content !important;
    }

    /* Force FAQ items to only take their natural height */
    .faq-item {
        height: auto !important;
        max-height: fit-content !important;
    }

    /* Remove any remaining elements that might cause spacing */
    .faq>.container {
        padding-bottom: 5px !important;
        height: auto !important;
    }

    /* Hide everything after FAQ section on mobile (except modals and notifications) */
    section.faq~*:not(.modal):not(.frank-notification),
    section.faq~div:not(.modal):not(.frank-notification),
    section.faq~section,
    section.faq~footer,
    footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure notifications are above other elements */
    .frank-notification {
        z-index: 2147483647 !important;
    }

    /* Override floating-buttons-fix.css to allow page height to fit content */
    html {
        height: auto !important;
        min-height: auto !important;
    }

    body {
        height: auto !important;
        min-height: auto !important;
    }

    /* Mobile: robot logo (not muted) - bigger and centered */
    .floating-mute-button:not(.muted) .mute-logo {
        transform: translate(-50%, -55%) scale(2.3) !important;
    }
}

/* Move Myfxbook carousel down to avoid overlapping with title */
#curvedCarousel {
    margin-top: 260px !important;
}

/* Move Powered by Myfxbook header up closer to section title */
.audited-powered-by {
    margin-top: -40px !important;
    margin-bottom: 10px !important;
}

/* Move OUR AUDITED ACCOUNTS title up */
.audited-section .section-title {
    margin-top: -50px !important;
    margin-bottom: 0 !important;
}

.audited-section {
    overflow: visible !important;
    padding-top: 20px !important;
    padding-bottom: 50px !important;
}

/* Move Request Link button down */
.audited-button-container {
    margin-top: 50px !important;
}

/* Reduce space above Robot Comparison section on desktop */
section.comparison,
.comparison {
    margin-top: -100px !important;
    padding-top: 50px !important;
}

/* Hide floating chat button on mobile only (keep mute/volume button) */
@media (max-width: 480px) {

    #chatToggle,
    .chat-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Move mute button to bottom-left on mobile to avoid blocking content */
    #floating-mute-btn,
    .floating-mute-button {
        top: auto !important;
        bottom: 20px !important;
        left: 20px !important;
        transform: none !important;
        width: 55px !important;
        height: 55px !important;
    }

    /* Mobile volume button - robot logo centered */
    .floating-mute-button:not(.muted) .mute-logo {
        transform: translate(-50%, -50%) scale(1.4) !important;
    }

    /* Mobile volume button - muted state elements centered */
    .floating-mute-button.muted .mute-logo,
    .floating-mute-button.muted .mute-icon {
        transform: translate(-50%, -45%) scale(1.7) !important;
    }

    /* Mobile modal close button - move down for centering */
    .modal-close,
    #downloadModal .modal-close,
    #checkoutModal .modal-close,
    #cartModal .modal-close {
        top: 25px !important;
    }
}

/* ========================================
   SPANISH TRANSLATION LAYOUT ADJUSTMENTS
   ======================================== */

/* Hero Title - Force 2 lines with max-width */
.hero h1.hero-title,
h1.hero-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 1.8rem !important;
}

.hero h1.hero-title .title-line,
h1.hero-title .title-line {
    display: block !important;
    text-align: center !important;
    font-size: 1.8rem !important;
}

/* Audited Section Title - Single line on desktop ONLY */
@media (min-width: 769px) {
    .audited-section .section-title {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.3em !important;
        font-size: 1.6rem !important;
        white-space: nowrap !important;
    }

    .audited-section .section-title>span {
        display: inline !important;
        white-space: nowrap !important;
        font-size: inherit !important;
    }
}

/* Hero CTA Buttons - Smaller size */
.hero-cta .btn {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.5rem !important;
    letter-spacing: 0px !important;
}

/* Community section base styles */
.community {
    margin-top: 80px;
    padding-top: 40px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .hero-cta .btn {
        padding: 0.7rem 1.2rem !important;
        font-size: 0.75rem !important;
    }

    /* Move Request Link button down on mobile */
    .audited-button-container {
        margin-top: 180px !important;
    }

    /* Reduce community section top margin on mobile */
    section.community,
    .community#community {
        margin-top: -650px !important;
        padding-top: 0px !important;
    }

    /* Reduce space below comparison table */
    .comparison-table-wrapper {
        margin-top: 80px !important;
        margin-bottom: -150px !important;
    }

    /* Community title - fit in 2 lines */
    .community .section-title {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
    }

    .community .section-title .glow-text {
        display: block !important;
    }

    /* FAQ title - same size as community title for symmetry */
    .faq .section-title {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
    }

    /* Community marquee - lower on mobile */
    .community-marquee-wrapper {
        margin-top: 64px !important;
    }

    /* Calculator subtitle - closer to title */
    .calc-subtitle {
        margin-top: -40px !important;
    }

    /* Comparison section - more space above title */
    section.comparison,
    .comparison#comparison {
        padding-top: 100px !important;
    }

    /* Italian language - lower community title on mobile */
    body.lang-it .community .section-title {
        margin-top: 250px !important;
        margin-bottom: 80px !important;
    }
}

/* ========================================
   DESKTOP RESPONSIVE - HERO TITLE SINGLE LINE
   ======================================== */

@media screen and (min-width: 1024px) {

    /* Hero Title - Single line for desktop, matching section-title size */
    .hero h1.hero-title,
    h1.hero-title {
        display: block !important;
        flex-direction: unset !important;
        text-align: center !important;
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    .hero h1.hero-title .title-line,
    h1.hero-title .title-line {
        display: inline !important;
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    /* Add space between PROFESSIONAL and TRADING ROBOTS */
    .hero h1.hero-title .title-line:first-child::after {
        content: ' ';
    }

    /* Hero CTA Buttons - Much larger for desktop */
    .hero-cta {
        gap: 2rem !important;
    }

    .hero-cta .btn {
        padding: 1.5rem 4rem !important;
        font-size: 1.4rem !important;
        letter-spacing: 2px !important;
    }

    /* Audited Section Title - Same size as hero title */
    .audited-section .section-title {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    .audited-section .section-title>span {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
    }

    /* Request Link Button - 50% larger for desktop */
    .btn-request-link {
        transform: scale(1.5) !important;
        transform-origin: center !important;
    }

    .audited-button-container {
        margin-top: 3rem !important;
        margin-bottom: 2rem !important;
    }

    /* Calculator Subtitle - 50% larger and centered for desktop */
    .calc-subtitle {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-top: -30px !important;
        margin-bottom: 3rem !important;
    }

    /* Platforms Subtitle - Same size and spacing as calc-subtitle for symmetry */
    .platforms-subtitle {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-top: -30px !important;
        margin-bottom: 3rem !important;
    }

    /* Community Section Title - Centered between cards above and below */
    section.community .section-title,
    .community#community .section-title {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
        padding-top: 0 !important;
    }

    section.community,
    .community#community {
        padding-top: 0 !important;
        padding-bottom: 4rem !important;
        margin-top: 0 !important;
    }

    /* Reduce space at bottom of comparison section */
    section.comparison,
    .comparison#comparison {
        padding-bottom: 0 !important;
    }

    .comparison-notes {
        display: none !important;
        margin-bottom: 0 !important;
    }

    /* Powered by text - Same size as calc-subtitle */
    .audited-powered-by,
    .audited-powered-by .powered-text {
        font-size: 1.5rem !important;
    }

    .audited-powered-by {
        margin-top: -20px !important;
        margin-bottom: 2rem !important;
    }

    /* Products Section Title - Balanced spacing */
    .products .section-title,
    section.products .section-title {
        margin-top: 0 !important;
        margin-bottom: 8rem !important;
        position: relative !important;
        top: -30px !important;
    }

    .products-grid,
    .products .products-grid {
        margin-top: 5rem !important;
    }

    section.products,
    .products#products {
        padding-top: 5rem !important;
    }

    /* Audited Chart Images - Desktop Only */
    .audited-chart-image {
        display: block !important;
        width: 100%;
        max-width: 950px;
        height: auto;
        margin: 0 auto;
        border-radius: 8px;
        border: 2px solid rgba(0, 255, 136, 0.5);
        box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
    }

    /* Hide mobile content on desktop */
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    /* Adjust audited card for chart image - Glassmorphism */
    .audited-card.zafiro-card {
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.15) !important;
        /* backdrop-filter replaced with solid rgba for 60FPS */
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        height: fit-content !important;
        line-height: 0 !important;
        min-height: unset !important;
        max-height: unset !important;
        transition: background 0.3s ease-out, border 0.3s ease-out, box-shadow 0.3s ease-out !important;
    }

    /* Zafiro hover - pink glass effect */
    .audited-card-wrapper.zafiro-wrapper:hover .audited-card.zafiro-card {
        background: rgba(255, 20, 147, 0.2) !important;
        border: 1px solid rgba(255, 105, 180, 0.5) !important;
        box-shadow: 0 8px 32px rgba(255, 20, 147, 0.4), inset 0 0 20px rgba(255, 105, 180, 0.1) !important;
    }

    .audited-card.zafiro-card .audited-chart-image,
    .audited-card.emerald-card .audited-chart-image {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Emerald card glassmorphism */
    .audited-card.emerald-card {
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.15) !important;
        /* backdrop-filter replaced with solid rgba for 60FPS */
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        height: fit-content !important;
        line-height: 0 !important;
        min-height: unset !important;
        max-height: unset !important;
        transition: background 0.3s ease-out, border 0.3s ease-out, box-shadow 0.3s ease-out !important;
    }

    /* Emerald hover - green glass effect */
    .audited-card-wrapper.emerald-wrapper:hover .audited-card.emerald-card {
        background: rgba(0, 200, 83, 0.2) !important;
        border: 1px solid rgba(0, 255, 136, 0.5) !important;
        box-shadow: 0 8px 32px rgba(0, 200, 83, 0.4), inset 0 0 20px rgba(0, 255, 136, 0.1) !important;
    }

    /* Diamond card glassmorphism */
    .audited-card.diamond-card {
        padding: 1.5rem !important;
        background: rgba(255, 255, 255, 0.15) !important;
        /* backdrop-filter replaced with solid rgba for 60FPS */
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        height: fit-content !important;
        line-height: 0 !important;
        min-height: unset !important;
        max-height: unset !important;
        transition: background 0.3s ease-out, border 0.3s ease-out, box-shadow 0.3s ease-out !important;
    }

    /* Diamond hover - cyan glass effect */
    .audited-card-wrapper.diamond-wrapper:hover .audited-card.diamond-card {
        background: rgba(0, 255, 255, 0.2) !important;
        border: 1px solid rgba(0, 200, 255, 0.5) !important;
        box-shadow: 0 8px 32px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 200, 255, 0.1) !important;
    }

    .audited-card.diamond-card .audited-chart-image {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Hide desktop-only elements on mobile */
@media screen and (max-width: 1023px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* Mouse Hover Indicator Animation */
@media screen and (min-width: 1024px) {
    .audited-card {
        position: relative !important;
        overflow: visible !important;
    }

    .mouse-trail-path {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: -20px !important;
        margin-left: -80px !important;
        width: 160px !important;
        height: 40px !important;
        z-index: 99 !important;
        pointer-events: none !important;
        opacity: 0.6 !important;
        transition: opacity 0.4s ease !important;
    }

    .mouse-trail-path path {
        stroke-dasharray: 200 !important;
        stroke-dashoffset: 200 !important;
        animation: trailDraw 4.5s ease-in-out infinite !important;
    }

    .audited-card-wrapper:hover .mouse-trail-path {
        opacity: 0 !important;
    }

    .hover-mouse-indicator {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin-top: -28px !important;
        margin-left: -28px !important;
        z-index: 100 !important;
        pointer-events: none !important;
        opacity: 0.85 !important;
        transition: opacity 0.4s ease !important;
        filter: none !important;
        animation: mouseRealSlide 4.5s ease-in-out infinite !important;
    }

    .audited-card-wrapper:hover .hover-mouse-indicator {
        opacity: 0 !important;
    }

    @keyframes mouseRealSlide {
        0% {
            transform: translateX(-60px) translateY(0px) rotate(-8deg);
        }

        25% {
            transform: translateX(-10px) translateY(10px) rotate(-2deg);
        }

        50% {
            transform: translateX(60px) translateY(0px) rotate(8deg);
        }

        75% {
            transform: translateX(-10px) translateY(10px) rotate(-2deg);
        }

        100% {
            transform: translateX(-60px) translateY(0px) rotate(-8deg);
        }
    }

    @keyframes trailDraw {
        0% {
            stroke-dashoffset: 200;
        }

        50% {
            stroke-dashoffset: 0;
        }

        100% {
            stroke-dashoffset: -200;
        }
    }
}

/* Audited Card Wrapper with Gem Hover Effect - Desktop Only */
@media screen and (min-width: 1024px) {
    .audited-card-wrapper {
        position: relative;
        display: inline-block;
    }

    /* Hidden gem behind the card */
    .hover-gem {
        position: absolute;
        width: 80px;
        height: 80px;
        object-fit: contain;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        opacity: 0;
        transition: all 0.3s ease-out;
        z-index: -1;
        filter: drop-shadow(0 0 0px transparent);
    }

    /* Hover state - gem slides up from behind and levitates */
    .audited-card-wrapper:hover .hover-gem {
        opacity: 1;
        top: -90px;
        transform: translateX(-50%) translateY(0);
        animation: levitate 1.5s ease-in-out infinite;
    }

    /* Color-specific shadows */
    .audited-card-wrapper.zafiro-wrapper:hover .zafiro-gem {
        filter: drop-shadow(0 8px 25px rgba(255, 20, 147, 0.8)) drop-shadow(0 0 15px rgba(255, 105, 180, 0.6));
    }

    .audited-card-wrapper.emerald-wrapper:hover .emerald-gem {
        filter: drop-shadow(0 8px 25px rgba(0, 200, 83, 0.8)) drop-shadow(0 0 15px rgba(0, 255, 136, 0.6));
    }

    .audited-card-wrapper.diamond-wrapper:hover .diamond-gem {
        filter: drop-shadow(0 8px 25px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 200, 255, 0.6));
    }

    /* Levitation animation */
    @keyframes levitate {

        0%,
        100% {
            transform: translateX(-50%) translateY(0px);
        }

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

/* Audited Powered By - closer to title */
.audited-powered-by {
    margin-top: -2.5rem !important;
    margin-bottom: 2rem !important;
}

/* Audited Grid - push cards and button down */
.audited-grid {
    margin-top: 4rem !important;
}

/* ========================================== */
/* 30-Day Guarantee Text - Desktop Only */
/* ========================================== */
.guarantee-text {
    text-align: center;
    padding: 0.8rem 0;
    margin: 0.5rem 0;
}

.guarantee-text p {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    line-height: 1.4;
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {

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

    10% {
        transform: scale(1.05);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.05);
    }

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

.guarantee-line {
    border: none;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    margin: 0;
    animation: neonSync 2s ease-in-out infinite;
}

@keyframes neonSync {

    0%,
    100% {
        opacity: 0.4;
    }

    10%,
    30% {
        opacity: 1;
        filter: brightness(2);
    }

    20% {
        opacity: 0.4;
        filter: brightness(1);
    }

    40% {
        opacity: 0.4;
        filter: brightness(1);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .guarantee-text {
        display: block !important;
        padding: 0.6rem 0;
    }

    .guarantee-text p {
        font-size: 0.85rem;
    }

    /* Reduce space between title and carousel in audited section */
    .audited-grid {
        margin-top: -120px !important;
    }
}

/* Products grid needs position relative for ribbon */
.products-grid {
    position: relative !important;
    overflow: visible !important;
}

/* ======================================= */
/* MOBILE HEADER BUTTONS - SMALL CIRCLES   */
/* ======================================= */
.mobile-header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mobile-lang-btn,
.mobile-cart-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.mobile-lang-btn svg,
.mobile-cart-btn svg {
    width: 12px !important;
    height: 12px !important;
}

.mobile-lang-btn svg {
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* FINAL OVERRIDE: Product card button visibility on mobile */
@media (max-width: 480px) {

    .products,
    section.products {
        overflow: visible !important;
    }

    .products-grid,
    .products .products-grid {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        min-height: 800px !important;
    }

    .product-card,
    .product-card.zafiro,
    .product-card.emerald,
    .product-card.diamond {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* ============================================
   iPHONE 12 PRO COMPACT — max-width 414px
   Targets 390px devices (iPhone 12 Pro, 13, 14)
   vs 428px devices (iPhone 12 Pro Max, 14 Plus)
   ~9% reduction in size/spacing across the board
   ============================================ */
@media (max-width: 414px) {

    /* ---- UNIFIED SECTION SPACING (40px symmetric gap) ---- */
    section.products,
    .audited-section,
    .calculators-section,
    section.platforms,
    section.comparison,
    section.community {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-bottom: 20px !important;
    }

    /* FAQ: última sección, terminar exactamente donde está el último elemento */
    section.faq {
        padding-top: 40px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ---- HERO SECTION ---- */
    .hero-title .title-line,
    .hero-title .title-line.glow-text {
        font-size: 1.85rem !important;
    }

    .hero-badges .badge {
        font-size: 0.42rem !important;
        padding: 3px 6px !important;
    }

    .hero-cta {
        margin-top: -35px !important;
        gap: 6px !important;
    }

    .hero-cta .btn {
        font-size: 0.65rem !important;
        padding: 10px 12px !important;
    }

    .hero-marquee-text {
        font-size: 0.6rem !important;
    }

    /* ---- TRUSTPILOT ---- */
    .trustpilot-widget {
        margin-top: -180px !important;
        transform: scale(0.9) !important;
    }

    .trustpilot-label {
        font-size: 0.8rem !important;
    }

    .trustpilot-reviews {
        font-size: 0.65rem !important;
    }

    /* ---- REVIEWS CAROUSEL ---- */
    .reviews-carousel-vertical {
        margin-top: -130px !important;
        gap: 10px !important;
    }

    .reviews-column {
        height: 155px !important;
    }

    .review-card {
        width: 175px !important;
        padding: 10px !important;
    }

    .review-title {
        font-size: 0.65rem !important;
    }

    .review-text {
        font-size: 0.52rem !important;
    }

    .review-author {
        font-size: 0.48rem !important;
    }

    /* ---- PRODUCTS SECTION ---- */
    .products,
    section.products {
        margin-top: 58px !important;
    }

    .products .section-title,
    section.products .section-title {
        margin-top: -100px !important;
    }

    .products-grid {
        min-height: 570px !important;
        padding: 15px 5px !important;
    }

    .product-card {
        width: 70vw !important;
        max-width: 270px !important;
        font-size: 0.72rem !important;
    }

    .product-card.zafiro,
    .product-card.emerald,
    .product-card.diamond {
        margin-left: -35vw !important;
    }

    .product-card.card-front {
        margin-left: -35vw !important;
        transform: translateZ(50px) !important;
    }

    .product-card.card-left {
        margin-left: -35vw !important;
        transform: translateX(-65px) rotate(-8deg) scale(0.82) translateZ(-50px) !important;
        opacity: 0.25 !important;
    }

    .product-card.card-right {
        margin-left: -35vw !important;
        transform: translateX(65px) rotate(8deg) scale(0.82) translateZ(-50px) !important;
        opacity: 0.25 !important;
    }

    .product-title {
        font-size: 1.5rem !important;
    }

    .product-subtitle {
        font-size: 0.62rem !important;
    }

    .product-features li {
        font-size: 0.62rem !important;
        padding: 4px 0 !important;
    }

    .price-phase {
        font-size: 1.7rem !important;
    }

    .product-card .btn {
        padding: 10px 16px !important;
        font-size: 0.75rem !important;
    }

    .products-grid {
        min-height: 720px !important;
    }

    /* ---- AUDITED SECTION ---- */

    .audited-section .section-title {
        font-size: 1.1rem !important;
        gap: 4px !important;
    }

    .audited-powered-by {
        margin-top: -25px !important;
    }

    .audited-grid {
        height: 520px !important;
        margin: -100px auto 0 auto !important;
    }

    .neon-sphere {
        width: 85px !important;
        height: 85px !important;
    }

    #curvedCarousel {
        margin-top: 230px !important;
    }

    .card-title {
        font-size: 0.8rem !important;
    }

    .card-subtitle {
        font-size: 0.55rem !important;
    }

    .audited-button-container {
        margin-top: 195px !important;
    }

    /* ---- CALCULATORS ---- */
    .calculators-section {
        padding: 35px 0 !important;
    }

    .calculators-section .section-title {
        font-size: 1.8rem !important;
    }

    .calc-subtitle {
        margin-top: -35px !important;
        font-size: 0.75rem !important;
    }

    .ea-tab {
        padding: 10px 14px !important;
        font-size: 0.72rem !important;
        max-width: 95px !important;
    }

    .calc-header {
        padding: 12px !important;
    }

    .calc-logo {
        width: 42px !important;
        height: 42px !important;
    }

    .calc-robot-name {
        font-size: 0.95rem !important;
    }

    .calc-body {
        padding: 15px !important;
    }

    .calc-input-group label {
        font-size: 0.8rem !important;
    }

    .calc-balance {
        padding: 10px !important;
        font-size: 0.9rem !important;
    }

    .risk-btn,
    .period-btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    .result-value,
    .final-value {
        font-size: 1.1rem !important;
    }

    /* ---- PLATFORMS ---- */
    .platforms-grid {
        gap: 5px !important;
        padding: 0 5px !important;
    }

    .platform-card {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        min-height: 60px !important;
        height: 60px !important;
        padding: 3px !important;
    }

    .platform-card img {
        width: 50px !important;
        height: 50px !important;
    }

    .platforms-subtitle {
        font-size: 0.75rem !important;
    }

    /* ---- COMPARISON TABLE ---- */
    .comparison-table {
        transform: scale(0.48) !important;
        width: 209% !important;
        margin-bottom: -1050px !important;
    }

    .comparison .section-title {
        margin-top: 40px !important;
        font-size: 1.8rem !important;
    }

    section.comparison,
    .comparison#comparison {
        padding-top: 85px !important;
    }

    /* ---- COMMUNITY / TELEGRAM ---- */
    section.community,
    .community#community {
        margin-top: -510px !important;
    }

    section.community .section-title {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }

    .telegram-cards-grid {
        min-height: 490px !important;
        margin-top: 70px !important;
    }

    .telegram-card {
        width: 62vw !important;
        max-width: 250px !important;
        padding: 2.2rem 1.4rem !important;
    }

    .telegram-card .telegram-avatar {
        width: 85px !important;
        height: 85px !important;
        margin-bottom: 0.8rem !important;
    }

    .telegram-card .telegram-title {
        font-size: 1.15rem !important;
    }

    .telegram-card .telegram-chart {
        font-size: 1rem !important;
    }

    .telegram-card .telegram-members {
        font-size: 0.82rem !important;
    }

    .telegram-card .telegram-verified {
        font-size: 0.85rem !important;
    }

    .telegram-card .telegram-username {
        font-size: 0.85rem !important;
    }

    .telegram-card .telegram-main-group {
        font-size: 0.82rem !important;
    }

    .telegram-card .telegram-link {
        font-size: 0.78rem !important;
    }

    .telegram-card .telegram-btn {
        padding: 0.85rem 1.6rem !important;
        font-size: 0.85rem !important;
    }

    .telegram-card.tg-card-back {
        transform: translateX(38px) translateY(8px) rotate(8deg) scale(0.9) !important;
    }

    .community-marquee-wrapper {
        margin-top: 58px !important;
    }

    .community-marquee-text {
        font-size: 0.65rem !important;
    }

    /* ---- FAQ SECTION ---- */
    section.faq .section-title {
        font-size: 2rem !important;
    }

    section.faq .container {
        transform: scale(0.58) !important;
        width: 172% !important;
        margin-left: -36% !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* CRÍTICO: FAQ es el ÚLTIMO elemento - SIN ESPACIO EXTRA */
    section.faq {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Forzar que body termine en el FAQ */
    body {
        position: relative !important;
        overflow: hidden !important;
        max-height: 8000px !important;
    }

    /* Prevenir scroll después del FAQ */
    section.faq~*,
    section.faq+* {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---- MOBILE STICKY HEADER ---- */
    .mobile-sticky-header {
        padding: 8px 5px !important;
    }

    .mobile-sticky-header a {
        font-size: 0.58rem !important;
        padding: 3px 1px !important;
    }

    .mobile-header-icons {
        gap: 4px !important;
        margin-left: 4px !important;
    }

    /* ---- MODALES - VISIBILIDAD PERFECTA EN MOBILE ---- */
    /* Asegurar que TODOS los modales se vean centrados y visibles */
    .modal {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2147483646 !important;
        overflow-y: auto !important;
        padding: 10px !important;
    }

    .modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .modal .modal-content,
    #cartModal .modal-content,
    #checkoutModal .modal-content,
    #customerInfoModal .modal-content,
    #downloadModal .modal-content {
        position: relative !important;
        width: 95% !important;
        max-width: none !important;
        margin: auto !important;
        transform: scale(0.92) !important;
        transform-origin: center center !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .modal .modal-body {
        overflow-y: auto !important;
        max-height: calc(85vh - 120px) !important;
    }

    /* Asegurar que el contenido del checkout modal también sea visible */
    #checkoutModal.active .checkout-content {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    section.comparison,
    .comparison {
        margin-bottom: -110px !important;
    }

    /* ---- SOLICITAR ENLACE BUTTON ---- */
    .btn-request-link {
        padding: 12px 35px !important;
        font-size: 0.9rem !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }

    /* ---- HEADER / NAV LOGO ---- */
    .nav-logo {
        width: 38px !important;
        height: 38px !important;
    }

    .brand-text {
        font-size: 1.15rem !important;
    }

    .navbar .container {
        padding: 0 8px !important;
    }
}

/* ============================================
   60 FPS PERFORMANCE ENGINE — KEEP ALL ANIMATIONS
   ============================================ */

/* 1. CSS Containment — Create Performance Islands */
/* Generic sections: layout + style only (no paint, prevents carousel clipping) */
section {
    contain: layout style;
    isolation: isolate;
}

/* Safe sections (no overflow): add paint containment */
.faq-section,
.community-section,
.footer,
.results-section,
.products-section {
    contain: layout style paint;
}

/* 2. Content-Visibility — Skip rendering below-fold sections */
.reviews-section,
.testimonials-section,
.faq-section,
.community-section,
.footer,
.results-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* 3. Compositor Hints — ONLY for continuously-animated tracks (GPU layer) */
.community-track,
.reviews-scroll-track,
.testimonials-scroll-track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 4. Scroll-Time Optimization — Pause non-essential animations during scroll */
html.is-scrolling .review-card,
html.is-scrolling .testimonial-card,
html.is-scrolling .stat-card,
html.is-scrolling .faq-item,
html.is-scrolling .gem-3d,
html.is-scrolling .gem-float,
html.is-scrolling .audited-card,
html.is-scrolling .community-card,
html.is-scrolling .sound-wave,
html.is-scrolling .note-card,
html.is-scrolling .platform-card,
html.is-scrolling .hero-avatar {
    animation-play-state: paused !important;
    transition: none !important;
}

/* 5. Shadow simplification during scroll for paint savings */
html.is-scrolling .review-card,
html.is-scrolling .testimonial-card,
html.is-scrolling .faq-item,
html.is-scrolling .stat-card,
html.is-scrolling .audited-card,
html.is-scrolling .community-card {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* 6. Restore everything instantly when scroll stops */
html:not(.is-scrolling) .review-card,
html:not(.is-scrolling) .testimonial-card,
html:not(.is-scrolling) .faq-item,
html:not(.is-scrolling) .stat-card,
html:not(.is-scrolling) .audited-card,
html:not(.is-scrolling) .community-card {
    transition: box-shadow 0.15s ease-out, text-shadow 0.15s ease-out;
}

/* 7. Off-screen animation freeze via IntersectionObserver class */
.offscreen-paused,
.offscreen-paused * {
    animation-play-state: paused !important;
}

/* 8. Overscroll containment on modals */
.modal.active .modal-content,
.modal.active .modal-body {
    overscroll-behavior: contain;
}

/* Fallback: Active section indicator (ensures it works even if media query rules fail) */
.mobile-sticky-header a.active-section {
    color: #ffffff !important;
    border-bottom: 2px solid #FF00FF !important;
    padding-bottom: 2px !important;
}

/* ============================================
   MODAL FIX CRÍTICO - MÁXIMA PRIORIDAD MOBILE
   ============================================ */
@media (max-width: 768px) {

    .modal.active,
    #cartModal.active,
    #checkoutModal.active,
    #customerInfoModal.active,
    #downloadModal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2147483647 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }

    .modal.active .modal-content,
    #cartModal.active .modal-content,
    #checkoutModal.active .modal-content,
    #customerInfoModal.active .modal-content,
    #downloadModal.active .modal-content,
    #checkoutModal.active .checkout-content {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 95% !important;
        max-height: 85vh !important;
    }
}


/* ============================================
   MODALES ULTRA COMPACTOS - SIN SCROLL MOBILE
   ============================================ */
@media (max-width: 768px) {

    /* Modal content - ultra compacto */
    .modal .modal-content,
    #cartModal .modal-content,
    #checkoutModal .modal-content,
    #customerInfoModal .modal-content,
    #downloadModal .modal-content {
        padding: 8px !important;
        max-height: 80vh !important;
        overflow: hidden !important;
    }

    /* Modal header - compacto */
    .modal-header {
        padding: 8px 10px !important;
        min-height: unset !important;
    }

    .modal-header h3 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    /* Modal close button - más pequeño */
    .modal-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 1.1rem !important;
        top: 8px !important;
        right: 8px !important;
    }

    /* Modal body - sin scroll */
    .modal-body {
        padding: 8px 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Cart items - compactos */
    .cart-item {
        padding: 6px !important;
        margin-bottom: 6px !important;
        gap: 6px !important;
    }

    .cart-item-info h4 {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
    }

    .cart-item-info p {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    .cart-item-price {
        font-size: 0.85rem !important;
    }

    .cart-item-remove {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }

    /* Cart summary - compacto */
    .cart-summary {
        padding: 6px 0 !important;
        margin: 6px 0 !important;
    }

    .cart-summary h4,
    .cart-total {
        font-size: 0.9rem !important;
        margin: 3px 0 !important;
    }

    /* Modal footer - compacto */
    .modal-footer {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .modal-footer .btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Checkout modal - ultra compacto */
    #checkoutModal .checkout-content {
        padding: 6px !important;
        overflow: visible !important;
    }

    #checkoutModal .checkout-header h3 {
        font-size: 0.9rem !important;
    }

    #checkoutModal .form-group {
        margin-bottom: 8px !important;
    }

    #checkoutModal .form-group label {
        font-size: 0.75rem !important;
        margin-bottom: 3px !important;
    }

    #checkoutModal .form-group input,
    #checkoutModal .form-group select {
        padding: 6px !important;
        font-size: 0.8rem !important;
    }

    #checkoutModal .order-summary {
        padding: 8px !important;
        margin: 8px 0 !important;
    }

    #checkoutModal .order-summary h4 {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }

    #checkoutModal .order-item {
        padding: 4px 0 !important;
        font-size: 0.75rem !important;
    }

    /* Ocultar scrollbars */
    .modal::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar {
        display: none !important;
    }

    .modal,
    .modal-content,
    .modal-body {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}


/* ============================================
   QR Y CHECKOUT - PERFECTAMENTE CENTRADO Y SIMÉTRICO
   ============================================ */
@media (max-width: 768px) {

    /* Checkout columns - todo en columna */
    .checkout-columns-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .checkout-left-column,
    .checkout-right-column {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Summary bar - compacto */
    .checkout-summary-bar {
        display: flex !important;
        justify-content: space-around !important;
        width: 100% !important;
        padding: 6px !important;
        gap: 10px !important;
    }

    .summary-item {
        font-size: 0.75rem !important;
    }

    .summary-item .label {
        font-size: 0.7rem !important;
    }

    .summary-item .value {
        font-size: 0.85rem !important;
    }

    /* Section labels - compactos */
    .section-label {
        font-size: 0.8rem !important;
        margin: 8px 0 6px 0 !important;
        text-align: center !important;
    }

    /* Payment grid - centrado */
    .payment-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 6px !important;
        width: 100% !important;
    }

    .payment-card {
        width: 60px !important;
        height: 60px !important;
        padding: 4px !important;
    }

    .payment-card img {
        width: 40px !important;
        height: 40px !important;
    }

    .payment-card .network-tag {
        font-size: 0.55rem !important;
        padding: 1px 3px !important;
    }

    /* QR WRAPPER - PERFECTAMENTE CENTRADO */
    .qr-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .qr-glow-frame {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 200px !important;
        height: 200px !important;
        padding: 8px !important;
        margin: 0 auto !important;
    }

    .qr-glow-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Address wrapper - centrado */
    .address-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 0 8px !important;
    }

    .address-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .address-container code {
        font-size: 0.65rem !important;
        padding: 4px 6px !important;
        word-break: break-all !important;
        text-align: center !important;
        flex: 1 !important;
    }

    .copy-tab-btn {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        min-width: 60px !important;
    }

    /* Checkout actions - centrado */
    .checkout-actions {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 8px !important;
    }

    .checkout-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
    }

    /* Payment details column */
    #paymentDetailsColumn {
        padding: 8px !important;
    }
}


/* ============================================
   REDUCCIÓN DRÁSTICA - TODO MÁS PEQUEÑO 50%
   ============================================ */
@media (max-width: 768px) {

    /* Título checkout */
    #checkoutModal .modal-header h3 {
        font-size: 0.7rem !important;
    }

    /* Summary bar - mucho más pequeño */
    .checkout-summary-bar {
        padding: 4px !important;
        gap: 6px !important;
    }

    .summary-item {
        font-size: 0.6rem !important;
    }

    .summary-item .label {
        font-size: 0.55rem !important;
    }

    .summary-item .value {
        font-size: 0.65rem !important;
    }

    /* Section label */
    #checkoutModal .section-label {
        font-size: 0.6rem !important;
        margin: 4px 0 3px 0 !important;
    }

    /* Payment buttons - MUY PEQUEÑOS */
    .payment-grid {
        gap: 4px !important;
        padding: 4px !important;
    }

    .payment-card {
        width: 50px !important;
        height: 50px !important;
        padding: 3px !important;
    }

    .payment-card img {
        width: 32px !important;
        height: 32px !important;
    }

    .payment-card .network-tag {
        font-size: 0.45rem !important;
        padding: 1px 2px !important;
    }

    /* QR - REDUCIDO A 140px */
    .qr-glow-frame {
        width: 140px !important;
        height: 140px !important;
        padding: 6px !important;
    }

    /* Address - más pequeño */
    .address-container code {
        font-size: 0.55rem !important;
        padding: 3px 4px !important;
    }

    .copy-tab-btn {
        padding: 3px 6px !important;
        font-size: 0.55rem !important;
        min-width: 50px !important;
    }

    /* Botón confirmar - más pequeño */
    .checkout-actions .btn {
        max-width: 240px !important;
        padding: 8px 10px !important;
        font-size: 0.65rem !important;
    }

    /* Reducir padding general del modal */
    #checkoutModal .modal-content {
        padding: 6px !important;
    }

    #checkoutModal .modal-body {
        padding: 6px !important;
    }

    .checkout-left-column,
    .checkout-right-column {
        padding: 4px !important;
    }
}

/* Cart modal también más pequeño */
@media (max-width: 768px) {
    #cartModal .modal-header h3 {
        font-size: 0.75rem !important;
    }

    #cartModal .cart-total {
        font-size: 0.7rem !important;
    }

    #cartModal .modal-footer .btn {
        font-size: 0.65rem !important;
        padding: 7px 10px !important;
    }
}


/* ============================================
   REDUCCIÓN ADICIONAL 20% - ULTRA COMPACTO
   ============================================ */
@media (max-width: 768px) {

    /* Título checkout - 20% más pequeño */
    #checkoutModal .modal-header h3 {
        font-size: 0.56rem !important;
    }

    /* Summary bar */
    .checkout-summary-bar {
        padding: 3px !important;
        gap: 5px !important;
    }

    .summary-item {
        font-size: 0.48rem !important;
    }

    .summary-item .label {
        font-size: 0.44rem !important;
    }

    .summary-item .value {
        font-size: 0.52rem !important;
    }

    /* Section label */
    #checkoutModal .section-label {
        font-size: 0.48rem !important;
        margin: 3px 0 2px 0 !important;
    }

    /* Payment buttons - 40x40px */
    .payment-grid {
        gap: 3px !important;
        padding: 3px !important;
    }

    .payment-card {
        width: 40px !important;
        height: 40px !important;
        padding: 2px !important;
    }

    .payment-card img {
        width: 26px !important;
        height: 26px !important;
    }

    .payment-card .network-tag {
        font-size: 0.36rem !important;
        padding: 0px 2px !important;
    }

    /* QR - REDUCIDO A 115px */
    .qr-wrapper {
        padding: 6px 0 !important;
    }

    .qr-glow-frame {
        width: 115px !important;
        height: 115px !important;
        padding: 4px !important;
    }

    /* Address */
    .address-wrapper {
        gap: 6px !important;
        padding: 0 6px !important;
    }

    .address-container {
        gap: 4px !important;
        padding: 4px !important;
    }

    .address-container code {
        font-size: 0.44rem !important;
        padding: 2px 3px !important;
    }

    .copy-tab-btn {
        padding: 2px 5px !important;
        font-size: 0.44rem !important;
        min-width: 40px !important;
    }

    /* Botón confirmar */
    .checkout-actions {
        padding: 0 6px !important;
    }

    .checkout-actions .btn {
        max-width: 190px !important;
        padding: 6px 8px !important;
        font-size: 0.52rem !important;
    }

    /* Padding general modal */
    #checkoutModal .modal-content {
        padding: 5px !important;
    }

    #checkoutModal .modal-body {
        padding: 5px !important;
    }

    .checkout-left-column,
    .checkout-right-column {
        padding: 3px !important;
    }

    .checkout-columns-wrapper {
        gap: 8px !important;
    }

    /* Modal header general */
    #checkoutModal .modal-header {
        padding: 6px 8px !important;
    }
}

/* Cart modal - reducción 20% adicional */
@media (max-width: 768px) {
    #cartModal .modal-header h3 {
        font-size: 0.6rem !important;
    }

    #cartModal .cart-total {
        font-size: 0.56rem !important;
    }

    #cartModal .modal-footer .btn {
        font-size: 0.52rem !important;
        padding: 6px 8px !important;
    }

    #cartModal .modal-content {
        padding: 5px !important;
    }

    #cartModal .modal-body {
        padding: 5px 8px !important;
    }
}


/* ============================================
   REBALANCE PROPORCIONES - ARMONÍA VISUAL
   ============================================ */
@media (max-width: 768px) {

    /* TEXTOS - Más legibles */
    #checkoutModal .modal-header h3 {
        font-size: 0.85rem !important;
    }

    .summary-item .label {
        font-size: 0.65rem !important;
    }

    .summary-item .value {
        font-size: 0.75rem !important;
    }

    #checkoutModal .section-label {
        font-size: 0.7rem !important;
    }

    .address-container code {
        font-size: 0.6rem !important;
    }

    .copy-tab-btn {
        font-size: 0.6rem !important;
    }

    .checkout-actions .btn {
        font-size: 0.7rem !important;
    }

    /* BOTONES DE PAGO - Más pequeños */
    .payment-card {
        width: 48px !important;
        height: 48px !important;
    }

    .payment-card img {
        width: 32px !important;
        height: 32px !important;
    }

    .payment-card .network-tag {
        font-size: 0.5rem !important;
    }

    /* QR - Tamaño balanceado */
    .qr-glow-frame {
        width: 130px !important;
        height: 130px !important;
    }
}

/* Cart Modal - Textos legibles */
@media (max-width: 768px) {
    #cartModal .modal-header h3 {
        font-size: 0.85rem !important;
    }

    #cartModal .cart-total {
        font-size: 0.75rem !important;
    }

    #cartModal .modal-footer .btn {
        font-size: 0.7rem !important;
    }
}


/* ============================================
   AJUSTE FINAL - PROPORCIONES PERFECTAS
   ============================================ */
@media (max-width: 768px) {

    /* BOTONES DE PAGO - MUY PEQUEÑOS */
    .payment-card {
        width: 38px !important;
        height: 38px !important;
        padding: 2px !important;
    }

    .payment-card img {
        width: 24px !important;
        height: 24px !important;
    }

    .payment-card .network-tag {
        font-size: 0.45rem !important;
    }

    /* QR - MÁS GRANDE Y VISIBLE */
    .qr-glow-frame {
        width: 150px !important;
        height: 150px !important;
        padding: 6px !important;
    }

    /* TEXTOS - MÁS LEGIBLES */
    #checkoutModal .modal-header h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    .summary-item .label {
        font-size: 0.75rem !important;
    }

    .summary-item .value {
        font-size: 0.85rem !important;
    }

    #checkoutModal .section-label {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }

    .address-container code {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
    }

    .copy-tab-btn {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }

    /* BOTÓN CONFIRMAR - MÁS GRANDE Y LEGIBLE */
    .checkout-actions .btn {
        font-size: 0.8rem !important;
        padding: 10px 14px !important;
        font-weight: 600 !important;
        max-width: 260px !important;
    }
}

/* Cart Modal - Textos legibles */
@media (max-width: 768px) {
    #cartModal .modal-header h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    #cartModal .cart-total {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }

    #cartModal .modal-footer .btn {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}


/* ============================================
   REDUCCIÓN 20% ADICIONAL EN ICONOS CRYPTO
   ============================================ */
@media (max-width: 768px) {
    .payment-card {
        width: 30px !important;
        height: 30px !important;
        padding: 2px !important;
    }

    .payment-card img {
        width: 19px !important;
        height: 19px !important;
    }

    .payment-card .network-tag {
        font-size: 0.38rem !important;
        padding: 0px 2px !important;
    }
}


/* ============================================
   CENTRADO SIMÉTRICO BTC Y ETH
   ============================================ */
@media (max-width: 768px) {
    .payment-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 6px !important;
        width: 100% !important;
    }
}


/* ============================================
   AJUSTES FINALES - LAYOUT Y PROPORCIONES
   ============================================ */
@media (max-width: 768px) {

    /* SUMMARY BAR - Textos más grandes */
    .summary-item .label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    .summary-item .value {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }

    /* QR - Reducido 25% */
    .qr-glow-frame {
        width: 113px !important;
        height: 113px !important;
        padding: 5px !important;
    }

    /* DIRECCIÓN CRYPTO - Reducida 25% */
    .address-container code {
        font-size: 0.53rem !important;
        padding: 3px 5px !important;
    }

    .copy-tab-btn {
        font-size: 0.5rem !important;
        padding: 3px 6px !important;
        min-width: 38px !important;
    }

    /* BOTÓN CONFIRMACIÓN - Reducido 25% */
    .checkout-actions .btn {
        font-size: 0.6rem !important;
        padding: 8px 11px !important;
        max-width: 195px !important;
    }
}



/* ============================================
   CENTRADO DE BOTONES Y TEXTOS DE RESUMEN
   ============================================ */
@media (max-width: 768px) {

    /* Centrar botones BTC y ETH */
    .payment-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Aumentar textos del summary bar */
    .checkout-summary-bar {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px !important;
    }

    .summary-item .label {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    .summary-item .value {
        font-size: 1.2rem !important;
        font-weight: 700 !important;
    }
}


/* ============================================
   SUPER FORCE - ALTA ESPECIFICIDAD (ID) 
   ============================================ */
@media (max-width: 768px) {

    /* Centrado de botones BTC y ETH con ID */
    #checkoutModal .payment-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Aumentar textos del summary bar con ID */
    #checkoutModal .checkout-summary-bar {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 15px !important;
    }

    #checkoutModal .summary-item .label {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: #888 !important;
    }

    #checkoutModal .summary-item .value {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        color: #fff !important;
    }

    /* Asegurar que los botones individuales se centren */
    #checkoutModal .payment-card {
        margin: 0 !important;
    }
}


/* ============================================
   REFINAMIENTO ESTÉTICO INDUSTRIAL - V6
   ============================================ */
@media (max-width: 768px) {

    /* 1. Barrita de Resumen - Cyan y Legible */
    #checkoutModal .checkout-summary-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 12px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(0, 255, 255, 0.2) !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    #checkoutModal .summary-item .label {
        font-size: 0.85rem !important;
        color: #888 !important;
        font-weight: 600 !important;
        margin-right: 5px !important;
    }

    #checkoutModal .summary-item .value {
        font-size: 1.1rem !important;
        color: #00ffff !important;
        font-weight: 700 !important;
        text-shadow: 0 0 8px rgba(0, 255, 255, 0.6) !important;
    }

    /* 2. Payment Grid - Simetría Perfecta y Centrado */
    #checkoutModal .payment-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px !important;
        width: 100% !important;
    }

    /* 3. Normalización de Botones (USDT, BTC, ETH iguales) */
    #checkoutModal .payment-card {
        width: 44px !important;
        height: 60px !important;
        padding: 4px !important;
        margin: 0 !important;
        background: rgba(15, 15, 20, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 5px !important;
        position: relative !important;
    }

    #checkoutModal .payment-card img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        position: relative !important;
        top: -10px !important;
    }

    #checkoutModal .payment-card.type-btc img,
    #checkoutModal .payment-card.type-eth img {
        top: 0px !important;
    }

    /* Network Tags (USDT) */
    #checkoutModal .payment-card .network-tag {
        position: absolute !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.55rem !important;
        white-space: nowrap !important;
        font-weight: 700 !important;
    }

    /* Espacio extra para las etiquetas USDT */
    #checkoutModal .payment-card.type-usdt {
        margin-bottom: 15px !important;
    }
}


/* ============================================

/* ============================================
   CONSOLIDACIÓN FINAL - PROPORCIONES V10
   ============================================ */
@media (max-width: 768px) {

    /* 1. Logos de Pago - GRANDES y Protagonistas */
    #checkoutModal .payment-card {
        width: 48px !important;
        height: 48px !important;
        padding: 3px !important;
        margin: 0 !important;
    }

    #checkoutModal .payment-card img {
        width: 42px !important;
        height: 42px !important;
        object-fit: contain !important;
    }

    /* Mostrar tags de red en mobile */
    #checkoutModal .network-tag {
        display: block !important;
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    /* 2. QR - GRANDE y Centrado (Protagonista Real) */
    #checkoutModal .qr-glow-frame {
        width: 140px !important;
        height: 140px !important;
        padding: 5px !important;
        margin: 15px auto !important;
    }

    /* 3. Barrita de Resumen - Cyan Industrial */
    #checkoutModal .summary-item .label {
        font-size: 0.8rem !important;
        color: #888 !important;
    }

    #checkoutModal .summary-item .value {
        font-size: 1.1rem !important;
        color: #00ffff !important;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5) !important;
    }

    /* 4. Botón de Confirmación - Texto Completo */
    #checkoutModal .checkout-actions .btn {
        font-size: 0.8rem !important;
        width: 100% !important;
        max-width: 300px !important;
        padding: 12px 10px !important;
        white-space: nowrap !important;
        margin: 10px auto !important;
        display: block !important;
    }

    /* 5. Asegurar que el grid esté centrado siempre */
    #checkoutModal .payment-grid {
        justify-content: center !important;
        gap: 10px !important;
        margin: 10px 0 !important;
    }
}


/* ============================================
   PULIDO ESTÉTICO FINAL - V11
   ============================================ */
@media (max-width: 768px) {

    /* 1. Logos con mejor Balance */
    #checkoutModal .payment-card {
        width: 46px !important;
        height: 46px !important;
        transition: all 0.2s ease !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #checkoutModal .payment-card img {
        width: 34px !important;
        height: 34px !important;
    }

    /* 2. Bordes Neón según Crypto Selección */
    #checkoutModal .payment-card.selected.type-usdt {
        border-color: #00ffff !important;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
    }

    #checkoutModal .payment-card.selected.type-btc {
        border-color: #F7931A !important;
        box-shadow: 0 0 15px rgba(247, 147, 26, 0.5) !important;
    }

    #checkoutModal .payment-card.selected.type-eth {
        border-color: #627EEA !important;
        box-shadow: 0 0 15px rgba(98, 126, 234, 0.5) !important;
    }

    /* 3. QR corregido (Sin cortes) */
    #checkoutModal .qr-glow-frame {
        width: 120px !important;
        height: 120px !important;
        margin: 10px auto !important;
        padding: 4px !important;
        overflow: hidden !important;
        /* Evita que el logo central se corte */
    }

    #checkoutModal .qr-glow-frame img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 4. Caja de dirección Compacta */
    #checkoutModal .address-container {
        padding: 5px 8px !important;
        margin-top: 5px !important;
        max-height: 45px !important;
        display: flex !important;
        align-items: center !important;
    }

    #checkoutModal .address-container code {
        font-size: 0.6rem !important;
        line-height: 1 !important;
    }

    #checkoutModal .copy-tab-btn {
        padding: 4px 8px !important;
        height: auto !important;
    }
}


/* ============================================
   REFINAMIENTO DINÁMICO DE SELECCIÓN - V12
   ============================================ */
@media (max-width: 768px) {
    /* AJUSTES ÚNICAMENTE CUANDO HAY SELECCIÓN (.expanded) */

    /* 1. Logos se achican un 15% adicional (de 34px a ~29px) */
    #checkoutModal .checkout-content.expanded .payment-card {
        width: 40px !important;
        height: 40px !important;
    }

    #checkoutModal .checkout-content.expanded .payment-card img {
        width: 29px !important;
        height: 29px !important;
    }

    /* 2. Subir caja de dirección un 5% (margen negativo) */
    #checkoutModal .checkout-content.expanded .address-container {
        transform: translateY(-8px) !important;
    }

    /* 3. Bajar QR 5% y Agrandar 10% (de 120px a 132px) */
    #checkoutModal .checkout-content.expanded .qr-glow-frame {
        width: 132px !important;
        height: 132px !important;
        margin-top: 20px !important;
        /* Baja el QR */
        transform: translateY(5px) !important;
    }

    /* Re-centrar el grid para que no se vea vacío al achicar */
    #checkoutModal .checkout-content.expanded .payment-grid {
        margin-bottom: 0 !important;
    }
}


/* ============================================
   INCREMENTO DE ELEVACIÓN (V13)
   ============================================ */
@media (max-width: 768px) {
    #checkoutModal .checkout-content.expanded .address-container {
        transform: translateY(-16px) !important;
        /* Elevación del 10% */
    }
}


/* ============================================
   LIMPIEZA Y ELEVACIÓN FINAL (V13)
   ============================================ */
@media (max-width: 768px) {

    /* 1. Eliminar separador gris (hr o border) */
    #checkoutModal hr,
    #checkoutModal .separator,
    #checkoutModal .payment-details::before {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* 2. Elevación de la caja de dirección (10% extra) */
    #checkoutModal .checkout-content.expanded .address-container {
        transform: translateY(-24px) !important;
    }

    /* 3. Ajuste de margen del QR para compensar la falta de separador */
    #checkoutModal .checkout-content.expanded .qr-glow-frame {
        margin-top: 5px !important;
    }
}


/* ============================================
   AJUSTES DE PRECISIÓN - V14
   ============================================ */
@media (max-width: 768px) {

    /* 1. ELIMINAR SEPARADOR DEFINITIVAMENTE */
    #checkoutModal .checkout-right-column,
    #checkoutModal .checkout-left-column,
    #checkoutModal .checkout-columns-wrapper>div,
    #checkoutModal .checkout-body::before,
    #checkoutModal .checkout-body::after,
    #checkoutModal .checkout-columns-wrapper {
        border: none !important;
        box-shadow: none !important;
    }

    /* 2. FILA 2 (BTC/ETH): Más arriba, más chicos, logo más grande */
    #checkoutModal .payment-grid {
        row-gap: 4px !important;
        /* Pega la Fila 2 a la Fila 1 */
    }

    #checkoutModal .payment-card.type-btc,
    #checkoutModal .payment-card.type-eth {
        width: 42px !important;
        height: 42px !important;
        padding: 2px !important;
    }

    #checkoutModal .payment-card.type-btc img,
    #checkoutModal .payment-card.type-eth img {
        width: 36px !important;
        height: 36px !important;
    }

    /* Ajuste de logos generales (si no están seleccionados) */
    #checkoutModal .payment-card img {
        transition: transform 0.2s ease-in-out !important;
    }

    /* 3. QR un poco más abajo del grid (compensar falta de separador) */
    #checkoutModal .qr-wrapper {
        padding-top: 15px !important;
    }
}


/* ============================================
   MICROMÉTRICA - V15
   ============================================ */
@media (max-width: 768px) {

    /* 1. Disminuir 4px el texto del botón (de 0.8rem a ~0.55rem o px fijos para precisión) */
    #checkoutModal .checkout-actions .btn {
        font-size: 9px !important;
        /* Ajuste preciso de -4px apróx */
        letter-spacing: 0.5px !important;
    }

    /* 2. Subir el QR 4px */
    #checkoutModal .checkout-content.expanded .qr-glow-frame {
        transform: translateY(1px) !important;
        /* Sube 4px respecto al translateY(5px) anterior */
        margin-top: 16px !important;
        /* Reduce 4px respecto al margin-top: 20px anterior */
    }
}


/* ============================================
   LOGOS EN CARRITO Y MICRO-AJUSTES V16
   ============================================ */
@media (max-width: 768px) {

    /* 1. Logos en el Carrito - Mobile Friendly */
    .cart-item-logo {
        width: 45px !important;
        height: 45px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        padding: 2px !important;
    }

    /* 2. Aumentar 2px texto botón (V14 era 0.8rem, V15 puso 9px, V16 ~11px) */
    #checkoutModal .checkout-actions .btn {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    /* 3. Subir el QR 4px m s (V15 ya lo subi , V16 sube acumulado) */
    #checkoutModal .checkout-content.expanded .qr-glow-frame {
        margin-top: 10px !important;
        transform: translateY(-2px) !important;
    }
}


/* ============================================
   CORRECCIÓN DEFINITIVA LAYOUT CARRITO - V17
   ============================================ */
@media (max-width: 768px) {

    /* Forzar fila en lugar de columna */
    #cartItems .cart-item,
    .modal .cart-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding: 15px 0 !important;
    }

    .cart-item-logo-wrapper {
        flex-shrink: 0 !important;
        width: 65px !important;
        height: 65px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
    }

    .cart-item-logo {
        width: 55px !important;
        height: 55px !important;
        border-radius: 0 !important;
        background: none !important;
    }

    .cart-item-content {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

    .cart-item-info h4 {
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .cart-item-price {
        font-size: 1rem !important;
        color: #fff !important;
    }

    .remove-item {
        margin-top: 5px !important;
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
    }
}


/* ============================================
   LAYOUT CARRITO FINAL - V18
   ============================================ */
@media (max-width: 768px) {
    #cartItems .cart-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 12px 0 !important;
        gap: 12px !important;
    }

    .cart-item-logo-container {
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cart-item-logo {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    .cart-item-info {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    /* Precio en BLANCO */
    .cart-item-price {
        color: #ffffff !important;
        font-size: 0.9rem !important;
        font-weight: 400 !important;
        opacity: 0.9 !important;
    }

    /* REMOVE a la DERECHA */
    .remove-item {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        height: fit-content !important;
    }
}


/* ============================================
   TRUSTPILOT Y BOTÓN CONFIRMAR - V19-V21
   ============================================ */
.reviews-text {
    white-space: nowrap !important;
}

#checkoutModal .checkout-actions .btn {
    font-size: 13px !important;
    /* +2px respecto a V16 (11px) */
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .reviews-text {
        display: inline-block !important;
        white-space: nowrap !important;
    }

    .trustpilot-reviews {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }
}


/* ============================================
   FIX SOLAPAMIENTO COPIAR - V22
   ============================================ */
#checkoutModal .checkout-right-column {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

#checkoutModal .payment-grid {
    position: relative !important;
    z-index: 5 !important;
}

#copyAddress {
    position: relative !important;
    z-index: 20 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    #checkoutModal .address-container {
        margin-top: 20px !important;
        transform: none !important;
        /* Elimina desplazamientos negativos que causan solapamiento */
    }
}

/* ============================================
   NOTIFICATIONS SYSTEM - ROBUST
   ============================================ */
.frank-notification {
    position: fixed !important;
    z-index: 2147483647 !important;
    background: rgba(0, 255, 255, 0.95) !important;
    color: #000 !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.frank-notification.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) !important;
}

/* Desktop Styles */
@media (min-width: 481px) {
    .frank-notification {
        top: 100px !important;
        right: 20px !important;
        transform: translateX(410px) !important;
        padding: 1rem 2rem !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
    }
}

/* Mobile Styles */
@media (max-width: 480px) {
    .frank-notification {
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-100px) !important;
        width: 90% !important;
        max-width: 320px !important;
        padding: 0.8rem 1rem !important;
        border-radius: 12px !important;
        font-size: 0.8rem !important;
        text-align: center !important;
    }

    .frank-notification.visible {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ============================================
   IPHONE 14 PRO (≤414px) - SCALE DOWN
   Everything is the same as the 480px version
   just scaled smaller to fit the narrower screen
/* ============================================
   iPhone 14 Pro Max specific (430px)
   ============================================ */
@media (min-width: 415px) and (max-width: 430px) {

    /* Force center ALL modals */
    .modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .modal .modal-content {
        margin: 0 auto !important;
    }

    #checkoutModal .modal-content,
    #cartModal .modal-content {
        transform: scale(0.88) !important;
        transform-origin: center center !important;
        max-height: 95vh !important;
        overflow: visible !important;
        animation: none !important;
        transition: none !important;
    }

    #customerInfoModal .modal-content,
    .modal#customerInfoModal .modal-content {
        transform: scale(0.78) !important;
        transform-origin: center center !important;
        max-height: none !important;
        min-height: 600px !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        animation: none !important;
        transition: none !important;
    }

    #customerInfoModal .modal-body {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* Summary bar text */
    #checkoutModal .checkout-summary-bar {
        padding: 5px 15px !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item:first-child,
    #checkoutModal .summary-item:first-child {
        text-align: right !important;
        padding-left: 50px !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item:last-child,
    #checkoutModal .summary-item:last-child {
        text-align: left !important;
        padding-right: 50px !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item .label,
    #checkoutModal .summary-item .label {
        font-size: 0.9rem !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item .value,
    #checkoutModal .summary-item .value {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
    }

    /* Payment cards: horizontal carousel */
    #checkoutModal .payment-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
        width: calc(100% - 10px) !important;
        margin: 0 auto !important;
        padding: 8px 40px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
        align-items: center !important;
    }

    #checkoutModal .payment-grid::-webkit-scrollbar {
        display: none !important;
    }

    #checkoutModal .payment-card {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 78px !important;
        min-width: 100px !important;
        min-height: 78px !important;
        max-width: 100px !important;
        max-height: 78px !important;
        padding: 4px !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        grid-column: unset !important;
    }

    #checkoutModal .payment-card img {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
    }

    #checkoutModal .payment-card:nth-child(4),
    #checkoutModal .payment-card:nth-child(5) {
        justify-self: unset !important;
    }

    /* Force BTC/ETH same size as USDT */
    #checkoutModal .payment-card.type-btc,
    #checkoutModal .payment-card.type-eth {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: 78px !important;
        min-width: 100px !important;
        min-height: 78px !important;
        max-width: 100px !important;
        max-height: 78px !important;
        align-self: center !important;
        margin-top: -12px !important;
    }

    /* Prevent parents from clipping the carousel */
    #checkoutModal .checkout-body,
    #checkoutModal .checkout-left-column,
    #checkoutModal .checkout-content {
        overflow: visible !important;
        clip-path: none !important;
    }

    /* Edge cards fully visible */
    #checkoutModal .payment-card:first-child {
        margin-left: 15px !important;
    }

    #checkoutModal .payment-card:last-child {
        margin-right: 25px !important;
    }

    /* Selected card lifts up */
    #checkoutModal .payment-card {
        transition: transform 0.2s ease !important;
    }

    #checkoutModal .payment-card.selected {
        transform: translateY(-5px) scale(1.05) !important;
    }

    /* Card under finger lifts while touching */
    #checkoutModal .payment-card:active {
        transform: translateY(-3px) !important;
    }

    /* Wallet address: show full text */
    #checkoutModal .address-container {
        height: auto !important;
        min-height: 50px !important;
        max-width: none !important;
        width: auto !important;
        margin: 0 30px !important;
    }

    #checkoutModal .address-container code {
        white-space: normal !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        padding: 8px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================
   iPhone 14 Pro specific (393px and below)
   ============================================ */
@media (max-width: 414px) {

    /* Scale down top navbar */
    .navbar {
        padding: 6px 2px !important;
    }

    .navbar .container {
        padding: 0 5px !important;
    }

    .nav-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .brand-text {
        font-size: 1.1rem !important;
    }

    /* Scale down mobile sticky header proportionally */
    .mobile-sticky-header {
        transform: scale(0.88) !important;
        transform-origin: center top !important;
    }

    /* Force center ALL modals */
    .modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .modal .modal-content {
        margin: 0 auto !important;
    }

    #checkoutModal .modal-content,
    #cartModal .modal-content {
        transform: scale(0.82) !important;
        transform-origin: center center !important;
        max-height: 95vh !important;
        overflow: visible !important;
        animation: none !important;
        transition: none !important;
    }

    #customerInfoModal .modal-content,
    .modal#customerInfoModal .modal-content {
        transform: scale(0.72) !important;
        transform-origin: center center !important;
        max-height: none !important;
        min-height: 600px !important;
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        animation: none !important;
        transition: none !important;
    }

    #customerInfoModal .modal-body {
        overflow: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* Summary bar text - pushed inward and bigger */
    #checkoutModal .checkout-summary-bar {
        padding: 5px 15px !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item:first-child,
    #checkoutModal .summary-item:first-child {
        text-align: right !important;
        padding-left: 50px !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item:last-child,
    #checkoutModal .summary-item:last-child {
        text-align: left !important;
        padding-right: 50px !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item .label,
    #checkoutModal .summary-item .label {
        font-size: 0.85rem !important;
    }

    #checkoutModal .checkout-summary-bar .summary-item .value,
    #checkoutModal .summary-item .value {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
    }

    /* Payment cards: horizontal carousel */
    #checkoutModal .payment-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        width: calc(100% - 10px) !important;
        margin: 0 auto !important;
        padding: 8px 50px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
        align-items: center !important;
    }

    #checkoutModal .payment-grid::-webkit-scrollbar {
        display: none !important;
    }

    #checkoutModal .payment-card {
        flex: 0 0 90px !important;
        width: 90px !important;
        height: 70px !important;
        min-width: 90px !important;
        min-height: 70px !important;
        max-width: 90px !important;
        max-height: 70px !important;
        padding: 4px !important;
        margin: 0 !important;
        scroll-snap-align: center !important;
        grid-column: unset !important;
    }

    #checkoutModal .payment-card img {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    #checkoutModal .payment-card:nth-child(4),
    #checkoutModal .payment-card:nth-child(5) {
        justify-self: unset !important;
    }

    /* Force BTC/ETH same size as USDT */
    #checkoutModal .payment-card.type-btc,
    #checkoutModal .payment-card.type-eth {
        flex: 0 0 90px !important;
        width: 90px !important;
        height: 70px !important;
        min-width: 90px !important;
        min-height: 70px !important;
        max-width: 90px !important;
        max-height: 70px !important;
        align-self: center !important;
        margin-top: -15px !important;
    }

    /* Prevent parents from clipping the carousel */
    #checkoutModal .checkout-body,
    #checkoutModal .checkout-left-column,
    #checkoutModal .checkout-content {
        overflow: visible !important;
        clip-path: none !important;
    }

    /* Edge cards fully visible */
    #checkoutModal .payment-card:first-child {
        margin-left: 20px !important;
    }

    #checkoutModal .payment-card:last-child {
        margin-right: 30px !important;
    }

    /* Selected card lifts up */
    #checkoutModal .payment-card {
        transition: transform 0.2s ease !important;
    }

    #checkoutModal .payment-card.selected {
        transform: translateY(-5px) scale(1.05) !important;
    }

    /* Card under finger lifts while touching */
    #checkoutModal .payment-card:active {
        transform: translateY(-3px) !important;
    }

    /* Wallet address: show full text */
    #checkoutModal .address-container {
        height: auto !important;
        min-height: 50px !important;
        max-width: none !important;
        width: auto !important;
        margin: 0 30px !important;
    }

    #checkoutModal .address-container code {
        white-space: normal !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        padding: 8px 10px !important;
        display: flex !important;
        align-items: center !important;
    }
}