{% extends "base.html" %}
{% block title %}Quick Funding — Fast Business, Personal & Car Loans Australia{% endblock %}

{% block extra_css %}
<style>

  html, body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}


.hero-cards-section {
  padding: 80px 0;
  background: #f8fafc;
}

.hero-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
}

/* Remove floating animation for this section */
.hero-cards-section .hero-card {
  animation: none;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-cards-grid {
    grid-template-columns: 1fr;
  }
}

  /* ═══ HERO SLIDER ═══ */
  .hero-swiper {
    width: 100%;
    height: 92vh;
    min-height: 600px;
    max-height: 900px
  }

  .hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center
  }

  .hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 6.5s cubic-bezier(.25, .46, .45, .94)
  }

  .swiper-slide-active .hero-slide-bg {
    transform: scale(1)
  }

  .hero-slide-overlay {
    position: absolute;
    inset: 0
  }

  .hero-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 var(--s6)
  }

  .hero-slide-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--s12);
    align-items: center
  }

  .hero-text {
    max-width: 600px
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    background: rgba(30, 170, 236, .2);
    border: 1px solid rgba(30, 170, 236, .4);
    color: #fff;
    padding: .4rem 1.1rem;
    border-radius: var(--r-full);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: var(--s5);
    text-transform: uppercase;
    letter-spacing: .1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
  }

  .hero-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 2s infinite
  }

  .hero-slide-content h1 {
    color: #fff;
    margin-bottom: var(--s4);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4)
  }

  .hero-slide-content h1 span {
    color: var(--blue)
  }

  .hero-sub {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--s8);
    max-width: 520px;
    line-height: 1.75;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
  }

  .hero-btns {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s8)
  }

  .hero-trust-row {
    display: flex;
    gap: var(--s5);
    flex-wrap: wrap
  }

  .trust-pill {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: rgba(255, 255, 255, 0.9);
    font-size: .8125rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)
  }

  .trust-pill svg {
    color: var(--blue)
  }

  /* Swiper custom nav & pagination */
  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: #fff;
    transition: all var(--t);
    box-shadow: var(--shadow-sm)
  }

  .hero-swiper .swiper-button-next:hover,
  .hero-swiper .swiper-button-prev:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
  }

  .hero-swiper .swiper-button-next::after,
  .hero-swiper .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 800
  }

  .hero-swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: all .3s
  }

  .hero-swiper .swiper-pagination-bullet-active {
    background: var(--blue);
    width: 24px;
    border-radius: 4px
  }

  /* Fix nav arrows overlapping content between 1095px and 1380px */
  @media (min-width:1095px) and (max-width:1380px) {
    .hero-swiper .swiper-button-prev {
      left: 10px;
    }

    .hero-swiper .swiper-button-next {
      right: 10px;
    }

    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next {
      width: 44px;
      height: 44px;
      z-index: 20;
    }

    .hero-slide-content {
      padding-left: 70px;
      padding-right: 70px;
    }

    .hero-slide-inner {
      gap: var(--s8);
    }
  }

  /* Floating stats card */
  .hero-card {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--r-xl);
    padding: var(--s6);
    animation: float 5s ease-in-out infinite;
    box-shadow: var(--shadow-xl)
  }

  .hero-card-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-bottom: var(--s4);
    margin-bottom: var(--s5);
    border-bottom: 1px solid rgba(0, 0, 0, .06)
  }

  .hero-card-icon {
    width: 44px;
    height: 44px;
    background: var(--blue);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
  }

  .hero-card-title {
    color: var(--navy, #0F172A);
    font-weight: 700;
    font-family: var(--font-head);
    font-size: .9rem
  }

  .hero-card-sub {
    color: var(--gray-500, #64748B);
    font-size: .72rem;
    margin-top: 2px
  }

  .hero-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
    margin-bottom: var(--s3)
  }

  .hero-stat {
    text-align: center;
    padding: var(--s4);
    background: var(--gray-50, #F8FAFC);
    border-radius: var(--r-md);
    border: 1px solid var(--gray-200, #E2E8F0)
  }

  .hero-stat-val {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy, #0F172A);
    line-height: 1;
    margin-bottom: 4px;
    font-family: var(--font-head)
  }

  .hero-stat-val.accent {
    color: var(--blue)
  }

  .hero-stat-lbl {
    font-size: .7rem;
    color: var(--gray-500, #64748B);
    font-weight: 600
  }

  .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4)
  }

  .hero-tag {
    padding: .25rem .7rem;
    background: rgba(30, 170, 236, .1);
    border: 1px solid rgba(30, 170, 236, .2);
    border-radius: var(--r-full);
    font-size: .72rem;
    font-weight: 700;
    color: var(--blue)
  }

  /* ═══ PRODUCT CARDS ═══ */
  .products-section {
    background: var(--gray-50, #F8FAFC);
    padding: var(--s20) 0
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6)
  }

  .product-card {
    background: #fff;
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--gray-200, #E2E8F0);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    box-shadow: var(--shadow-sm)
  }

  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--blue)
  }

  .product-card-img {
    height: 220px;
    overflow: hidden;
    position: relative
  }

  .product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1)
  }

  .product-card:hover .product-card-img img {
    transform: scale(1.07)
  }

  .product-card-badge {
    position: absolute;
    top: var(--s4);
    left: var(--s4);
    background: var(--blue);
    color: #fff;
    padding: .3rem .8rem;
    border-radius: var(--r-full);
    font-size: .75rem;
    font-weight: 700;
    font-family: var(--font-head)
  }

  .product-card-body {
    padding: var(--s6)
  }

  .product-card-rate {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: var(--s2);
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em
  }

  .product-card-body h3 {
    margin-bottom: var(--s2);
    color: var(--navy, #0F172A)
  }

  .product-card-body p {
    color: var(--gray-600, #475569);
    font-size: .9375rem;
    margin-bottom: var(--s5);
    line-height: 1.65
  }

  .product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-bottom: var(--s5)
  }

  .product-meta-pill {
    padding: .3rem .75rem;
    background: var(--gray-100, #F1F5F9);
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-800, #1E293B)
  }

  .product-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--blue);
    font-weight: 700;
    font-family: var(--font-head);
    font-size: .9375rem;
    transition: gap var(--t)
  }

  .product-link:hover {
    gap: var(--s3)
  }

  /* ═══ HOW IT WORKS ═══ */
  .how-section {
    background: #fff;
    padding: var(--s20) 0;
    position: relative;
    overflow: hidden
  }

  .how-section::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(30, 170, 236, .06) 0%, transparent 65%);
    pointer-events: none
  }

  .how-section .section-header h2 {
    color: var(--navy, #0F172A)
  }

  .how-section .section-header .eyebrow {
    color: var(--blue)
  }

  .how-section .section-header p {
    color: var(--gray-600, #475569)
  }

  .how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s8);
    position: relative
  }

  .how-steps::before {
    content: '';
    position: absolute;
    top: 34px;
    left: calc(16.67% + 28px);
    right: calc(16.67% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--blue), rgba(30, 170, 236, .2));
    pointer-events: none
  }

  .how-step {
    text-align: center;
    background: var(--gray-50, #F8FAFC);
    padding: var(--s6) var(--s4);
    border-radius: var(--r-xl);
    border: 1px solid var(--gray-100, #F1F5F9);
    box-shadow: var(--shadow-sm);
    transition: all var(--t)
  }

  .how-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(30, 170, 236, .3)
  }

  .how-step-num {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(30, 170, 236, .2);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.5rem;
    margin: 0 auto var(--s5);
    position: relative;
    transition: all var(--t);
    box-shadow: var(--shadow-sm)
  }

  .how-step:hover .how-step-num {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: var(--shadow-blue)
  }

  .how-step h3 {
    color: var(--navy, #0F172A);
    margin-bottom: var(--s2)
  }

  .how-step p {
    color: var(--gray-600, #475569);
    font-size: .9375rem
  }

  /* ═══ WHY QF ═══ */

  .why-section {
    background: #fff;
    padding: var(--s20) 0
  }

  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s12);
    align-items: center
  }

  .why-img-col {
    position: relative
  }

  .why-main-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl)
  }

  .why-badge-card {
    position: absolute;
    bottom: -28px;
    right: -28px;
    background: var(--blue);
    color: #fff;
    padding: var(--s5) var(--s6);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-blue);
    text-align: center;
    min-width: 160px
  }

  .why-badge-val {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-head);
    line-height: 1;
    margin-bottom: 4px
  }

  .why-badge-label {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8)
  }

  .why-content-col h2 {
    margin-bottom: var(--s4)
  }

  .why-content-col>p {
    color: var(--gray-500);
    font-size: 1.0625rem;
    margin-bottom: var(--s8);
    line-height: 1.75
  }

  .why-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    margin-bottom: var(--s8)
  }

  .why-feat {
    padding: var(--s5);
    background: var(--gray-100);
    border-radius: var(--r-lg);
    border: 1px solid var(--gray-200);
    transition: all var(--t)
  }

  .why-feat:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-md);
    background: var(--blue-pale)
  }

  .why-feat-icon {
    width: 42px;
    height: 42px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s3)
  }

  .why-feat h4 {
    margin-bottom: var(--s1)
  }

  .why-feat p {
    font-size: .85rem;
    color: var(--gray-500)
  }

  .why-cta-row {
    display: flex;
    gap: var(--s4);
    flex-wrap: wrap
  }

  /* ═══ TESTIMONIALS ═══ */
  .testi-section {
    background: #fff;
    padding: var(--s20) 0
  }

  .testi-swiper {
    padding-bottom: var(--s10) !important
  }

  .testi-card {
    background: var(--gray-50, #F8FAFC);
    border-radius: var(--r-xl);
    padding: var(--s8);
    border: 1px solid var(--gray-200, #E2E8F0);
    box-shadow: var(--shadow-sm);
    height: auto;
    transition: all var(--t)
  }

  .testi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--gray-300, #CBD5E1)
  }

  .testi-stars {
    color: #F59E0B;
    font-size: 1.1rem;
    margin-bottom: var(--s4);
    letter-spacing: 3px
  }

  .testi-text {
    font-size: .9375rem;
    color: var(--gray-700, #334155);
    line-height: 1.75;
    margin-bottom: var(--s5);
    font-style: italic
  }

  .testi-author {
    display: flex;
    align-items: center;
    gap: var(--s3)
  }

  .testi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm)
  }

  .testi-avatar-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    font-family: var(--font-head);
    flex-shrink: 0
  }

  .testi-name {
    font-weight: 700;
    font-size: .875rem;
    font-family: var(--font-head);
    color: var(--navy, #0F172A)
  }

  .testi-role {
    font-size: .8125rem;
    color: var(--gray-500, #64748B)
  }

  /* ═══ IMAGE STRIP ═══ */
  .img-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 400px;
    overflow: hidden
  }

  .img-strip-item {
    position: relative;
    overflow: hidden
  }

  .img-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease
  }

  .img-strip-item:hover img {
    transform: scale(1.06)
  }

  .img-strip-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: var(--s6)
  }

  .img-strip-item-label {
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.125rem
  }

  /* Responsive */
  @media(max-width:1100px) {
    .hero-slide-inner {
      grid-template-columns: 1fr
    }

    /* .hero-card {
      display: none
    } */

    .hero-slide-inner .hero-card {
    display: none;
  }

    .why-grid {
      grid-template-columns: 1fr
    }

    .why-img-col {
      display: none
    }

    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next {
      display: none;
    }
  }

  @media(max-width:900px) {
    .products-grid {
      grid-template-columns: 1fr 1fr
    }

    .how-steps {
      grid-template-columns: 1fr
    }

    .how-steps::before {
      display: none
    }

    .why-feats {
      grid-template-columns: 1fr
    }
  }

  @media(max-width:640px) {
    .products-grid {
      grid-template-columns: 1fr
    }

    .hero-swiper {
      height: 80vh
    }

    .hero-btns {
      flex-direction: column;
      align-items: flex-start
    }

    .img-strip {
      grid-template-columns: 1fr;
      height: auto
    }

    .img-strip-item {
      height: 220px
    }
  }
</style>
{% endblock %}

{% block content %}

<!-- ══ HERO SLIDER ══ -->
<div class="swiper hero-swiper">
  <div class="swiper-wrapper">

    <!-- Slide 1: Business Loans -->
    <div class="swiper-slide">
      <div class="hero-slide-bg"
        style="background-image:url('{{ url_for('static', filename='img/bg23.jpg') }}');">
      </div>
      <!-- <div class="hero-slide-overlay"
        style="background:linear-gradient(105deg,rgba(15,23,42,.95) 0%,rgba(15,23,42,.75) 50%,rgba(15,23,42,.3) 100%)">
      </div> -->
      <div class="hero-slide-content">
        <div class="hero-slide-inner">
          <div class="hero-text">
            <div class="hero-eyebrow" data-aos="fade-up" data-aos-delay="100">
              <span class="hero-dot"></span>Australia-based lending solutions
            </div>
            <h1 data-aos="fade-up" data-aos-delay="200">Fund Your Business<br><span>Growth Today</span></h1>
            <p class="hero-sub" data-aos="fade-up" data-aos-delay="300">Simple business loan up to $2 million. Funds
              provided directly to your account.</p>
            <div class="hero-btns" data-aos="fade-up" data-aos-delay="400">
              <a href="{{ url_for('apply') }}?type=business" class="btn btn-primary btn-lg">Apply Now — Free<svg
                  width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg></a>
              <a href="{{ url_for('business_loan') }}" class="btn btn-outline btn-lg" style="background: #fff !important;">Explore Business Loans</a>
            </div>
            <div class="hero-trust-row" data-aos="fade-up" data-aos-delay="500">
              <!--<span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>ACL 389328</span>-->
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>No upfront fees</span>
              <!--<span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>24-hr decisions</span>-->
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>Australian owned</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Slide 2: Personal Loans -->
    <div class="swiper-slide">
      <div class="hero-slide-bg"
        style="background-image:url('{{ url_for('static', filename='img/bg21.jpg') }}');">
      </div>
      <!-- <div class="hero-slide-overlay"
        style="background:linear-gradient(105deg,rgba(15,23,42,.95) 0%,rgba(15,23,42,.75) 50%,rgba(15,23,42,.3) 100%)">
      </div> -->
      <div class="hero-slide-content">
        <div class="hero-slide-inner">
          <div class="hero-text">
            <div class="hero-eyebrow"><span class="hero-dot"></span>Personal Finance</div>
            <h1>Life's Big Moments<br><span>Deserve Funding</span></h1>
            <p class="hero-sub">Personal loans designed to support expenses like home improvements, education, travel
              and more. Simple application process with funds provided directly to your account.</p>
            <div class="hero-btns">
              <a href="{{ url_for('apply') }}?type=personal" class="btn btn-primary btn-lg">Apply in 10 Minutes<svg
                  width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg></a>
              <a href="{{ url_for('personal_loan') }}" class="btn btn-outline btn-lg" style="background: #fff !important;">View Personal Loans</a>
            </div>
            <div class="hero-trust-row">
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>Simple application</span>
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>Flexible options</span>
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>No early exit fees</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Slide 3: Car Loans -->
    <div class="swiper-slide">
      <div class="hero-slide-bg"
        style="background-image:url('{{ url_for('static', filename='img/bg22.jpg') }}');">
      </div>
      <!-- <div class="hero-slide-overlay"
        style="background:linear-gradient(105deg,rgba(15,23,42,.95) 0%,rgba(15,23,42,.75) 50%,rgba(15,23,42,.3) 100%)">
      </div> -->
      <div class="hero-slide-content">
        <div class="hero-slide-inner">
          <div class="hero-text">
            <div class="hero-eyebrow"><span class="hero-dot"></span>Car Finance</div>
            <h1>Drive Away in<br><span>Your Dream Car</span></h1>
            <p class="hero-sub">Secure car finance for new and used vehicles. Simple application process with funds
              provided directly to your account.</p>
            <div class="hero-btns">
              <a href="{{ url_for('apply') }}?type=car" class="btn btn-primary btn-lg">Get Car Finance<svg width="17"
                  height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <line x1="5" y1="12" x2="19" y2="12" />
                  <polyline points="12 5 19 12 12 19" />
                </svg></a>
              <a href="{{ url_for('car_loan') }}" class="btn btn-outline btn-lg" style="background: #fff !important;">View Car Loans</a>
            </div>
            <div class="hero-trust-row">
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>Simple application</span>
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>New & used vehicles</span>
              <span class="trust-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                  stroke-width="2.5">
                  <polyline points="20 6 9 17 4 12" />
                </svg>Streamlined process</span>
            </div>
          </div>
          <!-- <div class="hero-card">
            <div class="hero-card-head">
              <div class="hero-card-icon" style="font-size:1.3rem">🚗</div>
              <div>
                <div class="hero-card-title">Car Finance</div>
                <div class="hero-card-sub">From $5K to $300K AUD</div>
              </div>
            </div>
            <div class="hero-stats-row">
              <div class="hero-stat">
                <div class="hero-stat-val accent">Simple</div>
                <div class="hero-stat-lbl">Process</div>
              </div>
              <div class="hero-stat">
                <div class="hero-stat-val">84 mo</div>
                <div class="hero-stat-lbl">Max term</div>
              </div>
            </div>
            <div class="hero-stats-row">
              <div class="hero-stat">
                <div class="hero-stat-val">$300K</div>
                <div class="hero-stat-lbl">Max loan</div>
              </div>
              <div class="hero-stat">
                <div class="hero-stat-val accent">Flexible</div>
                <div class="hero-stat-lbl">Options</div>
              </div>
            </div>
            <div class="hero-tags">
              <span class="hero-tag">✓ New Cars</span>
              <span class="hero-tag">✓ Used Cars</span>
              <span class="hero-tag">✓ EVs</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>

  </div><!-- /swiper-wrapper -->
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>


<!-- *********************************************************** -->

<!-- ══ HERO CARDS SECTION ══ -->
<section class="hero-cards-section" style="background: url('{{ url_for('static', filename='img/6.jpg') }}') center/cover no-repeat;">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="eyebrow">Our Products</span>
      <h2>Loans Designed for Every Australian</h2>
      <p>Whether you're growing a business, buying a car, or covering personal expenses — we offer loan solutions
        tailored to your needs.</p>
    </div>
    <div class="hero-cards-grid">

      <!-- Card 1 -->
      <div class="hero-card">
        <div class="hero-card-head">
          <div class="hero-card-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
              <line x1="12" y1="1" x2="12" y2="23"/>
              <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
            </svg>
          </div>
          <div>
            <div class="hero-card-title">Quick Funding Stats</div>
            <div class="hero-card-sub">Updated daily · AUD</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val accent">$48M+</div>
            <div class="hero-stat-lbl">Funded to date</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val">Streamlined</div>
            <div class="hero-stat-lbl">Approval process</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val">3,200+</div>
            <div class="hero-stat-lbl">Customers funded</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val accent">$0</div>
            <div class="hero-stat-lbl">Hidden fees</div>
          </div>
        </div>

        <div class="hero-tags">
          <span class="hero-tag">✓ Australian owned</span>
          <span class="hero-tag">✓ No upfront fees</span>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="hero-card">
        <div class="hero-card-head">
          <div class="hero-card-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
              <circle cx="12" cy="7" r="4"/>
            </svg>
          </div>
          <div>
            <div class="hero-card-title">Personal Loans</div>
            <div class="hero-card-sub">From $5K to $90K AUD</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val accent">Simple</div>
            <div class="hero-stat-lbl">Process</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val">84 mo</div>
            <div class="hero-stat-lbl">Max term</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val">$90K</div>
            <div class="hero-stat-lbl">Max loan</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val accent">Flexible</div>
            <div class="hero-stat-lbl">Options</div>
          </div>
        </div>

        <div class="hero-tags">
          <span class="hero-tag">✓ Home Renovation</span>
          <span class="hero-tag">✓ Education</span>
          <span class="hero-tag">✓ Travel</span>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="hero-card">
        <div class="hero-card-head">
          <div class="hero-card-icon" style="font-size:1.3rem">🚗</div>
          <div>
            <div class="hero-card-title">Car Finance</div>
            <div class="hero-card-sub">From $5K to $300K AUD</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val accent">Simple</div>
            <div class="hero-stat-lbl">Process</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val">84 mo</div>
            <div class="hero-stat-lbl">Max term</div>
          </div>
        </div>

        <div class="hero-stats-row">
          <div class="hero-stat">
            <div class="hero-stat-val">$300K</div>
            <div class="hero-stat-lbl">Max loan</div>
          </div>
          <div class="hero-stat">
            <div class="hero-stat-val accent">Flexible</div>
            <div class="hero-stat-lbl">Options</div>
          </div>
        </div>

        <div class="hero-tags">
          <span class="hero-tag">✓ New Cars</span>
          <span class="hero-tag">✓ Used Cars</span>
          <span class="hero-tag">✓ EVs</span>
        </div>
      </div>

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

<!-- *********************************************************** -->

<!-- ══ PRODUCTS ══ -->


<!-- ══ HOW IT WORKS ══ -->
<section class="how-section" style="background: url('{{ url_for('static', filename='img/bg27.jpg') }}') center/cover no-repeat;">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="eyebrow">Simple Process</span>
      <h2>Funded in 3 Easy Steps</h2>
      <p>Our streamlined online application means less time on paperwork and more time on your goals.</p>
    </div>
    <div class="how-steps">
      <div class="how-step" data-aos="fade-up" data-aos-delay="0">
        <div class="how-step-num">1</div>
        <h3>Check Eligibility</h3>
        <p>6+ months trading or regular income. Quick eligibility check before you apply — no credit impact.</p>
      </div>
      <div class="how-step" data-aos="fade-up" data-aos-delay="150">
        <div class="how-step-num">2</div>
        <h3>Apply in 10 Minutes</h3>
        <p>Simple online form or call 02 9071 7960. Upload documents digitally — we handle the rest.</p>
      </div>
      <div class="how-step" data-aos="fade-up" data-aos-delay="300">
        <div class="how-step-num">3</div>
        <h3>Receive Your Funds</h3>
        <p>Approved funds deposited directly to your Australian bank account.</p>
      </div>
    </div>
    <div style="text-align:center;margin-top:var(--s12)" data-aos="fade-up">
      <a href="{{ url_for('apply') }}" class="btn btn-primary btn-lg">Start Your Application</a>
    </div>
  </div>
</section>

<!-- ══ STATS ══ -->
<section class="stats-band">
  <div class="container">
    <div class="stats-grid">
      <div data-aos="fade-up" data-aos-delay="0">
        <div class="stat-val" data-count="48" data-prefix="$" data-suffix="M+">$0</div>
        <div class="stat-label">Total Funded</div>
      </div>
      <div data-aos="fade-up" data-aos-delay="100">
        <div class="stat-val" data-count="3200" data-suffix="+">0</div>
        <div class="stat-label">Customers Helped</div>
      </div>
      <div data-aos="fade-up" data-aos-delay="200">
        <div class="stat-val" data-count="98" data-suffix="%">0</div>
        <div class="stat-label">Satisfaction Rate</div>
      </div>
      <!--<div data-aos="fade-up" data-aos-delay="300">-->
      <!--  <div class="stat-val" data-count="24" data-suffix=" hrs">0</div>-->
      <!--  <div class="stat-label">Average Decision Time</div>-->
      <!--</div>-->
    </div>
  </div>
</section>

<!-- ══ WHY QF ══ -->
<section class="why-section"
  style="background: url('{{ url_for('static', filename='img/bg27.jpg') }}') center/cover no-repeat;">
  <div class="container">
    <div class="why-grid">
      <div class="why-img-col" data-aos="fade-right">
        <img src="{{ url_for('static', filename='img/loan5.jpg') }}" alt="Quick Funding Team" class="why-main-img"
          onerror="this.style.background='linear-gradient(135deg,#0D1B2A,#1E3148)'">
        <div class="why-badge-card">
          <div class="why-badge-val">Structured</div>
          <div class="why-badge-label">transparent process</div>
        </div>
      </div>
      <div class="why-content-col" data-aos="fade-left">
        <span class="eyebrow">Why Choose Us</span>
        <h2>Built for Australians, By Australians</h2>
        <p>We understand the Australian lending landscape. From EOFY cash flow crunches to buying your first car — our
          specialist team is here to find the right solution for your situation.</p>
        <div class="why-feats">
          <div class="why-feat">
            <div class="why-feat-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2.5">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg></div>
            <h4>Streamlined Assessment</h4>
            <p>Applications are reviewed with a clear and structured approach.</p>
          </div>
          <!--<div class="why-feat"><div class="why-feat-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div><h4>ASIC Regulated</h4><p>Authorised under ACL 389328.</p></div>-->
          <div class="why-feat">
            <div class="why-feat-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2.5">
                <line x1="12" y1="1" x2="12" y2="23" />
                <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
              </svg></div>
            <h4>No Hidden Costs</h4>
            <p>Transparent rates and fees upfront.</p>
          </div>
          <!-- <div class="why-feat">
            <div class="why-feat-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2.5">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" />
              </svg></div>
            <h4>Dedicated Support</h4>
            <p>Your own Australian-based lending specialist.</p>
          </div> -->
        </div>
        <div class="why-cta-row">
          <a href="{{ url_for('apply') }}" class="btn btn-primary">Apply Now</a>
          <a href="{{ url_for('business_loan') }}" class="btn btn-outline" style="background: #fff !important;">View All Products</a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ IMAGE STRIP ══ -->
<div class="img-strip">
  <div class="img-strip-item">
    <img src="{{ url_for('static', filename='img/business-handshake2.jpg') }}" alt="Business partnership" loading="lazy"
      onerror="this.style.background='linear-gradient(135deg,#0D1B2A,#162436)'">
    <div class="img-strip-item-overlay"><span class="img-strip-item-label">Business Partnerships</span></div>
  </div>
  <div class="img-strip-item">
    <img src="{{ url_for('static', filename='img/business-handshake3.jpg') }}" alt="Australian small business" loading="lazy"
      onerror="this.style.background='linear-gradient(135deg,#0E2D55,#1E3148)'">
    <div class="img-strip-item-overlay"><span class="img-strip-item-label">Supporting Australian SMEs</span></div>
  </div>
</div>

<!-- ══ TESTIMONIALS ══ -->
<section class="testi-section"
  style="background: url('{{ url_for('static', filename='img/5.jpg') }}') center/cover no-repeat;">
  <div class="container">
    <div class="section-header" data-aos="fade-up">
      <span class="eyebrow">Customer Stories</span>
      <h2>Trusted by Thousands of Australians</h2>
      <p>Real stories from real customers across Australia.</p>
    </div>
    <div class="swiper testi-swiper" data-aos="fade-up">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="testi-card">
            <div class="testi-stars">★★★★★</div>
            <p class="testi-text">"The process was incredibly straightforward. I had my business loan approved and funds
              in my account within two business days. Quick Funding really lives up to their name!"</p>
            <div class="testi-author">
              <img src="{{ url_for('static', filename='img/avatar-1.jpg') }}" alt="James M" class="testi-avatar"
                onerror="this.outerHTML='<div class=testi-avatar-placeholder>JM</div>'">
              <div>
                <div class="testi-name">James M.</div>
                <div class="testi-role">Café Owner, Sydney NSW</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testi-card">
            <div class="testi-stars">★★★★★</div>
            <p class="testi-text">"After being knocked back by the big banks, Quick Funding approved my car loan the
              same day. The team was professional and the rate was very competitive."</p>
            <div class="testi-author">
              <img src="{{ url_for('static', filename='img/avatar-2.jpg') }}" alt="Sophie R" class="testi-avatar"
                onerror="this.outerHTML='<div class=testi-avatar-placeholder>SR</div>'">
              <div>
                <div class="testi-name">Sophie R.</div>
                <div class="testi-role">Nurse, Melbourne VIC</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testi-card">
            <div class="testi-stars">★★★★★</div>
            <p class="testi-text">"We needed a personal loan urgently and Quick Funding made it so easy. Clear
              communication, fair interest rate, and funds transferred the next morning. Highly recommend."</p>
            <div class="testi-author">
              <img src="{{ url_for('static', filename='img/avatar-3.jpg') }}" alt="David K" class="testi-avatar"
                onerror="this.outerHTML='<div class=testi-avatar-placeholder>DK</div>'">
              <div>
                <div class="testi-name">David K.</div>
                <div class="testi-role">Builder, Brisbane QLD</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testi-card">
            <div class="testi-stars">★★★★★</div>
            <p class="testi-text">"Outstanding service from start to finish. They explained everything clearly and the
              application process was simple. Funds were provided without any issues."</p>
            <div class="testi-author">
              <div class="testi-avatar-placeholder">MT</div>
              <div>
                <div class="testi-name">Michelle T.</div>
                <div class="testi-role">Retail Owner, Perth WA</div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="testi-card">
            <div class="testi-stars">★★★★★</div>
            <p class="testi-text">"I refinanced my car loan through Quick Funding and saved over $140 a month. The team
              was incredibly helpful and the process was seamless."</p>
            <div class="testi-author">
              <div class="testi-avatar-placeholder">AC</div>
              <div>
                <div class="testi-name">Andrew C.</div>
                <div class="testi-role">Engineer, Adelaide SA</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</section>

<!-- ══ CTA ══ -->
<section class="cta-strip">
  <div class="container" data-aos="fade-up">
    <h2>Ready to Access Business Funding</h2>
    <p>Join over 3,200 Australians who've trusted Quick Funding. Apply in 10 minutes — no upfront fees, no obligation.
    </p>
    <div class="cta-strip-btns">
      <a href="{{ url_for('apply') }}" class="btn btn-white btn-lg">Apply Now — It's Free</a>
      <a href="tel:0290717960" class="btn btn-outline-white btn-lg">
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
          <path
            d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8a19.79 19.79 0 01-3.07-8.63A2 2 0 012 .18h3a2 2 0 012 1.72 12.05 12.05 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z" />
        </svg>
        Call 02 9071 7960
      </a>
    </div>
  </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Hero slider
    new Swiper('.hero-swiper', {
      loop: true,
      speed: 900,
      autoplay: { delay: 6000, disableOnInteraction: false },
      effect: 'fade',
      fadeEffect: { crossFade: true },
      pagination: { el: '.hero-swiper .swiper-pagination', clickable: true },
      navigation: { nextEl: '.hero-swiper .swiper-button-next', prevEl: '.hero-swiper .swiper-button-prev' }
    });
    // Testimonials slider
    new Swiper('.testi-swiper', {
      loop: true,
      slidesPerView: 1,
      spaceBetween: 24,
      autoplay: { delay: 5000, disableOnInteraction: false },
      pagination: { el: '.testi-swiper .swiper-pagination', clickable: true },
      breakpoints: {
        640: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    });
  });
</script>
{% endblock %}