Crée une landing page complète et stylisée en HTML pour un écosystème de produits de cybersécurité destiné aux pentesters et red teamers, nommé 'CyberPro Suite'. La page doit être rédigée intégralement en français.Produits Clés de l'Écosystème :Compagnon de Pentest IA : Collecte et organise automatiquement les données (logs, fichiers, commandes bash history, captures d'écran/images, etc.), cartographie l'infrastructure IT cible, suggère les prochaines étapes pertinentes via une IA locale.Générateur de Rapports Intelligent : Intégré au Compagnon, pré-remplit les sections du rapport avec les vulnérabilités découvertes, les preuves associées et des recommandations standardisées, assisté par l'IA locale pour la cohérence et la qualité.Framework C2 Intégré : Un C2 moderne, discret et personnalisable pour la gestion post-exploitation, communiquant de manière sécurisée et s'intégrant aux données collectées par le Compagnon pour une vision opérationnelle unifiée.Hub de Vulnérabilités Centralisé : Centralise toutes les vulnérabilités identifiées lors des différents pentests. S'appuie sur les anciens rapports et les données du Compagnon pour prioriser, suivre la remédiation et enrichir l'IA.Caractéristiques Essentielles à Mettre en Avant :IA Locale : Souligner de manière proéminente que toute l'analyse et l'intelligence artificielle fonctionnent localement sur l'infrastructure de l'utilisateur ou de l'entreprise, garantissant une confidentialité maximale des données sensibles et des informations clients. C'est un argument de vente crucial.Synergie et Interconnexion : Insister fortement sur la façon dont les outils interagissent et s'alimentent mutuellement : le Compagnon ajoute automatiquement les vulnérabilités au rapporteur et au hub ; le Compagnon apprend des anciens rapports et des données du hub pour améliorer ses suggestions ; le C2 fournit des données au Compagnon, etc. L'écosystème est plus que la somme de ses parties.Automatisation et Efficacité : Mettre en avant le gain de temps significatif sur les tâches répétitives (collecte, organisation, pré-remplissage de rapport) permettant aux experts de se concentrer sur les aspects à plus forte valeur ajoutée du pentest.Exigences Techniques et Structurelles :Utiliser HTML5.Utiliser Tailwind CSS (chargé via le CDN <script src="https://cdn.tailwindcss.com"></script>) pour tout le style. Pas de CSS personnalisé en dehors de la balise <style> si nécessaire pour les animations complexes ou le style SVG.Utiliser la police de caractères Inter (chargée via Google Fonts).Adopter un design moderne, professionnel, épuré, avec un thème sombre (nuances de gris foncé/noir, bleu/indigo/violet pour les accents) adapté à l'univers de la cybersécurité. Utiliser des coins arrondis pour les éléments.Inclure un logo placeholder (SVG simple) et des icônes pertinentes (SVG si possible) pour chaque fonctionnalité.Intégrer un schéma SVG clair et esthétique dans la section "Avantages" pour illustrer visuellement la synergie entre les 4 outils, montrant les flux de données principaux et les boucles de rétroaction pour l'IA. Le style du SVG doit correspondre au thème sombre.La page doit être entièrement responsive et s'afficher parfaitement sur mobile et ordinateur.Structure de la page (sections dans cet ordre) :Header : Sticky, fond semi-transparent avec flou ; Logo placeholder et nom "CyberPro Suite" à gauche ; Liens de navigation ("Fonctionnalités", "Avantages") et bouton "Contactez-nous" à droite (menu burger sur mobile).Section Héros : Arrière-plan avec un dégradé subtil ou un effet de lueur ; Titre accrocheur mettant en avant l'IA et l'écosystème intégré ; Courte description ; Deux boutons CTA ("Demander une Démo" - principal, "Explorer les Fonctionnalités" - secondaire).Section Fonctionnalités : Titre centré ; Grille (4 colonnes sur grand écran) présentant chaque outil (Compagnon, Générateur, C2, Hub) avec une icône, un titre et une description concise.Section Avantages : Grille (2 colonnes) ; Colonne de gauche avec un titre et une liste à puces détaillant les bénéfices clés (Efficacité, Confidentialité/IA Locale, Synergie, Intelligence Collective) avec des icônes de validation ; Colonne de droite contenant le schéma SVG de synergie.Section "Comment ça marche" / Focus IA Locale : Titre centré expliquant le workflow simplifié ; Grille (3 colonnes) décrivant 3 étapes clés (ex: Collecte, Analyse IA Locale, Reporting & Feedback) ; Insister sur l'aspect local de l'IA dans cette section.Section Appel à l'Action (CTA) : Fond en dégradé distinctif ; Titre engageant ; Court paragraphe réitérant la proposition de valeur ; Bouton CTA principal ("Demandez votre Démo Personnalisée").Footer : Fond sombre simple ; Copyright ; Liens placeholder (Politique de confidentialité, Conditions d'utilisation).Exigences de Style et Animations (CSS et JavaScript) :Rendre la page visuellement dynamique et "stylée" sans être surchargée.Animations CSS :Animation d'entrée fluide (@keyframes fadeInUp : fade-in + légère translation vers le haut) pour les éléments textuels et boutons de la section Héros, appliquée avec un léger décalage (animation-delay) pour chaque élément.Animation de pulsation subtile (@keyframes pulse : léger changement d'échelle et/ou d'ombre) sur les boutons CTA principaux pour attirer l'attention.Effets de survol (:hover) améliorés sur les cartes interactives (fonctionnalités, étapes) et les boutons : légère lévitation (transform: translateY), changement subtil d'ombre portée ou de couleur de bordure, transitions douces (transition).Animations au Défilement (via JavaScript) :Implémenter des animations qui se déclenchent lorsque les éléments entrent dans la fenêtre visible lors du défilement.Utiliser JavaScript et l'API Intersection Observer pour détecter la visibilité.Appliquer un effet d'apparition (similaire à fadeInUp : opacity de 0 à 1, transform: translateY de ~30px à 0) aux éléments suivants lorsqu'ils deviennent visibles : chaque carte de fonctionnalité, chaque élément de la liste d'avantages, le schéma SVG, chaque carte d'étape "Comment ça marche".Implémenter un décalage (staggering) dans l'apparition des éléments qui sont en grille ou en liste (cartes de fonctionnalités, avantages, étapes) en utilisant des délais de transition CSS (transition-delay) pour un effet visuel plus agréable.Fournir le code HTML complet et autonome, incluant le CSS (dans une balise <style> dans le <head>) et le script JavaScript (dans une balise <script> avant la fin du </body>), le tout dans un seul fichier .html. Le code doit être propre, bien organisé et commenté (commentaires en anglais ou français) pour expliquer les différentes parties, en particulier les animations et le script JS.