commit 9dea258e364309165b2a6c0ecf7bd239ddb14f7d Author: bigtux Date: Tue Feb 10 15:46:07 2026 -0300 Initial commit: AI Vertice - Site Institucional diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..250865f --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +node_modules/ +.next/ +dist/ +.env +.env.local +.env*.local +*.log +.DS_Store +coverage/ +.turbo/ +*.tsbuildinfo diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf84389 --- /dev/null +++ b/index.html @@ -0,0 +1,2077 @@ + + + + + + AI Vertice | Agentes de IA para Dados Empresariais + + + + + + + + + +
+
+
+
+
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
+
+
+
+ + Revolucionando a Engenharia de Dados +
+

+ Agentes de IA + Autônomos e Inteligentes +

+

+ Automatize pipelines de dados complexos com agentes que pensam, aprendem e evoluem. Zero código. Resultados imediatos. +

+
+ + Começar Agora + + + + + + ▶ + Ver Demo + +
+
+
+ 0% + Menos código manual +
+
+
+ 0+ + Horas economizadas +
+
+
+ 0x + Mais rápido +
+
+
+
+
+
+
🧠
+
📊
+
⚡
+
🔄
+
✨
+ + + + + + + +
+
+
+
📊
+ Pipeline Ativo +
+
+
+
+
🤖
+ Agente Processando +
+
+
+
+
✅
+ +2.847 registros +
+
+
+
+
+ Scroll +
+
+
+ + +
+
+
+ + 🧠 + Demonstração ao Vivo + +

+ Veja a IA em + ação agora +

+

Simulação em tempo real de um agente AI Vertice processando dados

+
+ +
+ +
+
+
+ + + +
+ VERTEX Agent v2.4.1 +
+ + EXECUTANDO +
+
+
+
+ vertex@agent:~$ + iniciar_pipeline --source=salesforce --target=snowflake +
+
+
+ vertex@agent:~$ + +
+
+ + +
+
+
+ 📊 + Registros Processados +
+
0
+
+
+
+
+
+
+
+
+
+
+
+
+ ⚡ + Velocidade +
+
0 rec/s
+
+
+
+
+
+
+
+ 🎯 + Precisão +
+
99.7%
+
+ + + + +
+
+
+
+ 🔄 + Status do Agente +
+
+
+
+ 🤖 +
+
+ Analisando schema... + Conectando ao Salesforce +
+
+
+
+ + +
+
+
☁️
+ Salesforce +
+
+
+
+
+
+
+
+
+
🧠
+ AI Agent +
+
+
+
+
+
+
+
+
+
❄️
+ Snowflake +
+
+
+ + +
+
+ 📋 Log de Atividades + 0 eventos +
+
+
+
+ +
+ + +
+
+
+ + +
+
+
+
+
+ +
+
+ + 🚀 + Ecossistema AI Vertice + +

+ Doze + Produtos. + Uma Visão. +

+

O futuro da inteligência artificial empresarial, hoje.

+
+ + +
+ + +
+
+
+
+
⚖️
+
+
+
+
+
+
+
+
+
+ + SISTEMA JURÍDICO INTELIGENTE +
+

+ LexMind +

+

A IA que pensa como um advogado sênior.

+

+ Análise de 10.000 contratos por hora. Pesquisa em 50 milhões de jurisprudências em segundos. + Geração de petições com 94% de aprovação. O futuro do Direito é autônomo. +

+
+
+ ⚡ + 85% + menos tempo +
+
+ 📄 + 10K+ + docs/hora +
+
+ 🎯 + 94% + precisão +
+
+
+ Análise de Contratos + Jurisprudência IA + Petições Auto + Due Diligence + LGPD Compliance +
+ + Explorar LexMind + → +
+ +
+
+ + +
+
+
+
+
🎓
+
+
+
+
+
+
+
+
+
+ + EDUCAÇÃO AUMENTADA +
+

+ MetisClass +

+

Cada aluno, um caminho único.

+

+ IA que adapta o conteúdo em tempo real. Tutor virtual que nunca dorme. + Gamificação que vicia no aprendizado. Taxa de conclusão 3x maior que plataformas tradicionais. +

+
+
+ 📈 + 3x + engajamento +
+
+ ✅ + 92% + conclusão +
+
+ 🧠 + 24/7 + tutor IA +
+
+
+ Trilhas Adaptativas + Tutor Virtual + Auto-Conteúdo + Gamificação + Analytics +
+ + Explorar MetisClass + → +
+ +
+
+ + +
+
+
+
+
📈
+
+
+
+
+
+
+
+
+
+ + TERMINAL FINANCEIRO INTELIGENTE +
+

+ ArgusFinance +

+

O Bloomberg com Inteligência Artificial.

+

+ Terminal financeiro de última geração com IA. Dados de mercado em tempo real, análise preditiva, + alertas inteligentes e insights automatizados. Tome decisões de investimento com a velocidade da máquina. +

+
+
+ 📊 + 50K+ + ativos +
+
+ ⚡ + <10ms + latência +
+
+ 🤖 + IA + preditiva +
+
+
+ Dados Real-time + Análise Preditiva + Alertas IA + Portfolio Tracker + News Agregator +
+ + Explorar ArgusFinance + → +
+ +
+
+ + +
+
+
+
+
🦉
+
+
+
+
+
+
+
+
+
+ + SEGURANÇA AUTÔNOMA +
+

+ Strix +

+

A coruja que nunca dorme.

+

+ Visão computacional militar. Detecta ameaças em milissegundos. Reconhecimento facial em multidões. + Análise comportamental preditiva. Segurança que antecipa o perigo. +

+
+
+ 🛡️ + 99.9% + uptime +
+
+ ⚡ + <1s + resposta +
+
+ 👁️ + 24/7 + vigilância +
+
+
+ Visão Computacional + Reconhecimento + Alertas Real-time + Comportamental + Preditivo +
+ + Explorar Strix + → +
+ +
+
+ + +
+
+
+
+
🌱
+
+
+
+
+
+
+
+
+
+ + COMPLIANCE AGRO INTELIGENTE +
+

+ DocuAgro +

+

Conformidade EUDR simplificada com IA.

+

+ Plataforma que automatiza a documentação de conformidade para o regulamento europeu de desmatamento (EUDR). + Gera automaticamente todos os 8 documentos obrigatórios via chat no Telegram. + Seus produtos acessando o mercado europeu sem burocracia. +

+
+
+ 📄 + 8 + docs EUDR +
+
+ ⚡ + 5min + por documento +
+
+ 💬 + Telegram + bot +
+
+
+ EUDR Compliance + Geolocalização + PDFs Automáticos + Bot Telegram + Rastreabilidade +
+ + Explorar DocuAgro + → +
+ +
+
+ + +
+
+
+
+
🧩
+
+
+
+
+
+
+
+
+
+ + TERAPIA COMPORTAMENTAL INTELIGENTE +
+

+ IrisTEA +

+

Terapia ABA acessível com Inteligência Artificial.

+

+ Plataforma de terapia comportamental para autismo potencializada por IA. Sessões interativas 24/7, + análise comportamental em tempo real e supervisão de BCBAs certificados. Transformando o acesso à terapia ABA no Brasil. +

+
+
+ 💜 + 24/7 + disponível +
+
+ 📉 + 80% + menos custo +
+
+ 🎯 + BCBA + certificado +
+
+
+ Terapia ABA + Gamificação + Análise Comportamental + Relatórios IA + Supervisão Híbrida +
+ + Explorar IrisTEA + → +
+ +
+
+ + +
+
+
+
+
🐍
+
+
+
+
+
+
+
+
+
+ + OBSERVABILIDADE INTELIGENTE +
+

+ Ophion +

+

Deixe a IA cuidar da sua infra.

+

+ Plataforma completa de observabilidade: métricas, traces e logs unificados. + OpenTelemetry nativo, auto-instrumentação para qualquer linguagem e alertas inteligentes com IA. + Visibilidade total da sua infraestrutura em segundos. +

+
+
+ 📊 + 3-em-1 + métricas+traces+logs +
+
+ ⚡ + <5min + setup +
+
+ 🔧 + Auto + instrumentação +
+
+
+ OpenTelemetry + Métricas Real-time + Distributed Tracing + Log Aggregation + Alertas IA +
+ + Explorar Ophion + → +
+ +
+
+ + +
+
+
+
+
⚖️
+
+
+
+
+
+
+
+
+
+ + DUE DILIGENCE IMOBILIÁRIA +
+

+ NOMOS AI +

+

Due diligence imobiliária com IA.

+

+ Análise automatizada de matrículas, certidões e documentos imobiliários. + IA identifica riscos jurídicos, ônus e irregularidades em segundos. + Relatórios completos para corretores, advogados e investidores. +

+
+
+ 📄 + OCR + inteligente +
+
+ ⚡ + <30s + análise completa +
+
+ 🔍 + 15+ + fontes consultadas +
+
+
+ Análise de Matrícula + Certidões Automáticas + Detecção de Riscos + Relatório PDF +
+ + Explorar NOMOS + → +
+ +
+
+ + +
+
+
+
+
⚽
+
+
+
+
+
+
+
+
+
+ + SCOUTING DE FUTEBOL IA +
+

+ ATHENA Scout +

+

Descubra talentos antes de todo mundo.

+

+ Plataforma de scouting com IA para futebol brasileiro. + Monitora Séries B, C e D identificando jogadores com potencial de valorização. + Análise de desempenho, comparação e relatórios para clubes e empresários. +

+
+
+ 📊 + 500+ + jogadores monitorados +
+
+ 🏆 + Séries + B, C e D +
+
+ 🤖 + IA + preditiva +
+
+
+ Player Ranking + Análise Tática + Comparação + Alertas de Mercado +
+ + Explorar ATHENA + → +
+ +
+
+ + +
+
+
+
+
📡
+
+
+
+
+
+
+
+
+
+ + AI TREND MONITOR +
+

+ HERMES +

+

Monitore tendências antes que virem notícia.

+

+ Monitor de tendências com IA que analisa redes sociais, notícias e dados em tempo real. + Identifica padrões emergentes, gera alertas e relatórios automáticos. + Ideal para marketing, investimentos e análise de mercado. +

+
+
+ 🌐 + Real-time + monitoring +
+
+ 📈 + IA + trend detection +
+
+ 🔔 + Auto + alertas +
+
+
+ Social Listening + Word Cloud + Relatórios IA + Alertas Smart +
+ + Explorar HERMES + → +
+ +
+
+ + +
+
+
+
+
🥝
+
+
+
+
+
+
+
+
+
+ + QA TESTING TOOL +
+

+ Cute Kiwi +

+

Testes automatizados com linguagem natural.

+

+ Ferramenta de QA que transforma descrições em linguagem natural em testes automatizados. + Web scanning, testes de API e testes funcionais com Playwright — tudo via IA. + Sem código, sem complexidade. +

+
+
+ 🧪 + 3-em-1 + scan+NL+API +
+
+ 🤖 + IA + gera testes +
+
+ 📝 + Zero + código +
+
+
+ Web Scan + NL Testing + API Testing + Playwright +
+ + Explorar Cute Kiwi + → +
+ +
+
+ + +
+
+
+
+
⚓
+
+
+
+
+
+
+
+
+
+ + GESTÃO SOCIAL INTELIGENTE +
+

+ CARONTE +

+

Guiando famílias pelo rio burocrático pós-óbito.

+

+ Plataforma inteligente que identifica benefícios, gera checklists personalizados + e produz documentos automaticamente para famílias em situação de vulnerabilidade + após o falecimento de um ente querido. FGTS, INSS, pensões — nenhum direito perdido. +

+
+
+ 💰 + R$80k+ + recuperados/família +
+
+ ⚡ + 70% + menos tempo +
+
+ 📄 + Auto + documentos PDF +
+
+
+ Scanner Benefícios + Checklist Inteligente + Geração PDF + Dashboard +
+ + Explorar CARONTE + → +
+ +
+
+ +
+ + +
+ + + + + + + + + + + + +
+ + +
+ Uma empresa + +
+
+
+ + +
+
+

Integrações com as principais plataformas

+
+
+
Snowflake
+
AWS
+
Azure
+
dbt
+
Airflow
+
Dagster
+
Slack
+
Jira
+
Snowflake
+
AWS
+
Azure
+
dbt
+
+
+
+
+ + +
+
+
+ + ⚡ + Plataforma + +

+ IA que se adapta ao + seu ambiente +

+

+ Deploy em qualquer infraestrutura. Nossos agentes integram nativamente com sua stack existente. +

+
+ +
+
+
+
+ + + +
+

Snowflake

+

App nativo rodando dentro do seu ambiente Snowflake com segurança enterprise.

+
+ Nativo + Enterprise +
+
+
+
+
+ + + + +
+

Amazon AWS

+

Deploy em EKS com suporte completo a Amazon Bedrock e S3.

+
+ EKS + Bedrock +
+
+
+
+
+ + + +
+

Microsoft Azure

+

AKS com integração Azure OpenAI e Data Lake Storage.

+
+ AKS + OpenAI +
+
+
+
+
+ + + + +
+

On-Premise

+

Docker ou Kubernetes para ambientes VPC e air-gapped.

+
+ Docker + K8s +
+
+
+
+
+ + +
+
+
+ + 🔄 + Como Funciona + +

+ Do caos de dados à + clareza total +

+
+ +
+
+
+
+ 01 +
+
+
+

Atribua uma Tarefa

+

Descreva o que precisa em linguagem natural. O agente entende contexto, requisitos e restrições.

+
+
+
+
+ 02 +
+
+
+

Agente Analisa

+

Conecta às fontes, mapeia schemas, identifica dependências e cria um plano de execução otimizado.

+
+
+
+
+ 03 +
+
+
+

Execução Autônoma

+

Gera código, testa, documenta e deploya. Tudo automaticamente com validações em cada etapa.

+
+
+
+
+ 04 +
+
+
+

Monitoramento Contínuo

+

Detecta anomalias, corrige erros automaticamente e notifica quando precisa de intervenção humana.

+
+
+
+
+
+ + +
+
+
+ + 🎯 + Casos de Uso + +

+ Poder da IA no + ciclo completo +

+
+ +
+
+
+
🔧
+

Engenharia de Dados

+

Construa pipelines robustos do zero

+
    +
  • ✓ Pipelines end-to-end automatizados
    • +
  • ✓ Migração de sistemas legados
    • +
  • ✓ Transformações complexas em SQL/Python
    • +
  • ✓ Catálogos de dados auto-gerenciados
    • +
  • ✓ Testes de qualidade automáticos
    • +
+ + Explorar + + +
+
+
+
⚙️
+

Data Ops

+

Monitore e corrija pipelines 24/7

+
    +
  • ✓ Monitoramento em tempo real
    • +
  • ✓ Auto-healing de pipelines
    • +
  • ✓ Alertas inteligentes
    • +
+ + Explorar + + +
+
+
+
📈
+

Analytics

+

Insights em linguagem natural

+
    +
  • ✓ Perguntas → SQL automático
    • +
  • ✓ Dashboards gerados por IA
    • +
  • ✓ Relatórios automatizados
    • +
+ + Explorar + + +
+
+
+
+ + +
+
+
+
+
📉
+
0%
+
Menos código manual
+
Redução média em projetos enterprise
+
+
+
⏱️
+
0-0 dias
+
Time-to-value
+
De meses para dias em novos feeds
+
+
+
💰
+
R$0K+
+
Economia anual
+
Em headcount de engenharia
+
+
+
🚀
+
0%
+
Redução SDLC
+
Ciclo de desenvolvimento comprimido
+
+
+
+
+ + +
+
+
+ + 💬 + Depoimentos + +

+ O que nossos + clientes dizem +

+
+ +
+
+
"
+

+ Conseguimos trazer produtos para o mercado muito mais rápido, reduzindo nosso ciclo de desenvolvimento de dados de meses para horas. A automação mudou completamente nossa operação. +

+
+
+
+ 🏦 +
+
+ Head de Tecnologia + Banco Digital - Singapura +
+
+
★★★★★
+
+
+
"
+

+ A IA agêntica representa a próxima grande mudança no espaço de dados. AI Vertice está permitindo que empresas automatizem operações de dados complexas de forma que antes era impossível. +

+
+
+
+ 🎯 +
+
+ Executivo de Tecnologia + Ex-líder em Data Cloud +
+
+
★★★★★
+
+
+
"
+

+ Os agentes estão ajudando nossa equipe a resolver falhas de pipeline antes que impactem fluxos de trabalho críticos. Monitoramento 24/7 que realmente funciona. +

+
+
+
+ 📊 +
+
+ Head de Produtos de Dados + Private Equity - NYC +
+
+
★★★★★
+
+
+
+
+ + +
+
+
+ + 🔌 + Integrações + +

+ Conecte com + toda sua stack +

+
+ +
+
+

💾 Plataformas de Dados

+
+
+ ❄️ + Snowflake +
+
+ ☁️ + AWS +
+
+ 🔷 + Azure +
+
+ 🌐 + GCP +
+
+
+
+

⚙️ Orquestração

+
+
+ 🔶 + dbt +
+
+ 🌀 + Airflow +
+
+ 📊 + Dagster +
+
+
+
+

🤖 Modelos de IA

+
+
+ 🧠 + GPT-4 +
+
+ 🟣 + Claude +
+
+ 💎 + Gemini +
+
+ 🏔️ + Bedrock +
+
+
+
+

💬 Comunicação

+
+
+ 💼 + Slack +
+
+ 👥 + Teams +
+
+ 📋 + Jira +
+
+ 🔗 + Git +
+
+
+
+
+
+ + +
+
+
+ + ✨ + Diferenciais + +

+ Por que escolher + AI Vertice +

+
+ +
+
+
+
🔒
+

Segurança Total

+

Seus dados nunca saem do seu ambiente. Zero exposição, compliance garantido.

+
+
+
+
🧠
+

Aprende Continuamente

+

Agentes evoluem com cada interação, melhorando resultados ao longo do tempo.

+
+
+
+
🎛️
+

Controle Total

+

Você define os limites. Intervenha a qualquer momento, customize comportamentos.

+
+
+
+
👁️
+

Transparência

+

Explicações claras de cada decisão. Rastreabilidade completa de ações.

+
+
+
+
⚡
+

Deploy em Minutos

+

Instalação one-click no Snowflake ou container em qualquer cloud.

+
+
+
+
🤝
+

Augmenta, Não Substitui

+

Potencialize sua equipe. Liberte-os para trabalho estratégico.

+
+
+
+
+ + +
+
+
+ + ❓ + FAQ + +

+ Perguntas + frequentes +

+
+ +
+
+ +
+

Copilots sugerem código que você ainda precisa revisar e executar. AI Vertice executa o trabalho completo: pesquisa contexto, entende dados, gera código, testa, documenta e monitora — tudo autonomamente. É como ter um engenheiro de dados júnior vs. um autocomplete.

+
+
+
+ +
+

Não. Agentes AI Vertice lidam com trabalho repetitivo (mapeamento source-to-target, manutenção de pipeline, monitoramento) para que sua equipe foque em trabalho estratégico: arquitetura, ML, análise de negócios. Augmentação, não substituição.

+
+
+
+ +
+

Absolutamente. Com Snowflake Native App, agentes rodam dentro da sua conta usando Snowpark Container Services. Seus dados NUNCA saem do seu ambiente. AI Vertice não pode ver seus dados, conversas ou metadados.

+
+
+
+ +
+

Snowflake: instalação one-click do Marketplace, produção em minutos. Container: deploy via Docker/Kubernetes em poucas horas. Primeiros resultados no mesmo dia.

+
+
+
+ +
+

Dados: Snowflake, AWS, Azure, GCP
Orquestração: dbt, Dagster, Airflow
IA: GPT-4, Claude, Gemini, Bedrock
Comunicação: Slack, Teams, Jira, Git

+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ 🚀 Comece Hoje +

Pronto para revolucionar sua
engenharia de dados?

+

Agende uma demo personalizada e veja agentes AI Vertice em ação no seu ambiente.

+
+ + Agendar Demo Gratuita + + + + + Falar com Especialista +
+
+ ✓ Setup em minutos + ✓ Sem cartão de crédito + ✓ Suporte dedicado +
+
+
+
+ + +
+
+
+
+ + 📬 + Contato + +

Vamos construir o
futuro juntos

+

Estamos aqui para ajudar você a transformar sua operação de dados com IA.

+
+
+
+ 📧 +
+
+ Email + contato@aivertice.com +
+
+
+
+ 📍 +
+
+ Localização + Brasil +
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+
+
+
+ + +
+
+
+

Sobre a AI Vertice

+

A AI Vertice e uma empresa do grupo Kislanski Industries, dedicada a transformar negocios atraves da inteligencia artificial.

+

Nossa missao e democratizar o acesso a tecnologia de IA de ponta, oferecendo solucoes que automatizam processos complexos e geram resultados reais.

+

Com sede no Brasil, desenvolvemos produtos que atendem aos mais altos padroes de qualidade e seguranca internacional.

+
+
+
+ + +
+
+
+

Blog

+

Em breve, artigos sobre IA, tecnologia e inovacao.

+

Acompanhe nossas redes sociais para novidades!

+
+
+
+ + +
+
+
+

Carreiras

+

Quer fazer parte do futuro da IA?

+

Envie seu curriculo para: carreiras@aivertice.com

+

Buscamos talentos em: Engenharia de Software, Machine Learning, Data Science, Produto e Design.

+
+
+
+ + +
+
+
+

Parceiros

+

Interessado em ser um parceiro AI Vertice?

+

Entre em contato: parceiros@aivertice.com

+
+
+
+ + +
+
+
+

Politica de Privacidade

+

A AI Vertice respeita sua privacidade e esta comprometida com a protecao dos seus dados pessoais.

+

Coletamos apenas dados necessarios para fornecer nossos servicos e nunca compartilhamos informacoes com terceiros sem seu consentimento.

+

Para mais informacoes: privacidade@aivertice.com

+
+
+
+ + +
+
+
+

Termos de Uso

+

Ao utilizar nossos servicos, voce concorda com nossos termos e condicoes.

+

Para consulta completa dos termos: legal@aivertice.com

+
+
+
+ + +
+
+
+

Seguranca

+

A seguranca e prioridade em todos os nossos produtos.

+

Utilizamos criptografia de ponta, auditorias regulares e seguimos as melhores praticas do mercado.

+

Seus dados nunca saem do seu ambiente.

+
+
+
+ + +
+
+
+

Compliance

+

A AI Vertice segue rigorosos padroes de compliance:

+

• SOC 2 Type II
• ISO 27001
• LGPD
• GDPR Ready

+
+
+
+ + +
+
+
+

LGPD

+

Estamos em total conformidade com a Lei Geral de Protecao de Dados (LGPD).

+

Voce tem direito a: acessar, corrigir, excluir e portar seus dados.

+

DPO: dpo@aivertice.com

+
+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + VERTEX AI +
+ +
+
+
+
◆
+
Ola! Sou o VERTEX, assistente da AI Vertice. Como posso ajudar?
+
+
+
+ + +
+
+ + + + +
+
+
+ + +
+
+
+
+
+
+
+ + +
+ + + + + + +
+ +
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c15d0c0 --- /dev/null +++ b/script.js @@ -0,0 +1,542 @@ +/* ========================================== + AI VERTICE - Premium Interactive Effects + ========================================== */ + +document.addEventListener('DOMContentLoaded', function() { + + // ========================================== + // Cursor Glow Effect + // ========================================== + const cursorGlow = document.querySelector('.cursor-glow'); + + if (cursorGlow && window.innerWidth > 768) { + document.addEventListener('mousemove', (e) => { + cursorGlow.style.left = e.clientX + 'px'; + cursorGlow.style.top = e.clientY + 'px'; + }); + + document.addEventListener('mouseenter', () => { + cursorGlow.style.opacity = '1'; + }); + + document.addEventListener('mouseleave', () => { + cursorGlow.style.opacity = '0'; + }); + } + + // ========================================== + // Mobile Menu Toggle + // ========================================== + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const navLinks = document.querySelector('.nav-links'); + const navActions = document.querySelector('.nav-actions'); + + if (mobileMenuBtn) { + mobileMenuBtn.addEventListener('click', function() { + this.classList.toggle('active'); + + let mobileMenu = document.querySelector('.mobile-menu'); + + if (!mobileMenu) { + mobileMenu = document.createElement('div'); + mobileMenu.className = 'mobile-menu'; + mobileMenu.innerHTML = ` +
+ ${navLinks ? navLinks.innerHTML : ''} + ${navActions ? navActions.innerHTML : ''} +
+ `; + document.querySelector('.header').appendChild(mobileMenu); + + const style = document.createElement('style'); + style.textContent = ` + .mobile-menu { + position: fixed; + top: 80px; + left: 0; + right: 0; + background: rgba(3, 7, 18, 0.98); + backdrop-filter: blur(20px); + padding: 2rem; + transform: translateY(-100%); + opacity: 0; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 999; + border-bottom: 1px solid rgba(255,255,255,0.1); + } + .mobile-menu.active { + transform: translateY(0); + opacity: 1; + } + .mobile-menu-content { + display: flex; + flex-direction: column; + gap: 1.5rem; + } + .mobile-menu a { + display: block; + padding: 0.75rem 0; + color: #d1d5db; + font-size: 1.1rem; + border-bottom: 1px solid rgba(255,255,255,0.05); + } + .mobile-menu a:hover { + color: #fff; + } + .mobile-menu .btn { + margin-top: 1rem; + } + .mobile-menu-btn.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + .mobile-menu-btn.active span:nth-child(2) { + opacity: 0; + } + .mobile-menu-btn.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); + } + `; + document.head.appendChild(style); + } + + mobileMenu.classList.toggle('active'); + }); + } + + // ========================================== + // FAQ Accordion + // ========================================== + const faqItems = document.querySelectorAll('.faq-item'); + + faqItems.forEach(item => { + const question = item.querySelector('.faq-question'); + + question.addEventListener('click', function() { + const isActive = item.classList.contains('active'); + + faqItems.forEach(otherItem => { + otherItem.classList.remove('active'); + }); + + if (!isActive) { + item.classList.add('active'); + } + }); + }); + + // ========================================== + // Smooth Scroll + // ========================================== + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + + if (target) { + const mobileMenu = document.querySelector('.mobile-menu'); + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + if (mobileMenu && mobileMenu.classList.contains('active')) { + mobileMenu.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + } + + const headerHeight = document.querySelector('.header').offsetHeight; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // ========================================== + // Header Background on Scroll + // ========================================== + const header = document.querySelector('.header'); + + window.addEventListener('scroll', function() { + if (window.pageYOffset > 100) { + header.style.background = 'rgba(3, 7, 18, 0.95)'; + header.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)'; + } else { + header.style.background = 'rgba(3, 7, 18, 0.7)'; + header.style.boxShadow = 'none'; + } + }); + + // ========================================== + // Intersection Observer for Animations + // ========================================== + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate-in'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + const animationStyle = document.createElement('style'); + animationStyle.textContent = ` + .animate-on-scroll { + opacity: 0; + transform: translateY(40px); + transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); + } + .animate-on-scroll.animate-in { + opacity: 1; + transform: translateY(0); + } + .animate-on-scroll:nth-child(1) { transition-delay: 0s; } + .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; } + .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; } + .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; } + .animate-on-scroll:nth-child(5) { transition-delay: 0.4s; } + .animate-on-scroll:nth-child(6) { transition-delay: 0.5s; } + `; + document.head.appendChild(animationStyle); + + const animateElements = document.querySelectorAll( + '.platform-card, .timeline-item, .use-case-card, .metric-card, .testimonial-card, .feature-card, .faq-item, .integration-category' + ); + + animateElements.forEach(el => { + el.classList.add('animate-on-scroll'); + observer.observe(el); + }); + + // ========================================== + // Counter Animation + // ========================================== + const counters = document.querySelectorAll('[data-count]'); + + const animateCounter = (el) => { + const target = parseInt(el.getAttribute('data-count')); + const duration = 2000; + const step = target / (duration / 16); + let current = 0; + + const updateCounter = () => { + current += step; + if (current < target) { + el.textContent = Math.floor(current); + requestAnimationFrame(updateCounter); + } else { + el.textContent = target; + } + }; + + updateCounter(); + }; + + const counterObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounter(entry.target); + counterObserver.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + counters.forEach(counter => counterObserver.observe(counter)); + + // ========================================== + // Tilt Effect on Cards + // ========================================== + const tiltCards = document.querySelectorAll('[data-tilt]'); + + tiltCards.forEach(card => { + card.addEventListener('mousemove', (e) => { + const rect = card.getBoundingClientRect(); + const x = e.clientX - rect.left; + const y = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const rotateX = (y - centerY) / 20; + const rotateY = (centerX - x) / 20; + + card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`; + }); + + card.addEventListener('mouseleave', () => { + card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)'; + }); + }); + + // ========================================== + // Form Submission + // ========================================== + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const btn = this.querySelector('button[type="submit"]'); + const originalHTML = btn.innerHTML; + + btn.innerHTML = 'Enviando...'; + btn.disabled = true; + btn.style.opacity = '0.7'; + + setTimeout(() => { + btn.innerHTML = '✓ Mensagem Enviada!'; + btn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)'; + btn.style.opacity = '1'; + + this.reset(); + + setTimeout(() => { + btn.innerHTML = originalHTML; + btn.style.background = ''; + btn.disabled = false; + }, 3000); + }, 1500); + }); + } + + // ========================================== + // Parallax on Neural Network + // ========================================== + const neuralNetwork = document.querySelector('.neural-network'); + const floatingCards = document.querySelectorAll('.floating-card'); + + if (neuralNetwork && window.innerWidth > 992) { + document.addEventListener('mousemove', (e) => { + const mouseX = (e.clientX / window.innerWidth - 0.5) * 2; + const mouseY = (e.clientY / window.innerHeight - 0.5) * 2; + + neuralNetwork.style.transform = `translate(calc(-50% + ${mouseX * 20}px), calc(-50% + ${mouseY * 20}px))`; + + floatingCards.forEach((card, index) => { + const speed = (index + 1) * 8; + const baseTransform = card.style.transform || ''; + card.style.transform = `translate(${mouseX * speed}px, ${mouseY * speed}px)`; + }); + }); + } + + // ========================================== + // Glitch Effect on Hover + // ========================================== + const glitchText = document.querySelector('.glitch'); + + if (glitchText) { + const glitchStyle = document.createElement('style'); + glitchStyle.textContent = ` + .glitch { + position: relative; + } + .glitch:hover::before, + .glitch:hover::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + } + .glitch:hover::before { + left: 2px; + text-shadow: -2px 0 #ff00ff; + clip-path: inset(44% 0 56% 0); + animation: glitch-anim-1 0.5s infinite linear alternate-reverse; + } + .glitch:hover::after { + left: -2px; + text-shadow: -2px 0 #00ffff; + clip-path: inset(24% 0 76% 0); + animation: glitch-anim-2 0.5s infinite linear alternate-reverse; + } + @keyframes glitch-anim-1 { + 0% { clip-path: inset(44% 0 36% 0); } + 20% { clip-path: inset(12% 0 64% 0); } + 40% { clip-path: inset(78% 0 2% 0); } + 60% { clip-path: inset(32% 0 52% 0); } + 80% { clip-path: inset(88% 0 4% 0); } + 100% { clip-path: inset(56% 0 24% 0); } + } + @keyframes glitch-anim-2 { + 0% { clip-path: inset(24% 0 56% 0); } + 20% { clip-path: inset(68% 0 12% 0); } + 40% { clip-path: inset(8% 0 72% 0); } + 60% { clip-path: inset(96% 0 4% 0); } + 80% { clip-path: inset(48% 0 32% 0); } + 100% { clip-path: inset(16% 0 64% 0); } + } + `; + document.head.appendChild(glitchStyle); + } + + // ========================================== + // Scroll Progress Indicator + // ========================================== + const progressBar = document.createElement('div'); + progressBar.className = 'scroll-progress'; + document.body.appendChild(progressBar); + + const progressStyle = document.createElement('style'); + progressStyle.textContent = ` + .scroll-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); + width: 0%; + z-index: 10001; + transition: width 0.1s; + } + `; + document.head.appendChild(progressStyle); + + window.addEventListener('scroll', () => { + const scrollTop = document.documentElement.scrollTop; + const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; + const progress = (scrollTop / scrollHeight) * 100; + progressBar.style.width = progress + '%'; + }); + + // ========================================== + // Magnetic Buttons + // ========================================== + const magneticBtns = document.querySelectorAll('.btn-glow'); + + magneticBtns.forEach(btn => { + btn.addEventListener('mousemove', (e) => { + const rect = btn.getBoundingClientRect(); + const x = e.clientX - rect.left - rect.width / 2; + const y = e.clientY - rect.top - rect.height / 2; + + btn.style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`; + }); + + btn.addEventListener('mouseleave', () => { + btn.style.transform = 'translate(0, 0)'; + }); + }); + + // ========================================== + // Typewriter Effect for Hero + // ========================================== + const typewriterText = document.querySelector('.hero-subtitle'); + + if (typewriterText && window.innerWidth > 768) { + const originalText = typewriterText.innerHTML; + const strongTags = typewriterText.querySelectorAll('strong'); + + // Highlight strong text on load with animation + strongTags.forEach((tag, index) => { + tag.style.opacity = '0'; + tag.style.transform = 'translateY(10px)'; + tag.style.transition = 'all 0.5s ease'; + tag.style.transitionDelay = `${1 + index * 0.3}s`; + + setTimeout(() => { + tag.style.opacity = '1'; + tag.style.transform = 'translateY(0)'; + }, 100); + }); + } + + // ========================================== + // Ripple Effect on Buttons + // ========================================== + const buttons = document.querySelectorAll('.btn'); + + buttons.forEach(button => { + button.addEventListener('click', function(e) { + const ripple = document.createElement('span'); + const rect = this.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.cssText = ` + position: absolute; + width: ${size}px; + height: ${size}px; + left: ${x}px; + top: ${y}px; + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + transform: scale(0); + animation: ripple 0.6s ease-out; + pointer-events: none; + `; + + this.style.position = 'relative'; + this.style.overflow = 'hidden'; + this.appendChild(ripple); + + setTimeout(() => ripple.remove(), 600); + }); + }); + + const rippleStyle = document.createElement('style'); + rippleStyle.textContent = ` + @keyframes ripple { + to { + transform: scale(4); + opacity: 0; + } + } + `; + document.head.appendChild(rippleStyle); + +}); + +// ========================================== +// Console Easter Egg +// ========================================== +console.log('%c AI Vertice ', 'background: linear-gradient(90deg, #6366f1, #8b5cf6); color: white; font-size: 24px; padding: 10px 20px; border-radius: 8px;'); +console.log('%c Transformando dados com IA 🚀', 'color: #8b5cf6; font-size: 14px;'); + +// ========================================== + +// Product Carousel Navigation +document.addEventListener('DOMContentLoaded', () => { + const showcase = document.querySelector('.products-showcase'); + const dots = document.querySelectorAll('.product-nav-dot'); + + if (!showcase || !dots.length) return; + + dots.forEach(dot => { + dot.addEventListener('click', () => { + const productId = dot.dataset.product; + const target = document.getElementById('product-' + productId); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); + dots.forEach(d => d.classList.remove('active')); + dot.classList.add('active'); + } + }); + }); + + // Update active dot on scroll + if ('IntersectionObserver' in window) { + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const id = entry.target.id.replace('product-', ''); + dots.forEach(d => { + d.classList.toggle('active', d.dataset.product === id); + }); + } + }); + }, { root: showcase, threshold: 0.5 }); + + showcase.querySelectorAll('.product-hero').forEach(hero => observer.observe(hero)); + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..304be23 --- /dev/null +++ b/styles.css @@ -0,0 +1,4856 @@ +/* ========================================== + AI VERTICE - Ultra Premium Design + ========================================== */ + +/* CSS Variables */ +:root { + --primary: #6366f1; + --primary-dark: #4f46e5; + --primary-light: #818cf8; + --secondary: #0ea5e9; + --accent: #8b5cf6; + --accent-pink: #ec4899; + --accent-cyan: #22d3ee; + --dark: #030712; + --dark-light: #111827; + --dark-card: #0f172a; + --gray-900: #111827; + --gray-800: #1f2937; + --gray-700: #374151; + --gray-600: #4b5563; + --gray-500: #6b7280; + --gray-400: #9ca3af; + --gray-300: #d1d5db; + --gray-200: #e5e7eb; + --gray-100: #f3f4f6; + --white: #ffffff; + --success: #10b981; + --warning: #f59e0b; + --error: #ef4444; + + --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--accent-pink) 100%); + --gradient-hero: linear-gradient(135deg, #030712 0%, #0f172a 50%, #1e1b4b 100%); + --gradient-card: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%); + --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%); + + --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.4); + --shadow-glow-lg: 0 0 100px rgba(99, 102, 241, 0.3); + + --radius-sm: 0.5rem; + --radius: 0.75rem; + --radius-md: 1rem; + --radius-lg: 1.25rem; + --radius-xl: 1.5rem; + --radius-2xl: 2rem; + --radius-full: 9999px; + + --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + --transition-spring: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +/* Reset & Base */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 16px; + line-height: 1.7; + color: var(--gray-300); + background: var(--dark); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +/* Animated Star Background */ +.bg-animation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; +} + +.stars, .stars2, .stars3 { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: transparent; +} + +.stars { + background-image: + radial-gradient(2px 2px at 20px 30px, #fff, transparent), + radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent), + radial-gradient(1px 1px at 90px 40px, #fff, transparent), + radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent), + radial-gradient(1px 1px at 230px 80px, #fff, transparent), + radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent), + radial-gradient(1px 1px at 370px 50px, #fff, transparent); + background-size: 400px 200px; + animation: animStar 100s linear infinite; + opacity: 0.4; +} + +.stars2 { + background-image: + radial-gradient(1px 1px at 50px 50px, var(--primary-light), transparent), + radial-gradient(1px 1px at 150px 100px, var(--accent), transparent), + radial-gradient(2px 2px at 250px 150px, var(--primary), transparent); + background-size: 300px 200px; + animation: animStar 80s linear infinite; + opacity: 0.3; +} + +.stars3 { + background-image: + radial-gradient(1px 1px at 100px 80px, var(--accent-cyan), transparent), + radial-gradient(1px 1px at 200px 120px, var(--accent-pink), transparent); + background-size: 350px 250px; + animation: animStar 120s linear infinite; + opacity: 0.2; +} + +@keyframes animStar { + from { transform: translateY(0); } + to { transform: translateY(-2000px); } +} + +/* Cursor Glow */ +.cursor-glow { + position: fixed; + width: 400px; + height: 400px; + background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%); + border-radius: 50%; + pointer-events: none; + z-index: 1; + transform: translate(-50%, -50%); + transition: opacity 0.3s; +} + +/* Selection */ +::selection { + background: var(--primary); + color: var(--white); +} + +img { max-width: 100%; height: auto; } +a { color: inherit; text-decoration: none; transition: var(--transition-fast); } +ul { list-style: none; } + +/* Container */ +.container { + width: 100%; + max-width: 1320px; + margin: 0 auto; + padding: 0 2rem; + position: relative; + z-index: 2; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + color: var(--white); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.02em; +} + +h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 800; } +h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); } +h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } + +.gradient-text { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.highlight-text { + position: relative; + color: var(--white); +} + +.highlight-text::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 30%; + background: var(--gradient-primary); + opacity: 0.3; + z-index: -1; + border-radius: 4px; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + padding: 0.875rem 1.75rem; + font-size: 0.9375rem; + font-weight: 600; + border-radius: var(--radius-lg); + border: none; + cursor: pointer; + transition: var(--transition); + white-space: nowrap; + position: relative; + overflow: hidden; +} + +.btn-primary { + background: var(--gradient-primary); + color: var(--white); +} + +.btn-glow { + box-shadow: 0 0 30px rgba(99, 102, 241, 0.4), 0 0 60px rgba(139, 92, 246, 0.2); +} + +.btn-glow:hover { + box-shadow: 0 0 40px rgba(99, 102, 241, 0.6), 0 0 80px rgba(139, 92, 246, 0.3); + transform: translateY(-3px); +} + +.btn-outline { + background: transparent; + color: var(--white); + border: 1px solid var(--gray-700); +} + +.btn-outline:hover { + border-color: var(--primary); + background: rgba(99, 102, 241, 0.1); +} + +.btn-glass { + background: var(--gradient-glass); + backdrop-filter: blur(20px); + color: var(--white); + border: 1px solid rgba(255,255,255,0.1); +} + +.btn-glass:hover { + background: rgba(255,255,255,0.15); + border-color: rgba(255,255,255,0.2); +} + +.btn-white { + background: var(--white); + color: var(--dark); +} + +.btn-white:hover { + background: var(--gray-100); + transform: translateY(-3px); + box-shadow: 0 20px 40px rgba(0,0,0,0.3); +} + +.btn-outline-white { + background: transparent; + color: var(--white); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.btn-outline-white:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.5); +} + +.btn-lg { + padding: 1.125rem 2.25rem; + font-size: 1rem; +} + +.btn-full { width: 100%; } + +.btn-arrow { + width: 18px; + height: 18px; + transition: transform 0.3s; +} + +.btn:hover .btn-arrow { + transform: translateX(4px); +} + +.btn-icon { + font-size: 0.75rem; +} + +/* ========================================== + HEADER + ========================================== */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(3, 7, 18, 0.7); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 1.5rem; + font-weight: 800; + color: var(--white); +} + +.logo-icon-wrapper { + position: relative; +} + +.logo-icon { + color: var(--primary); + font-size: 1.75rem; + position: relative; + z-index: 1; +} + +.logo-glow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 40px; + height: 40px; + background: var(--primary); + filter: blur(15px); + opacity: 0.5; + border-radius: 50%; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2.5rem; +} + +.nav-links a { + color: var(--gray-400); + font-weight: 500; + font-size: 0.9375rem; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: var(--gradient-primary); + transition: width 0.3s; +} + +.nav-links a:hover { + color: var(--white); +} + +.nav-links a:hover::after { + width: 100%; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; +} + +.mobile-menu-btn span { + width: 24px; + height: 2px; + background: var(--white); + border-radius: 2px; + transition: var(--transition); +} + +/* ========================================== + HERO SECTION + ========================================== */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + padding: 10rem 0 6rem; + overflow: hidden; +} + +.hero .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 1rem 0.5rem 0.5rem; + background: var(--gradient-glass); + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--radius-full); + font-size: 0.875rem; + color: var(--gray-300); + margin-bottom: 1.5rem; +} + +.badge-dot { + width: 8px; + height: 8px; + background: var(--success); + border-radius: 50%; + animation: pulse-dot 2s infinite; +} + +@keyframes pulse-dot { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.2); } +} + +.hero-title { + margin-bottom: 1.5rem; +} + +.title-line { + display: block; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--gray-400); + margin-bottom: 2.5rem; + max-width: 540px; + line-height: 1.8; +} + +.hero-subtitle strong { + color: var(--white); +} + +.hero-cta { + display: flex; + gap: 1rem; + margin-bottom: 4rem; +} + +.hero-stats { + display: flex; + gap: 3rem; +} + +.stat { + display: flex; + flex-direction: column; +} + +.stat-number { + font-size: 2.5rem; + font-weight: 800; + color: var(--white); +} + +.stat-suffix { + font-size: 2rem; + font-weight: 800; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.stat-label { + font-size: 0.875rem; + color: var(--gray-500); + margin-bottom: 0.5rem; +} + +.stat-bar { + width: 100%; + height: 3px; + background: var(--gray-800); + border-radius: var(--radius-full); + overflow: hidden; +} + +.stat-bar-fill { + height: 100%; + width: 0; + background: var(--gradient-primary); + border-radius: var(--radius-full); + animation: fillBar 2s ease forwards; + animation-delay: 1s; +} + +@keyframes fillBar { + to { width: var(--width); } +} + +/* Hero Visual */ +.hero-visual { + position: relative; + height: 500px; +} + +/* Neural Network */ +.neural-network { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 400px; + height: 400px; +} + +.connections { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.connection { + stroke: url(#gradient); + stroke: var(--primary); + stroke-width: 2; + opacity: 0.3; + stroke-dasharray: 5 5; + animation: dash 20s linear infinite; +} + +@keyframes dash { + to { stroke-dashoffset: -100; } +} + +.node { + position: absolute; + width: 60px; + height: 60px; + background: var(--gradient-glass); + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + animation: nodeFloat 6s ease-in-out infinite; + box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); +} + +.node-1 { top: 5%; left: 50%; transform: translateX(-50%); animation-delay: 0s; } +.node-2 { top: 35%; left: 10%; animation-delay: 1s; } +.node-3 { top: 35%; right: 10%; animation-delay: 2s; } +.node-4 { bottom: 10%; left: 25%; animation-delay: 3s; } +.node-5 { bottom: 10%; right: 25%; animation-delay: 4s; } + +@keyframes nodeFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.floating-card { + position: absolute; + background: var(--gradient-glass); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + padding: 1rem 1.25rem; + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--white); + font-weight: 500; + font-size: 0.875rem; + animation: float 6s ease-in-out infinite; + box-shadow: 0 20px 40px rgba(0,0,0,0.3); +} + +.floating-card .card-icon { + font-size: 1.25rem; +} + +.card-pulse { + position: absolute; + top: -2px; + right: -2px; + width: 8px; + height: 8px; + background: var(--success); + border-radius: 50%; + animation: pulse-dot 2s infinite; +} + +.card-status { + width: 8px; + height: 8px; + border-radius: 50%; + margin-left: auto; +} + +.card-status.online { + background: var(--success); + box-shadow: 0 0 10px var(--success); +} + +.card-progress { + width: 60px; + height: 4px; + background: var(--gray-700); + border-radius: var(--radius-full); + overflow: hidden; + margin-left: auto; +} + +.progress-fill { + height: 100%; + width: 60%; + background: var(--gradient-primary); + animation: progressMove 2s ease-in-out infinite; +} + +@keyframes progressMove { + 0% { width: 20%; } + 50% { width: 80%; } + 100% { width: 20%; } +} + +.card-1 { top: 5%; left: 0; animation-delay: 0s; } +.card-2 { top: 45%; right: -10%; animation-delay: 2s; } +.card-3 { bottom: 10%; left: 5%; animation-delay: 4s; } + +@keyframes float { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-15px) rotate(1deg); } +} + +/* Hero Scroll Indicator */ +.hero-scroll { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + color: var(--gray-500); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.scroll-indicator { + width: 20px; + height: 32px; + border: 2px solid var(--gray-600); + border-radius: var(--radius-full); + position: relative; +} + +.scroll-indicator::before { + content: ''; + position: absolute; + top: 6px; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 8px; + background: var(--primary); + border-radius: var(--radius-full); + animation: scrollDown 2s infinite; +} + +@keyframes scrollDown { + 0% { opacity: 1; top: 6px; } + 100% { opacity: 0; top: 18px; } +} + +/* ========================================== + SECTIONS + ========================================== */ +.section { + padding: 8rem 0; + position: relative; +} + +.section-header { + text-align: center; + max-width: 800px; + margin: 0 auto 5rem; +} + +.section-tag { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--gradient-glass); + backdrop-filter: blur(10px); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: var(--radius-full); + font-size: 0.8125rem; + font-weight: 600; + color: var(--primary-light); + margin-bottom: 1.25rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.tag-icon { + font-size: 1rem; +} + +.section-title { + margin-bottom: 1rem; +} + +.section-subtitle { + font-size: 1.125rem; + color: var(--gray-400); + line-height: 1.8; +} + +/* ========================================== + LOGOS SECTION + ========================================== */ +.logos-section { + padding: 4rem 0; + border-top: 1px solid rgba(255,255,255,0.05); + border-bottom: 1px solid rgba(255,255,255,0.05); + background: rgba(0,0,0,0.2); +} + +.logos-title { + text-align: center; + font-size: 0.875rem; + color: var(--gray-500); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 2rem; +} + +.logos-track { + overflow: hidden; + mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); +} + +.logos-slide { + display: flex; + gap: 4rem; + animation: slideLogos 20s linear infinite; +} + +@keyframes slideLogos { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +.logo-item { + flex-shrink: 0; + color: var(--gray-500); + font-weight: 600; + font-size: 1.125rem; + white-space: nowrap; + transition: var(--transition); +} + +.logo-item:hover { + color: var(--white); +} + +/* ========================================== + PLATFORM SECTION + ========================================== */ +.platform { + background: linear-gradient(180deg, var(--dark) 0%, var(--dark-light) 100%); +} + +.platform-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} + +.platform-card { + position: relative; + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2rem; + text-align: center; + transition: var(--transition); + overflow: hidden; +} + +.platform-card:hover { + border-color: var(--primary); + transform: translateY(-8px); +} + +.platform-card:hover .card-glow { + opacity: 1; +} + +.card-glow { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 70%); + opacity: 0; + transition: var(--transition); + pointer-events: none; +} + +.platform-icon { + width: 70px; + height: 70px; + margin: 0 auto 1.5rem; + background: var(--gradient-glass); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + color: var(--primary-light); + transition: var(--transition); +} + +.platform-card:hover .platform-icon { + background: var(--gradient-primary); + color: var(--white); + transform: scale(1.1); +} + +.platform-icon svg { + width: 32px; + height: 32px; +} + +.platform-card h3 { + margin-bottom: 0.75rem; + font-size: 1.25rem; +} + +.platform-card p { + font-size: 0.9375rem; + color: var(--gray-500); + margin-bottom: 1.5rem; +} + +.card-footer { + display: flex; + gap: 0.5rem; + justify-content: center; + flex-wrap: wrap; +} + +.card-tag { + padding: 0.25rem 0.75rem; + background: rgba(99, 102, 241, 0.1); + border-radius: var(--radius-full); + font-size: 0.75rem; + color: var(--primary-light); + font-weight: 500; +} + +/* ========================================== + HOW IT WORKS - TIMELINE + ========================================== */ +.how-it-works { + background: var(--dark); +} + +.timeline { + position: relative; + max-width: 900px; + margin: 0 auto; +} + +.timeline-line { + position: absolute; + left: 40px; + top: 0; + bottom: 0; + width: 2px; + background: linear-gradient(180deg, var(--primary), var(--accent), var(--accent-pink)); + opacity: 0.3; +} + +.timeline-item { + display: flex; + gap: 3rem; + margin-bottom: 3rem; + position: relative; +} + +.timeline-marker { + position: relative; + width: 80px; + height: 80px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.marker-number { + width: 60px; + height: 60px; + background: var(--dark-card); + border: 2px solid var(--primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 800; + font-size: 1.25rem; + color: var(--primary-light); + position: relative; + z-index: 1; +} + +.marker-pulse { + position: absolute; + width: 80px; + height: 80px; + background: var(--primary); + border-radius: 50%; + opacity: 0; + animation: markerPulse 3s infinite; +} + +@keyframes markerPulse { + 0% { transform: scale(0.5); opacity: 0.3; } + 100% { transform: scale(1); opacity: 0; } +} + +.timeline-content { + flex: 1; + padding: 1.5rem 2rem; + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + transition: var(--transition); +} + +.timeline-item:hover .timeline-content { + border-color: var(--primary); + transform: translateX(10px); +} + +.timeline-content h3 { + margin-bottom: 0.75rem; + font-size: 1.25rem; +} + +.timeline-content p { + color: var(--gray-400); + font-size: 0.9375rem; +} + +/* ========================================== + USE CASES + ========================================== */ +.use-cases { + background: linear-gradient(180deg, var(--dark-light) 0%, var(--dark) 100%); +} + +.use-cases-grid { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr; + gap: 1.5rem; +} + +.use-case-card { + position: relative; + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2rem; + transition: var(--transition); + overflow: hidden; +} + +.use-case-card.large { + grid-row: span 2; +} + +.use-case-card:hover { + border-color: var(--primary); + transform: translateY(-4px); +} + +.use-case-card .card-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.1) 0%, transparent 50%); + opacity: 0; + transition: var(--transition); +} + +.use-case-card:hover .card-bg { + opacity: 1; +} + +.use-case-icon { + font-size: 2.5rem; + margin-bottom: 1.25rem; +} + +.use-case-card h3 { + margin-bottom: 0.5rem; + font-size: 1.25rem; +} + +.use-case-card > p { + color: var(--gray-500); + margin-bottom: 1.5rem; + font-size: 0.9375rem; +} + +.use-case-list { + margin-bottom: 1.5rem; +} + +.use-case-list li { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.625rem 0; + color: var(--gray-400); + font-size: 0.9375rem; + border-bottom: 1px solid var(--gray-800); +} + +.use-case-list li:last-child { + border-bottom: none; +} + +.use-case-list .check { + color: var(--success); + font-weight: 700; +} + +.use-case-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-light); + font-weight: 600; + font-size: 0.9375rem; +} + +.use-case-link svg { + width: 16px; + height: 16px; + transition: transform 0.3s; +} + +.use-case-link:hover { + color: var(--white); +} + +.use-case-link:hover svg { + transform: translateX(4px); +} + +/* ========================================== + METRICS SECTION + ========================================== */ +.metrics-section { + padding: 6rem 0; + background: var(--dark-card); + border-top: 1px solid var(--gray-800); + border-bottom: 1px solid var(--gray-800); +} + +.metrics-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.metric-card { + text-align: center; + padding: 2rem; +} + +.metric-icon { + font-size: 2rem; + margin-bottom: 1rem; +} + +.metric-value { + font-size: 2.5rem; + font-weight: 800; + color: var(--white); + margin-bottom: 0.5rem; +} + +.metric-value span { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.metric-label { + font-size: 1rem; + color: var(--gray-300); + font-weight: 600; + margin-bottom: 0.25rem; +} + +.metric-detail { + font-size: 0.8125rem; + color: var(--gray-500); +} + +/* ========================================== + TESTIMONIALS + ========================================== */ +.testimonials { + background: var(--dark); +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.testimonial-card { + position: relative; + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2rem; + transition: var(--transition); +} + +.testimonial-card:hover { + border-color: var(--primary); + transform: translateY(-4px); +} + +.testimonial-quote { + position: absolute; + top: 1rem; + left: 1.5rem; + font-size: 4rem; + font-family: Georgia, serif; + color: var(--primary); + opacity: 0.3; + line-height: 1; +} + +.testimonial-text { + font-size: 1rem; + color: var(--gray-300); + margin-bottom: 1.5rem; + padding-top: 1rem; + line-height: 1.8; + position: relative; + z-index: 1; +} + +.testimonial-text strong { + color: var(--white); +} + +.testimonial-footer { + display: flex; + align-items: center; + gap: 1rem; +} + +.testimonial-avatar { + position: relative; + width: 48px; + height: 48px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; +} + +.avatar-glow { + position: absolute; + inset: -3px; + background: var(--gradient-primary); + border-radius: 50%; + opacity: 0.3; + filter: blur(8px); +} + +.testimonial-info { + display: flex; + flex-direction: column; +} + +.testimonial-role { + color: var(--white); + font-weight: 600; + font-size: 0.9375rem; +} + +.testimonial-company { + font-size: 0.8125rem; + color: var(--gray-500); +} + +.testimonial-rating { + position: absolute; + top: 1.5rem; + right: 1.5rem; + color: var(--warning); + font-size: 0.75rem; + letter-spacing: 2px; +} + +/* ========================================== + INTEGRATIONS + ========================================== */ +.integrations { + background: linear-gradient(180deg, var(--dark) 0%, var(--dark-light) 100%); +} + +.integrations-showcase { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.integration-category { + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2rem; +} + +.integration-category h4 { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--white); + margin-bottom: 1.5rem; + font-size: 1rem; +} + +.cat-icon { + font-size: 1.25rem; +} + +.integration-items { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.integration-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1rem; + background: var(--dark); + border: 1px solid var(--gray-700); + border-radius: var(--radius); + font-size: 0.875rem; + color: var(--gray-400); + transition: var(--transition); +} + +.integration-item:hover { + border-color: var(--primary); + color: var(--white); + background: rgba(99, 102, 241, 0.1); +} + +.int-icon { + font-size: 1rem; +} + +/* ========================================== + WHY US / FEATURES + ========================================== */ +.why-us { + background: var(--dark-light); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +.feature-card { + position: relative; + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2rem; + text-align: center; + transition: var(--transition); + overflow: hidden; +} + +.feature-card:hover { + border-color: var(--primary); + transform: translateY(-4px); +} + +.feature-glow { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 200px; + height: 200px; + background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%); + opacity: 0; + transition: var(--transition); +} + +.feature-card:hover .feature-glow { + opacity: 1; +} + +.feature-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + margin-bottom: 0.75rem; + font-size: 1.125rem; +} + +.feature-card p { + color: var(--gray-500); + font-size: 0.9375rem; +} + +/* ========================================== + FAQ + ========================================== */ +.faq { + background: var(--dark); +} + +.faq-grid { + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.faq-item { + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-lg); + overflow: hidden; + transition: var(--transition); +} + +.faq-item:hover, +.faq-item.active { + border-color: var(--primary); +} + +.faq-question { + width: 100%; + padding: 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + background: none; + border: none; + color: var(--white); + font-size: 1rem; + font-weight: 600; + text-align: left; + cursor: pointer; + transition: var(--transition); + gap: 1rem; +} + +.faq-question:hover { + color: var(--primary-light); +} + +.faq-icon { + width: 24px; + height: 24px; + border-radius: 50%; + background: var(--gradient-card); + border: 1px solid var(--gray-700); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: var(--transition); +} + +.faq-icon span { + width: 10px; + height: 2px; + background: var(--primary); + position: relative; +} + +.faq-icon span::after { + content: ''; + position: absolute; + width: 2px; + height: 10px; + background: var(--primary); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: var(--transition); +} + +.faq-item.active .faq-icon { + background: var(--gradient-primary); + border-color: transparent; +} + +.faq-item.active .faq-icon span, +.faq-item.active .faq-icon span::after { + background: var(--white); +} + +.faq-item.active .faq-icon span::after { + transform: translate(-50%, -50%) rotate(90deg); +} + +.faq-answer { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease; +} + +.faq-item.active .faq-answer { + max-height: 500px; +} + +.faq-answer p { + padding: 0 1.5rem 1.5rem; + color: var(--gray-400); + line-height: 1.8; +} + +/* ========================================== + CTA SECTION + ========================================== */ +.cta-section { + position: relative; + padding: 8rem 0; + overflow: hidden; +} + +.cta-bg { + position: absolute; + inset: 0; + background: var(--gradient-primary); +} + +.cta-orb { + position: absolute; + border-radius: 50%; + filter: blur(100px); +} + +.cta-orb-1 { + width: 400px; + height: 400px; + background: rgba(255,255,255,0.1); + top: -100px; + left: -100px; +} + +.cta-orb-2 { + width: 300px; + height: 300px; + background: rgba(0,0,0,0.2); + bottom: -50px; + right: 10%; +} + +.cta-orb-3 { + width: 200px; + height: 200px; + background: rgba(255,255,255,0.1); + top: 50%; + right: -50px; +} + +.cta-content { + position: relative; + text-align: center; + max-width: 700px; + margin: 0 auto; + z-index: 1; +} + +.cta-badge { + display: inline-block; + padding: 0.5rem 1rem; + background: rgba(255,255,255,0.2); + border-radius: var(--radius-full); + font-size: 0.875rem; + font-weight: 600; + color: var(--white); + margin-bottom: 1.5rem; +} + +.cta-content h2 { + margin-bottom: 1rem; + font-size: 2.5rem; +} + +.cta-content p { + color: rgba(255, 255, 255, 0.8); + font-size: 1.125rem; + margin-bottom: 2.5rem; +} + +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin-bottom: 2rem; +} + +.cta-trust { + display: flex; + gap: 2rem; + justify-content: center; + font-size: 0.875rem; + color: rgba(255,255,255,0.8); +} + +/* ========================================== + CONTACT + ========================================== */ +.contact { + background: var(--dark-light); +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 4rem; + align-items: start; +} + +.contact-info h2 { + font-size: 2.5rem; + margin: 1rem 0; +} + +.contact-info > p { + color: var(--gray-400); + margin-bottom: 2rem; + font-size: 1.0625rem; +} + +.contact-details { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.contact-item { + display: flex; + align-items: center; + gap: 1rem; +} + +.contact-icon-wrapper { + width: 50px; + height: 50px; + background: var(--gradient-glass); + border: 1px solid var(--gray-700); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; +} + +.contact-label { + display: block; + font-size: 0.75rem; + color: var(--gray-500); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 0.25rem; +} + +.contact-item a { + color: var(--white); + font-weight: 500; +} + +.contact-item a:hover { + color: var(--primary-light); +} + +.contact-form { + background: var(--dark-card); + border: 1px solid var(--gray-800); + border-radius: var(--radius-xl); + padding: 2.5rem; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.form-group { + margin-bottom: 1.25rem; +} + +.form-group label { + display: block; + font-size: 0.875rem; + font-weight: 500; + color: var(--gray-400); + margin-bottom: 0.5rem; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 1rem 1.25rem; + background: var(--dark); + border: 1px solid var(--gray-700); + border-radius: var(--radius-md); + color: var(--white); + font-size: 1rem; + font-family: inherit; + transition: var(--transition); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: var(--gray-600); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +/* ========================================== + FOOTER + ========================================== */ +.footer { + background: var(--dark); + padding: 5rem 0 2rem; + border-top: 1px solid var(--gray-800); +} + +.footer-grid { + display: grid; + grid-template-columns: 1.5fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 4rem; +} + +.footer-brand p { + color: var(--gray-500); + margin: 1.5rem 0; + max-width: 300px; + font-size: 0.9375rem; +} + +.social-links { + display: flex; + gap: 0.75rem; +} + +.social-links a { + width: 40px; + height: 40px; + background: var(--dark-card); + border: 1px solid var(--gray-700); + border-radius: var(--radius); + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-400); + font-weight: 700; + transition: var(--transition); +} + +.social-links a:hover { + border-color: var(--primary); + color: var(--white); + background: rgba(99, 102, 241, 0.1); +} + +.footer-links h4 { + color: var(--white); + font-size: 0.9375rem; + margin-bottom: 1.5rem; +} + +.footer-links ul { + display: flex; + flex-direction: column; + gap: 0.875rem; +} + +.footer-links a { + color: var(--gray-500); + font-size: 0.9375rem; +} + +.footer-links a:hover { + color: var(--white); +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid var(--gray-800); + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-bottom p { + color: var(--gray-600); + font-size: 0.875rem; +} + +.footer-tagline { + color: var(--gray-500); +} + +/* ========================================== + RESPONSIVE + ========================================== */ +@media (max-width: 1200px) { + .platform-grid { grid-template-columns: repeat(2, 1fr); } + .metrics-grid { grid-template-columns: repeat(2, 1fr); } + .use-cases-grid { grid-template-columns: 1fr 1fr; } + .use-case-card.large { grid-row: auto; } +} + +@media (max-width: 992px) { + .hero .container { grid-template-columns: 1fr; text-align: center; } + .hero-subtitle { margin: 0 auto 2.5rem; } + .hero-cta { justify-content: center; } + .hero-stats { justify-content: center; } + .hero-visual { display: none; } + + .nav-links, .nav-actions { display: none; } + .mobile-menu-btn { display: flex; } + + .testimonials-grid, + .features-grid { grid-template-columns: 1fr; } + + .footer-grid { grid-template-columns: 1fr 1fr; } + .contact-wrapper { grid-template-columns: 1fr; } + .integrations-showcase { grid-template-columns: 1fr; } + + .timeline-item { flex-direction: column; gap: 1rem; } + .timeline-line { left: 20px; } + .timeline-marker { margin-left: -20px; } +} + +@media (max-width: 768px) { + .section { padding: 5rem 0; } + .container { padding: 0 1.25rem; } + + .platform-grid { grid-template-columns: 1fr; } + .use-cases-grid { grid-template-columns: 1fr; } + .metrics-grid { grid-template-columns: 1fr; } + + .hero-stats { flex-direction: column; gap: 2rem; } + .cta-buttons { flex-direction: column; } + .cta-trust { flex-direction: column; gap: 0.5rem; } + + .footer-grid { grid-template-columns: 1fr; text-align: center; } + .footer-brand { display: flex; flex-direction: column; align-items: center; } + .footer-brand p { text-align: center; } + .social-links { justify-content: center; } + .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } + + .form-row { grid-template-columns: 1fr; } +} + +@media (max-width: 480px) { + .btn-lg { padding: 1rem 1.5rem; width: 100%; } + .hero-cta { flex-direction: column; } + .hero-badge { font-size: 0.75rem; } +} + +/* ========================================== + AI ASSISTANT - JARVIS STYLE + ========================================== */ +.ai-assistant { + position: fixed; + bottom: 2rem; + right: 2rem; + z-index: 9999; +} + +.ai-orb { + width: 70px; + height: 70px; + cursor: pointer; + position: relative; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.3s; +} + +.ai-orb:hover { + transform: scale(1.1); +} + +.orb-core { + width: 50px; + height: 50px; + background: radial-gradient(circle at 30% 30%, #818cf8, #4f46e5, #1e1b4b); + border-radius: 50%; + box-shadow: + 0 0 30px rgba(99, 102, 241, 0.6), + 0 0 60px rgba(99, 102, 241, 0.4), + inset 0 0 20px rgba(255,255,255,0.2); + animation: orbPulse 2s ease-in-out infinite; + position: relative; + z-index: 2; +} + +.orb-core::before { + content: '◆'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1.25rem; + color: white; + text-shadow: 0 0 10px rgba(255,255,255,0.8); +} + +@keyframes orbPulse { + 0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 0 60px rgba(99, 102, 241, 0.4); } + 50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(99, 102, 241, 0.8), 0 0 80px rgba(99, 102, 241, 0.5); } +} + +.orb-ring { + position: absolute; + border: 2px solid rgba(99, 102, 241, 0.3); + border-radius: 50%; + animation: ringRotate 10s linear infinite; +} + +.ring-1 { + width: 60px; + height: 60px; + border-top-color: #6366f1; + animation-duration: 8s; +} + +.ring-2 { + width: 70px; + height: 70px; + border-right-color: #8b5cf6; + animation-duration: 12s; + animation-direction: reverse; +} + +.ring-3 { + width: 80px; + height: 80px; + border-bottom-color: #ec4899; + animation-duration: 15s; +} + +@keyframes ringRotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.orb-pulse { + position: absolute; + width: 100%; + height: 100%; + background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%); + border-radius: 50%; + animation: orbPulseWave 2s ease-out infinite; +} + +@keyframes orbPulseWave { + 0% { transform: scale(1); opacity: 0.5; } + 100% { transform: scale(2); opacity: 0; } +} + +/* AI Chat Window */ +.ai-chat { + position: absolute; + bottom: 90px; + right: 0; + width: 380px; + background: rgba(3, 7, 18, 0.95); + backdrop-filter: blur(20px); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: 20px; + overflow: hidden; + transform: scale(0.8) translateY(20px); + opacity: 0; + pointer-events: none; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: + 0 25px 50px rgba(0,0,0,0.5), + 0 0 100px rgba(99, 102, 241, 0.2), + inset 0 1px 0 rgba(255,255,255,0.1); +} + +.ai-chat.active { + transform: scale(1) translateY(0); + opacity: 1; + pointer-events: all; +} + +.ai-chat-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.25rem; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); + border-bottom: 1px solid rgba(99, 102, 241, 0.2); +} + +.ai-status { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 0.875rem; + color: var(--white); + letter-spacing: 0.1em; +} + +.ai-status-dot { + width: 8px; + height: 8px; + background: #10b981; + border-radius: 50%; + animation: statusPulse 2s infinite; + box-shadow: 0 0 10px #10b981; +} + +@keyframes statusPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.ai-close { + width: 28px; + height: 28px; + background: rgba(255,255,255,0.1); + border: none; + border-radius: 50%; + color: var(--gray-400); + font-size: 1.25rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; +} + +.ai-close:hover { + background: rgba(239, 68, 68, 0.2); + color: #ef4444; +} + +.ai-chat-messages { + height: 300px; + overflow-y: auto; + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.ai-chat-messages::-webkit-scrollbar { + width: 4px; +} + +.ai-chat-messages::-webkit-scrollbar-thumb { + background: var(--primary); + border-radius: 4px; +} + +.ai-message { + display: flex; + gap: 0.75rem; + animation: messageIn 0.4s ease; +} + +@keyframes messageIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.ai-message-user { + flex-direction: row-reverse; +} + +.ai-avatar { + width: 36px; + height: 36px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875rem; + color: white; + flex-shrink: 0; + box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); +} + +.ai-message-user .ai-avatar { + background: var(--gray-700); + box-shadow: none; +} + +.ai-bubble { + max-width: 80%; + padding: 0.875rem 1rem; + background: rgba(99, 102, 241, 0.15); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 16px; + border-top-left-radius: 4px; + color: var(--gray-200); + font-size: 0.9375rem; + line-height: 1.6; +} + +.ai-message-user .ai-bubble { + background: var(--gray-800); + border-color: var(--gray-700); + border-radius: 16px; + border-top-right-radius: 4px; +} + +.typing-text::after { + content: '|'; + animation: blink 0.8s infinite; + color: var(--primary); +} + +@keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } +} + +.ai-chat-input { + display: flex; + gap: 0.5rem; + padding: 1rem 1.25rem; + background: rgba(0,0,0,0.3); + border-top: 1px solid rgba(255,255,255,0.05); +} + +.ai-chat-input input { + flex: 1; + padding: 0.875rem 1rem; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + color: var(--white); + font-size: 0.9375rem; + outline: none; + transition: all 0.3s; +} + +.ai-chat-input input:focus { + border-color: var(--primary); + background: rgba(99, 102, 241, 0.1); + box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); +} + +.ai-chat-input input::placeholder { + color: var(--gray-500); +} + +.ai-chat-input button { + width: 48px; + height: 48px; + background: var(--gradient-primary); + border: none; + border-radius: 12px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; + box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); +} + +.ai-chat-input button:hover { + transform: scale(1.05); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); +} + +.ai-chat-input button svg { + width: 20px; + height: 20px; + color: white; +} + +.ai-suggestions { + display: flex; + gap: 0.5rem; + padding: 0 1.25rem 1rem; + flex-wrap: wrap; +} + +.ai-suggestion { + padding: 0.5rem 0.875rem; + background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 20px; + color: var(--primary-light); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.3s; +} + +.ai-suggestion:hover { + background: rgba(99, 102, 241, 0.2); + border-color: var(--primary); +} + +/* HUD Overlay */ +.hud-overlay { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 9998; + opacity: 0; + transition: opacity 0.5s; +} + +.hud-overlay.active { + opacity: 1; +} + +.hud-corner { + position: absolute; + width: 100px; + height: 100px; + border: 2px solid rgba(99, 102, 241, 0.3); +} + +.hud-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; } +.hud-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; } +.hud-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; } +.hud-br { bottom: 20px; right: 20px; border-left: none; border-top: none; } + +.hud-scan-line { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent); + animation: scanLine 3s linear infinite; + opacity: 0.5; +} + +@keyframes scanLine { + 0% { top: 0; } + 100% { top: 100%; } +} + +/* Voice Button */ +.voice-btn { + position: fixed; + bottom: 2rem; + left: 2rem; + width: 60px; + height: 60px; + background: rgba(3, 7, 18, 0.9); + backdrop-filter: blur(10px); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + transition: all 0.3s; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); +} + +.voice-btn:hover { + border-color: var(--primary); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); +} + +.voice-btn svg { + width: 24px; + height: 24px; + color: var(--primary-light); + transition: all 0.3s; +} + +.voice-btn.listening svg { + color: #ef4444; +} + +.voice-btn.listening { + border-color: #ef4444; + animation: voicePulse 1s infinite; +} + +@keyframes voicePulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } + 50% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); } +} + +.voice-waves { + position: absolute; + display: flex; + gap: 3px; + opacity: 0; + transition: opacity 0.3s; +} + +.voice-btn.listening .voice-waves { + opacity: 1; +} + +.voice-btn.listening svg { + opacity: 0; +} + +.voice-waves span { + width: 4px; + height: 20px; + background: #ef4444; + border-radius: 2px; + animation: voiceWave 0.5s ease-in-out infinite; +} + +.voice-waves span:nth-child(1) { animation-delay: 0s; } +.voice-waves span:nth-child(2) { animation-delay: 0.1s; } +.voice-waves span:nth-child(3) { animation-delay: 0.2s; } + +@keyframes voiceWave { + 0%, 100% { height: 10px; } + 50% { height: 25px; } +} + +/* Responsive */ +@media (max-width: 768px) { + .ai-chat { + width: calc(100vw - 2rem); + right: -1rem; + bottom: 80px; + } + + .ai-assistant { + bottom: 1rem; + right: 1rem; + } + + .voice-btn { + bottom: 1rem; + left: 1rem; + width: 50px; + height: 50px; + } +} + +/* ========================================== + AI LIVE DEMO SECTION + ========================================== */ +.ai-demo-section { + background: linear-gradient(180deg, var(--dark) 0%, #0a0a1a 100%); + overflow: hidden; +} + +.ai-demo-container { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + grid-template-rows: auto auto; + gap: 1.5rem; + margin-bottom: 3rem; +} + +/* Terminal */ +.ai-terminal { + grid-row: span 2; + background: #0d1117; + border: 1px solid #30363d; + border-radius: var(--radius-xl); + overflow: hidden; + box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 100px rgba(99, 102, 241, 0.1); +} + +.terminal-header { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.875rem 1.25rem; + background: #161b22; + border-bottom: 1px solid #30363d; +} + +.terminal-dots { + display: flex; + gap: 6px; +} + +.terminal-dots .dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.dot.red { background: #ff5f56; } +.dot.yellow { background: #ffbd2e; } +.dot.green { background: #27ca40; } + +.terminal-title { + flex: 1; + text-align: center; + color: var(--gray-400); + font-size: 0.8125rem; + font-family: 'Monaco', 'Menlo', monospace; +} + +.terminal-status { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + color: #27ca40; + font-family: monospace; +} + +.status-indicator { + width: 8px; + height: 8px; + background: #27ca40; + border-radius: 50%; + animation: blink 1s infinite; +} + +.terminal-body { + height: 350px; + overflow-y: auto; + padding: 1rem; + font-family: 'Monaco', 'Menlo', 'Courier New', monospace; + font-size: 0.875rem; + line-height: 1.6; +} + +.terminal-body::-webkit-scrollbar { + width: 6px; +} + +.terminal-body::-webkit-scrollbar-thumb { + background: #30363d; + border-radius: 3px; +} + +.terminal-line { + margin-bottom: 0.5rem; + animation: terminalFadeIn 0.3s ease; +} + +@keyframes terminalFadeIn { + from { opacity: 0; transform: translateX(-10px); } + to { opacity: 1; transform: translateX(0); } +} + +.terminal-line .prompt { + color: #58a6ff; + margin-right: 0.5rem; +} + +.terminal-line .command { + color: #c9d1d9; +} + +.terminal-line .output { + color: #8b949e; + padding-left: 1rem; +} + +.terminal-line .success { + color: #27ca40; +} + +.terminal-line .error { + color: #f85149; +} + +.terminal-line .info { + color: #58a6ff; +} + +.terminal-line .warning { + color: #d29922; +} + +.terminal-line .ai { + color: #a371f7; +} + +.terminal-input { + display: flex; + align-items: center; + padding: 0.875rem 1rem; + background: #161b22; + border-top: 1px solid #30363d; +} + +.terminal-input .prompt { + color: #58a6ff; + margin-right: 0.5rem; + font-family: monospace; + font-size: 0.875rem; +} + +.terminal-input input { + flex: 1; + background: transparent; + border: none; + color: #c9d1d9; + font-family: 'Monaco', 'Menlo', monospace; + font-size: 0.875rem; + outline: none; +} + +/* Metrics Panel */ +.ai-metrics-panel { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.metric-box { + background: rgba(13, 17, 23, 0.8); + border: 1px solid #30363d; + border-radius: var(--radius-lg); + padding: 1.25rem; + transition: all 0.3s; +} + +.metric-box:hover { + border-color: var(--primary); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.2); +} + +.metric-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; + font-size: 0.8125rem; + color: var(--gray-400); +} + +.metric-icon { + font-size: 1rem; +} + +.metric-value-live { + font-size: 1.75rem; + font-weight: 800; + color: var(--white); + margin-bottom: 0.75rem; + font-family: 'Monaco', monospace; +} + +/* Chart bars */ +.metric-chart { + display: flex; + align-items: flex-end; + gap: 4px; + height: 40px; +} + +.chart-bar { + flex: 1; + height: var(--height); + background: var(--gray-700); + border-radius: 2px; + transition: all 0.3s; +} + +.chart-bar.active { + background: var(--gradient-primary); + box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); +} + +/* Speed Gauge */ +.speed-gauge { + position: relative; + height: 40px; + background: var(--gray-800); + border-radius: var(--radius); + overflow: hidden; +} + +.gauge-fill { + height: 100%; + width: 0%; + background: linear-gradient(90deg, #10b981, #22d3ee, #6366f1); + transition: width 0.3s; + border-radius: var(--radius); +} + +.gauge-needle { + position: absolute; + top: 50%; + left: 0%; + transform: translateY(-50%); + width: 3px; + height: 30px; + background: var(--white); + border-radius: 2px; + transition: left 0.3s; + box-shadow: 0 0 10px rgba(255,255,255,0.5); +} + +/* Accuracy Ring */ +.accuracy-ring { + width: 60px; + height: 60px; +} + +.accuracy-ring svg { + transform: rotate(-90deg); +} + +.ring-bg { + fill: none; + stroke: var(--gray-700); + stroke-width: 8; +} + +.ring-fill { + fill: none; + stroke: url(#gradient) #6366f1; + stroke-width: 8; + stroke-linecap: round; + stroke-dasharray: 251.2; + stroke-dashoffset: 0; + transition: stroke-dashoffset 0.5s; +} + +/* Agent Status */ +.agent-status { + display: flex; + align-items: center; + gap: 1rem; +} + +.agent-avatar { + position: relative; + width: 50px; + height: 50px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.avatar-pulse { + position: absolute; + inset: -5px; + border: 2px solid var(--primary); + border-radius: 50%; + animation: avatarPulse 2s infinite; +} + +@keyframes avatarPulse { + 0%, 100% { transform: scale(1); opacity: 0.5; } + 50% { transform: scale(1.1); opacity: 0; } +} + +.status-text { + display: flex; + flex-direction: column; +} + +.status-main { + color: var(--white); + font-weight: 600; + font-size: 0.875rem; +} + +.status-sub { + color: var(--gray-500); + font-size: 0.75rem; +} + +/* Pipeline Visual */ +.pipeline-visual { + grid-column: span 2; + display: flex; + align-items: center; + justify-content: center; + gap: 0; + padding: 2rem; + background: rgba(13, 17, 23, 0.5); + border: 1px solid #30363d; + border-radius: var(--radius-xl); +} + +.pipeline-node { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1.5rem 2rem; + background: var(--dark-card); + border: 2px solid var(--gray-700); + border-radius: var(--radius-lg); + transition: all 0.3s; +} + +.pipeline-node.active { + border-color: var(--primary); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); +} + +.pipeline-node .node-icon { + font-size: 2rem; +} + +.pipeline-node span { + font-size: 0.875rem; + color: var(--gray-300); + font-weight: 500; +} + +.pipeline-node.agent { + background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%); + border-color: var(--primary); +} + +.processing-ring { + position: absolute; + inset: -10px; + border: 2px dashed var(--primary); + border-radius: var(--radius-xl); + opacity: 0; + animation: none; +} + +.pipeline-node.agent.processing .processing-ring { + opacity: 0.5; + animation: processingRing 3s linear infinite; +} + +@keyframes processingRing { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.success-indicator { + position: absolute; + top: -8px; + right: -8px; + width: 20px; + height: 20px; + background: #10b981; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transform: scale(0); + transition: all 0.3s; +} + +.success-indicator::after { + content: '✓'; + color: white; + font-size: 0.75rem; + font-weight: bold; +} + +.pipeline-node.success .success-indicator { + opacity: 1; + transform: scale(1); +} + +/* Pipeline Arrow */ +.pipeline-arrow { + position: relative; + width: 100px; + height: 4px; + background: var(--gray-700); +} + +.arrow-flow { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0%; + background: var(--gradient-primary); + transition: width 0.5s; +} + +.pipeline-arrow.active .arrow-flow { + width: 100%; +} + +.data-packet { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 10px; + height: 10px; + background: var(--primary); + border-radius: 50%; + opacity: 0; + box-shadow: 0 0 10px var(--primary); +} + +.pipeline-arrow.flowing .data-packet { + animation: dataFlow 1s linear infinite; +} + +.data-packet.delay-1 { animation-delay: 0.33s; } +.data-packet.delay-2 { animation-delay: 0.66s; } + +@keyframes dataFlow { + 0% { left: 0; opacity: 1; } + 100% { left: 100%; opacity: 0; } +} + +/* Activity Log */ +.activity-log { + grid-column: span 2; + background: rgba(13, 17, 23, 0.8); + border: 1px solid #30363d; + border-radius: var(--radius-lg); + overflow: hidden; +} + +.log-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.875rem 1.25rem; + background: #161b22; + border-bottom: 1px solid #30363d; + font-size: 0.875rem; + color: var(--gray-300); +} + +.log-count { + color: var(--gray-500); + font-size: 0.75rem; +} + +.log-entries { + height: 120px; + overflow-y: auto; + padding: 0.75rem; +} + +.log-entry { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; + border-radius: var(--radius); + animation: logEntry 0.3s ease; + margin-bottom: 0.25rem; +} + +@keyframes logEntry { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} + +.log-entry .log-time { + color: var(--gray-500); + font-family: monospace; + font-size: 0.75rem; +} + +.log-entry .log-icon { + font-size: 0.875rem; +} + +.log-entry .log-text { + color: var(--gray-300); +} + +.log-entry.success { background: rgba(16, 185, 129, 0.1); } +.log-entry.info { background: rgba(99, 102, 241, 0.1); } +.log-entry.warning { background: rgba(245, 158, 11, 0.1); } +.log-entry.processing { background: rgba(139, 92, 246, 0.1); } + +/* Demo CTA */ +.demo-cta { + display: flex; + justify-content: center; + gap: 1rem; +} + +/* Responsive */ +@media (max-width: 992px) { + .ai-demo-container { + grid-template-columns: 1fr; + } + + .ai-terminal { + grid-row: auto; + } + + .pipeline-visual { + grid-column: auto; + flex-wrap: wrap; + gap: 1rem; + } + + .pipeline-arrow { + width: 50px; + } + + .activity-log { + grid-column: auto; + } +} + +@media (max-width: 768px) { + .ai-metrics-panel { + grid-template-columns: 1fr; + } + + .pipeline-visual { + flex-direction: column; + } + + .pipeline-arrow { + width: 4px; + height: 40px; + } + + .demo-cta { + flex-direction: column; + } +} + +/* ========================================== + PRODUCTS SECTION + ========================================== */ +.products-section { + background: linear-gradient(180deg, #0a0a1a 0%, var(--dark) 50%, var(--dark-light) 100%); + position: relative; + overflow: hidden; +} + +.products-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), + radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.products-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + margin-bottom: 4rem; +} + +.product-card { + position: relative; + background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: var(--radius-2xl); + padding: 2.5rem; + overflow: hidden; + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +.product-card:hover { + border-color: rgba(99, 102, 241, 0.5); + transform: translateY(-8px); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.4), + 0 0 100px rgba(99, 102, 241, 0.2); +} + +.product-glow { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 50%); + opacity: 0; + transition: opacity 0.5s; + pointer-events: none; +} + +.product-card:hover .product-glow { + opacity: 1; +} + +/* Product-specific colors */ +.product-card.lexmind { border-color: rgba(59, 130, 246, 0.3); } +.product-card.lexmind:hover { border-color: rgba(59, 130, 246, 0.6); } +.product-card.lexmind .product-glow { background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, transparent 50%); } +.product-card.lexmind .product-icon span { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } +.product-card.lexmind .product-badge { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } +.product-card.lexmind .icon-rings .ring { border-color: rgba(59, 130, 246, 0.3); } + +.product-card.metisclass { border-color: rgba(16, 185, 129, 0.3); } +.product-card.metisclass:hover { border-color: rgba(16, 185, 129, 0.6); } +.product-card.metisclass .product-glow { background: radial-gradient(circle at center, rgba(16, 185, 129, 0.15) 0%, transparent 50%); } +.product-card.metisclass .product-icon span { background: linear-gradient(135deg, #10b981, #059669); } +.product-card.metisclass .product-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; } +.product-card.metisclass .icon-rings .ring { border-color: rgba(16, 185, 129, 0.3); } + +.product-card.argusfinance { border-color: rgba(245, 158, 11, 0.3); } +.product-card.argusfinance:hover { border-color: rgba(245, 158, 11, 0.6); } +.product-card.argusfinance .product-glow { background: radial-gradient(circle at center, rgba(245, 158, 11, 0.15) 0%, transparent 50%); } +.product-card.argusfinance .product-icon span { background: linear-gradient(135deg, #f59e0b, #d97706); } +.product-card.argusfinance .product-badge { background: rgba(245, 158, 11, 0.2); color: #fbbf24; } +.product-card.argusfinance .icon-rings .ring { border-color: rgba(245, 158, 11, 0.3); } + +.product-card.strix { border-color: rgba(139, 92, 246, 0.3); } +.product-card.strix:hover { border-color: rgba(139, 92, 246, 0.6); } +.product-card.strix .product-glow { background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15) 0%, transparent 50%); } +.product-card.strix .product-icon span { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } +.product-card.strix .product-badge { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } +.product-card.strix .icon-rings .ring { border-color: rgba(139, 92, 246, 0.3); } + +.product-badge { + position: absolute; + top: 1.5rem; + right: 1.5rem; + padding: 0.375rem 0.875rem; + background: rgba(99, 102, 241, 0.2); + border-radius: var(--radius-full); + font-size: 0.75rem; + font-weight: 600; + color: var(--primary-light); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.product-icon { + position: relative; + width: 80px; + height: 80px; + margin-bottom: 1.5rem; +} + +.product-icon span { + position: relative; + z-index: 2; + width: 80px; + height: 80px; + background: var(--gradient-primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3); +} + +.icon-rings { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; +} + +.icon-rings .ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 2px solid rgba(99, 102, 241, 0.3); + border-radius: 50%; + animation: productRing 3s ease-in-out infinite; +} + +.icon-rings .ring:nth-child(1) { + width: 100px; + height: 100px; + animation-delay: 0s; +} + +.icon-rings .ring:nth-child(2) { + width: 120px; + height: 120px; + animation-delay: 0.5s; +} + +@keyframes productRing { + 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } + 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; } +} + +.product-card h3 { + font-size: 1.75rem; + margin-bottom: 0.5rem; + font-weight: 800; +} + +.product-tagline { + font-size: 1rem; + color: var(--primary-light); + margin-bottom: 1rem; + font-weight: 500; +} + +.product-description { + color: var(--gray-400); + font-size: 0.9375rem; + line-height: 1.7; + margin-bottom: 1.5rem; +} + +.product-features { + margin-bottom: 1.5rem; +} + +.product-features li { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0; + font-size: 0.9375rem; + color: var(--gray-300); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.product-features li:last-child { + border-bottom: none; +} + +.product-features .check { + color: var(--success); + font-weight: bold; +} + +.product-stats { + display: flex; + gap: 2rem; + padding: 1.25rem 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 1.5rem; +} + +.p-stat { + display: flex; + flex-direction: column; +} + +.p-stat-value { + font-size: 1.5rem; + font-weight: 800; + color: var(--white); +} + +.p-stat-label { + font-size: 0.75rem; + color: var(--gray-500); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.product-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--white); + font-weight: 600; + font-size: 0.9375rem; + padding: 0.75rem 1.5rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + transition: all 0.3s; +} + +.product-link:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); + transform: translateX(5px); +} + +.product-link svg { + width: 18px; + height: 18px; + transition: transform 0.3s; +} + +.product-link:hover svg { + transform: translateX(5px); +} + +.products-cta { + text-align: center; + padding: 3rem; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: var(--radius-2xl); +} + +.products-cta p { + color: var(--gray-400); + margin-bottom: 1.5rem; + font-size: 1.0625rem; +} + +/* Responsive */ +@media (max-width: 992px) { + .products-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .product-card { + padding: 1.75rem; + } + + .product-stats { + flex-direction: column; + gap: 1rem; + } +} + +/* ========================================== + PRODUCTS SECTION - EPIC VERSION + ========================================== */ +.products-section { + position: relative; + background: #000; + min-height: 100vh; + overflow: hidden; + padding: 8rem 0; +} + +.products-bg { + position: absolute; + inset: 0; + overflow: hidden; +} + +.grid-lines { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px); + background-size: 100px 100px; + animation: gridMove 20s linear infinite; +} + +@keyframes gridMove { + 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } + 100% { transform: perspective(500px) rotateX(60deg) translateY(100px); } +} + +.floating-particles { + position: absolute; + inset: 0; + overflow: hidden; +} + +.mega-title { + font-size: clamp(2.5rem, 6vw, 5rem) !important; + line-height: 1.1 !important; +} + +.mega-title .title-word { + display: block; + opacity: 0; + transform: translateY(50px); + animation: wordReveal 0.8s forwards; +} + +.mega-title .title-word:nth-child(1) { animation-delay: 0.1s; } +.mega-title .title-word:nth-child(2) { animation-delay: 0.3s; } +.mega-title .title-word:nth-child(3) { animation-delay: 0.5s; } + +@keyframes wordReveal { + to { opacity: 1; transform: translateY(0); } +} + +/* Products Showcase */ +.products-showcase { + display: flex; + gap: 0; + overflow-x: auto; + scroll-snap-type: x mandatory; + scrollbar-width: none; + -ms-overflow-style: none; + margin: 0 -2rem; + padding: 2rem; +} + +.products-showcase::-webkit-scrollbar { + display: none; +} + +/* Product Hero Card */ +.product-hero { + flex: 0 0 100%; + scroll-snap-align: center; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + min-height: 600px; + padding: 3rem; + background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 2rem; + position: relative; + overflow: hidden; +} + +.product-hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent); +} + +/* 3D Hologram Container */ +.product-3d-container { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.product-hologram { + position: relative; + width: 300px; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +.holo-base { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 200px; + height: 20px; + background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent); + border-radius: 50%; + filter: blur(10px); +} + +.holo-icon { + font-size: 6rem; + position: relative; + z-index: 10; + animation: holoFloat 3s ease-in-out infinite; + filter: drop-shadow(0 0 30px currentColor); +} + +@keyframes holoFloat { + 0%, 100% { transform: translateY(0) scale(1); } + 50% { transform: translateY(-20px) scale(1.05); } +} + +.holo-ring { + position: absolute; + border: 2px solid; + border-radius: 50%; + opacity: 0.5; +} + +.holo-ring.ring-1 { + width: 150px; + height: 150px; + animation: ringRotate3D 8s linear infinite; +} + +.holo-ring.ring-2 { + width: 200px; + height: 200px; + animation: ringRotate3D 12s linear infinite reverse; +} + +.holo-ring.ring-3 { + width: 250px; + height: 250px; + animation: ringRotate3D 16s linear infinite; +} + +@keyframes ringRotate3D { + 0% { transform: rotateX(70deg) rotateZ(0deg); } + 100% { transform: rotateX(70deg) rotateZ(360deg); } +} + +.holo-beam { + position: absolute; + bottom: -50px; + left: 50%; + transform: translateX(-50%); + width: 150px; + height: 150px; + background: linear-gradient(to top, rgba(99, 102, 241, 0.3), transparent); + clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); + animation: beamPulse 2s ease-in-out infinite; +} + +@keyframes beamPulse { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 0.6; } +} + +/* Product-specific colors */ +.lexmind-holo .holo-icon { color: #3b82f6; text-shadow: 0 0 50px #3b82f6; } +.lexmind-holo .holo-ring { border-color: rgba(59, 130, 246, 0.5); } +.lexmind-holo .holo-beam { background: linear-gradient(to top, rgba(59, 130, 246, 0.3), transparent); } + +.metisclass-holo .holo-icon { color: #10b981; text-shadow: 0 0 50px #10b981; } +.metisclass-holo .holo-ring { border-color: rgba(16, 185, 129, 0.5); } +.metisclass-holo .holo-beam { background: linear-gradient(to top, rgba(16, 185, 129, 0.3), transparent); } + +.argusfinance-holo .holo-icon { color: #f59e0b; text-shadow: 0 0 50px #f59e0b; } +.argusfinance-holo .holo-ring { border-color: rgba(245, 158, 11, 0.5); } +.argusfinance-holo .holo-beam { background: linear-gradient(to top, rgba(245, 158, 11, 0.3), transparent); } + +.strix-holo .holo-icon { color: #8b5cf6; text-shadow: 0 0 50px #8b5cf6; } +.strix-holo .holo-ring { border-color: rgba(139, 92, 246, 0.5); } +.strix-holo .holo-beam { background: linear-gradient(to top, rgba(139, 92, 246, 0.3), transparent); } + +/* Product Content */ +.product-content { + padding: 2rem 0; +} + +.product-label { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.2em; + color: var(--gray-400); + text-transform: uppercase; +} + +.label-line { + width: 40px; + height: 2px; + background: var(--gradient-primary); +} + +.product-name { + font-size: 4rem; + font-weight: 900; + margin-bottom: 1rem; + letter-spacing: -0.03em; +} + +.name-main { + color: var(--white); +} + +.name-accent { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +#product-lexmind .name-accent { background: linear-gradient(135deg, #3b82f6, #60a5fa); -webkit-background-clip: text; } +#product-metisclass .name-accent { background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; } +#product-argusfinance .name-accent { background: linear-gradient(135deg, #f59e0b, #fbbf24); -webkit-background-clip: text; } +#product-strix .name-accent { background: linear-gradient(135deg, #8b5cf6, #a78bfa); -webkit-background-clip: text; } + +.product-hero-tagline { + font-size: 1.5rem; + font-weight: 600; + color: var(--white); + margin-bottom: 1rem; +} + +.product-hero-desc { + font-size: 1.0625rem; + color: var(--gray-400); + line-height: 1.8; + margin-bottom: 2rem; + max-width: 500px; +} + +/* Metrics Pills */ +.product-metrics { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.metric-pill { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-full); +} + +.metric-icon { + font-size: 1rem; +} + +.metric-val { + font-size: 1.25rem; + font-weight: 800; + color: var(--white); +} + +.metric-txt { + font-size: 0.75rem; + color: var(--gray-500); +} + +/* Features Mini */ +.product-features-mini { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2rem; +} + +.product-features-mini span { + padding: 0.5rem 1rem; + background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: var(--radius); + font-size: 0.8125rem; + color: var(--gray-300); +} + +/* Product CTA Button */ +.product-cta-btn { + display: inline-flex; + align-items: center; + gap: 1rem; + padding: 1rem 2rem; + background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: var(--radius-lg); + color: var(--white); + font-weight: 600; + font-size: 1rem; + position: relative; + overflow: hidden; + transition: all 0.4s; +} + +.product-cta-btn:hover { + border-color: rgba(255, 255, 255, 0.4); + transform: translateX(10px); + box-shadow: 0 0 40px rgba(99, 102, 241, 0.3); +} + +.btn-shine { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s; +} + +.product-cta-btn:hover .btn-shine { + left: 100%; +} + +.lexmind-btn:hover { box-shadow: 0 0 40px rgba(59, 130, 246, 0.4); } +.metisclass-btn:hover { box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); } +.argusfinance-btn:hover { box-shadow: 0 0 40px rgba(245, 158, 11, 0.4); } +.strix-btn:hover { box-shadow: 0 0 40px rgba(139, 92, 246, 0.4); } +.docuagro-btn { background: linear-gradient(135deg, #22c55e, #84cc16); } +.docuagro-btn:hover { box-shadow: 0 0 40px rgba(34, 197, 94, 0.4); } +.docuagro-holo .holo-ring { border-color: rgba(34, 197, 94, 0.3); } +.docuagro-holo .holo-beam { background: linear-gradient(to top, rgba(34, 197, 94, 0.3), transparent); } +.iristea-btn { background: linear-gradient(135deg, #a855f7, #ec4899); } +.iristea-btn:hover { box-shadow: 0 0 40px rgba(168, 85, 247, 0.4); } +.iristea-holo .holo-ring { border-color: rgba(168, 85, 247, 0.3); } +.iristea-holo .holo-beam { background: linear-gradient(to top, rgba(168, 85, 247, 0.3), transparent); } +.ophion-btn { background: linear-gradient(135deg, #06b6d4, #10b981); } +.ophion-btn:hover { box-shadow: 0 0 40px rgba(6, 182, 212, 0.4); } +.ophion-holo .holo-ring { border-color: rgba(6, 182, 212, 0.3); } +.ophion-holo .holo-beam { background: linear-gradient(to top, rgba(6, 182, 212, 0.3), transparent); } + +/* Products Navigation */ +.products-nav { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 3rem; +} + +.product-nav-dot { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.35rem; + padding: 0.7rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-lg); + cursor: pointer; + transition: all 0.3s; + min-width: 70px; +} + +.product-nav-dot:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.2); +} + +.product-nav-dot.active { + background: rgba(99, 102, 241, 0.2); + border-color: var(--primary); + box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); +} + +.dot-icon { + font-size: 1.5rem; +} + +.dot-label { + font-size: 0.75rem; + color: var(--gray-400); + font-weight: 600; +} + +.product-nav-dot.active .dot-label { + color: var(--white); +} + +/* Unified Banner */ +.unified-banner { + margin-top: 4rem; + padding: 2.5rem 3rem; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%); + border: 1px solid rgba(99, 102, 241, 0.3); + border-radius: var(--radius-2xl); + position: relative; + overflow: hidden; +} + +.banner-glow { + position: absolute; + top: -50%; + right: -10%; + width: 300px; + height: 300px; + background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%); + filter: blur(50px); +} + +.banner-content { + display: flex; + align-items: center; + gap: 2rem; + position: relative; + z-index: 1; +} + +.banner-icon { + font-size: 3rem; + background: var(--gradient-primary); + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--radius-xl); + flex-shrink: 0; +} + +.banner-text { + flex: 1; +} + +.banner-text h4 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.banner-text p { + color: var(--gray-400); + font-size: 1rem; +} + +/* Responsive */ +@media (max-width: 1200px) { + .product-hero { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .product-3d-container { + order: -1; + } + + .product-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .product-hero-desc { + max-width: 100%; + } + + .product-metrics { + justify-content: center; + } + + .product-features-mini { + justify-content: center; + } + + .product-label { + justify-content: center; + } +} + +@media (max-width: 768px) { + .products-showcase { + margin: 0 -1rem; + padding: 1rem; + } + + .product-hero { + padding: 2rem 1.5rem; + min-height: auto; + } + + .product-name { + font-size: 2.5rem; + } + + .holo-icon { + font-size: 4rem; + } + + .product-hologram { + width: 200px; + height: 200px; + } + + .product-metrics { + flex-wrap: wrap; + } + + .products-nav { + flex-wrap: wrap; + } + + .product-nav-dot { + padding: 0.75rem 1rem; + } + + .banner-content { + flex-direction: column; + text-align: center; + } +} + +/* ========================================== + NEW COLOR SCHEME - ULTRA FUTURISTIC + ========================================== */ +:root { + --primary: #00f0ff; + --primary-dark: #00c4cc; + --primary-light: #5cffff; + --secondary: #ff00aa; + --accent: #7b2cff; + --accent-pink: #ff2d6a; + --accent-cyan: #00f0ff; + --accent-gold: #ffd700; + --neon-green: #00ff88; + --neon-blue: #00a8ff; + --neon-purple: #9d4edd; + + --gradient-primary: linear-gradient(135deg, #00f0ff 0%, #7b2cff 50%, #ff00aa 100%); + --gradient-hero: linear-gradient(135deg, #000011 0%, #0a0a2e 50%, #1a0a2e 100%); + --gradient-card: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(123, 44, 255, 0.05) 100%); + --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); + + --shadow-glow: 0 0 60px rgba(0, 240, 255, 0.4); + --shadow-glow-lg: 0 0 100px rgba(0, 240, 255, 0.3); +} + +/* Update gradient text */ +.gradient-text { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 50%, #ff00aa 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; +} + +/* Hero updates */ +.hero { + background: linear-gradient(135deg, #000011 0%, #0a0a2e 50%, #1a0a2e 100%) !important; +} + +/* Orbs new colors */ +.orb-1 { background: #00f0ff !important; } +.orb-2 { background: #7b2cff !important; } +.orb-3 { background: #ff00aa !important; } + +/* Stars new colors */ +.stars2 { + background-image: + radial-gradient(1px 1px at 50px 50px, #00f0ff, transparent), + radial-gradient(1px 1px at 150px 100px, #7b2cff, transparent), + radial-gradient(2px 2px at 250px 150px, #ff00aa, transparent) !important; +} + +/* Buttons glow */ +.btn-primary { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; + box-shadow: 0 0 30px rgba(0, 240, 255, 0.4), 0 0 60px rgba(123, 44, 255, 0.2) !important; +} + +.btn-glow { + box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(123, 44, 255, 0.3) !important; +} + +.btn-glow:hover { + box-shadow: 0 0 50px rgba(0, 240, 255, 0.7), 0 0 100px rgba(123, 44, 255, 0.4) !important; +} + +/* Section tags */ +.section-tag { + background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(123, 44, 255, 0.1) 100%) !important; + border-color: rgba(0, 240, 255, 0.3) !important; + color: #00f0ff !important; +} + +/* Cards hover glow */ +.platform-card:hover, +.feature-card:hover, +.use-case-card:hover, +.testimonial-card:hover { + border-color: #00f0ff !important; + box-shadow: 0 0 40px rgba(0, 240, 255, 0.3) !important; +} + +/* Platform icons */ +.platform-card:hover .platform-icon { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; +} + +/* Timeline */ +.timeline-line { + background: linear-gradient(180deg, #00f0ff, #7b2cff, #ff00aa) !important; +} + +.marker-number { + border-color: #00f0ff !important; + color: #00f0ff !important; +} + +.marker-pulse { + background: #00f0ff !important; +} + +/* Stats */ +.stat-suffix { + background: linear-gradient(135deg, #00f0ff 0%, #ff00aa 100%) !important; + -webkit-background-clip: text !important; +} + +.stat-bar-fill { + background: linear-gradient(90deg, #00f0ff, #7b2cff, #ff00aa) !important; +} + +/* Scroll progress */ +.scroll-progress { + background: linear-gradient(90deg, #00f0ff, #7b2cff, #ff00aa) !important; +} + +/* AI Assistant new look */ +.orb-core { + background: radial-gradient(circle at 30% 30%, #00f0ff, #7b2cff, #1a0a2e) !important; + box-shadow: + 0 0 30px rgba(0, 240, 255, 0.6), + 0 0 60px rgba(123, 44, 255, 0.4), + inset 0 0 20px rgba(255,255,255,0.2) !important; +} + +.orb-ring { + border-color: rgba(0, 240, 255, 0.3) !important; +} + +.ring-1 { border-top-color: #00f0ff !important; } +.ring-2 { border-right-color: #7b2cff !important; } +.ring-3 { border-bottom-color: #ff00aa !important; } + +.ai-chat { + border-color: rgba(0, 240, 255, 0.3) !important; + box-shadow: + 0 25px 50px rgba(0,0,0,0.5), + 0 0 100px rgba(0, 240, 255, 0.2), + inset 0 1px 0 rgba(255,255,255,0.1) !important; +} + +.ai-chat-header { + background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(123, 44, 255, 0.1) 100%) !important; + border-bottom-color: rgba(0, 240, 255, 0.2) !important; +} + +.ai-avatar { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; + box-shadow: 0 0 15px rgba(0, 240, 255, 0.4) !important; +} + +.ai-bubble { + background: rgba(0, 240, 255, 0.1) !important; + border-color: rgba(0, 240, 255, 0.2) !important; +} + +.ai-chat-input button { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; + box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; +} + +.ai-suggestion { + background: rgba(0, 240, 255, 0.1) !important; + border-color: rgba(0, 240, 255, 0.2) !important; + color: #00f0ff !important; +} + +/* CTA Section */ +.cta-section .cta-bg { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 50%, #ff00aa 100%) !important; +} + +/* Voice button */ +.voice-btn { + border-color: rgba(0, 240, 255, 0.3) !important; +} + +.voice-btn:hover { + border-color: #00f0ff !important; + box-shadow: 0 0 30px rgba(0, 240, 255, 0.3) !important; +} + +.voice-btn svg { + color: #00f0ff !important; +} + +/* Logo */ +.logo-icon { + color: #00f0ff !important; +} + +.logo-glow { + background: #00f0ff !important; +} + +/* Nav links hover */ +.nav-links a::after { + background: linear-gradient(90deg, #00f0ff, #7b2cff) !important; +} + +/* FAQ */ +.faq-item:hover, +.faq-item.active { + border-color: #00f0ff !important; +} + +.faq-icon span { + background: #00f0ff !important; +} + +.faq-item.active .faq-icon { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; +} + +/* Highlight text */ +.highlight-text::after { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; +} + +/* Terminal */ +.terminal-line .prompt { color: #00f0ff !important; } +.terminal-line .ai { color: #7b2cff !important; } +.terminal-line .success { color: #00ff88 !important; } + +/* Metric values */ +.metric-value span, +.metric-value-live span { + background: linear-gradient(135deg, #00f0ff 0%, #ff00aa 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; +} + +/* Pipeline */ +.pipeline-node.agent { + border-color: #00f0ff !important; + background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(123, 44, 255, 0.1) 100%) !important; +} + +.processing-ring { + border-color: #00f0ff !important; +} + +.data-packet { + background: #00f0ff !important; + box-shadow: 0 0 10px #00f0ff !important; +} + +.arrow-flow { + background: linear-gradient(90deg, #00f0ff, #7b2cff) !important; +} + +/* Products hologram colors update */ +.lexmind-holo .holo-icon { color: #00a8ff !important; text-shadow: 0 0 50px #00a8ff !important; } +.lexmind-holo .holo-ring { border-color: rgba(0, 168, 255, 0.5) !important; } +.lexmind-holo .holo-beam { background: linear-gradient(to top, rgba(0, 168, 255, 0.3), transparent) !important; } + +.metisclass-holo .holo-icon { color: #00ff88 !important; text-shadow: 0 0 50px #00ff88 !important; } +.metisclass-holo .holo-ring { border-color: rgba(0, 255, 136, 0.5) !important; } +.metisclass-holo .holo-beam { background: linear-gradient(to top, rgba(0, 255, 136, 0.3), transparent) !important; } + +.argusfinance-holo .holo-icon { color: #ffd700 !important; text-shadow: 0 0 50px #ffd700 !important; } +.argusfinance-holo .holo-ring { border-color: rgba(255, 215, 0, 0.5) !important; } +.argusfinance-holo .holo-beam { background: linear-gradient(to top, rgba(255, 215, 0, 0.3), transparent) !important; } + +.strix-holo .holo-icon { color: #ff00aa !important; text-shadow: 0 0 50px #ff00aa !important; } +.strix-holo .holo-ring { border-color: rgba(255, 0, 170, 0.5) !important; } +.strix-holo .holo-beam { background: linear-gradient(to top, rgba(255, 0, 170, 0.3), transparent) !important; } + +#product-lexmind .name-accent { background: linear-gradient(135deg, #00a8ff, #00f0ff) !important; -webkit-background-clip: text !important; } +#product-metisclass .name-accent { background: linear-gradient(135deg, #00ff88, #00ffcc) !important; -webkit-background-clip: text !important; } +#product-argusfinance .name-accent { background: linear-gradient(135deg, #ffd700, #ffaa00) !important; -webkit-background-clip: text !important; } +#product-strix .name-accent { background: linear-gradient(135deg, #ff00aa, #ff2d6a) !important; -webkit-background-clip: text !important; } + +.product-nav-dot.active { + background: rgba(0, 240, 255, 0.2) !important; + border-color: #00f0ff !important; + box-shadow: 0 0 30px rgba(0, 240, 255, 0.3) !important; +} + +.unified-banner { + background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(123, 44, 255, 0.1) 100%) !important; + border-color: rgba(0, 240, 255, 0.3) !important; +} + +.banner-icon { + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%) !important; +} + +/* ========================================== + UNIVERSE / SPACE BACKGROUND + ========================================== */ + +/* Base space background */ +body { + background: #000008 !important; +} + +/* Deep space nebula effect */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(ellipse at 10% 20%, rgba(123, 44, 255, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 90% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(255, 0, 170, 0.08) 0%, transparent 60%), + radial-gradient(ellipse at 80% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%); + pointer-events: none; + z-index: 0; +} + +/* Enhanced stars */ +.stars { + background-image: + radial-gradient(2px 2px at 20px 30px, #fff, transparent), + radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.9), transparent), + radial-gradient(1px 1px at 90px 40px, #fff, transparent), + radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.7), transparent), + radial-gradient(1px 1px at 230px 80px, #fff, transparent), + radial-gradient(3px 3px at 300px 150px, rgba(255,255,255,0.8), transparent), + radial-gradient(1px 1px at 370px 50px, #fff, transparent), + radial-gradient(2px 2px at 400px 180px, rgba(255,255,255,0.6), transparent), + radial-gradient(1px 1px at 450px 90px, #fff, transparent), + radial-gradient(2px 2px at 500px 200px, rgba(255,255,255,0.9), transparent) !important; + background-size: 550px 250px !important; + animation: animStar 150s linear infinite !important; + opacity: 0.8 !important; +} + +.stars2 { + background-image: + radial-gradient(1px 1px at 50px 50px, #00f0ff, transparent), + radial-gradient(2px 2px at 100px 80px, #00f0ff, transparent), + radial-gradient(1px 1px at 150px 100px, #7b2cff, transparent), + radial-gradient(2px 2px at 200px 60px, #ff00aa, transparent), + radial-gradient(1px 1px at 250px 150px, #00f0ff, transparent), + radial-gradient(2px 2px at 300px 40px, #7b2cff, transparent), + radial-gradient(1px 1px at 350px 120px, #ff00aa, transparent), + radial-gradient(2px 2px at 400px 90px, #00ff88, transparent) !important; + background-size: 450px 200px !important; + animation: animStar 100s linear infinite !important; + opacity: 0.6 !important; +} + +.stars3 { + background-image: + radial-gradient(3px 3px at 80px 60px, rgba(0, 240, 255, 0.8), transparent), + radial-gradient(2px 2px at 180px 140px, rgba(123, 44, 255, 0.7), transparent), + radial-gradient(4px 4px at 280px 80px, rgba(255, 0, 170, 0.6), transparent), + radial-gradient(2px 2px at 380px 160px, rgba(0, 255, 136, 0.5), transparent) !important; + background-size: 500px 220px !important; + animation: animStar 200s linear infinite !important; + opacity: 0.4 !important; +} + +/* Shooting stars */ +.bg-animation::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%); + background-size: 200px 2px; + background-repeat: no-repeat; + animation: shootingStar 8s linear infinite; + opacity: 0; +} + +@keyframes shootingStar { + 0% { + background-position: -200px 100px; + opacity: 0; + } + 5% { + opacity: 1; + } + 15% { + background-position: calc(100% + 200px) 400px; + opacity: 0; + } + 100% { + opacity: 0; + background-position: calc(100% + 200px) 400px; + } +} + +/* Galaxy spiral effect in hero */ +.hero::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 800px; + height: 800px; + transform: translate(-50%, -50%); + background: + conic-gradient(from 0deg, transparent, rgba(0, 240, 255, 0.1), transparent, rgba(123, 44, 255, 0.1), transparent, rgba(255, 0, 170, 0.1), transparent); + border-radius: 50%; + animation: galaxySpin 60s linear infinite; + opacity: 0.5; + filter: blur(40px); + pointer-events: none; +} + +@keyframes galaxySpin { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Planet decorations */ +.hero-visual::before { + content: ''; + position: absolute; + top: 10%; + right: -50px; + width: 100px; + height: 100px; + background: radial-gradient(circle at 30% 30%, #4a3f6b, #1a1025); + border-radius: 50%; + box-shadow: + inset -10px -10px 20px rgba(0,0,0,0.5), + 0 0 40px rgba(123, 44, 255, 0.3); + animation: planetFloat 20s ease-in-out infinite; +} + +.hero-visual::after { + content: ''; + position: absolute; + bottom: 20%; + left: -30px; + width: 60px; + height: 60px; + background: radial-gradient(circle at 30% 30%, #2a4a5a, #0a1520); + border-radius: 50%; + box-shadow: + inset -5px -5px 15px rgba(0,0,0,0.5), + 0 0 30px rgba(0, 240, 255, 0.3); + animation: planetFloat 15s ease-in-out infinite reverse; +} + +@keyframes planetFloat { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(5deg); } +} + +/* Saturn-like ring planet */ +.products-section::before { + content: ''; + position: absolute; + top: 100px; + right: 5%; + width: 120px; + height: 120px; + background: radial-gradient(circle at 35% 35%, #6b5a3f, #251a10); + border-radius: 50%; + box-shadow: + inset -15px -15px 30px rgba(0,0,0,0.6), + 0 0 50px rgba(255, 215, 0, 0.2); + z-index: 0; +} + +.products-section::after { + content: ''; + position: absolute; + top: 85px; + right: calc(5% - 40px); + width: 200px; + height: 50px; + border: 3px solid rgba(255, 215, 0, 0.3); + border-radius: 50%; + transform: rotateX(70deg); + z-index: 1; +} + +/* Nebula clouds */ +.section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 20% 50%, rgba(123, 44, 255, 0.05) 0%, transparent 50%), + radial-gradient(ellipse at 80% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%); + pointer-events: none; + z-index: 0; +} + +/* Constellation lines */ +.constellation { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + opacity: 0.15; +} + +.constellation line { + stroke: rgba(255, 255, 255, 0.3); + stroke-width: 1; +} + +.constellation circle { + fill: #fff; +} + +/* Aurora effect */ +.aurora { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 40%; + background: linear-gradient(180deg, + transparent 0%, + rgba(0, 240, 255, 0.03) 20%, + rgba(123, 44, 255, 0.05) 40%, + rgba(0, 255, 136, 0.03) 60%, + transparent 100%); + filter: blur(50px); + animation: auroraWave 15s ease-in-out infinite; + pointer-events: none; + z-index: 0; +} + +@keyframes auroraWave { + 0%, 100% { + transform: translateX(-10%) skewX(-5deg); + opacity: 0.5; + } + 50% { + transform: translateX(10%) skewX(5deg); + opacity: 0.8; + } +} + +/* Comet trails on CTA section */ +.cta-section::before { + content: ''; + position: absolute; + width: 150px; + height: 2px; + background: linear-gradient(90deg, transparent, #fff, #00f0ff); + top: 20%; + left: -150px; + animation: cometTrail 10s linear infinite; + filter: blur(1px); +} + +.cta-section::after { + content: ''; + position: absolute; + width: 100px; + height: 2px; + background: linear-gradient(90deg, transparent, #fff, #ff00aa); + bottom: 30%; + right: -100px; + animation: cometTrailReverse 12s linear infinite; + animation-delay: 3s; + filter: blur(1px); +} + +@keyframes cometTrail { + 0% { left: -150px; opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { left: calc(100% + 150px); opacity: 0; } +} + +@keyframes cometTrailReverse { + 0% { right: -100px; opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { right: calc(100% + 100px); opacity: 0; } +} + +/* Twinkling stars effect */ +@keyframes twinkle { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.3; transform: scale(0.8); } +} + +/* Space dust particles */ +.space-dust { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; + overflow: hidden; +} + +.dust-particle { + position: absolute; + width: 2px; + height: 2px; + background: rgba(255, 255, 255, 0.5); + border-radius: 50%; + animation: dustFloat linear infinite; +} + +@keyframes dustFloat { + 0% { + transform: translateY(100vh) rotate(0deg); + opacity: 0; + } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { + transform: translateY(-100vh) rotate(720deg); + opacity: 0; + } +} + +/* Black hole effect for AI assistant */ +.ai-orb::before { + pointer-events: none; + content: ''; + position: absolute; + inset: -20px; + background: conic-gradient(from 0deg, #00f0ff, #7b2cff, #ff00aa, #00f0ff); + border-radius: 50%; + animation: blackHoleSpin 4s linear infinite; + opacity: 0.3; + filter: blur(10px); +} + +@keyframes blackHoleSpin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* Wormhole effect on hover */ +.ai-orb:hover::after { + pointer-events: none; + content: ''; + position: absolute; + inset: -30px; + background: radial-gradient(circle, transparent 30%, rgba(0, 240, 255, 0.2) 50%, transparent 70%); + animation: wormholePulse 1s ease-out infinite; +} + +@keyframes wormholePulse { + 0% { transform: scale(0.8); opacity: 1; } + 100% { transform: scale(1.5); opacity: 0; } +} + +/* Moon in footer */ +.footer::before { + content: ''; + position: absolute; + top: -50px; + left: 10%; + width: 80px; + height: 80px; + background: radial-gradient(circle at 30% 30%, #e8e8e8, #888, #444); + border-radius: 50%; + box-shadow: + inset -10px -10px 20px rgba(0,0,0,0.3), + 0 0 30px rgba(255, 255, 255, 0.1); + opacity: 0.6; +} + +/* Kislanski Industries - Premium Gold/White theme */ +.kislanski-holo .holo-icon { color: #ffffff !important; text-shadow: 0 0 50px #ffffff, 0 0 100px #ffd700 !important; } +.kislanski-holo .holo-ring { border-color: rgba(255, 215, 0, 0.5) !important; } +.kislanski-holo .holo-ring.ring-1 { border-color: rgba(255, 255, 255, 0.4) !important; } +.kislanski-holo .holo-ring.ring-2 { border-color: rgba(255, 215, 0, 0.3) !important; } +.kislanski-holo .holo-ring.ring-3 { border-color: rgba(255, 255, 255, 0.2) !important; } +.kislanski-holo .holo-beam { background: linear-gradient(to top, rgba(255, 215, 0, 0.4), rgba(255, 255, 255, 0.1), transparent) !important; } + +#product-kislanski .name-main { + background: linear-gradient(135deg, #ffffff 0%, #ffd700 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; +} +#product-kislanski .name-accent { + background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%) !important; + -webkit-background-clip: text !important; +} + +#product-kislanski .product-label { + color: #ffd700 !important; +} + +#product-kislanski .label-line { + background: linear-gradient(90deg, #ffd700, #ffffff) !important; +} + +.kislanski-btn:hover { + box-shadow: 0 0 40px rgba(255, 215, 0, 0.5), 0 0 80px rgba(255, 255, 255, 0.3) !important; +} + +#product-kislanski .product-features-mini span { + background: rgba(255, 215, 0, 0.15) !important; + border-color: rgba(255, 215, 0, 0.3) !important; + color: #ffd700 !important; +} + +#product-kislanski .metric-pill { + border-color: rgba(255, 215, 0, 0.3) !important; +} + +/* Kislanski Industries Badge - Discrete Style */ +.kislanski-badge { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 4rem; + padding: 2rem; + text-align: center; +} + +.kislanski-badge .badge-text { + font-size: 0.75rem; + color: var(--gray-500); + text-transform: uppercase; + letter-spacing: 0.15em; +} + +.kislanski-badge .badge-logo { + font-size: 1.25rem; + font-weight: 800; + letter-spacing: 0.2em; + background: linear-gradient(135deg, #ffffff 0%, #888888 50%, #ffffff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-transform: uppercase; +} + +@media (max-width: 768px) { + .kislanski-badge .badge-logo { + font-size: 1rem; + } +} + +/* ========================================== + FOOTER - EPIC VERSION + ========================================== */ +.footer { + position: relative; + background: linear-gradient(180deg, #000 0%, #0a0a1a 100%); + padding: 6rem 0 2rem; + overflow: hidden; +} + +.footer-glow { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 80%; + height: 1px; + background: linear-gradient(90deg, transparent, #00f0ff, #7b2cff, #ff00aa, transparent); + box-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 40px rgba(123, 44, 255, 0.3); +} + +.footer-top { + display: grid; + grid-template-columns: 1.2fr 2fr; + gap: 4rem; + margin-bottom: 4rem; +} + +/* Footer Brand */ +.footer-brand-section { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.footer-logo { + display: flex; + align-items: center; + gap: 1rem; +} + +.footer-logo-icon { + position: relative; + width: 50px; + height: 50px; + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + color: white; +} + +.logo-pulse { + position: absolute; + inset: -3px; + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%); + border-radius: 14px; + opacity: 0.5; + filter: blur(8px); + animation: logoPulse 2s ease-in-out infinite; +} + +@keyframes logoPulse { + 0%, 100% { opacity: 0.3; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(1.05); } +} + +.footer-logo-text { + display: flex; + flex-direction: column; +} + +.logo-main { + font-size: 1.5rem; + font-weight: 800; + color: white; +} + +.logo-sub { + font-size: 0.75rem; + color: var(--gray-500); + letter-spacing: 0.05em; +} + +.footer-desc { + color: var(--gray-400); + font-size: 0.9375rem; + line-height: 1.7; + max-width: 300px; +} + +/* Social Links */ +.footer-social { + display: flex; + gap: 0.75rem; +} + +.social-btn { + width: 44px; + height: 44px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-400); + font-weight: 700; + font-size: 1rem; + transition: all 0.3s; +} + +.social-btn:hover { + background: rgba(0, 240, 255, 0.1); + border-color: #00f0ff; + color: #00f0ff; + transform: translateY(-3px); + box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2); +} + +/* Footer Navigation */ +.footer-nav { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.footer-nav-group h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9375rem; + font-weight: 700; + color: white; + margin-bottom: 1.5rem; +} + +.nav-icon { + font-size: 1rem; +} + +.footer-nav-group ul { + display: flex; + flex-direction: column; + gap: 0.875rem; +} + +.footer-nav-group a { + color: var(--gray-500); + font-size: 0.9375rem; + transition: all 0.3s; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.footer-nav-group a::before { + content: ''; + width: 0; + height: 1px; + background: #00f0ff; + transition: width 0.3s; +} + +.footer-nav-group a:hover { + color: white; + transform: translateX(5px); +} + +.footer-nav-group a:hover::before { + width: 10px; +} + +/* Footer CTA */ +.footer-cta { + display: flex; + align-items: center; + justify-content: space-between; + padding: 2rem 2.5rem; + background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(123, 44, 255, 0.05) 100%); + border: 1px solid rgba(0, 240, 255, 0.2); + border-radius: 1rem; + margin-bottom: 3rem; +} + +.footer-cta .cta-content h4 { + font-size: 1.25rem; + margin-bottom: 0.25rem; +} + +.footer-cta .cta-content p { + color: var(--gray-400); + font-size: 0.9375rem; +} + +/* Footer Bottom */ +.footer-bottom { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.footer-bottom-left p { + color: var(--gray-600); + font-size: 0.875rem; + line-height: 1.6; +} + +.footer-bottom-left strong { + color: var(--gray-400); +} + +.footer-badge { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(255, 255, 255, 0.05); + border-radius: var(--radius-full); + font-size: 0.8125rem; + color: var(--gray-400); +} + +.badge-icon { + font-size: 1rem; +} + +.tech-badge { + padding: 0.5rem 1rem; + background: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(123, 44, 255, 0.1) 100%); + border: 1px solid rgba(0, 240, 255, 0.2); + border-radius: var(--radius-full); + font-size: 0.75rem; + font-weight: 600; + color: #00f0ff; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +/* Animated Lines */ +.footer-lines { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 100px; + overflow: hidden; + pointer-events: none; +} + +.footer-lines .line { + position: absolute; + bottom: 0; + width: 1px; + background: linear-gradient(to top, rgba(0, 240, 255, 0.3), transparent); + animation: lineRise 3s ease-in-out infinite; +} + +.line-1 { left: 20%; height: 60px; animation-delay: 0s; } +.line-2 { left: 50%; height: 80px; animation-delay: 1s; } +.line-3 { left: 80%; height: 50px; animation-delay: 2s; } + +@keyframes lineRise { + 0%, 100% { opacity: 0; transform: translateY(20px); } + 50% { opacity: 1; transform: translateY(0); } +} + +/* Responsive */ +@media (max-width: 1200px) { + .footer-top { + grid-template-columns: 1fr; + gap: 3rem; + } + + .footer-nav { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .footer-nav { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-cta { + flex-direction: column; + text-align: center; + gap: 1.5rem; + } + + .footer-bottom { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } + + .footer-brand-section { + align-items: center; + text-align: center; + } + + .footer-desc { + max-width: 100%; + } +} + +/* Page Sections (Sobre, Blog, Carreiras, Legal) */ +.page-section { + background: var(--dark); + padding: 6rem 0; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.page-content { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.page-content h2 { + font-size: 2.5rem; + margin-bottom: 2rem; + background: linear-gradient(135deg, #00f0ff 0%, #7b2cff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.page-content p { + font-size: 1.125rem; + color: var(--gray-400); + line-height: 1.8; + margin-bottom: 1.5rem; +} + +.page-content strong { + color: #00f0ff; +} diff --git a/vertex-ai.js b/vertex-ai.js new file mode 100644 index 0000000..f5bb90b --- /dev/null +++ b/vertex-ai.js @@ -0,0 +1,116 @@ +// VERTEX AI - Assistente +document.addEventListener('DOMContentLoaded', function() { + + var aiOrb = document.getElementById('aiOrb'); + console.log('VERTEX AI loaded, aiOrb:', aiOrb); + var aiChat = document.getElementById('aiChat'); + var aiClose = document.getElementById('aiClose'); + var aiMessages = document.getElementById('aiMessages'); + var aiInput = document.getElementById('aiInput'); + var aiSend = document.getElementById('aiSend'); + var hudOverlay = document.getElementById('hudOverlay'); + + if (!aiOrb || !aiChat) return; + + function getResponse(text) { + text = text.toLowerCase(); + + if (text.match(/oi|ola|hey|bom dia|boa tarde|boa noite/)) { + return 'Ola! Sou o VERTEX, assistente da AI Vertice. Posso ajudar com informacoes sobre nossos produtos, precos ou agendar uma demo.'; + } + + if (text.match(/produto|solucao|fazem/)) { + return 'Nossos produtos: LexMind (Juridico), MetisClass (Educacao), ArgusFinance (Financas), Strix (Seguranca). Qual te interessa?'; + } + + if (text.match(/lexmind|juridico|advogado|contrato/)) { + return 'LexMind: IA para o setor juridico. Analise de contratos, pesquisa e peticoes automaticas. 85% menos tempo.'; + } + + if (text.match(/metisclass|metis|educacao|curso/)) { + return 'MetisClass: Plataforma de educacao com IA. Tutor virtual 24/7 e trilhas adaptativas. 3x mais engajamento.'; + } + + if (text.match(/argusfinance|argus|financeiro|bloomberg/)) { + return 'ArgusFinance: Terminal financeiro com IA. Dados em tempo real e analise preditiva. 50K+ ativos.'; + } + + if (text.match(/strix|seguranca|vigilancia|camera/)) { + return 'Strix: Sistema de vigilancia com IA. Visao computacional 24/7. 99.9% uptime.'; + } + + if (text.match(/preco|valor|quanto/)) { + return 'Planos: Starter a partir de R$2.500/mes. Enterprise sob consulta. Demo gratuita disponivel!'; + } + + if (text.match(/demo|agendar|testar/)) { + return 'Agende sua demo gratuita em contato@aivertice.com ou clique em Agendar Demo.'; + } + + if (text.match(/contato|email/)) { + return 'Contato: contato@aivertice.com - Brasil - Grupo Kislanski Industries.'; + } + + if (text.match(/empresa|vertice|kislanski/)) { + return 'AI Vertice: Empresa de solucoes de IA do grupo Kislanski Industries. Produtos: LexMind, MetisClass, ArgusFinance, Strix.'; + } + + if (text.match(/obrigad|valeu/)) { + return 'Por nada! Precisa de mais alguma coisa?'; + } + + return 'Posso ajudar com: Produtos, Precos, Demo ou Contato. Pergunte sobre LexMind, MetisClass, ArgusFinance ou Strix!'; + } + + function addMessage(text, isUser) { + var div = document.createElement('div'); + div.className = isUser ? 'ai-message ai-message-user' : 'ai-message ai-message-bot'; + var avatar = isUser ? '👤' : '◆'; + div.innerHTML = '
' + avatar + '
' + text + '
'; + aiMessages.appendChild(div); + aiMessages.scrollTop = aiMessages.scrollHeight; + } + + function send() { + var text = aiInput.value.trim(); + if (!text) return; + + addMessage(text, true); + aiInput.value = ''; + + setTimeout(function() { + addMessage(getResponse(text), false); + }, 400); + } + + aiOrb.onclick = function() { + aiChat.classList.toggle('active'); + if (hudOverlay) hudOverlay.classList.toggle('active'); + }; + + if (aiClose) { + aiClose.onclick = function() { + aiChat.classList.remove('active'); + if (hudOverlay) hudOverlay.classList.remove('active'); + }; + } + + if (aiSend) { + aiSend.onclick = send; + } + + if (aiInput) { + aiInput.onkeypress = function(e) { + if (e.key === 'Enter') send(); + }; + } + + var suggestions = document.querySelectorAll('.ai-suggestion'); + for (var i = 0; i < suggestions.length; i++) { + suggestions[i].onclick = function() { + aiInput.value = this.getAttribute('data-question'); + send(); + }; + } + +});