{# SPDX-FileCopyrightText: 2026 PythonWoods <dev@pythonwoods.dev> #}
{# SPDX-License-Identifier: Apache-2.0 #}
<div class="relative dark:bg-zinc-900/40 bg-zinc-50/40 border-b dark:border-zinc-800/60 border-zinc-200">
  <section class="max-w-5xl mx-auto mt-0 px-6 pt-8 md:pt-10 pb-14 md:pb-20 text-center flex flex-col items-center justify-start">

    <img src="{{ base_url }}/assets/brand/svg/zenzic-icon.svg" alt="Zenzic Icon" style="width:56px" class="mb-8 drop-shadow-sm opacity-60 grayscale contrast-125 hover:opacity-100 hover:grayscale-0 hover:contrast-100 transition-all duration-500 cursor-pointer">

    <div class="zz-hero__badge">
      <span class="zz-badge-dot"></span>
      <span class="zz-badge-text">v{{ config.extra.zenzic_version }}</span>
    </div>

    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.05] mb-8 max-w-4xl">
      <span class="zz-gradient-text">Deterministic Document Integrity</span><br>
      <span class="dark:text-zinc-500 text-zinc-400">Engine for Technical Documentation.</span>
    </h1>

    <p class="text-base md:text-lg dark:text-zinc-400 text-zinc-500 max-w-2xl leading-relaxed mb-12">
      Treat your Markdown documentation like production code. Detect broken links, credential leaks, and topological defects before merge.
    </p>


    <div class="flex flex-col sm:flex-row gap-4 items-center justify-center w-full sm:w-auto mb-16 md:mb-20">
      <a href="#quickstart" class="zz-btn h-11 px-8 w-full sm:w-auto inline-flex items-center justify-center rounded-full dark:bg-zinc-100 dark:text-zinc-950 bg-zinc-900 text-white text-sm font-medium dark:hover:bg-white hover:bg-zinc-800 transition-all duration-300 hover:-translate-y-0.5">
        Get started
      </a>
      <a href="https://github.com/PythonWoods/zenzic" rel="noopener noreferrer" class="zz-btn h-11 px-8 w-full sm:w-auto inline-flex items-center justify-center rounded-full bg-transparent dark:text-zinc-300 text-zinc-600 text-sm font-medium border dark:border-zinc-700 border-zinc-300 dark:hover:border-zinc-500 hover:border-zinc-400 dark:hover:text-white hover:text-zinc-900 transition-all duration-300 hover:-translate-y-0.5">
        View on GitHub
      </a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 w-full max-w-3xl">
      <div class="flex flex-col items-center text-center">
        <div class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 tabular-nums">100%</div>
        <div class="mt-2 text-[11px] font-mono tracking-[0.16em] uppercase dark:text-zinc-500 text-zinc-500">Deterministic</div>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 tabular-nums">0</div>
        <div class="mt-2 text-[11px] font-mono tracking-[0.16em] uppercase dark:text-zinc-500 text-zinc-500">Subprocesses</div>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 tabular-nums">O(N)</div>
        <div class="mt-2 text-[11px] font-mono tracking-[0.16em] uppercase dark:text-zinc-500 text-zinc-500">RE2 Engine</div>
      </div>
      <div class="flex flex-col items-center text-center">
        <div class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 tabular-nums">CI/CD</div>
        <div class="mt-2 text-[11px] font-mono tracking-[0.16em] uppercase dark:text-zinc-500 text-zinc-500">Native Gates</div>
      </div>
    </div>
  </section>
</div>