<?php
// The keylair.com sales page -- included by welcome.php only when the
// request host matches that domain (see the comment there). A separate
// file rather than inlined so welcome.php's own diff stays small and this
// can be iterated on independently.
//
// Palette/type intentionally mirror the real product's own design tokens
// (resources/css-defaults/tokens.css) plus one added accent, --hoard: the
// official brand mark (public/assets/hero-image.png) is a gold dragon
// fused with a keyhole -- "lair" as in hoard, not just storage -- and
// that gold carries through the brand mark's glow, the Premium tier, and
// anything meant to read as "the treasure," while the product's own
// --signal blue stays the workaday UI accent everywhere else.
//
// Screenshots under /assets/sales/ are real captures from a live install
// (not mockups) -- see CHANGELOG for how. Pricing/tier scope here is an
// early draft, not final; the "Coming soon" Premium tier has no actual
// license enforcement yet.
use KeyLair\Csrf;
use KeyLair\Helpers;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Key Lair</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<?= \KeyLair\Settings::faviconTag() ?>
<style>
  :root{
    --bg-void:#17212e;
    --bg-panel:#1c2733;
    --bg-panel-2:#24323f;
    --sidebar:#131b25;
    --line:#2a3947;
    --line-soft:#22303c;
    --text-primary:#dbe3ea;
    --text-muted:#8a97a3;
    --text-faint:#56626d;
    --signal:#5aa8dd;
    --signal-dim:#3d7aa8;
    --danger:#d9614a;
    --hoard:#e0b34d;
    --hoard-dim:#8a6420;
    --radius-lg:18px;
    --radius-md:12px;
    --radius-sm:8px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--bg-void);
    color:var(--text-primary);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; }
  p{ margin:0; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  code, .mono{ font-family:var(--font-mono); }

  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

  .nav{ position:sticky; top:0; z-index:50; background:rgba(23,33,46,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; }
  .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em; text-decoration:none; }
  .brand-mark{ width:28px; height:28px; display:block; }
  .brand-mark img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 5px rgba(224,179,77,0.45)); }
  .nav-links{ display:flex; align-items:center; gap:30px; font-size:14px; font-weight:500; }
  .nav-links a{ text-decoration:none; color:var(--text-muted); transition:color .15s; }
  .nav-links a:hover{ color:var(--text-primary); }
  .nav-cta{
    background:linear-gradient(155deg, var(--hoard) 0%, var(--hoard-dim) 100%); color:#20140a; padding:9px 18px; border-radius:999px;
    font-weight:600; text-decoration:none; font-size:13.5px;
    box-shadow:0 6px 18px -6px rgba(224,179,77,0.55);
  }
  @media (max-width:760px){ .nav-links{ display:none; } }

  .hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
  .hero::before{
    content:''; position:absolute; top:-260px; left:50%; transform:translateX(-50%);
    width:1000px; height:620px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(224,179,77,0.16), rgba(255,154,60,0.05) 55%, rgba(224,179,77,0) 75%);
    pointer-events:none;
  }
  .hero-inner{ position:relative; text-align:center; }
  .hero-mark{ width:104px; height:104px; margin:0 auto 22px; position:relative; }
  .hero-mark::before{
    content:''; position:absolute; inset:-30px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(224,179,77,0.35), rgba(224,179,77,0) 70%);
    filter:blur(2px);
  }
  .hero-mark img{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 22px rgba(224,179,77,0.4)); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--bg-panel); border:1px solid var(--line); color:var(--text-muted);
    padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
    letter-spacing:0.02em; margin-bottom:22px;
  }
  .eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--hoard); box-shadow:0 0 8px var(--hoard); }
  .hero h1{ font-size:52px; line-height:1.05; letter-spacing:-0.02em; font-weight:700; max-width:760px; margin:0 auto; }
  .hero h1 .accent{ color:var(--hoard); }
  .hero-sub{ max-width:560px; margin:22px auto 0; color:var(--text-muted); font-size:17px; line-height:1.6; }
  .hero-ctas{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:14.5px;
    padding:13px 24px; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  }
  .btn-primary{ background:linear-gradient(155deg, var(--hoard) 0%, var(--hoard-dim) 100%); color:#20140a; box-shadow:0 10px 24px -8px rgba(224,179,77,0.55); }
  .btn-ghost{ background:var(--bg-panel); color:var(--text-primary); border-color:var(--line); }
  .hero-meta{ margin-top:20px; color:var(--text-faint); font-size:12.5px; }

  .shot-frame{ margin:56px auto 0; max-width:920px; position:relative; }
  .shot-chrome{ background:var(--sidebar); border:1px solid var(--line); border-radius:16px 16px 0 0; padding:12px 16px; display:flex; align-items:center; gap:8px; }
  .shot-dot{ width:10px; height:10px; border-radius:50%; background:var(--line-soft); }
  .shot-url{ margin-left:10px; background:var(--bg-void); border:1px solid var(--line); border-radius:7px; padding:5px 14px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
  .shot-body{
    border:1px solid var(--line); border-top:none; border-radius:0 0 16px 16px;
    overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,0.65), 0 0 0 1px rgba(224,179,77,0.12), 0 0 60px -20px rgba(224,179,77,0.25);
  }
  .shot-body img{ width:100%; }

  section{ padding:96px 0; }
  .section-head{ text-align:center; max-width:600px; margin:0 auto 52px; }
  .section-kicker{ color:var(--signal); font-weight:700; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; display:block; }
  .section-head h2{ font-size:34px; letter-spacing:-0.015em; }
  .section-head p{ color:var(--text-muted); font-size:15.5px; margin-top:14px; line-height:1.6; }

  .feature-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
  @media (max-width:1050px){ .feature-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 22px; }
  .feature-icon{
    width:38px; height:38px; border-radius:11px; background:var(--bg-panel-2); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--signal);
  }
  .feature-icon svg{ width:19px; height:19px; }
  .feature-card h3{ font-size:15.5px; font-weight:600; font-family:var(--font-body); margin-bottom:8px; }
  .feature-card p{ color:var(--text-muted); font-size:13.5px; line-height:1.55; }
  .feature-card.flagship{ border-color:var(--hoard); background:linear-gradient(180deg, rgba(224,179,77,0.09), var(--bg-panel) 55%); }
  .feature-card.flagship .feature-icon{ color:var(--hoard); border-color:var(--hoard-dim); }

  .showcase{ background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .showcase-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
  @media (max-width:880px){ .showcase-grid{ grid-template-columns:1fr; gap:40px; } }
  .showcase-copy .section-kicker{ display:block; text-align:left; }
  .showcase-copy h2{ font-size:30px; letter-spacing:-0.01em; text-align:left; text-wrap:balance; }
  .showcase-copy p{ color:var(--text-muted); font-size:15px; line-height:1.65; margin-top:16px; }
  .showcase-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
  .showcase-list li{ display:flex; gap:12px; align-items:flex-start; list-style:none; font-size:13.5px; color:var(--text-muted); line-height:1.5; }
  .showcase-list svg{ flex-shrink:0; width:16px; height:16px; margin-top:2px; color:var(--hoard); }
  .showcase-list strong{ color:var(--text-primary); font-weight:600; }

  .mini-shot{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,0.6); }
  .mini-shot-bar{ background:var(--sidebar); padding:10px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
  .mini-shot-bar svg{ width:14px; height:14px; color:var(--hoard); flex-shrink:0; }
  .mini-shot-label{ color:var(--text-primary); font-size:12.5px; font-weight:600; font-family:var(--font-display); }
  .mini-shot img{ width:100%; display:block; }

  .tour-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  @media (max-width:900px){ .tour-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .tour-grid{ grid-template-columns:1fr; } }
  .tour-card{ background:var(--bg-void); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
  .tour-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--sidebar); }
  .tour-head svg{ width:14px; height:14px; color:var(--hoard); flex-shrink:0; }
  .tour-head span{ font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--text-primary); }
  .tour-shot{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; display:block; }

  .pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch; }
  @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
  .price-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; display:flex; flex-direction:column; }
  .price-card.highlight{ border-color:var(--hoard); background:linear-gradient(180deg, rgba(224,179,77,0.09), var(--bg-panel) 40%); position:relative; }
  .price-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--hoard); color:#20140a; font-size:11px; font-weight:700;
    padding:4px 14px; border-radius:999px; letter-spacing:0.02em;
  }
  .price-tier{ font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
  .price-card.highlight .price-tier{ color:var(--hoard); }
  .price-amount{ font-family:var(--font-display); font-size:38px; font-weight:700; margin-top:14px; letter-spacing:-0.01em; }
  .price-amount span{ font-size:14px; color:var(--text-faint); font-weight:500; font-family:var(--font-body); }
  .price-desc{ color:var(--text-muted); font-size:13px; margin-top:8px; line-height:1.5; min-height:36px; }
  .price-eligibility{
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text-muted);
    padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:600;
  }
  .price-eligibility svg{ width:12px; height:12px; flex-shrink:0; color:var(--text-faint); }
  .price-list{ margin:24px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; flex:1; }
  .price-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-muted); line-height:1.45; }
  .price-list svg{ flex-shrink:0; width:15px; height:15px; margin-top:2px; color:var(--hoard); }
  .price-list li.soon{ color:var(--text-faint); }
  .price-list li.soon svg{ color:var(--text-faint); }
  .price-card .btn{ margin-top:26px; justify-content:center; width:100%; }
  .price-foot{ text-align:center; color:var(--text-faint); font-size:12px; margin-top:36px; }

  .cta-band{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:56px 40px; text-align:center; position:relative; overflow:hidden; }
  .cta-band::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(600px 200px at 50% 0%, rgba(224,179,77,0.14), transparent);
    pointer-events:none;
  }
  .cta-band h2{ font-size:28px; position:relative; }
  .cta-band p{ color:var(--text-muted); margin-top:12px; font-size:14.5px; position:relative; }
  .cta-band .hero-ctas{ margin-top:26px; position:relative; }

  footer{ border-top:1px solid var(--line); padding:40px 0; }
  .foot-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  .foot-links{ display:flex; gap:22px; font-size:13px; color:var(--text-muted); }
  .foot-links a{ text-decoration:none; }
  .foot-links a:hover{ color:var(--text-primary); }
  .foot-copy{ color:var(--text-faint); font-size:12.5px; }
  @media (max-width:700px){
    .foot-inner{ flex-direction:column; justify-content:center; text-align:center; }
  }

  .shot-body img, .mini-shot img, .tour-shot{ cursor:zoom-in; }
  .lightbox-overlay{
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(10,14,20,0.92); backdrop-filter:blur(4px);
    align-items:center; justify-content:center; padding:48px; cursor:zoom-out;
  }
  .lightbox-overlay.open{ display:flex; }
  .lightbox-overlay img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 40px 100px -20px rgba(0,0,0,0.7); cursor:default; }
  .lightbox-close{
    position:fixed; top:24px; right:28px; width:40px; height:40px; border-radius:50%;
    background:var(--bg-panel); border:1px solid var(--line); color:var(--text-primary);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; line-height:1;
  }
</style>
</head>
<body>

<nav class="nav">
  <div class="nav-inner">
    <a href="/" class="brand">
      <span class="brand-mark"><img src="/assets/hero-image.png" alt=""></span>
      Key Lair
    </a>
    <div class="nav-links">
      <a href="#product">Product</a>
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
    </div>
    <a href="#pricing" class="nav-cta">Get started</a>
  </div>
</nav>

<header class="hero">
  <div class="wrap hero-inner">
    <div class="hero-mark"><img src="/assets/hero-image.png" alt="Key Lair"></div>
    <span class="eyebrow"><span class="eyebrow-dot"></span>Self-hosted &middot; you keep the data</span>
    <h1>Hand creators a key. <span class="accent">Not a spreadsheet.</span></h1>
    <p class="hero-sub">Key Lair is a self-hosted portal for sending review and influencer keys. Send one link — they pick a platform, get an unused key instantly. No accounts, no shared logins, no more tracking who claimed what in a spreadsheet.</p>
    <div class="hero-ctas">
      <a href="#pricing" class="btn btn-primary">
        Get Key Lair
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" width="15" height="15"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
      <button type="submit" form="demo-login-form" class="btn btn-ghost">See it live</button>
    </div>
    <form action="/admin/login.php" method="post" id="demo-login-form" style="display:none;">
      <?= Csrf::field() ?>
      <input type="hidden" name="action" value="login">
      <input type="hidden" name="username" value="demo">
      <input type="hidden" name="password" value="demo">
    </form>
    <p class="hero-meta">PHP + MySQL &middot; runs on any standard web host &middot; no per-key or per-seat fees on the Community edition</p>

    <div class="shot-frame" id="product">
      <div class="shot-chrome">
        <span class="shot-dot"></span><span class="shot-dot"></span><span class="shot-dot"></span>
        <span class="shot-url">yourdomain.com/claim/f93a2b1c…/your-product</span>
      </div>
      <div class="shot-body">
        <img src="/assets/sales/hero-claim-page.jpg" alt="A real Key Lair claim page — a creator's view after opening their personal link.">
      </div>
    </div>
  </div>
</header>

<section id="features">
  <div class="wrap">
    <div class="section-head">
      <span class="section-kicker">Why teams switch</span>
      <h2>Everything a key drop needs. Nothing it doesn't.</h2>
      <p>Built for the handful of things that actually go wrong with a spreadsheet full of keys — someone claims the same one twice, nobody knows who has what, and stock runs out silently.</p>
    </div>
    <div class="feature-grid">
      <div class="feature-card flagship">
        <div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V8a5 5 0 0110 0v3"/><circle cx="12" cy="16" r="1.6"/></svg></div>
        <h3>Full control over every key</h3>
        <p>Manage your whole key inventory from one place — mark keys active, inactive, or redeemed by hand, or let claims update status automatically. Built for hosters who need to know exactly what's left.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l5 5L20 6"/></svg></div>
        <h3>Nothing to install for them</h3>
        <p>A creator opens their link, picks a platform, and their key is waiting. No account, no login, no app to download.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l8 4v5c0 5-3.4 7.4-8 9-4.6-1.6-8-4-8-9V7l8-4z"/></svg></div>
        <h3>Every key handed out once</h3>
        <p>Atomic allocation under load, so two people can never receive the same key — with a full redemption log to match.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 10h18M8 4v4"/></svg></div>
        <h3>Your server, your data</h3>
        <p>Self-hosted on infrastructure you already control. Keys and creator details never pass through a third party.</p>
      </div>
      <div class="feature-card">
        <div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><path d="M2 20c1-4 3.5-6 7-6s6 2 7 6"/><circle cx="17" cy="8" r="2.5"/><path d="M16 14.2c2.7.4 4.2 2.2 5 5.8"/></svg></div>
        <h3>Built for a whole team</h3>
        <p>Multiple admin accounts with real roles, two-factor login, and an audit log — not one shared password in a doc.</p>
      </div>
    </div>
  </div>
</section>

<section class="showcase">
  <div class="wrap showcase-grid">
    <div class="showcase-copy">
      <span class="section-kicker">The admin side</span>
      <h2>One dashboard for every product, platform, and campaign.</h2>
      <p>Import keys by the thousand, group them into campaigns, and see exactly what's been claimed — without opening a single spreadsheet.</p>
      <ul class="showcase-list">
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg><span><strong>CSV import with dedup</strong> — paste or upload, duplicates and malformed keys are caught automatically.</span></li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg><span><strong>Campaigns &amp; creator groups</strong> — set claim limits once, reuse them across every link.</span></li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg><span><strong>A real claim-page editor</strong> — cover art, screenshots, trailer, intro/outro copy, live preview.</span></li>
      </ul>
    </div>
    <div>
      <div class="mini-shot">
        <div class="mini-shot-bar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="9" width="16" height="10" rx="2"/><path d="M8 9V6a4 4 0 018 0v3"/></svg><span class="mini-shot-label">Keys/Codes</span></div>
        <img src="/assets/sales/screen-keys.jpg" alt="A real Key Lair Keys/Codes screen, showing individual key status.">
      </div>
    </div>
  </div>
</section>

<section id="tour">
  <div class="wrap">
    <div class="section-head">
      <span class="section-kicker">The full tour</span>
      <h2>Every page, at a glance.</h2>
      <p>Key Lair is one connected admin panel, not a single trick — here's a look at more of it.</p>
    </div>
    <div class="tour-grid">

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg><span>Dashboard</span></div>
        <img class="tour-shot" src="/assets/sales/screen-dashboard.jpg" alt="Real Key Lair Dashboard screen">
      </div>

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18"/></svg><span>Campaigns</span></div>
        <img class="tour-shot" src="/assets/sales/screen-campaigns.jpg" alt="Real Key Lair Campaigns screen">
      </div>

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1.5 1.5"/><path d="M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1.5-1.5"/></svg><span>Claim Links</span></div>
        <img class="tour-shot" src="/assets/sales/screen-claimlinks.jpg" alt="Real Key Lair Claim Links screen">
      </div>

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-5 4.5-7 8-7s6.5 2 8 7"/></svg><span>Users</span></div>
        <img class="tour-shot" src="/assets/sales/screen-users.jpg" alt="Real Key Lair Users screen">
      </div>

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M12 20V4M20 20v-7"/></svg><span>Analytics</span></div>
        <img class="tour-shot" src="/assets/sales/screen-analytics.jpg" alt="Real Key Lair Analytics screen">
      </div>

      <div class="tour-card">
        <div class="tour-head"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><circle cx="11" cy="11" r="2"/></svg><span>Design</span></div>
        <img class="tour-shot" src="/assets/sales/screen-design.jpg" alt="Real Key Lair Design screen">
      </div>

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

<section id="pricing">
  <div class="wrap">
    <div class="section-head">
      <span class="section-kicker">Pricing</span>
      <h2>Free to self-host. Premium when you outgrow it.</h2>
      <p>The Community edition is the whole core product, not a trial — no key or seat limits. Premium adds the tooling larger teams and agencies ask for. Both are for studios with up to €100k in annual revenue — above that, Enterprise.</p>
    </div>

    <div class="pricing-grid">
      <div class="price-card">
        <span class="price-tier">Community</span>
        <div class="price-amount">Free</div>
        <p class="price-desc">Self-hosted, unlimited keys and claim links, yours to run forever.</p>
        <span class="price-eligibility"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H7"/></svg>Up to €100k annual revenue</span>
        <ul class="price-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Unlimited products, platforms &amp; claim links</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Campaigns, creator groups, CSV import/export</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Multiple admin accounts with 2FA</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Community support</li>
        </ul>
        <a href="/download.php" class="btn btn-ghost">Download Community</a>
      </div>

      <div class="price-card highlight">
        <span class="price-badge">Coming soon</span>
        <span class="price-tier">Premium</span>
        <div class="price-amount">€99<span> / major version, + VAT</span></div>
        <p class="price-desc">Everything in Community, plus the tools a larger publishing team needs.</p>
        <span class="price-eligibility"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H7"/></svg>Up to €100k annual revenue</span>
        <ul class="price-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>API access &amp; mail-tool integrations (Sendy and more)</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Claim-page design customization</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Analytics</li>
          <li class="soon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Multi-language admin UI</li>
          <li class="soon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>One-time price per major release, not a subscription</li>
        </ul>
        <a href="mailto:contact@secret-item-games.com?subject=Key%20Lair%20Premium%20waitlist&body=<?= rawurlencode("Hi,\n\nI'd like to join the waitlist for Key Lair Premium. Please let me know when it's available.") ?>" class="btn btn-primary">Join the waitlist</a>
      </div>

      <div class="price-card">
        <span class="price-tier">Enterprise</span>
        <div class="price-amount">Let's talk</div>
        <p class="price-desc">For studios and publishers over €100k in annual revenue, running Key Lair at scale, or across multiple brands.</p>
        <ul class="price-list">
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Everything in Premium</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Direct onboarding &amp; setup support</li>
          <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M4 12l5 5L20 6"/></svg>Priority feature requests</li>
        </ul>
        <a href="mailto:contact@secret-item-games.com?subject=Key%20Lair%20Enterprise&body=<?= rawurlencode("Hi,\n\nI'm interested in Key Lair Enterprise. Please get in touch to discuss pricing and scope for our team.") ?>" class="btn btn-ghost">Contact us</a>
      </div>
    </div>
    <p class="price-foot">Premium pricing and scope shown here is an early draft, not final — see it before it's real.</p>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="cta-band">
      <h2>Stop tracking keys in a spreadsheet.</h2>
      <p>Self-host Key Lair on infrastructure you already have — most installs are running in under fifteen minutes.</p>
      <div class="hero-ctas">
        <a href="#pricing" class="btn btn-primary">Get Key Lair</a>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap foot-inner">
    <a href="/" class="brand" style="font-size:15px;">
      <span class="brand-mark" style="width:22px; height:22px;"><img src="/assets/hero-image.png" alt=""></span>
      Key Lair
    </a>
    <div class="foot-links">
      <a href="#features">Features</a>
      <a href="#pricing">Pricing</a>
      <a href="/imprint">Imprint</a>
      <a href="/privacy">Privacy</a>
    </div>
    <span class="foot-copy">A product by Secret Item Games GmbH</span>
  </div>
</footer>

<div class="lightbox-overlay" id="lightbox">
  <button type="button" class="lightbox-close" aria-label="Close">&times;</button>
  <img alt="">
</div>
<script>
(function(){
  var overlay = document.getElementById('lightbox');
  var overlayImg = overlay.querySelector('img');

  function openLightbox(src, alt){
    overlayImg.src = src;
    overlayImg.alt = alt || '';
    overlay.classList.add('open');
  }
  function closeLightbox(){
    overlay.classList.remove('open');
    overlayImg.src = '';
  }

  overlay.addEventListener('click', closeLightbox);
  overlayImg.addEventListener('click', function(e){ e.stopPropagation(); });
  document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeLightbox(); });

  document.querySelectorAll('.shot-body img, .mini-shot img, .tour-shot').forEach(function(img){
    img.addEventListener('click', function(){ openLightbox(img.src, img.alt); });
  });
})();
</script>
</body>
</html>
