<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Project Martix</title>
  <style>
    @font-face {
      font-family: 'Matrix';
      src: url('static/matrix.ttf') format('truetype');
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Matrix', monospace;
      background-color: black;
      color: #00ff00;
      overflow-x: hidden;
    }

    #background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: -3;
    }

    #background video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #darken-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.8); /* darkness */
      z-index: -2;
    }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('static/martix.jpg') center center no-repeat;
      background-size: cover;
      opacity: 0.8;
      z-index: -1;
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 50px;
      padding-bottom: 120px;
      min-height: 100vh;
    }

    .title {
      font-size: 9rem; /* slightly smaller */
      color: #00ff00;
      text-shadow: 0 0 4px #000a007c;
      margin-bottom: 10px;
      font-weight: normal;
    }

    .rabbit-container {
      margin: 0 auto 10px;
    }

    .rabbit {
      width: 50px;
      height: auto;
    }

    .slogan {
      font-size: 2.2rem;
      color: #00ff00;
      text-shadow: 0 0 2px #010e0167;
      margin-top: 5px; /* tighter spacing */
      font-weight: normal;
    }

    .morpheus-pad {
      margin-top: 40px;
      background-color: rgba(0, 0, 0, 0.7);
      border: 2px solid #00ff00;
      border-radius: 12px;
      padding: 30px 40px;
      text-align: center;
      width: 600px;
      animation: pulse-glow 2s infinite;
    }

    .morpheus-title {
      font-size: 2.3rem;
      margin-bottom: 20px;
      color: #00ff00;
    }

    .morpheus-image {
      max-width: 100%;
      height: auto;
      margin-bottom: 20px;
      filter: drop-shadow(0 0 10px #00ff00);
      animation: pulse-glow 3s infinite;
    }

    .morpheus-slogan {
      font-size: 1.2rem;
      color: #00ff00;
    }

    @keyframes pulse-glow {
      0% { box-shadow: 0 0 10px #00ff00; }
      50% { box-shadow: 0 0 25px #00ff00; }
      100% { box-shadow: 0 0 10px #00ff00; }
    }

    .cta-container {
      margin-top: 40px; /* closer to pad */
      margin-bottom: 30px;
    }

    .cta-button {
      background-color: #060e06;
      color: rgb(6, 248, 6);
      font-size: 1rem;
      padding: 14px 32px;
      text-decoration: none;
      border-radius: 8px;
      box-shadow: 0 0 10px #00ff00;
      transition: background-color 0.3s ease;
      font-weight: normal;
    }

    .cta-button:hover {
      background-color: #00cc00;
    }
  </style>
</head>
<body>

  <div id="background">
    <video autoplay muted loop>
      <source src="static/staticBG.mp4" type="video/mp4" />
    </video>
    <div id="darken-layer"></div>
    <div id="overlay"></div>
  </div>

  <div class="content">
    <h1 class="title">Project Martix</h1>

    <div class="rabbit-container">
      <img src="static/rabbit.png" alt="Rabbit" class="rabbit" />
    </div>

    <p class="slogan">“We’re Not Just Building Tools. We’re Rewriting the Code of the Ecosystem.”</p>

    <!-- Morpheus Pad -->
    <div class="morpheus-pad">
      <div class="morpheus-title">Morpheus Recovery Tool Out Now</div>
      <img src="static/use.png" alt="Morpheus Preview" class="morpheus-image" />
      <div class="morpheus-slogan">Find What’s Yours. Reclaim What’s Lost. Morpheus Delivers.</div>
    </div>

    <!-- CTA Button at the Bottom -->
    <div class="cta-container">
      <a href="recovery.html" class="cta-button">TRY MORPHEUS NOW</a>
    </div>
  </div>

</body>
</html>