* {

    font-family: 'Inter', sans-serif;

}



/* Global Black Background */

body {

    background-color: #000000 !important;

}



/* Ensure all sections have black background - but NOT text gradients */

section:not(.preserve-gradient) {

    background-color: #000000 !important;

}



/* Override section background gradients to black, but preserve text gradients */

section.bg-gradient-to-b,

section.bg-gradient-to-br,

section.bg-gradient-to-r {

    background: #000000 !important;

}



/* Preserve text gradient colors - DO NOT override these */

.bg-clip-text,

.text-transparent {

    background: inherit !important;

    -webkit-background-clip: text !important;

    background-clip: text !important;

}



:root {

    --primary-green: #10B981;

    --dark-green: #059669;

    --neon-green: #34D399;

    --dark-bg: #000000;

    --darker-bg: #000000;

}



/* Perspective for 3D effects */

.perspective-1000 {

    perspective: 1000px;

}



/* Slow bounce animation */

@keyframes bounce-slow {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px);

    }

}



.animate-bounce-slow {

    animation: bounce-slow 3s ease-in-out infinite;

}



/* Tilt animation */

@keyframes tilt {



    0%,

    100% {

        transform: rotate(0deg);

    }



    25% {

        transform: rotate(2deg);

    }



    75% {

        transform: rotate(-2deg);

    }

}



.animate-tilt {

    animation: tilt 4s ease-in-out infinite;

}



body {

    overflow-x: hidden;

}



/* Hero Background Gradient */

.hero-gradient {

    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);

    position: relative;

    overflow: hidden;

}



.hero-gradient::before {

    content: '';

    position: absolute;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);

    top: -100px;

    right: -100px;

    animation: pulse 4s ease-in-out infinite;

}



.hero-gradient::after {

    content: '';

    position: absolute;

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, transparent 70%);

    bottom: -100px;

    left: -100px;

    animation: pulse 5s ease-in-out infinite;

}



@keyframes pulse {



    0%,

    100% {

        transform: scale(1);

        opacity: 0.5;

    }



    50% {

        transform: scale(1.1);

        opacity: 0.8;

    }

}



/* Animated Button */

.btn-primary {

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);

}



.btn-primary::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

    transition: left 0.6s ease;

}



.btn-primary:hover::before {

    left: 100%;

}



.btn-primary:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);

}



.btn-primary:active {

    transform: translateY(-1px) scale(0.98);

}



.btn-secondary {

    border: 2px solid var(--primary-green);

    color: var(--primary-green);

    background: transparent;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.btn-secondary::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: var(--primary-green);

    transform: translate(-50%, -50%);

    transition: width 0.6s ease, height 0.6s ease;

    z-index: -1;

}



.btn-secondary:hover::before {

    width: 300%;

    height: 300%;

}



.btn-secondary:hover {

    color: white;

    transform: translateY(-3px) scale(1.02);

    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);

}



/* Feature Cards */

.feature-card {

    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

    border: 1px solid rgba(16, 185, 129, 0.2);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.feature-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);

    opacity: 0;

    transition: opacity 0.4s ease;

}



.feature-card:hover::before {

    opacity: 1;

}



.feature-card:hover {

    transform: translateY(-15px) scale(1.02);

    border-color: var(--primary-green);

    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25);

}



.feature-icon {

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--neon-green) 100%);

    transition: all 0.3s ease;

}



.feature-card:hover .feature-icon {

    transform: scale(1.1) rotate(5deg);

}



/* Pricing Cards */

.pricing-card {

    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

    border: 2px solid rgba(16, 185, 129, 0.2);

    transition: all 0.3s ease;

}



.pricing-card:hover {

    transform: scale(1.05);

    border-color: var(--primary-green);

    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.3);

}



.pricing-card.popular {

    border-color: var(--primary-green);

    position: relative;

}



.pricing-card.popular::before {

    content: 'MAIS POPULAR';

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);

    color: white;

    padding: 5px 20px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

}



/* Counter Animation */

.counter {

    font-size: 3rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--primary-green) 0%, var(--neon-green) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-family: 'Space Grotesk', 'Inter', sans-serif;

}



/* FAQ Accordion */

.faq-item {

    border-bottom: 1px solid rgba(16, 185, 129, 0.2);

    transition: all 0.3s ease;

}



.faq-question {

    cursor: pointer;

    transition: all 0.3s ease;

}



.faq-question:hover {

    color: var(--primary-green);

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

}



.faq-answer.active {

    max-height: 500px;

}



/* Testimonial Cards */

.testimonial-card {

    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

    border: 1px solid rgba(16, 185, 129, 0.2);

}



/* Floating Animation */

@keyframes float {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-20px);

    }

}



.float-animation {

    animation: float 3s ease-in-out infinite;

}



/* Scroll Progress Bar */

.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-green) 0%, var(--neon-green) 100%);

    z-index: 9999;

    transition: width 0.1s ease;

}



/* Comparison Table */

.comparison-table {

    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

    border: 1px solid rgba(16, 185, 129, 0.2);

}



.check-icon {

    color: var(--primary-green);

}



.cross-icon {

    color: #EF4444;

}



/* Mobile Menu */

@media (max-width: 768px) {

    .counter {

        font-size: 2rem;

    }

}



/* Accessibility: Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }



    .animate-bounce,

    .animate-bounce-slow,

    .animate-pulse,

    .animate-gradient,

    .animate-tilt,

    .float-animation {

        animation: none !important;

    }



    .btn-primary:hover,

    .btn-secondary:hover,

    .feature-card:hover,

    .pricing-card:hover {

        transform: none !important;

    }

}



/* Focus Visible for Keyboard Navigation */

:focus-visible {

    outline: 2px solid var(--primary-green);

    outline-offset: 2px;

}



/* Skip Link for Accessibility */

.skip-link {

    position: absolute;

    top: -40px;

    left: 0;

    background: var(--primary-green);

    color: white;

    padding: 8px 16px;

    z-index: 10000;

    text-decoration: none;

    font-weight: bold;

}



.skip-link:focus {

    top: 0;

}



/* -------------------------------------------------------------------------- */

/* HERO REDESIGN 2026 - AURORA & FLOATING UI                                  */

/* -------------------------------------------------------------------------- */



/* Aurora Background */

.aurora-container {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}



.aurora-blob {

    position: absolute;

    filter: blur(60px); /* Otimizado: era 80px */

    opacity: 0.3; /* Otimizado: era 0.4 */

    border-radius: 50%;

    animation: aurora-float 12s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); /* Otimizado: era 10s */

    will-change: transform; /* GPU acceleration */

    transform: translateZ(0); /* Force GPU layer */

}



.blob-1 {

    top: -10%;

    left: -10%;

    width: 600px;

    height: 600px;

    background: var(--primary-green);

    animation-delay: 0s;

}



.blob-2 {

    bottom: -10%;

    right: -10%;

    width: 500px;

    height: 500px;

    background-color: #3b82f6;

    /* Blue-500 */

    animation-delay: -5s;

}



.blob-3 {

    top: 40%;

    left: 40%;

    width: 400px;

    height: 400px;

    background: var(--neon-green);

    opacity: 0.2;

    animation-delay: -2s;

}



@keyframes aurora-float {

    0% {

        transform: translate(0, 0) scale(1);

    }



    100% {

        transform: translate(30px, 50px) scale(1.1);

    }

}



/* Glassmorphism Cards */

.glass-panel {

    background: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

}



.glass-card {

    background: rgba(15, 23, 42, 0.6);

    /* Darker glass for contrast */

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.glass-card:hover {

    border-color: rgba(16, 185, 129, 0.3);

    box-shadow: 0 25px 50px rgba(16, 185, 129, 0.15);

}



/* Floating Animation (Up/Down) */

@keyframes float-y {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-15px);

    }

}



.animate-float-slow {

    animation: float-y 6s ease-in-out infinite;

}



.animate-float-medium {

    animation: float-y 4s ease-in-out infinite;

}



.animate-float-fast {

    animation: float-y 3s ease-in-out infinite;

}



/* Parallax Layer Helper */

.parallax-layer {

    transition: transform 0.1s cubic-bezier(0.2, 0, 0.2, 1);

    /* Smooth but responsive */

    will-change: transform;

}

/* From hero.php - Moved during Audit */

@keyframes gradient {

    0%,

    100% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

}



.animate-gradient {

    animation: gradient 4s ease infinite; /* Otimizado: era 3s */

    will-change: background-position; /* GPU acceleration */

    transform: translateZ(0); /* Force GPU layer */

}



/* 3D Carousel Styles */

.carousel-3d-container {

    perspective: 1200px;

    overflow: visible;

}



.carousel-3d-wrapper {

    transform-style: preserve-3d;

    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.carousel-3d-slide {

    position: absolute;

    width: 85%;

    left: 7.5%;

    top: 0;

    backface-visibility: hidden;

    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.carousel-3d-slide img {

    max-height: 350px;

    object-fit: cover;

}



.carousel-dot.active {

    background-color: #10B981;

    transform: scale(1.3);

}



/* -------------------------------------------------------------------------- */

/* CHANNEL LOGOS - Hero Section                                               */

/* -------------------------------------------------------------------------- */



/* Channel Logo Items */

.channel-logo-item {

    transition: transform 0.3s ease, filter 0.3s ease;

    cursor: pointer;

    will-change: transform; /* GPU acceleration */

    transform: translateZ(0); /* Force GPU layer */

}



.channel-logo-item:hover {

    transform: scale(1.15) translateY(-5px);

}



.channel-logo-item:hover img {

    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.6));

}



/* Responsive adjustments for channel logos */

@media (max-width: 640px) {

    .channel-logo-item img {

        width: 48px !important;

        height: 48px !important;

    }

}



/* -------------------------------------------------------------------------- */

/* HEADER CTA BUTTON - Expandable on Hover                                    */

/* -------------------------------------------------------------------------- */



/* Botão Começar Grátis - Apenas ícone que expande */

.group:hover .max-w-0 {

    max-width: 200px;

}



/* Smooth transition para o texto */

.max-w-0 {

    transition: max-width 0.3s ease-in-out;

}



/* Garantir que o ícone não encolha */

.flex-shrink-0 {

    flex-shrink: 0;

}





/* ============================================

   TEXT GRADIENT FIX - Preserve colored text

   ============================================ */



/* Ensure text gradients are NOT overridden by black background rules */

.text-transparent.bg-clip-text {

    background: linear-gradient(to right, var(--primary-green), var(--neon-green)) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



/* Specific gradient combinations */

.bg-gradient-to-r.from-primary.to-neon,

.bg-gradient-to-r.from-primary.via-neon.to-primary {

    background: linear-gradient(to right, #10B981, #34D399) !important;

}



/* Animated gradient text */

.text-transparent.bg-clip-text.bg-gradient-to-r.animate-gradient {

    background: linear-gradient(to right, #10B981, #34D399, #10B981) !important;

    background-size: 200% auto !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



/* Counter gradients */

.counter {

    background: linear-gradient(135deg, #10B981 0%, #34D399 100%) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



/* Ensure gradient text in headings works */

h1 .text-transparent,

h2 .text-transparent,

h3 .text-transparent,

h4 .text-transparent,

h5 .text-transparent,

h6 .text-transparent {

    background: linear-gradient(to right, #10B981, #34D399) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}



/* Specific for "em um só lugar" text */

span.text-transparent.bg-clip-text.bg-gradient-to-r {

    background: linear-gradient(to right, #10B981, #34D399) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    background-clip: text !important;

}