Home 2 — Kaddy+

  
    <div id="kaddy-first-flight">

<!-- HERO / POSTER -->
<section class="kf-hero">
<div class="kf-eyebrow">KADDY+ FIRST FLIGHT</div>

<h1>The Road to 3,000</h1>

<p class="kf-subtitle">
Follow Kaddy+ as we build, improve, map courses,
and grow the community one round at a time.
</p>

<div class="kf-pill">
LIVE DEVELOPMENT • WEEKLY IMPROVEMENTS
</div>
</section>

<!-- FLIGHT TRACKER -->
<section class="kf-flight-section">

<div class="kf-heading-row">
<div>
<div class="kf-small-label">KADDY+ MAX</div>
<h2>Road to 3,000 Subscribers</h2>
</div>

<div class="kf-main-number">
<span id="maxSubscribers">0</span>
<span class="kf-goal"> / 3,000</span>
</div>
</div>

<div class="kf-flight-area">

<div class="kf-cloud cloud-one"></div>
<div class="kf-cloud cloud-two"></div>

<div class="kf-flight-line"></div>

<div id="flyingDisc" class="kf-disc">
<div class="kf-disc-center">K+</div>
</div>

<!-- BASKET -->
<div class="kf-basket">
<div class="basket-top"></div>
<div class="basket-chain chain1"></div>
<div class="basket-chain chain2"></div>
<div class="basket-chain chain3"></div>
<div class="basket-chain chain4"></div>

<div class="basket-tray"></div>
<div class="basket-pole"></div>
<div class="basket-base"></div>
</div>

<div class="kf-grass"></div>

</div>

<div class="kf-progress-shell">
<div id="progressBar" class="kf-progress"></div>
</div>

<div class="kf-progress-labels">
<span>Launch</span>
<span>750</span>
<span>1,500</span>
<span>2,250</span>
<span>3,000</span>
</div>

<div class="kf-percent">
<span id="progressPercent">0</span>% of the way to the basket
</div>

</section>

<!-- LIVE TRACKERS -->
<section class="kf-stats">

<div class="kf-card">
<div class="kf-card-number" id="totalUsers">0</div>
<div class="kf-card-title">Kaddy+ Users</div>
<div class="kf-card-description">
Players who have joined Kaddy+
</div>
</div>

<div class="kf-card">
<div class="kf-card-number" id="mappedLayouts">0</div>
<div class="kf-card-title">Mapped Layouts</div>
<div class="kf-card-description">
Course layouts available in Kaddy+
</div>
</div>

<div class="kf-card">
<div class="kf-card-number" id="roundsPlayed">0</div>
<div class="kf-card-title">Rounds Played</div>
<div class="kf-card-description">
Rounds recorded with Kaddy+
</div>

</div>

<div class="kf-card featured">
<div class="kf-card-number" id="maxSubscribersCard">0</div>
<div class="kf-card-title">Kaddy+ Max</div>
<div class="kf-card-description">
Subscribers helping drive First Flight
</div>
</div>

</section>

<div class="kf-update">
Live Kaddy+ progress
<span id="lastUpdated"></span>
</div>

</div>

<style>

#kaddy-first-flight {
--navy: #101923;
--dark: #0a1016;
--gold: #d9a328;

--gold-light: #f0c862;
--green: #315f38;
--light: #f7f7f5;

font-family: Arial, Helvetica, sans-serif;
max-width: 1150px;
margin: 0 auto;
color: white;
}

.kf-hero {
text-align: center;
padding: 70px 25px 60px;
background:
linear-gradient(
180deg,
rgba(12,20,29,.96),
rgba(16,25,35,.92)
);
border-radius: 24px;
margin-bottom: 28px;
box-shadow: 0 16px 50px rgba(0,0,0,.18);
}

.kf-eyebrow {
font-size: 14px;
letter-spacing: 4px;

font-weight: 700;
color: var(--gold-light);
margin-bottom: 12px;
}

.kf-hero h1 {
font-size: clamp(42px, 7vw, 76px);
margin: 0;
line-height: .98;
font-weight: 800;
}

.kf-subtitle {
max-width: 680px;
margin: 24px auto;
font-size: 18px;
line-height: 1.55;
color: rgba(255,255,255,.82);
}

.kf-pill {
display: inline-block;
padding: 10px 18px;
border: 1px solid rgba(240,200,98,.55);
border-radius: 50px;
font-size: 12px;
letter-spacing: 1.4px;

color: var(--gold-light);
}

/* FLIGHT */

.kf-flight-section {
background: var(--navy);
padding: 32px;
border-radius: 24px;
margin-bottom: 25px;
}

.kf-heading-row {
display: flex;
justify-content: space-between;
align-items: end;
gap: 20px;
margin-bottom: 24px;
}

.kf-small-label {
color: var(--gold-light);
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
}

.kf-flight-section h2 {
margin: 5px 0 0;
font-size: clamp(25px,4vw,38px);
}

.kf-main-number {
white-space: nowrap;
font-size: 30px;
font-weight: 800;
color: var(--gold-light);
}

.kf-goal {
color: rgba(255,255,255,.55);
font-size: 17px;
}

/* LANDSCAPE */

.kf-flight-area {
height: 280px;
position: relative;
overflow: hidden;
border-radius: 18px;
background:

linear-gradient(
180deg,
#b8d7e8 0%,
#dceaf0 55%,
#799769 56%,
#48653d 100%
);
}

.kf-grass {
position:absolute;
bottom:0;
width:100%;
height:40%;
background:
linear-gradient(
165deg,
rgba(255,255,255,.05),
transparent 35%
);
}

/* CLOUDS */

.kf-cloud {
position:absolute;

background:rgba(255,255,255,.55);
width:95px;
height:26px;
border-radius:50px;
}

.cloud-one {
top:42px;
left:18%;
}

.cloud-two {
top:75px;
left:56%;
transform:scale(.7);
}

/* DISC */

.kf-disc {
position:absolute;
top:105px;
left:6%;
width:66px;
height:23px;
background:

linear-gradient(
180deg,
var(--gold-light),
var(--gold)
);
border-radius:50%;
box-shadow:
0 10px 13px rgba(0,0,0,.25);
transition:left 1.5s ease-in-out;
z-index:5;
}

.kf-disc:before {
content:"";
position:absolute;
top:4px;
left:13px;
right:13px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.24);
}

.kf-disc-center {
position:absolute;
width:100%;
text-align:center;

top:2px;
font-size:9px;
font-weight:900;
color:#222;
}

/* BASKET */

.kf-basket {
position:absolute;
right:5%;
bottom:38px;
width:90px;
height:150px;
z-index:4;
}

.basket-top {
position:absolute;
width:88px;
height:8px;
top:10px;
background:#d1d1d1;
border-radius:10px;
}

.basket-chain {
position:absolute;
width:2px;
height:65px;
top:18px;
background:#dedede;
}

.chain1 {left:20px;}
.chain2 {left:35px;}
.chain3 {left:52px;}
.chain4 {left:67px;}

.basket-tray {
position:absolute;
top:80px;
left:10px;
width:70px;
height:13px;
border:4px solid #ddd;
border-top:none;
border-radius:0 0 20px 20px;
}

.basket-pole {
position:absolute;
width:5px;

height:130px;
background:#ccc;
left:43px;
top:10px;
}

.basket-base {
position:absolute;
width:50px;
height:5px;
bottom:4px;
left:21px;
background:#cfcfcf;
}

/* PROGRESS */

.kf-progress-shell {
width:100%;
height:14px;
background:rgba(255,255,255,.1);
border-radius:20px;
margin-top:22px;
overflow:hidden;
}

.kf-progress {
width:0%;
height:100%;
background:
linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);
transition:width 1.5s ease;
}

.kf-progress-labels {
display:flex;
justify-content:space-between;
margin-top:8px;
font-size:11px;
color:rgba(255,255,255,.48);
}

.kf-percent {
text-align:center;
margin-top:20px;
font-size:15px;
color:rgba(255,255,255,.72);
}

/* STAT CARDS */

.kf-stats {
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:16px;
}

.kf-card {
background:#f5f5f2;
color:#15191c;
border-radius:18px;
padding:28px 20px;
text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.kf-card.featured {
background:var(--gold);
}

.kf-card-number {
font-size:42px;
font-weight:800;
line-height:1;

margin-bottom:10px;
}

.kf-card-title {
font-size:17px;
font-weight:700;
}

.kf-card-description {
font-size:12px;
line-height:1.4;
margin-top:7px;
opacity:.65;
}

.kf-update {
text-align:center;
margin-top:20px;
color:#737373;
font-size:11px;
letter-spacing:.5px;
}

/* MOBILE */

@media(max-width:800px) {

.kf-stats {
grid-template-columns:
repeat(2,1fr);
}

.kf-heading-row {
display:block;
}

.kf-main-number {
margin-top:15px;
}

.kf-flight-section {
padding:22px 15px;
}

}

@media(max-width:480px) {
  
  