<!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>personal.media | L'Infrastructure Personnelle</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: #10b981; /* On part d'une base Emerald pour le perso, mais l'anim va tout faire tourner */
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: #050505;
            color: #E2E8F0;
            overflow-x: hidden;
            animation: global-cycle 12s linear infinite;
        }

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

        /* --- THE MAGMA ENGINE (Identique Enterprise) --- */
        .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: Emerald Base (Personal Touch) */
        .blob-1 {
            top: -10%;
            left: -10%;
            width: 70vw;
            height: 70vw;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
            animation-delay: 0s;
        }

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

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

        /* --- SYNCED COLORS --- */
        @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); }
        }

        /* --- GLASSMORPHISM --- */
        .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 -->
    <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>
        <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="sticky 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">personal</span>
                <span class="text-2xl font-light text-emerald-500 transition-colors font-display group-hover:text-emerald-400">.media</span>
            </a>

            <div class="hidden items-center space-x-8 text-sm font-medium md:flex text-slate-300">
                <a href="#files" class="transition-colors hover:text-white">Fichiers</a>
                <a href="#manifesto" class="transition-colors hover:text-white">Manifeste</a>
                <a href="#cockpit" class="transition-colors hover:text-white">Cockpit</a>
            </div>

            <div class="flex gap-4 items-center">
                <a href="https://my.pm.studio/signup" class="flex items-center justify-center px-5 py-2 text-sm font-bold text-black bg-white rounded-full hover:bg-emerald-50 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.2)]">
                    Démarrer
                </a>
            </div>
        </div>
    </nav>

    <!-- HERO SECTION -->
    <header class="flex overflow-hidden relative items-center pt-2 pb-20 min-h-screen md:pt-20">
        
        <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">
                <div class="inline-flex gap-2 items-center px-3 py-1 mb-8 text-xs font-bold tracking-wider text-emerald-300 uppercase rounded-full border backdrop-blur-md border-emerald-500/30 bg-emerald-500/10">
                    <span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
                    Infrastructure Souveraine
                </div>
                
                <h1 class="text-5xl md:text-8xl font-display font-bold tracking-tight mb-8 leading-[0.95] text-white drop-shadow-2xl">
                    Votre<br>Identité.<br>
                    <span class="italic font-light text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-300 to-cyan-400">À Vous.</span>
                </h1>
                
                <p class="mb-10 max-w-xl text-xl font-light leading-relaxed text-slate-300">
                    Les réseaux sociaux ont pris nos noms, nos liens, nos données.
                    <strong class="font-medium text-white">Nous avons repris le contrôle.</strong>
                    <br class="hidden md:block">
                    Votre propre infrastructure média.
                </p>

                <div class="flex flex-col gap-4 sm:flex-row">
                    <a href="https://vcard.pm/signup" class="inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-emerald-600/90 rounded-lg hover:bg-emerald-500 transition-all shadow-[0_0_40px_rgba(16,185,129,0.4)] backdrop-blur-sm border border-white/10">
                        Créer mon terminal
                        <i data-lucide="arrow-right" class="ml-2 w-5 h-5"></i>
                    </a>
                </div>
            </div>

            <!-- Visual: The "Root Directory" Card -->
            <div class="relative lg:col-span-6 reveal-up" style="transition-delay: 200ms;">
                
                <div class="flex overflow-hidden relative flex-col justify-between p-12 rounded-xl border-t shadow-2xl transition-transform duration-700 ease-out transform rotate-1 glass-surface aspect-square lg:rotate-2 hover:rotate-0 border-white/20">
                    
                    <!-- Aesthetic Code -->
                    <div class="font-mono text-xs tracking-widest uppercase text-emerald-500/60">
                        > STATUS: ONLINE<br>
                        > ENCRYPTION: ENABLED<br>
                        > ID: 98f-2a1-xc9
                    </div>

                    <!-- Center Logo -->
                    <div class="relative z-10 self-center text-center">
                        <div class="text-7xl font-bold tracking-tighter text-white drop-shadow-lg md:text-8xl font-display">
                            pm<span class="text-emerald-500">/</span>me
                        </div>
                        <div class="mt-4 font-mono text-sm tracking-widest text-slate-400">root directory</div>
                    </div>

                    <!-- Bottom Info -->
                    <div class="flex justify-between items-end pt-6 border-t border-white/10">
                        <span class="font-mono text-xs text-slate-400">100% OWNERSHIP</span>
                        <i data-lucide="fingerprint" class="w-8 h-8 text-emerald-500"></i>
                    </div>

                    <!-- Background Glow within card -->
                    <div class="absolute bottom-0 right-0 w-64 h-64 bg-emerald-500/20 rounded-full blur-[80px] pointer-events-none"></div>
                </div>
            </div>
        </div>
    </header>

    <!-- SECTION: THE DIRECTORY (Files) -->
    <section id="files" 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">Le Système de Fichiers</h2>
                <p class="text-lg font-light leading-relaxed text-slate-300">
                    Pas d'applications gadgets. Des fichiers maîtres.
                    Chaque extension <span class="px-1 py-0.5 font-mono text-sm font-bold text-emerald-400 rounded bg-emerald-500/10">.pm</span> gère un aspect critique de votre présence.
                </p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                
                <!-- vCard.pm -->
                <a href="https://vcard.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-blue-500/20 flex items-center justify-center mb-6 text-blue-300 border border-blue-500/20 shadow-[0_0_15px_rgba(59,130,246,0.2)]">
                            <span class="text-lg font-bold font-display">v</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-blue-300">vcard.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Point d'entrée universel. Votre carte personnelle de connexion.
                        </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">PUBLIC</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">LINK</span>
                        </div>
                    </div>
                </a>

                <!-- Card.pm -->
                <a href="https://card.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="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-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">C</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-emerald-300">card.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Votre carte de visite professionnelle devient votre média personnel.
                        </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">PRO</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">BIZ</span>
                        </div>
                    </div>
                </a>

                 <!-- Doc.pm -->
                 <a href="https://doc.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="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]">
                            Infrastructure documentaire. Hébergez vos PDFs, slides et books.
                        </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">HOSTED</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">PDF</span>
                        </div>
                    </div>
                </a>

                <!-- Form.pm -->
                <a href="https://form.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="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]">
                            Terminal d'acquisition. Leads, inscriptions, contacts.
                        </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">INPUT</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">DATA</span>
                        </div>
                    </div>
                </a>

                <!-- 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: 100ms;">
                    <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-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">T</span>
                        </div>
                        <h3 class="mb-2 text-2xl font-bold text-white transition-colors group-hover:text-purple-300">flyer.pm</h3>
                        <p class="text-sm text-slate-400 mb-6 min-h-[40px]">
                            Communication éphémère. Offres, events, invitations.
                        </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">TEMP</span>
                            <span class="px-2 py-1 rounded border bg-white/5 border-white/5">PROMO</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- SECTION: MANIFESTO -->
    <section id="manifesto" 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-emerald-400 uppercase">Philosophie</div>
                <h2 class="mb-8 text-4xl italic font-light text-white md:text-5xl font-display">
                    <span class="mr-2 font-mono not-italic text-emerald-500/80">"</span>Votre identité ne leur appartient pas. Pas de logo parasite.<span class="ml-2 font-mono not-italic text-emerald-500/80">"</span>
                </h2>
                
                <div class="space-y-8">
                    <div class="flex gap-6 items-start group">
                        <div class="w-px h-24 bg-gradient-to-b from-red-500 to-transparent opacity-50"></div>
                        <div>
                            <h4 class="mb-2 font-mono text-sm font-bold tracking-wider text-white text-red-400">> SOCIAL_MEDIA</h4>
                            <p class="text-sm leading-relaxed text-slate-400">
                                Vous louez une audience. L'algorithme décide qui vous voit. Vos données entraînent leurs modèles.
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex gap-6 items-start group">
                         <div class="w-px h-24 bg-gradient-to-b from-emerald-500 to-transparent"></div>
                        <div>
                            <h4 class="mb-2 font-mono text-sm font-bold tracking-wider text-white text-emerald-400">> PERSONAL_MEDIA</h4>
                            <p class="text-sm leading-relaxed text-slate-400">
                                Vous possédez le canal. Distribution directe (SMS, QR, NFC, Email). Souveraineté totale du contenu.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative reveal-up" style="transition-delay: 200ms;">
                <!-- Abstract Representation of Control -->
                <div class="flex relative justify-center items-center p-12 rounded-full glass-surface aspect-square border-white/5">
                    <div class="absolute inset-0 rounded-full blur-3xl animate-pulse bg-emerald-500/10"></div>
                    <div class="relative z-10 text-center">
                        <div class="mb-4 text-9xl font-bold tracking-tighter text-white font-display">YOU</div>
                        <div class="pt-4 font-mono text-sm tracking-widest text-emerald-400 border-t border-emerald-500/30">ARE THE PLATFORM</div>
                    </div>
                    
                    <!-- Orbiting Satellites -->
                    <div class="absolute inset-0 animate-[spin_10s_linear_infinite]">
                        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4 w-4 h-4 bg-white rounded-full shadow-[0_0_20px_white]"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: COCKPIT -->
    <section id="cockpit" class="relative py-32 border-t border-white/5 bg-black/40">
        <div class="max-w-[1000px] mx-auto px-6 text-center reveal-up relative z-10">
            <h2 class="text-6xl md:text-9xl font-bold font-display text-white/5 mb-[-0.35em] relative z-0 tracking-tighter select-none">
                CONTROL
            </h2>
            <h3 class="relative z-10 mb-8 text-3xl font-bold text-white md:text-5xl font-display">Un Cockpit Unique.</h3>
            <p class="mx-auto mb-12 max-w-xl text-lg font-light text-slate-400">
                Tout gérer depuis un seul terminal. Agenda, Signature, Stats.
                <span class="font-medium text-emerald-400">Sans la complexité.</span>
            </p>
            
            <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
                <a href="https://agenda.pm" class="flex flex-col gap-3 items-center p-6 rounded-xl glass-surface group hover:border-emerald-500/40">
                    <i data-lucide="calendar-clock" class="w-6 h-6 text-emerald-500 transition-transform group-hover:scale-110"></i>
                    <span class="text-sm font-bold text-white">agenda.pm</span>
                </a>
                <a href="https://sign.pm" class="flex flex-col gap-3 items-center p-6 rounded-xl glass-surface group hover:border-purple-500/40">
                    <i data-lucide="pen-line" class="w-6 h-6 text-purple-500 transition-transform group-hover:scale-110"></i>
                    <span class="text-sm font-bold text-white">sign.pm</span>
                </a>
                <a href="https://qrcode.pm" class="flex flex-col gap-3 items-center p-6 rounded-xl glass-surface group hover:border-blue-500/40">
                    <i data-lucide="qr-code" class="w-6 h-6 text-blue-500 transition-transform group-hover:scale-110"></i>
                    <span class="text-sm font-bold text-white">qrcode.pm</span>
                </a>
                <a href="https://track.pm" class="flex flex-col gap-3 items-center p-6 rounded-xl glass-surface group hover:border-orange-500/40">
                    <i data-lucide="bar-chart-2" class="w-6 h-6 text-orange-500 transition-transform group-hover:scale-110"></i>
                    <span class="text-sm font-bold text-white">track.pm</span>
                </a>
            </div>
        </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">
                SYSTEM STATUS: <span class="text-emerald-500">OPERATIONAL</span><br>
                &copy; 2025 PERSONAL.MEDIA
            </div>
            <div class="flex gap-8 font-mono text-xs font-medium tracking-wider uppercase text-slate-400">
                <a href="mailto:contact@card.pm" class="transition-colors hover:text-white">Support</a>
                <a href="https://vcard.pm" class="transition-colors hover:text-white">Architecture</a>
                <a href="https://my.pm.studio/signup" class="text-emerald-500 hover:text-emerald-400">Login_</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>