<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>STK Payments</title>
  <link rel="icon" type="image/x-icon" href="icon.png">
  <style>
    :root{
      --primary:#16a34a;
      --primary-dark:#15803d;
      --dark:#020617;
      --dark-soft:#0f172a;
      --bg:#c1c4c7;
      --card:#d9ddfa;
      --text:#1e293b;
      --muted:#64748b;
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }

    header{
      background:var(--dark);
      color:#fff;
      padding:18px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    header h1{
      margin:0;
      font-size:1.2rem;
      font-weight:600;
    }
    .header-actions{
      display:flex;
      gap:16px;
      align-items:center;
    }
    header a{
      color:#e5e7eb;
      text-decoration:none;
      font-size:.9rem;
    }
    header a:hover{color:#fff}

    .hero{
      padding:90px 20px;
      text-align:center;
      background:
        radial-gradient(800px circle at top, rgba(22,163,74,.25), transparent 40%),
        linear-gradient(135deg,#0a943d,#0a943d);
      color:#fff;
    }
    .hero h2{
      font-size:2.4rem;
      margin:0 0 12px;
      letter-spacing:-.02em;
    }
    .hero p{
      max-width:640px;
      margin:0 auto 28px;
      color:#ecfdf5;
    }
    .hero a{
      display:inline-block;
      margin:6px;
      padding:14px 22px;
      border-radius:999px;
      background:#fff;
      color:#166534;
      font-weight:600;
      text-decoration:none;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .hero a:hover{
      transform:translateY(-2px);
      box-shadow:0 14px 35px rgba(0,0,0,.35);
    }

    .features{
      max-width:1150px;
      margin:-60px auto 60px;
      padding:0 20px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:24px;
    }
    .card{
      background:var(--card);
      border-radius:var(--radius);
      padding:28px 24px;
      box-shadow:0 20px 40px rgba(2,6,23,.08);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      box-shadow:0 28px 60px rgba(2,6,23,.12);
    }
    .card h3{
      margin:0 0 8px;
      font-size:1.1rem;
    }
    .card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }

    .cta{
      background:linear-gradient(135deg,var(--dark-soft),var(--dark));
      color:#fff;
      text-align:center;
      padding:70px 20px;
    }
    .cta h2{
      margin:0 0 8px;
      font-size:2rem;
    }
    .cta p{margin:0;color:#cbd5f5}

    footer{
      background:var(--dark);
      color:#94a3b8;
      text-align:center;
      padding:18px;
      font-size:.85rem;
    }

    @media(max-width:640px){
      .hero{padding:70px 16px}
      .hero h2{font-size:1.9rem}
    }
  </style>
</head>
<body>

<header>
  <h1>STK</h1>
  <div class="header-actions">
    <a href="" >Transactions</a>
    <a href="/admin" target="_blank">Dashboard</a>
  </div>
</header>

<section class="hero">
  <h2>Fast & Secure Payments</h2>
  <p>Accept mobile payments instantly, generate receipts, and manage transactions with ease.</p>
  <a href="/sal" target="_blank">Swingtide</a>
  <a href="/ham" target="_blank">Hamotel</a>
  <a href="/tnd" target="_blank">Tanidot</a>
  
</section>

<section class="features">
  <div class="card">
    <h3>Instant Mpesa</h3>
    <p>Receive payments in real time with automatic confirmation.</p>
  </div>
  <div class="card">
    <h3>PDF Receipts</h3>
    <p>Professional downloadable and printable receipts.</p>
  </div>
  <div class="card">
    <h3>Mobile Friendly</h3>
    <p>Optimized for phones, tablets, and desktops.</p>
  </div>
  <div class="card">
    <h3>Secure</h3>
    <p>Your transactions are handled with modern security standards.</p>
  </div>
</section>

<section class="cta">
  <h2>Ready to Get Started?</h2>
  <p>Start accepting payments today.</p>
</section>

<footer>
  &copy; <?= date('Y') ?> Swingtide. All rights reserved.
</footer>

</body>
</html>
