Brutalist Hero Layout with Grid Rulers

<div class="gridlock-container"
  style="--cell-size: 32px; --bg-color: #050505; --grid-color: #1a1a1a; --ruler-bg: #0a0a0a; --text-main: #ffffff; --card-bg: #0d0d0d; --card-border: #222222; --accent: #00ffaa; --font-main: 'Inter', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; display: grid; grid-template-columns: var(--cell-size) 1fr; grid-template-rows: var(--cell-size) 1fr; height: 100vh; width: 100%; overflow: hidden; background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-main);">
  <style>
    .canvas-bg {
      background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
      background-size: var(--cell-size) var(--cell-size);
      background-position: -1px -1px;
    }

    .ruler-border {
      border: 1px solid var(--grid-color);
    }

    .tick-h {
      width: var(--cell-size);
      min-width: var(--cell-size);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 10px;
      color: #444;
      border-right: 1px solid var(--grid-color);
    }

    .tick-v {
      height: var(--cell-size);
      min-height: var(--cell-size);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 4px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: #444;
      border-bottom: 1px solid var(--grid-color);
    }

    .custom-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      padding: 24px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .custom-card:hover {
      border-color: var(--accent);
      box-shadow: 0 0 20px rgba(0, 255, 170, 0.05);
      transform: translateY(-2px);
    }

    .hero-title {
      font-size: clamp(3rem, 8vw, 7rem);
      line-height: 0.9;
      font-weight: 800;
      letter-spacing: -0.05em;
      text-transform: uppercase;
    }

    .project-img-box {
      aspect-ratio: 16/9;
      background: #111;
      border: 1px solid var(--grid-color);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .project-img-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: 8px 8px;
      opacity: 0.5;
    }

    ::-webkit-scrollbar {
      width: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--grid-color);
    }
  </style>

  <!-- UI Framework -->
  <div class="ruler-border" style="background: var(--ruler-bg); z-index: 50;"></div>
  <div class="flex overflow-hidden ruler-border" style="background: var(--ruler-bg); grid-column: 2; z-index: 40;">
    <script src="https://cdn.jsdelivr.net/npm/lucide@0.344.0/dist/umd/lucide.min.js"></script>
    <div class="flex">
      <template id="tick-template"><span class="tick-h"></span></template>
      <script>
        const container = document.currentScript.parentElement;
                const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
                alphabet.forEach(l => {
                    const s = document.createElement('span');
                    s.className = 'tick-h';
                    s.innerText = l;
                    container.appendChild(s);
                });
      </script>
    </div>
  </div>

  <div class="flex flex-col overflow-hidden ruler-border"
    style="background: var(--ruler-bg); grid-row: 2; z-index: 40;">
    <script>
      const vContainer = document.currentScript.parentElement;
            for(let i=1; i<=50; i++) {
                const s = document.createElement('span');
                s.className = 'tick-v';
                s.innerText = i;
                vContainer.appendChild(s);
            }
    </script>
  </div>

  <!-- Main Viewport -->
  <div class="canvas-bg overflow-y-auto relative" style="grid-column: 2; grid-row: 2;">
    <div class="max-w-7xl mx-auto p-8 lg:p-16 grid grid-cols-12 gap-8">

      <!-- Hero Section -->
      <div class="col-span-12 mb-16 relative">
        <div class="mb-4 flex items-center gap-2 text-[var(--accent)] font-mono text-xs uppercase tracking-widest">
          <span class="w-2 h-2 bg-[var(--accent)] rounded-full animate-pulse"></span>
          Systems Operational
        </div>
        <h1 class="hero-title mb-8">BUILD<br>FAST.<br>SCALE<br>HARD.</h1>

        <div class="custom-card max-w-lg">
          <span class="block font-mono text-[10px] text-gray-500 mb-4 tracking-tighter">/ ARCHIVE_01</span>
          <p class="text-gray-400 leading-relaxed">We are a core engineering collective developing hyper-scalable
            architectures and brutalist interfaces for the next generation of web infrastructure.</p>
          <div class="flex gap-4 mt-8">
            <button class="px-6 py-2 bg-white text-black text-xs font-bold uppercase tracking-tighter hover:bg-[var(--accent)] transition-colors">Initialize</button>
            <button class="px-6 py-2 border border-white/10 text-xs font-bold uppercase tracking-tighter hover:border-white transition-colors">View Logic</button>
          </div>
        </div>
      </div>

      <!-- Services -->
      <div class="col-span-12 lg:col-span-4 flex flex-col gap-8">
        <h3 class="font-mono text-[10px] uppercase text-gray-600 border-b border-gray-800 pb-2">Capabilities</h3>
        <div class="custom-card group">
          <div class="text-[var(--accent)] mb-4"><i data-lucide="cpu" class="w-5 h-5"></i></div>
          <h2 class="text-xl font-bold mb-2">Protocol Design</h2>
          <p class="text-sm text-gray-500">Atomic systems built for reliability and programmatic expansion.</p>
        </div>
        <div class="custom-card group">
          <div class="text-[var(--accent)] mb-4"><i data-lucide="layers" class="w-5 h-5"></i></div>
          <h2 class="text-xl font-bold mb-2">Neural Interface</h2>
          <p class="text-sm text-gray-500">High-density UX optimized for cognitive load and workflow speed.</p>
        </div>
      </div>

      <!-- Work Grid -->
      <div class="col-span-12 lg:col-span-8">
        <h3 class="font-mono text-[10px] uppercase text-gray-600 border-b border-gray-800 pb-2 mb-8">Production_Logs
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="group cursor-pointer">
            <div class="project-img-box mb-4">
              <div
                class="w-12 h-12 border border-[var(--accent)] rotate-45 group-hover:rotate-90 transition-transform duration-500">
              </div>
            </div>
            <div class="flex justify-between items-center px-1">
              <span class="font-bold text-sm tracking-tight uppercase">Quant-OS Interface</span>
              <span class="font-mono text-[10px] text-gray-600">2024</span>
            </div>
          </div>
          <div class="group cursor-pointer">
            <div class="project-img-box mb-4">
              <div class="flex gap-1">
                <div class="w-1 h-8 bg-white/20 group-hover:bg-[var(--accent)] transition-colors"></div>
                <div class="w-1 h-8 bg-white/40 group-hover:bg-[var(--accent)] transition-colors"></div>
                <div class="w-1 h-8 bg-white/60 group-hover:bg-[var(--accent)] transition-colors"></div>
              </div>
            </div>
            <div class="flex justify-between items-center px-1">
              <span class="font-bold text-sm tracking-tight uppercase">Bio-Synth Portal</span>
              <span class="font-mono text-[10px] text-gray-600">2024</span>
            </div>
          </div>
        </div>
      </div>

      <footer class="col-span-12 mt-24 pt-8 border-t border-gray-900 flex justify-between items-center opacity-30">
        <span class="font-mono text-[10px]">CORE GRID SYSTEMS // EST 2024</span>
        <span class="font-mono text-[10px]">LOC: 40.7128° N, 74.0060° W</span>
      </footer>
    </div>
  </div>

  <!-- Persistent Nav -->
  <nav class="fixed bottom-8 right-8 bg-[#0a0a0a] border border-white/10 p-2 flex gap-1 z-[100] shadow-2xl">
    <a href="#"
      class="px-4 py-2 text-[10px] font-bold uppercase hover:bg-white hover:text-black transition-all">Studio</a>
    <a href="#"
      class="px-4 py-2 text-[10px] font-bold uppercase hover:bg-white hover:text-black transition-all">Engine</a>
    <a href="#" class="px-4 py-2 text-[10px] font-bold uppercase bg-[var(--accent)] text-black">Inquire</a>
    <script>
      document.addEventListener('DOMContentLoaded', () => { lucide.createIcons(); });
    </script>
  </nav>
</div>