{% extends 'base.html' %}{% block content %}
<section class="hero">
  <div class="hero-copy">
    <p class="eyebrow"><span class="live-dot" aria-hidden="true"></span> A FRESH PERSPECTIVE ON TRADING</p>
    <h1>Your trading.<br><span>In focus.</span></h1>
    <p class="intro">Explore managed algos with fixed logic. Review the risks, connect your broker and decide when to activate.</p>
    <div class="actions">
    {% if user %}<a class="button" href="/account/my-algos">Go to My Algos <span aria-hidden="true">↗</span></a>
    {% else %}<a class="button" href="/account/signup">Create your account <span aria-hidden="true">↗</span></a><a class="quiet-link" href="/account/login">Already a member? Sign in <span aria-hidden="true">→</span></a>{% endif %}
    </div>
    <div class="hero-proof"><span><b>01</b> broker account</span><i aria-hidden="true"></i><span>Your connection. Your control.</span></div>
  </div>
  <div class="hero-visual" aria-label="Your broker, strategies and market tools connected to Quantzy">
    <div class="visual-grid" aria-hidden="true"></div>
    <div class="orbit orbit-one" aria-hidden="true"></div><div class="orbit orbit-two" aria-hidden="true"></div>
    <div class="scene-caption"><span class="mini-mark">Q</span><div>THE QUANTZY CONNECTION<small>One broker. A complete connection.</small></div></div>
    <div class="sculpture" aria-hidden="true"><div class="sculpture-shadow"></div><div class="sculpture-ring"></div><div class="sculpture-tail"></div><span class="sculpture-spark spark-one">✦</span><span class="sculpture-spark spark-two">✦</span></div>
    <div class="floating-account account-one"><span class="account-glyph">01</span><div><strong>Your primary account</strong><small>A dedicated trading connection</small></div><span class="account-arrow" aria-hidden="true">↗</span></div>
    <div class="floating-account account-two"><span class="account-glyph">02</span><div><strong>Your strategy desk</strong><small>Build, review and manage your strategies.</small></div></div>
    <div class="floating-account account-three"><span class="account-glyph">03</span><div><strong>Room to explore</strong><small>Discover the Algo Collection.</small></div></div>
    <div class="visual-footnote"><span class="tiny-diamond" aria-hidden="true"></span> BUILT AROUND YOUR TRADING DAY</div>
  </div>
</section>
<section class="benefit-strip" aria-label="Workspace benefits"><p><span aria-hidden="true">◇</span> Your private connection</p><p><span aria-hidden="true">⌘</span> Your own proxy connection</p><p><span aria-hidden="true">↗</span> A focused strategy desk</p></section>
<section class="getting-started" id="how-it-works">
  <div class="section-heading"><div><p class="eyebrow">A CLEAR PATH TO GETTING STARTED</p><h2>Less setup friction.<br>More room to focus.</h2></div><p>Three straightforward steps bring your account, connection and connection together.</p></div>
  <div class="features">
    <article><div class="feature-top"><span class="feature-icon" aria-hidden="true">⌘</span><span class="step-index">01</span></div><h3>Connect your broker</h3><p>Choose an available integration and securely save your broker API credentials.</p></article>
    <article><div class="feature-top"><span class="feature-icon" aria-hidden="true">◎</span><span class="step-index">02</span></div><h3>Verify your connection</h3><p>Add your HTTP proxy details. Quantzy checks its outgoing IP before saving.</p></article>
    <article><div class="feature-top"><span class="feature-icon" aria-hidden="true">↗</span><span class="step-index">03</span></div><h3>Activate your algo</h3><p>Choose an algo, review the account and risk notes, then explicitly activate your deployment.</p></article>
  </div>
</section>
<aside class="access-note"><span class="badge">EARLY ACCESS</span><p>Testing is limited to 10 users sharing three active connections. Explore Algos and manage your deployments from My Algos.</p></aside>
{% endblock %}