index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>gleraTech Solutions — HuggingFace</title>
  <link href="https://fonts.bunny.net/css?family=PT+Serif:400,400i,700,700i|Syne:400,500,600,700,800|DM+Sans:300,300i,400,500&display=swap" rel="stylesheet" />
  <style>
    :root {
      --red: #ff3131;
      --black: #0a0a0a;
      --white: #ffffff;
      --off-white: #f8f7f5;
      --light-gray: #efefed;
      --mid-gray: #c8c8c4;
      --dark-gray: #444440;
      --font-headline: 'PT Serif', serif;
      --font-display: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }

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

    body {
      font-family: var(--font-body);
      background: var(--white);
      color: var(--black);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { color: var(--red); text-decoration: none; }
    a:visited { color: var(--red); }

    .card {
      max-width: 860px;
      margin: 0 auto;
      border-left: 1px solid var(--light-gray);
      border-right: 1px solid var(--light-gray);
    }

    .top-bar { height: 3px; background: var(--red); }

    /* ── header ── */
    .header {
      padding: 48px 48px 40px;
      border-bottom: 1px solid var(--light-gray);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 32px;
      align-items: center;
    }

    .header-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .header-logo img { width: 150px; height: auto; }

    .eyebrow {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .eyebrow::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 2px;
      background: var(--red);
      flex-shrink: 0;
    }

    .org-name {
      font-family: var(--font-headline);
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.05;
      margin-bottom: 14px;
    }

    .org-name em { font-style: normal; color: var(--red); }

    .org-desc {
      font-size: 16px;
      font-weight: 300;
      color: var(--dark-gray);
      line-height: 1.75;
      max-width: 520px;
    }

    /* ── stats ── */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid var(--light-gray);
    }

    .stat {
      padding: 28px 32px;
      border-right: 1px solid var(--light-gray);
    }

    .stat:last-child { border-right: none; }

    .stat-value {
      font-family: var(--font-display);
      font-size: 36px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--red);
      line-height: 1;
    }

    .stat-label {
      font-size: 12px;
      color: var(--dark-gray);
      margin-top: 6px;
    }

    /* ── tags ── */
    .tag-row {
      padding: 20px 48px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      border-bottom: 1px solid var(--light-gray);
    }

    .tag {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 5px 12px;
      border: 1.5px solid var(--light-gray);
      color: var(--dark-gray);
    }

    .tag-red { border-color: var(--red); color: var(--red); }

    /* ── focus areas ── */
    .areas-header { padding: 40px 48px 0; }

    .section-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-label::before {
      content: '';
      width: 20px;
      height: 2px;
      background: var(--red);
      flex-shrink: 0;
    }

    .areas-title {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .focus-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      margin-top: 24px;
      background: var(--light-gray);
    }

    .focus-card {
      background: var(--white);
      padding: 36px 32px;
      transition: background 0.3s;
    }

    .focus-card:hover { background: var(--off-white); }

    .focus-num {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      color: var(--red);
      letter-spacing: 0.1em;
      margin-bottom: 14px;
    }

    .focus-card h3 {
      font-family: var(--font-headline);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .focus-card p {
      font-size: 14px;
      color: var(--dark-gray);
      line-height: 1.7;
    }

    /* ── philosophy ── */
    .philosophy {
      background: var(--off-white);
      padding: 48px;
      border-top: 1px solid var(--light-gray);
      border-bottom: 1px solid var(--light-gray);
    }

    .philosophy blockquote {
      font-family: var(--font-headline);
      font-size: 24px;
      font-weight: 400;
      font-style: italic;
      color: var(--black);
      line-height: 1.55;
      max-width: 640px;
      border-left: 3px solid var(--red);
      padding-left: 24px;
      margin-top: 16px;
    }

    .philosophy blockquote strong {
      font-style: normal;
      color: var(--red);
    }

    /* ── link micro-cards ── */
    .links-section {
      padding: 36px 48px 40px;
      border-bottom: 1px solid var(--light-gray);
    }

    .links-section .section-label { margin-bottom: 20px; }

    .links-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
      background: var(--light-gray);
    }

    .link-card {
      background: var(--white);
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-decoration: none;
      color: var(--black);
      transition: background 0.2s;
    }

    .link-card:hover { background: var(--off-white); }
    .link-card:visited { color: var(--black); }

    .link-card-num {
      font-family: var(--font-display);
      font-size: 10px;
      font-weight: 700;
      color: var(--red);
      letter-spacing: 0.12em;
    }

    .link-card-name {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      color: var(--black);
      line-height: 1.2;
    }

    .link-card-sub {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 300;
      color: var(--mid-gray);
      line-height: 1.3;
    }

    .link-card-arrow {
      font-size: 12px;
      color: var(--light-gray);
      margin-top: auto;
      padding-top: 8px;
      transition: color 0.2s;
    }

    .link-card:hover .link-card-arrow { color: var(--red); }

    /* ── footer ── */
    .footer {
      background: var(--black);
      padding: 28px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .footer::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--red);
    }

    .footer img {
      height: 20px;

      opacity: 0.75;
    }

    .footer-copy {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
    }
  </style>
</head>
<body>
<div class="card">

  <div class="top-bar"></div>

  <div class="header">
    <div class="header-logo">
      <img src="https://public-images-1a-at.glera-tech.com/public-images/glera-logo-wide-b.png" alt="gleraTech" />
    </div>
    <div class="header-meta">
      <div class="eyebrow">Austrian Tech Startup · Salzburg, AT</div>
      <h1 class="org-name">gleraTech<br /><em>Solutions.</em></h1>
      <p class="org-desc">We build AI that actually works for people — transparent, privacy-centred, and human by design.</p>
    </div>
  </div>

  <div class="stats">
    <div class="stat">
      <div class="stat-value">AT</div>
      <div class="stat-label">Founded in Austria</div>
    </div>
    <div class="stat">
      <div class="stat-value">4</div>
      <div class="stat-label">Products in Development</div>
    </div>
    <div class="stat">
      <div class="stat-value">2027</div>
      <div class="stat-label">First Releases Planned</div>
    </div>
    <div class="stat">
      <div class="stat-value">100%</div>
      <div class="stat-label">European Infrastructure</div>
    </div>
  </div>

  <div class="tag-row">
    <span class="tag tag-red">privacy-first</span>
    <span class="tag tag-red">medical-ai</span>
    <span class="tag">gdpr-compliant</span>
    <span class="tag">austrian</span>
    <span class="tag">european-cloud</span>
    <span class="tag">local-ai</span>
    <span class="tag">open-source</span>
  </div>

  <div class="areas-header">
    <div class="section-label">What We Do</div>
    <div class="areas-title">Three core areas. One goal.</div>
  </div>

  <div class="focus-grid">
    <div class="focus-card">
      <div class="focus-num">01</div>
      <h3>Medical AI</h3>
      <p>AI support for hospitals and medical practices — diagnostics, documentation, workflows. All data stays within your facility.</p>
    </div>
    <div class="focus-card">
      <div class="focus-num">02</div>
      <h3>AI Agents</h3>
      <p>Intelligent assistants for individuals and businesses with no third-party data access — locally hosted or via European cloud.</p>
    </div>
    <div class="focus-card">
      <div class="focus-num">03</div>
      <h3>Infrastructure</h3>
      <p>From local OS to European cloud — building the foundation for sovereign, privacy-compliant computing. European. Reliable.</p>
    </div>
  </div>

  <div class="philosophy">
    <div class="section-label">Our Philosophy</div>
    <blockquote>
      Privacy is not a feature —
      <strong>it is the foundation.</strong>
      AI should serve people, not exploit them.
    </blockquote>
  </div>

  <div class="links-section">
    <div class="section-label">Links</div>
    <div class="links-grid">

      <a class="link-card" href="https://glera-tech.com" target="_blank">
        <span class="link-card-num">01</span>
        <span class="link-card-name">Website</span>
        <span class="link-card-sub">glera-tech.com</span>
        <span class="link-card-arrow">→</span>
      </a>

      <a class="link-card" href="https://blog.glera-tech.com" target="_blank">
        <span class="link-card-num">02</span>
        <span class="link-card-name">Blog</span>
        <span class="link-card-sub">blog.glera-tech.com</span>
        <span class="link-card-arrow">→</span>
      </a>

      <a class="link-card" href="https://x.com/gleraTech" target="_blank">
        <span class="link-card-num">03</span>
        <span class="link-card-name">X / Twitter</span>
        <span class="link-card-sub">@gleraTech</span>
        <span class="link-card-arrow">→</span>
      </a>

      <a class="link-card" href="https://www.instagram.com/gleratech/" target="_blank">
        <span class="link-card-num">04</span>
        <span class="link-card-name">Instagram</span>
        <span class="link-card-sub">@gleratech</span>
        <span class="link-card-arrow">→</span>
      </a>

      <a class="link-card" href="mailto:invest@glera-tech.com">
        <span class="link-card-num">05</span>
        <span class="link-card-name">Become a Partner</span>
        <span class="link-card-sub">invest@glera-tech.com</span>
        <span class="link-card-arrow">→</span>
      </a>

    </div>
  </div>

  <div class="footer">
    <img src="https://public-images-1a-at.glera-tech.com/public-images/gleraTech-icon-w.png" alt="gleraTech" />
    <span class="footer-copy">© 2026 gleraTech solutions Austria GmbH</span>
  </div>

</div>
</body>
</html>