{% extends "base.html" %}
{% block title %}RWA Calculator{% endblock %}

{#
  Full-screen constellation hero, matching the docs landing page. Loads the
  shared landing design system (homepage.css) instead of app.css and suppresses
  the base sticky nav so the hero owns the screen. The animated polar-bear
  constellation is injected into .constellation-bg by bear-constellation.js.
#}

{% block styles %}
<link rel="stylesheet" href="/static/tokens.css">
<link rel="stylesheet" href="/static/homepage.css">
{% endblock %}

{% block topnav %}{% endblock %}

{% block body %}
<section class="landing-hero" data-screen-label="01 Hero">
  <div class="constellation-bg" aria-hidden="true"></div>

  <div class="landing-scrim" aria-hidden="true"></div>

  <div class="hero">
    <header class="hero-nav">
      <a class="brand" href="/">
        <img src="/static/favicon.png" alt="" class="brand-icon">
        <div class="brand-text">
          <div class="brand-name">OpenAfterHours</div>
          <div class="brand-tag">UK Credit Risk RWA Calculator</div>
        </div>
      </a>
      <nav class="nav-links">
        <a href="/calculator">Calculator</a>
        <a href="/comparison">Comparison</a>
        <a href="/reconciliation">Reconciliation</a>
        <a href="/workbench">Workbench</a>
        <a href="{{ docs_url }}" target="_blank" rel="noopener">Docs</a>
        <a href="https://github.com/OpenAfterHours/rwa_calculator" class="github-link" target="_blank" rel="noopener">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.55v-2.13c-3.2.7-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.34.95.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.15 1.18a10.93 10.93 0 0 1 5.74 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.26 5.68.41.36.78 1.06.78 2.15v3.18c0 .31.21.66.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z"/></svg>
          <span>GitHub</span>
        </a>
      </nav>
    </header>

    <div class="hero-body">
      <div class="eyebrow">
        <span class="prompt">$</span>
        <span>UK CREDIT RISK &middot; CRR &amp; BASEL 3.1</span>
      </div>

      <h1 class="title">
        Risk-Weighted Assets,<br>
        <span class="title-accent">computed at the speed of Polars.</span>
      </h1>

      <p class="lede">
        Run the Standardised, F-IRB and A-IRB approaches over your portfolio,
        explore the results, and quantify the CRR &rarr; Basel 3.1 capital impact
        &mdash; all locally.
      </p>

      <div class="cta-row">
        <a href="/calculator" class="btn btn-primary">
          Open Calculator
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </a>
        <a href="/comparison" class="btn btn-ghost">
          CRR vs Basel 3.1 <span class="ext">&#8599;</span>
        </a>
      </div>

      <div class="meta-row">
        <div class="meta">
          <div class="meta-num">50&ndash;100&times;</div>
          <div class="meta-lbl">Faster than reference impl.</div>
        </div>
        <div class="meta-divider"></div>
        <div class="meta">
          <div class="meta-num">~5,300</div>
          <div class="meta-lbl">Regulatory test cases</div>
        </div>
        <div class="meta-divider"></div>
        <div class="meta">
          <div class="meta-num">2 frameworks</div>
          <div class="meta-lbl">CRR &middot; Basel 3.1</div>
        </div>
        <div class="meta-divider"></div>
        <div class="meta status">
          <div class="meta-num"><span class="status-dot"></span> Active dev</div>
          <div class="meta-lbl">Pre-1.0 &middot; not production-ready</div>
        </div>
      </div>
    </div>

    <footer class="hero-footer">
      <div>OpenAfterHours &middot; Open source regulatory tools</div>
      <div class="footer-meta">Apache-2.0 licensed &middot; github.com/OpenAfterHours</div>
    </footer>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script defer src="/static/bear-constellation.js"></script>
{% endblock %}