1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / devscfvi / AblePro /
Filename : landing.html
back
<!doctype html>
<html lang="en">
<head>
  <title>TradeJournal — The Professional Trading Journal for Serious Traders</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Track every trade, analyse your patterns, and become a more consistent trader. $10/month.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <!-- Bootstrap 5 standalone — NO AblePro -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Tabler icons -->
  <link rel="stylesheet" href="assets/fonts/tabler-icons.min.css">

  <style>
    /* ── Reset / Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --dark:   #090e1a;
      --mid:    #0f172a;
      --navy:   #1a1f35;
      --accent: #4680FF;
      --green:  #10b981;
      --red:    #ef4444;
      --muted:  rgba(255,255,255,.5);
      --border: rgba(255,255,255,.08);
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Sora', sans-serif; background: #fff; color: #1e293b; -webkit-font-smoothing: antialiased; }

    /* ── Navbar ── */
    .lp-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: .85rem 0; transition: background .3s, box-shadow .3s;
    }
    .lp-nav.scrolled { background: rgba(9,14,26,.95); backdrop-filter: blur(16px); box-shadow: 0 2px 24px rgba(0,0,0,.4); }
    .lp-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .lp-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
    .lp-brand-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(70,128,255,.3); }
    .lp-brand-icon i { color: #fff; font-size: 1rem; }
    .lp-brand-name { font-size: 1rem; font-weight: 700; color: #fff; }
    .lp-nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; }
    .lp-nav-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .84rem; font-weight: 500; padding: .4rem .8rem; border-radius: 6px; transition: color .2s; }
    .lp-nav-links a:hover { color: #fff; }
    .lp-nav-cta { display: flex; align-items: center; gap: .6rem; }
    .btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: .4rem 1rem; border-radius: 8px; font-size: .83rem; font-weight: 600; text-decoration: none; transition: background .2s; }
    .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
    .btn-cta { background: var(--accent); color: #fff; padding: .45rem 1.1rem; border-radius: 8px; font-size: .83rem; font-weight: 700; text-decoration: none; box-shadow: 0 3px 14px rgba(70,128,255,.35); transition: background .2s, box-shadow .2s; }
    .btn-cta:hover { background: #3570ef; color: #fff; box-shadow: 0 4px 20px rgba(70,128,255,.5); }
    @media (max-width: 768px) { .lp-nav-links { display: none; } }

    /* ── Hero ── */
    .lp-hero {
      min-height: 100vh;
      background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a2545 0%, var(--dark) 65%);
      display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px;
    }
    .lp-hero::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size: 54px 54px;
    }
    .hero-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(70,128,255,.13) 0%, transparent 70%); pointer-events: none; }
    .hero-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.03em; }
    .hero-title .grad { background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero-sub { font-size: 1.05rem; color: var(--muted); line-height: 1.78; max-width: 500px; }
    .trust-item { display: flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.45); font-size: .78rem; font-weight: 500; }
    .trust-item i { color: var(--green); }

    /* ── Hero mockup ── */
    .hero-mockup { background: #1a2235; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); }
    .mockup-bar { background: #0d1321; padding: .65rem 1rem; display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .mockup-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    .stat-chip { border-radius: 8px; padding: .5rem .75rem; text-align: center; }
    .trade-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem .65rem; border-radius: 6px; margin-bottom: .3rem; font-size: .75rem; }
    .status-pill { font-size: .62rem; font-weight: 700; padding: .15rem .45rem; border-radius: 4px; text-transform: uppercase; }

    /* ── Section shared ── */
    .section-tag { display: inline-flex; align-items: center; gap: .4rem; background: rgba(70,128,255,.1); border: 1px solid rgba(70,128,255,.25); color: #60a5fa; border-radius: 9999px; padding: .28rem .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
    .section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
    .section-sub { color: #64748b; font-size: .95rem; line-height: 1.72; max-width: 520px; margin: 0 auto; }

    /* ── Broker strip ── */
    .broker-strip { background: #0d1321; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.1rem 0; }
    .broker-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; padding: .42rem 1rem; color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 600; white-space: nowrap; }

    /* ── Features ── */
    .feat-card { border: 1.5px solid #f1f5f9; border-radius: 16px; padding: 1.75rem; background: #fff; transition: box-shadow .2s, border-color .2s; height: 100%; }
    .feat-card:hover { box-shadow: 0 8px 30px rgba(70,128,255,.1); border-color: #dbeafe; }
    .feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.3rem; }

    /* ── Module tabs ── */
    .modules-section { background: linear-gradient(135deg, var(--dark) 0%, #0f172a 100%); padding: 100px 0; }
    .module-tab { padding: 1rem 1.25rem; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all .22s; margin-bottom: .4rem; }
    .module-tab:hover { background: rgba(255,255,255,.05); }
    .module-tab.active { background: rgba(70,128,255,.12); border-color: rgba(70,128,255,.3); }
    .module-tab h6 { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.55); margin: 0 0 .2rem; transition: color .2s; }
    .module-tab.active h6 { color: #93c5fd; }
    .module-tab p { font-size: .75rem; color: rgba(255,255,255,.3); margin: 0; line-height: 1.5; transition: color .2s; }
    .module-tab.active p { color: rgba(255,255,255,.5); }
    .module-tab-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .85rem; margin-bottom: .5rem; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
    .module-tab.active .module-tab-icon { background: rgba(70,128,255,.2); color: #60a5fa; }
    .module-preview { background: #1a2235; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
    .module-preview-bar { background: #0d1321; padding: .65rem 1rem; display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
    .mp-panel { display: none; padding: 1.25rem; }
    .mp-panel.active { display: block; }
    .mp-label { font-size: .62rem; color: rgba(255,255,255,.35); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
    .mp-val { font-size: .9rem; font-weight: 700; }
    .mp-chip { border-radius: 7px; padding: .5rem .7rem; }
    .mp-bar-wrap { background: rgba(255,255,255,.04); border-radius: 8px; padding: .5rem; }
    .mp-bar-row { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
    .mp-bar { flex: 1; border-radius: 2px 2px 0 0; }
    .mp-trade-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem; border-radius: 6px; margin-bottom: .3rem; font-size: .73rem; }
    .mp-emotion-row { display: flex; align-items: center; justify-content: space-between; padding: .38rem .6rem; border-radius: 6px; margin-bottom: .28rem; }
    .mp-emo-bar { height: 5px; border-radius: 3px; flex: 1; margin: 0 .75rem; }
    .mp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .mp-cal-day { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 600; }
    .mp-progress-bar { background: rgba(255,255,255,.1); border-radius: 4px; height: 6px; }
    .mp-progress-fill { height: 6px; border-radius: 4px; }

    /* ── Testimonial marquee ── */
    .testimonials-section { background: #f8fafc; padding: 100px 0 60px; }
    .marquee-wrapper { overflow: hidden; position: relative; }
    .marquee-wrapper::before, .marquee-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; }
    .marquee-wrapper::before { left: 0; background: linear-gradient(90deg, #f8fafc, transparent); }
    .marquee-wrapper::after  { right: 0; background: linear-gradient(-90deg, #f8fafc, transparent); }
    .marquee-track { display: flex; gap: 1.25rem; animation: marquee-scroll 42s linear infinite; width: max-content; }
    .marquee-track.reverse { animation-direction: reverse; animation-duration: 52s; }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .t-card { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 14px; padding: 1.2rem 1.4rem; width: 278px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
    .t-stars { color: #f59e0b; font-size: .75rem; margin-bottom: .6rem; }
    .t-text { font-size: .82rem; color: #374151; line-height: 1.62; margin-bottom: .8rem; }
    .t-author { display: flex; align-items: center; gap: .6rem; }
    .t-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #fff; flex-shrink: 0; }
    .t-name { font-size: .78rem; font-weight: 600; color: #1e293b; }
    .t-role { font-size: .7rem; color: #94a3b8; }

    /* ── Stats section ── */
    .stats-section { background: linear-gradient(135deg, var(--dark), #1a1f35); padding: 80px 0; }
    .stat-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    /* ── Pricing ── */
    .price-card { border: 2px solid #e2e8f0; border-radius: 20px; padding: 2.25rem 2rem; background: #fff; height: 100%; }
    .price-card.featured { border-color: var(--accent); position: relative; box-shadow: 0 14px 40px rgba(70,128,255,.15); }
    .featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; padding: .22rem .85rem; border-radius: 9999px; white-space: nowrap; }
    .price-amount { font-size: 2.8rem; font-weight: 800; letter-spacing: -.04em; }
    .price-check { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; font-size: .875rem; color: #374151; }
    .price-check i { color: var(--green); flex-shrink: 0; }

    /* ── CTA ── */
    .cta-section { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(70,128,255,.14), transparent), linear-gradient(135deg, #1e1b4b 0%, var(--dark) 100%); padding: 120px 0; }

    /* ── Footer ── */
    .lp-footer { background: #050a14; padding-top: 4rem; }
    .footer-brand-text { font-size: .83rem; color: rgba(255,255,255,.38); line-height: 1.72; max-width: 260px; }
    .footer-col h6 { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem; }
    .footer-link { display: block; color: rgba(255,255,255,.45); text-decoration: none; font-size: .83rem; margin-bottom: .5rem; transition: color .2s; }
    .footer-link:hover { color: #fff; }

    /* ── Utility ── */
    .bg-dark-section { background: var(--dark); }
    .section-light { background: #f8fafc; }
    .section-white { background: #fff; }
  </style>
</head>
<body>

<!-- ══ NAVBAR ════════════════════════════════════════════ -->
<nav class="lp-nav" id="lp-nav">
  <div class="container">
    <a href="landing.html" class="lp-brand">
      <div class="lp-brand-icon"><i class="ti ti-chart-line"></i></div>
      <span class="lp-brand-name">TradeJournal</span>
    </a>
    <ul class="lp-nav-links mb-0 ps-0">
      <li><a href="#features">Features</a></li>
      <li><a href="#modules">How It Works</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#reviews">Reviews</a></li>
    </ul>
    <div class="lp-nav-cta">
      <a href="pages/login-v1.html" class="btn-ghost d-none d-md-inline-flex">Log in</a>
      <a href="pages/register-v1.html" class="btn-cta">Start free trial</a>
    </div>
  </div>
</nav>

<!-- ══ HERO ════════════════════════════════════════════════ -->
<header class="lp-hero" id="home">
  <div class="hero-glow"></div>
  <div class="container position-relative py-5" style="z-index:2">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <div class="mb-4">
          <span style="display:inline-flex;align-items:center;gap:.4rem;background:rgba(70,128,255,.12);border:1px solid rgba(70,128,255,.25);color:#93c5fd;border-radius:9999px;padding:.28rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase">
            <i class="ti ti-bolt"></i> IBKR · Binance · Coinbase · Any CSV
          </span>
        </div>
        <h1 class="hero-title mb-4">
          Stop guessing.<br>Start <span class="grad">trading smarter.</span>
        </h1>
        <p class="hero-sub mb-5">
          TradeJournal imports your trades automatically, tracks every P&amp;L,
          reveals patterns in your mistakes, and shows you exactly when and what you trade best.
        </p>
        <div class="d-flex flex-wrap gap-3 mb-4">
          <a href="pages/register-v1.html" class="btn-cta" style="padding:.7rem 1.75rem;font-size:.95rem;border-radius:10px">
            Start 7-Day Free Trial <i class="ti ti-arrow-right ms-1"></i>
          </a>
          <a href="#modules" style="display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:.7rem 1.5rem;border-radius:10px;font-size:.95rem;font-weight:600;text-decoration:none;transition:border-color .2s"
            onmouseenter="this.style.borderColor='rgba(255,255,255,.45)'"
            onmouseleave="this.style.borderColor='rgba(255,255,255,.2)'">
            See How It Works
          </a>
        </div>
        <div class="d-flex flex-wrap gap-3">
          <span class="trust-item"><i class="ti ti-check"></i> No credit card</span>
          <span class="trust-item"><i class="ti ti-check"></i> Cancel anytime</span>
          <span class="trust-item"><i class="ti ti-check"></i> $10 / month after trial</span>
        </div>
      </div>

      <div class="col-lg-6 d-none d-lg-block">
        <div class="hero-mockup">
          <div class="mockup-bar">
            <span class="mockup-dot bg-danger"></span>
            <span class="mockup-dot bg-warning"></span>
            <span class="mockup-dot bg-success"></span>
            <span style="color:rgba(255,255,255,.4);font-size:.7rem;margin-left:.5rem">TradeJournal — Dashboard</span>
          </div>
          <div class="p-4">
            <div class="row g-2 mb-3">
              <div class="col-3"><div class="stat-chip" style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2)"><div class="text-success fw-bold" style="font-size:.88rem">+$487</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Net P&L</div></div></div>
              <div class="col-3"><div class="stat-chip" style="background:rgba(70,128,255,.1);border:1px solid rgba(70,128,255,.2)"><div class="text-primary fw-bold" style="font-size:.88rem">68%</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Win Rate</div></div></div>
              <div class="col-3"><div class="stat-chip" style="background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2)"><div class="fw-bold" style="font-size:.88rem;color:#a78bfa">1:2.4</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Avg R:R</div></div></div>
              <div class="col-3"><div class="stat-chip" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)"><div class="text-warning fw-bold" style="font-size:.88rem">24</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Trades</div></div></div>
            </div>
            <div class="mp-bar-wrap mb-3">
              <div style="color:rgba(255,255,255,.4);font-size:.65rem;margin-bottom:.4rem">Equity Curve</div>
              <div class="mp-bar-row">
                <div class="mp-bar" style="height:28%;background:rgba(70,128,255,.5)"></div>
                <div class="mp-bar" style="height:42%;background:rgba(70,128,255,.6)"></div>
                <div class="mp-bar" style="height:32%;background:rgba(239,68,68,.5)"></div>
                <div class="mp-bar" style="height:58%;background:rgba(16,185,129,.6)"></div>
                <div class="mp-bar" style="height:52%;background:rgba(16,185,129,.65)"></div>
                <div class="mp-bar" style="height:70%;background:#10b981;opacity:.8"></div>
                <div class="mp-bar" style="height:80%;background:#10b981;opacity:.9"></div>
                <div class="mp-bar" style="height:90%;background:#10b981"></div>
                <div class="mp-bar" style="height:95%;background:#10b981"></div>
                <div class="mp-bar" style="height:100%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.4)"></div>
              </div>
            </div>
            <div class="mp-trade-row" style="background:rgba(16,185,129,.07)"><span class="fw-bold text-white">NVDA</span><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span><span class="text-success fw-semibold">+$401</span></div>
            <div class="mp-trade-row" style="background:rgba(239,68,68,.07)"><span class="fw-bold text-white">DRMA</span><span class="status-pill" style="background:rgba(239,68,68,.2);color:#ef4444">LOSS</span><span class="text-danger fw-semibold">-$38</span></div>
            <div class="mp-trade-row" style="background:rgba(16,185,129,.07)"><span class="fw-bold text-white">AAPL</span><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span><span class="text-success fw-semibold">+$124</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- ══ BROKER STRIP ══════════════════════════════════════ -->
<div class="broker-strip" id="brokers">
  <div class="container">
    <div class="d-flex flex-wrap justify-content-center align-items-center gap-3">
      <span style="color:rgba(255,255,255,.4);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em">Supported platforms:</span>
      <span class="broker-pill"><i class="ti ti-building-bank text-primary"></i> Interactive Brokers</span>
      <span class="broker-pill"><i class="ti ti-currency-bitcoin text-warning"></i> Binance</span>
      <span class="broker-pill"><i class="ti ti-coin text-primary"></i> Coinbase</span>
      <span class="broker-pill"><i class="ti ti-brand-meta text-info"></i> MetaTrader 4/5</span>
      <span class="broker-pill"><i class="ti ti-table-import text-success"></i> Any CSV</span>
    </div>
  </div>
</div>

<!-- ══ FEATURES ══════════════════════════════════════════ -->
<section id="features" style="padding:100px 0;background:#f8fafc">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag"><i class="ti ti-sparkles"></i> Features</div>
      <h2 class="section-title mb-3">Everything a serious trader needs</h2>
      <p class="section-sub">Not just a spreadsheet. A complete system to track, review, and sharpen every edge.</p>
    </div>
    <div class="row g-4">
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#eff6ff"><i class="ti ti-upload text-primary" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">One-click broker import</h5><p class="text-muted mb-0" style="font-size:.88rem">Import from IBKR, Binance, or Coinbase in seconds. Round-trips split correctly — even multiple trades same ticker same day.</p></div></div>
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#f0fdf4"><i class="ti ti-chart-line" style="color:#10b981;font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Equity curve &amp; analytics</h5><p class="text-muted mb-0" style="font-size:.88rem">Running balance, daily P&amp;L, win rate by day-of-week, profit factor, and expectancy — all in one dashboard.</p></div></div>
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#fffbeb"><i class="ti ti-brain text-warning" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Psychology tracking</h5><p class="text-muted mb-0" style="font-size:.88rem">Tag your emotion before entry — Confident, Calm, FOMO, Anxious. See which state correlates with your wins and losses.</p></div></div>
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#fef2f2"><i class="ti ti-alert-triangle text-danger" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Mistake library</h5><p class="text-muted mb-0" style="font-size:.88rem">Tag mistakes — FOMO entry, moved stop loss, no plan. Track which errors cost you the most money over time.</p></div></div>
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#ecfeff"><i class="ti ti-calendar-stats text-info" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">P&amp;L Calendar heatmap</h5><p class="text-muted mb-0" style="font-size:.88rem">A calendar view of every day — green for profitable, red for loss. Instantly spot your best weeks and worst patterns.</p></div></div>
      <div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#faf5ff"><i class="ti ti-target" style="color:#a78bfa;font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Goal tracking</h5><p class="text-muted mb-0" style="font-size:.88rem">Set daily, weekly, or monthly targets for profit, win rate, or R:R. Track progress in real time against every goal.</p></div></div>
    </div>
  </div>
</section>

<!-- ══ MODULES ════════════════════════════════════════════ -->
<section id="modules" class="modules-section">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag" style="background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.2);color:#93c5fd"><i class="ti ti-layout-dashboard"></i> Inside the App</div>
      <h2 class="section-title text-white mb-3">Every tool in one place</h2>
      <p class="mb-0" style="color:rgba(255,255,255,.5)">Click each module to preview what's inside your dashboard.</p>
    </div>
    <div class="row g-4 align-items-start">
      <div class="col-lg-4">
        <div id="module-tabs">
          <div class="module-tab active" onclick="switchModule(this,'mp-history')">
            <div class="module-tab-icon"><i class="ti ti-history"></i></div>
            <h6>Trade History</h6>
            <p>Full table with exit price, P&L, status, emotion &amp; screenshots per trade</p>
          </div>
          <div class="module-tab" onclick="switchModule(this,'mp-analytics')">
            <div class="module-tab-icon"><i class="ti ti-chart-bar"></i></div>
            <h6>Analytics</h6>
            <p>Equity curve, profit factor, win rate by day, MAE/MFE and more</p>
          </div>
          <div class="module-tab" onclick="switchModule(this,'mp-calendar')">
            <div class="module-tab-icon"><i class="ti ti-calendar-stats"></i></div>
            <h6>P&L Calendar</h6>
            <p>Monthly heatmap — green days, red days, and your best/worst streaks</p>
          </div>
          <div class="module-tab" onclick="switchModule(this,'mp-psychology')">
            <div class="module-tab-icon"><i class="ti ti-brain"></i></div>
            <h6>Psychology</h6>
            <p>Emotion breakdown — see exactly how your mindset affects your P&L</p>
          </div>
          <div class="module-tab" onclick="switchModule(this,'mp-goals')">
            <div class="module-tab-icon"><i class="ti ti-target"></i></div>
            <h6>Goals &amp; Journal</h6>
            <p>Set targets, write daily reflections, and track your progress over time</p>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="module-preview">
          <div class="module-preview-bar">
            <span class="mockup-dot bg-danger"></span>
            <span class="mockup-dot bg-warning"></span>
            <span class="mockup-dot bg-success"></span>
            <span style="color:rgba(255,255,255,.4);font-size:.7rem;margin-left:.5rem" id="mp-title">Trade History</span>
          </div>

          <!-- Trade History -->
          <div class="mp-panel active" id="mp-history">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <span class="text-white fw-semibold" style="font-size:.82rem">Recent Trades</span>
              <div class="d-flex gap-2">
                <span style="background:rgba(70,128,255,.15);color:#60a5fa;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:700">Filter</span>
                <span style="background:rgba(16,185,129,.15);color:#2ca87f;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:700">Export</span>
              </div>
            </div>
            <div style="background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden">
              <div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.07);font-size:.62rem;color:rgba(255,255,255,.3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">
                <span style="flex:1.2">Symbol</span><span style="flex:.8">Date</span><span style="flex:.8;text-align:right">Entry</span><span style="flex:.8;text-align:right">Exit</span><span style="flex:.8;text-align:right">P&L</span><span style="flex:.6;text-align:center">Status</span>
              </div>
              <div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">NVDA</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 6</span><span class="text-white" style="flex:.8;text-align:right">$812</span><span class="text-success" style="flex:.8;text-align:right">$893</span><span class="text-success fw-semibold" style="flex:.8;text-align:right">+$401</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span></span></div>
              <div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">AAPL</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 5</span><span class="text-white" style="flex:.8;text-align:right">$178</span><span class="text-success" style="flex:.8;text-align:right">$185</span><span class="text-success fw-semibold" style="flex:.8;text-align:right">+$124</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span></span></div>
              <div class="d-flex px-3 py-2" style="font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">DRMA</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 4</span><span class="text-white" style="flex:.8;text-align:right">$14.8</span><span class="text-danger" style="flex:.8;text-align:right">$12.2</span><span class="text-danger fw-semibold" style="flex:.8;text-align:right">-$38</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(239,68,68,.2);color:#ef4444">LOSS</span></span></div>
            </div>
          </div>

          <!-- Analytics -->
          <div class="mp-panel" id="mp-analytics">
            <div class="row g-2 mb-3">
              <div class="col-4"><div class="mp-chip" style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2)"><div class="mp-label">Profit Factor</div><div class="mp-val text-success">2.34</div></div></div>
              <div class="col-4"><div class="mp-chip" style="background:rgba(70,128,255,.1);border:1px solid rgba(70,128,255,.2)"><div class="mp-label">Expectancy</div><div class="mp-val text-primary">$18.40</div></div></div>
              <div class="col-4"><div class="mp-chip" style="background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2)"><div class="mp-label">Win Rate</div><div class="mp-val" style="color:#a78bfa">68%</div></div></div>
            </div>
            <div class="mp-bar-wrap mb-3">
              <div class="mp-label mb-1">Equity Curve — Last 30 Days</div>
              <div class="mp-bar-row">
                <div class="mp-bar" style="height:30%;background:rgba(70,128,255,.5)"></div>
                <div class="mp-bar" style="height:45%;background:rgba(70,128,255,.6)"></div>
                <div class="mp-bar" style="height:32%;background:rgba(239,68,68,.5)"></div>
                <div class="mp-bar" style="height:62%;background:rgba(16,185,129,.6)"></div>
                <div class="mp-bar" style="height:55%;background:rgba(16,185,129,.65)"></div>
                <div class="mp-bar" style="height:74%;background:#10b981;opacity:.8"></div>
                <div class="mp-bar" style="height:82%;background:#10b981;opacity:.9"></div>
                <div class="mp-bar" style="height:100%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.4)"></div>
              </div>
            </div>
            <div class="mp-label mb-1">Win Rate by Day</div>
            <div class="d-flex gap-1">
              <div style="flex:1;text-align:center"><div style="height:36px;background:rgba(70,128,255,.3);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Mon</span></div>
              <div style="flex:1;text-align:center"><div style="height:56px;background:rgba(16,185,129,.5);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Tue</span></div>
              <div style="flex:1;text-align:center"><div style="height:28px;background:rgba(239,68,68,.4);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Wed</span></div>
              <div style="flex:1;text-align:center"><div style="height:64px;background:rgba(16,185,129,.6);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Thu</span></div>
              <div style="flex:1;text-align:center"><div style="height:44px;background:rgba(70,128,255,.35);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Fri</span></div>
            </div>
          </div>

          <!-- Calendar -->
          <div class="mp-panel" id="mp-calendar">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <span class="text-white fw-semibold" style="font-size:.82rem">March 2026</span>
              <span class="text-success fw-semibold" style="font-size:.75rem">Month: +$487</span>
            </div>
            <div class="d-flex gap-1 mb-2">
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">M</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">T</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">W</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">T</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">F</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">S</span>
              <span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">S</span>
            </div>
            <div class="mp-cal-grid">
              <div class="mp-cal-day"></div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.25);color:#2ca87f">+$124</div>
              <div class="mp-cal-day" style="background:rgba(239,68,68,.2);color:#ef4444">-$38</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.35);color:#2ca87f">+$201</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.2);color:#2ca87f">+$87</div>
              <div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
              <div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
              <div class="mp-cal-day" style="background:rgba(239,68,68,.22);color:#ef4444">-$62</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.3);color:#2ca87f">+$156</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.2);color:#2ca87f">+$44</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.45);color:#2ca87f">+$401</div>
              <div class="mp-cal-day" style="background:rgba(16,185,129,.25);color:#2ca87f">+$114</div>
              <div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
              <div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
            </div>
          </div>

          <!-- Psychology -->
          <div class="mp-panel" id="mp-psychology">
            <div class="mp-label mb-3">P&L by Emotion State</div>
            <div class="mp-emotion-row" style="background:rgba(16,185,129,.07)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Confident</span><div class="mp-emo-bar" style="background:rgba(16,185,129,.6)"></div><span class="text-success fw-semibold" style="font-size:.73rem">+$312</span></div>
            <div class="mp-emotion-row" style="background:rgba(16,185,129,.05)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Calm</span><div class="mp-emo-bar" style="background:rgba(16,185,129,.4);flex:.7"></div><span class="text-success fw-semibold" style="font-size:.73rem">+$224</span></div>
            <div class="mp-emotion-row" style="background:rgba(245,158,11,.05)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Anxious</span><div class="mp-emo-bar" style="background:rgba(245,158,11,.4);flex:.2"></div><span class="text-warning fw-semibold" style="font-size:.73rem">-$14</span></div>
            <div class="mp-emotion-row" style="background:rgba(239,68,68,.08)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">FOMO</span><div class="mp-emo-bar" style="background:rgba(239,68,68,.6);flex:.35"></div><span class="text-danger fw-semibold" style="font-size:.73rem">-$196</span></div>
            <div class="mp-emotion-row" style="background:rgba(239,68,68,.06)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Greedy</span><div class="mp-emo-bar" style="background:rgba(239,68,68,.45);flex:.25"></div><span class="text-danger fw-semibold" style="font-size:.73rem">-$88</span></div>
            <div class="mt-3 p-2 rounded-2" style="background:rgba(70,128,255,.08);border:1px solid rgba(70,128,255,.2)">
              <div style="font-size:.68rem;color:rgba(255,255,255,.5)">💡 You lose <span class="text-danger fw-semibold">3.2×</span> more when trading FOMO. Add a pre-trade checklist.</div>
            </div>
          </div>

          <!-- Goals -->
          <div class="mp-panel" id="mp-goals">
            <div class="mp-label mb-3">Monthly Goals — March 2026</div>
            <div class="mb-2 p-3 rounded-2" style="background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2)">
              <div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Monthly Profit Target</span><span style="font-size:.72rem;color:#10b981;font-weight:700">$487 / $500</span></div>
              <div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#10b981;width:97%"></div></div>
              <div style="font-size:.6rem;color:rgba(255,255,255,.3);margin-top:3px">97% · 3 days left</div>
            </div>
            <div class="mb-2 p-3 rounded-2" style="background:rgba(70,128,255,.08);border:1px solid rgba(70,128,255,.2)">
              <div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Win Rate Target</span><span style="font-size:.72rem;color:#4680FF;font-weight:700">68% / 65%</span></div>
              <div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#4680FF;width:100%"></div></div>
              <div style="font-size:.6rem;color:#10b981;margin-top:3px">✓ Goal exceeded!</div>
            </div>
            <div class="p-3 rounded-2" style="background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2)">
              <div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Avg R:R Target</span><span style="font-size:.72rem;font-weight:700;color:#a78bfa">1:2.4 / 1:2.0</span></div>
              <div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#a78bfa;width:100%"></div></div>
              <div style="font-size:.6rem;color:#10b981;margin-top:3px">✓ Goal exceeded!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ STATS ══════════════════════════════════════════════ -->
<section class="stats-section">
  <div class="container">
    <div class="row g-4 text-center">
      <div class="col-6 col-md-3"><div class="stat-num">6+</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Broker integrations</p></div>
      <div class="col-6 col-md-3"><div class="stat-num">20+</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Analytics metrics</p></div>
      <div class="col-6 col-md-3"><div class="stat-num">∞</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Trades you can log</p></div>
      <div class="col-6 col-md-3"><div class="stat-num">$10</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Per month, flat</p></div>
    </div>
  </div>
</section>

<!-- ══ PRICING ════════════════════════════════════════════ -->
<section id="pricing" style="padding:100px 0;background:#f8fafc">
  <div class="container">
    <div class="text-center mb-5">
      <div class="section-tag"><i class="ti ti-receipt"></i> Pricing</div>
      <h2 class="section-title mb-3">Simple, honest pricing</h2>
      <p class="section-sub">One plan. Everything included. No hidden fees, no tiers.</p>
    </div>
    <div class="row justify-content-center g-4">
      <div class="col-md-5 col-lg-4">
        <div class="price-card">
          <div style="display:inline-block;background:#f1f5f9;color:#64748b;border-radius:20px;padding:.25rem .85rem;font-size:.75rem;font-weight:700;margin-bottom:1rem">Free Trial</div>
          <div class="price-amount mb-1">$0</div>
          <p class="text-muted mb-4" style="font-size:.85rem">7 days · No card needed</p>
          <div class="price-check"><i class="ti ti-check-circle"></i>Full access to every feature</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Unlimited trade imports</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>All broker integrations</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>No credit card required</div>
          <a href="pages/register-v1.html" class="d-block text-center mt-4" style="padding:.85rem;border:2px solid var(--accent);color:var(--accent);border-radius:12px;font-weight:700;text-decoration:none;transition:background .2s"
            onmouseenter="this.style.background='rgba(70,128,255,.07)'"
            onmouseleave="this.style.background=''">Start Free Trial</a>
        </div>
      </div>
      <div class="col-md-5 col-lg-4">
        <div class="price-card featured">
          <div class="featured-badge">MOST POPULAR</div>
          <div style="display:inline-block;background:rgba(70,128,255,.1);color:var(--accent);border-radius:20px;padding:.25rem .85rem;font-size:.75rem;font-weight:700;margin-bottom:1rem">Pro</div>
          <div class="price-amount text-primary mb-1">$10</div>
          <p class="text-muted mb-4" style="font-size:.85rem">per month · cancel anytime</p>
          <div class="price-check"><i class="ti ti-check-circle"></i>Everything in Free Trial</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Unlimited trade history</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Advanced analytics &amp; reports</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Screenshot uploads per trade</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Goal tracking &amp; alerts</div>
          <div class="price-check"><i class="ti ti-check-circle"></i>Daily journal &amp; reflections</div>
          <a href="pages/register-v1.html" class="d-block text-center mt-4 text-white" style="padding:.85rem;background:var(--accent);border-radius:12px;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(70,128,255,.35);transition:background .2s"
            onmouseenter="this.style.background='#3570ef'"
            onmouseleave="this.style.background='var(--accent)'">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ TESTIMONIALS ════════════════════════════════════════ -->
<section id="reviews" class="testimonials-section">
  <div class="container text-center mb-5">
    <div class="section-tag"><i class="ti ti-star"></i> Reviews</div>
    <h2 class="section-title mb-3">Traders love it</h2>
    <p class="section-sub">From day traders to swing traders — here's what they say about TradeJournal.</p>
  </div>

  <div class="marquee-wrapper mb-4">
    <div class="marquee-track">
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Finally a journal that imports my IBKR trades correctly — even splits same-day round trips. Saved me hours."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#4680FF,#818cf8)">MK</div><div><div class="t-name">Mohammed K.</div><div class="t-role">Day Trader · Stocks</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The emotion tracking showed me I lose 3× more when trading FOMO. That insight alone was worth way more than $10/month."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#10b981,#34d399)">JR</div><div><div class="t-name">James R.</div><div class="t-role">Swing Trader · Crypto</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Like TraderVue but cleaner. Profit factor, expectancy, equity curve — everything I needed in one place."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#fbbf24)">SA</div><div><div class="t-name">Sara A.</div><div class="t-role">Forex Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The P&L calendar is a game-changer. I immediately saw I was giving back profits every Friday afternoon."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">DR</div><div><div class="t-name">David R.</div><div class="t-role">Options Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Goal tracking keeps me accountable. I set a 65% win rate target and now I actually think before entering."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ef4444,#f97316)">AN</div><div><div class="t-name">Ahmed N.</div><div class="t-role">Crypto Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Binance import worked perfectly. All my spot and futures trades imported with correct P&L automatically."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9)">LC</div><div><div class="t-name">Lin C.</div><div class="t-role">Crypto Scalper</div></div></div></div>
      <!-- Duplicates for seamless loop -->
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Finally a journal that imports my IBKR trades correctly — even splits same-day round trips. Saved me hours."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#4680FF,#818cf8)">MK</div><div><div class="t-name">Mohammed K.</div><div class="t-role">Day Trader · Stocks</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The emotion tracking showed me I lose 3× more when trading FOMO. That insight alone was worth way more than $10/month."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#10b981,#34d399)">JR</div><div><div class="t-name">James R.</div><div class="t-role">Swing Trader · Crypto</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Like TraderVue but cleaner. Profit factor, expectancy, equity curve — everything I needed in one place."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#fbbf24)">SA</div><div><div class="t-name">Sara A.</div><div class="t-role">Forex Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The P&L calendar is a game-changer. I immediately saw I was giving back profits every Friday afternoon."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">DR</div><div><div class="t-name">David R.</div><div class="t-role">Options Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Goal tracking keeps me accountable. I set a 65% win rate target and now I actually think before entering."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ef4444,#f97316)">AN</div><div><div class="t-name">Ahmed N.</div><div class="t-role">Crypto Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Binance import worked perfectly. All my spot and futures trades imported with correct P&L automatically."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9)">LC</div><div><div class="t-name">Lin C.</div><div class="t-role">Crypto Scalper</div></div></div></div>
    </div>
  </div>

  <div class="marquee-wrapper">
    <div class="marquee-track reverse">
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The mistake library helped me see I was entering too early on breakouts. Stopped that habit within a week."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">TM</div><div><div class="t-name">Tom M.</div><div class="t-role">Breakout Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Screenshot upload per trade is huge. I can review my exact chart setup after every win and loss."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ec4899,#f97316)">RK</div><div><div class="t-name">Rania K.</div><div class="t-role">Technical Analyst</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"$10/month for something that makes me a better trader is the best investment I've made this year."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8)">PL</div><div><div class="t-name">Peter L.</div><div class="t-role">Futures Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Used to track trades in Excel. This replaced it completely and gives me insights I never had before."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#14b8a6,#10b981)">YS</div><div><div class="t-name">Yusuf S.</div><div class="t-role">Multi-asset Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Pre-trade plan and post-trade review forced me to think before entering. Win rate went from 52% to 71%."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">BW</div><div><div class="t-name">Brian W.</div><div class="t-role">Equity Day Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Clean UI, works great on mobile. I log trades right after closing them from my phone."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">FH</div><div><div class="t-name">Fatima H.</div><div class="t-role">Crypto Swing Trader</div></div></div></div>
      <!-- Duplicates -->
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The mistake library helped me see I was entering too early on breakouts. Stopped that habit within a week."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">TM</div><div><div class="t-name">Tom M.</div><div class="t-role">Breakout Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Screenshot upload per trade is huge. I can review my exact chart setup after every win and loss."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ec4899,#f97316)">RK</div><div><div class="t-name">Rania K.</div><div class="t-role">Technical Analyst</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"$10/month for something that makes me a better trader is the best investment I've made this year."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8)">PL</div><div><div class="t-name">Peter L.</div><div class="t-role">Futures Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Used to track trades in Excel. This replaced it completely and gives me insights I never had before."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#14b8a6,#10b981)">YS</div><div><div class="t-name">Yusuf S.</div><div class="t-role">Multi-asset Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Pre-trade plan and post-trade review forced me to think before entering. Win rate went from 52% to 71%."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">BW</div><div><div class="t-name">Brian W.</div><div class="t-role">Equity Day Trader</div></div></div></div>
      <div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Clean UI, works great on mobile. I log trades right after closing them from my phone."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">FH</div><div><div class="t-name">Fatima H.</div><div class="t-role">Crypto Swing Trader</div></div></div></div>
    </div>
  </div>
</section>

<!-- ══ CTA ════════════════════════════════════════════════ -->
<section class="cta-section">
  <div class="container text-center">
    <h2 class="text-white fw-black mb-3" style="font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em">
      Ready to trade with an edge?
    </h2>
    <p class="mb-5" style="color:rgba(255,255,255,.5);font-size:1.05rem;max-width:460px;margin:0 auto 3rem">
      Start your free 7-day trial today. No credit card, no commitment.
    </p>
    <div class="d-flex flex-wrap gap-3 justify-content-center">
      <a href="pages/register-v1.html" class="btn-cta" style="padding:.85rem 2.5rem;font-size:1rem;border-radius:12px">
        Start Free Trial <i class="ti ti-arrow-right ms-1"></i>
      </a>
      <a href="pages/login-v1.html" style="display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);padding:.85rem 2.5rem;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none">Log In</a>
    </div>
  </div>
</section>

<!-- ══ FOOTER ══════════════════════════════════════════════ -->
<footer class="lp-footer">
  <div class="container">
    <div class="row pb-5" style="border-bottom:1px solid rgba(255,255,255,.07)">
      <div class="col-md-4 mb-4 mb-md-0">
        <div class="d-flex align-items-center gap-2 mb-3">
          <div class="lp-brand-icon"><i class="ti ti-chart-line"></i></div>
          <span class="fw-bold text-white">TradeJournal</span>
        </div>
        <p class="footer-brand-text">The professional trading journal for traders who want to improve. Track · Analyse · Improve.</p>
      </div>
      <div class="col-6 col-md-2 offset-md-2 footer-col">
        <h6>Product</h6>
        <a href="#features" class="footer-link">Features</a>
        <a href="#pricing" class="footer-link">Pricing</a>
        <a href="#brokers" class="footer-link">Integrations</a>
        <a href="#reviews" class="footer-link">Reviews</a>
      </div>
      <div class="col-6 col-md-2 footer-col">
        <h6>Account</h6>
        <a href="pages/register-v1.html" class="footer-link">Sign Up</a>
        <a href="pages/login-v1.html" class="footer-link">Log In</a>
        <a href="pages/reset-password-v1.html" class="footer-link">Reset Password</a>
      </div>
      <div class="col-6 col-md-2 footer-col mt-4 mt-md-0">
        <h6>Legal</h6>
        <a href="#" class="footer-link">Privacy Policy</a>
        <a href="#" class="footer-link">Terms of Service</a>
      </div>
    </div>
    <div class="py-4 text-center" style="color:rgba(255,255,255,.22);font-size:.8rem">
      &copy; 2026 TradeJournal. All rights reserved.
    </div>
  </div>
</footer>

<!-- Bootstrap 5 JS only — no AblePro JS at all -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
// Navbar scroll
window.addEventListener('scroll', () => {
  document.getElementById('lp-nav').classList.toggle('scrolled', window.scrollY > 50);
});

// Module tabs
const MP_TITLES = {
  'mp-history':'Trade History', 'mp-analytics':'Analytics',
  'mp-calendar':'P&L Calendar', 'mp-psychology':'Psychology', 'mp-goals':'Goals & Journal'
};
function switchModule(tab, panelId) {
  document.querySelectorAll('.module-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.mp-panel').forEach(p => p.classList.remove('active'));
  tab.classList.add('active');
  document.getElementById(panelId).classList.add('active');
  document.getElementById('mp-title').textContent = MP_TITLES[panelId] || '';
}

// Auto-cycle tabs
let tabIdx = 0;
const tabEls   = document.querySelectorAll('.module-tab');
const panelIds = ['mp-history','mp-analytics','mp-calendar','mp-psychology','mp-goals'];
setInterval(() => {
  tabIdx = (tabIdx + 1) % tabEls.length;
  switchModule(tabEls[tabIdx], panelIds[tabIdx]);
}, 4000);
</script>
</body>
</html>