index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f5f8fc">
  <meta name="description" content="Humanoid Application Lab is developing robot-agnostic software for industrial controls, training data, and AI. A branch of DataRealm Inc.">
  <title>Humanoid Application Lab — Humanoids, meet industry.</title>
  <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header class="site-header wrap">
    <a class="brand" href="#" aria-label="Humanoid Application Lab home">
      <img class="brand-mark" src="img/hal-mark.svg" alt="" width="1200" height="380">
      <span class="brand-name">HUMANOID<span class="brand-sub">APPLICATION LAB</span></span>
    </a>
    <nav aria-label="Main navigation">
      <a href="#work">Our focus</a>
      <a href="#lab">The lab</a>
      <a class="nav-contact" href="#contact">Let’s talk <span aria-hidden="true">↗</span></a>
    </nav>
  </header>

  <main id="main">
    <section class="hero wrap" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow"><span class="status-dot" aria-hidden="true"></span> HUMANOID ROBOTICS / INDUSTRIAL SOFTWARE</p>
        <h1 id="hero-title">Humanoids,<br>meet <span>industry.</span></h1>
        <p class="hero-description">New robots. Real-world work.<br>We’re building the software that connects humanoids to the industrial world.</p>
        <a class="button" href="mailto:info@datarealminc.com">Start a conversation <span aria-hidden="true">↗</span></a>
        <p class="hero-note"><span>Design</span><span>Validate</span><span>Integrate</span></p>
      </div>
      <figure class="hero-photo">
        <img src="img/team1.jpg" alt="Four people standing alongside humanoid robots in a robotics lab" width="2040" height="1536" fetchpriority="high">
        <figcaption><span class="photo-label">FROM THE LAB</span><span>People + robots. Work in progress.</span><span aria-hidden="true">↗</span></figcaption>
      </figure>
    </section>

    <div class="connection-band">
      <div class="wrap connection-inner"><span class="eyebrow">BUILT FOR THE WORLD ALREADY HERE</span><p>Existing machinery <span aria-hidden="true">/</span> PLCs <span aria-hidden="true">/</span> HMIs <span aria-hidden="true">/</span> Your next application</p></div>
    </div>

    <section id="work" class="work-section wrap" aria-labelledby="work-title">
      <div class="section-heading">
        <p class="eyebrow"><span class="section-number">01 /</span> OUR FOCUS</p>
        <div><h2 id="work-title">The software between<br>robot and real world.</h2><p>Different robots. A common foundation.<br>We’re developing tools that work across humanoid platforms.</p></div>
      </div>
      <div class="focus-grid">
        <article class="focus-item">
          <div class="focus-top"><span class="mono">01</span><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="5" y="9" width="14" height="14"/><rect x="29" y="25" width="14" height="14"/><path d="M19 16h17v9M12 23v9h17"/><circle cx="12" cy="16" r="2"/><circle cx="36" cy="32" r="2"/></svg></div>
          <h3>Connect &amp; control</h3><p>Create control programs that help humanoids interact with existing machinery, PLCs, and HMIs.</p>
          <span class="focus-tag">INDUSTRIAL INTEGRATION</span>
        </article>
        <article class="focus-item">
          <div class="focus-top"><span class="mono">02</span><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M16 6H6v10M32 6h10v10M6 32v10h10M42 32v10H32M15 24h18M24 15v18"/><circle cx="24" cy="24" r="11"/></svg></div>
          <h3>Capture &amp; learn</h3><p>Capture demonstrations and training data to turn real tasks into useful learning material.</p>
          <span class="focus-tag">TRAINING DATA</span>
        </article>
        <article class="focus-item">
          <div class="focus-top"><span class="mono">03</span><svg viewBox="0 0 48 48" aria-hidden="true"><path d="m11 12 13 12 13-12M11 36l13-12 13 12M24 6v18M24 24v18"/><circle cx="11" cy="12" r="4"/><circle cx="37" cy="12" r="4"/><circle cx="11" cy="36" r="4"/><circle cx="37" cy="36" r="4"/><circle cx="24" cy="24" r="5"/></svg></div>
          <h3>Train &amp; perceive</h3><p>Train vision systems and vision-language-action (VLA) models for industrial environments.</p>
          <span class="focus-tag">APPLIED AI</span>
        </article>
      </div>
    </section>

    <section id="lab" class="lab-section" aria-labelledby="lab-title">
      <div class="wrap lab-grid">
        <figure class="lab-photo"><img src="img/team0.jpg" alt="People and humanoid robots together in a lab with equipment, shelving, and a whiteboard" width="2040" height="1536" loading="lazy"><figcaption>Hands-on exploration. Practical ambition.</figcaption></figure>
        <div class="lab-copy"><p class="eyebrow"><span class="section-number">02 /</span> THE LAB</p><h2 id="lab-title">Early days.<br>Real ambition.</h2><p>We’re a new lab with a practical goal: make humanoid robotics useful in industry.</p><p>As a branch of DataRealm Inc., we’re bringing an industrial controls and software perspective to the next generation of robotics.</p><div class="parent-brand"><span class="mono">PART OF</span><a href="https://www.datarealminc.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit DataRealm Inc. (opens in a new tab)"><img src="img/datarealm.png" alt="DataRealm" width="2048" height="698" loading="lazy"><span aria-hidden="true">↗</span></a></div></div>
      </div>
    </section>

    <section id="contact" class="contact-section wrap" aria-labelledby="contact-title">
      <p class="eyebrow"><span class="section-number">03 /</span> LET’S TALK</p>
      <div class="contact-grid"><div><h2 id="contact-title">What could a humanoid<br>do in your world?</h2><p>Have an application in mind, or just curious?<br>We’d like to hear from you.</p></div><a class="contact-link" href="mailto:info@datarealminc.com"><span class="mono">GET IN TOUCH</span><span class="email">info@datarealminc.com <span aria-hidden="true">↗</span></span></a></div>
    </section>
  </main>
  <footer class="site-footer wrap"><a class="footer-brand" href="#"><img src="img/hal-mark.svg" alt="" width="1200" height="380"><span>Humanoid<span class="footer-brand-sub">Application Lab</span></span></a><p>A branch of <a href="https://www.datarealminc.com/" target="_blank" rel="noopener noreferrer">DataRealm Inc.</a></p><span class="copyright">© <span id="year">2026</span> Humanoid Application Lab</span><a class="back-top" href="#">Back to top <span aria-hidden="true">↑</span></a></footer>
</body>
</html>