<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kingdom Keys 1ON1 | Let's Talk Scripture</title>
<meta name="description" content="Kingdom Keys 1ON1 — Let's Talk Scripture. Bible teaching, prophetic insight, New Covenant understanding, Revelation studies, events, and ministry resources.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
:root{
  --black:#080808;
  --dark:#111;
  --gold:#c8a85b;
  --gold2:#e0c47d;
  --cream:#f8f4ea;
  --white:#fff;
  --text:#222;
  --muted:#777;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  background:#fff;
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,92%);margin:auto}

/* HEADER */
header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  border-bottom:1px solid #ececec;
}
.nav{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.logo{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo-mark{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--black);
  color:var(--gold);
  display:grid;
  place-items:center;
  font-family:"Libre Baskerville",serif;
  font-weight:700;
  font-size:19px;
  border:2px solid var(--gold);
}
.logo-text strong{
  display:block;
  font-family:"Libre Baskerville",serif;
  font-size:20px;
  color:#111;
  letter-spacing:.3px;
}
.logo-text span{
  display:block;
  font-size:9px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:5px;
}
.menu{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:600;
}
.menu a{transition:.2s}
.menu a:hover{color:var(--gold)}
.donate{
  background:#000;
  color:#fff!important;
  padding:13px 18px;
}
.mobile-btn{
  display:none;
  border:0;
  background:none;
  font-size:28px;
  cursor:pointer;
}

/* HERO */
.hero{
  min-height:650px;
  position:relative;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.67) 46%,rgba(0,0,0,.18) 100%),
    url("https://images.unsplash.com/photo-1504052434569-70ad5836ab65?auto=format&fit=crop&w=1900&q=85") center/cover no-repeat;
  color:#fff;
}
.hero-inner{
  max-width:760px;
  padding:105px 0;
}
.topline{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  font-weight:700;
}
h1,h2,h3{
  font-family:"Libre Baskerville",serif;
  margin:0;
}
.hero h1{
  font-size:clamp(48px,7vw,90px);
  line-height:1.05;
  margin:22px 0;
}
.hero h1 span{color:var(--gold2)}
.hero p{
  max-width:670px;
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,.88);
}
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:51px;
  padding:0 23px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  font-size:11px;
  border:1px solid transparent;
}
.btn-gold{background:var(--gold);color:#111}
.btn-light{border-color:#fff;color:#fff}
.btn-black{background:#000;color:#fff}

/* INTRO */
.section{padding:95px 0}
.intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:62px;
  align-items:center;
}
.pastor-img{
  min-height:590px;
  background:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),
    url("https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=1200&q=85") center/cover no-repeat;
  position:relative;
}
.pastor-img:after{
  content:"PASTOR TONY GORDON";
  position:absolute;
  left:24px;
  bottom:24px;
  background:#000;
  color:#fff;
  padding:12px 17px;
  font-size:11px;
  letter-spacing:1.6px;
}
.label{
  color:var(--gold);
  font-size:11px;
  letter-spacing:2.8px;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:16px;
}
.title{
  font-size:clamp(38px,5vw,65px);
  line-height:1.12;
  margin-bottom:23px;
  color:#111;
}
.intro .lead{
  font-family:"Libre Baskerville",serif;
  font-size:22px;
  line-height:1.5;
  color:#2b2b2b;
}
.copy{
  color:#666;
  font-size:14px;
  line-height:1.9;
}

/* FEATURE STRIP */
.feature-strip{
  background:#000;
  color:#fff;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.feature-item{
  padding:48px 38px;
  border-right:1px solid rgba(255,255,255,.15);
}
.feature-item:last-child{border-right:0}
.feature-item span{
  color:var(--gold);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:700;
}
.feature-item h3{
  font-size:25px;
  margin:12px 0;
}
.feature-item p{
  color:#aaa;
  font-size:13px;
  line-height:1.7;
}

/* STUDIES */
.studies{background:var(--cream)}
.center{text-align:center;max-width:760px;margin:0 auto 45px}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.card{
  background:#fff;
  min-height:340px;
  padding:34px;
  border-top:4px solid var(--gold);
  box-shadow:0 12px 35px rgba(0,0,0,.06);
}
.card .num{
  color:var(--gold);
  font-family:"Libre Baskerville",serif;
  font-size:40px;
}
.card h3{
  font-size:27px;
  margin:17px 0 13px;
}
.card p{
  color:#777;
  font-size:13px;
  line-height:1.8;
}

/* INVITE */
.invite{
  min-height:610px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.58)),
    url("https://images.unsplash.com/photo-1507692049790-de58290a4334?auto=format&fit=crop&w=1900&q=85") center/cover no-repeat;
  color:#fff;
}
.invite-box{max-width:700px}
.invite h2{
  font-size:clamp(42px,5vw,70px);
  margin:16px 0 24px;
}
.invite p{
  color:#ddd;
  line-height:1.8;
  max-width:650px;
}

/* MEDIA */
.media-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:55px;
  align-items:center;
}
.video{
  min-height:470px;
  background:
    linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)),
    url("https://images.unsplash.com/photo-1475721027785-f74eccf877e2?auto=format&fit=crop&w=1400&q=85") center/cover;
  display:grid;
  place-items:center;
}
.play{
  width:78px;height:78px;border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:25px;padding-left:4px;
}

/* NEWSLETTER */
.newsletter{
  background:var(--gold);
  padding:75px 0;
}
.news-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:end;
}
.newsletter h2{
  font-size:clamp(38px,5vw,60px);
  margin-bottom:14px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
input{
  width:100%;
  padding:15px 13px;
  border:1px solid rgba(0,0,0,.3);
  background:rgba(255,255,255,.55);
}
.email{grid-column:1/-1}

/* FOOTER */
footer{
  background:#050505;
  color:#fff;
  padding:58px 0 25px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:42px;
  padding-bottom:38px;
  border-bottom:1px solid #242424;
}
footer h3{font-size:24px;margin-bottom:14px}
footer p,footer a{font-size:12px;color:#aaa;line-height:1.8}
.foot-links{display:grid;gap:8px}
.bottom{
  display:flex;justify-content:space-between;gap:20px;
  color:#666;font-size:11px;padding-top:22px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .mobile-btn{display:block}
  .menu{
    position:absolute;
    top:84px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    padding:28px 4%;
    border-top:1px solid #eee;
  }
  .menu.open{display:flex}
  .intro,.media-grid,.news-grid,.footer-grid{grid-template-columns:1fr}
  .feature-grid,.cards{grid-template-columns:1fr}
  .feature-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}
}
@media(max-width:560px){
  .nav{min-height:72px}
  .menu{top:72px}
  .logo-mark{width:45px;height:45px;font-size:16px}
  .logo-text strong{font-size:16px}
  .hero{min-height:600px;background-position:58% center}
  .hero-inner{padding:80px 0}
  .buttons{flex-direction:column}
  .btn{width:100%}
  .section{padding:70px 0}
  .pastor-img{min-height:480px}
  .form-grid{grid-template-columns:1fr}
  .email{grid-column:auto}
  .bottom{flex-direction:column}
}
</style>
</head>

<body>

<header>
  <div class="container nav">
    <a class="logo" href="#home">
      <div class="logo-mark">KK</div>
      <div class="logo-text">
        <strong>Kingdom Keys 1ON1</strong>
        <span>Let's Talk Scripture</span>
      </div>
    </a>

    <button class="mobile-btn" id="mobileBtn">☰</button>

    <nav class="menu" id="menu">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#studies">Studies</a>
      <a href="#media">Media</a>
      <a href="#invite">Booking</a>
      <a href="#newsletter">Connect</a>
      <a href="#" class="donate">Donate</a>
    </nav>
  </div>
</header>

<section class="hero" id="home">
  <div class="container">
    <div class="hero-inner">
      <div class="topline">Kingdom Keys 1ON1</div>
      <h1>Unlocking Scripture. <span>Restoring Kingdom Order.</span></h1>
      <p>
        Bible teaching for a generation seeking clarity, covenant understanding,
        prophetic alignment and a deeper revelation of Jesus Christ.
      </p>
      <div class="buttons">
        <a class="btn btn-gold" href="#studies">Explore the Studies</a>
        <a class="btn btn-light" href="#media">Watch Kingdom Keys</a>
      </div>
    </div>
  </div>
</section>

<section class="section" id="about">
  <div class="container intro">
    <div class="pastor-img"></div>
    <div>
      <div class="label">Pastor · Bible Teacher · Prophetic Voice</div>
      <h2 class="title">Let’s Talk Scripture.</h2>
      <p class="lead">
        Kingdom Keys 1ON1 exists to help believers understand Scripture through
        the finished work of Jesus Christ and the order of the New Covenant.
      </p>
      <p class="copy">
        Pastor Tony Gordon teaches with a focus on the Lordship of Jesus Christ,
        the priesthood of Christ, the heavenly tabernacle, covenant understanding,
        prophetic order, Revelation and the transforming work of the Holy Spirit.
        The goal is not simply information, but Kingdom alignment.
      </p>
      <div class="buttons">
        <a class="btn btn-black" href="#studies">Begin a Study</a>
      </div>
    </div>
  </div>
</section>

<section class="feature-strip">
  <div class="container feature-grid">
    <div class="feature-item">
      <span>01 · Covenant</span>
      <h3>New Covenant Understanding</h3>
      <p>See the transition from Moses and the Law to Christ, grace and the better covenant.</p>
    </div>
    <div class="feature-item">
      <span>02 · Revelation</span>
      <h3>Prophetic Understanding</h3>
      <p>Study Revelation, the scroll, the seals and prophetic progression through a present-day lens.</p>
    </div>
    <div class="feature-item">
      <span>03 · Kingdom</span>
      <h3>Kingdom Alignment</h3>
      <p>Return to apostolic truth, biblical order and the government of Jesus Christ.</p>
    </div>
  </div>
</section>

<section class="section studies" id="studies">
  <div class="container">
    <div class="center">
      <div class="label">Featured Teachings</div>
      <h2 class="title">Kingdom Keys Study Library</h2>
      <p class="copy">
        Build this section around your major teaching series, booklets,
        downloadable studies and video messages.
      </p>
    </div>

    <div class="cards">
      <article class="card">
        <div class="num">01</div>
        <h3>Understanding the Two Tabernacles</h3>
        <p>
          Explore the earthly tabernacle Moses built and the greater heavenly
          tabernacle revealed in the New Covenant.
        </p>
      </article>

      <article class="card">
        <div class="num">02</div>
        <h3>The Covenant Principles of the Kingdom</h3>
        <p>
          Compare priesthood, sacrifice, bloodwork, tabernacle, presence,
          government, circumcision and the prophetic timeline.
        </p>
      </article>

      <article class="card">
        <div class="num">03</div>
        <h3>Understanding the Scroll & Seven Seals</h3>
        <p>
          Follow Revelation's prophetic progression and examine the seven seals
          through Scripture and a 21st-century perspective.
        </p>
      </article>
    </div>
  </div>
</section>

<section class="invite" id="invite">
  <div class="container">
    <div class="invite-box">
      <div class="topline">Invite Pastor Tony Gordon</div>
      <h2>Bring Kingdom Keys 1ON1 to your church or conference.</h2>
      <p>
        Invite Pastor Tony Gordon for Bible teaching, leadership gatherings,
        prophetic teaching conferences, covenant studies and Kingdom-focused events.
      </p>
      <div class="buttons">
        <a class="btn btn-gold" href="mailto:booking@kingdomkeys1on1.com?subject=Speaking%20Request">Submit Speaking Request</a>
      </div>
    </div>
  </div>
</section>

<section class="section" id="media">
  <div class="container media-grid">
    <div class="video">
      <a class="play" href="#" aria-label="Play message">▶</a>
    </div>
    <div>
      <div class="label">Kingdom Keys 1ON1 Media</div>
      <h2 class="title">Watch. Study. Share.</h2>
      <p class="copy">
        Feature your latest Kingdom Keys episode here and connect this section to
        YouTube, Facebook, podcast episodes or your sermon archive.
      </p>
      <div class="buttons">
        <a class="btn btn-black" href="#">Watch Latest Message</a>
      </div>
    </div>
  </div>
</section>

<section class="newsletter" id="newsletter">
  <div class="container news-grid">
    <div>
      <div class="label" style="color:#000">Stay Connected</div>
      <h2>Join the Kingdom Keys community.</h2>
      <p>Receive new teachings, event announcements, study releases and ministry updates.</p>
    </div>

    <form onsubmit="subscribe(event)">
      <div class="form-grid">
        <input type="text" placeholder="First name" required>
        <input type="text" placeholder="Last name">
        <input class="email" type="email" placeholder="Email address" required>
      </div>
      <button class="btn btn-black" style="margin-top:14px" type="submit">Subscribe</button>
      <div id="message" style="margin-top:10px;font-size:12px"></div>
    </form>
  </div>
</section>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div>
        <h3>Kingdom Keys 1ON1</h3>
        <p>
          Let’s Talk Scripture.<br>
          A ministry of Next Kingdom Level Ministries.
        </p>
      </div>

      <div>
        <h3>Explore</h3>
        <div class="foot-links">
          <a href="#about">About</a>
          <a href="#studies">Studies</a>
          <a href="#media">Media</a>
          <a href="#invite">Booking</a>
        </div>
      </div>

      <div>
        <h3>Connect</h3>
        <div class="foot-links">
          <a href="#">YouTube</a>
          <a href="#">Facebook</a>
          <a href="#">Instagram</a>
          <a href="mailto:info@kingdomkeys1on1.com">Email Ministry</a>
        </div>
      </div>
    </div>

    <div class="bottom">
      <span>© <span id="year"></span> Kingdom Keys 1ON1. All rights reserved.</span>
      <span>Next Kingdom Level Ministries</span>
    </div>
  </div>
</footer>

<script>
const mobileBtn=document.getElementById("mobileBtn");
const menu=document.getElementById("menu");
mobileBtn.addEventListener("click",()=>menu.classList.toggle("open"));
document.querySelectorAll("#menu a").forEach(a=>a.addEventListener("click",()=>menu.classList.remove("open")));
document.getElementById("year").textContent=new Date().getFullYear();

function subscribe(e){
  e.preventDefault();
  document.getElementById("message").textContent="Thank you. Connect this form to Wix Forms or your email service.";
  e.target.reset();
}
</script>

</body>
</html>