<?php require_once __DIR__ . '/includes/functions.php'; ?>
<!doctype html>
<html lang="en">

<head>
  <!-- Structured Data (JSON-LD) for AI & Search Engines -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "FamGateway",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "100% Free Automated UPI Payment verification gateway for developers accepting FamPay.",
      "publisher": {
        "@type": "Organization",
        "name": "Aryanispe",
        "legalName": "Aryanispe",
        "identifier": {
          "@type": "PropertyValue",
          "name": "Udyam Registration Number",
          "value": "UDYAM-BR-28-0050000"
        },
        "description": "Govt. of India Recognized MSME",
        "url": "https://famgateway.in",
        "logo": "https://famgateway.in/assets/img/logo.png",
        "contactPoint": {
          "@type": "ContactPoint",
          "telephone": "+91-9771348544",
          "contactType": "customer support",
          "areaServed": "IN",
          "availableLanguage": ["en", "hi"]
        },
        "sameAs": [
          "https://t.me/ARYANISPE",
          "https://t.me/aryanispe_related",
          "https://www.youtube.com/@aryanispe",
          "https://www.instagram.com/aryanispe/",
          "https://github.com/aryanxispe",
          "https://x.com/aryanispe",
          "http://www.linkedin.com/in/aryanispe",
          "https://aryanispehost.in/"
        ]
      },
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "INR"
      }
    }
  </script>

  <?php $pageTitle = 'FamGateway — 100% Free FamPay UPI API for Developers';
  include 'includes/header.php'; ?>
  <link rel="stylesheet" href="assets/css/landing.css">
</head>

<body>
  <header class="nav">
    <div class="shell nav-inner">
      <a class="brand" href="index.php" style="padding:0;"><img src="assets/img/logo-navbar-bright.png" alt="FamGateway" style="height:28px;width:auto;display:block;object-fit:contain;"></a>
      <ul class="links">
        <li><a href="index.php#flow">How it works</a></li>
        <li><a href="index.php#api">API</a></li>
        <li><a href="blog/how-it-works.php">Architecture</a></li>
        <li><a href="docs.php">Docs</a></li>
      </ul>
      <div class="nav-actions"><a class="login" href="login.php">Sign in</a><a class="nav-cta" href="register.php">Get API key <span>↗</span></a></div>
      <button class="menu" aria-label="Open menu" onclick="toggleMobileNav()"><svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg></button>
    </div>
  </header>
  <nav id="mobile-nav" class="mobile-nav"><a href="#flow">How it works</a><a href="#api">API</a><a href="blog/how-it-works.php">Architecture</a><a href="docs.php">Docs</a>
    <div class="mobile-menu-actions"><a class="mobile-register" href="register.php">Register</a><a class="mobile-login" href="login.php">Login</a></div>
  </nav>
  <div id="mobile-overlay" class="mobile-overlay" onclick="closeMobileNav()"></div>
  <main>
    <section class="hero">
      <div class="shell hero-grid">
        <div>
          <div class="hero-eyebrow-wrap"><div class="eyebrow"><svg class="hero-fampay-mark" viewBox="0 0 24 24" aria-label="FamPay">
              <path d="M14.828 23.971a.206.206 0 01-.233-.016c-.646-.407-3.892-2.571-6.089-5.288-1.34-1.677 3.783-4.173 3.783-3.844.005 1.782.5 6.467 2.603 8.747a.268.268 0 01-.013.356l-.051.035M13.48 13.082l4.659-2.119a4.386 4.386 0 002.542-2.636l.581-1.634a.174.174 0 00-.11-.222.171.171 0 00-.125 0l-8.897 3.771.033-.142a.902.902 0 01.439-.626c1.505-.927 6.903-3.686 6.903-3.686a6.592 6.592 0 003.53-4.112L23.444.28a.225.225 0 00-.153-.268.222.222 0 00-.144 0s-8.123 3.156-10.734 4.425C9.8 5.707 7.126 7.34 6.2 12.142c-.376 1.945.313 3.592 1.607 5.46-.006-1.836 4.637-4.02 5.673-4.52zM2.026 4.86C1.289 4.299.662 4.25.553 4.299c-.049-.174.846-.597.956-.707.362-.346.565-.804.988-1.098.863-.611 1.93-.424 2.824.064.455.25 1.709 1.071 1.728 1.112A14.02 14.02 0 018.945 5.38a.241.241 0 010 .314c-.211.203-.418.348-.675.565-1.703 1.43-2.73 5.24-2.746 5.711V12s-.999-5.38-3.498-7.14z" />
            </svg> FamPay payment gateway for developers</div></div>
          <div class="hero-h1-wrap"><h1 style="font-size:clamp(40px, 5vw, 68px);">The <em>100% Free</em> FamPay API.</h1></div>
          <div class="hero-copy-wrap"><p class="hero-copy">Create a FamPay payment link, show a UPI QR, and know exactly when the money arrives. FamGateway gives Indian developers a simple path from checkout to confirmation — <b>100% Free Forever with 0% Transaction Fees.</b></p></div>
          <div class="hero-actions-wrap"><div class="hero-actions"><a class="primary" href="register.php">Create your free account <span>→</span></a><a class="secondary" href="docs.php">Read the API docs <span>↗</span></a></div></div>
          <div class="hero-proof-wrap"><div class="proof"><span><b>✓</b> 100% Free Forever</span><span><b>✓</b> 0% Transaction Fees</span><span><b>✓</b> Unlimited API Calls</span></div></div>
        </div>
        <div class="hero-visual">
          <div class="hero-card-wrap">
            <div class="product">
              <div class="product-head">
                <div class="dots"><i></i><i></i><i></i></div><span>famgateway.in/pay.php</span><span>LIVE</span>
              </div>
              <div class="product-main">
                <div class="gateway-brand"><img src="assets/img/logo-dark.png" alt="FamGateway" style="height:24px;width:auto;display:block;object-fit:contain;"></div>
                <div class="product-label">Order total</div>
                <div class="money">₹499 <small>INR</small></div>
                <div class="pay-card">
                  <div class="pay-row"><span>Order ID</span><b>order_8H2KQ</b></div>
                  <div class="pay-row"><span>FamPay payment link</span><b>Created</b></div>
                  <div class="pay-row"><span>Verification</span><span class="status"><i></i>Payment received</span></div>
                </div>
                <div class="flow">
                  <div>Link created</div><span>→</span>
                  <div>Pay with FamPay</div><span>→</span>
                  <div class="active">Confirmed</div>
                </div>
              </div>
              <div class="hero-note">Verified in seconds ✓</div>
            </div>
          </div><!-- /.hero-card-wrap -->
        </div>
      </div>
    </section>
    <div class="ticker">
      <div class="ticker-track shell"><span>FamPay gateway</span><span>UPI QR generation</span><span>Payment links</span><span>Payment verification</span><span>Hosted checkout</span></div>
    </div>
    <section id="flow" class="section">
      <div class="shell">
        <div class="flow-intro">
          <div class="anim-slide-left">
            <div class="kicker">The FamGateway Official Flow</div>
            <h2 style="font-size:clamp(30px, 4vw, 42px);">The Official Automated UPI Payment Gateway for FamPay.</h2>
            <p class="section-intro">Generate a UPI QR, display the exact payable amount, then check the order status after payment.</p>
          </div>
          <div class="api-flow-card anim-slide-right"><b>YOUR APP → FAMGATEWAY</b>
            <div class="api-flow-line">
              <div class="api-flow-node">API request<small>UPI + amount</small></div><span class="api-flow-arrow">→</span>
              <div class="api-flow-node">QR response<small>order + QR URL</small></div><span class="api-flow-arrow">→</span>
              <div class="api-flow-node">Status check<small>pending / paid</small></div>
            </div>
            <div class="api-flow-result">{ "status": "success", "utr": "..." }</div>
          </div>
        </div>
        <div class="steps anim-stagger">
          <article class="step">
            <div class="step-no">01 / CONNECT</div>
            <h3>Get your API key.</h3>
            <p>Create an account and connect the Gmail account used for FamPay payment notifications.</p>
          </article>
          <article class="step">
            <div class="step-no">02 / CREATE</div>
            <h3>Generate a QR.</h3>
            <p>Send a UPI ID and amount. The API returns an order ID, QR URL, and unique payable amount.</p>
          </article>
          <article class="step">
            <div class="step-no">03 / CHECK</div>
            <h3>Check payment status.</h3>
            <p>Use the order ID to check whether payment is pending, successful, or expired.</p>
          </article>
        </div>
      </div>
    </section>
    <section id="api" class="section section-dark anim-fade-up">
      <div class="shell integration">
        <div class="anim-slide-left">
          <div class="kicker">Small API surface. Big control.</div>
          <h2>Two calls. One clear answer.</h2>
          <p class="section-intro">Create a payment session, then ask for its status. The response is clean JSON, so it fits into whatever you already build with.</p>
          <div class="code">
            <div class="code-top"><span>create-payment.py</span><span>copy</span></div>
            <pre><span class="dim"># create a payment link</span>
<span class="green">GET</span> /api/qr.php
<span class="orange">upi</span>: "username@fam"
<span class="orange">amount</span>: 499

<span class="dim"># response</span>
order_id, qr_url, payable_amount</pre>
          </div>
        </div>
        <div class="feature-list anim-stagger">
          <div class="feature"><span class="feature-num">01</span>
            <div>
              <h3>Unique payable amounts</h3>
              <p>Orders receive a distinct decimal amount for reliable payment matching.</p>
            </div><span class="arrow">↗</span>
          </div>
          <div class="feature"><span class="feature-num">02</span>
            <div>
              <h3>UPI QR generation</h3>
              <p>Create a QR code for a UPI ID and the exact payable amount.</p>
            </div><span class="arrow">↗</span>
          </div>
          <div class="feature"><span class="feature-num">03</span>
            <div>
              <h3>Hosted payment page</h3>
              <p>Use the built-in checkout page for a payment link when you need a ready UI.</p>
            </div><span class="arrow">↗</span>
          </div>
          <div class="feature"><span class="feature-num">04</span>
            <div>
              <h3>Status verification</h3>
              <p>Check an order and receive its pending, successful, or expired state.</p>
            </div><span class="arrow">↗</span>
          </div>
        </div>
      </div>
    </section>
    <section id="use-cases" class="section">
      <div class="shell">
        <div class="checkout-showcase">
          <div class="checkout-side anim-slide-left">
            <div>
              <div class="kicker">Checkout view</div>
              <h2>Show the payment screen before the user pays.</h2>
              <p class="section-intro">This is the real checkout screenshot from the project.</p>
            </div>
            <div class="checkout-card">
              <h3>What the user sees</h3>
              <p>Exact amount, UPI destination, QR scan, and live waiting state all stay visible at once. That makes the payment flow feel direct instead of hidden behind extra steps.</p>
            </div>
            <div class="checkout-metrics">
              <div class="checkout-metric"><b>Amount</b><span>₹100</span></div>
              <div class="checkout-metric"><b>Status</b><span>Waiting</span></div>
            </div>
          </div>
          <div class="checkout-panel"><img src="assets/img/checkout-screenshot.png" alt="FamPay checkout screenshot"></div>
        </div>
      </div>
    </section>
    <section class="section section-dark">
      <div class="shell">
        <div class="checkout-showcase" style="grid-template-columns:minmax(300px,420px) minmax(0,1.05fr);">
          <div class="checkout-panel"><img src="assets/img/checkout-success.png" alt="Payment Confirmed"></div>
          <div class="checkout-side anim-slide-right">
            <div>
              <div class="kicker">Built around the current API</div>
              <h2>QR generation, payment links, and verification.</h2>
              <p class="section-intro">Generate a FamPay UPI QR directly from your application.</p>
            </div>
            <div class="checkout-card">
              <h3>Hosted payment links</h3>
              <p>Create a shareable link with an expiry time and a built-in payment page.</p>
            </div>
            <div class="checkout-card" style="background:var(--ink-2); border-color:rgba(255,255,255,.1); color:var(--white);">
              <h3>Manual status polling</h3>
              <p style="color:#afc0b4;">Poll the verification endpoint to check whether a payment has been received.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section style="background:#0f172a; padding:70px 0; border-top:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); text-align:center; position:relative; overflow:hidden;">
      <div style="position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; background:radial-gradient(circle, rgba(96,165,250,0.1) 0%, transparent 70%); pointer-events:none;"></div>
      <div class="shell" style="position:relative; z-index:1;">
        <div class="anim-fade-in" style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;">
          <div style="display:inline-flex; align-items:center; gap:8px; color:#4ade80; background:rgba(74,222,128,0.1); border:1px solid rgba(74,222,128,0.2); padding:8px 18px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
            Loved by Udyam Registration directed
          </div>
          <h2 style="margin:0; color:#fff; font-size:32px; font-weight:600; letter-spacing:-0.5px;">Govt. of India Recognized MSME</h2>
          <div style="margin-top:4px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:26px; color:#93c5fd; letter-spacing:3px; font-weight:800; background:rgba(96,165,250,0.15); padding:16px 32px; border-radius:16px; border:1px solid rgba(96,165,250,0.3); box-shadow:0 10px 30px rgba(96,165,250,0.1);">UDYAM-BR-28-0050000</div>
        </div>
      </div>
    </section>

    <!-- Proudly Built in India Section -->
    <section style="background:#fff; padding:100px 0; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid #e2e8f0;">
      <div style="position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, #FF9933 0%, #FFFFFF 50%, #138808 100%);"></div>
      <div class="shell anim-fade-up">
        <div style="display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:50%; background:#fff; border:2px solid #e2e8f0; box-shadow:0 12px 32px rgba(0,0,0,0.05); margin-bottom:24px; position:relative;">
          <img src="https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg" alt="Flag of India" style="width:40px; border-radius:4px; display:block;">
        </div>
        
        <h2 style="font-size:clamp(32px, 5vw, 48px); font-weight:800; color:#0f172a; margin:0 0 20px; letter-spacing:-1px;">
          Proudly Built in <span style="background:linear-gradient(90deg, #FF9933, #138808); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">India</span>
        </h2>
        
        <p style="font-size:18px; color:#475569; max-width:680px; margin:0 auto 40px; line-height:1.7;">
          FamGateway is engineered entirely in India, dedicated to empowering Indian developers and businesses with zero-fee, robust UPI payment infrastructure.
        </p>

        <div style="display:flex; justify-content:center; gap:32px; flex-wrap:wrap;">
          <div style="text-align:center;">
            <div style="font-size:32px; font-weight:800; color:#0f172a; margin-bottom:4px;">100%</div>
            <div style="font-size:14px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:1px;">Free UPI Gateway</div>
          </div>
          <div style="width:1px; background:#e2e8f0; align-self:stretch;"></div>
          <div style="text-align:center;">
            <div style="font-size:32px; font-weight:800; color:#0f172a; margin-bottom:4px;">Zero</div>
            <div style="font-size:14px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:1px;">Hidden Charges</div>
          </div>
          <div style="width:1px; background:#e2e8f0; align-self:stretch;"></div>
          <div style="text-align:center;">
            <div style="font-size:32px; font-weight:800; color:#0f172a; margin-bottom:4px;">Secure</div>
            <div style="font-size:14px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:1px;">Data Privacy</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Verified WhatsApp Support Section -->
    <section style="background:#f8fafc; padding:80px 0; border-bottom:1px solid #e2e8f0; text-align:center;">
      <div class="shell anim-fade-up">
        <div style="display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:#25d366; color:#fff; border-radius:50%; margin-bottom:24px; box-shadow:0 12px 24px rgba(37,211,102,0.25);">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
        </div>
        <div class="kicker" style="color:#16a34a; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:13px; margin-bottom:12px;">Verified Developer Support</div>
        <h2 style="font-size:clamp(30px, 4vw, 42px); color:#0f172a; margin:0 0 16px; letter-spacing:-1px;">24/7 WhatsApp Support for API Integration</h2>
        <p style="font-size:16px; color:#64748b; max-width:600px; margin:0 auto 32px; line-height:1.7;">Building a payment flow can be tricky. That's why we offer direct WhatsApp support to help you integrate the FamPay UPI Gateway flawlessly. Get instant help from real developers.</p>
        
        <div style="display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:36px;">
          <div style="background:#fff; padding:16px 24px; border-radius:16px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:12px; box-shadow:0 4px 12px rgba(0,0,0,0.03);">
            <div style="background:#dcfce7; color:#16a34a; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div>
            <div style="text-align:left;">
              <b style="display:block; font-size:14px; color:#0f172a;">Instant Setup Help</b>
              <span style="font-size:12px; color:#64748b;">Resolve API errors fast</span>
            </div>
          </div>
          <div style="background:#fff; padding:16px 24px; border-radius:16px; border:1px solid #e2e8f0; display:flex; align-items:center; gap:12px; box-shadow:0 4px 12px rgba(0,0,0,0.03);">
            <div style="background:#eff6ff; color:#2563eb; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div>
            <div style="text-align:left;">
              <b style="display:block; font-size:14px; color:#0f172a;">Live Status Tracking</b>
              <span style="font-size:12px; color:#64748b;">Help with Webhooks & Polling</span>
            </div>
          </div>
        </div>

        <a href="https://wa.me/919771348544?text=Hello%2C%20I%20came%20from%20your%20FamGateway%20website%2C%20and%20I%20need%20support." target="_blank" rel="noopener noreferrer" style="display:inline-flex; align-items:center; gap:10px; background:#25d366; color:#fff; padding:16px 36px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 10px 28px rgba(37,211,102,0.3); transition:transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 14px 32px rgba(37,211,102,0.4)'" onmouseout="this.style.transform='';this.style.boxShadow='0 10px 28px rgba(37,211,102,0.3)'">
          Chat with Support Team →
        </a>
      </div>
    </section>

    <!-- Meet the Founder Section -->
    <section style="background:#f8fafc; padding:80px 0; border-bottom:1px solid #e2e8f0; position:relative; overflow:hidden;">
      <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:800px; height:800px; background:radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 60%); pointer-events:none;"></div>
      <div class="shell anim-fade-up" style="position:relative; z-index:1; max-width:900px; margin:0 auto;">
        <div style="background:#fff; border-radius:24px; padding:48px; display:flex; align-items:center; gap:48px; border:1px solid rgba(226,232,240,0.8); box-shadow:0 20px 40px rgba(15,23,42,0.04); flex-wrap:wrap;">
          
          <div style="position:relative; flex-shrink:0; margin:0 auto;">
            <div style="position:absolute; inset:-8px; border-radius:50%; background:linear-gradient(135deg, #3b82f6, #8b5cf6); opacity:0.2; filter:blur(12px);"></div>
            <img src="assets/img/aryanispe.png" alt="Aryan Gupta (Aryanispe)" style="position:relative; width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 12px 32px rgba(15,23,42,0.12);">
            <div style="position:absolute; bottom:8px; right:8px; width:28px; height:28px; background:#10b981; border:4px solid #fff; border-radius:50%; box-shadow:0 4px 12px rgba(16,185,129,0.3); z-index:2;"></div>
          </div>
          
          <div style="flex:1 1 300px; text-align:left;">
            <div class="kicker" style="display:inline-flex; align-items:center; gap:8px; color:#2563eb; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:12px; margin-bottom:16px; background:rgba(37,99,235,0.08); padding:6px 12px; border-radius:99px;">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
              Verified Official Developer
            </div>
            <h2 style="font-size:clamp(28px, 4vw, 36px); color:#0f172a; margin:0 0 12px; letter-spacing:-1px; font-weight:800;">Aryan Gupta <span style="color:#64748b; font-weight:500;">(Aryanispe)</span></h2>
            <p style="font-size:16px; color:#475569; margin:0 0 24px; line-height:1.7;">FamGateway is exclusively built, maintained, and operated by Aryan Gupta, widely known as <strong>Aryanispe</strong>. By providing a 100% free API infrastructure, Aryanispe empowers developers to automate their UPI flows flawlessly.</p>
            <div style="display:flex; gap:16px; flex-wrap:wrap;">
              <a href="blog/who-is-the-official-developer-of-famgateway.php" style="display:inline-flex; align-items:center; gap:8px; background:#0f172a; color:#fff; padding:14px 28px; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; box-shadow:0 8px 20px rgba(15,23,42,0.2); transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 12px 24px rgba(15,23,42,0.3)'" onmouseout="this.style.transform='';this.style.boxShadow='0 8px 20px rgba(15,23,42,0.2)'">Read the Full Story →</a>
              <a href="https://wa.me/919771348544?text=Hello%20Aryan%2C%20I%20came%20from%20your%20FamGateway%20website." target="_blank" rel="noopener noreferrer" style="display:inline-flex; align-items:center; gap:8px; background:rgba(15,23,42,0.05); color:#0f172a; padding:14px 28px; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; transition: background 0.2s;" onmouseover="this.style.background='rgba(15,23,42,0.08)'" onmouseout="this.style.background='rgba(15,23,42,0.05)'">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                Contact Directly
              </a>
            </div>
          </div>
          
        </div>
      </div>
    </section>

    <!-- Official Anti-Scam Warning Section (Hidden as per request)
    <section style="background:#fff1f2; padding:80px 0; border-bottom:1px solid #fecdd3; text-align:center; position:relative; overflow:hidden;">
      <div style="position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:500px; height:500px; background:radial-gradient(circle, rgba(225,29,72,0.08) 0%, transparent 70%); pointer-events:none;"></div>
      <div class="shell anim-fade-in" style="position:relative; z-index:1;">
        <div style="display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:#e11d48; color:#fff; border-radius:50%; margin-bottom:24px; box-shadow:0 12px 24px rgba(225,29,72,0.25);">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
        </div>
        <div class="kicker" style="color:#e11d48; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:13px; margin-bottom:12px;">Security Advisory & Official Notice</div>
        <h2 style="font-size:clamp(28px, 4vw, 40px); color:#881337; margin:0 0 16px; letter-spacing:-1px;">Beware of Fake & Scam Websites</h2>
        <p style="font-size:16px; color:#9f1239; max-width:680px; margin:0 auto 32px; line-height:1.7;">Please be aware of fraudulent platforms (like <strong>famgateway.online</strong>) claiming to be us. They are <strong style="text-decoration:underline;">NOT</strong> affiliated with FamGateway and may compromise your payment flows. <br><br>We are the <strong>ONLY official, Govt. of India Recognized MSME (UDYAM-BR-28-0050000)</strong> providing the authentic FamPay API integration.</p>
        
        <div style="display:inline-flex; align-items:center; gap:16px; background:#fff; padding:16px 32px; border-radius:12px; border:1px solid #fecaca; box-shadow:0 8px 24px rgba(225,29,72,0.08);">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e11d48" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
          <div style="text-align:left;">
            <b style="display:block; font-size:14px; color:#881337;">Always check the URL</b>
            <span style="font-size:13px; color:#be123c;">Our only official domain is <strong>famgateway.in</strong></span>
          </div>
        </div>
      </div>
    </section>
    -->

    <section style="background:#c8fa49; padding:100px 0;">
      <div class="shell" style="display:flex; flex-wrap:wrap; align-items:center; gap:60px; justify-content:space-between;">
        <div class="anim-slide-left" style="flex:1 1 400px; min-width:300px;">
          <div style="display:inline-flex; align-items:center; gap:8px; background:rgba(15,23,42,0.1); border-radius:999px; padding:7px 14px; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:#1a2e0f; margin-bottom:24px;"><svg style="width:12px;height:12px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
            </svg> Get started in minutes</div>
          <h2 style="color:var(--ink); font-size:clamp(40px, 5vw, 64px); letter-spacing:-2.5px; margin:0 0 20px; line-height:1.05;">Ready to accept <br>UPI payments?</h2>
          <p style="color:#2d4020; font-size:16px; max-width:400px; margin:0 0 36px; line-height:1.7;">Create an account, generate an API key, and make your first payment link in minutes. No complex integration needed.</p>
          <div style="display:flex; gap:14px; flex-wrap:wrap;">
            <a href="register.php" style="display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; padding:16px 36px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 10px 28px rgba(15,23,42,0.28); transition: transform 0.2s ease;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">Get your API key →</a>
            <a href="docs.php" style="display:inline-flex; align-items:center; gap:8px; background:rgba(15,23,42,0.12); color:var(--ink); padding:16px 28px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; transition: background 0.2s ease;" onmouseover="this.style.background='rgba(15,23,42,0.18)'" onmouseout="this.style.background='rgba(15,23,42,0.12)'">Read docs</a>
          </div>
          <div style="display:flex; gap:20px; margin-top:32px; flex-wrap:wrap;">
            <span style="display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#233410;">✓ 100% Free Forever</span>
            <span style="display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#233410;">✓ 0% Transaction Fees</span>
            <span style="display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#233410;">✓ Unlimited API Calls</span>
          </div>
        </div>
        <div class="cta-closing-metrics anim-stagger" style="flex:1 1 450px; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px;">
          <div style="background:rgba(255,255,255,0.4); backdrop-filter:blur(10px); border-radius:24px; padding:32px 24px; border:1px solid rgba(255,255,255,0.6); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 20px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
            <div class="cta-counter" data-target="2" style="font-size:42px; font-weight:800; letter-spacing:-1.5px; color:var(--ink);">0</div>
            <div style="font-size:14px; font-weight:600; color:#2d4020; margin-top:8px; line-height:1.4;">API calls to complete a payment</div>
          </div>
          <div style="background:rgba(255,255,255,0.4); backdrop-filter:blur(10px); border-radius:24px; padding:32px 24px; border:1px solid rgba(255,255,255,0.6); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 20px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
            <div class="cta-counter" data-target="99" data-suffix="%" style="font-size:42px; font-weight:800; letter-spacing:-1.5px; color:var(--ink);">0%</div>
            <div style="font-size:14px; font-weight:600; color:#2d4020; margin-top:8px; line-height:1.4;">Uptime across all endpoints</div>
          </div>
          <div style="background:rgba(255,255,255,0.4); backdrop-filter:blur(10px); border-radius:24px; padding:32px 24px; border:1px solid rgba(255,255,255,0.6); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 20px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
            <div style="font-size:42px; font-weight:800; letter-spacing:-1.5px; color:var(--ink);">&lt;5s</div>
            <div style="font-size:14px; font-weight:600; color:#2d4020; margin-top:8px; line-height:1.4;">Average payment confirmation</div>
          </div>
          <div style="background:var(--ink); border-radius:24px; padding:32px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow:0 10px 30px rgba(15,23,42,0.2);" onmouseover="this.style.transform='translateY(-6px)';this.style.boxShadow='0 20px 40px rgba(15,23,42,0.4)'" onmouseout="this.style.transform='';this.style.boxShadow='0 10px 30px rgba(15,23,42,0.2)'">
            <div style="font-size:42px; font-weight:800; letter-spacing:-1.5px; color:#c8fa49;">UPI</div>
            <div style="font-size:14px; font-weight:600; color:#94a3b8; margin-top:8px; line-height:1.4;">FamPay powered payments</div>
          </div>
        </div>
      </div>
      <link rel="stylesheet" href="assets/css/landing.css">
    </section>

  </main>
  <footer style="background:var(--ink); color:#94a3b8; padding:60px 0 30px; font-size:14px;">
    <div class="shell">
      <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:40px; margin-bottom:40px;">
        <!-- Brand & MSME Info -->
        <div style="max-width:300px;">
          <a class="brand" href="index.php" style="padding:0; margin-bottom:16px; display:inline-block;"><img src="assets/img/logo-navbar-bright.png" alt="FamGateway" style="height:28px;width:auto;display:block;object-fit:contain;"></a>
          <p style="margin:0 0 16px; line-height:1.6;">Automated UPI Payment verification gateway for developers accepting FamPay.</p>
          <div style="display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.05); padding:6px 12px; border-radius:6px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,0.1);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
            MSME Reg: UDYAM-BR-28-0050000
          </div>
          <div style="margin-top:12px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05); padding:8px 12px; border-radius:6px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,0.1);">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            <div>
               <strong style="color:#60a5fa;">Trusted by 2,500+ Devs</strong><br>
               <span style="font-size:11px; color:#94a3b8;">in the Aryanispe ecosystem since 2025</span>
            </div>
          </div>
        </div>

        <!-- Resources -->
        <div>
          <h4 style="color:#fff; font-size:15px; margin:0 0 20px; font-weight:600;">Resources</h4>
          <div style="display:flex; flex-direction:column; gap:12px;">
            <a href="docs.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">API Documentation</a>
            <a href="blog/how-it-works.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Architecture & Webhooks</a>
            <a href="blog/preventing-double-payments.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Handling Collisions</a>
            <a href="blog/security.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Security Guide</a>
          </div>
        </div>

        <!-- Ecosystem -->
        <div>
          <h4 style="color:#fff; font-size:15px; margin:0 0 20px; font-weight:600;">Ecosystem</h4>
          <div style="display:flex; flex-direction:column; gap:12px;">
            <a href="https://aryanispehost.in/" target="_blank" rel="noopener noreferrer" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Aryanispe Host (Web Hosting)</a>
            <a href="https://github.com/aryanxispe" target="_blank" rel="noopener noreferrer" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">GitHub Open Source</a>
          </div>
        </div>

        <!-- Legal & Blog -->
        <div>
          <h4 style="color:#fff; font-size:15px; margin:0 0 20px; font-weight:600;">Legal & Blog</h4>
          <div style="display:flex; flex-direction:column; gap:12px;">
            <a href="blog/index.php" style="color:#60a5fa; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#60a5fa'">Blog Hub</a>
            <a href="terms.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Terms of Service</a>
            <a href="blog/is-famgateway-safe-privacy-and-legal-policy.php" style="color:#94a3b8; text-decoration:none; transition:color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#94a3b8'">Privacy Policy</a>
            <a href="blog/beware-of-fake-famgateway-scams-online.php" style="color:#ef4444; text-decoration:none; font-weight:500;">Scam Warning</a>
          </div>
        </div>

        <!-- Support & Socials -->
        <div>
          <h4 style="color:#fff; font-size:15px; margin:0 0 20px; font-weight:600;">Contact & Community</h4>
          <div style="display:flex; flex-direction:column; gap:12px;">
            <a href="https://wa.me/919771348544?text=Hello%2C%20I%20came%20from%20your%20FamGateway%20website%2C%20and%20I%20need%20support." target="_blank" rel="noopener noreferrer" style="color:#4ade80; text-decoration:none; font-weight:500;">WhatsApp Support</a>
            <a href="https://t.me/aryanispe_related" target="_blank" rel="noopener noreferrer" style="color:#60a5fa; text-decoration:none; font-weight:500;">Telegram Community</a>
            <a href="https://www.youtube.com/@aryanispe" target="_blank" rel="noopener noreferrer" style="color:#ff4b4b; text-decoration:none; font-weight:500;">YouTube (1.2k+ Devs)</a>
            <div style="display:flex; gap:12px; margin-top:8px;">
              <a href="http://www.linkedin.com/in/aryanispe" target="_blank" aria-label="LinkedIn" style="color:#94a3b8;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a>
              <a href="https://x.com/aryanispe" target="_blank" aria-label="X/Twitter" style="color:#94a3b8;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg></a>
              <a href="https://www.instagram.com/aryanispe/" target="_blank" aria-label="Instagram" style="color:#94a3b8;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
            </div>
          </div>
        </div>
      </div>
      
      <div style="border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; margin-top:24px; font-size:12px; color:#64748b; line-height:1.6;">
        <div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px;">
          <p style="margin:0;">&copy; <?= date('Y') ?> FamGateway. Built with ❤️ by <a href="https://aryanispehost.in/" target="_blank" style="color:#60a5fa; text-decoration:none; font-weight:600;">Aryan Gupta (Aryanispe)</a>. All rights reserved.</p>
          <span class="fampay-wordmark" aria-label="FamPay"><svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M14.828 23.971a.206.206 0 01-.233-.016c-.646-.407-3.892-2.571-6.089-5.288-1.34-1.677 3.783-4.173 3.783-3.844.005 1.782.5 6.467 2.603 8.747a.268.268 0 01-.013.356l-.051.035M13.48 13.082l4.659-2.119a4.386 4.386 0 002.542-2.636l.581-1.634a.174.174 0 00-.11-.222.171.171 0 00-.125 0l-8.897 3.771.033-.142a.902.902 0 01.439-.626c1.505-.927 6.903-3.686 6.903-3.686a6.592 6.592 0 003.53-4.112L23.444.28a.225.225 0 00-.153-.268.222.222 0 00-.144 0s-8.123 3.156-10.734 4.425C9.8 5.707 7.126 7.34 6.2 12.142c-.376 1.945.313 3.592 1.607 5.46-.006-1.836 4.637-4.02 5.673-4.52zM2.026 4.86C1.289 4.299.662 4.25.553 4.299c-.049-.174.846-.597.956-.707.362-.346.565-.804.988-1.098.863-.611 1.93-.424 2.824.064.455.25 1.709 1.071 1.728 1.112A14.02 14.02 0 018.945 5.38a.241.241 0 010 .314c-.211.203-.418.348-.675.565-1.703 1.43-2.73 5.24-2.746 5.711V12s-.999-5.38-3.498-7.14z" />
            </svg>FamPay</span>
        </div>
        <p style="margin:0; max-width:800px; color:#94a3b8;">FamGateway is a unit of <strong>ARYANISPE</strong>, officially registered under the Ministry of Micro, Small and Medium Enterprises (MSME), Government of India (Reg: <strong>UDYAM-BR-28-0050000</strong>).</p>
      </div>
    </div>
  </footer>
  <script>
    function toggleMobileNav() {
      document.getElementById('mobile-nav').classList.toggle('open');
      document.getElementById('mobile-overlay').classList.toggle('open')
    }

    function closeMobileNav() {
      document.getElementById('mobile-nav').classList.remove('open');
      document.getElementById('mobile-overlay').classList.remove('open')
    }
    document.querySelectorAll('#mobile-nav a').forEach(a => a.addEventListener('click', closeMobileNav));
  </script>
  <a href="#" class="back-to-top" aria-label="Back to top" onclick="window.scrollTo({top:0,behavior:'smooth'}); return false;"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 19V5M5 12l7-7 7 7" />
    </svg></a>
  <script>
    // Sticky Navbar and Back-to-top button
    window.addEventListener('scroll', function() {
      var nav = document.querySelector('.nav');
      if (window.scrollY > 50) nav.classList.add('nav-sticky');
      else nav.classList.remove('nav-sticky');

      var btn = document.querySelector('.back-to-top');
      if (window.scrollY > 400) btn.classList.add('visible');
      else btn.classList.remove('visible');
    });

    // Scroll animations via IntersectionObserver
    (function() {
      var targets = document.querySelectorAll(
        '.anim-fade-up, .anim-fade-in, .anim-slide-left, .anim-slide-right, .anim-stagger'
      );
      if (!targets.length || !window.IntersectionObserver) {
        targets.forEach(function(el) { el.style.opacity = '1'; });
        return;
      }
      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.12 });
      targets.forEach(function(el) { observer.observe(el); });
    })();

    // Counter animation — counts up when scrolled into view
    (function() {
      function animateCounter(el) {
        var target = parseInt(el.getAttribute('data-target'), 10);
        var suffix = el.getAttribute('data-suffix') || '';
        var duration = 1200;
        var start = null;
        function step(timestamp) {
          if (!start) start = timestamp;
          var progress = Math.min((timestamp - start) / duration, 1);
          var eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
          el.textContent = Math.floor(eased * target) + suffix;
          if (progress < 1) requestAnimationFrame(step);
          else el.textContent = target + suffix;
        }
        requestAnimationFrame(step);
      }
      if (!window.IntersectionObserver) return;
      var counterObserver = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            animateCounter(entry.target);
            counterObserver.unobserve(entry.target);
          }
        });
      }, { threshold: 0.5 });
      document.querySelectorAll('.cta-counter').forEach(function(el) {
        counterObserver.observe(el);
      });
    })();
  </script>
</body>

</html>
