/* 
     * RESET
     */
     * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
      /*
       * Default font for the document.
       * We’ll apply Space Mono specifically to certain headings.
       */
      body, button, input, textarea {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
  
      /*
       * BODY:
       */
      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        color: #fff;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        /* background-color: #000028; /* Solid dark base */
        background: rgba(0, 0, 40, 0.5); /* Solid dark base */
  
        /* 
         * Stacking 3 radial gradients + 1 linear background
         * Slight variations around #0052FF
         */
        background:
          /* Slightly bluish shadow */
          radial-gradient(
            circle at 40% 60%, 
            #00124a, 
            transparent 60%
          ) no-repeat,
  
          /* Medium blue patch (#0034b6) */
          radial-gradient(
            circle at 80% 20%, 
            #0034b6, 
            transparent 50%
          ) no-repeat,
  
          /* Brighter blue patch (#0052ff) */
          radial-gradient(
            circle at 20% 30%, 
            #0052ff, 
            transparent 40%
          ) no-repeat,
  
          /* Linear gradient to unify everything */
          linear-gradient(270deg, #000028, #001f5c, #002b85, #000028);
  
        /* Large sizes to avoid visible edges */
        background-size:
          250% 250%, 
          300% 300%, 
          300% 300%, 
          600% 600%;
  
        background-position:
          40% 60%, 
          80% 20%, 
          20% 30%, 
          0% 50%;
  
        /* Subtle blend modes */
        background-blend-mode:
          screen, 
          screen, 
          overlay, 
          normal;
  
        /* Slow, minimal-step animation */
        animation: animateLava 20s ease-in-out infinite alternate;
      }
  
      @keyframes animateLava {
        0% {
          background-position: 40% 60%, 80% 20%, 20% 30%, 0% 50%;
          background-size: 250% 250%, 300% 300%, 300% 300%, 600% 600%;
        }
        50% {
          background-position: 42% 58%, 78% 22%, 22% 32%, 100% 50%;
          background-size: 270% 270%, 320% 320%, 280% 280%, 600% 600%;
        }
        100% {
          background-position: 40% 60%, 80% 20%, 20% 30%, 0% 50%;
          background-size: 250% 250%, 300% 300%, 300% 300%, 600% 600%;
        }
      }
  
      /* 
       * HEADER
       */
      header {
        width: 100%;
        padding: 1rem 2rem;
        background-color: rgba(255, 255, 255, 0.1); 
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;
      }
  
      header h1,
      .landing h1 {
        font-family: 'Space Mono', monospace;
      }
  
      header h1 {
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
  
      header h1 img {
        height: 40px;
      }
  
      nav ul {
        list-style: none;
        display: flex;
        gap: 1rem;
      }
  
      nav a {
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
      }
  
      nav a:hover {
        color: #E0E0E0;
      }
  
      /* 
       * LANDING SECTION
       */
      .landing {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 2rem;
        position: relative;
        z-index: 1; /* Above the animated background */
      }
  
      .landing img.center-image {
        max-width: 300px; 
        margin-bottom: 1.5rem;
      }
  
      .landing h2 {
        font-size: 3rem;
        margin-bottom: 1rem;
        font-family: 'Space Mono', monospace;
        color: #c8d7ff;
      }
  
      .landing p {
        font-size: 1.2rem;
        max-width: 600px;
        margin-bottom: 2rem;
        line-height: 1.6;
        font-family: 'Space Mono', monospace;
      }
  
      /* 
       * SOCIAL ICON LINKS
       */
      .link-icons {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
      }
      .link-icons img {
        width: 48px; 
        height: 48px;
        cursor: pointer;
        /* Smooth scale transition */
        transition: transform 0.3s ease, opacity 0.3s ease;
      }
      .link-icons img:hover {
        transform: scale(1.15); /* Zoom effect */
        opacity: 0.9;          /* Slight fade for extra feedback */
      }
  
      /* 
       * STATS SECTION
       */
      .stats-container {
        margin-top: 2rem; /* Some space below icons */
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
      }
  
      .stat-box {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 0.25rem;
        padding: 1rem 1.5rem;
        text-align: center;
        min-width: 180px;
      }
  
      .stat-box p {
        margin: 0.5rem 0;
        line-height: 1.4;
        text-align: center;
        align-items: center;          /* vertical center */
  
      }
  
      /* 
       * FOOTER
       */
      footer {
        background-color: rgba(255, 255, 255, 0.1);
        text-align: center;
        padding: 1rem;
        position: relative;
        z-index: 1;
      }
  
      footer p {
        font-size: 0.9rem;
      }
  
  
      .video-background {
        position: fixed;       /* Pour rester fixe même au scroll */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;           /* Derrière le contenu principal */
        overflow: hidden;
      }
      
      .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;     /* Recouvre tout l’écran sans déformation */
      }