<?php
/**
 * <?php echo SITE_NAME; ?> — Professional Landing Page
 * Handles contact form submissions via PHPMailer
 */
require_once __DIR__ . '/functions.php';

// Redirect logged-in users to dashboard
if (isLoggedIn()) {
    header('Location: dashboard.php');
    exit();
}

// ── Contact form handler (AJAX-friendly) ─────────────────────
$contactResult = ['success' => false, 'message' => ''];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_form'])) {
    $name    = trim($_POST['contact_name']    ?? '');
    $email   = trim($_POST['contact_email']   ?? '');
    $phone   = trim($_POST['contact_phone']   ?? '');
    $subject = trim($_POST['contact_subject'] ?? '');
    $message = trim($_POST['contact_message'] ?? '');

    if (empty($name) || empty($email) || empty($subject) || empty($message)) {
        $contactResult['message'] = 'Please fill in all required fields.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $contactResult['message'] = 'Please enter a valid email address.';
    } elseif (strlen($message) < 10) {
        $contactResult['message'] = 'Your message is too short. Please provide more detail.';
    } else {
        $sent = sendContactEmail($name, $email, $phone, $subject, $message);

        if ($sent) {
            sendContactAutoReply($email, $name, $subject);
            logActivity('contact_form_submitted', "From: {$name} <{$email}> — {$subject}");
            $contactResult['success'] = true;
            $contactResult['message'] = "Thank you, {$name}! Your message has been sent. We'll reply within 24 hours.";
        } else {
            $contactResult['message'] = 'Sorry, we could not send your message right now. Please try again or email us directly at ' . SITE_EMAIL;
        }
    }

    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
        strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
        header('Content-Type: application/json');
        echo json_encode($contactResult);
        exit();
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title><?php echo SITE_NAME; ?> — Banking Without Boundaries</title>
<?php
// Fix: Check if favicon exists, fallback to default
$siteFavicon = getSetting('site_favicon');
if (empty($siteFavicon) || !file_exists($_SERVER['DOCUMENT_ROOT'] . '/' . ltrim($siteFavicon, '/'))) {
    $siteFavicon = 'assets/images/favicon.png';
}
?>
<link rel="icon" type="image/png" href="<?php echo htmlspecialchars($siteFavicon, ENT_QUOTES, 'UTF-8'); ?>">
<link rel="shortcut icon" type="image/png" href="<?php echo htmlspecialchars($siteFavicon, ENT_QUOTES, 'UTF-8'); ?>">
<link rel="apple-touch-icon" href="<?php echo htmlspecialchars($siteFavicon, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="description" content="<?php echo SITE_NAME; ?> offers modern, secure, and intelligent banking solutions. Open an account today and experience banking without boundaries.">
    <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:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #0a0a0f; color: #ffffff; line-height: 1.6;
            overflow-x: hidden; -webkit-font-smoothing: antialiased;
        }
        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; height: auto; display: block; }

        :root {
            --red: #DC2626; --red-dark: #B91C1C; --red-bright: #EF4444;
            --gold: #F59E0B; --gold-light: #FCD34D;
            --bg: #0a0a0f; --bg-card: #111118; --bg-card2: #16161f;
            --border: rgba(255,255,255,0.08); --border-red: rgba(220,38,38,0.3);
            --text-muted: #9ca3af; --text-dim: #6b7280;
            --shadow-glow: 0 0 80px rgba(220,38,38,0.15);
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0f; }
        ::-webkit-scrollbar-thumb { background: #DC2626; border-radius: 3px; }

        .bg-grid {
            position: fixed; inset: 0; z-index: 0;
            background-image: linear-gradient(rgba(220,38,38,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(220,38,38,0.04) 1px, transparent 1px);
            background-size: 60px 60px; pointer-events: none;
        }
        .bg-orb { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
        .bg-orb-1 { width: 600px; height: 600px; background: rgba(220,38,38,0.12); top: -200px; right: -150px; animation: orbFloat1 18s ease-in-out infinite; }
        .bg-orb-2 { width: 500px; height: 500px; background: rgba(245,158,11,0.06); bottom: 20%; left: -100px; animation: orbFloat2 22s ease-in-out infinite; }
        .bg-orb-3 { width: 400px; height: 400px; background: rgba(220,38,38,0.08); bottom: -100px; right: 20%; animation: orbFloat3 15s ease-in-out infinite; }
        @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,60px) scale(1.1);} }
        @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,-40px) scale(0.9);} }
        @keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,30px) scale(1.05);} }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
        .badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600;
            letter-spacing: 0.05em; text-transform: uppercase;
            background: rgba(220,38,38,0.12); color: var(--red-bright); border: 1px solid rgba(220,38,38,0.25);
        }
        .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-bright); animation: pulse 2s ease-in-out infinite; }
        @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600;
            cursor: pointer; border: none; transition: all 0.25s ease; white-space: nowrap;
        }
        .btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
        .btn-primary:hover { background: var(--red-dark); box-shadow: 0 6px 30px rgba(220,38,38,0.55); transform: translateY(-2px); }
        .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
        .btn-outline:hover { border-color: var(--red); color: var(--red-bright); background: rgba(220,38,38,0.05); }
        .btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: #000; font-weight: 700; }
        .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(245,158,11,0.4); }
        .btn-lg { padding: 18px 40px; font-size: 16px; border-radius: 12px; }

        .section-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 12px; }
        .section-title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.15; }
        .section-sub { font-size: 18px; color: var(--text-muted); margin-top: 16px; max-width: 580px; line-height: 1.7; }

        .gradient-text {
            background: linear-gradient(135deg, #fff 30%, var(--red-bright) 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }

        .card-glass {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 20px;
            backdrop-filter: blur(10px); transition: all 0.3s ease;
        }
        .card-glass:hover { border-color: var(--border-red); background: rgba(220,38,38,0.04); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(220,38,38,0.12); }

        /* Navbar */
        .navbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            padding: 0 24px; height: 72px; display: flex; align-items: center;
            background: rgba(10,10,15,0.8); backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.06); transition: all 0.3s ease;
        }
        .navbar.scrolled { background: rgba(10,10,15,0.95); border-bottom-color: rgba(220,38,38,0.2); }
        .nav-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
        .nav-logo { display: flex; align-items: center; gap: 12px; }
        .nav-logo-icon {
            width: 40px; height: 40px; border-radius: 10px;
            background: linear-gradient(135deg, var(--red), var(--red-dark));
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 15px rgba(220,38,38,0.4); overflow: hidden;
        }
        .nav-logo-icon img { width: 28px; height: 28px; object-fit: contain; }
        .nav-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
        .nav-logo-text span { color: var(--red-bright); }
        .nav-links { display: flex; align-items: center; gap: 8px; }
        .nav-link { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted); transition: all 0.2s; }
        .nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .nav-login { font-size: 14px; font-weight: 600; color: var(--text-muted); padding: 8px 18px; border-radius: 8px; transition: all 0.2s; }
        .nav-login:hover { color: #fff; }
        .nav-cta { font-size: 14px; font-weight: 600; }

        /* Hero */
        .hero { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; position: relative; }
        .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
        .hero-divider { width: 40px; height: 2px; background: var(--red); }
        .hero-eyebrow-text { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-bright); }
        .hero-title { font-size: clamp(42px, 6vw, 72px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; }
        .hero-title .highlight { position: relative; display: inline-block; background: linear-gradient(135deg, var(--red-bright), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .hero-sub { font-size: 18px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.75; max-width: 500px; }
        .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
        .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .hero-stat { padding: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; }
        .hero-stat-value { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
        .hero-stat-value span { color: var(--red-bright); }
        .hero-stat-label { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }

        .hero-visual { position: relative; }
        .hero-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5), var(--shadow-glow); }
        .hero-image-wrapper img { width: 100%; height: 520px; object-fit: cover; transition: transform 0.5s ease; }
        .hero-image-wrapper:hover img { transform: scale(1.03); }
        .hero-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.9) 100%); pointer-events: none; }
        .hero-image-badge { position: absolute; bottom: 24px; left: 24px; right: 24px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(17,17,24,0.9); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: 16px; }
        .hero-image-badge-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
        .hero-image-badge-icon img { width: 32px; height: 32px; object-fit: contain; }
        .hero-image-badge-text h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
        .hero-image-badge-text p { font-size: 12px; color: var(--text-dim); }

        .float-widget { position: absolute; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; backdrop-filter: blur(20px); white-space: nowrap; z-index: 10; }
        .widget-1 { bottom: 60px; left: -30px; animation: widgetFloat 5s ease-in-out infinite; }
        .widget-2 { top: 40px; right: -20px; animation: widgetFloat 5s ease-in-out infinite 2s; }
        @keyframes widgetFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
        .widget-label { font-size: 11px; color: var(--text-dim); font-weight: 500; }
        .widget-value { font-size: 20px; font-weight: 800; color: #fff; margin-top: 2px; }
        .widget-change { font-size: 12px; font-weight: 600; margin-top: 4px; }
        .widget-change.up { color: #10B981; }
        .widget-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }
        .widget-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
        .widget-icon-green { background: rgba(16,185,129,0.15); }

        /* Trust Bar */
        .trust-bar { padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.01); }
        .trust-bar-inner { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
        .trust-item { display: flex; align-items: center; gap: 10px; opacity: 0.5; transition: opacity 0.2s; }
        .trust-item:hover { opacity: 0.9; }
        .trust-item svg { width: 20px; height: 20px; color: var(--text-muted); }
        .trust-item span { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }

        /* Features */
        .features { padding: 120px 0; }
        .features-header { text-align: center; margin-bottom: 80px; }
        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .feature-card { padding: 36px; border-radius: 20px; }
        .feature-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
        .feature-icon-red { background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.2); }
        .feature-icon-gold { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); }
        .feature-icon-blue { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); }
        .feature-icon-green { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }
        .feature-icon-purple { background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); }
        .feature-icon-pink { background: rgba(236,72,153,0.1); border: 1px solid rgba(236,72,153,0.2); }
        .feature-icon svg { width: 26px; height: 26px; }
        .icon-red { color: var(--red-bright); }
        .icon-gold { color: var(--gold); }
        .icon-blue { color: #60a5fa; }
        .icon-green { color: #34d399; }
        .icon-purple { color: #a78bfa; }
        .icon-pink { color: #f472b6; }
        .feature-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
        .feature-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

        /* Services */
        .services { padding: 120px 0; }
        .services-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .services-list { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
        .service-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px; border-radius: 16px; cursor: pointer; transition: all 0.25s; }
        .service-item.active, .service-item:hover { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.2); }
        .service-item:not(.active):not(:hover) { border: 1px solid transparent; }
        .service-item-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(220,38,38,0.12); flex-shrink: 0; }
        .service-item-icon svg { width: 22px; height: 22px; color: var(--red-bright); }
        .service-item-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
        .service-item-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

        .services-visual { position: relative; }
        .services-image-wrapper { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5), var(--shadow-glow); }
        .services-image-wrapper img { width: 100%; height: 480px; object-fit: cover; transition: transform 0.5s ease; }
        .services-image-wrapper:hover img { transform: scale(1.03); }

        /* Security */
        .security { padding: 120px 0; }
        .security-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .security-items { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
        .security-item { padding: 24px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); }
        .security-item-icon { font-size: 28px; margin-bottom: 12px; }
        .security-item-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
        .security-item-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
        .security-visual { position: relative; display: flex; align-items: center; justify-content: center; }
        .security-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5), var(--shadow-glow); }
        .security-image-wrapper img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.5s ease; }
        .security-image-wrapper:hover img { transform: scale(1.03); }
        .security-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,15,0.8) 100%); pointer-events: none; }
        .security-badge { position: absolute; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; z-index: 10; }
        .sec-badge-1 { top: 10%; right: 0; }
        .sec-badge-2 { bottom: 10%; left: 0; }
        .sec-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; animation: pulse 2s infinite; }

        /* Plans */
        .plans { padding: 120px 0; }
        .plans-header { text-align: center; margin-bottom: 70px; }
        .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .plan-card { padding: 40px 32px; border-radius: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .plan-card.featured { background: linear-gradient(160deg, rgba(220,38,38,0.12) 0%, rgba(220,38,38,0.04) 100%); border: 1px solid rgba(220,38,38,0.3) !important; }
        .plan-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red), var(--red-bright)); }
        .plan-badge { position: absolute; top: 20px; right: 20px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
        .plan-name { font-size: 14px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
        .plan-price { font-size: 48px; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 4px; line-height: 1; }
        .plan-price sup { font-size: 24px; vertical-align: super; line-height: 0; }
        .plan-period { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }
        .plan-divider { height: 1px; background: var(--border); margin-bottom: 24px; }
        .plan-features { list-style: none; display: flex; flex-direction: column; gap: 14px; flex: 1; }
        .plan-feature { display: flex; align-items: center; gap: 12px; font-size: 14px; }
        .plan-check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .plan-check.yes { background: rgba(16,185,129,0.15); }
        .plan-check.yes svg { width: 12px; height: 12px; color: #10B981; }
        .plan-check.no { background: rgba(107,114,128,0.1); }
        .plan-check.no svg { width: 12px; height: 12px; color: var(--text-dim); }
        .plan-cta { margin-top: 32px; }
        .plan-cta .btn { width: 100%; }

        /* Testimonials */
        .testimonials { padding: 120px 0; }
        .testimonials-header { text-align: center; margin-bottom: 70px; }
        .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .testimonial-card { padding: 32px; border-radius: 20px; display: flex; flex-direction: column; gap: 20px; }
        .testimonial-stars { display: flex; gap: 4px; }
        .testimonial-star { color: var(--gold); font-size: 16px; }
        .testimonial-text { font-size: 15px; color: var(--text-muted); line-height: 1.75; flex: 1; }
        .testimonial-author { display: flex; align-items: center; gap: 14px; }
        .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
        .testimonial-name { font-size: 14px; font-weight: 700; }
        .testimonial-role { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

        /* Stats Banner */
        .stats-banner { padding: 80px 0; background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(10,10,15,0) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
        .stat-number { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
        .stat-number span { color: var(--red-bright); }
        .stat-label { font-size: 14px; color: var(--text-muted); margin-top: 8px; font-weight: 500; }
        .stat-divider { width: 40px; height: 3px; background: var(--red); border-radius: 2px; margin: 12px auto 0; }

        /* About */
        .about { padding: 120px 0; }
        .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .about-images { position: relative; }
        .about-image-main { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5), var(--shadow-glow); }
        .about-image-main img { width: 100%; height: 480px; object-fit: cover; transition: transform 0.5s ease; }
        .about-image-main:hover img { transform: scale(1.03); }
        .about-image-secondary { position: absolute; bottom: -40px; right: -40px; width: 280px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); border: 3px solid var(--bg); }
        .about-image-secondary img { width: 100%; height: 180px; object-fit: cover; }
        .about-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
        .about-stat-box { padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 16px; transition: all 0.3s ease; }
        .about-stat-box:hover { border-color: var(--border-red); background: rgba(220,38,38,0.04); }
        .about-stat-box h4 { font-size: 32px; font-weight: 800; color: var(--red-bright); margin-bottom: 4px; }
        .about-stat-box p { font-size: 13px; color: var(--text-muted); }

        /* Team */
        .team { padding: 120px 0; }
        .team-header { text-align: center; margin-bottom: 70px; }
        .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .team-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; }
        .team-card:hover { border-color: var(--border-red); transform: translateY(-8px); box-shadow: 0 20px 60px rgba(220,38,38,0.12); }
        .team-card-image { width: 100%; height: 240px; overflow: hidden; position: relative; }
        .team-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .team-card:hover .team-card-image img { transform: scale(1.05); }
        .team-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,10,15,0.8) 100%); }
        .team-card-body { padding: 24px; }
        .team-card-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
        .team-card-role { font-size: 13px; color: var(--red-bright); font-weight: 600; margin-bottom: 12px; }
        .team-card-bio { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
        .team-social { display: flex; gap: 8px; margin-top: 16px; }
        .team-social-link { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
        .team-social-link:hover { border-color: var(--red); background: rgba(220,38,38,0.1); }
        .team-social-link svg { width: 14px; height: 14px; color: var(--text-muted); }

        /* Contact */
        .contact-section { padding: 120px 0; }
        .contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
        .contact-info { padding-top: 8px; }
        .contact-info-items { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
        .contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
        .contact-info-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.2); }
        .contact-info-icon svg { width: 22px; height: 22px; color: var(--red-bright); }
        .contact-info-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
        .contact-info-value { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
        .contact-info-value a { color: var(--red-bright); }
        .contact-hours { margin-top: 36px; padding: 24px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); }
        .contact-hours-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; color: var(--text-muted); }
        .contact-hours-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .contact-hours-row:last-child { border-bottom: none; }
        .contact-hours-day { color: var(--text-dim); }
        .contact-hours-time { font-weight: 600; color: #fff; }

        .contact-form-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 24px; padding: 48px; backdrop-filter: blur(10px); }
        .contact-form-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
        .contact-form-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .form-group { display: flex; flex-direction: column; gap: 8px; }
        .form-group.full { grid-column: 1 / -1; }
        .form-label { font-size: 13px; font-weight: 600; color: #d1d5db; }
        .form-label span { color: var(--red-bright); }
        .form-control { width: 100%; padding: 13px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; font-size: 14px; font-family: inherit; transition: all 0.2s; outline: none; resize: none; }
        .form-control::placeholder { color: var(--text-dim); }
        .form-control:focus { border-color: rgba(220,38,38,0.5); background: rgba(220,38,38,0.04); box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
        select.form-control option { background: #1a1a2e; color: #fff; }
        textarea.form-control { min-height: 130px; }
        .form-submit { margin-top: 8px; }
        .form-submit .btn { width: 100%; justify-content: center; }

        .form-alert { display: none; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 20px; align-items: center; gap: 10px; }
        .form-alert.show { display: flex; }
        .form-alert.success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: #34d399; }
        .form-alert.error { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.25); color: #fca5a5; }
        .form-alert svg { width: 18px; height: 18px; flex-shrink: 0; }
        .btn-loading { opacity: 0.7; pointer-events: none; }

        /* CTA */
        .cta-section { padding: 120px 0; }
        .cta-box { background: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(220,38,38,0.02) 100%); border: 1px solid rgba(220,38,38,0.2); border-radius: 32px; padding: 80px; text-align: center; position: relative; overflow: hidden; }
        .cta-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(220,38,38,0.12) 0%, transparent 60%); }
        .cta-title { font-size: clamp(36px, 5vw, 60px); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 20px; }
        .cta-sub { font-size: 18px; color: var(--text-muted); margin-bottom: 48px; max-width: 540px; margin-left: auto; margin-right: auto; }
        .cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
        .cta-footnote { font-size: 13px; color: var(--text-dim); margin-top: 24px; }
        .cta-footnote svg { width: 14px; height: 14px; display: inline; vertical-align: middle; margin-right: 4px; }

        /* Footer */
        .footer { padding: 80px 0 40px; border-top: 1px solid var(--border); }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
        .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .footer-logo-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .footer-logo-icon img { width: 26px; height: 26px; object-fit: contain; }
        .footer-logo-text { font-size: 17px; font-weight: 800; }
        .footer-logo-text span { color: var(--red-bright); }
        .footer-desc { font-size: 13px; color: var(--text-dim); line-height: 1.7; max-width: 260px; }
        .footer-badges { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
        .footer-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--text-dim); }
        .footer-badge svg { width: 14px; height: 14px; color: #10B981; }
        .footer-col-title { font-size: 13px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
        .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .footer-link { font-size: 13px; color: var(--text-dim); transition: color 0.2s; cursor: pointer; }
        .footer-link:hover { color: #fff; }
        .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--border); }
        .footer-copy { font-size: 13px; color: var(--text-dim); }
        .footer-copy span { color: var(--red-bright); }
        .footer-social { display: flex; gap: 12px; }
        .social-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
        .social-btn:hover { border-color: var(--red); background: rgba(220,38,38,0.1); }
        .social-btn svg { width: 15px; height: 15px; color: var(--text-muted); }

        /* Mobile */
        .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: #fff; padding: 8px; }
        .mobile-menu { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(10,10,15,0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
        .mobile-menu.open { display: flex; }
        .mobile-menu .nav-link { font-size: 22px; color: #fff; font-weight: 600; }
        .mobile-close { position: absolute; top: 20px; right: 24px; background: none; border: none; cursor: pointer; color: #fff; }

        @media (max-width: 1024px) {
            .hero-inner { grid-template-columns: 1fr; gap: 60px; }
            .hero-visual { display: none; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .services-inner { grid-template-columns: 1fr; }
            .services-visual { display: none; }
            .security-inner { grid-template-columns: 1fr; }
            .security-visual { display: none; }
            .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
            .testimonials-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
            .about-inner { grid-template-columns: 1fr; }
            .about-image-secondary { display: none; }
            .team-grid { grid-template-columns: repeat(2, 1fr); }
            .contact-inner { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-actions { display: none; }
            .mobile-menu-btn { display: block; }
            .features-grid { grid-template-columns: 1fr; }
            .security-items { grid-template-columns: 1fr; }
            .cta-box { padding: 48px 24px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
            .hero-stats { grid-template-columns: 1fr; }
            .team-grid { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
            .contact-form-card { padding: 28px 20px; }
            .about-image-main img { height: 300px; }
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
        .count-up { transition: all 1s ease; }
    </style>
</head>
<body>

<div class="bg-grid"></div>
<div class="bg-orb bg-orb-1"></div>
<div class="bg-orb bg-orb-2"></div>
<div class="bg-orb bg-orb-3"></div>

<div class="mobile-menu" id="mobileMenu">
    <button class="mobile-close" onclick="closeMobileMenu()">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
    <a href="#features" class="nav-link" onclick="closeMobileMenu()">Features</a>
    <a href="#services" class="nav-link" onclick="closeMobileMenu()">Services</a>
    <a href="#security" class="nav-link" onclick="closeMobileMenu()">Security</a>
    <a href="#plans" class="nav-link" onclick="closeMobileMenu()">Plans</a>
    <a href="#about" class="nav-link" onclick="closeMobileMenu()">About</a>
    <a href="#team" class="nav-link" onclick="closeMobileMenu()">Team</a>
    <a href="#contact" class="nav-link" onclick="closeMobileMenu()">Contact</a>
    <a href="register.php" class="btn btn-primary btn-lg" style="margin-top:8px;">Open Account</a>
    <a href="login.php" class="btn btn-outline" style="min-width:200px;">Sign In</a>
</div>

<nav class="navbar" id="navbar">
    <div class="nav-inner">
        <a href="login.php" class="nav-logo">
            <div class="login-logo">
                <img style="width:212px; height:55px;" src="assets/images/logo.png" alt="<?php echo SITE_NAME; ?>">
            </div>
        </a>
       
        <div class="nav-links">
            <a href="#features" class="nav-link">Features</a>
            <a href="#services" class="nav-link">Services</a>
            <a href="#security" class="nav-link">Security</a>
            <a href="#plans" class="nav-link">Plans</a>
            <a href="#about" class="nav-link">About</a>
            <a href="#team" class="nav-link">Team</a>
            <a href="#contact" class="nav-link">Contact</a>
        </div>
        <div class="nav-actions">
            <a href="login.php" class="nav-login">Sign In</a>
            <a href="register.php" class="btn btn-primary nav-cta">Open Account</a>
        </div>
        <button class="mobile-menu-btn" onclick="openMobileMenu()">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
    </div>
</nav>

<!-- =============================================
     HERO SECTION
     ============================================= -->
<section class="hero">
    <div class="container">
        <div class="hero-inner">
            <div class="hero-content">
                <div class="hero-eyebrow">
                    <div class="hero-divider"></div>
                    <span class="hero-eyebrow-text">Banking Without Boundaries</span>
                </div>

                <h1 class="hero-title reveal">
                    Your Money.<br>
                    <span class="highlight">Your Rules.</span><br>
                    Your Bank.
                </h1>

                <p class="hero-sub reveal reveal-delay-1">
                    <?php echo SITE_NAME; ?> delivers next-generation digital banking — instant transfers, smart investments, and bank-grade security all in one powerful platform.
                </p>

                <div class="hero-ctas reveal reveal-delay-2">
                    <a href="register.php" class="btn btn-primary btn-lg">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                        Open Free Account
                    </a>
                    <a href="#features" class="btn btn-outline btn-lg">See What We Offer</a>
                </div>

                <div class="hero-stats reveal reveal-delay-3">
                    <div class="hero-stat">
                        <div class="hero-stat-value"><span class="count-up" data-target="250">0</span>K<span>+</span></div>
                        <div class="hero-stat-label">Active customers</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-value"><span>$</span><span class="count-up" data-target="4">0</span>B<span>+</span></div>
                        <div class="hero-stat-label">Assets managed</div>
                    </div>
                    <div class="hero-stat">
                        <div class="hero-stat-value"><span class="count-up" data-target="99">0</span>.<span>9%</span></div>
                        <div class="hero-stat-label">Uptime guaranteed</div>
                    </div>
                </div>
            </div>

            <!-- Hero Visual -->
            <div class="hero-visual reveal reveal-delay-2">
                <div class="hero-image-wrapper">
                    <img src="https://img.freepik.com/premium-photo/woman-using-her-mobile-banking-app-her-phone-while-relaxing-cafe_41761688.htm" alt="Professional woman using mobile banking" onerror="this.src='https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800'">
                    <div class="hero-image-overlay"></div>
                    <div class="hero-image-badge">
                        <div class="hero-image-badge-icon">
                            <img src="assets/images/logo.png" alt="<?php echo SITE_NAME; ?> Logo">
                        </div>
                        <div class="hero-image-badge-text">
                            <h4><?php echo SITE_NAME; ?></h4>
                            <p>Banking Without Boundaries</p>
                        </div>
                    </div>
                </div>

                <div class="float-widget widget-1">
                    <div class="widget-icon widget-icon-green">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div class="widget-label">Total Balance</div>
                    <div class="widget-value">$24,891.50</div>
                    <div class="widget-change up">
                        <span class="widget-dot" style="background:#10B981;"></span>+2.4% this month
                    </div>
                </div>

                <div class="float-widget widget-2">
                    <div class="widget-label">Last Transfer</div>
                    <div class="widget-value" style="font-size:16px; color: #10B981;">+$3,200.00</div>
                    <div style="font-size:11px; color: var(--text-dim); margin-top: 4px;">Received &bull; Just now</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Trust Bar -->
<div class="trust-bar">
    <div class="container">
        <div class="trust-bar-inner">
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                <span>FDIC Insured</span>
            </div>
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                <span>256-bit SSL Encryption</span>
            </div>
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                <span>PCI DSS Compliant</span>
            </div>
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span>24/7 Support</span>
            </div>
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/></svg>
                <span>Regulated Institution</span>
            </div>
            <div class="trust-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span>Global Coverage</span>
            </div>
        </div>
    </div>
</div>

<!-- =============================================
     FEATURES SECTION
     ============================================= -->
<section class="features" id="features">
    <div class="container">
        <div class="features-header">
            <div class="section-tag">Everything You Need</div>
            <h2 class="section-title reveal">Built for modern banking.<br><span class="gradient-text">Designed for real life.</span></h2>
            <p class="section-sub reveal reveal-delay-1" style="margin: 16px auto 0;">From instant transfers to intelligent investments, we have packed everything into one seamless platform so you can focus on what matters most.</p>
        </div>

        <div class="features-grid">
            <div class="feature-card card-glass reveal">
                <div class="feature-icon feature-icon-red">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-red"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
                <h3 class="feature-title">Instant Transfers</h3>
                <p class="feature-desc">Send money locally or internationally in seconds. No delays, no waiting — your funds move at the speed of your life.</p>
            </div>
            <div class="feature-card card-glass reveal reveal-delay-1">
                <div class="feature-icon feature-icon-gold">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-gold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <h3 class="feature-title">Smart Investments</h3>
                <p class="feature-desc">Grow your wealth with competitive investment plans ranging from 5% to 18% APR. From starter to premium tiers.</p>
            </div>
            <div class="feature-card card-glass reveal reveal-delay-2">
                <div class="feature-icon feature-icon-blue">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-blue"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                </div>
                <h3 class="feature-title">Virtual & Physical Cards</h3>
                <p class="feature-desc">Manage Visa and Mastercard cards from your dashboard. Freeze, unfreeze, and set limits instantly.</p>
            </div>
            <div class="feature-card card-glass reveal">
                <div class="feature-icon feature-icon-green">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-green"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                </div>
                <h3 class="feature-title">Bank-Grade Security</h3>
                <p class="feature-desc">Two-factor authentication, OTP login verification, and real-time fraud monitoring protect every transaction.</p>
            </div>
            <div class="feature-card card-glass reveal reveal-delay-1">
                <div class="feature-icon feature-icon-purple">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-purple"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                </div>
                <h3 class="feature-title">Financial Analytics</h3>
                <p class="feature-desc">Track spending patterns, income trends, and financial health metrics with intuitive dashboards and real-time charts.</p>
            </div>
            <div class="feature-card card-glass reveal reveal-delay-2">
                <div class="feature-icon feature-icon-pink">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="icon-pink"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"/></svg>
                </div>
                <h3 class="feature-title">Crypto Deposits</h3>
                <p class="feature-desc">Fund your account with Bitcoin, Ethereum, and other major cryptocurrencies. Seamless conversion and instant crediting.</p>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     STATS BANNER
     ============================================= -->
<div class="stats-banner">
    <div class="container">
        <div class="stats-grid">
            <div class="reveal">
                <div class="stat-number"><span class="count-up" data-target="250">0</span>K<span>+</span></div>
                <div class="stat-divider"></div>
                <div class="stat-label">Active Customers</div>
            </div>
            <div class="reveal reveal-delay-1">
                <div class="stat-number"><span>$</span><span class="count-up" data-target="4">0</span><span>B+</span></div>
                <div class="stat-divider"></div>
                <div class="stat-label">Total Deposits Managed</div>
            </div>
            <div class="reveal reveal-delay-2">
                <div class="stat-number"><span class="count-up" data-target="50">0</span><span>+</span></div>
                <div class="stat-divider"></div>
                <div class="stat-label">Countries Supported</div>
            </div>
            <div class="reveal reveal-delay-3">
                <div class="stat-number"><span class="count-up" data-target="2">0</span>M<span>+</span></div>
                <div class="stat-divider"></div>
                <div class="stat-label">Transactions Processed</div>
            </div>
        </div>
    </div>
</div>

<!-- =============================================
     SERVICES SECTION
     ============================================= -->
<section class="services" id="services">
    <div class="container">
        <div class="services-inner">
            <div>
                <div class="section-tag">Our Services</div>
                <h2 class="section-title reveal">Everything you need.<br><span class="gradient-text">Nothing you don't.</span></h2>
                <p class="section-sub reveal reveal-delay-1">A complete financial ecosystem designed to simplify your money, grow your wealth, and protect your assets.</p>

                <div class="services-list">
                    <div class="service-item active reveal reveal-delay-1">
                        <div class="service-item-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
                        </div>
                        <div>
                            <div class="service-item-title">Wire Transfers</div>
                            <div class="service-item-desc">Local and international wire transfers with SWIFT/IBAN support. Competitive fees, real-time tracking.</div>
                        </div>
                    </div>
                    <div class="service-item reveal reveal-delay-2">
                        <div class="service-item-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                        </div>
                        <div>
                            <div class="service-item-title">Loans & Credit</div>
                            <div class="service-item-desc">Personal and business loans at competitive rates. Quick approval, flexible repayment terms.</div>
                        </div>
                    </div>
                    <div class="service-item reveal reveal-delay-3">
                        <div class="service-item-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <div>
                            <div class="service-item-title">Investment Portfolios</div>
                            <div class="service-item-desc">Put your money to work with our tiered investment plans. Earn up to 18% APR with monthly payouts.</div>
                        </div>
                    </div>
                    <div class="service-item reveal reveal-delay-4">
                        <div class="service-item-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <div>
                            <div class="service-item-title">KYC Verification</div>
                            <div class="service-item-desc">Fast, digital identity verification. Submit your documents once and unlock full banking privileges.</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="services-visual">
                <div class="services-image-wrapper">
                    <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=800" alt="Professional banking technology" onerror="this.src='https://cdn.dribbble.com/users/1615584/screenshots/15467528/media/0b6b6e0b6b6e0b6b6e0b6b6e0b6b6e0b.png'">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     SECURITY SECTION
     ============================================= -->
<section class="security" id="security">
    <div class="container">
        <div class="security-inner">
            <div class="security-visual reveal">
                <div class="security-image-wrapper">
                    <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=800" alt="Digital security shield" onerror="this.src='https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800'">
                    <div class="security-image-overlay"></div>
                </div>
                <div class="security-badge sec-badge-1">
                    <div class="sec-badge-dot"></div>
                    <span>All Systems Secure</span>
                </div>
                <div class="security-badge sec-badge-2">
                    <div class="sec-badge-dot"></div>
                    <span>Real-Time Monitoring</span>
                </div>
            </div>

            <div>
                <div class="section-tag">Security First</div>
                <h2 class="section-title reveal">Your security is our<br><span class="gradient-text">top priority.</span></h2>
                <p class="section-sub reveal reveal-delay-1">We employ military-grade encryption and multi-layered security protocols to ensure your money and data are always protected.</p>

                <div class="security-items">
                    <div class="security-item reveal">
                        <div class="security-item-icon">&#128272;</div>
                        <div class="security-item-title">256-bit Encryption</div>
                        <div class="security-item-desc">All data transmitted and stored uses bank-grade AES-256 encryption.</div>
                    </div>
                    <div class="security-item reveal reveal-delay-1">
                        <div class="security-item-icon">&#128241;</div>
                        <div class="security-item-title">OTP Verification</div>
                        <div class="security-item-desc">One-time passcodes for login and transactions. Every action verified.</div>
                    </div>
                    <div class="security-item reveal reveal-delay-2">
                        <div class="security-item-icon">&#128373;</div>
                        <div class="security-item-title">Fraud Detection</div>
                        <div class="security-item-desc">AI-powered anomaly detection monitors every transaction 24/7.</div>
                    </div>
                    <div class="security-item reveal reveal-delay-3">
                        <div class="security-item-icon">&#128274;</div>
                        <div class="security-item-title">Account Lockout</div>
                        <div class="security-item-desc">Automatic account protection after repeated failed login attempts.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     PLANS SECTION
     ============================================= -->
<section class="plans" id="plans">
    <div class="container">
        <div class="plans-header">
            <div class="section-tag">Account Types</div>
            <h2 class="section-title reveal">Simple. Transparent.<br><span class="gradient-text">No surprises.</span></h2>
            <p class="section-sub reveal reveal-delay-1" style="margin: 16px auto 0;">Choose the account that fits your financial goals. Upgrade anytime as your needs grow.</p>
        </div>

        <div class="plans-grid">
            <!-- Basic -->
            <div class="plan-card card-glass reveal">
                <div class="plan-name">Savings</div>
                <div class="plan-price"><sup>$</sup>0</div>
                <div class="plan-period">/ month — always free</div>
                <div class="plan-divider"></div>
                <ul class="plan-features">
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Savings account</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Local transfers</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Virtual debit card</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Basic support</li>
                    <li class="plan-feature"><div class="plan-check no"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg></div><span style="color:var(--text-dim)">International transfers</span></li>
                    <li class="plan-feature"><div class="plan-check no"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg></div><span style="color:var(--text-dim)">Investment plans</span></li>
                </ul>
                <div class="plan-cta">
                    <a href="register.php?type=savings" class="btn btn-outline">Get Started Free</a>
                </div>
            </div>

            <!-- Featured -->
            <div class="plan-card featured reveal reveal-delay-1">
                <div class="plan-badge">Most Popular</div>
                <div class="plan-name">Checking</div>
                <div class="plan-price" style="color: var(--red-bright);"><sup>$</sup>9</div>
                <div class="plan-period">/ month, billed annually</div>
                <div class="plan-divider"></div>
                <ul class="plan-features">
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Everything in Savings</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>International transfers</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Physical Visa card</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Investment access</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Priority support</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Crypto deposits</li>
                </ul>
                <div class="plan-cta">
                    <a href="register.php?type=checking" class="btn btn-primary">Open Account</a>
                </div>
            </div>

            <!-- Business -->
            <div class="plan-card card-glass reveal reveal-delay-2">
                <div class="plan-name">Business</div>
                <div class="plan-price"><sup>$</sup>29</div>
                <div class="plan-period">/ month, billed annually</div>
                <div class="plan-divider"></div>
                <ul class="plan-features">
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Everything in Checking</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Multi-user accounts</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Bulk transfers</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Dedicated manager</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>API access</li>
                    <li class="plan-feature"><div class="plan-check yes"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg></div>Premium analytics</li>
                </ul>
                <div class="plan-cta">
                    <a href="register.php?type=business" class="btn btn-outline">Open Business Account</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     TESTIMONIALS SECTION
     ============================================= -->
<section class="testimonials" id="testimonials">
    <div class="container">
        <div class="testimonials-header">
            <div class="section-tag">Customer Stories</div>
            <h2 class="section-title reveal">Trusted by people<br><span class="gradient-text">all over the world.</span></h2>
        </div>

        <div class="testimonials-grid">
            <div class="testimonial-card card-glass reveal">
                <div class="testimonial-stars">
                    <span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span>
                </div>
                <p class="testimonial-text">"Flexi Access completely changed how I manage my money. International transfers that used to take days now happen in minutes. The investment returns are also phenomenal — I have grown my savings by 22% this year."</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar" style="background:linear-gradient(135deg,#DC2626,#7c2020);">DK</div>
                    <div>
                        <div class="testimonial-name">David Kowalski</div>
                        <div class="testimonial-role">Small Business Owner, New York</div>
                    </div>
                </div>
            </div>

            <div class="testimonial-card card-glass reveal reveal-delay-1">
                <div class="testimonial-stars">
                    <span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span>
                </div>
                <p class="testimonial-text">"As an expat, I needed a bank that could handle multiple currencies without ridiculous fees. Flexi Access delivers. The dashboard is beautiful, the support team responds within minutes, and I feel completely secure."</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar" style="background:linear-gradient(135deg,#7c3aed,#4c1d95);">AN</div>
                    <div>
                        <div class="testimonial-name">Amara Nkosi</div>
                        <div class="testimonial-role">Financial Consultant, London</div>
                    </div>
                </div>
            </div>

            <div class="testimonial-card card-glass reveal reveal-delay-2">
                <div class="testimonial-stars">
                    <span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span><span class="testimonial-star">&#9733;</span>
                </div>
                <p class="testimonial-text">"The crypto deposit feature is a game-changer. I fund my account in Bitcoin and the conversion is instant. The investment plans are transparent and the returns beat every other bank I have tried."</p>
                <div class="testimonial-author">
                    <div class="testimonial-avatar" style="background:linear-gradient(135deg,#059669,#064e3b);">LT</div>
                    <div>
                        <div class="testimonial-name">Lucas Tanaka</div>
                        <div class="testimonial-role">Tech Entrepreneur, Singapore</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     ABOUT / WHY US SECTION
     ============================================= -->
<section class="about" id="about">
    <div class="container">
        <div class="about-inner">
            <div class="about-images">
                <div class="about-image-main">
                    <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800" alt="Modern bank building" onerror="this.src='https://images.unsplash.com/photo-1560179707-f14e90ef3623?w=800'">
                </div>
                <div class="about-image-secondary">
                    <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=400" alt="Professional team meeting" onerror="this.src='https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400'">
                </div>
            </div>

            <div>
                <div class="section-tag">About Us</div>
                <h2 class="section-title reveal">Redefining banking<br><span class="gradient-text">for the modern era.</span></h2>
                <p class="section-sub reveal reveal-delay-1">Founded in 2018, <?php echo SITE_NAME; ?> was built on a simple belief: banking should be effortless, transparent, and accessible to everyone. We combine cutting-edge technology with human-centered design to deliver a financial experience that puts you in control.</p>

                <div class="about-stats-row">
                    <div class="about-stat-box reveal reveal-delay-1">
                        <h4>6+</h4>
                        <p>Years of Excellence</p>
                    </div>
                    <div class="about-stat-box reveal reveal-delay-2">
                        <h4>250K+</h4>
                        <p>Happy Customers</p>
                    </div>
                    <div class="about-stat-box reveal reveal-delay-1">
                        <h4>50+</h4>
                        <p>Countries Served</p>
                    </div>
                    <div class="about-stat-box reveal reveal-delay-2">
                        <h4>99.9%</h4>
                        <p>Uptime Guarantee</p>
                    </div>
                </div>

                <p class="section-sub reveal reveal-delay-3" style="margin-top: 32px;">Our team of 200+ professionals across 12 global offices works tirelessly to innovate, secure, and improve your banking experience every single day.</p>

                <div class="hero-ctas reveal reveal-delay-3" style="margin-top: 32px;">
                    <a href="#contact" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        Contact Us
                    </a>
                    <a href="#team" class="btn btn-outline">Meet Our Team</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     TEAM SECTION
     ============================================= -->
<section class="team" id="team">
    <div class="container">
        <div class="team-header">
            <div class="section-tag">Leadership</div>
            <h2 class="section-title reveal">Meet the people<br><span class="gradient-text">behind the vision.</span></h2>
            <p class="section-sub reveal reveal-delay-1" style="margin: 16px auto 0;">Our leadership team brings decades of experience from the world's top financial institutions and technology companies.</p>
        </div>

        <div class="team-grid">
            <div class="team-card reveal">
                <div class="team-card-image">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400" alt="James Mitchell - CEO" onerror="this.src='https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400'">
                </div>
                <div class="team-card-body">
                    <div class="team-card-name">James Mitchell</div>
                    <div class="team-card-role">Chief Executive Officer</div>
                    <div class="team-card-bio">Former VP at Goldman Sachs with 15+ years in investment banking. Drives our strategic vision and growth.</div>
                    <div class="team-social">
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="team-card reveal reveal-delay-1">
                <div class="team-card-image">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400" alt="Sarah Chen - CTO" onerror="this.src='https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400'">
                </div>
                <div class="team-card-body">
                    <div class="team-card-name">Sarah Chen</div>
                    <div class="team-card-role">Chief Technology Officer</div>
                    <div class="team-card-bio">Ex-Google engineer who led payment infrastructure teams. Architect of our secure, scalable platform.</div>
                    <div class="team-social">
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="team-card reveal reveal-delay-2">
                <div class="team-card-image">
                    <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400" alt="Marcus Johnson - CFO" onerror="this.src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400'">
                </div>
                <div class="team-card-body">
                    <div class="team-card-name">Marcus Johnson</div>
                    <div class="team-card-role">Chief Financial Officer</div>
                    <div class="team-card-bio">Former CFO at JP Morgan Digital. Expert in regulatory compliance and financial risk management.</div>
                    <div class="team-social">
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="team-card reveal reveal-delay-3">
                <div class="team-card-image">
                    <img src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=400" alt="Elena Rodriguez - CISO" onerror="this.src='https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400'">
                </div>
                <div class="team-card-body">
                    <div class="team-card-name">Elena Rodriguez</div>
                    <div class="team-card-role">Chief Information Security Officer</div>
                    <div class="team-card-bio">Former NSA cybersecurity analyst. Leads our defense against fraud, breaches, and cyber threats.</div>
                    <div class="team-social">
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        <a href="#" class="team-social-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- =============================================
     CONTACT SECTION
     ============================================= -->
<section class="contact-section" id="contact">
    <div class="container">
        <div class="contact-inner">

            <div class="contact-info">
                <div class="section-tag">Get In Touch</div>
                <h2 class="section-title reveal">We're here<br><span class="gradient-text">whenever you need us.</span></h2>
                <p class="section-sub reveal reveal-delay-1">Our team of banking specialists is available around the clock to assist with any question, concern, or request.</p>

                <div class="contact-info-items">
                    <div class="contact-info-item reveal reveal-delay-1">
                        <div class="contact-info-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        </div>
                        <div>
                            <div class="contact-info-title">Email Support</div>
                            <div class="contact-info-value">
                                <a href="mailto:support@flexiaccess.site">support@flexiaccess.site</a><br>
                                We reply within 24 hours on business days.
                            </div>
                        </div>
                    </div>
                    <div class="contact-info-item reveal reveal-delay-2">
                        <div class="contact-info-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        </div>
                        <div>
                            <div class="contact-info-title">Phone & Live Chat</div>
                            <div class="contact-info-value">
                                +1 (800) FLEXI-00<br>
                                Available 24/7 for urgent account issues.
                            </div>
                        </div>
                    </div>
                    <div class="contact-info-item reveal reveal-delay-3">
                        <div class="contact-info-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <div>
                            <div class="contact-info-title">Headquarters</div>
                            <div class="contact-info-value">
                                <?php echo SITE_NAME; ?>, Financial District<br>
                                New York, NY 10005, United States
                            </div>
                        </div>
                    </div>
                </div>

                <div class="contact-hours reveal">
                    <div class="contact-hours-title">Support Hours</div>
                    <div class="contact-hours-row">
                        <span class="contact-hours-day">Monday - Friday</span>
                        <span class="contact-hours-time">8:00 AM - 10:00 PM EST</span>
                    </div>
                    <div class="contact-hours-row">
                        <span class="contact-hours-day">Saturday</span>
                        <span class="contact-hours-time">9:00 AM - 6:00 PM EST</span>
                    </div>
                    <div class="contact-hours-row">
                        <span class="contact-hours-day">Sunday</span>
                        <span class="contact-hours-time">10:00 AM - 4:00 PM EST</span>
                    </div>
                    <div class="contact-hours-row">
                        <span class="contact-hours-day">Emergency Line</span>
                        <span class="contact-hours-time" style="color:#10B981;">24 / 7</span>
                    </div>
                </div>
            </div>

            <div class="reveal reveal-delay-1">
                <div class="contact-form-card">
                    <div class="contact-form-title">Send Us a Message</div>
                    <div class="contact-form-sub">Fill out the form and our team will get back to you within 24 hours. All fields marked <span style="color:var(--red-bright);">*</span> are required.</div>

                    <div class="form-alert" id="contactAlert">
                        <svg id="contactAlertIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span id="contactAlertText"></span>
                    </div>

                    <?php if (!empty($contactResult['message']) && empty($_SERVER['HTTP_X_REQUESTED_WITH'])): ?>
                    <div class="form-alert show <?php echo $contactResult['success'] ? 'success' : 'error'; ?>">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <?php if ($contactResult['success']): ?>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            <?php else: ?>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            <?php endif; ?>
                        </svg>
                        <span><?php echo htmlspecialchars($contactResult['message'], ENT_QUOTES, 'UTF-8'); ?></span>
                    </div>
                    <?php endif; ?>

                    <form id="contactForm" method="POST" action="index.php#contact" novalidate>
                        <input type="hidden" name="contact_form" value="1">

                        <div class="form-grid">
                            <div class="form-group">
                                <label class="form-label" for="contact_name">Full Name <span>*</span></label>
                                <input type="text" id="contact_name" name="contact_name" class="form-control"
                                       placeholder="Alex Morgan" required
                                       value="<?php echo htmlspecialchars($_POST['contact_name'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="contact_email">Email Address <span>*</span></label>
                                <input type="email" id="contact_email" name="contact_email" class="form-control"
                                       placeholder="alex@example.com" required
                                       value="<?php echo htmlspecialchars($_POST['contact_email'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="contact_phone">Phone Number</label>
                                <input type="tel" id="contact_phone" name="contact_phone" class="form-control"
                                       placeholder="+1 (555) 000-0000"
                                       value="<?php echo htmlspecialchars($_POST['contact_phone'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="contact_subject">Subject <span>*</span></label>
                                <select id="contact_subject" name="contact_subject" class="form-control" required>
                                    <option value="" disabled selected>Select a topic</option>
                                    <option value="Account Opening">Account Opening</option>
                                    <option value="Transfer Inquiry">Transfer Inquiry</option>
                                    <option value="Card Services">Card Services</option>
                                    <option value="Loan Application">Loan Application</option>
                                    <option value="Investment Plans">Investment Plans</option>
                                    <option value="KYC Verification">KYC Verification</option>
                                    <option value="Security Concern">Security Concern</option>
                                    <option value="Technical Support">Technical Support</option>
                                    <option value="General Inquiry">General Inquiry</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="form-group full">
                                <label class="form-label" for="contact_message">Message <span>*</span></label>
                                <textarea id="contact_message" name="contact_message" class="form-control"
                                          placeholder="Tell us how we can help you..." required><?php echo htmlspecialchars($_POST['contact_message'] ?? '', ENT_QUOTES, 'UTF-8'); ?></textarea>
                            </div>
                        </div>

                        <div class="form-submit">
                            <button type="submit" class="btn btn-primary btn-lg" id="contactSubmitBtn">
                                <svg id="contactBtnIcon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                                <span id="contactBtnText">Send Message</span>
                            </button>
                        </div>

                        <p style="font-size:12px;color:var(--text-dim);margin-top:16px;text-align:center;">
                            By submitting this form you agree to our
                            <a href="#" style="color:var(--red-bright);">Privacy Policy</a>.
                            We never share your information.
                        </p>
                    </form>
                </div>
            </div>

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

<!-- =============================================
     CTA SECTION
     ============================================= -->
<section class="cta-section" id="cta">
    <div class="container">
        <div class="cta-box">
            <div class="badge" style="margin-bottom: 32px; position:relative; z-index:1;">
                <span class="badge-dot"></span>
                Accepting New Members
            </div>
            <h2 class="cta-title reveal" style="position:relative; z-index:1;">
                Start banking<br><span class="gradient-text">smarter today.</span>
            </h2>
            <p class="cta-sub reveal reveal-delay-1" style="position:relative; z-index:1;">
                Join 250,000+ customers who trust <?php echo SITE_NAME; ?> with their financial future. Open your account in under 5 minutes.
            </p>
            <div class="cta-actions reveal reveal-delay-2" style="position:relative; z-index:1;">
                <a href="register.php" class="btn btn-primary btn-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                    Open Free Account
                </a>
                <a href="login.php" class="btn btn-outline btn-lg">Sign In to Dashboard</a>
            </div>
            <p class="cta-footnote" style="position:relative; z-index:1;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                No credit check required &bull; FDIC insured &bull; Cancel anytime
            </p>
        </div>
    </div>
</section>

<!-- =============================================
     FOOTER
     ============================================= -->
<footer class="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-brand">
                <div class="footer-logo">
                    <div class="login-logo">
                        <img src="assets/images/logo.png" alt="<?php echo SITE_NAME; ?>" width="212" height="75">
                    </div>
                </div>
                <p class="footer-desc">Banking Without Boundaries. Empowering individuals and businesses with modern, secure, and intelligent financial solutions.</p>
                <div class="footer-badges">
                    <div class="footer-badge">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        FDIC Insured
                    </div>
                    <div class="footer-badge">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        SSL Secured
                    </div>
                </div>
            </div>

            <div>
                <div class="footer-col-title">Banking</div>
                <ul class="footer-links">
                    <li><a href="register.php" class="footer-link">Open Account</a></li>
                    <li><a href="login.php" class="footer-link">Sign In</a></li>
                    <li><a href="#plans" class="footer-link">Account Types</a></li>
                    <li><a href="#features" class="footer-link">Features</a></li>
                    <li><a href="#services" class="footer-link">Services</a></li>
                </ul>
            </div>

            <div>
                <div class="footer-col-title">Company</div>
                <ul class="footer-links">
                    <li><span class="footer-link">About Us</span></li>
                    <li><span class="footer-link">Careers</span></li>
                    <li><span class="footer-link">Press</span></li>
                    <li><span class="footer-link">Blog</span></li>
                    <li><span class="footer-link">Investors</span></li>
                </ul>
            </div>

            <div>
                <div class="footer-col-title">Support</div>
                <ul class="footer-links">
                    <li><span class="footer-link">Help Center</span></li>
                    <li><span class="footer-link">Contact Us</span></li>
                    <li><span class="footer-link">Privacy Policy</span></li>
                    <li><span class="footer-link">Terms of Service</span></li>
                    <li><span class="footer-link">Cookie Policy</span></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="footer-copy">
                &copy; 2026 <span><?php echo SITE_NAME; ?></span>. All rights reserved. Member FDIC.
            </div>
            <div class="footer-social">
                <div class="social-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M24 4.56v14.91A4.536 4.536 0 0119.44 24H4.56A4.536 4.536 0 010 19.47V4.56A4.536 4.536 0 014.56 0h14.88A4.536 4.536 0 0124 4.56zm-7.2 0h-2.4c-.912 0-1.2.384-1.2 1.056V7.2H16.8l-.432 2.88h-2.568V18h-3V10.08H8.4V7.2h2.4V5.376C10.8 3.024 12.24 1.68 14.352 1.68c.984 0 2.016.096 2.448.144V4.56z"/></svg>
                </div>
                <div class="social-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"/></svg>
                </div>
                <div class="social-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
// =============================================
// NAVBAR SCROLL
// =============================================
window.addEventListener('scroll', () => {
    const navbar = document.getElementById('navbar');
    if (window.scrollY > 30) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// =============================================
// MOBILE MENU
// =============================================
function openMobileMenu() {
    document.getElementById('mobileMenu').classList.add('open');
    document.body.style.overflow = 'hidden';
}
function closeMobileMenu() {
    document.getElementById('mobileMenu').classList.remove('open');
    document.body.style.overflow = '';
}

// =============================================
// SCROLL REVEAL
// =============================================
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Trigger hero reveals immediately
document.querySelectorAll('.hero .reveal').forEach(el => {
    setTimeout(() => el.classList.add('visible'), 100);
});

// =============================================
// COUNT-UP ANIMATION
// =============================================
function animateCount(el) {
    const target = parseInt(el.dataset.target);
    const duration = 2000;
    const start = performance.now();

    function update(timestamp) {
        const elapsed = timestamp - start;
        const progress = Math.min(elapsed / duration, 1);
        const eased = 1 - Math.pow(1 - progress, 3);
        el.textContent = Math.round(eased * target);
        if (progress < 1) requestAnimationFrame(update);
    }
    requestAnimationFrame(update);
}

const countObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.querySelectorAll('.count-up').forEach(el => animateCount(el));
            countObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.3 });

document.querySelectorAll('.hero-stats, .stats-grid').forEach(el => countObserver.observe(el));

// =============================================
// CONTACT FORM - AJAX SUBMISSION
// =============================================
(function () {
    const form    = document.getElementById('contactForm');
    const btn     = document.getElementById('contactSubmitBtn');
    const btnText = document.getElementById('contactBtnText');
    const btnIcon = document.getElementById('contactBtnIcon');
    const alert   = document.getElementById('contactAlert');
    const alertTx = document.getElementById('contactAlertText');
    const alertIc = document.getElementById('contactAlertIcon');

    if (!form) return;

    const spinnerSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation:spin .8s linear infinite;"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>';
    const sendSVG    = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>';

    if (!document.querySelector('#spin-keyframes')) {
        const s = document.createElement('style');
        s.id = 'spin-keyframes';
        s.textContent = '@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}';
        document.head.appendChild(s);
    }

    function showAlert(success, message) {
        alert.className = 'form-alert show ' + (success ? 'success' : 'error');
        alertTx.textContent = message;
        alertIc.innerHTML = success
            ? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
            : '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>';
        alert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function setLoading(loading) {
        if (loading) {
            btn.classList.add('btn-loading');
            btnIcon.outerHTML = spinnerSVG;
            btnText.textContent = 'Sending...';
        } else {
            btn.classList.remove('btn-loading');
            const iconEl = document.getElementById('contactBtnIcon');
            if (iconEl) iconEl.outerHTML = sendSVG;
            btnText.textContent = 'Send Message';
        }
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        alert.className = 'form-alert';

        const name    = form.contact_name.value.trim();
        const email   = form.contact_email.value.trim();
        const subject = form.contact_subject.value;
        const message = form.contact_message.value.trim();

        if (!name || !email || !subject || !message) {
            showAlert(false, 'Please fill in all required fields.');
            return;
        }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showAlert(false, 'Please enter a valid email address.');
            return;
        }
        if (message.length < 10) {
            showAlert(false, 'Your message is too short. Please provide more detail.');
            return;
        }

        setLoading(true);

        try {
            const fd = new FormData(form);
            const res = await fetch('index.php', {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                body: fd
            });

            if (!res.ok) throw new Error('Server error ' + res.status);

            const data = await res.json();
            showAlert(data.success, data.message);

            if (data.success) {
                form.reset();
            }
        } catch (err) {
            showAlert(false, 'Something went wrong. Please try again or email us directly at support@flexiaccess.site');
            console.error(err);
        } finally {
            setLoading(false);
        }
    });
})();

// =============================================
// SMOOTH ANCHOR SCROLLING
// =============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
        const target = document.querySelector(anchor.getAttribute('href'));
        if (target) {
            e.preventDefault();
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});
</script>

<?php
// ── Tawk.to Live Chat ──
$tawkWidget = getSetting('tawk_to_widget');
if (!empty($tawkWidget)) {
    // If it's a full script tag, output it directly
    if (strpos($tawkWidget, '<script') !== false) {
        echo stripslashes($tawkWidget);
    } else {
        // Otherwise, assume it's just the widget ID/URL and build the script
        $widgetId = trim($tawkWidget);
        echo <<<HTML
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='{$widgetId}';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
HTML;
    }
}
?>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/66f75c544cbc4814f7e034cf/1i8r41aru';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</body>
</html>