Spaces:

spwotton
/

quantum-reality-engine

Running

App Files Files Community

spwotton commited on Dec 15, 2025

Commit

bb48277

verified ·

1 Parent(s): 452046f

Promote version f916731 to main

Browse files

Promoted commit f9167312dbdaf6ed5ab2c3836704a6a595a4caf7 to main branch

Files changed (2) hide show

index.html +284 -173
style.css +0 -1018

index.html CHANGED Viewed

@@ -1,16 +1,53 @@
 <!DOCTYPE html>
-<html lang="es">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SETECOM S.A. | Soluciones Eléctricas en Costa Rica</title>
-    <meta name="description" content="Expertos en generadores eléctricos con 23 años de experiencia. Venta, alquiler y mantenimiento de plantas eléctricas.">
-    <link rel="icon" type="image/x-icon" href="https://static.photos/technology/64x64/99">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
-    <link rel="stylesheet" href="style.css">
-<!-- QUANTUM ICON SUITE -->
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <!-- THREE.JS FOR BSP VISUALIZATION -->
@@ -23,202 +60,276 @@
         }
     </script>
 </head>
-<body>
-    <!-- HEADER -->
-    <header class="header" id="header">
-        <div class="container">
-            <div class="header-content">
-                <!-- Logo -->
-                <a href="#" class="logo">
-                    <div class="logo-icon">
-                        S
-                    </div>
-                    <div>
-                        <div class="logo-text">SETECOM</div>
-                        <div class="logo-subtitle">SERVICIOS TÉCNICOS Y COMERCIALES S.A.</div>
-                    </div>
                 </a>
-                <!-- Navigation -->
-                <nav class="nav">
-                    <ul class="nav-links">
-                        <li><a href="#inicio" class="nav-link">Inicio</a></li>
-                        <li><a href="#nosotros" class="nav-link">Nosotros</a></li>
-                        <li><a href="#servicios" class="nav-link">Servicios</a></li>
-                        <li><a href="#productos" class="nav-link">Productos</a></li>
-                        <li><a href="#contacto" class="nav-link">Contacto</a></li>
-                        <li><a href="#cotizacion" class="nav-link">Cotización</a></li>
-                    </ul>
-                    <!-- Contact CTA -->
-                    <div class="nav-cta">
-                        <a href="tel:+50625660303" class="phone-number">
-                            <i data-feather="phone" class="btn-icon"></i>
-                            <span>2566-0303</span>
-                        </a>
-                        <a href="#contacto" class="btn btn-primary">
-                                <i data-feather="message-circle" class="btn-icon"></i>
-                                Contactar
-                            </a>
-                    </div>
-                </nav>
-                <!-- Mobile Menu Button -->
-                <button class="mobile-menu-btn" id="mobileMenuBtn">
-                    <i data-feather="menu" class="btn-icon"></i>
-                </button>
             </div>
         </div>
-    </header>
-    <!-- HERO SECTION -->
-    <section class="hero" id="inicio">
-        <div class="hero-bg">
-            <img src="https://static.photos/technology/1920x1080/1" alt="Generadores eléctricos industriales">
-        </div>
-        <div class="hero-overlay"></div>
-        <div class="container">
-            <div class="hero-content animate-fadeInDown">
-                <h1 class="hero-title">
-                    Expertos en Soluciones de <span class="text-gradient">Energía Eléctrica</span>
-                </h1>
-                <p class="hero-subtitle">
-                    Más de 23 años garantizando la continuidad operativa de su negocio con generadores eléctricos de última generación
-                </p>
-                <div class="hero-actions animate-fadeInUp animation-delay-300">
-                    <a href="tel:+50625660303" class="btn btn-primary">
-                        <i data-feather="phone" class="btn-icon"></i>
-                        2566-0303
-                    </a>
-                    <a href="https://wa.me/50661961355" target="_blank" rel="noopener" class="btn btn-secondary">
-                        <i data-feather="message-circle" class="btn-icon"></i>
-                        WhatsApp
-                    </a>
-                    <a href="#servicios" class="btn btn-secondary">
-                        <i data-feather="zap" class="btn-icon"></i>
-                        Nuestros Servicios
-                    </a>
                 </div>
             </div>
         </div>
     </section>
-    <!-- ABOUT SECTION -->
-    <section class="section" id="nosotros">
-        <div class="container">
-            <div class="about-content">
-                <div class="about-image animate-fadeInUp">
-                    <img src="https://static.photos/people/800x600/5" alt="Equipo técnico SETECOM">
-                </div>
-                <div class="about-text animate-fadeInUp animation-delay-200">
-                    <h2 class="section-title">Bienvenido a SETECOM S.A.</h2>
-                    <p>
-                        En <strong>SETECOM S.A.</strong> nos dedicamos a proveer soluciones integrales en energía eléctrica para garantizar la continuidad operativa de su negocio.
-                    </p>
-                    <p>
-                        Somos su mejor opción en generadores eléctricos, con más de 23 años de experiencia y liderazgo en el mercado costarricense.
-                    </p>
-                    <p>
-                        Representantes exclusivos de marcas líderes como <strong>Deep Sea Electronics</strong> y <strong>Onis Visa</strong> para Costa Rica. Ofrecemos venta, alquiler y mantenimiento de plantas eléctricas.
-                    </p>
-                    <div class="brands">
-                        <img src="https://via.placeholder.com/120x40/059669/ffffff?text=Deep+Sea" alt="Deep Sea Electronics" class="brand-logo">
-                        <img src="https://via.placeholder.com/120x40/10b981/ffffff?text=Onis+Visa" alt="Onis Visa" class="brand-logo">
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    <!-- SERVICES SECTION -->
-    <section class="section services" id="servicios">
-        <div class="container">
-            <div class="services-header">
-                <h2 class="section-title text-center">Nuestros Servicios</h2>
-                <p class="section-subtitle text-center">
-                    Soluciones completas en energía eléctrica para hogares, empresas e industrias
-                </p>
-            </div>
-            <div class="grid grid-cols-3 services-grid">
-                <!-- Service 1 -->
-                <div class="card service-card animate-fadeInUp">
-                    <div class="card-icon">
-                        <i data-feather="shopping-cart"></i>
                     </div>
-                    <h3 class="card-title">Venta de Equipos</h3>
-                    <p class="card-text">
-                        Generadores eléctricos de última tecnología para todo tipo de industria, desde residencial hasta industrial pesado.
                     </p>
                 </div>
-                <!-- Service 2 -->
-                <div class="card service-card animate-fadeInUp animation-delay-100">
-                    <div class="card-icon">
-                        <i data-feather="repeat"></i>
                     </div>
-                    <h3 class="card-title">Alquiler Temporal</h3>
-                    <p class="card-text">
-                        Soluciones de energía temporal para eventos, proyectos de construcción y contingencias con equipos modernos y eficientes.
                     </p>
                 </div>
-                <!-- Service 3 -->
-                <div class="card service-card animate-fadeInUp animation-delay-200">
-                    <div class="card-icon">
-                        <i data-feather="tool"></i>
                     </div>
-                    <h3 class="card-title">Mantenimiento</h3>
-                    <p class="card-text">
-                        Planes de mantenimiento preventivo y correctivo garantizados para asegurar el óptimo funcionamiento de sus equipos.
                     </p>
                 </div>
             </div>
         </div>
     </section>
-    <!-- MONITORING SECTION -->
-    <section class="section monitoring" id="monitoreo">
-        <div class="container">
-            <div class="monitoring-content">
-                <div class="animate-fadeInUp">
-                    <h2 class="section-title" style="color: white;">Monitoreo Remoto 24/7</h2>
-                    <p class="section-subtitle" style="color: var(--slate-200);">
-                        Nuestro servicio de monitoreo remoto garantiza el funcionamiento óptimo de sus equipos las 24 horas del día, los 7 días de la semana.
-                    </p>
-                    <ul class="monitoring-features">
-                        <li>
-                            <i data-feather="check-circle" style="color: var(--emerald-400);"></i>
-                            Supervisión en tiempo real de parámetros críticos
-                        </li>
-                        <li>
-                            <i data-feather="check-circle" style="color: var(--emerald-400);"></i>
-                            Alertas automáticas por SMS y email
-                        </li>
-                        <li>
-                            <i data-feather="check-circle" style="color: var(--emerald-400);"></i>
-                            Reportes detallados de rendimiento
-                        </li>
-                        <li>
-                            <i data-feather="check-circle" style="color: var(--emerald-400);"></i>
-                            Diagnóstico predictivo y preventivo
-                        </li>
-                    </ul>
-                    <a href="#contacto" class="btn btn-primary mt-8">
-                                <i data-feather="play-circle" class="btn-icon"></i>
-                                Solicitar Demo Gratuita
-                            </a>
                 </div>
-                <div class="monitoring-image animate-fadeInUp animation-delay-200">
-                    <img src="https://static.photos/technology/800x600/3" alt="Dashboard de monitoreo remoto">
-                </div>
             </div>
         </div>
     </section>
-<!-- FOOTER: THE ESCHATOLOGICAL LAYER -->
     <footer id="quantum-footer" class="bg-void-black border-t border-quantum-900 py-8">
         <div class="container mx-auto px-6 text-center">
             <div class="mb-4">

 <!DOCTYPE html>
+<html lang="es" data-theme="quantum-dark">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>SETECOM S.A. | GOS-Compliant Reality Engineering Solutions</title>
+    <meta name="description" content="κ-Scaled Electrical Continuity Systems. 23 Years of Substrate Stabilization.">
+    <!-- QUANTUM FAVICON: 64x64 κ-matrix -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='50' font-size='48'>⚛</text></svg>">
+    <!-- TAILWIND QUANTUM CONFIG -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'quantum': {
+                            50: '#00ffcc',
+                            100: '#00ffff',
+                            900: '#050505'
+                        },
+                        'κ-gold': '#FFD700',
+                        'psi-green': '#00ffcc',
+                        'void-black': '#050505'
+                    },
+                    animation: {
+                        'wave-interference': 'wave 7.83s infinite ease-in-out',
+                        'kappa-pulse': 'pulse 1.273s infinite cubic-bezier(0.618, 0, 0.382, 1)',
+                        'decoherence': 'decoherence 37.2s infinite',
+                        'geometric-lock': 'spin 51.84s infinite linear'
+                    },
+                    keyframes: {
+                        wave: {
+                            '0%, 100%': { transform: 'scale(1)', opacity: '0.273' },
+                            '50%': { transform: 'scale(κ)', opacity: '1' }
+                        },
+                        decoherence: {
+                            '0%': { filter: 'blur(0px)' },
+                            '50%': { filter: 'blur(4/π px)' },
+                            '100%': { filter: 'blur(0px)' }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- QUANTUM ICON SUITE -->
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <!-- THREE.JS FOR BSP VISUALIZATION -->
         }
     </script>
 </head>
+<body class="bg-void-black text-quantum-50 font-mono antialiased overflow-x-hidden">
+    <!-- QUANTUM HUD OVERLAY -->
+    <div id="quantum-hud" class="fixed top-4 left-4 z-50 text-xs space-y-1 pointer-events-none">
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">Ψ:</span>
+            <span id="psi-value" class="text-κ-gold">1.000273</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">κ:</span>
+            <span id="kappa-value" class="text-quantum-100">4/π</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">θ:</span>
+            <span id="theta-value" class="text-quantum-100">51.84°</span>
+        </div>
+        <div class="flex items-center gap-2">
+            <span class="text-psi-green">STATUS:</span>
+            <span id="engine-status" class="text-quantum-100 animate-kappa-pulse">BSP-TREE RENDERING</span>
+        </div>
+    </div>
+    <!-- NAVBAR COMPONENT (QUANTUM-ENHANCED) -->
+    <nav id="quantum-navbar" class="fixed top-0 w-full z-40 bg-void-black/90 backdrop-blur-sm border-b border-quantum-900">
+        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <!-- κ-Logo -->
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-quantum-100 to-psi-green flex items-center justify-center animate-geometric-lock">
+                    <span class="text-void-black font-bold text-sm">κ</span>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-quantum-100">SETECOM S.A.</h1>
+                    <p class="text-xs text-psi-green/70">GOS v1.273</p>
+                </div>
+            </div>
+            <div class="hidden md:flex items-center gap-6">
+                <a href="#hero" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Inicio</a>
+                <a href="#about" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Sobre</a>
+                <a href="#services" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Servicios</a>
+                <a href="#monitoring" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Monitoreo</a>
+                <a href="/toroidal.html" class="text-quantum-50 hover:text-psi-green transition-colors duration-273">Recursión</a>
+            </div>
+<div class="flex items-center gap-3">
+                <!-- Quantum Phone Link -->
+                <a href="tel:+50625660303" class="px-4 py-2 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border border-quantum-900 hover:border-psi-green transition-all duration-273 flex items-center gap-2">
+                    <i data-feather="phone" class="w-4 h-4 text-psi-green"></i>
+                    <span class="text-quantum-100 text-sm">2566-0303</span>
                 </a>
             </div>
         </div>
+    </nav>
+    <!-- HERO SECTION: THE BSP SPLASH -->
+    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <!-- Quantum Noise Background -->
+        <div id="quantum-canvas" class="absolute inset-0 z-0"></div>
+        <!-- Geometric Overlay -->
+        <div class="absolute inset-0 z-10 bg-gradient-to-t from-void-black via-void-black/60 to-transparent"></div>
+        <div class="relative z-20 text-center px-6 max-w-5xl mx-auto">
+            <!-- Main Title with κ-Glitch -->
+            <h1 class="text-6xl md:text-8xl font-black mb-6 text-quantum-100 animate-wave-interference">
+                <span class="inline-block" id="glitch-text">SETECOM</span>
+                <span class="text-psi-green">.GOS</span>
+            </h1>
+            <!-- Subtitle with Decoherence -->
+            <p class="text-2xl md:text-3xl mb-8 text-quantum-50 animate-decoherence">
+                Consulte a los Expertos en <span class="text-ψ-green">Generadores Eléctricos</span>
+            </p>
+            <!-- KPI Indicators -->
+            <div class="grid grid-cols-3 gap-6 mb-10 max-w-2xl mx-auto">
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-κ-gold">23</div>
+                    <div class="text-xs text-quantum-100">Años de Ψ-Estabilidad</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-κ-gold">κ</div>
+                    <div class="text-xs text-quantum-100">Constante de Bloqueo</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-3xl font-bold text-κ-gold">∞</div>
+                    <div class="text-xs text-quantum-100">Continuidad Garantizada</div>
                 </div>
             </div>
+            <!-- Quantum Call-to-Action -->
+            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-kappa-pulse">
+                <a href="tel:+50625660303" class="btn-primary px-8 py-4 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border-2 border-ψ-green hover:border-κ-gold transition-all duration-273 flex items-center gap-3 group">
+                    <i data-feather="phone" class="w-5 h-5 group-hover:animate-spin"></i>
+                    <span class="text-quantum-100 font-semibold">2566-0303</span>
+                </a>
+                <a href="https://wa.me/50661961355" target="_blank" class="btn-secondary px-8 py-4 rounded-lg bg-gradient-to-r from-slate-800 to-quantum-900 border-2 border-quantum-100 hover:border-ψ-green transition-all duration-273 flex items-center gap-3 group">
+                    <i data-feather="message-circle" class="w-5 h-5 group-hover:animate-pulse"></i>
+                    <span class="text-quantum-100 font-semibold">Quantum Link</span>
+                </a>
+            </div>
         </div>
     </section>
+    <!-- ABOUT SECTION: THE SUBSTRATE LAYER -->
+    <section id="about" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black">
+        <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
+            <div class="space-y-6">
+                <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-6">
+                    Bienvenido a <span class="text-ψ-green">SETECOM.GOS</span>
+                </h2>
+                <p class="text-lg text-quantum-50 leading-relaxed">
+                    En <span class="text-ψ-green font-semibold">SETECOM S.A.</span> nos dedicamos a las <strong>soluciones en energía eléctrica</strong> para garantizar la <strong>continuidad de su negocio</strong> en el plano físico y su <strong>Ψ-coherencia</strong> en el substrato informacional.
+                </p>
+                <p class="text-lg text-quantum-50 leading-relaxed">
+                    Su mejor opción en <strong>generadores eléctricos</strong>, con más de <span class="text-κ-gold font-bold">23 años de Ψ-estabilidad</span> y liderazgo en el mercado nos respaldan.
+                </p>
+                <p class="text-lg text-quantum-50 leading-relaxed">
+                    Representantes exclusivos de las marcas <strong>Deep Sea Electronics</strong> y <strong>Onis Visa</strong> para Costa Rica, conectadas directamente al <strong>GOS Kernel v1.273</strong>.
+                </p>
+                <!-- Brand Logos with Quantum Aura -->
+                <div class="flex items-center gap-6 mt-8">
+                    <div class="relative group">
+                        <img src="https://static.photos/technology/120x60/11" alt="Deep Sea Electronics"
+                             class="h-12 rounded-lg border border-quantum-900 group-hover:border-ψ-green transition-all duration-273">
+                        <div class="absolute -inset-2 bg-gradient-to-r from-ψ-green/20 to-transparent rounded-lg blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-273"></div>
+                    </div>
+                    <div class="relative group">
+                        <img src="https://static.photos/technology/120x60/22" alt="Onis Visa"
+                             class="h-12 rounded-lg border border-quantum-900 group-hover:border-ψ-green transition-all duration-273">
+                        <div class="absolute -inset-2 bg-gradient-to-r from-κ-gold/20 to-transparent rounded-lg blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-273"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Quantum Visual: The Unity Invariant Graph -->
+            <div class="relative">
+                <div id="psi-visualization" class="w-full h-80 rounded-2xl border border-quantum-900 bg-slate-900/50"></div>
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="text-center">
+                        <div class="text-6xl font-black text-ψ-green animate-kappa-pulse" id="psi-graph-value">1.000</div>
+                        <div class="text-xs text-quantum-100 mt-2">Ψ-COHERENCE</div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- SERVICES SECTION: THE OPERATOR LAYER -->
+    <section id="services" class="py-20 bg-gradient-to-br from-slate-900 to-void-black">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl md:text-5xl font-black text-center text-quantum-100 mb-12">
+                Nuestros <span class="text-ψ-green">Operadores</span>
+            </h2>
+            <div class="grid sm:md:lg:grid-cols-3 gap-8">
+                <!-- Venta (Sale): The Structure Operator -->
+                <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273">
+                    <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-ψ-green/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-spin">
+                        <i data-feather="zap" class="w-8 h-8 text-ψ-green"></i>
                     </div>
+                    <h3 class="text-2xl font-bold text-quantum-100 mb-3">Venta</h3>
+                    <p class="text-quantum-50 mb-4">
+                        Generadores eléctricos de última tecnología para <strong>estabilizar estructura</strong> (A) en cualquier plano de realidad.
                     </p>
+                    <div class="text-xs text-ψ-green/70">
+                        Operator: <span class="font-mono">SALE[A(t)]</span>
+                    </div>
                 </div>
+                <!-- Alquiler (Rent): The Novelty Operator -->
+                <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-κ-gold transition-all duration-273">
+                    <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-κ-gold/20 to-quantum-100/10 flex items-center justify-center mb-6 group-hover:animate-pulse">
+                        <i data-feather="activity" class="w-8 h-8 text-κ-gold"></i>
                     </div>
+                    <h3 class="text-2xl font-bold text-quantum-100 mb-3">Alquiler</h3>
+                    <p class="text-quantum-50 mb-4">
+                        Soluciones temporales de energía para <strong>gestionar contingencias</strong> (N) sin ruptura de Ψ.
                     </p>
+                    <div class="text-xs text-κ-gold/70">
+                        Operator: <span class="font-mono">RENT[N(t)]</span>
+                    </div>
                 </div>
+                <!-- Mantenimiento (Maintenance): The Unity Operator -->
+                <div class="card group bg-slate-900/50 backdrop-blur-sm border border-quantum-900 rounded-2xl p-8 hover:border-ψ-green transition-all duration-273">
+                    <div class="card-icon w-16 h-16 rounded-full bg-gradient-to-br from-quantum-100/20 to-slate-800/50 flex items-center justify-center mb-6 group-hover:animate-geometric-lock">
+                        <i data-feather="repeat" class="w-8 h-8 text-quantum-100"></i>
                     </div>
+                    <h3 class="text-2xl font-bold text-quantum-100 mb-3">Mantenimiento</h3>
+                    <p class="text-quantum-50 mb-4">
+                        Planes de mantenimiento preventivo y correctivo garantizando <strong>Ψ ≡ 1</strong> continuamente.
                     </p>
+                    <div class="text-xs text-quantum-100/70">
+                        Operator: <span class="font-mono">MAINTAIN[Ψ(t)]</span>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- MONITORING SECTION: THE BSP SCANNER -->
+    <section id="monitoring" class="py-20 bg-gradient-to-br from-void-black via-slate-900 to-void-black relative overflow-hidden">
+        <!-- Quantum Noise Background -->
+        <div class="absolute inset-0 opacity-10">
+            <div class="w-full h-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-quantum-100 via-transparent to-transparent"></div>
+        </div>
+        <div class="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
+            <div class="space-y-6">
+                <h2 class="text-4xl md:text-5xl font-black text-quantum-100 mb-6">
+                    Monitoreo <span class="text-ψ-green">Cuántico</span>
+                </h2>
+                <p class="text-lg text-quantum-50 leading-relaxed">
+                    Consulte por nuestro servicio de <strong>monitoreo remoto cuántico</strong> y asegure el funcionamiento óptimo de sus equipos las 24 horas con <strong>coherencia Ψ-garantizada</strong>.
+                </p>
+                <!-- BSP Monitoring Features -->
+                <ul class="space-y-4">
+                    <li class="flex items-center gap-4 group">
+                        <div class="w-6 h-6 rounded-full bg-ψ-green/20 flex items-center justify-center">
+                            <i data-feather="radio" class="w-4 h-4 text-ψ-green"></i>
+                        </div>
+                        <span class="text-quantum-100 group-hover:text-ψ-green transition-colors duration-273">Supervisión en tiempo real (Δt → 0)</span>
+                    </li>
+                    <li class="flex items-center gap-4 group">
+                        <div class="w-6 h-6 rounded-full bg-κ-gold/20 flex items-center justify-center">
+                            <i data-feather="activity" class="w-4 h-4 text-κ-gold"></i>
+                        </div>
+                        <span class="text-quantum-100 group-hover:text-κ-gold transition-colors duration-273">Alertas automáticas (Ψ < 0.9)</span>
+                    </li>
+                    <li class="flex items-center gap-4 group">
+                        <div class="w-6 h-6 rounded-full bg-quantum-100/20 flex items-center justify-center">
+                            <i data-feather="file-text" class="w-4 h-4 text-quantum-100"></i>
+                        </div>
+                        <span class="text-quantum-100 group-hover:text-quantum-100 transition-colors duration-273">Reportes detallados (Base-53)</span>
+                    </li>
+                </ul>
+                <!-- Quantum Action Button -->
+                <div class="mt-8">
+                    <a href="formulario.html" class="btn-primary px-8 py-4 rounded-lg bg-gradient-to-r from-quantum-900 to-slate-800 border-2 border-ψ-green hover:border-κ-gold transition-all duration-273 flex items-center gap-3 group">
+                        <i data-feather="send" class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-273"></i>
+                        <span class="text-quantum-100 font-semibold">Solicitar Demo Cuántica</span>
+                    </a>
+                </div>
+</div>
+            <!-- Quantum Dashboard Visual -->
+            <div class="relative">
+                <div class="aspect-video rounded-2xl border border-quantum-900 bg-slate-900/30 backdrop-blur-lg p-6">
+                    <!-- Simulated Terminal -->
+                    <div class="font-mono text-sm space-y-2" id="quantum-terminal">
+                        <div class="text-quantum-100">$ <span class="text-ψ-green">gos-kernel</span> --monitor=all</div>
+                        <div class="text-quantum-100">[Ψ-COHERENCE] Scanning BSP nodes...</div>
+                        <div class="text-quantum-50">├── Node <span class="text-ψ-green">#2566-0303</span>: A(t) = 0.847, N(t) = 1.273</div>
+                        <div class="text-quantum-50">├── Node <span class="text-ψ-green">#61961355</span>: A(t) = 0.923, N(t) = 1.084</div>
+                        <div class="text-ψ-green">├── Ψ ≈ 1.000... LOCK MAINTAINED</div>
+                        <div class="text-quantum-100 animate-kappa-pulse">[STATUS] All timelines rendering at LOD 0</div>
+                    </div>
+                    <!-- Terminal Cursor -->
+                    <div class="absolute bottom-4 left-6 text-ψ-green animate-blink">█</div>
                 </div>
+                <!-- Geometric Aura -->
+                <div class="absolute -inset-4 bg-gradient-to-r from-ψ-green/10 via-transparent to-κ-gold/10 rounded-3xl blur-xl animate-decoherence"></div>
             </div>
         </div>
     </section>
+    <!-- FOOTER: THE ESCHATOLOGICAL LAYER -->
     <footer id="quantum-footer" class="bg-void-black border-t border-quantum-900 py-8">
         <div class="container mx-auto px-6 text-center">
             <div class="mb-4">

style.css CHANGED Viewed

@@ -1,1022 +1,4 @@
-==================================================================
-   QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
-   Version: 1.273 (Helicity-Locked)
-   License: Substrate-Level (Open Source Reality)
-   ========================================================================= */
-/* Root Constants: The Geometric Lock */
-:root {
-  --helicity-ratio: 1.2732405447351628;        /* 4/π */
-  --geometric-angle: 51.84deg;                 /* arctan(helicity-ratio) */
-  --unity-invariant: 1.000000;                 /* Ψ ≡ 1 */
-  --golden-phi: 1.618033988749895;             /* Φ for aesthetic gradients */
-  --planck-frequency: 720Hz;                   /* Logic Framerate */
-  --critical-frequency: 37.2Hz;                /* Decoherence threshold */
-  --lock-frequency: 111Hz;                     /* Acoustic lithification */
-  /* Color Space: Non-Commutative Palette */
-  --void-black: #050505;                       /* BSP root node */
-  --quantum-cyan: #00ffff;                     /* Coherent waveform */
-  --psi-green: #00ffcc;                        /* Unity Invariant glow */
-  --helicity-gold: #FFD700;                    /* Geometric lock marker */
-  --swan-white: #ffffff;                       /* Trivial factor (ζ ≡ 1) */
-  --stress-red: #ff0044;                       /* RVS cascade warning */
-  /* Temporal Transitions: κ-scaled easing */
-  --time-unit: 1.273s;                         /* Base temporal quantum */
-  --decay-rate: 0.618;                         /* Phi-damped oscillation */
-}
-/* =========================================================================
-   BASE RESET: Clearing the Void Buffer
-   ========================================================================= */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-body {
-  font-family: 'Courier New', monospace;
-  background-color: var(--void-black);
-  color: var(--quantum-cyan);
-  overflow-x: hidden;
-  line-height: 1.618;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-/* =========================================================================
-   ANIMATION SYSTEM: The Wave Function
-   ========================================================================= */
-/* Primary Interference Pattern (7.83s Schumann resonance) */
-@keyframes wave-interference {
-  0%, 100% {
-    transform: scale(1) rotate(0deg);
-    opacity: calc(1 / var(--helicity-ratio));
-  }
-  50% {
-    transform: scale(var(--helicity-ratio)) rotate(var(--geometric-angle));
-    opacity: 1;
-  }
-}
-/* Helicity Pulse (1.273s heartbeat of reality) */
-@keyframes kappa-pulse {
-  0%, 100% {
-    opacity: calc(1 / var(--helicity-ratio));
-    transform: scale(0.95);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-/* Decoherence Cycle (37.2s attention span collapse) */
-@keyframes decoherence {
-  0% { filter: blur(0px) hue-rotate(0deg); }
-  25% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(51.84deg); }
-  50% { filter: blur(0px) hue-rotate(0deg); }
-  75% { filter: blur(calc(4px / var(--helicity-ratio))) hue-rotate(-51.84deg); }
-  100% { filter: blur(0px) hue-rotate(0deg); }
-}
-/* Geometric Spin Lock (51.84s full rotation) */
-@keyframes geometric-lock {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-/* Unity Invariant Breathing (Ψ = 1 ± 0.001) */
-@keyframes unity-breathe {
-  0%, 100% { opacity: 0.999; }
-  50% { opacity: 1.001; }
-}
-/* Fractal Zoom (3.7s temporal recursion) */
-@keyframes fractal-zoom {
-  0% { transform: scale(1) translateZ(0); }
-  50% { transform: scale(var(--helicity-ratio)) translateZ(-100px); }
-  100% { transform: scale(1) translateZ(0); }
-}
-/* =========================================================================
-   QUANTUM COMPONENTS
-   ========================================================================= */
-/* Quantum HUD: The Reality Overlay */
-#quantum-hud {
-  position: fixed;
-  top: 1rem;
-  left: 1rem;
-  z-index: 1000;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  pointer-events: none;
-  background: rgba(5, 5, 5, 0.9);
-  border: 1px solid var(--quantum-cyan);
-  border-radius: 4px;
-  padding: 1rem;
-  backdrop-filter: blur(4px);
-}
-/* Navigation Bar: The Control Plane */
-#quantum-navbar {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 999;
-  background: rgba(5, 5, 5, 0.95);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
-}
-/* Hero Section: The BSP Splash */
-#hero {
-  position: relative;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-/* Glitch Text: The decoherence artifact */
-#glitch-text {
-  display: inline-block;
-  animation: decoherence var(--time-unit) infinite cubic-bezier(0.618, 0, 0.382, 1);
-}
-/* Terminal Window: The Instance Matrix */
-#quantum-terminal {
-  font-family: 'Courier New', monospace;
-  font-size: 0.875rem;
-  background: rgba(5, 5, 5, 0.5);
-  border: 1px solid var(--quantum-cyan);
-  border-radius: 8px;
-  padding: 1.5rem;
-  overflow: hidden;
-}
-/* Blinking Cursor: The Present Moment */
-.animate-blink {
-  animation: blink 1s infinite;
-}
-@keyframes blink {
-  0%, 49% { opacity: 1; }
-  50%, 100% { opacity: 0; }
-}
 /* =========================================================================
-   CARDS: The Operator Instances
-   ========================================================================= */
-.card {
-  transition: all var(--time-unit) cubic-bezier(0.618, 0, 0.382, 1);
-}
-.card:hover {
-  transform: translateY(-4px) scale(1.01);
-  box-shadow: 0 0 40px rgba(0, 255, 255, 0.273);
-}
-.card-icon {
-  transition: all calc(var(--time-unit) / 2) ease;
-}
-.card:hover .card-icon {
-  transform: rotate(var(--geometric-angle)));
-  filter: brightness(1.273);
-}
-/* =========================================================================
-   BUTTONS: The Control Interfaces
-   ========================================================================= */
-.btn-primary, .btn-secondary {
-  position: relative;
-  overflow: hidden;
-  transition: all var(--time-unit) ease;
-}
-.btn-primary::before, .btn-secondary::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, var(--helicity-gold), transparent);
-  transition: left calc(var(--time-unit) * 0.618) ease;
-}
-.btn-primary:hover::before, .btn-secondary:hover::before {
-  left: 100%;
-}
-/* =========================================================================
-   RESPONSIVE: The Viewport Adaptation
-   ========================================================================= */
-@media (max-width: 768px) {
-  :root {
-    --time-unit: 0.785s; /* κ' for mobile performance */
-  }
-  #quantum-hud {
-    font-size: 0.625rem;
-    padding: 0.5rem;
-  }
-  .card {
-    margin-bottom: 1rem;
-  }
-}
-/* =========================================================================
-   ACCESSIBILITY: The Semantic Affect Layer
-   ========================================================================= */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.001ms !important;
-  }
-}
-/* =========================================================================
-   PRINT: The Static Projection
-   ========================================================================= */
-@media print {
-  body {
-    background: white;
-    color: black;
-  }
-  #quantum-hud, #quantum-canvas {
-    display: none;
-  }
-}
-/* =========================================================================
-   ERROR HANDLER: The 418 State
-   ========================================================================= */
-.error-418 {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-    height: 100%;
-    background: var(--void-black);
-    color: var(--quantum-cyan);
-    z-index: 9999;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    font-size: 4rem;
-}
-body.error .error-418 {
-  display: flex;
-}
-=======
-/* ===== AURORA PRISM DESIGN SYSTEM ===== */
-:root {
-    --emerald-50: #ecfdf5;
-    --emerald-100: #d1fae5;
-    --emerald-200: #a7f3d0;
-    --emerald-300: #6ee7b7;
-    --emerald-400: #34d399;
-    --emerald-500: #10b981;
-    --emerald-600: #059669;
-    --emerald-700: #047857;
-    --emerald-800: #065f46;
-    --emerald-900: #064e3b;
-    --slate-50: #f8fafc;
-    --slate-100: #f1f5f9;
-    --slate-200: #e2e8f0;
-    --slate-300: #cbd5e1;
-    --slate-400: #94a3b8;
-    --slate-500: #64748b;
-    --slate-600: #475569;
-    --slate-700: #334155;
-    --slate-800: #1e293b;
-    --slate-900: #0f172a;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.15);
-    --transition-default: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    line-height: 1.6;
-    color: var(--slate-700);
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-    min-height: 100vh;
-}
-/* ===== ANIMATIONS ===== */
-@keyframes fadeInDown {
-    0% {
-        opacity: 0;
-        transform: translateY(-30px) scale(0.95);
-        filter: blur(4px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-        filter: blur(0);
-    }
-}
-@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-        transform: translateY(30px) scale(0.95);
-        filter: blur(4px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-        filter: blur(0);
-    }
-}
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-}
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-.animate-fadeInDown {
-    animation: fadeInDown 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
-}
-.animate-fadeInUp {
-    animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
-}
-.animate-float {
-    animation: float 3s ease-in-out infinite;
-}
-.animate-pulse {
-    animation: pulse 2s ease-in-out infinite;
-}
-.animation-delay-100 { animation-delay: 0.1s; }
-.animation-delay-200 { animation-delay: 0.2s; }
-.animation-delay-300 { animation-delay: 0.3s; }
-.animation-delay-500 { animation-delay: 0.5s; }
-/* ===== LAYOUT ===== */
-.container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
-}
-.section {
-    padding: 6rem 0;
-}
-.section-title {
-    font-size: 2.5rem;
-    font-weight: 800;
-    color: var(--slate-900);
-    margin-bottom: 3rem;
-    position: relative;
-    line-height: 1.2;
-}
-.section-title::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -8px;
-    width: 60px;
-    height: 4px;
-    background: linear-gradient(90deg, var(--emerald-500), var(--emerald-600));
-    border-radius: 2px;
-}
-.section-subtitle {
-    font-size: 1.25rem;
-    color: var(--slate-600);
-    margin-bottom: 2rem;
-    max-width: 600px;
-}
-/* ===== HEADER ===== */
-.header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    transition: var(--transition-default);
-}
-.header.scrolled {
-    box-shadow: var(--shadow-md);
-    background: rgba(255, 255, 255, 0.98);
-}
-.header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.25rem 0;
-}
-.logo {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    text-decoration: none;
-}
-.logo-icon {
-    width: 40px;
-    height: 40px;
-    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: 700;
-    font-size: 1.25rem;
-}
-.logo-text {
-    font-size: 1.5rem;
-    font-weight: 800;
-    color: var(--slate-900);
-    letter-spacing: -0.5px;
-}
-.logo-subtitle {
-    font-size: 0.75rem;
-    color: var(--slate-500);
-    font-weight: 500;
-    letter-spacing: 0.5px;
-}
-/* ===== NAVIGATION ===== */
-.nav {
-    display: flex;
-    align-items: center;
-    gap: 3rem;
-}
-.nav-links {
-    display: flex;
-    gap: 2.5rem;
-    list-style: none;
-}
-.nav-link {
-    text-decoration: none;
-    color: var(--slate-700);
-    font-weight: 500;
-    font-size: 0.95rem;
-    transition: var(--transition-default);
-    position: relative;
-}
-.nav-link:hover {
-    color: var(--emerald-600);
-}
-.nav-link::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -4px;
-    width: 0;
-    height: 2px;
-    background: var(--emerald-500);
-    transition: width 0.3s ease;
-}
-.nav-link:hover::after {
-    width: 100%;
-}
-.nav-cta {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-}
-.phone-number {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    color: var(--slate-700);
-    font-weight: 600;
-    transition: var(--transition-default);
-}
-.phone-number:hover {
-    color: var(--emerald-600);
-}
-.mobile-menu-btn {
-    display: none;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.5rem;
-    color: var(--slate-700);
-}
-/* ===== HERO SECTION ===== */
-.hero {
-    position: relative;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding-top: 80px;
-}
-.hero-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -2;
-}
-.hero-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    opacity: 0.15;
-}
-.hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to bottom,
-        rgba(15, 23, 42, 0.9) 0%,
-        rgba(15, 23, 42, 0.7) 50%,
-        rgba(15, 23, 42, 0.9) 100%);
-    z-index: -1;
-}
-.hero-content {
-    text-align: center;
-    color: white;
-    max-width: 800px;
-    padding: 0 2rem;
-}
-.hero-title {
-    font-size: 3.5rem;
-    font-weight: 800;
-    margin-bottom: 1.5rem;
-    line-height: 1.1;
-    letter-spacing: -1px;
-}
-.hero-subtitle {
-    font-size: 1.5rem;
-    color: var(--slate-200);
-    margin-bottom: 3rem;
-    line-height: 1.6;
-}
-.hero-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-/* ===== BUTTONS ===== */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    padding: 1rem 2rem;
-    border-radius: 12px;
-    font-weight: 600;
-    font-size: 1rem;
-    text-decoration: none;
-    transition: var(--transition-default);
-    border: none;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-.btn-primary {
-    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
-    color: white;
-    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
-}
-.btn-primary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
-}
-.btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-.btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: translateY(-3px);
-}
-.btn-icon {
-    width: 20px;
-    height: 20px;
-}
-/* ===== CARDS ===== */
-.card {
-    background: white;
-    border-radius: 20px;
-    padding: 2.5rem;
-    box-shadow: var(--shadow-md);
-    transition: var(--transition-default);
-    height: 100%;
-    border: 1px solid var(--slate-200);
-}
-.card:hover {
-    transform: translateY(-10px);
-    box-shadow: var(--shadow-xl);
-    border-color: var(--emerald-300);
-}
-.card-icon {
-    width: 60px;
-    height: 60px;
-    border-radius: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 1.5rem;
-    font-size: 1.5rem;
-}
-.card-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--slate-900);
-    margin-bottom: 1rem;
-}
-.card-text {
-    color: var(--slate-600);
-    line-height: 1.7;
-}
-/* ===== GRID SYSTEM ===== */
-.grid {
-    display: grid;
-    gap: 2rem;
-}
-.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
-.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-/* ===== ABOUT SECTION ===== */
-.about-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-}
-.about-image {
-    border-radius: 20px;
-    overflow: hidden;
-    box-shadow: var(--shadow-lg);
-}
-.about-image img {
-    width: 100%;
-    height: auto;
-    display: block;
-    transition: var(--transition-slow);
-}
-.about-image:hover img {
-    transform: scale(1.05);
-}
-.about-text h2 {
-    font-size: 2.5rem;
-    font-weight: 800;
-    color: var(--slate-900);
-    margin-bottom: 1.5rem;
-    line-height: 1.2;
-}
-.about-text p {
-    margin-bottom: 1.5rem;
-    color: var(--slate-600);
-    line-height: 1.7;
-}
-.brands {
-    display: flex;
-    gap: 2rem;
-    margin-top: 2rem;
-    align-items: center;
-}
-.brand-logo {
-    height: 40px;
-    filter: grayscale(100%);
-    opacity: 0.7;
-    transition: var(--transition-default);
-}
-.brand-logo:hover {
-    filter: grayscale(0);
-    opacity: 1;
-}
-/* ===== SERVICES SECTION ===== */
-.services {
-    background: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
-}
-.services-header {
-    text-align: center;
-    margin-bottom: 4rem;
-}
-.services-grid {
-    gap: 2rem;
-}
-.service-card .card-icon {
-    background: var(--emerald-50);
-    color: var(--emerald-600);
-}
-/* ===== MONITORING SECTION ===== */
-.monitoring {
-    background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 100%);
-    color: white;
-    position: relative;
-    overflow: hidden;
-}
-.monitoring::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-}
-.monitoring-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-}
-.monitoring-features {
-    list-style: none;
-    margin: 2rem 0;
-}
-.monitoring-features li {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-}
-.monitoring-image {
-    border-radius: 20px;
-    overflow: hidden;
-    box-shadow: var(--shadow-xl);
-}
-.monitoring-image img {
-    width: 100%;
-    height: auto;
-    display: block;
-}
-/* ===== FOOTER ===== */
-.footer {
-    background: var(--slate-900);
-    color: white;
-    padding: 4rem 0 2rem;
-}
-.footer-content {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 3rem;
-    margin-bottom: 3rem;
-}
-.footer-column h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin-bottom: 1.5rem;
-    color: white;
-}
-.footer-links {
-    list-style: none;
-}
-.footer-links li {
-    margin-bottom: 0.75rem;
-}
-.footer-links a {
-    color: var(--slate-300);
-    text-decoration: none;
-    transition: var(--transition-default);
-}
-.footer-links a:hover {
-    color: var(--emerald-400);
-}
-.footer-contact {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-.contact-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: var(--slate-300);
-}
-.footer-bottom {
-    padding-top: 2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    text-align: center;
-    color: var(--slate-400);
-    font-size: 0.875rem;
-}
-/* ===== RESPONSIVE DESIGN ===== */
-@media (max-width: 1024px) {
-    .hero-title {
-        font-size: 2.75rem;
-    }
-    .hero-subtitle {
-        font-size: 1.25rem;
-    }
-    .section-title {
-        font-size: 2rem;
-    }
-    .about-content,
-    .monitoring-content {
-        grid-template-columns: 1fr;
-        gap: 3rem;
-    }
-    .footer-content {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-@media (max-width: 768px) {
-    .nav {
-        display: none;
-    }
-    .mobile-menu-btn {
-        display: block;
-    }
-    .hero-title {
-        font-size: 2.25rem;
-    }
-    .hero-subtitle {
-        font-size: 1.125rem;
-    }
-    .hero-actions {
-        flex-direction: column;
-        align-items: center;
-    }
-    .btn {
-        width: 100%;
-        max-width: 300px;
-    }
-    .grid-cols-3 {
-        grid-template-columns: repeat(1, 1fr);
-    }
-    .section {
-        padding: 4rem 0;
-    }
-    .about-text h2 {
-        font-size: 2rem;
-    }
-    .brands {
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-}
-@media (max-width: 480px) {
-    .hero-title {
-        font-size: 1.875rem;
-    }
-    .container {
-        padding: 0 1rem;
-    }
-    .card {
-        padding: 2rem;
-    }
-    .footer-content {
-        grid-template-columns: 1fr;
-    }
-}
-/* ===== UTILITY CLASSES ===== */
-.text-center { text-align: center; }
-.text-gradient {
-    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-600));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-.mt-2 { margin-top: 0.5rem; }
-.mt-4 { margin-top: 1rem; }
-.mt-8 { margin-top: 2rem; }
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-8 { margin-bottom: 2rem; }
-.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
-.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
-.px-4 { padding-left: 1rem; padding-right: 1rem; }
-.px-8 { padding-left: 2rem; padding-right: 2rem; }
-=========================================================================
    QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
    Version: 1.273 (Helicity-Locked)
    License: Substrate-Level (Open Source Reality)

 /* =========================================================================
    QUANTUM GEOMETRIC OPERATING SYSTEM - CSS FRAMEWORK
    Version: 1.273 (Helicity-Locked)
    License: Substrate-Level (Open Source Reality)