<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="referrer" content="no-referrer-when-downgrade">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Byteform Technologies LTD</title>
  <style>
    :root {
      --primary: #FFFFFF;
      --secondary: #000000;
      --accent: #808080;
      --text: #FFFFFF;
      --bg: #000000;
      --card-bg: #1A1A1A;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
    }

    .snowflake {
      color: #fff;
      font-size: 1em;
      font-family: Arial;
      text-shadow: 0 0 1px #000;
      position: fixed;
      top: -10%;
      z-index: 9999;
      user-select: none;
      cursor: default;
      animation-name: snowflakes-fall, snowflakes-shake;
      animation-duration: 10s, 3s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-play-state: running, running;
    }

    @keyframes snowflakes-fall {
      0% {
        top: -10%
      }

      100% {
        top: 100%
      }
    }

    @keyframes snowflakes-shake {
      0% {
        transform: translateX(0px)
      }

      50% {
        transform: translateX(80px)
      }

      100% {
        transform: translateX(0px)
      }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    header {
      background-color: var(--secondary);
      padding: 20px 0;
      box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    }

    .logo {
      width: 150px;
      height: auto;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    nav ul {
      list-style-type: none;
      display: flex;
    }

    nav ul li {
      margin-left: 30px;
    }

    nav ul li a {
      color: var(--text);
      text-decoration: none;
      font-weight: 500;
      font-size: 1.1rem;
      transition: color 0.3s ease;
    }

    nav ul li a:hover {
      color: var(--accent);
    }

    .hero {
      background: linear-gradient(135deg, var(--secondary), var(--bg));
      padding: 150px 0;
      text-align: center;
    }

    .hero h1 {
      font-size: 3.5rem;
      margin-bottom: 20px;
      color: var(--primary);
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero p {
      font-size: 1.3rem;
      margin-bottom: 40px;
      color: var(--text);
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-button {
      display: inline-block;
      background-color: var(--primary);
      color: var(--secondary);
      padding: 15px 30px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s ease;
      border: 2px solid var(--primary);
    }

    .cta-button:hover {
      background-color: transparent;
      color: var(--primary);
    }

    .features {
      padding: 100px 0;
    }

    .features h2 {
      text-align: center;
      font-size: 2.8rem;
      margin-bottom: 60px;
      color: var(--primary);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
    }

    .feature-card {
      background-color: var(--card-bg);
      padding: 40px;
      border-radius: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
    }

    .feature-card h3 {
      font-size: 1.8rem;
      margin-bottom: 20px;
      color: var(--primary);
    }

    .feature-card p {
      font-size: 1.1rem;
      color: var(--text);
    }

    footer {
      background-color: var(--secondary);
      color: var(--text);
      text-align: center;
      padding: 30px 0;
      font-size: 1rem;
    }

    #information {
      display: none;
      padding: 100px 0;
    }

    #information h2 {
      font-size: 2.8rem;
      margin-bottom: 40px;
      color: var(--primary);
      text-align: center;
    }

    #information p {
      font-size: 1.2rem;
      margin-bottom: 30px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.8;
    }

    .back-button {
      display: inline-block;
      background-color: var(--primary);
      color: var(--secondary);
      padding: 12px 24px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
      margin-top: 30px;
      border: 2px solid var(--primary);
    }

    .back-button:hover {
      background-color: transparent;
      color: var(--primary);
    }

    .social-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }

    .social-card {
      background-color: var(--card-bg);
      padding: 30px;
      border-radius: 15px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .social-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
    }

    .social-card i {
      font-size: 3rem;
      color: var(--primary);
      margin-bottom: 20px;
    }

    .social-card h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      color: var(--primary);
    }

    .social-card p {
      font-size: 1rem;
      color: var(--text);
      margin-bottom: 20px;
    }

    .social-button {
      display: inline-block;
      background-color: var(--primary);
      color: var(--secondary);
      padding: 10px 20px;
      border-radius: 25px;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .social-button:hover {
      background-color: var(--accent);
      color: var(--primary);
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake">❅</div>
    <div class="snowflake">❅</div>
    <div class="snowflake">❆</div>
    <div class="snowflake">❄</div>
    <div class="snowflake">❅</div>
    <div class="snowflake">❆</div>
    <div class="snowflake">❄</div>
    <div class="snowflake">❅</div>
    <div class="snowflake">❆</div>
    <div class="snowflake">❄</div>
  </div>
  <header>
    <nav class="container">
      <div class="logo">
        <a href="#" class="home-button">
          <img src="https://storage.wildwest.gg/uploads/2024-12-14T20:42:36.473Z_byteform-technologies-high.png" alt="Byteform Technologies Logo" class="logo">
        </a>
      </div>
      <ul>
        <li><a href="#features" class="features-button">Features</a></li>
        <li><a href="#" class="info-button">Information</a></li>
        <li><a href="#socials" class="socials-button">Socials</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div class="container">
        <h1>Seamless gameplay, powerful performance</h1>
        <p>Revolutionizing Roblox development with cutting-edge server-side and client-side solutions</p>
        <a href="https://github.com/ByteformTechnologies" class="cta-button">Learn More</a>
      </div>
    </section>
    <section id="features" class="features">
      <div class="container">
        <h2>Features</h2>
        <div class="feature-grid">
          <div class="feature-card">
            <h3>Client-Side Executor</h3>
            <p>Executes scripts in-game that are client-side, enabling dynamic in-game scripting capabilities.</p>
          </div>
          <div class="feature-card">
            <h3>Server-Side Executor</h3>
            <p>Executes scripts that are server-side, ensuring secure and scalable game mechanics.</p>
          </div>
          <div class="feature-card">
            <h3>Performance Optimization</h3>
            <p>Advanced tools and techniques to boost your game's performance and player experience.</p>
          </div>
          <div class="feature-card">
            <h3>Scalable Architecture</h3>
            <p>Build games that can handle massive player bases without compromising on quality.</p>
          </div>
        </div>
      </div>
    </section>
    <section id="information" class="container">
      <h2>Byteform Technologies: Empowering Roblox Developers</h2>
      <p>At Byteform Technologies LTD, we're dedicated to revolutionizing the Roblox development landscape. Our comprehensive suite of server-side and client-side solutions is meticulously crafted to empower developers in creating immersive, high-performance games that not only captivate players but also scale effortlessly.</p>
      <p>Our team of seasoned engineers and game development experts work tirelessly to stay at the forefront of Roblox technology. This commitment ensures that our clients always have access to the most cutting-edge solutions, enabling them to push the boundaries of what's possible in the Roblox ecosystem.</p>
      <p>Whether you're an independent developer with a vision or part of a large studio looking to optimize your workflow, Byteform Technologies is here to support you every step of the way. Our scalable systems, high-performance optimizations, and user-centric development approach are designed to take your Roblox games to the next level.</p>
      <p>Join us in shaping the future of Roblox game development. With Byteform Technologies, you're not just building games; you're crafting experiences that will define the next generation of interactive entertainment.</p>
      <a href="#" class="back-button">Back to Home</a>
    </section>
    <section id="socials" class="container" style="display: none;">
      <h2>Connect with Us</h2>
      <p>Stay updated with our latest developments and join our vibrant community on social media.</p>
      <div class="social-grid">
        <div class="social-card">
          <i class="fab fa-github"></i>
          <h3>GitHub</h3>
          <p>Explore our open-source projects and contribute to our codebase.</p>
          <a href="https://github.com/ByteformTechnologies" target="_blank" rel="noopener noreferrer" class="social-button">Follow Us</a>
        </div>
        <div class="social-card">
          <i class="fab fa-twitter"></i>
          <h3>Twitter</h3>
          <p>Get real-time updates and engage with our dev community.</p>
          <a href="https://twitter.com/ByteformTech" target="_blank" rel="noopener noreferrer" class="social-button">Tweet Us</a>
        </div>
        <div class="social-card">
          <i class="fab fa-discord"></i>
          <h3>Discord</h3>
          <p>Join our server for discussions, support, and collaboration.</p>
          <a href="https://discord.gg/byteform" target="_blank" rel="noopener noreferrer" class="social-button">Join Server</a>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <div class="container">
      <p>© 2024 Byteform Technologies LTD. All rights reserved.</p>
    </div>
  </footer>
  <script>
    (function() {
      function showSection(sectionId) {
        document.querySelector('.hero').style.display = 'none';
        document.getElementById('features').style.display = 'none';
        document.getElementById('information').style.display = 'none';
        document.getElementById('socials').style.display = 'none';
        document.getElementById(sectionId).style.display = 'block';
      }

      function showHome() {
        document.querySelector('.hero').style.display = 'block';
        document.getElementById('features').style.display = 'block';
        document.getElementById('information').style.display = 'none';
        document.getElementById('socials').style.display = 'none';
      }
      // Attach event listeners to buttons
      document.addEventListener('DOMContentLoaded', function() {
        const infoButton = document.querySelector('.info-button');
        const featuresButton = document.querySelector('.features-button');
        const socialsButton = document.querySelector('.socials-button');
        const backButton = document.querySelector('.back-button');
        const homeButton = document.querySelector('.home-button');
        if (infoButton) {
          infoButton.addEventListener('click', function(e) {
            e.preventDefault();
            showSection('information');
          });
        }
        if (featuresButton) {
          featuresButton.addEventListener('click', function(e) {
            e.preventDefault();
            showSection('features');
          });
        }
        if (socialsButton) {
          socialsButton.addEventListener('click', function(e) {
            e.preventDefault();
            showSection('socials');
          });
        }
        if (backButton) {
          backButton.addEventListener('click', function(e) {
            e.preventDefault();
            showHome();
          });
        }
        if (homeButton) {
          homeButton.addEventListener('click', function(e) {
            e.preventDefault();
            showHome();
          });
        }
      });
      // Create snowflakes
      const snowflakesContainer = document.querySelector('.snowflakes');
      const snowflakeCount = 50;
      for (let i = 0; i < snowflakeCount; i++) {
        const snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        snowflake.innerHTML = '❅';
        snowflake.style.left = `${Math.random() * 100}vw`;
        snowflake.style.animationDelay = `${Math.random() * 10}s`;
        snowflakesContainer.appendChild(snowflake);
      }
    })();
  </script>

</body>

</html>