:root {
    --bg: #0a0a0a;
    --card: #101014;
    --muted: #b8b8c2;
    --text: #f5f7fb;
    --accent: #62f1ff;
    --accent-2: #7b61ff;
    --accent-3: #00ffa3;
    --ok: #27e0a5;
            
            /* Fluid Design System - Valores Corrigidos */
            --radius-sm: clamp(4px, 0.5vw, 8px);
            --radius: clamp(8px, 1vw, 16px);
            --radius-lg: clamp(12px, 1.5vw, 24px);
            
            /* Fluid Spacing System - Valores Mais Conservadores */
            --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
            --space-sm: clamp(0.5rem, 1vw, 1rem);
            --space-md: clamp(1rem, 1.5vw, 1.5rem);
            --space-lg: clamp(1.5rem, 2vw, 2.5rem);
            --space-xl: clamp(2rem, 3vw, 4rem);
            --space-xxl: clamp(3rem, 4vw, 6rem);
            
            /* Fluid Typography Scale - Tamanhos Normalizados */
            --text-xs: clamp(0.75rem, 0.8vw, 0.875rem);
            --text-sm: clamp(0.875rem, 1vw, 1rem);
            --text-base: clamp(1rem, 1.2vw, 1.125rem);
            --text-lg: clamp(1.125rem, 1.4vw, 1.25rem);
            --text-xl: clamp(1.25rem, 1.6vw, 1.5rem);
            --text-2xl: clamp(1.5rem, 2vw, 2rem);
            --text-3xl: clamp(1.875rem, 2.5vw, 2.5rem);
            --text-4xl: clamp(2.25rem, 3vw, 3rem);
            --text-5xl: clamp(2.5rem, 4vw, 4rem);
            
            /* Container Queries Variables */
            --container-xs: 20rem;
            --container-sm: 24rem;
            --container-md: 32rem;
            --container-lg: 48rem;
            --container-xl: 64rem;
            --container-2xl: 80rem;
            
            /* Touch Target Sizes */
            --touch-min: 44px;
            --touch-comfortable: 48px;
            --touch-large: 56px;
            
            /* Gradients and Effects - Sombras Corrigidas */
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
            --shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
            --grad: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
            --grad-text: linear-gradient(135deg, var(--accent), var(--accent-2));
            
            /* Adaptive Line Heights */
            --line-height-tight: clamp(1.1, 1.2, 1.3);
            --line-height-normal: clamp(1.4, 1.5, 1.6);
            --line-height-relaxed: clamp(1.6, 1.7, 1.8);
            
            /* Dynamic Letter Spacing */
            --letter-spacing-tight: clamp(-0.025em, -0.01em, 0em);
            --letter-spacing-normal: clamp(0em, 0.01em, 0.025em);
            --letter-spacing-wide: clamp(0.025em, 0.05em, 0.1em);
        }
        
        /* Container Queries Support Detection */
        @supports (container-type: inline-size) {
            .container-aware {
                container-type: inline-size;
            }
        }
        
        /* 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;
            }
        }

        /* Universal Reset and Base Styles */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Font Awesome Icon Fix - Versão Robusta */
        .fab, .fas, .far, .fal, .fad, .fass, .fasr, .fasl {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        .fab {
            font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
            font-weight: 400 !important;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
            /* Enable smooth scrolling for modern browsers */
            scroll-padding-top: 80px;
        }

        body {
            margin: 0;
            font-family: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: var(--line-height-normal);
            letter-spacing: var(--letter-spacing-normal);
            font-size: var(--text-base);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            -webkit-tap-highlight-color: rgba(98, 241, 255, 0.1);
            touch-action: manipulation;
            /* Prevent zoom on double tap */
            text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        /* Additional Font Awesome Icon Fixes */
        i[class^="fa"], i[class*=" fa"] {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        i.fab {
            font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
            font-weight: 400 !important;
        }

        i.fas, i.far, i.fal, i.fad {
            font-family: "Font Awesome 6 Free", "FontAwesome" !important;
            font-weight: 900 !important;
        }

        /* Botões com ícones */
        .btn i, .nav-menu a i, .hero-cta a i {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            margin-right: 8px !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        /* Adaptive Touch Optimizations */
        @media (hover: none) and (pointer: coarse) {
            :root {
                --touch-scale: 1.2;
            }
            
            .btn,
            .service-tab,
            .model-title,
            .nav-link {
                min-height: var(--touch-comfortable);
                min-width: var(--touch-comfortable);
                transform-origin: center;
            }

            .btn:active,
            .service-tab:active,
            .model-title:active {
                transform: scale(0.98);
                transition: transform 0.1s ease;
            }
        }

        /* High DPI Display Optimizations */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            body {
                -webkit-font-smoothing: subpixel-antialiased;
            }
        }

        /* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .service-tab,
            .btn,
            .model-title {
                min-height: 44px;
                padding: 12px;
            }

            .service-image img:hover {
                transform: none;
            }

            .service-tab:active {
                transform: scale(0.98);
                transition: transform 0.1s ease;
            }
        }

        /* Universal Adaptive Styles */
        a {
            color: inherit;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        img {
            max-width: 100%;
            height: auto;
            /* Prevent layout shift during loading */
            aspect-ratio: attr(width) / attr(height);
        }

        /* Fluid Container System */
        .container {
            width: min(100% - var(--space-md), 1200px);
            margin: 0 auto;
            padding-inline: var(--space-sm);
            container-type: inline-size;
        }

        /* Adaptive Container Variants */
        .container-fluid {
            width: 100%;
            max-width: none;
            padding-inline: var(--space-xs);
        }

        .container-narrow {
            width: min(100% - var(--space-lg), 800px);
            margin: 0 auto;
            padding-inline: var(--space-md);
        }

        /* Fluid Section Spacing */
        section {
            padding-block: 3rem;
            position: relative;
            container-type: inline-size;
        }

        /* Container Query Responsive Sections */
        @container (min-width: 768px) {
            section {
                padding-block: 4rem;
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Texto destacado simples */
        .highlight-text {
            background: linear-gradient(135deg, var(--accent) 0%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            display: inline;
        }

        /* Hero title melhorado */
        .hero-title {
            position: relative;
            z-index: 10;
            line-height: 1.2;
        }

        /* Fluid Button System - Tamanhos Corrigidos */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 25px;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.5px;
            line-height: 1.2;
            min-height: 44px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: none;
            position: relative;
            overflow: hidden;
            text-align: center;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        /* Adaptive Button Sizing - Corrigido */
        @media (max-width: 480px) {
            .btn {
                padding: 10px 20px;
                font-size: 13px;
                min-width: 100px;
                gap: 6px;
            }
        }

        @media (min-width: 768px) {
            .btn {
                padding: 14px 28px;
                font-size: 15px;
                gap: 10px;
            }
        }

        @media (min-width: 1024px) {
            .btn {
                padding: 16px 32px;
                font-size: 16px;
            }
        }

        .btn-primary {
            background: var(--grad);
            background-size: 200% auto;
            color: #051018;
            box-shadow: 0 10px 30px rgba(123, 97, 255, 0.35),
                        inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(123, 97, 255, 0.5);
            background-position: right center;
        }

        .btn-secondary {
            background: transparent;
            color: var(--text);
            border: 2px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            border-color: var(--accent);
            background: rgba(98, 241, 255, 0.05);
            transform: translateY(-3px);
        }

        /* Fluid Section Headers */
        .section-header {
            text-align: center;
            margin-bottom: 3rem;
            container-type: inline-size;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: inline-block;
            line-height: var(--line-height-tight);
            letter-spacing: var(--letter-spacing-tight);
        }
        
        @media (min-width: 768px) {
            .section-title {
                font-size: 2.5rem;
            }
        }

        .section-subtitle {
            font-size: var(--text-lg);
            color: var(--muted);
            max-width: min(100%, 700px);
            margin: 0 auto;
            line-height: var(--line-height-relaxed);
        }

        /* Adaptive Fluid Card System */
        .card {
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
            position: relative;
            overflow: hidden;
            container-type: inline-size;
        }

        /* Container Query Responsive Cards */
        @container (min-width: 400px) {
            .card {
                padding: 2rem;
            }
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: clamp(3px, 0.5vw, 8px);
            background: var(--grad);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
            border-color: rgba(123, 97, 255, 0.35);
        }

        .card:hover::before {
            opacity: 1;
        }

        /* Adaptive Header System */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            backdrop-filter: blur(clamp(8px, 2vw, 15px));
            background: rgba(16, 16, 20, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            container-type: inline-size;
        }

        header.scrolled {
            padding-block: 4px;
            background: rgba(10, 10, 10, 0.95);
            box-shadow: var(--shadow);
        }

        /* Fluid Navigation - Menu Compacto */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-block: var(--space-xs);
            gap: var(--space-sm);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            flex-shrink: 0;
            text-decoration: none;
            color: var(--text);
        }

        .logo img {
            height: clamp(35px, 6vw, 55px);
            width: auto;
            max-width: clamp(120px, 25vw, 200px);
            object-fit: contain;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
        }

        .logo img:hover {
            transform: scale(1.03);
        }

        /* Fallback caso a imagem não carregue */
        .logo:after {
            content: "ROC Agency";
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent);
            display: none;
        }

        .logo img[src=""]:after,
        .logo img:not([src]):after {
            display: block;
        }

        /* Adaptive Navigation Menu - Compacto */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @container (max-width: 768px) {
            .nav-menu {
                position: fixed;
                top: 100%;
                left: 0;
                width: 100%;
                height: 100vh;
                background: rgba(10, 10, 10, 0.98);
                backdrop-filter: blur(20px);
                flex-direction: column;
                justify-content: center;
                gap: var(--space-lg);
                transform: translateY(-100vh);
                opacity: 0;
                pointer-events: none;
            }

            .nav-menu.active {
                transform: translateY(0);
                opacity: 1;
                pointer-events: all;
            }
        }

        .nav-link {
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
            min-height: 32px;
            display: flex;
            align-items: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @media (min-width: 768px) {
            .nav-link {
                font-size: 14px;
                padding: 6px 14px;
            }
        }

        .nav-link:hover,
        .nav-link:focus-visible {
            background: rgba(255, 255, 255, 0.08);
            color: var(--accent);
            transform: translateY(-2px);
        }

        /* Hamburger Menu - Tamanho Corrigido */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001;
            min-height: 44px;
            min-width: 44px;
        }

        @container (max-width: 768px) {
            .menu-toggle {
                display: flex;
            }
        }

        .menu-toggle span {
            display: block;
            width: 100%;
            height: clamp(2px, 0.5vw, 4px);
            background: var(--text);
            border-radius: clamp(1px, 0.25vw, 3px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(clamp(7px, 1.5vw, 10px)) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
            transform: scale(0);
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(clamp(-7px, -1.5vw, -10px)) rotate(-45deg);
        }

        /* =========================================================
           ADAPTIVE HERO SECTION
        ========================================================= */
        .hero {
            padding-block: clamp(80px, 15vh, 160px) var(--space-xxl);
            position: relative;
            overflow: hidden;
            background: 
                radial-gradient(ellipse at top right, rgba(123, 97, 255, 0.15), transparent 40%),
                radial-gradient(ellipse at bottom left, rgba(98, 241, 255, 0.08), transparent 50%);
            container-type: inline-size;
        }

        /* Universal Grid System */
        .hero-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
            gap: var(--space-xl);
            align-items: center;
        }

        @container (min-width: 768px) {
            .hero-content {
                grid-template-columns: 1.2fr 1fr;
                gap: var(--space-xxl);
            }
        }

        /* Adaptive Hero Components */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-lg);
            background: rgba(98, 241, 255, 0.08);
            border: 1px solid rgba(98, 241, 255, 0.2);
            color: #c9fbff;
            font-weight: 600;
            font-size: var(--text-xs);
            margin-bottom: var(--space-md);
            backdrop-filter: blur(10px);
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: var(--line-height-tight);
            margin-bottom: 1.5rem;
            letter-spacing: var(--letter-spacing-tight);
        }
        
        @media (min-width: 768px) {
            .hero-title {
                font-size: 3rem;
            }
        }
        
        @media (min-width: 1024px) {
            .hero-title {
                font-size: 3.5rem;
            }
        }

        .hero-title span {
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-description {
            font-size: var(--text-lg);
            color: var(--muted);
            margin-bottom: 2rem;
            line-height: var(--line-height-relaxed);
            max-width: 60ch;
        }

        /* Fluid CTA Section */
        .hero-cta {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 3rem;
        }

        @container (max-width: 480px) {
            .hero-cta {
                flex-direction: column;
                align-items: stretch;
            }
            
            .hero-cta .btn {
                justify-content: center;
            }
        }

        /* Adaptive Stats Grid */
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
            gap: var(--space-sm);
        }

        @container (min-width: 400px) {
            .hero-stats {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .stat-item {
            background: linear-gradient(145deg, #0c0c12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.06);
            padding: var(--space-md);
            border-radius: var(--radius);
            text-align: center;
            container-type: inline-size;
        }

        .stat-number {
            font-size: var(--text-2xl);
            font-weight: 700;
            margin-bottom: var(--space-xs);
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .stat-label {
            font-size: var(--text-xs);
            color: var(--muted);
            line-height: var(--line-height-normal);
        }

        /* Canvas global para partículas em toda a página */
        .global-particles-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
            opacity: 0.8;
        }

        /* Sistema Visual Avançado com Partículas e Dados em Tempo Real */
        .hero-visual {
            position: relative;
            min-height: clamp(500px, 60vh, 700px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            container-type: inline-size;
            overflow: visible;
            background: radial-gradient(ellipse at center, rgba(123, 97, 255, 0.1), transparent 70%);
            padding: 40px;
        }

        @container (min-width: 600px) {
            .hero-visual {
                min-height: clamp(600px, 70vh, 800px);
                padding: 60px;
            }
        }

        /* Canvas para partículas interativas - REMOVIDO */

        /* Órbitas Alienígenas Futurísticas - Otimizado para Mobile */
        .alien-orbit {
            position: absolute;
            border-radius: 50%;
            animation: alienRotation 15s linear infinite;
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
            contain: layout style paint;
            /* Removido filter complexo para melhor performance */
        }

        /* Desktop: Efeitos completos */
        @media (min-width: 769px) and (min-resolution: 96dpi) {
            .alien-orbit {
                filter: drop-shadow(0 0 20px var(--orbit-glow));
            }
            
            .orbit-1 {
                box-shadow: 
                    0 0 15px rgba(98, 241, 255, 0.05),
                    inset 0 0 20px rgba(98, 241, 255, 0.02);
            }
            
            .orbit-2 {
                box-shadow: 
                    0 0 12px rgba(184, 184, 194, 0.03),
                    inset 0 0 15px rgba(184, 184, 194, 0.01);
            }
            
            .orbit-3 {
                filter: drop-shadow(0 0 8px rgba(123, 97, 255, 0.04)) 
                        drop-shadow(0 0 16px rgba(123, 97, 255, 0.02));
            }
            
            .orbit-4 {
                filter: drop-shadow(0 0 6px rgba(245, 247, 251, 0.02));
            }
        }

        /* Mobile: Versão simplificada */
        @media (max-width: 768px) {
            .alien-orbit {
                animation-duration: 25s !important; /* Animação mais lenta */
                filter: none; /* Remove filtros complexos */
            }
        }

        .orbit-1 {
            width: 380px;
            height: 380px;
            border: 1px solid rgba(98, 241, 255, 0.1);
            --orbit-glow: rgba(98, 241, 255, 0.08);
            animation-duration: 20s;
        }

        .orbit-2 {
            width: 440px;
            height: 440px;
            border: 1px dashed rgba(184, 184, 194, 0.06);
            --orbit-glow: rgba(184, 184, 194, 0.04);
            animation-duration: 30s;
            animation-direction: reverse;
        }

        .orbit-3 {
            width: 500px;
            height: 500px;
            border: 1px solid rgba(123, 97, 255, 0.08);
            border-radius: 50%;
            --orbit-glow: rgba(123, 97, 255, 0.06);
            animation-duration: 40s;
        }

        .orbit-4 {
            width: 560px;
            height: 560px;
            border: 1px dotted rgba(245, 247, 251, 0.04);
            --orbit-glow: rgba(245, 247, 251, 0.03);
            animation-duration: 50s;
        }

        @keyframes alienRotation {
            0% { 
                transform: rotate(0deg) translateZ(0);
            }
            100% { 
                transform: rotate(360deg) translateZ(0);
            }
        }

        /* Animação complexa apenas para desktop */
        @media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
            @keyframes alienRotation {
                0% { 
                    transform: rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1) translateZ(0);
                    filter: drop-shadow(0 0 20px var(--orbit-glow)) brightness(1);
                }
                25% { 
                    transform: rotate3d(0, 0, 1, 90deg) scale3d(1.02, 1.02, 1) translateZ(0);
                    filter: drop-shadow(0 0 30px var(--orbit-glow)) brightness(1.1);
                }
                50% { 
                    transform: rotate3d(0, 0, 1, 180deg) scale3d(1, 1, 1) translateZ(0);
                    filter: drop-shadow(0 0 25px var(--orbit-glow)) brightness(1.05);
                }
                75% { 
                    transform: rotate3d(0, 0, 1, 270deg) scale3d(0.98, 0.98, 1) translateZ(0);
                    filter: drop-shadow(0 0 35px var(--orbit-glow)) brightness(1.15);
                }
                100% { 
                    transform: rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1) translateZ(0);
                    filter: drop-shadow(0 0 20px var(--orbit-glow)) brightness(1);
                }
            }
        }

        /* Para dispositivos que preferem movimento reduzido */
        @media (prefers-reduced-motion: reduce) {
            .alien-orbit {
                animation: none;
            }
        }

        /* Partículas de Energia nas Órbitas - Otimizado */
        .orbit-particle {
            position: absolute;
            border-radius: 50%;
            animation: particleFloat 3s ease-in-out infinite;
            will-change: transform, opacity;
            transform: translateZ(0);
            backface-visibility: hidden;
            contain: layout style paint;
        }

        /* Desktop: Efeitos completos */
        @media (min-width: 769px) {
            .orbit-particle.energy {
                width: 6px;
                height: 6px;
                background: radial-gradient(circle, rgba(98, 241, 255, 0.8) 0%, rgba(98, 241, 255, 0.4) 40%, transparent 70%);
                box-shadow: 
                    0 0 4px rgba(98, 241, 255, 0.3),
                    0 0 8px rgba(98, 241, 255, 0.2),
                    0 0 12px rgba(98, 241, 255, 0.1);
                animation-delay: 0s;
            }

            .orbit-particle.plasma {
                width: 4px;
                height: 4px;
                background: radial-gradient(circle, rgba(184, 184, 194, 0.6) 0%, rgba(184, 184, 194, 0.3) 50%, transparent 80%);
                box-shadow: 
                    0 0 3px rgba(184, 184, 194, 0.2),
                    0 0 6px rgba(184, 184, 194, 0.1),
                    0 0 9px rgba(184, 184, 194, 0.05);
                animation-delay: 1s;
            }

            .orbit-particle.cosmic {
                width: 5px;
                height: 5px;
                background: radial-gradient(circle, rgba(123, 97, 255, 0.7) 0%, rgba(123, 97, 255, 0.3) 30%, transparent 60%);
                box-shadow: 
                    0 0 4px rgba(123, 97, 255, 0.2),
                    0 0 8px rgba(123, 97, 255, 0.1),
                    0 0 12px rgba(123, 97, 255, 0.05);
                animation-delay: 2s;
            }

            .orbit-particle.quantum {
                width: 3px;
                height: 3px;
                background: radial-gradient(circle, rgba(245, 247, 251, 0.5) 0%, rgba(245, 247, 251, 0.2) 25%, transparent 50%);
                box-shadow: 
                    0 0 2px rgba(245, 247, 251, 0.1),
                    0 0 4px rgba(245, 247, 251, 0.05),
                    0 0 6px rgba(245, 247, 251, 0.03);
                animation-delay: 0.5s;
            }
        }

        /* Mobile: Versão simplificada sem box-shadow */
        @media (max-width: 768px) {
            .orbit-particle.energy {
                width: 4px;
                height: 4px;
                background: rgba(98, 241, 255, 0.6);
                animation-delay: 0s;
                animation-duration: 4s; /* Mais lento */
            }

            .orbit-particle.plasma {
                width: 3px;
                height: 3px;
                background: rgba(184, 184, 194, 0.5);
                animation-delay: 1s;
                animation-duration: 4s;
            }

            .orbit-particle.cosmic {
                width: 4px;
                height: 4px;
                background: rgba(123, 97, 255, 0.6);
                animation-delay: 2s;
                animation-duration: 4s;
            }

            .orbit-particle.quantum {
                width: 2px;
                height: 2px;
                background: rgba(245, 247, 251, 0.4);
                animation-delay: 0.5s;
                animation-duration: 4s;
            }
            
            /* Reduzir número de partículas em mobile */
            .orbit-particle:nth-child(n+3) {
                display: none;
            }
        }

        @keyframes particleFloat {
            0%, 100% { 
                transform: scale(1) translate3d(0, 0, 0);
                opacity: 0.7;
            }
            50% { 
                transform: scale(1.1) translate3d(0, -3px, 0);
                opacity: 1;
            }
        }

        /* Animação mais suave para desktop */
        @media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
            @keyframes particleFloat {
                0%, 100% { 
                    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
                    opacity: 0.8;
                }
                50% { 
                    transform: scale3d(1.2, 1.2, 1) translate3d(0, -5px, 0);
                    opacity: 1;
                }
            }
        }

        /* Posicionamento das partículas nas órbitas */
        .orbit-1 .orbit-particle:nth-child(1) { top: -4px; left: 50%; transform: translateX(-50%); }
        .orbit-1 .orbit-particle:nth-child(2) { right: -4px; top: 50%; transform: translateY(-50%); }
        .orbit-1 .orbit-particle:nth-child(3) { bottom: -4px; left: 50%; transform: translateX(-50%); }
        .orbit-1 .orbit-particle:nth-child(4) { left: -4px; top: 50%; transform: translateY(-50%); }

        .orbit-2 .orbit-particle:nth-child(1) { top: 20%; right: 20%; }
        .orbit-2 .orbit-particle:nth-child(2) { bottom: 20%; left: 20%; }
        .orbit-2 .orbit-particle:nth-child(3) { top: 70%; right: 70%; }

        .orbit-3 .orbit-particle:nth-child(1) { top: 10%; left: 60%; }
        .orbit-3 .orbit-particle:nth-child(2) { bottom: 30%; right: 15%; }

        .orbit-4 .orbit-particle:nth-child(1) { top: 45%; left: 5%; }

        /* Responsividade para órbitas e display - Otimizado */
        @media (max-width: 768px) {
            .hero-visual {
                min-height: clamp(450px, 55vh, 600px);
                padding: 20px;
                overflow: hidden; /* Previne scroll horizontal */
            }
            
            .holographic-display {
                width: 280px;
                height: 280px;
                margin: 15px;
                /* Simplificar animações em mobile */
                animation-duration: 6s;
            }
            
            .holographic-content {
                width: 90%;
                max-width: 260px;
                padding: 8px;
            }
            
            .holographic-title {
                font-size: clamp(0.8rem, 3vw, 1rem);
                margin-bottom: 6px;
                transform: none; /* Remove scale que pode causar corte */
            }
            
            .live-metrics {
                gap: 4px;
                transform: none; /* Remove scale que pode causar corte */
            }
            
            .metric-item {
                font-size: clamp(0.65rem, 2.5vw, 0.8rem);
                padding: 3px 8px;
                min-height: 22px;
                border-radius: 12px;
            }
            
            .metric-label,
            .metric-value {
                font-size: inherit;
                line-height: 1.1;
            }
            
            /* Órbitas menores e mais suaves em mobile */
            .orbit-1 { 
                width: 300px; 
                height: 300px;
                border-width: 1px;
                opacity: 0.8;
            }
            .orbit-2 { 
                width: 340px; 
                height: 340px;
                border-width: 1px;
                opacity: 0.7;
            }
            .orbit-3 { 
                width: 380px; 
                height: 380px;
                border-width: 1px;
                opacity: 0.6;
            }
            .orbit-4 { 
                width: 420px; 
                height: 420px;
                border-width: 1px;
                opacity: 0.5;
            }
        }

        @media (max-width: 480px) {
            .hero-visual {
                min-height: clamp(400px, 50vh, 500px);
                padding: 15px;
                overflow: hidden;
            }
            
            .holographic-display {
                width: 240px;
                height: 240px;
                margin: 10px;
                /* Animação ainda mais simples */
                animation-duration: 8s;
            }
            
            .holographic-content {
                width: 95%;
                max-width: 220px;
                padding: 6px;
            }
            
            .holographic-title {
                font-size: clamp(0.7rem, 3.5vw, 0.9rem);
                margin-bottom: 4px;
                transform: none;
                line-height: 1.1;
            }
            
            .live-metrics {
                gap: 3px;
                transform: none;
            }
            
            .metric-item {
                font-size: clamp(0.6rem, 2.8vw, 0.7rem);
                padding: 2px 6px;
                border-radius: 10px;
                min-height: 20px;
            }
            
            .metric-label {
                font-size: inherit;
                max-width: 35px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .metric-value {
                font-size: inherit;
                font-weight: 700;
            }
            
            /* Órbitas ainda menores para telas pequenas */
            .orbit-1 { 
                width: 240px; 
                height: 240px;
                opacity: 0.7;
            }
            .orbit-2 { 
                width: 280px; 
                height: 280px;
                opacity: 0.6;
            }
            .orbit-3 { 
                width: 320px; 
                height: 320px;
                opacity: 0.5;
            }
            .orbit-4 { 
                width: 360px; 
                height: 360px;
                opacity: 0.4;
            }
        }

        /* Para telas muito pequenas */
        @media (max-width: 360px) {
            .hero-visual {
                min-height: clamp(350px, 45vh, 450px);
                padding: 10px;
            }
            
            .holographic-display {
                width: 200px;
                height: 200px;
                margin: 5px;
            }
            
            .holographic-content {
                width: 98%;
                max-width: 180px;
                padding: 4px;
            }
            
            .holographic-title {
                font-size: clamp(0.65rem, 4vw, 0.8rem);
                margin-bottom: 3px;
                line-height: 1;
            }
            
            .live-metrics {
                gap: 2px;
            }
            
            .metric-item {
                font-size: clamp(0.55rem, 3.2vw, 0.65rem);
                padding: 1px 4px;
                border-radius: 8px;
                min-height: 18px;
            }
            
            .metric-label {
                max-width: 30px;
                font-size: inherit;
            }
            
            .metric-value {
                font-size: inherit;
                font-weight: 700;
            }
            
            .orbit-1 { width: 200px; height: 200px; }
            .orbit-2 { width: 240px; height: 240px; }
            .orbit-3 { width: 280px; height: 280px; }
            .orbit-4 { width: 320px; height: 320px; }
        }

        /* Para dispositivos extremamente pequenos */
        @media (max-width: 320px) {
            .holographic-display {
                width: 180px;
                height: 180px;
                margin: 3px;
            }
            
            .holographic-content {
                width: 100%;
                max-width: 160px;
                padding: 2px;
            }
            
            .holographic-title {
                font-size: clamp(0.6rem, 4.5vw, 0.75rem);
                margin-bottom: 2px;
            }
            
            .live-metrics {
                gap: 1px;
            }
            
            .metric-item {
                font-size: clamp(0.5rem, 3.5vw, 0.6rem);
                padding: 1px 3px;
                border-radius: 6px;
                min-height: 16px;
            }
            
            .metric-label {
                max-width: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        /* Holografia Central Alienígena */
        .holographic-display {
            position: relative;
            z-index: 10;
            width: 320px;
            height: 320px;
            background: 
                radial-gradient(circle at 30% 30%, rgba(98, 241, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(123, 97, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(0, 255, 163, 0.1) 0%, transparent 70%);
            border: 2px solid transparent;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(15px);
            animation: alienHologram 4s ease-in-out infinite;
            box-shadow: 
                0 0 40px rgba(98, 241, 255, 0.4),
                inset 0 0 40px rgba(123, 97, 255, 0.15),
                0 0 80px rgba(0, 255, 163, 0.2);
            position: relative;
            overflow: hidden;
            margin: 20px;
            flex-shrink: 0;
        }

        .holographic-display::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                #62f1ff 0%, 
                #7b61ff 25%, 
                #00ffa3 50%, 
                #ff64ff 75%, 
                #62f1ff 100%);
            border-radius: 50%;
            z-index: -1;
            animation: borderFlow 3s linear infinite;
        }

        .holographic-display::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(45deg, transparent 30%, rgba(98, 241, 255, 0.1) 50%, transparent 70%),
                linear-gradient(-45deg, transparent 30%, rgba(123, 97, 255, 0.1) 50%, transparent 70%);
            border-radius: 50%;
            animation: scanLines 2s ease-in-out infinite;
        }

        @keyframes alienHologram {
            0%, 100% { 
                box-shadow: 
                    0 0 40px rgba(98, 241, 255, 0.4),
                    inset 0 0 40px rgba(123, 97, 255, 0.15),
                    0 0 80px rgba(0, 255, 163, 0.2);
                filter: hue-rotate(0deg) brightness(1);
            }
            25% { 
                filter: hue-rotate(10deg) brightness(1.1);
            }
            50% { 
                box-shadow: 
                    0 0 60px rgba(98, 241, 255, 0.6),
                    inset 0 0 60px rgba(123, 97, 255, 0.25),
                    0 0 120px rgba(0, 255, 163, 0.3);
                filter: hue-rotate(20deg) brightness(1.2);
            }
            75% { 
                filter: hue-rotate(15deg) brightness(1.15);
            }
        }

        @keyframes borderFlow {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes scanLines {
            0%, 100% { 
                opacity: 0.3;
                transform: translateY(-100%);
            }
            50% { 
                opacity: 0.6;
                transform: translateY(100%);
            }
        }

        .holographic-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 3;
            width: 85%;
            max-width: 280px;
            padding: 10px;
        }

        .holographic-title {
            font-size: clamp(0.9rem, 2.5vw, 1.2rem);
            font-weight: 700;
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: clamp(8px, 2vw, 12px);
            line-height: 1.2;
            word-break: keep-all;
        }

        .live-metrics {
            display: flex;
            flex-direction: column;
            gap: clamp(4px, 1.5vw, 8px);
            width: 100%;
        }

        .metric-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: clamp(0.7rem, 2vw, 0.9rem);
            padding: clamp(3px, 1vw, 5px) clamp(8px, 3vw, 15px);
            background: rgba(255, 255, 255, 0.05);
            border-radius: clamp(12px, 4vw, 20px);
            border: 1px solid rgba(98, 241, 255, 0.2);
            min-height: clamp(24px, 6vw, 32px);
            white-space: nowrap;
        }

        .metric-label {
            color: var(--muted);
            font-size: inherit;
            flex-shrink: 0;
            text-align: left;
        }

        .metric-value {
            color: var(--accent);
            font-weight: 600;
            animation: numberUpdate 2s ease-in-out infinite;
            font-size: inherit;
            text-align: right;
            flex-shrink: 0;
        }

        @keyframes numberUpdate {
            0%, 90%, 100% { opacity: 1; }
            95% { opacity: 0.7; }
        }

        /* Efeito de Scan Holográfico */
        .holographic-display::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            animation: holographicScan 4s ease-in-out infinite;
            z-index: 4;
        }

        @keyframes holographicScan {
            0%, 100% { 
                top: 0; 
                opacity: 0;
            }
            50% { 
                top: 100%; 
                opacity: 1;
            }
        }

        /* =========================================================
           ADAPTIVE SERVICES SECTION
        ========================================================= */
        .services {
            background: radial-gradient(ellipse at top left, rgba(123, 97, 255, 0.05), transparent 40%);
            container-type: inline-size;
        }

        /* Universal Grid System for Services */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: var(--space-lg);
            align-items: stretch;
        }

        @container (min-width: 640px) {
            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            }
        }

        @container (min-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .service-card {
            text-align: center;
            padding: var(--space-lg) var(--space-md);
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
            container-type: inline-size;
        }

        .service-icon {
            font-size: clamp(32px, 5vw, 48px);
            margin-bottom: var(--space-sm);
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            align-self: center;
        }

        .service-title {
            font-size: var(--text-xl);
            font-weight: 700;
            margin-bottom: var(--space-sm);
            line-height: var(--line-height-tight);
        }

        .service-description {
            color: var(--muted);
            margin-bottom: var(--space-md);
            line-height: var(--line-height-relaxed);
            flex-grow: 1;
        }

        .service-features {
            list-style: none;
            text-align: left;
            margin-top: auto;
        }

        .service-features li {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            margin-bottom: var(--space-xs);
            color: var(--muted);
            font-size: var(--text-sm);
            line-height: var(--line-height-normal);
        }

        .service-features li i {
            color: var(--ok);
            font-size: var(--text-xs);
            min-width: 16px;
        }

        /* =========================================================
           ADAPTIVE PLATFORMS SECTION
        ========================================================= */
        .platforms {
            background: radial-gradient(ellipse at bottom right, rgba(98, 241, 255, 0.05), transparent 40%);
            container-type: inline-size;
        }

        /* Responsive Platform Grid */
        .platforms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
            gap: var(--space-md);
            align-items: stretch;
        }

        @container (min-width: 400px) {
            .platforms-grid {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            }
        }

        @container (min-width: 768px) {
            .platforms-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }

        @container (min-width: 1200px) {
            .platforms-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        .platform-card {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: clamp(120px, 15vw, 200px);
            aspect-ratio: 1;
            padding: var(--space-md);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            container-type: inline-size;
        }

        /* Omnirresponsive Images */
        .platform-card img {
            max-width: 80%;
            max-height: 70%;
            width: auto;
            height: auto;
            object-fit: contain;
            object-position: center;
            filter: grayscale(0.3) contrast(0.9);
            opacity: 0.8;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            /* Prevent layout shift */
            aspect-ratio: attr(width) / attr(height);
        }

        .platform-card:hover {
            transform: translateY(clamp(-3px, -1vw, -8px));
        }

        .platform-card:hover img {
            filter: grayscale(0) contrast(1);
            opacity: 1;
            transform: scale(1.05);
        }

        /* High DPI Image Support */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .platform-card img {
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }
        }

        /* =========================================================
           CASOS DE ESTUDIO MEJORADOS
        ========================================================= */
        .case-studies {
            background: radial-gradient(ellipse at top right, rgba(0, 255, 163, 0.05), transparent 40%);
        }

        .case-studies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .case-study-card {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius);
            height: 300px;
        }

        .case-study-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .case-study-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(10, 10, 10, 0.9));
            padding: 30px;
            transition: all 0.3s ease;
        }

        .case-study-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .case-study-description {
            color: var(--muted);
            margin-bottom: 15px;
            font-size: 14px;
        }

        .case-study-results {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .case-study-result {
            background: rgba(39, 224, 165, 0.1);
            color: var(--ok);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .case-study-card:hover .case-study-image {
            transform: scale(1.05);
        }

        .case-study-card:hover .case-study-overlay {
            background: linear-gradient(transparent, rgba(10, 10, 10, 0.95));
        }

        /* =========================================================
           TRANSFORM MARKETING SECTION
        ========================================================= */
        .transform-marketing {
            background: radial-gradient(ellipse at top right, rgba(0, 255, 163, 0.05), transparent 40%);
        }

        .step-container {
            margin-bottom: 80px;
            position: relative;
        }

        .step-header {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .step-number {
            min-width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--grad);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 800;
            color: #051018;
            flex-shrink: 0;
        }

        .step-info h3 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .step-info h3 span {
            background: var(--grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .step-info p {
            color: var(--muted);
            font-size: 16px;
        }

        .step-divider {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), transparent);
            margin: 0 20px;
            min-width: 100px;
        }

        .step-legend {
            flex-basis: 100%;
            margin-top: 20px;
        }

        .step-legend p {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.6;
        }

        /* Services Carousel */
        .services-carousel-wrapper {
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 40px;
            box-shadow: var(--shadow);
            overflow: hidden;
            width: 100%;
        }

        .services-tabs {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 15px;
            margin-bottom: 40px;
        }

        .service-tab {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: var(--muted);
        }

        .service-tab svg {
            fill: currentColor;
            transition: all 0.3s ease;
        }

        .service-tab p {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            margin: 0;
        }

        .service-tab:hover,
        .service-tab.active {
            background: rgba(98, 241, 255, 0.08);
            border-color: var(--accent);
            color: var(--accent);
            transform: translateY(-3px);
        }

        .service-content {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 40px;
            align-items: center;
        }

        .service-content.hidden {
            display: none;
        }

        .service-description h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .service-description p {
            color: var(--muted);
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .service-benefits {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .benefit-item i {
            color: var(--ok);
            font-size: 14px;
        }

        .benefit-item span {
            color: var(--muted);
            font-size: 14px;
        }

        .service-image {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            background: rgba(255, 255, 255, 0.02);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 300px;
        }

        .service-image img {
            width: 100%;
            height: auto;
            max-height: 300px;
            object-fit: contain;
            object-position: center;
            padding: 20px;
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0.9;
        }

        .service-image img:hover {
            transform: scale(1.02);
            opacity: 1;
        }

        /* Loading state for images */
        .service-image::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: loading 1s linear infinite;
            opacity: 0;
            pointer-events: none;
        }

        .service-image img[src=""] + ::before,
        .service-image img:not([src]) + ::before {
            opacity: 1;
        }

        @keyframes loading {
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Image placeholder styles */
        .image-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.02);
            border: 2px dashed rgba(255, 255, 255, 0.1);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Delivery Models */
        .model-accordion {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .model-item {
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .model-title {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .model-title svg {
            fill: var(--accent);
            flex-shrink: 0;
        }

        .model-title h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }

        .model-item:hover .model-title,
        .model-item.active .model-title {
            background: rgba(98, 241, 255, 0.05);
        }

        .model-content {
            padding: 0 25px 25px 25px;
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 30px;
            align-items: center;
        }

        .model-content.hidden {
            display: none;
        }

        .model-content p {
            color: var(--muted);
            line-height: 1.6;
            margin: 0;
        }

        .model-image {
            background: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            overflow: hidden;
        }

        .model-image img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: contain;
            object-position: center;
            padding: 15px;
            transition: transform 0.3s ease, opacity 0.3s ease;
            opacity: 0.9;
        }

        .model-image img:hover {
            transform: scale(1.02);
            opacity: 1;
        }

        /* Final CTA */
        .final-cta {
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 60px 40px;
            text-align: center;
            box-shadow: var(--shadow);
        }

        .cta-content h3 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 15px;
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .cta-content p {
            color: var(--muted);
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .step-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

            .step-divider {
                height: 2px;
                width: 100%;
                margin: 0;
            }

            .service-content,
            .model-content {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .services-tabs {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            .services-tabs {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }

            .service-tab {
                padding: 18px 12px;
            }

            .service-content {
                padding: 30px 20px;
                gap: 30px;
            }

            .service-image {
                min-height: 280px;
            }

            .service-image img {
                max-height: 260px;
                padding: 15px;
            }
        }

        @media (max-width: 768px) {
            .step-number {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }

            .step-info h3 {
                font-size: 22px;
            }

            .services-tabs {
                grid-template-columns: repeat(2, 1fr);
            }

            .service-tab {
                padding: 15px 8px;
            }

            .services-carousel-wrapper {
                padding: 20px;
            }

            .model-content {
                padding: 0 15px 20px 15px;
            }

            .final-cta {
                padding: 40px 20px;
            }

            .cta-content h3 {
                font-size: 24px;
            }

            .service-image {
                min-height: 250px;
            }

            .service-image img {
                max-height: 220px;
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .transform-marketing {
                padding: 40px 0;
            }

            .step-container {
                padding: 30px 15px;
                margin-bottom: 30px;
            }

            .step-header {
                gap: 15px;
                margin-bottom: 25px;
            }

            .step-number {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }

            .step-info h3 {
                font-size: 18px;
                line-height: 1.3;
            }

            .step-info p {
                font-size: 12px;
            }

            .step-legend p {
                font-size: 14px;
            }

            .services-tabs {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .service-tab {
                padding: 12px 6px;
                min-height: 80px;
            }

            .service-tab svg {
                width: 20px;
                height: 20px;
            }

            .service-tab p {
                font-size: 11px;
            }

            .service-content {
                gap: 20px;
                padding: 20px 15px;
            }

            .service-description h3 {
                font-size: 20px;
            }

            .service-description p {
                font-size: 14px;
            }

            .service-image {
                min-height: 200px;
            }

            .service-image img {
                max-height: 180px;
                padding: 10px;
            }

            .model-item {
                margin-bottom: 15px;
            }

            .model-title {
                padding: 15px;
            }

            .model-title h3 {
                font-size: 16px;
            }

            .model-content {
                padding: 0 15px 15px 15px;
                gap: 15px;
            }

            .model-image {
                min-height: 160px;
            }

            .model-image img {
                max-height: 140px;
                padding: 10px;
            }

            .model-content p {
                font-size: 14px;
            }

            .final-cta {
                padding: 30px 15px;
            }

            .cta-content h3 {
                font-size: 20px;
                margin-bottom: 15px;
            }

            .cta-content p {
                font-size: 14px;
                margin-bottom: 20px;
            }

            .btn {
                padding: 12px 20px;
                font-size: 14px;
            }
        }

        @media (max-width: 320px) {
            .logo img {
                height: 35px;
                max-width: 100px;
            }
            
            .services-tabs {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .service-tab {
                padding: 15px 10px;
                min-height: 70px;
            }

            .service-tab svg {
                width: 18px;
                height: 18px;
            }

            .step-info h3 {
                font-size: 16px;
            }

            .section-title {
                font-size: 24px;
            }

            .step-legend p {
                font-size: 13px;
            }

            .service-description h3 {
                font-size: 18px;
            }

            .service-image {
                min-height: 180px;
            }

            .service-image img {
                max-height: 160px;
                padding: 8px;
            }

            .model-title h3 {
                font-size: 14px;
            }

            .model-image {
                min-height: 140px;
            }

            .model-image img {
                max-height: 120px;
                padding: 8px;
            }

            .cta-content h3 {
                font-size: 18px;
            }
        }

        /* =========================================================
           TESTIMONIOS SECTION
        ========================================================= */
        .testimonials {
            background: radial-gradient(ellipse at center, rgba(123, 97, 255, 0.05), transparent 60%);
        }

        .testimonials-slider {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }

        .testimonials-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial {
            flex: 0 0 100%;
            padding: 40px;
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            text-align: center;
        }

        .testimonial-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px;
            border: 3px solid var(--accent);
        }

        .testimonial-text {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: var(--text);
            font-style: italic;
        }

        .testimonial-author {
            font-weight: 700;
            margin-bottom: 5px;
        }

        .testimonial-role {
            color: var(--muted);
            font-size: 14px;
        }

        .testimonial-rating {
            margin-top: 15px;
            color: #ffc107;
        }

        .testimonials-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

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

        .testimonial-dot.active {
            background: var(--accent);
            transform: scale(1.2);
        }

        /* =========================================================
           QUIÉNES SOMOS SECTION MEJORADA
        ========================================================= */
        .about {
            background: radial-gradient(ellipse at bottom left, rgba(0, 255, 163, 0.05), transparent 40%);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .about-content h3 {
            font-size: 32px;
            margin-bottom: 20px;
        }

        .about-content p {
            color: var(--muted);
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .about-list {
            list-style: none;
            margin-top: 20px;
        }

        .about-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            color: var(--muted);
        }

        .about-list li i {
            color: var(--ok);
        }

        .about-image {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

        .about-stat {
            text-align: center;
            padding: 20px;
            background: linear-gradient(145deg, #0c0c12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius);
        }

        .about-stat-number {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 5px;
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .about-stat-label {
            font-size: 14px;
            color: var(--muted);
        }

        /* =========================================================
           CONTACTO SECTION MEJORADA
        ========================================================= */
        .contact {
            background: radial-gradient(ellipse at top right, rgba(98, 241, 255, 0.05), transparent 40%),
                        radial-gradient(ellipse at bottom left, rgba(123, 97, 255, 0.05), transparent 40%);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .contact-method {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--grad);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #051018;
            font-size: 20px;
        }

        .contact-icon i {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
            font-weight: 900 !important;
        }

        .contact-icon .fab {
            font-weight: 400 !important;
        }

        .contact-details h4 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .contact-details p {
            color: var(--muted);
        }

        .contact-form {
            background: linear-gradient(145deg, #0d0d12, #0a0a0a);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: var(--shadow);
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-control {
            width: 100%;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text);
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent);
            background: rgba(255, 255, 255, 0.05);
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        /* =========================================================
           FOOTER MEJORADO
        ========================================================= */
        footer {
            background: #08080c;
            padding: 60px 0 30px;
            color: var(--muted);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-brand {
            grid-column: span 1;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .footer-logo img {
            height: 60px;
            width: auto;
            max-width: 200px;
            object-fit: contain;
        }

        .footer-text {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .footer-social {
            display: flex;
            gap: 15px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .social-link i {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
            font-weight: 900 !important;
            font-size: 16px;
        }

        .social-link .fab {
            font-weight: 400 !important;
        }

        .social-link:hover {
            background: var(--grad);
            color: #051018;
            transform: translateY(-3px);
        }

        .footer-links h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: var(--text);
        }

        .footer-links ul {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: var(--muted);
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--accent);
            padding-left: 5px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            padding-top: 30px;
            text-align: center;
            font-size: 14px;
        }

        /* =========================================================
           RESPONSIVIDAD
        ========================================================= */
        @media (max-width: 1024px) {
            .hero-content {
                gap: 40px;
            }
            
            .about-grid,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 10px 0;
            }
            
            .logo img {
                height: 45px;
                max-width: 150px;
            }
            
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background: var(--card);
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                padding: 80px 30px 30px;
                transition: right 0.3s ease;
                box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            .menu-toggle {
                display: flex;
            }
            
            .hero {
                padding: 130px 0 60px;
            }
            
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .hero-cta {
                justify-content: center;
            }
            
            .hero-stats {
                grid-template-columns: 1fr;
            }
            
            .hero-visual {
                height: 300px;
                margin-top: 40px;
            }
            
            .holographic-display {
                width: 200px;
                height: 200px;
            }
            
            .data-orbit {
                display: none;
            }
            
            .services-grid,
            .platforms-grid,
            .case-studies-grid {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 32px;
            }
            
            .testimonial {
                padding: 30px 20px;
            }
        }

        @media (max-width: 480px) {
            .logo img {
                height: 40px;
                max-width: 120px;
            }
            
            .btn {
                padding: 14px 25px;
                font-size: 14px;
            }
            
            .hero-title {
                font-size: 36px;
            }
            
            .hero-description {
                font-size: 16px;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
            }
            
            .form-actions {
                flex-direction: column;
            }
        }

        /* =========================================================
           ADVANCED UTILITY CLASSES & RESPONSIVE SYSTEM
        ========================================================= */
        
        /* Text and Background Utilities */
        .text-gradient {
            background: var(--grad-text);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Fluid Spacing System */
        .mt-xs { margin-top: var(--space-xs); }
        .mt-sm { margin-top: var(--space-sm); }
        .mt-md { margin-top: var(--space-md); }
        .mt-lg { margin-top: var(--space-lg); }
        .mt-xl { margin-top: var(--space-xl); }
        .mt-xxl { margin-top: var(--space-xxl); }

        .mb-xs { margin-bottom: var(--space-xs); }
        .mb-sm { margin-bottom: var(--space-sm); }
        .mb-md { margin-bottom: var(--space-md); }
        .mb-lg { margin-bottom: var(--space-lg); }
        .mb-xl { margin-bottom: var(--space-xl); }
        .mb-xxl { margin-bottom: var(--space-xxl); }

        .p-xs { padding: var(--space-xs); }
        .p-sm { padding: var(--space-sm); }
        .p-md { padding: var(--space-md); }
        .p-lg { padding: var(--space-lg); }
        .p-xl { padding: var(--space-xl); }

        .px-xs { padding-inline: var(--space-xs); }
        .px-sm { padding-inline: var(--space-sm); }
        .px-md { padding-inline: var(--space-md); }
        .px-lg { padding-inline: var(--space-lg); }

        .py-xs { padding-block: var(--space-xs); }
        .py-sm { padding-block: var(--space-sm); }
        .py-md { padding-block: var(--space-md); }
        .py-lg { padding-block: var(--space-lg); }

        /* Typography Utilities */
        .text-xs { font-size: var(--text-xs); }
        .text-sm { font-size: var(--text-sm); }
        .text-base { font-size: var(--text-base); }
        .text-lg { font-size: var(--text-lg); }
        .text-xl { font-size: var(--text-xl); }
        .text-2xl { font-size: var(--text-2xl); }
        .text-3xl { font-size: var(--text-3xl); }
        .text-4xl { font-size: var(--text-4xl); }
        .text-5xl { font-size: var(--text-5xl); }

        .font-light { font-weight: 300; }
        .font-normal { font-weight: 400; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }

        .leading-tight { line-height: var(--line-height-tight); }
        .leading-normal { line-height: var(--line-height-normal); }
        .leading-relaxed { line-height: var(--line-height-relaxed); }

        .tracking-tight { letter-spacing: var(--letter-spacing-tight); }
        .tracking-normal { letter-spacing: var(--letter-spacing-normal); }
        .tracking-wide { letter-spacing: var(--letter-spacing-wide); }

        /* Alignment Utilities */
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }

        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .items-end { align-items: flex-end; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-around { justify-content: space-around; }

        .grid { display: grid; }
        .gap-xs { gap: var(--space-xs); }
        .gap-sm { gap: var(--space-sm); }
        .gap-md { gap: var(--space-md); }
        .gap-lg { gap: var(--space-lg); }

        /* Responsive Grid Utilities */
        .grid-auto-fit-xs { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
        .grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
        .grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
        .grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); }

        /* Animation and Transition Utilities */
        .fade-in {
            opacity: 0;
            transform: translateY(clamp(20px, 5vw, 40px));
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .scale-on-hover {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .scale-on-hover:hover {
            transform: scale(1.02);
        }

        /* Visibility Utilities */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        @media (max-width: 640px) {
            .hidden-mobile { display: none !important; }
        }

        @media (min-width: 641px) and (max-width: 1024px) {
            .hidden-tablet { display: none !important; }
        }

        @media (min-width: 1025px) {
            .hidden-desktop { display: none !important; }
        }

        /* Performance and Loading States */
        .loading {
            position: relative;
            pointer-events: none;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: clamp(20px, 5vw, 40px);
            height: clamp(20px, 5vw, 40px);
            margin: calc(clamp(20px, 5vw, 40px) / -2) 0 0 calc(clamp(20px, 5vw, 40px) / -2);
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: loading 1s linear infinite;
        }

        @keyframes loading {
            to { transform: rotate(360deg); }
        }

        /* Aspect Ratio Utilities */
        .aspect-square { aspect-ratio: 1; }
        .aspect-video { aspect-ratio: 16/9; }
        .aspect-photo { aspect-ratio: 4/3; }
        .aspect-wide { aspect-ratio: 21/9; }

        /* Blur and Backdrop Effects */
        .backdrop-blur { backdrop-filter: blur(clamp(8px, 2vw, 20px)); }
        .backdrop-blur-sm { backdrop-filter: blur(clamp(4px, 1vw, 10px)); }
        .backdrop-blur-lg { backdrop-filter: blur(clamp(16px, 4vw, 40px)); }

        /* Focus and Accessibility */
        .focus-visible:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Skip to content link for screen readers */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--accent);
            color: var(--bg);
            padding: 8px;
            text-decoration: none;
            border-radius: var(--radius-sm);
            z-index: 9999;
            font-weight: 600;
        }

        .skip-link:focus {
            top: 6px;
        }

        /* Container Query Based Utilities */
        @container (max-width: 400px) {
            .text-responsive { font-size: var(--text-sm); }
            .p-responsive { padding: var(--space-xs); }
        }

        @container (min-width: 401px) and (max-width: 768px) {
            .text-responsive { font-size: var(--text-base); }
            .p-responsive { padding: var(--space-sm); }
        }

        @container (min-width: 769px) {
            .text-responsive { font-size: var(--text-lg); }
            .p-responsive { padding: var(--space-md); }
        }

        /* =========================================================
           EXTREME VIEWPORT OPTIMIZATIONS (320px to 8K+)
        ========================================================= */
        
        /* Ultra-small screens (320px and below) */
        @media (max-width: 320px) {
            :root {
                --space-xs: 0.25rem;
                --space-sm: 0.5rem;
                --space-md: 0.75rem;
                --space-lg: 1rem;
            }
            
            .container {
                padding-inline: var(--space-xs);
            }
            
            .btn {
                padding: var(--space-xs) var(--space-sm);
                font-size: clamp(12px, 3vw, 14px);
            }
            
            .hero-title {
                font-size: clamp(24px, 8vw, 32px);
            }
        }

        /* Foldable and Dual-Screen Devices */
        @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
            .hero-content {
                grid-template-columns: 1fr 1fr;
                gap: var(--space-lg);
            }
            
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Ultra-wide screens (21:9 and wider) */
        @media (min-aspect-ratio: 21/9) {
            .container {
                max-width: 1400px;
            }
            
            .hero-content {
                grid-template-columns: 1.5fr 1fr;
                gap: var(--space-xxl);
            }
        }

        /* 4K and 8K+ displays */
        @media (min-width: 2560px) {
            :root {
                --text-xs: 1rem;
                --text-sm: 1.125rem;
                --text-base: 1.25rem;
                --text-lg: 1.5rem;
                --text-xl: 1.75rem;
                --text-2xl: 2.25rem;
                --text-3xl: 3rem;
                --text-4xl: 4rem;
                --text-5xl: 6rem;
            }
            
            .container {
                max-width: 1800px;
            }
        }

        @media (min-width: 3840px) {
            :root {
                --space-xl: clamp(6rem, 8vw, 12rem);
                --space-xxl: clamp(8rem, 12vw, 16rem);
            }
            
            .container {
                max-width: 2400px;
            }
        }

        /* Dynamic Font Scaling for Large Displays */
        @media (min-width: 1920px) {
            html {
                font-size: clamp(16px, 1vw, 24px);
            }
        }

        /* Portrait Orientation Optimizations */
        @media (orientation: portrait) and (max-width: 768px) {
            .hero-visual {
                aspect-ratio: 1;
                min-height: 300px;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .platforms-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Landscape Mobile Optimizations */
        @media (orientation: landscape) and (max-height: 480px) {
            .hero {
                padding-block: var(--space-lg);
            }
            
            .hero-content {
                grid-template-columns: 1.2fr 0.8fr;
                gap: var(--space-md);
            }
            
            .hero-visual {
                min-height: 200px;
            }
        }

        /* Performance-based styling */
        .low-performance * {
            animation-duration: 0.1s !important;
            transition-duration: 0.1s !important;
        }

        .low-performance .holographic-display {
            animation-duration: 6s;
        }

        .low-performance .data-orbit {
            animation-duration: 60s !important;
        }

        /* Performance otimizada mas mantendo funcionalidades */
        .low-memory img {
            image-rendering: optimizeSpeed;
        }

        /* Connection-based optimizations - reduzindo apenas animações */
        .slow-connection .particles-canvas {
            opacity: 0.5;
        }

        .slow-connection .services-grid {
            grid-template-columns: 1fr;
        }

        /* Otimizações específicas para órbitas em dispositivos móveis */
        @media (max-width: 768px) {
            /* Pausar animações se o dispositivo estiver com bateria baixa */
            @media (prefers-reduced-motion: reduce), (update: slow) {
                .alien-orbit,
                .orbit-particle,
                .holographic-display {
                    animation-play-state: paused;
                }
            }
            
            /* Reduzir qualidade visual em conexões lentas */
            @media (prefers-reduced-data: reduce) {
                .alien-orbit {
                    border-width: 1px;
                    opacity: 0.5;
                }
                
                .orbit-particle {
                    display: none;
                }
                
                .holographic-display {
                    background: rgba(0, 255, 163, 0.1);
                    box-shadow: none;
                    animation: none;
                }
            }
        }

        /* Detectar dispositivos com pouca memoria/performance */
        @media (max-width: 768px) and (max-resolution: 150dpi) {
            .orbit-particle {
                animation-duration: 5s;
                opacity: 0.6;
            }
            
            .alien-orbit {
                animation-timing-function: ease-out;
            }
        }

        /* Melhorias para dispositivos com baixa performance */
        .low-performance .alien-orbit {
            animation-duration: 45s !important;
            filter: none !important;
        }

        .low-performance .orbit-particle {
            animation-duration: 6s !important;
            box-shadow: none !important;
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :root {
                --bg: #000000;
                --text: #ffffff;
                --accent: #00ffff;
                --muted: #cccccc;
            }
            
            .card {
                border: 2px solid var(--text);
            }
            
            .btn {
                border: 2px solid currentColor;
            }
        }

        /* Print styles */
        @media print {
            * {
                background: white !important;
                color: black !important;
                box-shadow: none !important;
            }
            
            .nav-menu,
            .menu-toggle,
            .holographic-display,
            .particles-canvas,
            .hero-visual {
                display: none !important;
            }
            
            .hero-content {
                grid-template-columns: 1fr;
            }
            
            a::after {
                content: " (" attr(href) ")";
            }
        }

        /* Correção Específica para Ícones Font Awesome */
        .footer-social .social-link i {
            font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", "FontAwesome" !important;
            font-weight: 400 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            display: inline-block !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            font-size: 16px !important;
        }

        .contact-icon i {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
            font-weight: 900 !important;
            font-style: normal !important;
            font-variant: normal !important;
            text-rendering: auto !important;
            line-height: 1 !important;
            display: inline-block !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            font-size: 20px !important;
        }

        .contact-icon .fab {
            font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
            font-weight: 400 !important;
        }

        /* Fallback para navegadores que não carregam Font Awesome */
        .social-link i::before {
            content: attr(data-icon) !important;
        }

        /* Força o carregamento correto dos ícones Font Awesome */
        @font-face {
            font-family: 'Font Awesome 6 Brands';
            font-display: swap;
            src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2') format('woff2'),
                 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff') format('woff');
        }

        @font-face {
            font-family: 'Font Awesome 6 Free';
            font-display: swap;
            src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2'),
                 url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff') format('woff');
        }

        /* Sistema de fallback para ícones específicos */
        .fa-whatsapp::before { content: "\f232" !important; }
        .fa-chart-line::before { content: "\f201" !important; }
        .fa-eye::before { content: "\f06e" !important; }
        .fa-facebook-f::before { content: "\f39e" !important; }
        .fa-instagram::before { content: "\f16d" !important; }
        .fa-linkedin-in::before { content: "\f0e1" !important; }
        .fa-youtube::before { content: "\f167" !important; }
        .fa-paper-plane::before { content: "\f1d8" !important; }
        .fa-phone::before { content: "\f095" !important; }
        .fa-envelope::before { content: "\f0e0" !important; }
        .fa-map-marker-alt::before { content: "\f3c5" !important; }