<!-- ====== HERO ====== -->
<section class="py-5 py-md-6 bg-white">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-10">
        <h1 class="display-4 font-weight-bold lh-tight">
          <span class="text-dark">Arx, your</span>
          <span class="text-brand">microbial genome</span><br/>
          center for research efficiency.
        </h1>
        <p class="lead mt-3 text-muted">
          Advanced computational tools that transform raw microbial data into precise scientific insights.
          Navigate complex genomic landscapes with unprecedented clarity and speed.
        </p>
        <a href="#tools" class="btn btn-success btn-pill mt-3">Try our tools.</a>
      </div>
    </div>
  </div>
</section>

<!-- ====== TOOLS GRID ====== -->
<section id="tools" class="py-5">
<div class="container">
<div class="row">

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="pathway">
    <div class="tool-icon mb-3">
      <img alt="Pathways" src="/static/global/ionicons/md-beaker.svg">
    </div>
    <h5 class="mb-1">Pathways</h5>
    <p class="small text-muted mb-0">Unlock hidden metabolic &amp; regulatory pathways to accelerate discoveries.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="annotation-search">
    <div class="tool-icon mb-3">
      <img alt="Annotation search" src="/static/global/ionicons/md-search.svg">
    </div>
    <h5 class="mb-1">Annotation search</h5>
    <p class="small text-muted mb-0">Find genes and annotations across genomes in seconds.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="flower-plot">
    <div class="tool-icon mb-3">
      <img alt="Flower plot" src="/static/global/ionicons/md-flower.svg">
    </div>
    <h5 class="mb-1">Flower plot</h5>
    <p class="small text-muted mb-0">Visualize core and accessory genomes at a glance.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="compare-genes">
    <div class="tool-icon mb-3">
      <img alt="Compare genes" src="/static/global/ionicons/md-git-compare.svg">
    </div>
    <h5 class="mb-1">Compare genes</h5>
    <p class="small text-muted mb-0">Align and contrast homologs across selected genomes.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="gene-trait-matching">
    <div class="tool-icon mb-3">
      <img alt="Gene trait matching" src="/static/global/ionicons/md-funnel.svg">
    </div>
    <h5 class="mb-1">Gene trait matching</h5>
    <p class="small text-muted mb-0">Associate genotype patterns with phenotypic traits.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="blast">
    <div class="tool-icon mb-3">
      <img alt="Blast" src="/static/global/ionicons/md-rocket.svg">
    </div>
    <h5 class="mb-1">Blast</h5>
    <p class="small text-muted mb-0">Run rapid sequence similarity searches.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="trees">
    <div class="tool-icon mb-3">
      <img alt="Trees" src="/static/global/ionicons/md-git-branch.svg">
    </div>
    <h5 class="mb-1">Trees</h5>
    <p class="small text-muted mb-0">Build and explore phylogenetic relationships.</p>
  </a>
</div>

<div class="col-12 col-sm-6 col-lg-3 mb-4">
  <a class="tool-card d-block h-100 p-4 rounded-lg shadow-sm" href="dotplot">
    <div class="tool-icon mb-3">
      <img alt="Dot plot" src="/static/global/ionicons/md-grid.svg">
    </div>
    <h5 class="mb-1">Dot plot</h5>
    <p class="small text-muted mb-0">Compare long sequences for rearrangements and repeats.</p>
  </a>
</div>

</div>
</div>
</section>

<!-- ====== AVAILABLE GENOMES ====== -->
<section class="py-5 py-md-6">
  <div class="container">
    <h2 class="display-5 font-weight-bold lh-tight">
      <span class="text-brand">Available genomes</span> for<span class="d-none d-md-inline"/>
      this demo version.
    </h2>
    <p class="mt-3 text-muted col-lg-9 px-0">
      This instance now features 24 fully-annotated genomes of lactic acid bacteria, all imported, curated and ready for comparative exploration.
    </p>
    <a href="/genomes" class="btn btn-outline-success btn-pill">See all genomes.</a>
  </div>
</section>

<!-- ====== LOCAL STYLES ====== -->
<style>
  .lh-tight { line-height: 1.1; }
  .btn-pill { border-radius: 9999px; padding: .6rem 1.25rem; }

  /* Brand accent (purple like in the mock) */
  .text-brand { 
    background: linear-gradient(90deg, #8a5cf6 0%, #7a44ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* Cards */
  .tool-card { 
    border: 1px solid rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    background: #fff;
    border-radius: 1rem;
  }
  .tool-card:hover { 
    transform: translateY(-2px);
    box-shadow: 0 .75rem 1.5rem rgba(18, 38, 63, .08);
    border-color: rgba(138,92,246,.35);
    text-decoration: none;
  }
  .tool-card--active { 
    box-shadow: 0 .5rem 1rem rgba(122, 68, 255, .15);
    border-color: rgba(122,68,255,.35);
  }
  .tool-card h5 { font-weight: 700; }

  /* Icon pills */
  .tool-icon {
    width: 46px; height: 46px; 
    border-radius: 50%;
    background: rgba(122,68,255,.12);
    display: flex; align-items: center; justify-content: center;
  }
  .tool-icon img { width: 22px; height: 22px; display: block; }

  /* Spacing utilities to mimic screenshot */
  .py-md-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  @media (min-width: 992px){ .display-5{ font-size: 2.5rem; } }
</style>
