<?php
// Configuration file paths
$dbInfoFile = 'pages/dbInfo.php';
$configFile = 'auth/config.php';

// Check if the setup has been done
if (!file_exists($dbInfoFile) || !file_exists($configFile)) {
    header('Location: install.php');
    exit;
}

// If setup is done, include the database connection file
include 'pages/dbInfo.php';
$con = connect_database();
include 'auth/function.php';
include_once 'includes/white_label_lib.php';
block_if_white_label_domain($con);

// BUG FIX / DATA FIX: the hero stats below ("50K+ Transactions", "15K+
// Merchants", "₹10Cr+ Processed") were hardcoded fake marketing numbers,
// not real figures. Pulling actual counts from the database instead so the
// public landing page never shows fabricated traction numbers.
$realTxnCount = 0; $realMerchantCount = 0; $realVolume = 0;
$r1 = mysqli_query($con, "SELECT COUNT(id) as cnt FROM orders WHERE status='SUCCESS'");
if ($r1) { $realTxnCount = (int)(mysqli_fetch_assoc($r1)['cnt'] ?? 0); }
$r2 = mysqli_query($con, "SELECT COUNT(id) as cnt FROM users WHERE role='User'");
if ($r2) { $realMerchantCount = (int)(mysqli_fetch_assoc($r2)['cnt'] ?? 0); }
$r3 = mysqli_query($con, "SELECT SUM(amount) as amt FROM orders WHERE status='SUCCESS'");
if ($r3) { $realVolume = (float)(mysqli_fetch_assoc($r3)['amt'] ?? 0); }

function formatCompactNumber($n) {
    if ($n >= 10000000) return round($n / 10000000, 1) . 'Cr+';
    if ($n >= 100000)   return round($n / 100000, 1) . 'L+';
    if ($n >= 1000)     return round($n / 1000, 1) . 'K+';
    return (string)$n;
}
$statTxnDisplay      = formatCompactNumber($realTxnCount);
$statMerchantDisplay = formatCompactNumber($realMerchantCount);
$statVolumeDisplay   = '₹' . formatCompactNumber($realVolume);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="theme-color" content="#0f0c29">
<title><?php echo $site_settings['brand_name']; ?> — Smart UPI Payment Gateway</title>
<meta name="description" content="India's most trusted UPI payment gateway. Accept payments instantly via QR code, payment links and UPI apps.">
<link rel="icon" href="<?php echo $site_settings['logo_url'] ?? 'common/img/favicon.png'; ?>">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--p:#6c63ff;--p2:#e040fb;--g:linear-gradient(135deg,#6c63ff,#e040fb)}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#0a0a12;color:#fff;overflow-x:hidden}

/* ── NAVBAR ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,10,18,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);transition:.3s}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo img{height:36px;object-fit:contain}
.nav-logo-name{font-size:18px;font-weight:800;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-btn{padding:9px 20px;border-radius:10px;font-size:13.5px;font-weight:600;text-decoration:none;transition:.2s;font-family:'Inter',sans-serif;cursor:pointer;border:none}
.nav-login{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.1)}
.nav-login:hover{background:rgba(255,255,255,.14)}
.nav-reg{background:var(--g);color:#fff;box-shadow:0 4px 16px rgba(108,99,255,.3)}
.nav-reg:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(108,99,255,.4)}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:100px 20px 60px}

/* Animated bg */
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a0a12 0%,#0f0c29 40%,#1a0533 100%)}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(108,99,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(108,99,255,.07) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 20s linear infinite}
@keyframes gridMove{0%{transform:translateY(0)}100%{transform:translateY(60px)}}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.ho1{width:500px;height:500px;background:rgba(108,99,255,.2);top:-150px;left:-100px;animation:orbPulse 6s ease-in-out infinite alternate}
.ho2{width:400px;height:400px;background:rgba(224,64,251,.15);bottom:-100px;right:-80px;animation:orbPulse 8s ease-in-out infinite alternate-reverse}
.ho3{width:250px;height:250px;background:rgba(67,233,123,.1);top:40%;left:60%;animation:orbPulse 5s ease-in-out infinite alternate}
@keyframes orbPulse{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.2) translate(20px,15px)}}

/* Floating particles */
.particles{position:absolute;inset:0;pointer-events:none}
.par{position:absolute;width:3px;height:3px;background:rgba(255,255,255,.4);border-radius:50%;animation:parFloat linear infinite}
@keyframes parFloat{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.6}90%{opacity:.3}100%{transform:translateY(-100px) rotate(360deg);opacity:0}}

.hero-content{position:relative;z-index:1;text-align:center;max-width:700px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.3);border-radius:50px;padding:6px 16px;font-size:12.5px;color:rgba(255,255,255,.8);margin-bottom:24px;animation:fadeIn .8s ease both}
.hero-badge .dot{width:7px;height:7px;background:#6c63ff;border-radius:50%;animation:dotPulse 1.5s infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.hero h1{font-size:clamp(32px,8vw,64px);font-weight:900;line-height:1.1;margin-bottom:20px;animation:heroIn .8s ease .1s both}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.grad-text{background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline}
.hero p{font-size:clamp(14px,3.5vw,18px);color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:32px;animation:heroIn .8s ease .2s both}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:heroIn .8s ease .3s both}
.btn-hero-p{padding:14px 28px;background:var(--g);color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(108,99,255,.35);transition:.3s;font-family:'Inter',sans-serif}
.btn-hero-p:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(108,99,255,.5)}
.btn-hero-s{padding:14px 28px;background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.15);border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:.3s;font-family:'Inter',sans-serif}
.btn-hero-s:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}

/* Stats */
.stats{display:flex;gap:24px;justify-content:center;margin-top:40px;flex-wrap:wrap;animation:heroIn .8s ease .4s both}
.stat{text-align:center}
.stat-num{font-size:26px;font-weight:900;background:var(--g);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-lbl{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}

/* Phone mockup */
.phone-wrap{position:relative;z-index:1;margin-top:40px;animation:phoneIn 1s ease .5s both}
@keyframes phoneIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.phone{width:220px;margin:0 auto;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:36px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.05);animation:phoneFloat 4s ease-in-out infinite alternate}
@keyframes phoneFloat{0%{transform:translateY(0)}100%{transform:translateY(-12px)}}
.phone-screen{background:#fff;border-radius:24px;overflow:hidden}
.phone-head{background:linear-gradient(135deg,#6c63ff,#e040fb);padding:12px;text-align:center}
.phone-head-name{font-size:12px;font-weight:700;color:#fff}
.phone-head-amt{font-size:20px;font-weight:900;color:#fff}
.phone-qr-area{padding:14px;text-align:center;background:#fff}
.phone-qr{width:100px;height:100px;margin:0 auto 8px;background:linear-gradient(135deg,#f0f0f0,#e0e0e0);border-radius:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:8px}
.qr-px{border-radius:2px;background:#6c63ff}
.phone-apps{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 10px}
.pa{background:#f8f8f8;border-radius:8px;padding:6px;text-align:center;font-size:9px;font-weight:600;color:#333}
.phone-success{display:none;background:linear-gradient(135deg,#064e3b,#10b981);padding:14px;text-align:center;color:#fff}
.phone-success.show{display:block}
.ps-icon{font-size:28px;margin-bottom:4px}
.ps-title{font-size:12px;font-weight:800}

/* ── FEATURES ── */
.features{padding:80px 20px;background:#0a0a12;position:relative}
.features::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(108,99,255,.3),transparent)}
.sec-badge{display:inline-block;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);border-radius:50px;padding:5px 14px;font-size:12px;color:#6c63ff;font-weight:600;margin-bottom:12px}
.sec-title{font-size:clamp(24px,5vw,38px);font-weight:900;margin-bottom:12px;text-align:center}
.sec-sub{font-size:15px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:40px;line-height:1.6}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:900px;margin:0 auto}
.feat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:24px;transition:.3s;position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--g);opacity:0;transition:.3s}
.feat-card:hover{transform:translateY(-6px);border-color:rgba(108,99,255,.3);background:rgba(108,99,255,.06)}
.feat-card:hover::before{opacity:1}
.feat-icon{width:48px;height:48px;border-radius:14px;background:rgba(108,99,255,.15);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.feat-name{font-size:16px;font-weight:700;margin-bottom:8px}
.feat-desc{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.6}

/* ── HOW IT WORKS ── */
.how{padding:80px 20px;background:#0d0d1a;position:relative}
.how::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(224,64,251,.3),transparent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:800px;margin:0 auto}
.step{text-align:center;padding:20px}
.step-num{width:50px;height:50px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;margin:0 auto 14px;box-shadow:0 6px 20px rgba(108,99,255,.3)}
.step-name{font-size:15px;font-weight:700;margin-bottom:8px}
.step-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6}
.step-arrow{display:none}

/* ── UPI PARTNERS ── */
.partners{padding:50px 20px;background:#0a0a12;text-align:center}
.partners-title{font-size:14px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;font-weight:600}
.partners-logos{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.partner-logo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 18px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:rgba(255,255,255,.6);transition:.2s}
.partner-logo:hover{background:rgba(255,255,255,.1);color:#fff}
.partner-logo img{height:22px;object-fit:contain;filter:grayscale(1) brightness(2);opacity:.6}

/* ── CTA ── */
.cta{padding:80px 20px;background:linear-gradient(135deg,#0f0c29,#1a0533);text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(108,99,255,.15),transparent 60%)}
.cta h2{font-size:clamp(24px,5vw,40px);font-weight:900;margin-bottom:14px}
.cta p{font-size:16px;color:rgba(255,255,255,.55);margin-bottom:28px}

/* ── FOOTER ── */
footer{padding:28px 20px;background:#080810;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
footer p{font-size:13px;color:rgba(255,255,255,.25)}
footer a{color:rgba(255,255,255,.4);text-decoration:none}

/* Scroll animations */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:480px){
  .nav-logo-name{font-size:15px}
  .hero{padding:90px 16px 50px}
  .phone{width:190px}
  .stats{gap:16px}
  .stat-num{font-size:22px}
}
</style>
</head>
<body>

<!-- NAVBAR -->
<nav class="nav">
  <div class="nav-logo">
    <img src="<?php echo $site_settings['logo_url'] ?? ''; ?>" alt="Logo" onerror="this.style.display='none'">
    <span class="nav-logo-name"><?php echo htmlspecialchars($site_settings['brand_name']); ?></span>
  </div>
  <div class="nav-links">
    <a href="auth/index" class="nav-btn nav-login">Login</a>
    <a href="Register" class="nav-btn nav-reg">Get Started</a>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-bg"></div>
  <div class="grid-lines"></div>
  <div class="hero-orb ho1"></div>
  <div class="hero-orb ho2"></div>
  <div class="hero-orb ho3"></div>
  <div class="particles" id="particles"></div>

  <div style="position:relative;z-index:1;width:100%;max-width:1100px">
    <div class="hero-content">
      <div class="hero-badge"><span class="dot"></span>🇮🇳 India's Trusted UPI Gateway</div>
      <h1>Accept Payments<br>with <span class="grad-text">Smart UPI</span></h1>
      <p>Instant QR codes · Payment links · All UPI apps supported<br>Start accepting payments in minutes — no coding required</p>
      <div class="hero-btns">
        <a href="Register" class="btn-hero-p"><i class="fas fa-rocket"></i>Start Free Today</a>
        <a href="auth/index" class="btn-hero-s"><i class="fas fa-sign-in-alt"></i>Login to Dashboard</a>
      </div>
      <div class="stats">
        <div class="stat"><div class="stat-num"><?php echo $statTxnDisplay; ?></div><div class="stat-lbl">Transactions</div></div>
        <div class="stat"><div class="stat-num"><?php echo $statMerchantDisplay; ?></div><div class="stat-lbl">Merchants</div></div>
        <div class="stat"><div class="stat-num">99.9%</div><div class="stat-lbl">Uptime</div></div>
        <div class="stat"><div class="stat-num"><?php echo $statVolumeDisplay; ?></div><div class="stat-lbl">Processed</div></div>
      </div>
    </div>

    <!-- Phone Mockup -->
    <div class="phone-wrap">
      <div class="phone">
        <div class="phone-screen">
          <div class="phone-head">
            <div class="phone-head-name"><?php echo htmlspecialchars($site_settings['brand_name']); ?></div>
            <div class="phone-head-amt">₹499.00</div>
          </div>
          <div class="phone-qr-area">
            <div class="phone-qr" id="miniQR"></div>
            <div style="font-size:9px;color:#888;margin-bottom:8px">Scan to pay instantly</div>
            <div class="phone-apps">
              <div class="pa">📱 GPay</div>
              <div class="pa">💜 PhonePe</div>
              <div class="pa">🔵 Paytm</div>
              <div class="pa">🟢 BHIM</div>
            </div>
          </div>
          <div class="phone-success" id="phoneSuccess">
            <div class="ps-icon">✅</div>
            <div class="ps-title">Payment Successful!</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FEATURES -->
<section class="features">
  <div style="text-align:center;margin-bottom:40px" class="reveal">
    <div class="sec-badge">✨ Features</div>
    <h2 class="sec-title">Everything You Need to <span class="grad-text">Get Paid</span></h2>
    <p class="sec-sub">Powerful tools to accept, manage and grow your payments</p>
  </div>
  <div class="feat-grid reveal">
    <div class="feat-card">
      <div class="feat-icon">📱</div>
      <div class="feat-name">Instant QR Code</div>
      <div class="feat-desc">Generate beautiful, scannable QR codes instantly. Works with all UPI apps — GPay, PhonePe, Paytm and more.</div>
    </div>
    <div class="feat-card">
      <div class="feat-icon">🔗</div>
      <div class="feat-name">Payment Links</div>
      <div class="feat-desc">Share payment links via WhatsApp, SMS or email. Customer clicks and pays — simple as that.</div>
    </div>
    <div class="feat-card">
      <div class="feat-icon">⚡</div>
      <div class="feat-name">Auto Verification</div>
      <div class="feat-desc">Payments verified automatically in real-time. No manual checking — dashboard updates instantly.</div>
    </div>
    <div class="feat-card">
      <div class="feat-icon">📊</div>
      <div class="feat-name">Live Dashboard</div>
      <div class="feat-desc">Track all transactions, pending payments and analytics in one beautiful dashboard.</div>
    </div>
    <div class="feat-card">
      <div class="feat-icon">🔒</div>
      <div class="feat-name">Bank-Grade Security</div>
      <div class="feat-desc">256-bit SSL encryption, secure webhooks and fraud detection to keep your money safe.</div>
    </div>
    <div class="feat-card">
      <div class="feat-icon">🎨</div>
      <div class="feat-name">Custom Branding</div>
      <div class="feat-desc">Add your logo, brand colors and custom QR designs. Make your payment page truly yours.</div>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="how">
  <div style="text-align:center;margin-bottom:40px" class="reveal">
    <div class="sec-badge">🚀 How It Works</div>
    <h2 class="sec-title">Up and Running in <span class="grad-text">3 Simple Steps</span></h2>
  </div>
  <div class="steps reveal">
    <div class="step">
      <div class="step-num">1</div>
      <div class="step-name">Register Free</div>
      <div class="step-desc">Create your account with just your name and mobile number. No documents needed to start.</div>
    </div>
    <div class="step">
      <div class="step-num">2</div>
      <div class="step-name">Choose a Plan</div>
      <div class="step-desc">Pick the plan that suits your business. Activate instantly after payment — no waiting.</div>
    </div>
    <div class="step">
      <div class="step-num">3</div>
      <div class="step-name">Start Accepting</div>
      <div class="step-desc">Generate your QR or payment link and start accepting UPI payments from anyone in India.</div>
    </div>
  </div>
</section>

<!-- UPI PARTNERS -->
<section class="partners">
  <div class="partners-title">Accepted by all major UPI apps</div>
  <div class="partners-logos">
    <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Google_Pay_Logo.svg/512px-Google_Pay_Logo.svg.png" alt="GPay">Google Pay</div>
    <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/PhonePe_Logo.png/120px-PhonePe_Logo.png" alt="PhonePe">PhonePe</div>
    <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Paytm_logo.png" alt="Paytm">Paytm</div>
    <div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/en/a/a8/BHIM_logo.png" alt="BHIM">BHIM UPI</div>
    <div class="partner-logo"><i class="fas fa-mobile-alt"></i>Any UPI App</div>
  </div>
</section>

<!-- CTA -->
<section class="cta reveal">
  <h2>Ready to Accept <span class="grad-text">UPI Payments?</span></h2>
  <p>Join thousands of merchants — set up in under 2 minutes</p>
  <a href="Register" class="btn-hero-p" style="display:inline-flex"><i class="fas fa-rocket"></i>Create Free Account</a>
</section>

<!-- FOOTER -->
<footer>
  <p>© <?php echo date('Y'); ?> <a href="#"><?php echo htmlspecialchars($site_settings['brand_name']); ?></a> · All UPI Payments Secured · <a href="auth/index">Login</a> · <a href="Register">Register</a> · <a href="privacy-policy">Privacy Policy</a> · <a href="terms">Terms</a></p>
</footer>

<script>
// Particles
(function(){
  var c=document.getElementById('particles');
  for(var i=0;i<20;i++){
    var p=document.createElement('div');p.className='par';
    var sz=Math.random()*3+1;
    p.style.cssText='width:'+sz+'px;height:'+sz+'px;left:'+Math.random()*100+'%;bottom:-10px;animation-duration:'+(8+Math.random()*12)+'s;animation-delay:'+Math.random()*10+'s;opacity:'+(0.2+Math.random()*0.4);
    c.appendChild(p);
  }
})();

// Mini QR pattern in phone
(function(){
  var g=document.getElementById('miniQR');if(!g)return;
  var pat=[1,1,1,0,1,1,1,1,0,0,0,0,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,0,0,0,0,1,1,1,1,1,0,1,1,1];
  pat.forEach(function(v){var d=document.createElement('div');d.className='qr-px';d.style.background=v?'#6c63ff':'#f0f0f0';g.appendChild(d);});
})();

// Phone success animation demo
setTimeout(function(){
  var s=document.getElementById('phoneSuccess');
  if(s){s.classList.add('show');setTimeout(function(){s.classList.remove('show');},2500);}
},3000);
setInterval(function(){
  var s=document.getElementById('phoneSuccess');
  if(s){s.classList.add('show');setTimeout(function(){s.classList.remove('show');},2500);}
},7000);

// Scroll reveal
var reveals=document.querySelectorAll('.reveal');
var obs=new IntersectionObserver(function(entries){
  entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('visible');}});
},{threshold:0.15});
reveals.forEach(function(r){obs.observe(r);});
</script>
</body>
</html>
