* {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

      font-family: 'Courier New', monospace;

    }

    body {

      background: #000;

      color: #00ff00;

      overflow-x: hidden;

    }

    header {

      background: #111;

      padding: 20px;

      text-align: center;

      border-bottom: 2px solid #00ff00;

    }

    header h1 {

      font-size: 2.5rem;

      text-shadow: 0 0 10px #00ff00;

    }

    nav a {

      color: #00ff00;

      margin: 0 15px;

      text-decoration: none;

      font-weight: bold;

      transition: color 0.3s;

    }

    nav a:hover {

      color: #fff;

    }

    .hero {

      text-align: center;

      padding: 100px 20px;

    }

    .typing {

      font-size: 1.5rem;

      border-right: 3px solid #00ff00;

      display: inline-block;

      white-space: nowrap;

      overflow: hidden;

      animation: typing 4s steps(40, end), blink 0.75s step-end infinite;

    }

    @keyframes typing {

      from { width: 0 }

      to { width: 100% }

    }

    @keyframes blink {

      from, to { border-color: transparent }

      50% { border-color: #00ff00; }

    }

    .matrix-bg {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: black;

      z-index: -1;

      overflow: hidden;

    }

    canvas {

      display: block;

    }

    section {

      padding: 60px 20px;

      max-width: 1000px;

      margin: auto;

    }

    h2 {

      text-align: center;

      margin-bottom: 30px;

      text-shadow: 0 0 10px #00ff00;

    }

    .card {

      background: #111;

      border: 1px solid #00ff00;

      padding: 20px;

      margin: 15px 0;

      border-radius: 10px;

      box-shadow: 0 0 15px #00ff00;

    }

    footer {

      background: #111;

      color: #00ff00;

      text-align: center;

      padding: 20px;

      margin-top: 40px;

      border-top: 2px solid #00ff00;

    }