<?php
session_start();
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="description"
    content="Oakshire Finance - Connected digital banking for saving, spending, investing, and growing with confidence." />
  <title>Oakshire Finance | Connected finance</title>
  <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=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap"
    rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary-navy: #0a2540;
      --primary-dark: #0a1c2f;
      --primary-blue: #1a4d8c;
      --accent-blue: #2c7da0;
      --success-green: #2e7d32;
      --gray-50: #f8f9fc;
      --gray-100: #f1f3f9;
      --gray-200: #e9ecef;
      --gray-300: #dee2e6;
      --gray-400: #ced4da;
      --gray-500: #adb5bd;
      --gray-600: #6c757d;
      --gray-700: #495057;
      --gray-800: #343a40;
      --gray-900: #212529;
      --white: #ffffff;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
      --transition: all 0.3s ease;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--gray-800);
      background-color: var(--gray-50);
      line-height: 1.5;
      overflow-x: hidden;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* Animation Classes */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .animate-fadeLeft {
      animation: fadeInLeft 0.8s ease forwards;
    }

    .animate-fadeRight {
      animation: fadeInRight 0.8s ease forwards;
    }

    .delay-100 {
      animation-delay: 0.1s;
      opacity: 0;
    }

    .delay-200 {
      animation-delay: 0.2s;
      opacity: 0;
    }

    .delay-300 {
      animation-delay: 0.3s;
      opacity: 0;
    }

    /* Header */
    header {
      background: var(--white);
      box-shadow: var(--shadow-sm);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid var(--gray-200);
      transition: var(--transition);
    }

    header.scrolled {
      box-shadow: var(--shadow-md);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 72px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      transition: var(--transition);
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      background: var(--primary-navy);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-icon i {
      font-size: 18px;
      color: white;
    }

    .logo-text {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-navy);
      letter-spacing: -0.3px;
    }

    .nav-links {
      display: flex;
      gap: 32px;
    }

    .nav-links a {
      text-decoration: none;
      font-weight: 500;
      color: var(--gray-700);
      transition: var(--transition);
      font-size: 15px;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-blue);
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }

    .nav-links a:hover {
      color: var(--primary-blue);
    }

    .auth-buttons {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .btn-outline {
      padding: 8px 20px;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      border: 1px solid var(--gray-300);
      color: var(--gray-700);
      transition: var(--transition);
      background: transparent;
    }

    .btn-outline:hover {
      border-color: var(--primary-blue);
      color: var(--primary-blue);
    }

    .btn-primary {
      padding: 8px 24px;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      background: var(--primary-navy);
      color: white;
      transition: var(--transition);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }

    /* Mobile Menu */
    .hamburger {
      display: none;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: var(--gray-800);
    }

    @media (max-width: 992px) {
      .container {
        padding: 0 20px;
      }

      .nav-links,
      .auth-buttons {
        position: fixed;
        top: 72px;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        box-shadow: var(--shadow-lg);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.2s ease;
        z-index: 999;
        border-bottom: 1px solid var(--gray-200);
      }

      .nav-links {
        align-items: center;
      }

      .auth-buttons {
        top: calc(72px + 280px);
        flex-direction: row;
        justify-content: center;
      }

      .nav-links.active,
      .auth-buttons.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
      }

      .hamburger {
        display: block;
      }

      .nav-links a,
      .auth-buttons a {
        width: 100%;
        text-align: center;
        padding: 12px 0;
      }

      .auth-buttons a:last-child {
        width: auto;
        min-width: 140px;
      }
    }

    /* Hero Section */
    .hero {
      margin-top: 72px;
      background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-dark) 100%);
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><path fill="white" d="M10,50 L90,50 M50,10 L50,90 M30,30 L70,70 M30,70 L70,30"/></svg>') repeat;
      pointer-events: none;
      animation: fadeInUp 20s ease-in-out infinite alternate;
    }

    .hero .container {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .hero-content h1 {
      font-size: 48px;
      font-weight: 800;
      color: white;
      line-height: 1.2;
      margin-bottom: 20px;
      letter-spacing: -0.5px;
    }

    .hero-content p {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 32px;
      line-height: 1.6;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .btn-hero-primary {
      background: white;
      color: var(--primary-navy);
      padding: 14px 32px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-hero-primary:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .btn-hero-outline {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      padding: 14px 32px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
    }

    .btn-hero-outline:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: white;
      transform: translateY(-2px);
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 32px;
    }

    .stat {
      text-align: center;
    }

    .stat-number {
      font-size: 32px;
      font-weight: 700;
      color: white;
      display: block;
    }

    .stat-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* Tablet Responsive */
    @media (max-width: 992px) {
      .hero {
        padding: 50px 0;
      }

      .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
      }

      .hero-content h1 {
        font-size: 36px;
      }

      .hero-content p {
        font-size: 16px;
      }

      .hero-buttons {
        justify-content: center;
      }

      .hero-stats {
        max-width: 500px;
        margin: 0 auto;
        padding: 24px;
      }

      .stat-number {
        font-size: 28px;
      }
    }

    /* Mobile Responsive */
    @media (max-width: 576px) {
      .hero {
        padding: 40px 0;
        margin-top: 72px;
      }

      .hero-content h1 {
        font-size: 28px;
      }

      .hero-content p {
        font-size: 14px;
      }

      .btn-hero-primary,
      .btn-hero-outline {
        padding: 12px 24px;
        font-size: 14px;
      }

      .hero-stats {
        gap: 16px;
        padding: 20px;
      }

      .stat-number {
        font-size: 22px;
      }

      .stat-label {
        font-size: 10px;
      }
    }

    /* Features Section */
    .features {
      padding: 60px 0;
      background: var(--white);
    }

    .section-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 40px;
    }

    .section-header h2 {
      font-size: 32px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 16px;
    }

    .section-header p {
      font-size: 16px;
      color: var(--gray-600);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .feature-card {
      background: var(--gray-50);
      padding: 28px;
      border-radius: 20px;
      border: 1px solid var(--gray-200);
      transition: var(--transition);
      text-align: center;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: rgba(26, 77, 140, 0.1);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    .feature-icon i {
      font-size: 28px;
      color: var(--primary-blue);
    }

    .feature-card h3 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .feature-card p {
      color: var(--gray-600);
      font-size: 14px;
      line-height: 1.6;
    }

    /* Products Section */
    .products {
      padding: 60px 0;
      background: var(--gray-50);
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .product-card {
      background: var(--white);
      border-radius: 20px;
      padding: 28px;
      border: 1px solid var(--gray-200);
      transition: var(--transition);
      text-align: center;
    }

    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .product-icon {
      font-size: 40px;
      color: var(--primary-blue);
      margin-bottom: 16px;
    }

    .product-card h3 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .product-card p {
      color: var(--gray-600);
      margin-bottom: 16px;
      font-size: 14px;
    }

    .product-link {
      color: var(--primary-blue);
      text-decoration: none;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .product-link:hover {
      gap: 12px;
    }

    /* Trust Section */
    .trust {
      padding: 48px 0;
      background: var(--white);
      border-top: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
    }

    .trust-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 32px;
    }

    .trust-item {
      text-align: center;
      flex: 1;
      min-width: 150px;
    }

    .trust-number {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-navy);
    }

    .trust-label {
      font-size: 13px;
      color: var(--gray-600);
    }

    /* Footer */
    footer {
      background: var(--gray-900);
      color: var(--gray-400);
      padding: 48px 0 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-col h4 {
      font-size: 16px;
      font-weight: 600;
      color: white;
      margin-bottom: 16px;
    }

    .footer-col p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--gray-500);
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-links a {
      color: var(--gray-500);
      text-decoration: none;
      font-size: 13px;
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: white;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12px;
    }

    .social-links {
      display: flex;
      gap: 16px;
    }

    .social-links a {
      color: var(--gray-500);
      font-size: 18px;
      transition: var(--transition);
    }

    .social-links a:hover {
      color: white;
    }

    /* Tablet Responsive */
    @media (max-width: 992px) {

      .features,
      .products {
        padding: 50px 0;
      }

      .section-header h2 {
        font-size: 28px;
      }

      .section-header p {
        font-size: 15px;
      }

      .features-grid,
      .products-grid {
        gap: 20px;
      }

      .trust-grid {
        gap: 24px;
      }

      .trust-number {
        font-size: 20px;
      }

      .trust-label {
        font-size: 12px;
      }
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
      .container {
        padding: 0 16px;
      }

      .features,
      .products {
        padding: 40px 0;
      }

      .section-header h2 {
        font-size: 24px;
      }

      .section-header p {
        font-size: 14px;
      }

      .feature-card,
      .product-card {
        padding: 20px;
      }

      .feature-icon {
        width: 50px;
        height: 50px;
      }

      .feature-icon i {
        font-size: 24px;
      }

      .feature-card h3,
      .product-card h3 {
        font-size: 18px;
      }

      .feature-card p,
      .product-card p {
        font-size: 13px;
      }

      .trust-grid {
        flex-direction: column;
        gap: 20px;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      .hero-content h1 {
        font-size: 24px;
      }

      .hero-buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .btn-hero-primary,
      .btn-hero-outline {
        text-align: center;
        justify-content: center;
      }

      .hero-stats {
        gap: 12px;
        padding: 16px;
      }

      .stat-number {
        font-size: 18px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
      }
    }

    /* Scroll Animation Trigger */
    .scroll-trigger {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .scroll-trigger.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Nexus visual layer */
    :root {
      --primary-navy: #081b2d;
      --primary-dark: #06121f;
      --primary-blue: #39d5c5;
      --accent-blue: #78e9df;
      --lime: #d5f36b;
      --gray-50: #f2f7f6;
      --gray-100: #e8f0ef;
      --gray-200: #d8e4e2;
      --gray-600: #5d6f73;
      --gray-700: #32484d;
      --gray-800: #183238;
      --gray-900: #07181f;
      --shadow-lg: 0 22px 60px rgba(5, 31, 39, 0.14);
      --shadow-hover: 0 24px 48px rgba(5, 31, 39, 0.16);
    }

    body {
      background: var(--gray-50);
      font-family: 'Inter', sans-serif;
    }

    .container {
      max-width: 1320px;
    }

    header {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(18px);
      border-bottom-color: rgba(216, 228, 226, 0.8);
    }

    nav {
      height: 78px;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--primary-blue);
      color: var(--primary-navy);
      box-shadow: 0 8px 18px rgba(57, 213, 197, 0.26);
    }

    .logo-icon i {
      color: var(--primary-navy);
    }

    .logo-text {
      color: var(--primary-navy);
      font-size: 23px;
      letter-spacing: -0.8px;
    }

    .nav-links {
      gap: 28px;
    }

    .nav-links a {
      color: var(--gray-700);
      font-size: 14px;
    }

    .nav-links a::after {
      background: var(--primary-blue);
      height: 3px;
      border-radius: 20px;
    }

    .btn-outline,
    .btn-primary {
      border-radius: 999px;
      padding: 10px 20px;
      font-size: 14px;
    }

    .btn-primary {
      background: var(--primary-navy);
      box-shadow: 0 8px 18px rgba(8, 27, 45, 0.18);
    }

    .hero {
      margin-top: 78px;
      padding: 92px 0 104px;
      background: var(--primary-navy);
      isolation: isolate;
    }

    .hero::before {
      background: radial-gradient(circle at 78% 25%, rgba(57, 213, 197, .22), transparent 30%), linear-gradient(120deg, transparent 0 48%, rgba(213, 243, 107, .06) 48% 50%, transparent 50%);
      opacity: 1;
      animation: none;
    }

    .hero::after {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      right: -150px;
      bottom: -230px;
      border: 1px solid rgba(120, 233, 223, .25);
      border-radius: 50%;
      box-shadow: 0 0 0 42px rgba(120, 233, 223, .04), 0 0 0 84px rgba(120, 233, 223, .03);
      z-index: -1;
    }

    .hero .container {
      gap: 80px;
    }

    .hero-content {
      max-width: 620px;
    }

    .hero-content::before {
      content: 'NEXUS / DIGITAL BANKING';
      display: inline-block;
      margin-bottom: 22px;
      color: var(--lime);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2.4px;
    }

    .hero-content h1 {
      font-size: clamp(42px, 5vw, 72px);
      line-height: 1.03;
      letter-spacing: -2.8px;
      margin-bottom: 24px;
    }

    .hero-content p {
      max-width: 540px;
      color: rgba(255, 255, 255, .7);
      font-size: 17px;
      line-height: 1.75;
    }

    .btn-hero-primary {
      border-radius: 999px;
      background: var(--lime);
      color: var(--primary-navy);
      padding: 15px 24px;
    }

    .btn-hero-primary:hover {
      box-shadow: 0 12px 28px rgba(213, 243, 107, .18);
    }

    .btn-hero-outline {
      border-radius: 999px;
      padding: 15px 24px;
    }

    .hero-stats {
      position: relative;
      grid-template-columns: 1fr;
      gap: 0;
      max-width: 470px;
      width: 100%;
      padding: 28px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
      box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
      backdrop-filter: blur(20px);
      text-align: left;
    }

    .hero-stats::before {
      content: 'Nexus / balance overview';
      display: block;
      margin-bottom: 34px;
      color: rgba(255, 255, 255, .58);
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .hero-stats::after {
      content: '';
      position: absolute;
      top: 28px;
      right: 28px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 6px rgba(213, 243, 107, .12);
    }

    .stat {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 20px;
      padding: 18px 0;
      border-top: 1px solid rgba(255, 255, 255, .12);
      text-align: left;
    }

    .stat-number {
      color: white;
      font-size: 30px;
      letter-spacing: -1px;
    }

    .stat-label {
      color: rgba(255, 255, 255, .58);
      font-size: 11px;
      letter-spacing: 1.2px;
    }

    .features,
    .products {
      padding: 100px 0;
    }

    .section-header {
      max-width: 760px;
      margin-bottom: 54px;
    }

    .section-header h2 {
      color: var(--gray-900);
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.08;
      letter-spacing: -1.7px;
    }

    .section-header p {
      color: var(--gray-600);
      line-height: 1.7;
    }

    .features-grid,
    .products-grid {
      gap: 18px;
    }

    .feature-card,
    .product-card {
      border-radius: 18px;
      border-color: var(--gray-200);
      padding: 30px;
      text-align: left;
      background: rgba(255, 255, 255, .72);
    }

    .feature-card:hover,
    .product-card:hover {
      border-color: rgba(57, 213, 197, .65);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      margin: 0 0 32px;
      border-radius: 14px;
      background: rgba(57, 213, 197, .14);
    }

    .feature-icon i,
    .product-icon {
      color: #139d96;
    }

    .product-icon {
      font-size: 32px;
      margin-bottom: 28px;
    }

    .product-link {
      color: #087f7b;
    }

    .trust {
      padding: 30px 0;
      background: var(--lime);
      border: 0;
    }

    .trust-number {
      color: var(--primary-navy);
      font-size: 18px;
    }

    .trust-label {
      color: rgba(8, 27, 45, .66);
    }

    footer {
      background: var(--primary-navy);
      padding: 76px 0 26px;
    }

    .footer-col h4 {
      color: white;
    }

    .footer-col p,
    .footer-links a {
      color: rgba(255, 255, 255, .58);
    }

    .footer-links a:hover,
    .social-links a:hover {
      color: var(--accent-blue);
    }

    @media (max-width: 992px) {
      nav {
        height: 72px;
      }

      .hero {
        margin-top: 72px;
        padding: 72px 0 80px;
      }

      .hero .container {
        gap: 48px;
      }

      .hero-content h1 {
        font-size: clamp(42px, 8vw, 60px);
      }

      .hero-stats {
        margin: 0 auto;
      }
    }

    @media (max-width: 576px) {
      .hero {
        padding: 58px 0 64px;
      }

      .hero-content h1 {
        font-size: 42px;
        letter-spacing: -1.8px;
      }

      .hero-content p {
        font-size: 15px;
      }

      .hero-buttons {
        align-items: stretch;
      }

      .btn-hero-primary,
      .btn-hero-outline {
        justify-content: center;
      }

      .hero-stats {
        padding: 22px;
      }

      .features,
      .products {
        padding: 72px 0;
      }

      .section-header {
        margin-bottom: 34px;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }
  </style>
</head>

<body>
  <header id="header">
    <div class="container">
      <nav>
        <a href="index.php" class="logo">
          <div class="logo-icon">
            <i class="fas fa-building-columns"></i>
          </div>
          <span class="logo-text">Oakshire Finance</span>
        </a>
        <div class="nav-links" id="navLinks">
          <a href="index.php" class="active">Home</a>
          <a href="about-us.php">About Us</a>
          <a href="services.php">Services</a>
          <a href="contact.php">Contact</a>
        </div>
        <div class="auth-buttons" id="authButtons">
          <?php if (isset($_SESSION['user_id'])): ?>
            <a href="user/dashboard.php" class="btn-outline">Dashboard</a>
          <?php else: ?>
            <a href="login.php" class="btn-outline">Sign In</a>
            <a href="register.php" class="btn-primary">Open Account</a>
          <?php endif; ?>
        </div>
        <button class="hamburger" id="hamburger">
          <i class="fas fa-bars"></i>
        </button>
      </nav>
    </div>
  </header>

  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="animate-fadeLeft">Your money,<br>in sync with life.</h1>
          <p class="animate-fadeLeft delay-100">A calmer way to move, save, and grow. Oakshire brings your everyday
            banking
            and long-term plans into one intelligent, secure place.</p>
          <div class="hero-buttons animate-fadeLeft delay-200">
            <a href="register.php" class="btn-hero-primary">Open Account <i class="fas fa-arrow-right"></i></a>
            <a href="services.php" class="btn-hero-outline">Learn More</a>
          </div>
        </div>
        <div class="hero-stats animate-fadeRight delay-200" aria-label="Oakshire Finance highlights">
          <div class="stat">
            <span class="stat-number" id="statCustomers">0</span>
            <span class="stat-label">Customers</span>
          </div>
          <div class="stat">
            <span class="stat-number" id="statAssets">0</span>
            <span class="stat-label">Assets Protected</span>
          </div>
          <div class="stat">
            <span class="stat-number" id="statSatisfaction">0</span>
            <span class="stat-label">Satisfaction</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features">
      <div class="container">
        <div class="section-header scroll-trigger">
          <h2>Built for the way money moves now.</h2>
          <p>Modern tools, human support, and thoughtful security working together behind every decision.</p>
        </div>
        <div class="features-grid">
          <div class="feature-card scroll-trigger">
            <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
            <h3>Bank-Grade Security</h3>
            <p>Advanced encryption and fraud protection keep your accounts and transactions safe 24/7.</p>
          </div>
          <div class="feature-card scroll-trigger">
            <div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
            <h3>Mobile Banking</h3>
            <p>Manage your money anywhere with our intuitive mobile app — check balances, transfer funds, and more.</p>
          </div>
          <div class="feature-card scroll-trigger">
            <div class="feature-icon"><i class="fas fa-headset"></i></div>
            <h3>24/7 Customer Support</h3>
            <p>Our dedicated team is always here to help with any questions or concerns you may have.</p>
          </div>
          <div class="feature-card scroll-trigger">
            <div class="feature-icon"><i class="fas fa-chart-line"></i></div>
            <h3>Competitive Rates</h3>
            <p>Enjoy high-yield savings accounts and low-rate loans designed to help your money grow.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Products Section -->
    <section class="products">
      <div class="container">
        <div class="section-header scroll-trigger">
          <h2>One connected view of your financial life.</h2>
          <p>Simple products for today, with the flexibility to keep up as your plans change.</p>
        </div>
        <div class="products-grid">
          <div class="product-card scroll-trigger">
            <div class="product-icon"><i class="fas fa-piggy-bank"></i></div>
            <h3>Savings Accounts</h3>
            <p>Build your savings with competitive interest rates and no monthly fees.</p>
            <a href="#" class="product-link">Learn more <i class="fas fa-arrow-right"></i></a>
          </div>
          <div class="product-card scroll-trigger">
            <div class="product-icon"><i class="fas fa-credit-card"></i></div>
            <h3>Credit Cards</h3>
            <p>Rewards, cashback, and low APR options tailored to your spending habits.</p>
            <a href="#" class="product-link">Learn more <i class="fas fa-arrow-right"></i></a>
          </div>
          <div class="product-card scroll-trigger">
            <div class="product-icon"><i class="fas fa-home"></i></div>
            <h3>Home Loans</h3>
            <p>Competitive mortgage rates and personalized guidance for your home purchase.</p>
            <a href="#" class="product-link">Learn more <i class="fas fa-arrow-right"></i></a>
          </div>
          <div class="product-card scroll-trigger">
            <div class="product-icon"><i class="fas fa-chart-pie"></i></div>
            <h3>Investment Services</h3>
            <p>Expert guidance to help you build wealth and plan for retirement.</p>
            <a href="#" class="product-link">Learn more <i class="fas fa-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </section>

    <!-- Trust Section -->
    <section class="trust">
      <div class="container">
        <div class="trust-grid">
          <div class="trust-item scroll-trigger">
            <div class="trust-number">FDIC Insured</div>
            <div class="trust-label">Deposits insured up to $250,000</div>
          </div>
          <div class="trust-item scroll-trigger">
            <div class="trust-number">24/7 Support</div>
            <div class="trust-label">Real people, real help</div>
          </div>
          <div class="trust-item scroll-trigger">
            <div class="trust-number">100% Digital</div>
            <div class="trust-label">Bank from anywhere</div>
          </div>
          <div class="trust-item scroll-trigger">
            <div class="trust-number">No Hidden Fees</div>
            <div class="trust-label">Transparent pricing</div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h4>Oakshire Finance</h4>
          <p>Connected banking for clearer decisions and more confident tomorrows.</p>
          <div style="margin-top: 16px;">
            <p><i class="fas fa-envelope"></i> support@oakshirefinance.com</p>
            <p><i class="fas fa-phone"></i> 1-800-NEXUS-01</p>
          </div>
        </div>
        <div class="footer-col">
          <h4>Banking</h4>
          <ul class="footer-links">
            <li><a href="#">Personal Banking</a></li>
            <li><a href="#">Business Banking</a></li>
            <li><a href="#">Loans</a></li>
            <li><a href="#">Credit Cards</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Support</h4>
          <ul class="footer-links">
            <li><a href="#">Help Center</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">Fraud Prevention</a></li>
            <li><a href="contact.php">Contact Us</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h4>Legal</h4>
          <ul class="footer-links">
            <li><a href="terms.php">Terms & Conditions</a></li>
            <li><a href="privacy-policy.php">Privacy Policy</a></li>
            <li><a href="security-policy.php">Security Policy</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <div>&copy; 2025 Oakshire Finance. All rights reserved. Member FDIC.</div>
        <div class="social-links">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-linkedin-in"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // Header scroll effect
    const header = document.getElementById('header');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });

    // Number counter animation
    function animateNumber(element, start, end, duration, suffix = '') {
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const current = Math.floor(progress * (end - start) + start);
        if (suffix === '%') {
          element.textContent = current + suffix;
        } else if (suffix === 'B+') {
          element.textContent = (current / 10).toFixed(1) + suffix;
        } else {
          element.textContent = current.toLocaleString() + suffix;
        }
        if (progress < 1) {
          window.requestAnimationFrame(step);
        }
      };
      window.requestAnimationFrame(step);
    }

    // Intersection Observer for scroll animations
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');

          if (entry.target.querySelector('#statCustomers')) {
            animateNumber(document.getElementById('statCustomers'), 0, 50000, 2000, '+');
            animateNumber(document.getElementById('statAssets'), 0, 28, 2000, 'B+');
            animateNumber(document.getElementById('statSatisfaction'), 0, 98, 2000, '%');
          }

          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

    document.querySelectorAll('.scroll-trigger').forEach(el => {
      observer.observe(el);
    });

    const statsObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          animateNumber(document.getElementById('statCustomers'), 0, 50000, 2000, '+');
          animateNumber(document.getElementById('statAssets'), 0, 28, 2000, 'B+');
          animateNumber(document.getElementById('statSatisfaction'), 0, 98, 2000, '%');
          statsObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });

    const statsContainer = document.querySelector('.hero-stats');
    if (statsContainer) {
      statsObserver.observe(statsContainer);
    }

    // Mobile menu toggle
    const hamburger = document.getElementById('hamburger');
    const navLinks = document.getElementById('navLinks');
    const authButtons = document.getElementById('authButtons');
    let menuOpen = false;

    if (hamburger) {
      hamburger.addEventListener('click', () => {
        menuOpen = !menuOpen;
        navLinks.classList.toggle('active', menuOpen);
        authButtons.classList.toggle('active', menuOpen);
        const icon = hamburger.querySelector('i');
        if (menuOpen) {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });
    }

    document.querySelectorAll('#navLinks a, #authButtons a').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 992 && menuOpen) {
          navLinks.classList.remove('active');
          authButtons.classList.remove('active');
          menuOpen = false;
          const icon = hamburger.querySelector('i');
          if (icon) {
            icon.classList.remove('fa-times');
            icon.classList.add('fa-bars');
          }
        }
      });
    });

    window.addEventListener('resize', () => {
      if (window.innerWidth > 992 && menuOpen) {
        navLinks.classList.remove('active');
        authButtons.classList.remove('active');
        menuOpen = false;
        const icon = hamburger.querySelector('i');
        if (icon) {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      }
    });
  </script>
</body>

</html>