<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Portal | Innovate. Differentiate. Grow.</title>
  <link rel="manifest" href="<?php echo e(asset('manifest.json')); ?>">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link href="<?php echo e(asset('css2?family=Inter:wght@400;500;600;700;800&display=swap')); ?>" rel="stylesheet">
  <script src="<?php echo e(asset('lucide@1.34.0/dist/umd/lucide.min.js')); ?>"></script>
  <style>
    :root {
      --cb-black: #000000;
      --cb-white: #ffffff;
      --cb-cyan: #00E5C4;
      --cb-pink: #FF3385;
      --cb-pink-dark: #E6005C;
      --cb-text: #111827;
      --cb-text-muted: #6B7280;
      --cb-border: #e5e7eb;
      --cb-bg: #f9fafb;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
    
    body { background-color: var(--cb-white); color: var(--cb-text); overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; -webkit-tap-highlight-color: transparent; }

    .bg-art { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--cb-white); pointer-events: none; }
    .orb-pink { position: absolute; bottom: -5vh; right: -10vw; width: 80vw; max-width: 600px; height: 80vw; max-height: 600px; background: var(--cb-pink); filter: blur(80px); -webkit-filter: blur(80px); opacity: 0.20; border-radius: 50%; animation: floatPink 15s ease-in-out infinite alternate; }
    .orb-cyan { position: absolute; top: 10vh; left: -10vw; width: 70vw; max-width: 500px; height: 70vw; max-height: 500px; background: var(--cb-cyan); filter: blur(80px); -webkit-filter: blur(80px); opacity: 0.15; border-radius: 50%; animation: floatCyan 20s ease-in-out infinite alternate-reverse; }
    
    @keyframes floatPink { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-5vw, -5vh, 0) scale(1.1); } }
    @keyframes floatCyan { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(5vw, 5vh, 0) scale(1.05); } }

    .nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; padding-top: max(20px, env(safe-area-inset-top)); z-index: 100; }
    .brand { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--cb-black); }
    .btn-menu-toggle { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); color: var(--cb-black); border: 1px solid var(--cb-border); padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
    .btn-menu-toggle:active { transform: scale(0.95); }

    .menu-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 999; display: flex; flex-direction: column; padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
    .menu-overlay.open { opacity: 1; pointer-events: auto; }
    .menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
    .menu-close-btn { background: #f3f4f6; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--cb-black); transition: transform 0.2s; }
    .menu-close-btn:active { transform: scale(0.9); }
    .menu-actions { display: flex; flex-direction: column; gap: 16px; }
    .menu-btn-primary { background: var(--cb-black); color: var(--cb-white); text-decoration: none; padding: 20px; border-radius: 16px; font-size: 18px; font-weight: 700; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
    .menu-btn-secondary { background: var(--cb-white); color: var(--cb-black); text-decoration: none; padding: 20px; border-radius: 16px; font-size: 18px; font-weight: 700; text-align: center; border: 2px solid var(--cb-black); }

    .hero-content { padding: 40px 24px 20px 24px; text-align: left; }
    .hero-title { font-size: clamp(48px, 15vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -2px; color: var(--cb-black); margin-bottom: 24px; }
    .hero-pitch { font-size: 17px; color: var(--cb-text-muted); line-height: 1.5; font-weight: 500; margin-bottom: 32px; max-width: 95%; }
    
    .hero-buttons-wrapper { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
    
    .btn-black-begin { background: var(--cb-black); color: var(--cb-white); text-decoration: none; padding: 18px 32px; border-radius: 30px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 8px 20px rgba(0,0,0,0.15); cursor: pointer; border: none; }
    .btn-black-begin:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

    .btn-pink-download { background: linear-gradient(135deg, var(--cb-pink-dark), var(--cb-pink)); color: var(--cb-white); text-decoration: none; padding: 18px 32px; border-radius: 30px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 8px 20px rgba(255, 51, 133, 0.3); cursor: pointer; border: none; }
    .btn-pink-download:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(255, 51, 133, 0.2); }

    .ios-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s; }
    .ios-modal-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--cb-white); border-radius: 24px 24px 0 0; z-index: 1001; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 32px 24px; padding-bottom: max(32px, env(safe-area-inset-bottom)); text-align: center; }
    .ios-modal-sheet.open { transform: translateY(0); }
    .ios-modal-overlay.open { display: block; opacity: 1; }
    
    .ios-modal-icon { width: 64px; height: 64px; background: #f3f4f6; border-radius: 16px; margin: 0 auto 20px auto; display: flex; align-items: center; justify-content: center; }
    .ios-modal-icon img { width: 40px; height: 40px; }
    .ios-modal-sheet h3 { font-size: 22px; font-weight: 800; color: var(--cb-black); margin-bottom: 12px; letter-spacing: -0.5px; }
    .ios-modal-sheet p { font-size: 16px; color: var(--cb-text-muted); line-height: 1.5; margin-bottom: 24px; }
    
    .ios-steps { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; text-align: left; margin-bottom: 24px; }
    .ios-step { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; font-weight: 600; color: var(--cb-text); }
    .ios-step:last-child { margin-bottom: 0; }
    .ios-step svg { color: var(--cb-pink); width: 24px; height: 24px; }
    
    .btn-got-it { background: var(--cb-black); color: var(--cb-white); border: none; width: 100%; padding: 16px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer; }

    .video-hero-wrapper { padding: 0 16px; margin-bottom: 60px; max-width: 800px; margin-left: auto; margin-right: auto; }
    .video-container { width: 100%; aspect-ratio: 1 / 1; border-radius: 40px 40px 20px 20px; overflow: hidden; background: var(--cb-bg); box-shadow: 0 20px 40px rgba(0,0,0,0.08); position: relative; }
    .video-container img { width: 100%; height: 100%; object-fit: cover; display: block; }

    @media (min-width: 1024px) {
      .nav-header { max-width: 1200px; margin: 0 auto; width: 100%; padding: 24px; }
      
      .desktop-hero { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 60px auto 100px auto; gap: 60px; padding: 0 24px; }
      .hero-content { flex: 1; padding: 0; margin: 0; }
      .video-hero-wrapper { flex: 1; padding: 0; margin: 0; max-width: none; }
      
      .hero-title { font-size: 72px; }
      .hero-pitch { font-size: 20px; }
    }

    .ticker-section { padding: 40px 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--cb-border); border-bottom: 1px solid var(--cb-border); overflow: hidden; display: flex; flex-direction: column; gap: 24px; width: 100vw; }
    .ticker-wrapper { display: flex; width: max-content; animation: scrollTicker 45s linear infinite; }
    .ticker-wrapper.reverse { animation: scrollTickerReverse 50s linear infinite; }
    .ticker-track { display: flex; flex-shrink: 0; align-items: center; gap: 60px; padding-right: 60px; }
    .ticker-item { font-size: 24px; font-weight: 800; color: #9CA3AF; letter-spacing: -1px; white-space: nowrap; flex-shrink: 0; opacity: 0.7; }

    @keyframes scrollTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes scrollTickerReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

    .stats-section { background: var(--cb-black); color: var(--cb-white); padding: 50px 24px; text-align: center; }
    .stats-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 800px; margin: 0 auto; }
    @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
    .stat-num { font-size: 52px; font-weight: 800; color: var(--cb-cyan); letter-spacing: -1.5px; margin-bottom: 4px; }
    .stat-label { font-size: 15px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; }

    .big-text-cta { padding: 80px 24px; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); }
    .big-text-cta h2 { font-size: 26px; font-weight: 500; line-height: 1.4; color: var(--cb-text-muted); letter-spacing: -0.5px; max-width: 800px; margin: 0 auto; }
    .big-text-cta strong { font-weight: 800; color: var(--cb-black); }

    .app-capabilities { padding: 20px 24px 60px 24px; max-width: 800px; margin: 0 auto; }
    .app-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
    @media (min-width: 768px) { .app-grid { grid-template-columns: 1fr 1fr; } }
    .app-card { background: var(--cb-white); border: 1px solid var(--cb-border); border-radius: 24px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; }
    .app-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
    .app-card-icon { width: 56px; height: 56px; background: #f3f4f6; color: var(--cb-black); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
    .app-card h3 { font-size: 20px; font-weight: 800; color: var(--cb-black); margin-bottom: 10px; letter-spacing: -0.5px;}
    .app-card p { font-size: 15px; color: var(--cb-text-muted); line-height: 1.6; font-weight: 500; }

    .partner-section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
    .partner-container { display: flex; flex-direction: column; gap: 40px; align-items: center; }
    @media (min-width: 768px) { .partner-container { flex-direction: row; gap: 60px; align-items: center; } .partner-image, .partner-text { flex: 1; width: 50%; } }
    .partner-image img { width: 100%; height: auto; border-radius: 30px; box-shadow: 0 24px 50px rgba(0,0,0,0.15); object-fit: cover; }
    .partner-subtitle { font-size: 16px; font-weight: 700; color: var(--cb-text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
    .partner-title { font-size: clamp(36px, 6vw, 48px); font-weight: 800; color: var(--cb-black); margin-bottom: 24px; letter-spacing: -1.5px; line-height: 1.1; }
    .partner-desc { font-size: 17px; line-height: 1.6; color: var(--cb-text-muted); font-weight: 500; }

    .testimonials-section { padding: 80px 0; background: var(--cb-bg); border-top: 1px solid var(--cb-border); overflow: hidden; }
    .testimonials-header { padding: 0 24px; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }
    .testimonials-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--cb-black); }

    .slider { display: flex; overflow-x: auto; gap: 20px; padding: 0 24px 40px 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .slider::-webkit-scrollbar { display: none; }

    .slide-card { 
      min-width: 320px; max-width: 340px; background: var(--cb-white); 
      border-radius: 16px; padding: 28px; 
      box-shadow: 0 4px 20px rgba(5, 16, 36, 0.04); 
      border: 1px solid var(--cb-border); 
      scroll-snap-align: center; display: flex; flex-direction: column; gap: 16px; 
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .slide-header { display: flex; justify-content: space-between; align-items: flex-start; }
    .slide-user-info { display: flex; align-items: center; gap: 14px; }
    .slide-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cb-border); }
    .slide-name-wrap { display: flex; flex-direction: column; gap: 2px; }
    .slide-name { font-size: 16px; font-weight: 700; color: var(--cb-black); letter-spacing: -0.3px; }
    .slide-verified { font-size: 11px; font-weight: 700; color: #10B981; display: flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
    .slide-stars { display: flex; color: #F59E0B; gap: 2px; margin-top: 4px; }
    .slide-stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
    .slide-quote { font-size: 15px; color: var(--cb-text-muted); line-height: 1.6; font-weight: 400; }

    .start-now-cta { padding: 100px 24px; background: linear-gradient(135deg, var(--cb-pink-dark), var(--cb-pink)); color: var(--cb-white); text-align: center; position: relative; overflow: hidden; }
    .start-now-content { max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
    .start-now-cta h2 { font-size: clamp(36px, 8vw, 48px); font-weight: 800; letter-spacing: -1.5px; margin-bottom: 16px; line-height: 1.1; }
    .start-now-cta p { font-size: 18px; font-weight: 500; margin-bottom: 40px; opacity: 0.95; line-height: 1.5; }
    
    .start-now-buttons-wrapper { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .btn-white-begin { background: var(--cb-white); color: var(--cb-black); text-decoration: none; padding: 20px 40px; border-radius: 40px; font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.25); transition: transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer;}
    .btn-white-begin:active { transform: scale(0.96); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

    .legal-footer { margin-top: auto; padding: 40px 24px; padding-bottom: max(32px, env(safe-area-bottom)); background: rgba(255,255,255,0.9); border-top: 1px solid #e5e7eb; backdrop-filter: blur(10px); }
    .legal-text { font-size: 10px; line-height: 1.6; color: #9ca3af; margin-bottom: 12px; text-align: justify; max-width: 1000px; margin-left: auto; margin-right: auto; }
    .legal-text:last-child { margin-bottom: 0; }
  </style>
</head>
<body>

  <div class="bg-art"><div class="orb-pink"></div><div class="orb-cyan"></div></div>

  <nav class="nav-header">
    <div class="brand"></div> 
    <div style="display: flex; gap: 8px; align-items: center;">
      <button class="btn-menu-toggle" onclick="toggleMenu()">
        Menu <i data-lucide="menu" style="width: 16px; height: 16px;"></i>
      </button>
    </div>
  </nav>

  <div id="mobileMenu" class="menu-overlay">
    <div class="menu-header">
      <div class="brand"></div>
      <button class="menu-close-btn" onclick="toggleMenu()">
        <i data-lucide="x" style="width: 20px; height: 20px;"></i>
      </button>
    </div>
    
    <div class="menu-actions">
      <?php if(auth()->guard()->check()): ?>
        <a href="/dashboard" class="menu-btn-primary">Dashboard</a>
        <form id="logout-form" action="<?php echo e(route('logout')); ?>" method="POST" style="display: none;"><?php echo csrf_field(); ?></form>
        <a href="#" class="menu-btn-secondary" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
      <?php else: ?>
        <a href="<?php echo e(route('login')); ?>" class="menu-btn-primary">Log In</a>
        <a href="<?php echo e(route('register')); ?>" class="menu-btn-secondary">Create Account</a>
      <?php endif; ?>
    </div>
  </div>

  <main>
    <div class="desktop-hero">
      <div class="hero-content">
        <h1 class="hero-title">Innovate.<br>Differentiate.<br>Grow.</h1>
        
        <p class="hero-pitch">
          Send, receive and manage your everyday virtual banking activity with effortless precision directly from your mobile device.
        </p>

        <div class="hero-buttons-wrapper">
          <?php if(auth()->guard()->check()): ?>
            <a href="/dashboard" class="btn-black-begin">Go to Dashboard &rarr;</a>
          <?php else: ?>
            <a href="<?php echo e(route('register')); ?>" class="btn-black-begin">Begin &rarr;</a>
          <?php endif; ?>
        </div>
      </div>

      <div class="video-hero-wrapper">
        <div class="video-container">
          <img src="<?php echo e(asset('photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')); ?>" alt="Happy Family">
        </div>
      </div>
    </div>

    <div class="ticker-section">
      <div class="ticker-wrapper">
        <div class="ticker-track">
          <div class="ticker-item">Wealthify</div><div class="ticker-item">Tide</div><div class="ticker-item">Allica</div><div class="ticker-item">Airwallex</div><div class="ticker-item">TrueLayer</div><div class="ticker-item">Capital on Tap</div><div class="ticker-item">Chip</div><div class="ticker-item">Paypoint</div>
        </div>
        <div class="ticker-track">
          <div class="ticker-item">Wealthify</div><div class="ticker-item">Tide</div><div class="ticker-item">Allica</div><div class="ticker-item">Airwallex</div><div class="ticker-item">TrueLayer</div><div class="ticker-item">Capital on Tap</div><div class="ticker-item">Chip</div><div class="ticker-item">Paypoint</div>
        </div>
      </div>
      <div class="ticker-wrapper reverse">
        <div class="ticker-track">
          <div class="ticker-item">Kraken</div><div class="ticker-item">Coinbase</div><div class="ticker-item">eToro</div><div class="ticker-item">Stripe</div><div class="ticker-item">Wise</div><div class="ticker-item">Revolut</div><div class="ticker-item">Monzo</div><div class="ticker-item">Starling</div>
        </div>
        <div class="ticker-track">
          <div class="ticker-item">Kraken</div><div class="ticker-item">Coinbase</div><div class="ticker-item">eToro</div><div class="ticker-item">Stripe</div><div class="ticker-item">Wise</div><div class="ticker-item">Revolut</div><div class="ticker-item">Monzo</div><div class="ticker-item">Starling</div>
        </div>
      </div>
    </div>

    <section class="stats-section">
      <div class="stats-grid">
        <div><div class="stat-num">3 Min</div><div class="stat-label">To Open Account</div></div>
        <div><div class="stat-num">Top</div><div class="stat-label">Tier APY Rates</div></div>
        <div><div class="stat-num">24/7</div><div class="stat-label">Secure Access</div></div>
      </div>
    </section>

    <section class="big-text-cta">
      <h2>Leading brands – from modern fintechs and digital platforms to large-scale corporates – use our network to benefit from our fully regulated <strong>virtual banking infrastructure and direct access.</strong></h2>
    </section>

    <section class="app-capabilities">
      <div class="app-grid">
        <div class="app-card">
          <div class="app-card-icon"><i data-lucide="piggy-bank"></i></div>
          <h3>High-Yield Vaults</h3>
          <p>Make your idle cash work harder with dedicated savings vaults offering industry-leading APY returns.</p>
        </div>
        <div class="app-card">
          <div class="app-card-icon"><i data-lucide="arrow-right-left"></i></div>
          <h3>Instant Transfers</h3>
          <p>Generate global transfers instantly with less effort and time.</p>
        </div>
        <div class="app-card">
          <div class="app-card-icon"><i data-lucide="shield-check"></i></div>
          <h3>Bank-Grade Security</h3>
          <p>Your funds and data are protected by military-grade encryption and comprehensive regulatory compliance.</p>
        </div>
        <div class="app-card">
          <div class="app-card-icon"><i data-lucide="smartphone"></i></div>
          <h3>Seamless Control</h3>
          <p>Manage your entire financial life from a single, beautifully designed mobile interface.</p>
        </div>
      </div>
    </section>

    <section class="partner-section">
      <div class="partner-container">
        <div class="partner-image">
          <img src="<?php echo e(asset('photo-1511895426328-dc8714191300?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')); ?>" alt="Happy family outdoors">
        </div>
        <div class="partner-text">
          <div class="partner-subtitle">Powered by people</div>
          <h2 class="partner-title">Your partner in growth</h2>
          <p class="partner-desc">We understand the pain of dealing with legacy systems, the cost and the risk involved in innovating in the financial services sector. That's why we set up this platform. We're built to support you.</p>
        </div>
      </div>
    </section>

    <section class="testimonials-section">
      <div class="testimonials-header"><h2>Loved by thousands</h2></div>
      <div class="slider" id="testimonialSlider"></div>
    </section>

    <section class="start-now-cta">
      <div class="start-now-content">
        <h2>Ready to upgrade your account?</h2>
        <p>Join thousands of users experiencing the future of finance. Open your account today in under 3 minutes.</p>
        <div class="start-now-buttons-wrapper">
          <a href="<?php echo e(route('register')); ?>" class="btn-white-begin">Start Now <i data-lucide="arrow-up-right" style="width: 20px;"></i></a>
        </div>
      </div>
    </section>

  </main>

  <div class="ios-modal-overlay" id="iosModalOverlay" onclick="closeIOSModal()"></div>
  <div class="ios-modal-sheet" id="iosModalSheet">
    <div class="ios-modal-icon">
      <img src="<?php echo e(asset('512/6202/6202860.png')); ?>" alt="App Logo" style="width: 40px; height: 40px;">
    </div>
    <h3>Install App</h3>
    <p>Install this application on your home screen for quick and easy access when you're on the go.</p>
    
    <div class="ios-steps">
      <div class="ios-step">
        <span>1.</span>
        <span>Tap the <strong>Share</strong> button at the bottom of Safari.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
      </div>
      <div class="ios-step">
        <span>2.</span>
        <span>Scroll down and select <strong>Add to Home Screen</strong>.</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: auto; color: var(--cb-black);"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
      </div>
    </div>
    
    <button class="btn-got-it" onclick="closeIOSModal()">Got it!</button>
  </div>

  <footer class="legal-footer">
    <p class="legal-text">Copyright &copy; <?php echo e(date('Y')); ?>. All rights reserved.</p>
    <p class="legal-text">This platform operates within fully compliant regulatory frameworks for financial data and processing.</p>
  </footer>

  <script>
    function toggleMenu() { document.getElementById('mobileMenu').classList.toggle('open'); }

    const allReviews = [
      { name: "Sarah J.", gender: "women", id: 44, quote: "The application speed is unbelievable. Everything loads instantly, and the overall performance is top-notch." },
      { name: "Marcus T.", gender: "men", id: 32, quote: "Finally, an app that gives me total control over my profile. The advanced security features make me feel completely safe using it daily." },
      { name: "Elena R.", gender: "women", id: 68, quote: "I set up my profile in minutes. Navigating through the dashboard has never been this straightforward and intuitive." },
      { name: "David L.", gender: "men", id: 85, quote: "The customer support team is phenomenal. Every time I've had a technical question, their team has been there to help." },
      { name: "Chloe B.", gender: "women", id: 12, quote: "I love the peace of mind knowing my data is held securely. The clean interface makes navigating the platform an absolute breeze." },
      { name: "James K.", gender: "men", id: 22, quote: "Switching our digital workflow to this platform was the best operational decision we made all year." },
      { name: "Aisha M.", gender: "women", id: 33, quote: "The platform's reliability actually delivers on its promises. I love seeing the consistent updates and new features being added!" },
      { name: "Tom H.", gender: "men", id: 41, quote: "No lagging, no confusing menus or jargon. Just straightforward, exceptionally powerful technology." }
    ];

    function loadRandomReviews() {
      const slider = document.getElementById('testimonialSlider');
      allReviews.sort(() => 0.5 - Math.random()).slice(0, 8).forEach(review => {
        slider.innerHTML += `
          <div class="slide-card">
            <div class="slide-header">
              <div class="slide-user-info">
                <img src="https://randomuser.me/api/portraits/${review.gender}/${review.id}.jpg" class="slide-avatar" alt="${review.name}">
                <div class="slide-name-wrap">
                  <div class="slide-name">${review.name}</div>
                  <div class="slide-verified"><i data-lucide="check-circle" style="width:12px; height:12px;"></i> Verified Client</div>
                </div>
              </div>
            </div>
            <div class="slide-stars">
              <i data-lucide="star" style="fill:#F59E0B; color:#F59E0B;"></i><i data-lucide="star" style="fill:#F59E0B; color:#F59E0B;"></i><i data-lucide="star" style="fill:#F59E0B; color:#F59E0B;"></i><i data-lucide="star" style="fill:#F59E0B; color:#F59E0B;"></i><i data-lucide="star" style="fill:#F59E0B; color:#F59E0B;"></i>
            </div>
            <p class="slide-quote">"${review.quote}"</p>
          </div>`;
      });
      lucide.createIcons();
    }
    window.onload = loadRandomReviews;

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); });
    }

    let deferredPrompt;
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;

    if (!isStandalone) {
      document.querySelectorAll('.pwa-install-btn').forEach(btn => {
        btn.style.display = 'inline-flex';
      });

      window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
      });
    }

    function triggerInstall() {
      if (isIOS) {
        document.getElementById('iosModalOverlay').classList.add('open');
        setTimeout(() => document.getElementById('iosModalSheet').classList.add('open'), 10);
      } else if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
          deferredPrompt = null;
        });
      } else {
        alert("To install the app on this device, click the 'Install' icon in your browser's URL address bar, or add this page to your home screen.");
      }
    }

    function closeIOSModal() {
      document.getElementById('iosModalSheet').classList.remove('open');
      setTimeout(() => document.getElementById('iosModalOverlay').classList.remove('open'), 300);
    }
  </script>
</body>
</html>
<?php /**PATH C:\Users\chromeworld\Documents\clearb-laravel\resources\views/landing.blade.php ENDPATH**/ ?>