---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
suggested_pages:
  - title: "Home"
    description: "Return to our homepage"
    icon: "house"
    link: "/"
  - title: "Pricing"
    description: "View our plans and pricing"
    icon: "tag"
    link: "/pricing"
  - title: "Contact"
    description: "Get in touch with us"
    icon: "envelope"
    link: "/contact"
  - title: "Team"
    description: "Meet our amazing team"
    icon: "users"
    link: "/team"
---

<section class="col-12 col-md-10 col-lg-8 col-xl-6 mw-md">
  <div class="card border-0 shadow-lg">
    <div class="card-body p-3 p-md-5">
      <!-- Header -->
      <div class="text-center mb-4">
        <h1 class="display-1 mb-3">404</h1>
        <!-- <h2 class="h3 mb-3">Oops! Page Not Found</h2> -->
        <p class="text-muted">
          Sorry, the page you're looking for doesn't exist or has been moved. Don't worry, it happens to the best of us!
        </p>
      </div>

      <!-- URL Display -->
      <div class="alert alert-warning text-center mb-4" role="alert">
        <small class="text-body">
          <strong>Requested URL:</strong> <span id="page-url" class="text-break">{{ page.canonical.url }}</span>
        </small>
      </div>

      <!-- Primary Actions -->
      <div class="d-grid gap-2 d-sm-block text-center mb-4">
        <a href="{{ site.url }}" class="btn btn-adaptive btn-lg mb-2 mb-sm-0 me-sm-2">
          {% uj_icon "house", "me-2" %}
          Back to home
        </a>
        <button class="btn btn-outline-adaptive btn-lg mb-2 mb-sm-0" onclick="window.history.back()">
          {% uj_icon "arrow-left", "me-2" %}
          Go back
        </button>
      </div>

      <!-- Help Section -->
      <div class="text-center pt-4 border-top">
        <p class="text-muted mb-0">
          Still can't find what you're looking for?
          <a href="/contact" class="text-decoration-none fw-semibold">Contact our support team</a>
          and we'll help you out!
        </p>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}