{% extends "base.html" %}

{% block content %}
<!-- Adicionar meta tags -->
<meta name="description" content="Mozbits Technologies - Soluções em tecnologia: Cloud, Cibersegurança, DevOps, IA">
<meta name="keywords" content="tecnologia, consultoria, desenvolvimento de sistemas, redes, email corporativo">

<!-- Hero Section -->
<div class="hero">
    <div class="hero-icons">
        <i class="fas fa-laptop-code icon-1" aria-hidden="true"></i>
        <i class="fas fa-shield-alt icon-2" aria-hidden="true"></i>
        <i class="fas fa-network-wired icon-3" aria-hidden="true"></i>
        <i class="fas fa-sliders-h icon-4" aria-hidden="true"></i>
        <i class="fas fa-cloud icon-5" aria-hidden="true"></i>
        <i class="fas fa-robot icon-6" aria-hidden="true"></i>
        <i class="fas fa-database icon-7" aria-hidden="true"></i>
        <i class="fas fa-server icon-8" aria-hidden="true"></i>
        <i class="fas fa-mobile-alt icon-9" aria-hidden="true"></i>
        <i class="fas fa-code-branch icon-10" aria-hidden="true"></i>
    </div>
    <div class="hero-content">
        <div class="hero-text">
            <h1 class="hero-main-title">MOZBITS TECHNOLOGIES</h1>
            <p class="hero-subtitle">Performance, Autoridade e Visibilidade</p>
            <p class="hero-description">Somos os arquitectos da mudança digital, os catalisadores da inovação, os impulsionadores do sucesso empresarial. Não nos contentamos com o status quo, nós o desafiamos.</p>
            <a class="btn btn-primary btn-lg" href="{{ url_for('services') }}" role="button">Conheça nossos serviços</a>
        </div>
        <div class="device-container">
            <div class="isometric-device">
                <!-- Laptop Base -->
                <div class="laptop-base">
                    <div class="speaker-grills"></div>
                    <div class="laptop-keyboard">
                        <div class="laptop-keys"></div>
                    </div>
                    <div class="laptop-trackpad"></div>
                    <div class="brand-logo"></div>
                    <div class="power-button"></div>
                    <div class="usb-ports">
                        <div class="usb-port"></div>
                        <div class="usb-port"></div>
                    </div>
                </div>
                
                <!-- Hinge -->
                <div class="hinge"></div>
                
                <!-- Laptop Screen -->
                <div class="screen-container">
                    <div class="screen">
                        <div class="screen-content">
                            <div class="screen-reflection"></div>
                            
                            <!-- Windows -->
                            <div class="laptop-window window-1">
                                <div class="window-header">
                                    <div class="window-controls">
                                        <div class="control close"></div>
                                        <div class="control minimize"></div>
                                        <div class="control maximize"></div>
                                    </div>
                                </div>
                                <div class="window-content">
                                    <h3>MOZBITS</h3>
                                    <p>Performance & Inovação</p>
                                    <p>HTML & CSS</p>
                                </div>
                            </div>
                            
                            <div class="laptop-window window-2">
                                <div class="window-header">
                                    <div class="window-controls">
                                        <div class="control close"></div>
                                        <div class="control minimize"></div>
                                        <div class="control maximize"></div>
                                    </div>
                                </div>
                                <div class="window-content">
                                    <div class="typing-container">
                                        <span class="typing-text"></span>
                                        <span class="typing-cursor">|</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="battery-indicator">
                                <i class="fas fa-battery-three-quarters"></i>
                                <span>87%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Desktop Icons (fora do screen para poderem sair) -->
                    <div class="desktop-icon icon-share">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <div class="desktop-icon icon-database">
                        <i class="fas fa-database"></i>
                    </div>
                    <div class="desktop-icon icon-network">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <div class="desktop-icon icon-security">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="desktop-icon icon-cloud">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <div class="desktop-icon icon-server">
                        <i class="fas fa-server"></i>
                    </div>
                    <div class="desktop-icon icon-browser">
                        <i class="fab fa-chrome"></i>
                    </div>
                </div>
                
                <!-- Elementos flutuantes -->
                <div class="floating-card card-1">
                    <i class="fas fa-arrow-up"></i>
                </div>
                <div class="floating-card card-2">
                    <i class="fas fa-cog"></i>
                </div>
                <div class="floating-card card-3">
                    <i class="fas fa-share-alt"></i>
                </div>
                <div class="floating-card card-4">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="floating-card card-5">
                    <i class="fas fa-circle"></i>
                </div>
                <div class="floating-card card-6">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sobre Nós -->
<section class="about-section-bg">
    <div class="container">
        <h2 class="text-center">Sobre nós</h2>
        <div class="row">
            <div class="col-md-6 about-infrastructure">
                <div class="about-infra-container">
                    <div class="about-infra-view">
                        <!-- Servidor 1 -->
                        <div class="about-rack about-rack-1">
                            <div class="about-server-unit" style="top: 15px;">
                                <div class="about-led about-led-green"></div>
                            </div>
                            <div class="about-server-unit" style="top: 40px;">
                                <div class="about-led about-led-blue"></div>
                            </div>
                            <div class="about-server-unit" style="top: 65px;">
                                <div class="about-led about-led-green"></div>
                            </div>
                        </div>
                        
                        <!-- Base de Dados -->
                        <div class="about-storage">
                            <div class="about-drive" style="top: 15px; left: 15px;"></div>
                            <div class="about-drive" style="top: 15px; left: 45px;"></div>
                            <div class="about-drive" style="top: 35px; left: 15px;"></div>
                            <div class="about-drive" style="top: 35px; left: 45px;"></div>
                            <div class="about-drive" style="top: 55px; left: 15px;"></div>
                            <div class="about-drive" style="top: 55px; left: 45px;"></div>
                        </div>
                        
                        <!-- Computador -->
                        <div class="about-workstation">
                            <div class="about-monitor">
                                <div class="about-monitor-screen">
                                    <i class="fas fa-desktop"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- CPU -->
                        <div class="about-cpu">
                            <i class="fas fa-microchip"></i>
                        </div>
                        
                        <!-- Nuvem -->
                        <div class="about-cloud">
                            <i class="fas fa-cloud"></i>
                        </div>
                        
                        <!-- Satélite -->
                        <div class="about-satellite">
                            <i class="fas fa-satellite"></i>
                        </div>
                        
                        <!-- Fluxo de Dados Servidor → DB -->
                        <div class="about-data-flow about-flow-1" style="animation-delay: 0s;"></div>
                        <div class="about-data-flow about-flow-1" style="animation-delay: 0.5s;"></div>
                        
                        <!-- Fluxo de Dados DB → Computador -->
                        <div class="about-data-flow about-flow-2" style="animation-delay: 1s;"></div>
                        <div class="about-data-flow about-flow-2" style="animation-delay: 1.5s;"></div>
                        
                        <!-- Fluxo de Dados Computador → Servidor -->
                        <div class="about-data-flow about-flow-3" style="animation-delay: 2s;"></div>
                        <div class="about-data-flow about-flow-3" style="animation-delay: 2.5s;"></div>
                        
                        <!-- Fluxo de Dados CPU → Nuvem -->
                        <div class="about-data-flow about-flow-4" style="animation-delay: 0.3s;"></div>
                        
                        <!-- Fluxo de Dados Nuvem → Satélite -->
                        <div class="about-data-flow about-flow-5" style="animation-delay: 0.6s;"></div>
                    </div>
                </div>
                <div class="about-icons" aria-hidden="true">
                    <i class="fas fa-microchip ai-1"></i>
                    <i class="fas fa-cloud ai-2"></i>
                    <i class="fas fa-lock ai-3"></i>
                    <i class="fas fa-code ai-4"></i>
                    <i class="fas fa-network-wired ai-5"></i>
                </div>
            </div>
            <div class="col-md-6 about-text">
                <p>Somos a Mozbits Technologies, uma empresa dedicada a fornecer soluções tecnológicas personalizadas em desenvolvimento de software, infra-estrutura Cloud, Cibersegurança e Integração/DevOps. A nossa equipa é composta por especialistas apaixonados por inovação e comprometidos com o sucesso dos nossos clientes.</p>
                <a class="btn btn-primary" href="{{ url_for('about') }}" role="button">Saiba mais</a>
                <div class="about-text-icons" aria-hidden="true">
                    <i class="fas fa-cogs at-1"></i>
                    <i class="fas fa-microchip at-2"></i>
                    <i class="fas fa-database at-3"></i>
                    <i class="fas fa-code-branch at-4"></i>
                </div>
                <i class="fas fa-building icon-company" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</section>

<!-- Serviços -->
<section class="bg-light">
    <div class="container" data-aos="fade-up">
        <h2 class="text-center">Os nossos serviços</h2>
        <div class="row">
            <!-- Serviço 1 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-1">
                    <div class="card-body text-center">
                        <i class="fas fa-laptop-code fa-3x mb-3 card-icon-float" style="color:#007bff;"></i>
                        <h5 class="card-title">Desenvolvimento de Sistemas</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service1Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 2 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-2">
                    <div class="card-body text-center">
                        <i class="fas fa-cogs fa-3x mb-3 card-icon-float" style="color:#28a745;"></i>
                        <h5 class="card-title">Consultoria em Tecnologia</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service2Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 3 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-3">
                    <div class="card-body text-center">
                        <i class="fas fa-video fa-3x mb-3 card-icon-float" style="color:#ffc107;"></i>
                        <h5 class="card-title">Sistemas CCTV (CFTV)</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service3Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 4 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-4">
                    <div class="card-body text-center">
                        <i class="fas fa-network-wired fa-3x mb-3 card-icon-float" style="color:#17a2b8;"></i>
                        <h5 class="card-title">Montagem de Redes</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service4Modal">Ver mais</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Serviço 5 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-5">
                    <div class="card-body text-center">
                        <i class="fas fa-server fa-3x mb-3 card-icon-float" style="color:#dc3545;"></i>
                        <h5 class="card-title">Monitorização</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service5Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 6 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-6">
                    <div class="card-body text-center">
                        <i class="fas fa-tools fa-3x mb-3 card-icon-float" style="color:#6f42c1;"></i>
                        <h5 class="card-title">Manutenção de Sistemas</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service6Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 7 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-7">
                    <div class="card-body text-center">
                        <i class="fas fa-box fa-3x mb-3 card-icon-float" style="color:#fd7e14;"></i>
                        <h5 class="card-title">Venda de Material Informático</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service7Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 8 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-8">
                    <div class="card-body text-center">
                        <i class="fas fa-envelope fa-3x mb-3 card-icon-float" style="color:#20c997;"></i>
                        <h5 class="card-title">Criação de E-mail Corporativo</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service8Modal">Ver mais</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <!-- Serviço 9 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-1">
                    <div class="card-body text-center">
                        <i class="fas fa-chalkboard-teacher fa-3x mb-3 card-icon-float" style="color:#007bff;"></i>
                        <h5 class="card-title">Treinamento em TICs</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service9Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 10 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-2">
                    <div class="card-body text-center">
                        <i class="fas fa-paint-brush fa-3x mb-3 card-icon-float" style="color:#28a745;"></i>
                        <h5 class="card-title">Desenho Gráfico</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service10Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 11 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-5">
                    <div class="card-body text-center">
                        <i class="fas fa-globe fa-3x mb-3 card-icon-float" style="color:#dc3545;"></i>
                        <h5 class="card-title">Criação de Websites</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service11Modal">Ver mais</a>
                    </div>
                </div>
            </div>
            <!-- Serviço 12 -->
            <div class="col-md-3 mb-4">
                <div class="card card-gradient-6">
                    <div class="card-body text-center">
                        <i class="fas fa-user-cog fa-3x mb-3 card-icon-float" style="color:#6f42c1;"></i>
                        <h5 class="card-title">Assistência Técnica</h5>
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#service12Modal">Ver mais</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modais para Descrições dos Serviços -->
<!-- Serviço 1 -->
<div class="modal fade" id="service1Modal" tabindex="-1" aria-labelledby="service1ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service1ModalLabel">Desenvolvimento de Sistemas</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Criamos sistemas personalizados para responder às necessidades específicas do seu negócio, garantindo eficiência e inovação.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 2 -->
<div class="modal fade" id="service2Modal" tabindex="-1" aria-labelledby="service2ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service2ModalLabel">Consultoria em Tecnologia</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Assessoria especializada para melhorar a eficiência e a inovação tecnológica da sua empresa.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 3 -->
<div class="modal fade" id="service3Modal" tabindex="-1" aria-labelledby="service3ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service3ModalLabel">Sistemas CCTV (CFTV)</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Descrição:</strong> Instalação e configuração de sistemas de videovigilância (CCTV/CFTV) para monitorização e segurança de instalações comerciais, residenciais e industriais.</p>
                <p><strong>Inclui:</strong> Câmaras IP e analógicas, gravadores digitais (DVR/NVR), cablagem estruturada, software de gestão, acesso remoto via mobile/web, alarmes por detecção de movimento, e manutenção preventiva. Soluções escaláveis e compatíveis com sistemas de segurança existentes.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 4 -->
<div class="modal fade" id="service4Modal" tabindex="-1" aria-labelledby="service4ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service4ModalLabel">Montagem de Redes</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Montamos redes locais e corporativas para garantir uma conectividade estável e segura.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 5 -->
<div class="modal fade" id="service5Modal" tabindex="-1" aria-labelledby="service5ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service5ModalLabel">Monitorização</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Oferecemos serviços de monitorização de sistemas e redes para prevenir problemas e garantir a continuidade do negócio.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 6 -->
<div class="modal fade" id="service6Modal" tabindex="-1" aria-labelledby="service6ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service6ModalLabel">Manutenção de Sistemas</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Realizamos manutenção preventiva e correctiva para manter os seus sistemas em óptimo estado.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 7 -->
<div class="modal fade" id="service7Modal" tabindex="-1" aria-labelledby="service7ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service7ModalLabel">Venda de Material Informático</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Oferecemos uma variedade de material informático, desde computadores e acessórios até software especializado.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 8 -->
<div class="modal fade" id="service8Modal" tabindex="-1" aria-labelledby="service8ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service8ModalLabel">Criação de E-mail Corporativo</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Criamos e configuramos e-mails corporativos personalizados para a sua empresa, melhorando a comunicação e o profissionalismo.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 9 -->
<div class="modal fade" id="service9Modal" tabindex="-1" aria-labelledby="service9ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service9ModalLabel">Treinamento em TICs</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Descrição:</strong> Programas de formação em Tecnologias de Informação e Comunicação adaptados às necessidades da sua organização.</p>
                <p><strong>Inclui:</strong> Formação em software office (Word, Excel, PowerPoint), sistemas operativos (Windows, Linux), ferramentas de colaboração (Teams, Google Workspace), segurança informática, gestão de bases de dados, programação básica, e metodologias ágeis. Cursos presenciais e online, com material didáctico incluído e certificados de conclusão.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 10 -->
<div class="modal fade" id="service10Modal" tabindex="-1" aria-labelledby="service10ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service10ModalLabel">Desenho Gráfico</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Descrição:</strong> Criação de identidades visuais, materiais gráficos e conteúdos digitais profissionais para a sua marca.</p>
                <p><strong>Inclui:</strong> Design de logótipos e identidade visual corporativa, cartões de visita, flyers, brochuras, banners, materiais promocionais, redes sociais, apresentações empresariais, e embalagens. Trabalhamos com Adobe Creative Suite (Photoshop, Illustrator, InDesign) e garantimos ficheiros optimizados para impressão e digital.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 11 -->
<div class="modal fade" id="service11Modal" tabindex="-1" aria-labelledby="service11ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service11ModalLabel">Criação de Websites</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Descrição:</strong> Desenvolvimento de websites responsivos, modernos e optimizados para motores de busca (SEO).</p>
                <p><strong>Inclui:</strong> Design personalizado responsivo (desktop, tablet, mobile), desenvolvimento front-end e back-end, integração de formulários e sistemas de pagamento, gestão de conteúdo (CMS), certificado SSL, hospedagem e domínio, optimização SEO básica, e formação para gestão do site. Soluções em WordPress, HTML5/CSS3, ou frameworks modernos conforme necessidades.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>
<!-- Serviço 12 -->
<div class="modal fade" id="service12Modal" tabindex="-1" aria-labelledby="service12ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="service12ModalLabel">Assistência Técnica</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Descrição:</strong> Suporte técnico especializado e manutenção correctiva para equipamentos informáticos, impressoras, redes e sistemas.</p>
                <p><strong>Inclui:</strong> Diagnóstico e reparação de hardware (computadores, servidores, impressoras), resolução de problemas de software e sistemas operativos, configuração de impressoras e dispositivos, formatação e instalação de sistemas, backup e recuperação de dados, suporte remoto e presencial, garantia dos serviços prestados, e resposta rápida a incidentes.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- Porquê Escolher a Mozbits -->
<section class="why-us-section-new">
    <div class="why-us-container-new">
        <!-- Cabeçalho -->
        <div class="section-header-new">
            <h1 class="section-title-new">Porquê Escolher a Mozbits?</h1>
            <p class="section-subtitle-new">Na era digital, estar preparado não é apenas uma vantagem - é uma necessidade fundamental</p>
        </div>

        <!-- Conteúdo Principal -->
        <div class="content-grid-new">
            <!-- Texto -->
            <div class="text-content-new">
                <div class="highlight-text-new">
                    Entendemos que cada empresa tem necessidades únicas. Por isso, oferecemos soluções tecnológicas personalizadas que estimulam o seu crescimento, maximizam a eficiência e garantem que a sua empresa esteja sempre à frente da concorrência.
                </div>

                <div class="approach-section-new">
                    <h3 class="approach-title-new">
                        <i class="fas fa-handshake"></i>
                        A Nossa Abordagem
                    </h3>
                    <p class="approach-text-new">
                        Trabalhamos em estreita colaboração com os nossos clientes para entender e atender os seus desafios e objetivos. Com a nossa equipa de especialistas em diversas áreas, garantimos que a sua empresa tenha as ferramentas certas para prosperar no ambiente digital em constante evolução.
                    </p>
                </div>
            </div>

            <!-- Elementos Visuais -->
            <div class="visual-content-new">
                <div class="floating-elements-new">
                    <!-- Card 1 -->
                    <div class="floating-card-new card-1-new">
                        <div class="card-icon-new">
                            <i class="fas fa-bullseye"></i>
                        </div>
                        <h3 class="card-title-new">Soluções Personalizadas</h3>
                        <p class="card-text-new">Cada projeto é único e merece uma abordagem específica e dedicada</p>
                    </div>

                    <!-- Card 2 -->
                    <div class="floating-card-new card-2-new">
                        <div class="card-icon-new">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3 class="card-title-new">Maximizar Eficiência</h3>
                        <p class="card-text-new">Tecnologia que trabalha para otimizar seus processos e resultados</p>
                    </div>

                    <!-- Card 3 -->
                    <div class="floating-card-new card-3-new">
                        <div class="card-icon-new">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <h3 class="card-title-new">Vantagem Competitiva</h3>
                        <p class="card-text-new">Fique à frente da concorrência com soluções inovadoras</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Estatísticas -->
        <div class="stats-section-new">
            <div class="stat-item-new">
                <div class="stat-number-new">100%</div>
                <div class="stat-label-new">Soluções Personalizadas</div>
            </div>
            <div class="stat-item-new">
                <div class="stat-number-new">24/7</div>
                <div class="stat-label-new">Suporte Dedicado</div>
            </div>
            <div class="stat-item-new">
                <div class="stat-number-new">50+</div>
                <div class="stat-label-new">Projetos Concluídos</div>
            </div>
            <div class="stat-item-new">
                <div class="stat-number-new">360°</div>
                <div class="stat-label-new">Abordagem Completa</div>
            </div>
        </div>
    </div>
</section>

<!-- Porquê nós? -->
<section class="why-us-section">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h3 class="methodology-title">A nossa metodologia desde o primeiro contacto até à entrega do produto</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 mb-4">
                <div class="card method-card method-gradient-1 h-100">
                    <div class="card-body text-center">
                        <div class="method-number">1</div>
                        <i class="fas fa-handshake method-icon"></i>
                        <h5 class="card-title">Primeiro Contacto</h5>
                        <p class="card-text">Escutamos atentamente as suas necessidades e expectativas para compreender o seu negócio e objectivos.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card method-card method-gradient-2 h-100">
                    <div class="card-body text-center">
                        <div class="method-number">2</div>
                        <i class="fas fa-lightbulb method-icon"></i>
                        <h5 class="card-title">Análise & Proposta</h5>
                        <p class="card-text">Analisamos o contexto técnico e apresentamos uma proposta detalhada, com prazos e orçamento transparentes.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card method-card method-gradient-3 h-100">
                    <div class="card-body text-center">
                        <div class="method-number">3</div>
                        <i class="fas fa-code method-icon"></i>
                        <h5 class="card-title">Desenvolvimento</h5>
                        <p class="card-text">Desenvolvemos a solução seguindo metodologias ágeis, com entregas incrementais e feedback contínuo.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card method-card method-gradient-4 h-100">
                    <div class="card-body text-center">
                        <div class="method-number">4</div>
                        <i class="fas fa-check-circle method-icon"></i>
                        <h5 class="card-title">Entrega & Suporte</h5>
                        <p class="card-text">Entregamos o produto final e fornecemos suporte técnico contínuo para garantir o sucesso da implementação.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Rodapé -->
{% include 'footer.html' %}

{% endblock %}