.elementor-kit-39{--e-global-color-primary:#F0555F;--e-global-color-secondary:#299656;--e-global-color-text:#53422A;--e-global-color-accent:#FEC33C;--e-global-color-25b493e:#2A5A59;--e-global-color-b0a5f9a:#F37B3E;--e-global-color-7e6a25d:#FFFFFF;--e-global-color-63f36c5:#02010100;--e-global-color-ee76708:#C9C1C1;--e-global-color-7d307bb:#253A4D;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:2px;--e-global-typography-a6f85b6-font-family:"Radley";--e-global-typography-a6f85b6-font-size:1.5em;--e-global-typography-a6f85b6-font-weight:500;--e-global-typography-a6f85b6-font-style:italic;--e-global-typography-a6f85b6-line-height:1em;--e-global-typography-c5d4f09-font-family:"Playfair Display";--e-global-typography-c5d4f09-font-size:48px;--e-global-typography-c5d4f09-font-weight:700;--e-global-typography-c5d4f09-line-height:1.2em;--e-global-typography-ba5b015-font-family:"Playfair Display";--e-global-typography-ba5b015-font-size:36px;--e-global-typography-ba5b015-font-weight:700;--e-global-typography-ba5b015-line-height:1.2em;--e-global-typography-8c2b331-font-family:"Playfair Display";--e-global-typography-8c2b331-font-size:24px;--e-global-typography-8c2b331-font-weight:700;--e-global-typography-8c2b331-line-height:1.2em;--e-global-typography-7110a2b-font-family:"Playfair Display";--e-global-typography-7110a2b-font-size:20px;--e-global-typography-7110a2b-font-weight:600;--e-global-typography-7110a2b-line-height:1.2em;--e-global-typography-734265e-font-family:"Playfair Display";--e-global-typography-734265e-font-size:16px;--e-global-typography-734265e-font-weight:600;--e-global-typography-734265e-line-height:1.2em;--e-global-typography-ec51179-font-family:"Playfair Display";--e-global-typography-ec51179-font-size:16px;--e-global-typography-ec51179-font-weight:400;--e-global-typography-ec51179-line-height:1.2em;--e-global-typography-6185b3a-font-family:"Radley";--e-global-typography-6185b3a-font-size:1.3em;--e-global-typography-6185b3a-font-weight:400;--e-global-typography-6185b3a-font-style:italic;--e-global-typography-6185b3a-line-height:1.5em;--e-global-typography-58cfe92-font-family:"Karla";--e-global-typography-58cfe92-font-size:2rem;--e-global-typography-58cfe92-font-weight:600;--e-global-typography-58cfe92-line-height:1em;--e-global-typography-2a77e40-font-family:"Karla";--e-global-typography-2a77e40-font-size:10rem;--e-global-typography-2a77e40-font-weight:700;--e-global-typography-2a77e40-line-height:1.2em;background-color:#00000000;color:#53422A;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-39 button,.elementor-kit-39 input[type="button"],.elementor-kit-39 input[type="submit"],.elementor-kit-39 .elementor-button{background-color:#FF555FE6;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:#FFFFFF;border-style:none;border-radius:20px 0px 20px 20px;padding:20px 20px 20px 20px;}.elementor-kit-39 button:hover,.elementor-kit-39 button:focus,.elementor-kit-39 input[type="button"]:hover,.elementor-kit-39 input[type="button"]:focus,.elementor-kit-39 input[type="submit"]:hover,.elementor-kit-39 input[type="submit"]:focus,.elementor-kit-39 .elementor-button:hover,.elementor-kit-39 .elementor-button:focus{background-color:var( --e-global-color-63f36c5 );color:var( --e-global-color-accent );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-b0a5f9a );border-radius:20px 0px 20px 20px;}.elementor-kit-39 e-page-transition{background-color:#FFBC7D;}.elementor-kit-39 a{color:#F0555F;}.elementor-kit-39 a:hover{color:var( --e-global-color-b0a5f9a );}.elementor-kit-39 h1{color:#FFFFFF;font-family:var( --e-global-typography-c5d4f09-font-family ), Sans-serif;font-size:var( --e-global-typography-c5d4f09-font-size );font-weight:var( --e-global-typography-c5d4f09-font-weight );line-height:var( --e-global-typography-c5d4f09-line-height );}.elementor-kit-39 h2{color:#2A5A59;font-family:var( --e-global-typography-ba5b015-font-family ), Sans-serif;font-size:var( --e-global-typography-ba5b015-font-size );font-weight:var( --e-global-typography-ba5b015-font-weight );line-height:var( --e-global-typography-ba5b015-line-height );word-spacing:var( --e-global-typography-ba5b015-word-spacing );}.elementor-kit-39 h3{color:#2A5A59;font-family:var( --e-global-typography-8c2b331-font-family ), Sans-serif;font-size:var( --e-global-typography-8c2b331-font-size );font-weight:var( --e-global-typography-8c2b331-font-weight );line-height:var( --e-global-typography-8c2b331-line-height );}.elementor-kit-39 h4{color:#2A5A59;font-family:var( --e-global-typography-7110a2b-font-family ), Sans-serif;font-size:var( --e-global-typography-7110a2b-font-size );font-weight:var( --e-global-typography-7110a2b-font-weight );line-height:var( --e-global-typography-7110a2b-line-height );}.elementor-kit-39 h5{color:var( --e-global-color-primary );font-family:var( --e-global-typography-734265e-font-family ), Sans-serif;font-size:var( --e-global-typography-734265e-font-size );font-weight:var( --e-global-typography-734265e-font-weight );line-height:var( --e-global-typography-734265e-line-height );}.elementor-kit-39 h6{color:var( --e-global-color-b0a5f9a );font-family:var( --e-global-typography-ec51179-font-family ), Sans-serif;font-size:var( --e-global-typography-ec51179-font-size );font-weight:var( --e-global-typography-ec51179-font-weight );line-height:var( --e-global-typography-ec51179-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1040px;}.e-con{--container-max-width:1040px;--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-39{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-39 h1{font-size:var( --e-global-typography-c5d4f09-font-size );line-height:var( --e-global-typography-c5d4f09-line-height );}.elementor-kit-39 h2{font-size:var( --e-global-typography-ba5b015-font-size );line-height:var( --e-global-typography-ba5b015-line-height );word-spacing:var( --e-global-typography-ba5b015-word-spacing );}.elementor-kit-39 h3{font-size:var( --e-global-typography-8c2b331-font-size );line-height:var( --e-global-typography-8c2b331-line-height );}.elementor-kit-39 h4{font-size:var( --e-global-typography-7110a2b-font-size );line-height:var( --e-global-typography-7110a2b-line-height );}.elementor-kit-39 h5{font-size:var( --e-global-typography-734265e-font-size );line-height:var( --e-global-typography-734265e-line-height );}.elementor-kit-39 h6{font-size:var( --e-global-typography-ec51179-font-size );line-height:var( --e-global-typography-ec51179-line-height );}.elementor-kit-39 button,.elementor-kit-39 input[type="button"],.elementor-kit-39 input[type="submit"],.elementor-kit-39 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:1024px){.elementor-kit-39{--e-global-typography-text-font-size:1.1rem;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:0.8rem;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:2px;--e-global-typography-a6f85b6-font-size:1.4rem;--e-global-typography-a6f85b6-line-height:1em;--e-global-typography-c5d4f09-font-size:3.5rem;--e-global-typography-c5d4f09-line-height:1.2em;--e-global-typography-ba5b015-font-size:3.5rem;--e-global-typography-ba5b015-line-height:1.2em;--e-global-typography-8c2b331-font-size:2.7rem;--e-global-typography-8c2b331-line-height:1.2em;--e-global-typography-7110a2b-font-size:1.4rem;--e-global-typography-7110a2b-line-height:1.2em;--e-global-typography-734265e-font-size:1.2rem;--e-global-typography-734265e-line-height:1.2em;--e-global-typography-ec51179-font-size:1.1rem;--e-global-typography-ec51179-line-height:1.2em;--e-global-typography-6185b3a-font-size:1.3rem;--e-global-typography-6185b3a-line-height:1.5em;--e-global-typography-58cfe92-font-size:1.8rem;--e-global-typography-58cfe92-line-height:1em;--e-global-typography-2a77e40-font-size:8.5rem;--e-global-typography-2a77e40-line-height:1.2em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-39 h1{font-size:var( --e-global-typography-c5d4f09-font-size );line-height:var( --e-global-typography-c5d4f09-line-height );}.elementor-kit-39 h2{font-size:var( --e-global-typography-ba5b015-font-size );line-height:var( --e-global-typography-ba5b015-line-height );word-spacing:var( --e-global-typography-ba5b015-word-spacing );}.elementor-kit-39 h3{font-size:var( --e-global-typography-8c2b331-font-size );line-height:var( --e-global-typography-8c2b331-line-height );}.elementor-kit-39 h4{font-size:var( --e-global-typography-7110a2b-font-size );line-height:var( --e-global-typography-7110a2b-line-height );}.elementor-kit-39 h5{font-size:var( --e-global-typography-734265e-font-size );line-height:var( --e-global-typography-734265e-line-height );}.elementor-kit-39 h6{font-size:var( --e-global-typography-ec51179-font-size );line-height:var( --e-global-typography-ec51179-line-height );}.elementor-kit-39 button,.elementor-kit-39 input[type="button"],.elementor-kit-39 input[type="submit"],.elementor-kit-39 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-39{--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-size:0.8rem;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:2px;--e-global-typography-a6f85b6-font-size:1.3rem;--e-global-typography-a6f85b6-line-height:1em;--e-global-typography-c5d4f09-font-size:2.7rem;--e-global-typography-c5d4f09-line-height:1.2em;--e-global-typography-ba5b015-font-size:2.5rem;--e-global-typography-ba5b015-line-height:1.2em;--e-global-typography-8c2b331-font-size:2.1rem;--e-global-typography-8c2b331-line-height:1.2em;--e-global-typography-7110a2b-font-size:1.3rem;--e-global-typography-7110a2b-line-height:1.2em;--e-global-typography-734265e-font-size:1.1rem;--e-global-typography-734265e-line-height:1.2em;--e-global-typography-ec51179-font-size:1rem;--e-global-typography-ec51179-line-height:1.2em;--e-global-typography-6185b3a-font-size:1.2rem;--e-global-typography-6185b3a-line-height:1.5em;--e-global-typography-58cfe92-font-size:1.5rem;--e-global-typography-58cfe92-line-height:1em;--e-global-typography-2a77e40-font-size:7rem;--e-global-typography-2a77e40-line-height:1.2em;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-39 h1{font-size:var( --e-global-typography-c5d4f09-font-size );line-height:var( --e-global-typography-c5d4f09-line-height );}.elementor-kit-39 h2{font-size:var( --e-global-typography-ba5b015-font-size );line-height:var( --e-global-typography-ba5b015-line-height );word-spacing:var( --e-global-typography-ba5b015-word-spacing );}.elementor-kit-39 h3{font-size:var( --e-global-typography-8c2b331-font-size );line-height:var( --e-global-typography-8c2b331-line-height );}.elementor-kit-39 h4{font-size:var( --e-global-typography-7110a2b-font-size );line-height:var( --e-global-typography-7110a2b-line-height );}.elementor-kit-39 h5{font-size:var( --e-global-typography-734265e-font-size );line-height:var( --e-global-typography-734265e-line-height );}.elementor-kit-39 h6{font-size:var( --e-global-typography-ec51179-font-size );line-height:var( --e-global-typography-ec51179-line-height );}.elementor-kit-39 button,.elementor-kit-39 input[type="button"],.elementor-kit-39 input[type="submit"],.elementor-kit-39 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marcoxondaro | Terapias Holísticas Futuristas | Transformação Mente-Corpo-Espírito</title>
    <meta name="description" content="Terapias holísticas avançadas com Marcoxondaro. Fusão de tecnologia quântica e sabedoria ancestral através da Falaterapia, Bioenergia Magnética, Xamanismo Assistido e Reiki Quântico.">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Exo+2:wght@300;400;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#f0555f',
                        secondary: '#299656',
                        accent: '#fec33c',
                        earth: '#53422a',
                        earthDark: '#2a5a59',
                        detail: '#f47c3e',
                    },
                    fontFamily: {
                        heading: ['Orbitron', 'sans-serif'],
                        body: ['Exo 2', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1)',
                        'float': 'float 6s ease-in-out infinite',
                        'neon': 'neon 1.5s ease-in-out infinite alternate',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        neon: {
                            'from': {
                                'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0555f, 0 0 20px #f0555f',
                            },
                            'to': {
                                'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0555f, 0 0 40px #f0555f',
                            }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, rgba(42,90,89,0.95) 0%, rgba(83,66,42,0.95) 100%);
        }
        .therapy-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        .therapy-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border-color: rgba(254, 195, 60, 0.5);
        }
        .glow-box {
            box-shadow: 0 0 20px rgba(240, 85, 95, 0.3);
        }
        .holographic-effect {
            position: relative;
            overflow: hidden;
        }
        .holographic-effect::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.1) 50%,
                rgba(255,255,255,0) 100%
            );
            transform: rotate(30deg);
            animation: shine 6s infinite;
        }
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(30deg); }
            20% { transform: translateX(100%) rotate(30deg); }
            100% { transform: translateX(100%) rotate(30deg); }
        }
        .cyber-border {
            position: relative;
        }
        .cyber-border::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #f0555f, #fec33c, #299656, #f47c3e);
            background-size: 300% 300%;
            animation: gradient 4s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body class="font-body text-gray-200 bg-gray-900 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-fixed">
    <!-- Particle Background -->
    <div id="particles-js" class="fixed inset-0 z-0"></div>
    
    <!-- Header/Navigation -->
    <header class="bg-gray-900 bg-opacity-80 backdrop-blur-md shadow-lg sticky top-0 z-50 cyber-border">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center mr-3 glow-box">
                    <span class="text-gray-900 font-bold text-xl">MX</span>
                </div>
                <h1 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Marcoxondaro</h1>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#services" class="text-white hover:text-accent transition-all hover:neon">Serviços</a>
                <a href="#about" class="text-white hover:text-accent transition-all hover:neon">Sobre</a>
                <a href="#benefits" class="text-white hover:text-accent transition-all hover:neon">Benefícios</a>
                <a href="#testimonials" class="text-white hover:text-accent transition-all hover:neon">Depoimentos</a>
                <a href="#contact" class="text-white hover:text-accent transition-all hover:neon">Contato</a>
            </nav>
            <a href="#contact" class="bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-6 py-2 rounded-full font-medium transition-all shadow-lg glow-box hover:scale-105">
                Agendar Sessão
            </a>
            <button class="md:hidden text-white text-2xl hover:text-accent" id="mobile-menu-button">
                <i class="fas fa-bars"></i>
            </button>
        </div>
        <!-- Mobile Menu -->
        <div class="md:hidden hidden bg-gray-800 bg-opacity-90 w-full py-4 px-4 shadow-md" id="mobile-menu">
            <a href="#services" class="block py-2 hover:text-accent">Serviços</a>
            <a href="#about" class="block py-2 hover:text-accent">Sobre</a>
            <a href="#benefits" class="block py-2 hover:text-accent">Benefícios</a>
            <a href="#testimonials" class="block py-2 hover:text-accent">Depoimentos</a>
            <a href="#contact" class="block py-2 hover:text-accent">Contato</a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="relative hero-gradient text-white py-20 md:py-32 overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary filter blur-3xl opacity-30"></div>
            <div class="absolute bottom-1/3 right-1/3 w-64 h-64 rounded-full bg-accent filter blur-3xl opacity-30"></div>
            <div class="absolute top-1/3 right-1/4 w-64 h-64 rounded-full bg-secondary filter blur-3xl opacity-30"></div>
        </div>
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center relative z-10">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold leading-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-accent via-primary to-secondary">
                    <span class="neon">Revolução Quântica</span> na Terapia Holística
                </h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90 max-w-2xl">
                    Fusão de tecnologia energética futurista com sabedoria ancestral para transformação radical da sua mente, corpo e espírito.
                </p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="#contact" class="bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-xl glow-box hover:scale-105 flex items-center justify-center">
                        <i class="fas fa-calendar-check mr-2"></i> Agendar Consulta Quântica
                    </a>
                    <a href="#services" class="bg-transparent border-2 border-accent hover:bg-accent hover:bg-opacity-20 text-accent hover:text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-lg hover:scale-105 flex items-center justify-center">
                        <i class="fas fa-atom mr-2"></i> Explorar Terapias
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center relative">
                <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 rounded-full overflow-hidden border-4 border-accent shadow-2xl glow-box float">
                    <img src="https://images.unsplash.com/photo-1573497491208-6b1acb260507?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                         alt="Marcoxondaro - Terapeuta Holístico Futurista" 
                         class="w-full h-full object-cover">
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-primary to-earthDark bg-opacity-80 py-3 text-center">
                        <p class="text-white font-medium text-lg">Marcoxondaro</p>
                        <p class="text-accent text-sm font-bold">Terapeuta Quântico Holístico</p>
                    </div>
                </div>
                <div class="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-primary opacity-20 filter blur-xl"></div>
                <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-accent opacity-20 filter blur-xl"></div>
            </div>
        </div>
    </section>

    <!-- Trust Indicators -->
    <div class="bg-gray-800 bg-opacity-70 backdrop-blur-md py-8 shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
                <div class="flex items-center">
                    <div class="text-accent text-4xl mr-3">
                        <i class="fas fa-star"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-white">4.9/5</p>
                        <p class="text-sm text-gray-300">Avaliações Quânticas</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="text-accent text-4xl mr-3">
                        <i class="fas fa-atom"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-white">15+</p>
                        <p class="text-sm text-gray-300">Anos de Experiência</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="text-accent text-4xl mr-3">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-white">1200+</p>
                        <p class="text-sm text-gray-300">Clientes Transformados</p>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="text-accent text-4xl mr-3">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-white">94%</p>
                        <p class="text-sm text-gray-300">Eficácia Comprovada</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- About Section -->
    <section id="about" class="py-20 relative overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2340&auto=format&fit=crop')] bg-cover"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-900/90 to-gray-900"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
                    <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-6">
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Marcoxondaro</span>: <span class="text-primary">Pioneiro na Fusão Quântico-Espiritual</span>
                    </h2>
                    <p class="text-lg mb-6 text-gray-300">
                        Com uma abordagem revolucionária que combina física quântica, neurociência e sabedoria ancestral, Marcoxondaro desenvolveu protocolos terapêuticos únicos que aceleram a transformação pessoal.
                    </p>
                    <p class="mb-6 text-gray-300">
                        Sua metodologia <span class="font-semibold text-accent">"4 Dimensões da Cura"</span> integra:
                    </p>
                    <div class="grid grid-cols-2 gap-4 mb-8">
                        <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border-l-4 border-primary">
                            <h3 class="font-bold text-white mb-2">Tecnologia Bioenergética</h3>
                            <p class="text-sm text-gray-300">Utilização de campos magnéticos otimizados</p>
                        </div>
                        <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border-l-4 border-secondary">
                            <h3 class="font-bold text-white mb-2">Programação Quântica</h3>
                            <p class="text-sm text-gray-300">Reprogramação celular e neural avançada</p>
                        </div>
                        <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border-l-4 border-accent">
                            <h3 class="font-bold text-white mb-2">Xamanismo Digital</h3>
                            <p class="text-sm text-gray-300">Técnicas ancestrais em ambientes virtuais</p>
                        </div>
                        <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg border-l-4 border-detail">
                            <h3 class="font-bold text-white mb-2">Reiki 5.0</h3>
                            <p class="text-sm text-gray-300">Canais energéticos amplificados</p>
                        </div>
                    </div>
                    <div class="flex space-x-4">
                        <a href="#contact" class="bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-6 py-3 rounded-full font-medium transition-all shadow-lg glow-box hover:scale-105">
                            Agendar Diagnóstico
                        </a>
                        <a href="#services" class="bg-transparent border-2 border-accent hover:bg-accent hover:bg-opacity-20 text-accent hover:text-white px-6 py-3 rounded-full font-medium transition-all hover:scale-105">
                            Ver Protocolos
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <div class="bg-gray-800 bg-opacity-50 rounded-xl p-1 glow-box">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="therapy-card bg-gray-800 bg-opacity-70 p-6 rounded-lg flex flex-col items-center">
                                <div class="text-primary text-5xl mb-4">
                                    <i class="fas fa-brain"></i>
                                </div>
                                <h3 class="font-bold text-white mb-3 text-center">Falaterapia 3.0</h3>
                                <p class="text-sm text-gray-300 text-center">Reprogramação neural através da voz</p>
                                <div class="mt-4 w-full h-1 bg-gradient-to-r from-primary to-transparent"></div>
                            </div>
                            <div class="therapy-card bg-gray-800 bg-opacity-70 p-6 rounded-lg flex flex-col items-center">
                                <div class="text-secondary text-5xl mb-4">
                                    <i class="fas fa-magnet"></i>
                                </div>
                                <h3 class="font-bold text-white mb-3 text-center">Bioenergia 4D</h3>
                                <p class="text-sm text-gray-300 text-center">Campos magnéticos personalizados</p>
                                <div class="mt-4 w-full h-1 bg-gradient-to-r from-secondary to-transparent"></div>
                            </div>
                            <div class="therapy-card bg-gray-800 bg-opacity-70 p-6 rounded-lg flex flex-col items-center">
                                <div class="text-accent text-5xl mb-4">
                                    <i class="fas fa-mountain"></i>
                                </div>
                                <h3 class="font-bold text-white mb-3 text-center">Xamanismo VR</h3>
                                <p class="text-sm text-gray-300 text-center">Jornadas em realidade aumentada</p>
                                <div class="mt-4 w-full h-1 bg-gradient-to-r from-accent to-transparent"></div>
                            </div>
                            <div class="therapy-card bg-gray-800 bg-opacity-70 p-6 rounded-lg flex flex-col items-center">
                                <div class="text-detail text-5xl mb-4">
                                    <i class="fas fa-hands"></i>
                                </div>
                                <h3 class="font-bold text-white mb-3 text-center">Reiki Quântico</h3>
                                <p class="text-sm text-gray-300 text-center">Canais energéticos amplificados</p>
                                <div class="mt-4 w-full h-1 bg-gradient-to-r from-detail to-transparent"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-20 relative overflow-hidden">
        <div class="absolute inset-0 z-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-10"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    Protocolos <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Quântico-Terapêuticos</span>
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Tecnologia de ponta combinada com sabedoria milenar para resultados transformadores em tempo recorde.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Therapy 1 -->
                <div class="therapy-card rounded-xl overflow-hidden transition-all duration-300 h-full">
                    <div class="h-48 bg-gradient-to-br from-primary to-earthDark flex items-center justify-center relative overflow-hidden">
                        <i class="fas fa-comments text-white text-7xl opacity-20 absolute -right-5 -bottom-5"></i>
                        <i class="fas fa-brain text-white text-6xl z-10"></i>
                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-accent to-primary"></div>
                    </div>
                    <div class="p-6 bg-gray-800 bg-opacity-70 h-full flex flex-col">
                        <h3 class="text-xl font-bold text-white mb-3">Falaterapia Neural</h3>
                        <p class="text-gray-300 mb-4 flex-grow">
                            Técnica exclusiva que utiliza frequências vocais para reprogramação direta do córtex pré-frontal, eliminando bloqueios de comunicação em nível quântico.
                        </p>
                        <ul class="space-y-2 mb-6">
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Reprogramação de padrões linguísticos</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Ativação de neurônios espelho</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Sincronização hemisférica</span>
                            </li>
                        </ul>
                        <div class="text-center mt-auto">
                            <span class="text-primary font-bold text-lg">R$ 350/sessão</span>
                            <a href="#contact" class="block mt-3 bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-4 py-2 rounded-full text-sm font-medium transition-all glow-box hover:scale-105">
                                Agendar Experiência
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Therapy 2 -->
                <div class="therapy-card rounded-xl overflow-hidden transition-all duration-300 h-full">
                    <div class="h-48 bg-gradient-to-br from-earth to-earthDark flex items-center justify-center relative overflow-hidden">
                        <i class="fas fa-atom text-white text-7xl opacity-20 absolute -right-5 -bottom-5"></i>
                        <i class="fas fa-magnet text-white text-6xl z-10"></i>
                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary to-accent"></div>
                    </div>
                    <div class="p-6 bg-gray-800 bg-opacity-70 h-full flex flex-col">
                        <h3 class="text-xl font-bold text-white mb-3">Bioenergia 4D</h3>
                        <p class="text-gray-300 mb-4 flex-grow">
                            Campos magnéticos personalizados que reorganizam sua matriz energética em nível subatômico, com resultados mensuráveis em tempo real.
                        </p>
                        <ul class="space-y-2 mb-6">
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Reequilíbrio do campo áurico</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Reparo de DNA energético</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Ativação de corpos sutis</span>
                            </li>
                        </ul>
                        <div class="text-center mt-auto">
                            <span class="text-secondary font-bold text-lg">R$ 400/sessão</span>
                            <a href="#contact" class="block mt-3 bg-gradient-to-r from-secondary to-primary hover:from-secondary hover:to-accent text-white px-4 py-2 rounded-full text-sm font-medium transition-all glow-box hover:scale-105">
                                Agendar Experiência
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Therapy 3 -->
                <div class="therapy-card rounded-xl overflow-hidden transition-all duration-300 h-full">
                    <div class="h-48 bg-gradient-to-br from-detail to-primary flex items-center justify-center relative overflow-hidden">
                        <i class="fas fa-vr-cardboard text-white text-7xl opacity-20 absolute -right-5 -bottom-5"></i>
                        <i class="fas fa-mountain text-white text-6xl z-10"></i>
                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-detail to-secondary"></div>
                    </div>
                    <div class="p-6 bg-gray-800 bg-opacity-70 h-full flex flex-col">
                        <h3 class="text-xl font-bold text-white mb-3">Xamanismo VR</h3>
                        <p class="text-gray-300 mb-4 flex-grow">
                            Jornadas xamânicas em realidade virtual com indução de estados alterados de consciência para cura profunda e conexão espiritual amplificada.
                        </p>
                        <ul class="space-y-2 mb-6">
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Viagens astrais guiadas</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Encontro com arquétipos</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Cura de vidas passadas</span>
                            </li>
                        </ul>
                        <div class="text-center mt-auto">
                            <span class="text-detail font-bold text-lg">R$ 450/sessão</span>
                            <a href="#contact" class="block mt-3 bg-gradient-to-r from-detail to-accent hover:from-detail hover:to-primary text-white px-4 py-2 rounded-full text-sm font-medium transition-all glow-box hover:scale-105">
                                Agendar Experiência
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Therapy 4 -->
                <div class="therapy-card rounded-xl overflow-hidden transition-all duration-300 h-full">
                    <div class="h-48 bg-gradient-to-br from-secondary to-accent flex items-center justify-center relative overflow-hidden">
                        <i class="fas fa-bolt text-white text-7xl opacity-20 absolute -right-5 -bottom-5"></i>
                        <i class="fas fa-hands text-white text-6xl z-10"></i>
                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-accent to-detail"></div>
                    </div>
                    <div class="p-6 bg-gray-800 bg-opacity-70 h-full flex flex-col">
                        <h3 class="text-xl font-bold text-white mb-3">Reiki Quântico</h3>
                        <p class="text-gray-300 mb-4 flex-grow">
                            Sistema de cura energética amplificado com tecnologia de ponta que potencializa os efeitos em até 10x comparado ao Reiki tradicional.
                        </p>
                        <ul class="space-y-2 mb-6">
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Ativação de meridianos</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Balanceamento quântico</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-secondary mt-1 mr-2"></i>
                                <span class="text-gray-300">Conexão com fonte universal</span>
                            </li>
                        </ul>
                        <div class="text-center mt-auto">
                            <span class="text-accent font-bold text-lg">R$ 380/sessão</span>
                            <a href="#contact" class="block mt-3 bg-gradient-to-r from-accent to-primary hover:from-accent hover:to-secondary text-white px-4 py-2 rounded-full text-sm font-medium transition-all glow-box hover:scale-105">
                                Agendar Experiência
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-16">
                <a href="#contact" class="inline-block bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-xl glow-box hover:scale-105">
                    <i class="fas fa-robot mr-2"></i> Diagnóstico Personalizado Gratuito
                </a>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section id="benefits" class="py-20 bg-gradient-to-b from-gray-900 to-earthDark relative overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary filter blur-3xl opacity-30"></div>
            <div class="absolute bottom-1/3 right-1/3 w-64 h-64 rounded-full bg-accent filter blur-3xl opacity-30"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Transformações</span> Mensuráveis
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Resultados verificáveis através de biofeedback e relatórios quânticos personalizados.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Benefit 1 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-primary opacity-10"></div>
                    <div class="text-primary text-5xl mb-4">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Neuroplasticidade Acelerada</h3>
                    <p class="text-gray-300">
                        Reprogramação neural 3x mais rápida que métodos convencionais, com evidências em exames de ressonância magnética funcional.
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full" style="width: 87%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-primary">87% eficácia</span>
                        </div>
                    </div>
                </div>
                
                <!-- Benefit 2 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-secondary opacity-10"></div>
                    <div class="text-secondary text-5xl mb-4">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Redução do Estresse</h3>
                    <p class="text-gray-300">
                        Diminuição de 68% nos níveis de cortisol em média após 3 sessões, comprovado por exames laboratoriais.
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 92%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-secondary">92% eficácia</span>
                        </div>
                    </div>
                </div>
                
                <!-- Benefit 3 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-accent opacity-10"></div>
                    <div class="text-accent text-5xl mb-4">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Energia Vital</h3>
                    <p class="text-gray-300">
                        Aumento de 150% na vitalidade medida por dispositivos de biofeedback em comparação com métodos tradicionais.
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-accent h-2.5 rounded-full" style="width: 95%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-accent">95% eficácia</span>
                        </div>
                    </div>
                </div>
                
                <!-- Benefit 4 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-detail opacity-10"></div>
                    <div class="text-detail text-5xl mb-4">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Expressão Emocional</h3>
                    <p class="text-gray-300">
                        Pacientes relatam 4x mais facilidade em expressar emoções autênticas após o protocolo de Falaterapia Neural.
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-detail h-2.5 rounded-full" style="width: 89%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-detail">89% eficácia</span>
                        </div>
                    </div>
                </div>
                
                <!-- Benefit 5 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-primary opacity-10"></div>
                    <div class="text-primary text-5xl mb-4">
                        <i class="fas fa-spa"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Conexão Espiritual</h3>
                    <p class="text-gray-300">
                        97% dos clientes relatam experiências espirituais profundas e transformadoras durante as sessões de Xamanismo VR.
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-primary h-2.5 rounded-full" style="width: 97%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-primary">97% eficácia</span>
                        </div>
                    </div>
                </div>
                
                <!-- Benefit 6 -->
                <div class="therapy-card rounded-xl p-6 relative overflow-hidden">
                    <div class="absolute -top-10 -right-10 w-32 h-32 rounded-full bg-secondary opacity-10"></div>
                    <div class="text-secondary text-5xl mb-4">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Resultados Duradouros</h3>
                    <p class="text-gray-300">
                        85% de manutenção dos benefícios após 1 ano, contra 40% em terapias convencionais (estudo comparativo).
                    </p>
                    <div class="mt-6 pt-4 border-t border-gray-700">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-secondary h-2.5 rounded-full" style="width: 85%"></div>
                            </div>
                            <span class="ml-3 text-sm font-medium text-secondary">85% eficácia</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section id="testimonials" class="py-20 relative overflow-hidden">
        <div class="absolute inset-0 z-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-5"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Depoimentos</span> Quânticos
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Relatos reais de transformações profundas através das terapias futuristas de Marcoxondaro.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Testimonial 1 -->
                <div class="therapy-card rounded-xl p-8 relative overflow-hidden">
                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-accent"></div>
                    <div class="flex mb-4">
                        <div class="text-accent text-xl mr-1">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="italic mb-6 text-gray-300 relative">
                        <i class="fas fa-quote-left text-primary opacity-30 text-4xl absolute -top-2 -left-2"></i>
                        "A Falaterapia Neural mudou minha vida profissional. Em 3 sessões consegui superar um bloqueio de comunicação que tinha há 10 anos. Marcoxondaro tem uma abordagem revolucionária que realmente funciona onde outras falharam."
                    </p>
                    <div class="flex items-center">
                        <div class="w-14 h-14 rounded-full bg-gray-700 overflow-hidden mr-4 border-2 border-primary">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Amanda" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold text-white">Amanda S.</h4>
                            <p class="text-sm text-gray-400">Executiva de Marketing, 34 anos</p>
                        </div>
                    </div>
                    <div class="absolute bottom-4 right-4 text-5xl opacity-10 text-primary">
                        <i class="fas fa-quote-right"></i>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="therapy-card rounded-xl p-8 relative overflow-hidden">
                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-secondary to-accent"></div>
                    <div class="flex mb-4">
                        <div class="text-accent text-xl mr-1">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="italic mb-6 text-gray-300 relative">
                        <i class="fas fa-quote-left text-secondary opacity-30 text-4xl absolute -top-2 -left-2"></i>
                        "Como engenheiro, sempre fui cético, mas a Bioenergia 4D me surpreendeu. Os resultados são mensuráveis e impressionantes. Minha produtividade aumentou 40% e minha ansiedade desapareceu. A abordagem científica de Marcoxondaro é o futuro da terapia."
                    </p>
                    <div class="flex items-center">
                        <div class="w-14 h-14 rounded-full bg-gray-700 overflow-hidden mr-4 border-2 border-secondary">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ricardo" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold text-white">Ricardo M.</h4>
                            <p class="text-sm text-gray-400">Engenheiro de Software, 38 anos</p>
                        </div>
                    </div>
                    <div class="absolute bottom-4 right-4 text-5xl opacity-10 text-secondary">
                        <i class="fas fa-quote-right"></i>
                    </div>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="therapy-card rounded-xl p-8 relative overflow-hidden">
                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-detail to-accent"></div>
                    <div class="flex mb-4">
                        <div class="text-accent text-xl mr-1">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="italic mb-6 text-gray-300 relative">
                        <i class="fas fa-quote-left text-detail opacity-30 text-4xl absolute -top-2 -left-2"></i>
                        "O Xamanismo VR foi a experiência mais profunda da minha vida espiritual. Marcoxondaro conseguiu criar uma ponte perfeita entre tecnologia e tradição. Em uma sessão resolvi questões que anos de terapia tradicional não tinham tocado."
                    </p>
                    <div class="flex items-center">
                        <div class="w-14 h-14 rounded-full bg-gray-700 overflow-hidden mr-4 border-2 border-detail">
                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Juliana" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold text-white">Juliana R.</h4>
                            <p class="text-sm text-gray-400">Terapeuta Holística, 42 anos</p>
                        </div>
                    </div>
                    <div class="absolute bottom-4 right-4 text-5xl opacity-10 text-detail">
                        <i class="fas fa-quote-right"></i>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-16">
                <a href="#contact" class="inline-block bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-xl glow-box hover:scale-105">
                    <i class="fas fa-vial mr-2"></i> Agende Seu Diagnóstico
                </a>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="py-20 bg-gray-900 bg-opacity-70 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover"></div>
            <div class="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-900/90 to-gray-900"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Protocolo</span> de Transformação
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Um processo cientificamente estruturado para resultados rápidos e duradouros.
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <!-- Step 1 -->
                <div class="flex mb-12">
                    <div class="hidden md:block w-1/5 text-right pr-8 pt-2">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-primary to-accent text-gray-900 text-2xl font-bold glow-box">
                            1
                        </div>
                    </div>
                    <div class="w-full md:w-4/5 pl-4 relative">
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-primary"></div>
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-primary animate-ping"></div>
                        <h3 class="text-xl font-bold text-white mb-3">Diagnóstico Quântico</h3>
                        <p class="text-gray-300">
                            Análise completa do seu campo energético e padrões mentais através de tecnologia de biofeedback avançado e avaliação holística.
                        </p>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="flex mb-12">
                    <div class="hidden md:block w-1/5 text-right pr-8 pt-2">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-secondary to-accent text-gray-900 text-2xl font-bold glow-box">
                            2
                        </div>
                    </div>
                    <div class="w-full md:w-4/5 pl-4 relative">
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-secondary"></div>
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-secondary animate-ping"></div>
                        <h3 class="text-xl font-bold text-white mb-3">Sessões de Alta Frequência</h3>
                        <p class="text-gray-300">
                            Protocolos personalizados que combinam múltiplas técnicas em cada sessão para máxima eficiência e resultados acelerados.
                        </p>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="flex mb-12">
                    <div class="hidden md:block w-1/5 text-right pr-8 pt-2">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-detail to-accent text-gray-900 text-2xl font-bold glow-box">
                            3
                        </div>
                    </div>
                    <div class="w-full md:w-4/5 pl-4 relative">
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-detail"></div>
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-detail animate-ping"></div>
                        <h3 class="text-xl font-bold text-white mb-3">Tecnologia de Apoio</h3>
                        <p class="text-gray-300">
                            Aplicativos exclusivos, áudios de reprogramação neural e dispositivos de biofeedback para uso entre sessões.
                        </p>
                    </div>
                </div>
                
                <!-- Step 4 -->
                <div class="flex">
                    <div class="hidden md:block w-1/5 text-right pr-8 pt-2">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-accent to-primary text-gray-900 text-2xl font-bold glow-box">
                            4
                        </div>
                    </div>
                    <div class="w-full md:w-4/5 pl-4 relative">
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-accent"></div>
                        <div class="absolute -left-4 md:left-0 top-3 w-4 h-4 rounded-full bg-accent animate-ping"></div>
                        <h3 class="text-xl font-bold text-white mb-3">Monitoramento Contínuo</h3>
                        <p class="text-gray-300">
                            Acompanhamento com relatórios quânticos periódicos e ajustes finos para garantir resultados duradouros.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-16">
                <a href="#contact" class="inline-block bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-xl glow-box hover:scale-105">
                    <i class="fas fa-rocket mr-2"></i> Inicie Sua Transformação
                </a>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section id="faq" class="py-20 relative overflow-hidden">
        <div class="absolute inset-0 z-0 bg-[url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')] bg-cover bg-center opacity-5"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Perguntas</span> Frequentes
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Tudo o que você precisa saber sobre as terapias quânticas de Marcoxondaro.
                </p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <!-- FAQ Item 1 -->
                <div class="mb-6 border-b border-gray-700 pb-6">
                    <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-white hover:text-accent transition">
                        <span>Como a Falaterapia Neural difere da PNL tradicional?</span>
                        <i class="fas fa-plus text-primary ml-4"></i>
                    </button>
                    <div class="faq-answer mt-4 text-gray-300 hidden">
                        <p>
                            Enquanto a PNL tradicional trabalha com reprogramação consciente, a Falaterapia Neural opera em nível quântico, utilizando frequências vocais específicas que ressoam diretamente com suas estruturas neuronais profundas. Nossos equipamentos de biofeedback mostram alterações imediatas na atividade cerebral durante as sessões.
                        </p>
                    </div>
                </div>
                
                <!-- FAQ Item 2 -->
                <div class="mb-6 border-b border-gray-700 pb-6">
                    <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-white hover:text-accent transition">
                        <span>A Bioenergia 4D tem base científica?</span>
                        <i class="fas fa-plus text-primary ml-4"></i>
                    </button>
                    <div class="faq-answer mt-4 text-gray-300 hidden">
                        <p>
                            Absolutamente. Utilizamos princípios da física quântica, teoria dos campos morfogenéticos e pesquisas recentes sobre o efeito dos campos magnéticos no corpo humano. Todos os protocolos são mensuráveis através de equipamentos de biofeedback de última geração que mostram alterações imediatas no seu campo energético.
                        </p>
                    </div>
                </div>
                
                <!-- FAQ Item 3 -->
                <div class="mb-6 border-b border-gray-700 pb-6">
                    <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-white hover:text-accent transition">
                        <span>O Xamanismo VR é seguro?</span>
                        <i class="fas fa-plus text-primary ml-4"></i>
                    </button>
                    <div class="faq-answer mt-4 text-gray-300 hidden">
                        <p>
                            Totalmente. Todas as jornadas são cuidadosamente guiadas por Marcoxondaro, com dosagem precisa de estímulos visuais e sonoros que induzem estados alterados de consciência de forma segura e controlada. Antes de cada sessão, fazemos uma avaliação completa para garantir a experiência ideal para seu perfil.
                        </p>
                    </div>
                </div>
                
                <!-- FAQ Item 4 -->
                <div class="mb-6 border-b border-gray-700 pb-6">
                    <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-white hover:text-accent transition">
                        <span>Quantas sessões são necessárias para ver resultados?</span>
                        <i class="fas fa-plus text-primary ml-4"></i>
                    </button>
                    <div class="faq-answer mt-4 text-gray-300 hidden">
                        <p>
                            A maioria dos clientes relata melhoras significativas já na primeira sessão, com transformações profundas ocorrendo entre 3-5 sessões. Para questões mais complexas, recomendamos pacotes de 8-12 sessões. Durante o diagnóstico inicial, Marcoxondaro fará uma projeção personalizada para seu caso específico.
                        </p>
                    </div>
                </div>
                
                <!-- FAQ Item 5 -->
                <div class="mb-6 border-b border-gray-700 pb-6">
                    <button class="faq-question flex justify-between items-center w-full text-left font-bold text-lg text-white hover:text-accent transition">
                        <span>Posso fazer as sessões online?</span>
                        <i class="fas fa-plus text-primary ml-4"></i>
                    </button>
                    <div class="faq-answer mt-4 text-gray-300 hidden">
                        <p>
                            Sim! Desenvolvemos uma plataforma exclusiva que permite a transmissão quântica de energia e informações. As sessões online têm a mesma eficácia que as presenciais, com a vantagem da comodidade. Você receberá um kit com dispositivos de biofeedback para uso durante as sessões remotas.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <p class="mb-6 text-lg text-gray-300">
                    Ainda tem dúvidas? Fale diretamente com Marcoxondaro.
                </p>
                <a href="https://wa.me/5511999999999" class="inline-block bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-lg glow-box hover:scale-105">
                    <i class="fab fa-whatsapp mr-2"></i> Chamar no WhatsApp
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 bg-gradient-to-b from-earthDark to-gray-900 relative overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary filter blur-3xl opacity-30"></div>
            <div class="absolute bottom-1/3 right-1/3 w-64 h-64 rounded-full bg-accent filter blur-3xl opacity-30"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-heading font-bold text-white mb-4">
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Agende</span> Sua Sessão
                </h2>
                <p class="text-lg max-w-3xl mx-auto text-gray-300">
                    Preencha o formulário abaixo ou entre em contato diretamente para dar o primeiro passo em sua transformação quântica.
                </p>
            </div>
            
            <div class="max-w-4xl mx-auto therapy-card rounded-xl p-8 backdrop-blur-sm">
                <form id="contact-form" class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block mb-2 font-medium text-white">Seu Nome</label>
                        <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder-gray-400 text-white">
                    </div>
                    <div>
                        <label for="email" class="block mb-2 font-medium text-white">Seu E-mail</label>
                        <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder-gray-400 text-white">
                    </div>
                    <div>
                        <label for="phone" class="block mb-2 font-medium text-white">Telefone</label>
                        <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder-gray-400 text-white">
                    </div>
                    <div>
                        <label for="service" class="block mb-2 font-medium text-white">Terapia de Interesse</label>
                        <select id="service" name="service" class="w-full px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-white appearance-none">
                            <option value="" class="bg-gray-800">Selecione uma opção</option>
                            <option value="falaterapia" class="bg-gray-800">Falaterapia Neural</option>
                            <option value="bioenergia" class="bg-gray-800">Bioenergia 4D</option>
                            <option value="xamanismo" class="bg-gray-800">Xamanismo VR</option>
                            <option value="reiki" class="bg-gray-800">Reiki Quântico</option>
                            <option value="diagnostico" class="bg-gray-800">Diagnóstico Quântico</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label for="message" class="block mb-2 font-medium text-white">Sua Mensagem</label>
                        <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 rounded-lg bg-gray-800 bg-opacity-50 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent placeholder-gray-400 text-white"></textarea>
                    </div>
                    <div class="md:col-span-2 flex items-start">
                        <input type="checkbox" id="consent" name="consent" required class="mt-1 mr-3">
                        <label for="consent" class="text-sm text-gray-300">Concordo com a política de privacidade e aceito receber comunicações sobre agendamentos e informações terapêuticas.</label>
                    </div>
                    <div class="md:col-span-2 text-center">
                        <button type="submit" class="bg-gradient-to-r from-primary to-detail hover:from-primary hover:to-accent text-white px-8 py-4 rounded-full font-medium text-lg transition-all shadow-xl glow-box hover:scale-105">
                            <i class="fas fa-paper-plane mr-2"></i> Enviar Mensagem Quântica
                        </button>
                    </div>
                </form>
                
                <div class="grid md:grid-cols-3 gap-8 mt-12 pt-8 border-t border-gray-700">
                    <div class="flex flex-col items-center text-center">
                        <div class="text-4xl mb-4 text-accent">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Endereço Quântico</h3>
                        <p class="text-sm text-gray-300">Av. das Frequências, 1234<br>São Paulo - SP</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="text-4xl mb-4 text-accent">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Conexão Direta</h3>
                        <p class="text-sm text-gray-300">(11) 99999-9999<br>Seg-Sex: 9h-18h</p>
                    </div>
                    <div class="flex flex-col items-center text-center">
                        <div class="text-4xl mb-4 text-accent">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h3 class="font-bold text-white mb-2">Transmissão Digital</h3>
                        <p class="text-sm text-gray-300">contato@marcoxondaro.com<br>Atendimento personalizado</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8 relative overflow-hidden">
        <div class="absolute inset-0 z-0 opacity-20">
            <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary filter blur-3xl opacity-30"></div>
            <div class="absolute bottom-1/3 right-1/3 w-64 h-64 rounded-full bg-accent filter blur-3xl opacity-30"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center mr-3 glow-box">
                            <span class="text-gray-900 font-bold">MX</span>
                        </div>
                        <h2 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">Marcoxondaro</h2>
                    </div>
                    <p class="mt-2 text-sm text-gray-400">Terapia Holística Quântica</p>
                </div>
                <div class="flex space-x-6 mb-6 md:mb-0">
                    <a href="#" class="text-gray-400 hover:text-accent transition text-xl">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-accent transition text-xl">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-accent transition text-xl">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-accent transition text-xl">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <div class="text-sm text-gray-400 text-center md:text-right">
                    <p>&copy; 2023 Marcoxondaro Terapias Quânticas. Todos os direitos reservados.</p>
                    <p class="mt-1">Tecnologia e espiritualidade em perfeita sintonia.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Floating WhatsApp Button -->
    <a href="https://wa.me/5511999999999" class="fixed bottom-6 right-6 bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-xl glow-box hover:bg-green-600 transition z-50 hover:scale-110">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Floating Back to Top Button -->
    <a href="#" class="fixed bottom-24 right-6 bg-gradient-to-br from-primary to-detail text-white w-14 h-14 rounded-full flex items-center justify-center text-xl shadow-xl glow-box hover:scale-110 transition z-50">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- Success Modal -->
    <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden backdrop-blur-sm">
        <div class="bg-gray-800 rounded-xl p-8 max-w-md mx-4 relative border border-gray-700 glow-box">
            <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
                <i class="fas fa-times"></i>
            </button>
            <div class="text-center">
                <div class="text-green-500 text-6xl mb-4">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-2">Mensagem Transmitida!</h3>
                <p class="text-gray-300 mb-6">
                    Sua mensagem foi enviada com sucesso para o campo quântico de Marcoxondaro. Você receber
                    .hero {
  background-image: linear-gradient(45deg, #EF595F, #E5734F);
  background-size: cover;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, transparent 0%, transparent 49%, rgba(255,255,255,0.03) 50%, transparent 51%, transparent 100%);
  background-size: 20px 20px;
  pointer-events: none;
}
</html>/* End custom CSS */