<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>paperless.media | Infrastructure de Marque Enterprise</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Outfit:wght@200;400;500;700;800&display=swap');

        :root {
            --brand-primary: #6366f1; /* Indigo 500 base */
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: #050505; /* Noir profond */
            color: #E2E8F0;
            overflow-x: hidden;
            /* L'animation globale qui pilote tout le site */
            animation: global-cycle 60s linear infinite;
        }

        .font-display {
            font-family: 'Outfit', sans-serif;
        }

        /* --- THE MAGMA ENGINE --- */
        .magma-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -10;
            pointer-events: none;
            overflow: hidden;
            background: #020204;
        }

        .magma-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
            animation: float 20s ease-in-out infinite alternate;
        }

        /* Blob 1: Base Indigo */
        .blob-1 {
            top: -10%;
            left: -10%;
            width: 70vw;
            height: 70vw;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
            animation-delay: 0s;
        }

        /* Blob 2: Purple Accent */
        .blob-2 {
            bottom: -20%;
            right: -10%;
            width: 60vw;
            height: 60vw;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
            animation-delay: -5s;
        }

        /* Blob 3: Pink Highlight */
        .blob-3 {
            top: 40%;
            left: 40%;
            width: 40vw;
            height: 40vw;
            background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);
            animation-delay: -10s;
        }

        /* --- SYNCED COLORS --- */
        /* Rotation de teinte globale synchronisée */
        @keyframes global-cycle {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, 50px) scale(1.1); }
            100% { transform: translate(-20px, -30px) scale(0.95); }
        }

        /* --- GLASSMOURPHISM --- */
        .glass-surface {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .glass-surface:hover {
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }

        /* Animations reveal */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        .logo-typo {
            font-feature-settings: "ss01", "ss02";
        }
    </style>
</head>
<body class="antialiased selection:bg-white/20 selection:text-white">

    <!-- MAGMA BACKGROUND (FIXED) -->
    <div class="magma-container">
        <div class="magma-blob blob-1"></div>
        <div class="magma-blob blob-2"></div>
        <div class="magma-blob blob-3"></div>
        <!-- Grain overlay pour la texture -->
        <div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');"></div>
    </div>

    <!-- TOP NAV -->
    <nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-[#050505]/50 backdrop-blur-xl transition-all duration-300">
        <div class="max-w-[1400px] mx-auto px-6 h-20 flex justify-between items-center">
            
            <!-- LOGO TYPO -->
            <a href="#" class="flex gap-1 items-baseline select-none group">
                <span class="text-2xl font-extrabold tracking-tight text-white font-display logo-typo">paperless</span>
                <span class="text-2xl font-light text-indigo-500 transition-colors font-display group-hover:text-indigo-400">.media</span>
            </a>

            <div class="hidden items-center space-x-8 text-sm font-medium md:flex text-slate-300">
                <a href="#ecosystem" class="transition-colors hover:text-white">Écosystème</a>
                <a href="#whitelabel" class="transition-colors hover:text-white">Marque Blanche</a>
                <a href="#deployment" class="transition-colors hover:text-white">Infrastructure</a>
            </div>

            <div class="flex gap-4 items-center">
                <a href="https://card.pm/signin" class="text-sm font-medium transition-colors text-slate-300 hover:text-white">Login</a>
                <a href="https://agenda.pm/technique" class="hidden sm:flex items-center justify-center px-5 py-2 text-sm font-bold text-black bg-white rounded-full hover:bg-indigo-50 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.2)]">
                    Réserver une démo
                </a>
            </div>
        </div>
    </nav>

    <!-- HERO SECTION -->
    <header class="flex overflow-hidden relative items-center pt-20 min-h-screen">
        
        <div class="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-12 gap-16 items-center relative z-10">
            
            <!-- Text Content -->
            <div class="lg:col-span-6 reveal-up">
                
                <h1 class="text-5xl md:text-7xl font-display font-bold tracking-tight mb-8 leading-[1.05] text-white drop-shadow-2xl">
                    L'OS de votre <br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-300 to-pink-400">identité digitale.</span>
                </h1>
                
                <p class="mb-10 max-w-xl text-xl font-light leading-relaxed text-slate-300">
                    Standardisez et déployez vos points de contact digitaux à l'échelle.
                    <strong class="font-medium text-white">Cartes de visite, Signatures email, Documents.</strong>
                    <br class="hidden md:block">
                    Une gouvernance centralisée pour vos collaborateurs.
                    <br class="hidden md:block">
                    <strong class="font-medium text-white">Des outils NFC pour lier le monde physique.</strong>
                </p>

                <div class="flex flex-col gap-4 sm:flex-row">
                    <a href="#contact" class="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-indigo-600/90 rounded-lg hover:bg-indigo-500 transition-all shadow-[0_0_40px_rgba(99,102,241,0.4)] backdrop-blur-sm border border-white/10">
                        Déployer ma flotte
                        <i data-lucide="arrow-right" class="ml-2 w-5 h-5"></i>
                    </a>
                    <a href="#features" class="inline-flex justify-center items-center px-8 py-4 text-base font-medium rounded-lg border backdrop-blur-md transition-all text-slate-200 border-white/10 hover:bg-white/10 hover:text-white bg-black/20">
                        Voir l'architecture
                    </a>
                </div>

                <div class="flex flex-wrap gap-8 items-center pt-8 mt-12 border-t opacity-80 border-white/10">
                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Deployé chez</div>
                    <div class="text-sm font-bold text-white transition-opacity cursor-default font-display hover:opacity-100">CENTURY 21</div>
                    <div class="text-sm font-bold text-white transition-opacity cursor-default font-display hover:opacity-100">LA POSTE</div>
                    <div class="text-sm font-bold text-white transition-opacity cursor-default font-display hover:opacity-100">ORPI</div>
                    <div class="text-sm font-bold text-white transition-opacity cursor-default font-display hover:opacity-100">KELLER WILLIAMS</div>
                </div>
            </div>

            <!-- Visual: The Dashboard Simulation -->
            <div class="relative lg:col-span-6 reveal-up" style="transition-delay: 200ms;">
                
                <div class="overflow-hidden rounded-xl border-t shadow-2xl transition-transform duration-700 ease-out transform rotate-1 glass-surface lg:rotate-2 hover:rotate-0 border-white/20">
                    <!-- Fake Browser Header -->
                    <div class="flex gap-2 items-center px-4 h-10 border-b border-white/5 bg-white/5">
                        <div class="flex gap-1.5">
                            <div class="w-2.5 h-2.5 rounded-full bg-white/20"></div>
                            <div class="w-2.5 h-2.5 rounded-full bg-white/20"></div>
                        </div>
                        <div class="ml-4 px-3 py-1 rounded bg-black/40 text-[10px] text-indigo-300/80 font-mono flex-1 text-center border border-white/5 shadow-inner">
                            admin.paperless.media/dashboard
                        </div>
                    </div>

                    <!-- Dashboard Content -->
                    <div class="p-8 bg-black/20">
                        <div class="flex justify-between items-end mb-10">
                            <div>
                                <div class="flex gap-2 items-center mb-2 text-xs font-bold tracking-wider text-indigo-400 uppercase">
                                    <span class="flex relative w-2 h-2">
                                      <span class="inline-flex absolute w-full h-full bg-indigo-400 rounded-full opacity-75 animate-ping"></span>
                                      <span class="inline-flex relative w-2 h-2 bg-indigo-500 rounded-full"></span>
                                    </span>
                                    Status de la flotte
                                </div>
                                <div class="text-4xl font-bold text-white font-display">12,450 <span class="text-lg font-normal text-slate-400">utilisateurs actifs</span></div>
                            </div>
                            <div class="text-right">
                                <div class="mb-1 text-xs text-slate-400">Taux d'adoption</div>
                                <div class="text-xl font-bold text-emerald-400">98.4%</div>
                            </div>
                        </div>

                        <!-- Grid of Stats -->
                        <div class="grid grid-cols-2 gap-4 mb-8">
                            <div class="p-5 rounded-lg border backdrop-blur-sm transition-colors bg-white/5 border-white/5 hover:border-indigo-500/30">
                                <div class="flex justify-between items-center mb-4">
                                    <div class="flex gap-2 items-center text-slate-400">
                                        <i data-lucide="scan-line" class="w-4 h-4"></i>
                                        <span class="text-xs font-semibold uppercase">Interactions</span>
                                    </div>
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">+12%</span>
                                </div>
                                <div class="text-2xl font-bold text-white">842,300</div>
                                <div class="overflow-hidden mt-3 w-full h-1 rounded-full bg-white/10">
                                    <div class="h-full bg-indigo-500 w-3/4 shadow-[0_0_10px_rgba(99,102,241,0.5)]"></div>
                                </div>
                            </div>
                            <div class="p-5 rounded-lg border backdrop-blur-sm transition-colors bg-white/5 border-white/5 hover:border-indigo-500/30">
                                <div class="flex justify-between items-center mb-4">
                                    <div class="flex gap-2 items-center text-slate-400">
                                        <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                                        <span class="text-xs font-semibold uppercase">Sync LDAP</span>
                                    </div>
                                    <i data-lucide="check-circle-2" class="w-3 h-3 text-emerald-500"></i>
                                </div>
                                <div class="text-2xl font-bold text-white">Live</div>
                                <div class="text-[10px] text-slate-500 mt-2">Dernière sync: 2m ago</div>
                            </div>
                        </div>

                        <!-- Logs simulation -->
                        <div class="space-y-1 font-mono text-[10px] text-slate-400/80">
                            <div class="flex justify-between pb-1 mb-2 border-b border-white/10">
                                <span>EVENT LOG</span>
                                <span>TIMESTAMP</span>
                            </div>
                            <div class="flex justify-between text-indigo-300">
                                <span>> New user provisioned (ID: 9942)</span>
                                <span>10:42:01</span>
                            </div>
                            <div class="flex justify-between">
                                <span>> Signature campaign #Winter updated</span>
                                <span>10:41:55</span>
                            </div>
                            <div class="flex justify-between">
                                <span>> 342 vCards updated via API</span>
                                <span>10:40:12</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- SECTION: ECOSYSTEM (All Products) -->
    <section id="ecosystem" class="relative py-32">
        <div class="max-w-[1400px] mx-auto px-6 relative z-10">
            <div class="mb-20 max-w-3xl reveal-up">
                <h2 class="mb-6 text-3xl font-bold text-white md:text-5xl font-display">L'Écosystème <span class="text-indigo-500">.pm</span></h2>
                <p class="text-lg font-light leading-relaxed text-slate-300">
                    Une suite d'outils interconnectés partageant la même base de données et les mêmes règles de marque. 
                    Activez les modules dont vous avez besoin, quand vous en avez besoin.
                </p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                
                <!-- PRODUCT: CARD.PM -->
                <a href="https://card.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="contact-round" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-indigo-500/20 flex items-center justify-center mb-6 text-indigo-300 border border-indigo-500/20 shadow-[0_0_15px_rgba(99,102,241,0.2)]">
                            <span class="text-lg font-bold font-display">C</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-indigo-300">card.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            La carte de visite intelligente. Toujours à jour, connectée au CRM, exportable en un clic.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">NFC</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">QR</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">WALLET</span>
                        </div>
                    </div>
                </a>

                <!-- PRODUCT: SIGN.PM -->
                <a href="https://sign.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up" style="transition-delay: 100ms;">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="pen-tool" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-6 text-purple-300 border border-purple-500/20 shadow-[0_0_15px_rgba(168,85,247,0.2)]">
                            <span class="text-lg font-bold font-display">S</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-purple-300">sign.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Centralisation des signatures emails. Déployez des bannières marketing sur 5000 comptes en instantané.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">GSUITE</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">OUTLOOK</span>
                        </div>
                    </div>
                </a>

                <!-- PRODUCT: FORM.PM -->
                <a href="https://form.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up" style="transition-delay: 200ms;">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="check-square" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center mb-6 text-orange-300 border border-orange-500/20 shadow-[0_0_15px_rgba(249,115,22,0.2)]">
                            <span class="text-lg font-bold font-display">F</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-orange-300">form.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Acquisition de leads terrain. Formulaires conformes RGPD, synchronisés avec votre CRM.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">LEADS</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">SURVEY</span>
                        </div>
                    </div>
                </a>

                <!-- PRODUCT: DOC.PM -->
                <a href="https://doc.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="file-text" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center mb-6 text-red-300 border border-red-500/20 shadow-[0_0_15px_rgba(239,68,68,0.2)]">
                            <span class="text-lg font-bold font-display">D</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-red-300">doc.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Distribution documentaire sécurisée. Plaquettes, tarifs, manuels, toujours à jour.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">PDF</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">SECURE</span>
                        </div>
                    </div>
                </a>

                <!-- PRODUCT: AGENDA.PM -->
                <a href="https://agenda.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up" style="transition-delay: 100ms;">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="calendar-clock" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center mb-6 text-emerald-300 border border-emerald-500/20 shadow-[0_0_15px_rgba(16,185,129,0.2)]">
                            <span class="text-lg font-bold font-display">A</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-emerald-300">agenda.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Prise de rendez-vous fluide intégrée à vos supports. Synchronisation bi-directionnelle.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">MEETING</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">SYNC</span>
                        </div>
                    </div>
                </a>

                <!-- PRODUCT: FLYER.PM -->
                <a href="https://flyer.pm" target="_blank" class="overflow-hidden relative p-8 rounded-2xl glass-surface group reveal-up" style="transition-delay: 200ms;">
                    <div class="absolute top-0 right-0 p-4 opacity-10 transition-opacity group-hover:opacity-20">
                        <i data-lucide="ticket" class="w-24 h-24 text-white"></i>
                    </div>
                    <div class="relative z-10">
                        <div class="w-12 h-12 rounded-lg bg-pink-500/20 flex items-center justify-center mb-6 text-pink-300 border border-pink-500/20 shadow-[0_0_15px_rgba(236,72,153,0.2)]">
                            <span class="text-lg font-bold font-display">T</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-pink-300">flyer.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Supports éphémères pour événements et promotions. Créez, diffusez, expirez.
                        </p>
                        <div class="flex gap-2 text-[10px] font-mono text-slate-400 uppercase tracking-wider">
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">EVENT</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">PROMO</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- SECURITY BANNER -->
            <div class="flex flex-col gap-6 justify-between items-center p-6 mt-16 rounded-xl border backdrop-blur-md border-white/10 bg-white/5 md:flex-row reveal-up">
                <div class="flex gap-4 items-center">
                    <div class="flex justify-center items-center w-10 h-10 rounded-full border bg-emerald-500/20 border-emerald-500/10">
                        <i data-lucide="server" class="w-5 h-5 text-emerald-400"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-white">Souveraineté & Sécurité</h4>
                        <p class="text-sm text-slate-400">Hébergement 100% France (SecNumCloud ready). Conformité RGPD stricte.</p>
                    </div>
                </div>
                <div class="flex gap-4 opacity-60">
                     <!-- Fake Cert badges -->
                    <div class="px-3 py-1 font-mono text-xs text-white rounded border border-white/20 bg-white/5">ISO 27001</div>
                    <div class="px-3 py-1 font-mono text-xs text-white rounded border border-white/20 bg-white/5">GDPR</div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: WHITE LABEL -->
    <section id="whitelabel" class="overflow-hidden relative py-32">
        
        <div class="max-w-[1400px] mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center relative z-10">
            <div class="reveal-up">
                <div class="mb-4 text-sm font-bold tracking-widest text-indigo-400 uppercase">Invisible Technology</div>
                <h2 class="mb-6 text-4xl font-bold text-white md:text-5xl font-display">
                    Votre Marque.<br>
                    <span class="text-slate-400">Notre Technologie.</span>
                </h2>
                <p class="mb-8 text-lg font-light leading-relaxed text-slate-300">
                    Vos outils ne doivent pas faire la publicité de votre fournisseur. 
                    <br><br>
                    Nous offrons une <strong>Marque Blanche Totale</strong> nativement. 
                    Vos collaborateurs naviguent sur vos domaines, voient votre logo, utilisent vos couleurs.
                    Paperless.media s'efface pour laisser briller votre identité corporative.
                </p>

                <div class="space-y-6">
                    <div class="flex gap-4 items-start">
                        <div class="w-10 h-10 rounded bg-indigo-500/10 flex items-center justify-center shrink-0 border border-indigo-500/20 shadow-[0_0_10px_rgba(99,102,241,0.2)]">
                            <span class="text-lg font-bold text-indigo-400 font-display">1</span>
                        </div>
                        <div>
                            <h4 class="mb-1 font-bold text-white">Custom Domain</h4>
                            <p class="text-sm text-slate-400">Vos outils sont accessibles via <code>connect.votre-entreprise.com</code>. Certificat SSL inclus.</p>
                        </div>
                    </div>
                    <div class="flex gap-4 items-start">
                        <div class="w-10 h-10 rounded bg-indigo-500/10 flex items-center justify-center shrink-0 border border-indigo-500/20 shadow-[0_0_10px_rgba(99,102,241,0.2)]">
                            <span class="text-lg font-bold text-indigo-400 font-display">2</span>
                        </div>
                        <div>
                            <h4 class="mb-1 font-bold text-white">Brand Guidelines Enforcement</h4>
                            <p class="text-sm text-slate-400">Verrouillage centralisé des polices et couleurs. Impossible pour un collaborateur de créer une carte "hors-charte".</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative reveal-up" style="transition-delay: 200ms;">
                <!-- Split Screen Visual -->
                <div class="grid relative z-10 grid-cols-2 gap-6">
                    <!-- Before -->
                    <div class="p-6 rounded-xl border opacity-40 grayscale transition-opacity glass-surface border-white/5 hover:opacity-60">
                        <div class="text-[10px] text-slate-400 font-mono mb-4 uppercase tracking-widest border-b border-white/10 pb-2">Sans Marque Blanche</div>
                        <div class="mb-4 w-20 h-6 rounded bg-slate-700"></div>
                        <div class="space-y-2">
                            <div class="w-full h-2 rounded bg-slate-800"></div>
                            <div class="w-2/3 h-2 rounded bg-slate-800"></div>
                            <div class="w-full h-2 rounded bg-slate-800"></div>
                        </div>
                        <div class="flex justify-center mt-8">
                            <div class="text-[9px] text-slate-600">Powered by Provider</div>
                        </div>
                    </div>
                    <!-- After -->
                    <div class="glass-surface p-6 rounded-xl border border-indigo-500 bg-gradient-to-br from-indigo-900/20 to-transparent shadow-[0_0_30px_rgba(99,102,241,0.15)]">
                        <div class="text-[10px] text-indigo-400 font-mono mb-4 flex items-center gap-2 uppercase tracking-widest border-b border-indigo-500/30 pb-2">
                            <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
                            Active
                        </div>
                        <!-- Your Logo Placeholder -->
                        <div class="flex gap-3 items-center mb-6">
                            <div class="flex justify-center items-center w-8 h-8 font-bold text-black bg-white rounded font-display">L</div>
                            <div class="font-bold tracking-tight text-white">VOTRE GROUPE</div>
                        </div>
                        <div class="space-y-3">
                            <div class="w-full h-2 rounded bg-indigo-500/20"></div>
                            <div class="w-3/4 h-2 rounded bg-indigo-500/20"></div>
                            <div class="w-5/6 h-2 rounded bg-indigo-500/20"></div>
                        </div>
                        <div class="mt-8">
                            <div class="py-2.5 w-full text-xs font-bold text-center text-white bg-indigo-600 rounded shadow-lg shadow-indigo-600/30">CONTACTER</div>
                        </div>
                    </div>
                </div>
                <!-- Connector Line -->
                <div class="flex absolute top-1/2 left-1/2 z-20 justify-center items-center w-10 h-10 rounded-full border backdrop-blur-md -translate-x-1/2 -translate-y-1/2 bg-black/50 border-white/20">
                    <i data-lucide="arrow-right" class="w-4 h-4 text-white"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: PM.STUDIO (Upsell) -->
    <section class="relative py-24 border-t border-white/5 bg-black/40">
        <div class="relative z-10 px-6 mx-auto max-w-4xl text-center reveal-up">
            <h2 class="mb-6 text-2xl font-bold text-white md:text-3xl font-display">
                Besoin d'une intégration spécifique ?
            </h2>
            <p class="mx-auto mb-8 max-w-2xl text-slate-400">
                Pour les cas d'usage complexes (intranet, workflows métiers, SSO spécifiques), notre division 
                <span class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">pm.studio</span> 
                développe des modules sur-mesure greffés à l'infrastructure Paperless.
            </p>
            <a href="https://pm.studio" target="_blank" class="inline-flex items-center pb-1 text-sm font-bold text-white border-b border-indigo-500 transition-all hover:text-indigo-400">
                Explorer pm.studio <i data-lucide="arrow-up-right" class="ml-2 w-3 h-3"></i>
            </a>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="py-12 text-sm border-t backdrop-blur-md bg-black/80 border-white/5">
        <div class="max-w-[1400px] mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="font-mono text-xs text-slate-500">
                &copy; 2025 paperless.media — Infrastructure souveraine.
            </div>
            <div class="flex gap-8 text-xs font-medium tracking-wider uppercase text-slate-400">
                <a href="#" class="transition-colors hover:text-white">Compliance</a>
                <a href="#" class="transition-colors hover:text-white">SLA 99.9%</a>
                <a href="#" class="transition-colors hover:text-white">Security</a>
                <a href="mailto:enterprise@paperless.media" class="text-indigo-400 hover:text-indigo-300">Contact Sales</a>
            </div>
        </div>
    </footer>

    <script>
        lucide.createIcons();

        // Scroll Reveal Logic
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.reveal-up').forEach(el => observer.observe(el));
    </script>
</body>
</html>
