<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CYBERION-SPARK-X</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(to bottom, #1a1a1a, #333);
      color: #ffffff;
      overflow-x: hidden;
    }
    h1, h2, h3 {
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      margin: 20px 0;
      text-transform: uppercase;
      color: #03a9f4;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .center {
      text-align: center;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 20px auto;
      border-radius: 8px;
    }
    a {
      text-decoration: none;
    }
    .button {
      display: inline-block;
      margin: 10px;
      padding: 10px 20px;
      background: #03a9f4;
      color: #fff;
      border-radius: 5px;
      font-size: 1.1rem;
      font-weight: bold;
      transition: background 0.3s ease;
    }
    .button:hover {
      background: #0288d1;
    }
    .badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;
    }
    .badge {
      font-size: 0.9rem;
      padding: 8px 12px;
      border-radius: 5px;
      color: #fff;
      background: #444;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .badge img {
      width: 20px;
      height: 20px;
    }
    .stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .stats img {
      max-width: 200px;
    }
    .divider {
      margin: 40px auto;
      width: 80%;
      height: 2px;
      background: #03a9f4;
      border-radius: 5px;
    }
    .gif-container {
      text-align: center;
    }
    .responsive-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .footer {
      text-align: center;
      padding: 20px 0;
      background: #222;
      color: #aaa;
    }
    @media (max-width: 768px) {
      h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>

  <header class="center">
    <h1>CYBERION-SPARK-X</h1>
    <img src="https://files.catbox.moe/5b2d6j.jpg" alt="Spark-X Image">
  </header>

  <div class="container">
    <div class="gif-container">
      <img src="https://i.imgur.com/LyHic3i.gif" alt="Cool GIF">
    </div>
    
    <h2 align="center">Here is the Progress for Spark-X</h2>

    <div class="badges">
      <div class="badge">
        <img src="https://img.shields.io/github/followers/carl24tech?color=blue&style=flat-square" alt="Followers Badge">
        Followers
      </div>
      <div class="badge">
        <img src="https://img.shields.io/github/stars/carl24tech/Cyberion-Spark-X?color=blue&style=flat-square" alt="Stars Badge">
        Stars
      </div>
      <div class="badge">
        <img src="https://img.shields.io/github/forks/carl24tech/Cyberion-Spark-X?color=yellow&style=flat-square" alt="Forks Badge">
        Forks
      </div>
      <div class="badge">
        <img src="https://img.shields.io/github/repo-size/carl24tech/Cyberion-Spark-X?style=flat-square&color=pink" alt="Size Badge">
        Repo Size
      </div>
      <div class="badge">
        <img src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" alt="Maintained Badge">
        Maintained
      </div>
    </div>

    <div class="stats">
      <img src="https://profile-counter.glitch.me/{Cyberion-Spark-X}/count.svg" alt="Visitor Count">
    </div>

    <div class="divider"></div>

    <h2 class="center">How to Get …