git / moonbite-network / templates/flagship.html · raw

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>MoonBite — The last unowned thing</title><meta name="description" content="{{ consensus.initial_subsidy_coins }} MBITE born every {{ consensus.block_time_min }} minutes on a fair-launch proof-of-work network. No company, no presale, nobody to buy it from. You mine it, or it isn't yours."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="stylesheet" href="/static/fonts/moonbite-fonts.css"><style nonce="{{ csp_nonce }}">:root{  --void:#0B0D12; --ink:#070809; --panel:#0F1219;  --gold:#D9A441; --gold-2:#EBCB86; --gold-dim:rgba(217,164,65,.14);  --bone:#F5F2EA; --mist:#C9C4BA; --ash:#8A8580; --faint:#5A574F;  --line:rgba(245,242,234,.09); --line-2:rgba(245,242,234,.055);  --display:'Archivo Black','Arial Black',sans-serif;  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;  --wrap:1180px;}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{  background:var(--void); color:var(--bone); font-family:var(--sans);  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;  font-feature-settings:"ss01","cv05";}::selection{background:var(--gold);color:var(--ink)}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}img,svg,canvas{display:block;max-width:100%}.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}@media(max-width:620px){.wrap{padding:0 20px}}/* ambient depth */#sky{position:fixed;inset:0;z-index:0;pointer-events:none}.glow{position:fixed;z-index:0;pointer-events:none;filter:blur(70px);opacity:.5}.glow.a{top:-14vh;left:50%;transform:translateX(-50%);width:80vw;height:60vh;  background:radial-gradient(50% 50% at 50% 50%,rgba(217,164,65,.16),transparent 70%)}.glow.b{bottom:-24vh;left:-10vw;width:60vw;height:60vh;  background:radial-gradient(50% 50% at 50% 50%,rgba(64,92,168,.14),transparent 70%)}.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}main{position:relative;z-index:2}/* progress */#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;  background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 12px rgba(217,164,65,.6)}/* ---------- nav ---------- */nav{position:fixed;top:0;left:0;right:0;z-index:50;  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);  background:rgba(11,13,18,.55);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}nav.scrolled{background:rgba(8,9,12,.82);border-bottom:1px solid var(--line)}.nav-in{max-width:var(--wrap);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.02rem;letter-spacing:.01em}.brand img{width:26px;height:26px}.brand b{background:linear-gradient(180deg,var(--bone),#b9b4a9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.nav-links{display:flex;gap:28px;margin-left:8px}.nav-links a{font-size:.86rem;color:var(--mist);letter-spacing:.01em;transition:color .2s}.nav-links a:hover{color:var(--bone)}.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}.ghost{font-size:.86rem;color:var(--mist);transition:color .2s}.ghost:hover{color:var(--bone)}.pill{font-size:.82rem;font-weight:700;color:var(--ink);padding:9px 18px;border-radius:100px;  background:linear-gradient(180deg,var(--gold-2),var(--gold));  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px rgba(217,164,65,.22);transition:transform .15s,box-shadow .2s}.pill:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 30px rgba(217,164,65,.34)}.burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;  background:none;color:var(--bone);font-size:1.1rem;cursor:pointer}@media(max-width:860px){.nav-links,.nav-cta .ghost{display:none}.nav-cta{margin-left:auto}}@media(max-width:520px){.nav-cta{display:none}.burger{display:block}}/* mobile sheet */#sheet{position:fixed;inset:0;z-index:55;background:rgba(7,8,9,.97);  backdrop-filter:blur(8px);display:none;flex-direction:column;padding:88px 28px 40px;gap:6px}#sheet.open{display:flex}#sheet a{font-size:1.3rem;font-weight:700;padding:15px 0;border-bottom:1px solid var(--line-2);color:var(--bone)}#sheet .pill{margin-top:22px;text-align:center;font-size:1rem;padding:15px}#sheetClose{position:absolute;top:20px;right:22px;background:none;border:none;color:var(--bone);font-size:1.7rem;cursor:pointer}/* ---------- hero ---------- */.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;  padding:120px 0 60px;text-align:center;position:relative}.status{display:inline-flex;align-items:center;gap:9px;margin:0 auto;  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--mist);  border:1px solid var(--line);background:rgba(245,242,234,.02);padding:7px 15px;border-radius:100px}.status .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(217,164,65,.55);animation:pulse 2.4s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,164,65,.5)}70%{box-shadow:0 0 0 8px rgba(217,164,65,0)}100%{box-shadow:0 0 0 0 rgba(217,164,65,0)}}.status b{color:var(--bone);font-weight:400}h1.mega{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.98;  font-size:clamp(2.9rem,9.2vw,6.4rem);margin:26px auto 0;max-width:14ch}h1.mega .g{background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.lead{color:var(--mist);font-size:clamp(1.05rem,2.6vw,1.28rem);line-height:1.62;  max-width:600px;margin:26px auto 0}.lead b{color:var(--bone);font-weight:600}.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}.btn{font-size:.98rem;font-weight:700;padding:15px 30px;border-radius:12px;transition:transform .15s,box-shadow .2s,border-color .2s,background .2s;cursor:pointer;border:1px solid transparent}.btn-gold{color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold));  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px rgba(217,164,65,.24)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 40px rgba(217,164,65,.36)}.btn-ghost{color:var(--bone);border-color:var(--line);background:rgba(245,242,234,.02)}.btn-ghost:hover{border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.06)}.hero-note{margin-top:20px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--faint)}/* ---------- instruments ---------- */.rail{max-width:var(--wrap);margin:56px auto 0;padding:0 24px}.rail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);  border:1px solid var(--line);border-radius:16px;overflow:hidden}.rcell{background:rgba(14,17,23,.72);padding:26px 24px}.rcell .rk{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}.rcell .rv{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;font-size:clamp(1.7rem,4.5vw,2.5rem);margin-top:10px}.rcell .rv .u{color:var(--gold);font-size:.5em;font-weight:700;margin-left:6px}.rcell .rsub{font-family:var(--mono);font-size:.7rem;color:var(--faint);margin-top:6px}.rbar{height:4px;border-radius:100px;background:rgba(245,242,234,.08);margin-top:14px;overflow:hidden}.rbar i{display:block;height:100%;width:.5%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width 1s ease}@media(max-width:720px){.rail-grid{grid-template-columns:1fr}}/* ---------- section frame ---------- */section.blk{padding:120px 0}.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}.h2{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.06;  font-size:clamp(2rem,5.4vw,3.3rem);margin-top:16px}.sub{color:var(--mist);font-size:clamp(1rem,2.3vw,1.15rem);max-width:560px;margin-top:18px;line-height:1.6}/* thesis */.thesis{text-align:center;padding:130px 0}.thesis p{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.12;  font-size:clamp(1.9rem,6vw,3.6rem);max-width:16ch;margin:0 auto}.thesis .dim{color:var(--faint)}.thesis .g{color:var(--gold)}/* plain-english */.nh-grid{display:grid;gap:18px;margin-top:52px}@media(min-width:820px){.nh-grid{grid-template-columns:repeat(3,1fr)}}.nh{border:1px solid var(--line);border-radius:18px;padding:30px 28px;background:linear-gradient(180deg,rgba(245,242,234,.025),rgba(245,242,234,0));  transition:border-color .25s,transform .25s,background .25s}.nh:hover{border-color:rgba(217,164,65,.35);transform:translateY(-4px)}.nh .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--gold);font-weight:700}.nh h3{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:1.28rem;margin:14px 0 12px}.nh p{color:var(--mist);font-size:.98rem;line-height:1.66}.nh p b{color:var(--bone);font-weight:600}.nh .go{display:inline-block;margin-top:14px;color:var(--gold);font-weight:600;font-size:.94rem}.jt{border-bottom:1px dotted rgba(217,164,65,.7);cursor:help;position:relative;outline:none}.jt:focus-visible{box-shadow:0 0 0 2px rgba(217,164,65,.5);border-radius:2px}.jt .d{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);  width:min(250px,74vw);background:#151821;color:var(--mist);border:1px solid rgba(217,164,65,.35);  border-radius:10px;padding:12px 14px;font-size:.8rem;line-height:1.5;font-weight:400;letter-spacing:normal;  text-align:left;z-index:30;box-shadow:0 16px 40px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;pointer-events:none}.jt .d::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#151821}.jt:hover .d,.jt:focus .d,.jt.open .d{opacity:1;visibility:visible}.honest{margin-top:34px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:0 14px 14px 0;  padding:20px 24px;color:var(--mist);font-size:.94rem;line-height:1.66;max-width:760px}.honest b{color:var(--gold);font-weight:700}/* steps */.steps{display:grid;gap:20px;margin-top:52px;counter-reset:s}@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}.step{position:relative;padding:30px 26px;border:1px solid var(--line);border-radius:18px;background:rgba(14,17,23,.5)}.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.1em}.step h3{font-family:var(--sans);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin:16px 0 10px}.step p{color:var(--mist);font-size:.95rem;line-height:1.62}/* scarcity */.scz{display:grid;gap:52px;align-items:center;margin-top:52px}@media(min-width:900px){.scz{grid-template-columns:1.05fr .95fr}}.curve{border:1px solid var(--line);border-radius:20px;padding:26px;background:linear-gradient(180deg,rgba(14,17,23,.7),rgba(14,17,23,.35))}.curve svg{width:100%;height:auto;overflow:visible}.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}.fact{background:rgba(14,17,23,.72);padding:22px 22px}.fact .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}.fact .v{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:1.5rem;margin-top:9px}.fact .v small{color:var(--gold);font-size:.6em;font-weight:700}/* trust */.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}@media(max-width:820px){.trust{grid-template-columns:repeat(2,1fr)}}@media(max-width:460px){.trust{grid-template-columns:1fr}}.tr{padding:26px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(14,17,23,.4)}.tr .ic{width:34px;height:34px;color:var(--gold)}.tr h4{font-family:var(--sans);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;margin:16px 0 8px}.tr p{color:var(--ash);font-size:.88rem;line-height:1.55}/* final cta */.final{text-align:center;padding:150px 0 120px;position:relative}.final .h2{max-width:18ch;margin-left:auto;margin-right:auto}/* footer */footer{border-top:1px solid var(--line);padding:70px 0 46px;position:relative;z-index:2}.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}@media(max-width:760px){.foot{grid-template-columns:1fr 1fr;gap:34px}}.foot .brand{margin-bottom:14px}.foot p.tag{color:var(--ash);font-size:.9rem;max-width:34ch;line-height:1.6}.fcol h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}.fcol a{display:block;color:var(--mist);font-size:.92rem;padding:6px 0;transition:color .2s}.fcol a:hover{color:var(--gold)}.foot-base{max-width:var(--wrap);margin:52px auto 0;padding:26px 24px 0;border-top:1px solid var(--line-2);  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:.8rem;font-family:var(--mono)}/* reveal */.rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}.rise.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}.status .dot{animation:none}}</style></head><body><div id="prog"></div><canvas id="sky"></canvas><div class="glow a"></div><div class="glow b"></div><div class="grain"></div><nav id="nav">  <div class="nav-in">    <a class="brand" href="/"><img src="/static/moonbite-logo.svg" alt=""><b>MOONBITE</b></a>    <div class="nav-links">      <a href="#what">Overview</a>      <a href="#how">How it works</a>      <a href="#scarcity">Supply</a>      <a href="/whitepaper">Whitepaper</a>      <a href="/explorer">Explorer</a>    </div>    <div class="nav-cta">      <a class="ghost" href="/get-wallet">Wallet</a>      <a class="pill" href="/start">Start mining</a>    </div>    <button class="burger" id="burger" aria-label="Menu">≡</button>  </div></nav><div id="sheet">  <button id="sheetClose" aria-label="Close">×</button>  <a href="#what">Overview</a>  <a href="#how">How it works</a>  <a href="#scarcity">Supply</a>  <a href="/whitepaper">Whitepaper</a>  <a href="/explorer">Explorer</a>  <a href="/get-wallet">Wallet</a>  <a class="pill" href="/start">Start mining</a></div><main>  <!-- HERO -->  <section class="hero">    <div class="wrap">      <span class="status"><span class="dot"></span>Live network · block <b class="num" id="sBlock">—</b></span>      <h1 class="mega">The last<br><span class="g">unowned</span> thing.</h1>      <p class="lead"><b>{{ consensus.initial_subsidy_coins }} MBITE</b> are created every        <b>{{ consensus.block_time_min }} minutes</b> by ordinary computers running the network —        no company, no presale, and nobody to buy it from. You mine it, or it isn't yours.</p>      <div class="cta-row">        <a class="btn btn-gold" href="/start">Mine your first block</a>        <a class="btn btn-ghost" href="#what">See how it works</a>      </div>      <div class="hero-note">NO SIGNUP · NO PURCHASE · YOUR CPU IS THE HARDWARE</div>    </div>    <!-- instruments -->    <div class="rail rise">      <div class="rail-grid">        <div class="rcell">          <div class="rk">Block height</div>          <div class="rv num" id="iHeight">0</div>          <div class="rsub">a new block every {{ consensus.block_time_min }} min</div>        </div>        <div class="rcell">          <div class="rk">Reward per block</div>          <div class="rv num">{{ consensus.current_reward_coins|int }}<span class="u">MBITE</span></div>          <div class="rsub">halves toward zero, forever</div>        </div>        <div class="rcell">          <div class="rk">Supply mined</div>          <div class="rv num"><span id="iPct">0.000</span><span class="u">%</span></div>          <div class="rsub">of {{ consensus.max_supply_label }} that will ever exist</div>          <div class="rbar"><i id="iFill"></i></div>        </div>      </div>    </div>  </section>  <!-- THESIS -->  <section class="thesis wrap rise">    <p>Money you <span class="g">make</span>,<br><span class="dim">not money you buy.</span></p>  </section>  <!-- WHAT / plain english -->  <section class="blk" id="what">    <div class="wrap">      <div class="rise">        <span class="eyebrow">New here · plain English</span>        <h2 class="h2">What this is, in normal words.</h2>        <p class="sub">No crypto knowledge needed. Three questions, answered straight.</p>      </div>      <div class="nh-grid">        <div class="nh rise">          <div class="n">01 — WHAT IT IS</div>          <h3>Money you make with your own computer.</h3>          <p>MoonBite is <b>digital cash</b> that isn't run by any bank or company. New coins are            created by ordinary computers doing math — a process called            <span class="jt" tabindex="0">mining<span class="d">Your computer solves puzzles that keep the network honest. When it wins, it earns brand-new coins. No special hardware — a normal PC works.</span></span>.            Nobody printed them; nobody is selling them to you.</p>        </div>        <div class="nh rise">          <div class="n">02 — WHAT YOU GET</div>          <h3>Coins that land in your wallet.</h3>          <p>When your computer helps run the network, <b>MBITE</b> appears in your            <span class="jt" tabindex="0">wallet<span class="d">A free app that holds your coins and your secret recovery phrase. You own it — no account, no company can freeze it.</span></span>.            Early on there are more coins per block; over time that reward is            <span class="jt" tabindex="0">cut in half<span class="d">A “halving.” The mining reward drops 50% at fixed intervals, so coins get scarcer over time — the same rule Bitcoin uses.</span></span>,            so arriving early means more.</p>        </div>        <div class="nh rise">          <div class="n">03 — WHAT TO DO</div>          <h3>Download one app. That's it.</h3>          <p>Get the wallet, click <b>start mining</b>, and leave it running. Your computer's spare            power does the work and coins accumulate on their own. No sign-up, no payment, no card.</p>          <a class="go" href="/start">Start here →</a>        </div>      </div>      <div class="honest rise"><b>Being honest:</b> MoonBite is brand new. It has no cash price yet and        no promise it ever will — you're here at the very beginning, which is the whole point and also        the risk. Never spend what you can't afford to lose, and never trust anyone who "sells" you MBITE.        You mine it, or it isn't yours.</div>    </div>  </section>  <!-- HOW -->  <section class="blk" id="how">    <div class="wrap">      <div class="rise">        <span class="eyebrow">The mechanism</span>        <h2 class="h2">A network anyone can run.</h2>        <p class="sub">The same computer does three jobs at once — verify, mine, and hold. That's the whole system.</p>      </div>      <div class="steps">        <div class="step rise">          <h3>Your machine keeps the ledger</h3>          <p>Every participant stores the full history and checks every rule. No server to trust,            nothing to take down. The network is just the people running it.</p>        </div>        <div class="step rise">          <h3>Work earns the next block</h3>          <p>Computers race to solve a <span class="jt" tabindex="0">RandomX<span class="d">A proof-of-work puzzle tuned for ordinary CPUs, so a normal computer stays competitive and specialised mining machines don't take over.</span></span>            puzzle. The winner writes the next block and collects the reward. Every {{ consensus.block_time_min }} minutes, someone new can win.</p>        </div>        <div class="step rise">          <h3>Coins settle to your keys</h3>          <p>Rewards land at an address only your recovery phrase controls. Self-custody by default —            you hold it, and no one can freeze or reverse it.</p>        </div>      </div>    </div>  </section>  <!-- SCARCITY -->  <section class="blk" id="scarcity">    <div class="wrap">      <div class="rise">        <span class="eyebrow">Monetary policy</span>        <h2 class="h2">Fixed rules. Falling issuance.</h2>        <p class="sub">The reward only goes down, on a schedule written into the code and enforced by every node.          {{ consensus.initial_subsidy_coins }} becomes {{ consensus.initial_subsidy_coins // 2 }}, and it never comes back.</p>      </div>      <div class="scz">        <div class="curve rise">          <svg viewBox="0 0 520 260" role="img" aria-label="Block reward falling by half at each halving">            <defs>              <linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">                <stop offset="0" stop-color="rgba(217,164,65,.28)"/>                <stop offset="1" stop-color="rgba(217,164,65,0)"/>              </linearGradient>            </defs>            <g stroke="rgba(245,242,234,.07)">              <line x1="40" y1="30" x2="500" y2="30"/><line x1="40" y1="90" x2="500" y2="90"/>              <line x1="40" y1="150" x2="500" y2="150"/><line x1="40" y1="210" x2="500" y2="210"/>            </g>            <path id="area" fill="url(#fill)"              d="M40,40 H132 V120 H224 V160 H316 V180 H408 V190 H500 V210 H40 Z"/>            <path id="line" fill="none" stroke="var(--gold)" stroke-width="2.5" stroke-linejoin="round"              d="M40,40 H132 V120 H224 V160 H316 V180 H408 V190 H500"/>            <g font-family="ui-monospace,monospace" font-size="11" fill="var(--faint)">              <text x="40" y="228">now</text><text x="118" y="228">1st ½</text>              <text x="210" y="228">2nd ½</text><text x="302" y="228">3rd ½</text>              <text x="452" y="228">→ 0</text>            </g>            <g font-family="ui-monospace,monospace" font-size="11" fill="var(--mist)">              <text x="46" y="34">{{ consensus.initial_subsidy_coins }}</text>              <text x="138" y="114">{{ consensus.initial_subsidy_coins // 2 }}</text>              <text x="230" y="154">{{ consensus.initial_subsidy_coins // 4 }}</text>            </g>          </svg>        </div>        <div class="facts rise">          <div class="fact"><div class="k">Block reward</div><div class="v">{{ consensus.initial_subsidy_coins }} <small>MBITE</small></div></div>          <div class="fact"><div class="k">Halves every</div><div class="v">{{ '{:,}'.format(consensus.halving_interval) }} <small>blocks</small></div></div>          <div class="fact"><div class="k">Total ever</div><div class="v">{{ consensus.max_supply_label }}</div></div>          <div class="fact"><div class="k">Block time</div><div class="v">{{ consensus.block_time_min }} <small>min</small></div></div>          <div class="fact"><div class="k">Premine</div><div class="v">None</div></div>          <div class="fact"><div class="k">Last block ≈</div><div class="v">{{ consensus.final_block_year }}</div></div>        </div>      </div>    </div>  </section>  <!-- TRUST -->  <section class="blk">    <div class="wrap">      <div class="rise">        <span class="eyebrow">Why it's credible</span>        <h2 class="h2">Nothing to take on faith.</h2>      </div>      <div class="trust">        <div class="tr rise">          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M8 3H5a2 2 0 0 0-2 2v3m0 8v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3m0-8V5a2 2 0 0 0-2-2h-3"/><circle cx="12" cy="12" r="3"/></svg>          <h4>Open source</h4><p>Every rule is public code. Read it, run it, fork it — no hidden switches.</p>        </div>        <div class="tr rise">          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg>          <h4>CPU-fair</h4><p>RandomX keeps mining on ordinary machines. No warehouses, no head start.</p>        </div>        <div class="tr rise">          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>          <h4>Self-custody</h4><p>Your keys, your coins. No account to freeze, no company to trust.</p>        </div>        <div class="tr rise">          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M8 10h8"/></svg>          <h4>No premine</h4><p>Not one coin was created before launch. Everyone starts from the same block.</p>        </div>      </div>    </div>  </section>  <!-- FINAL -->  <section class="final">    <div class="wrap rise">      <span class="eyebrow">Genesis era</span>      <h2 class="h2">Half of every MBITE that will ever exist is mined right now.</h2>      <p class="sub" style="margin-left:auto;margin-right:auto">The people in the first era can never be joined, only remembered.</p>      <div class="cta-row">        <a class="btn btn-gold" href="/start">Mine your first block</a>        <a class="btn btn-ghost" href="/whitepaper">Read the whitepaper</a>      </div>    </div>  </section></main><footer>  <div class="wrap">    <div class="foot">      <div>        <a class="brand" href="/"><img src="/static/moonbite-logo.svg" alt=""><b>MOONBITE</b></a>        <p class="tag">Fair-launch, CPU-mined, proof-of-work money. Created every {{ consensus.block_time_min }} minutes by the people who run it.</p>      </div>      <div class="fcol">        <h5>Start</h5>        <a href="/start">Mine</a><a href="/get-wallet">Wallet</a><a href="/how-it-works">How it works</a><a href="/calculator">Calculator</a>      </div>      <div class="fcol">        <h5>Network</h5>        <a href="/explorer">Explorer</a><a href="/whitepaper">Whitepaper</a><a href="/full-node">Run a node</a><a href="/governance">Governance</a>      </div>      <div class="fcol">        <h5>Learn</h5>        <a href="/learn">Learn</a><a href="/vocabulary">Vocabulary</a><a href="/scams">Avoid scams</a><a href="/support">Support</a>      </div>    </div>    <div class="foot-base">      <span>© {{ consensus.launch_year }} MoonBite · no company, no owner</span>      <span>You mine it, or it isn't yours.</span>    </div>  </div></footer><script nonce="{{ csp_nonce }}">(function(){  var CONS = {    reward: {{ consensus.current_reward_coins }},    cap: {{ consensus.max_supply_coins }},    halving: {{ consensus.next_halving_height }}  };  var $=function(id){return document.getElementById(id)};  var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;  /* nav scrolled + progress */  var nav=$('nav'), prog=$('prog');  function onScroll(){    var y=scrollY||document.documentElement.scrollTop;    nav.classList.toggle('scrolled', y>10);    var h=document.documentElement.scrollHeight-innerHeight;    prog.style.width=(h>0?(y/h*100):0)+'%';  }  addEventListener('scroll',onScroll,{passive:true}); onScroll();  /* mobile sheet */  var sheet=$('sheet');  $('burger').addEventListener('click',function(){sheet.classList.add('open')});  $('sheetClose').addEventListener('click',function(){sheet.classList.remove('open')});  sheet.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){sheet.classList.remove('open')})});  /* reveal on scroll */  if('IntersectionObserver' in window && !reduce){    var io=new IntersectionObserver(function(es){      es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });    },{threshold:.14});    document.querySelectorAll('.rise').forEach(function(el){io.observe(el)});  } else { document.querySelectorAll('.rise').forEach(function(el){el.classList.add('in')}); }  /* number formatting */  function fmt(n){return (n||0).toLocaleString('en-US')}  /* count-up */  function countTo(el,target,dur,suffixFn){    if(reduce){el.textContent=suffixFn?suffixFn(target):fmt(target);return;}    var t0=performance.now();    function step(t){      var p=Math.min(1,(t-t0)/dur), e=1-Math.pow(1-p,3), v=target*e;      el.textContent=suffixFn?suffixFn(v):fmt(Math.round(v));      if(p<1) requestAnimationFrame(step);    }    requestAnimationFrame(step);  }  /* live chain */  var chainH=0, animated=false;  function paint(){    var mined=Math.min(chainH,CONS.halving)*CONS.reward;    var pct=CONS.cap? 100*mined/CONS.cap : 0;    $('sBlock').textContent=fmt(chainH);    if(!animated && chainH>0){      animated=true;      countTo($('iHeight'),chainH,1100);      countTo($('iPct'),pct,1100,function(v){return v.toFixed(3)});    } else {      $('iHeight').textContent=fmt(chainH);      $('iPct').textContent=pct.toFixed(3);    }    $('iFill').style.width=Math.max(.5,pct)+'%';  }  function poll(){    fetch('/api/blockchain/info').then(function(r){return r.json()}).then(function(j){      var h=j.height||j.blocks||0; if(h>=0){chainH=h; paint();}    }).catch(function(){});  }  poll(); setInterval(poll,15000);  /* jargon tap-toggle (mobile) */  document.querySelectorAll('.jt').forEach(function(el){    el.addEventListener('click',function(e){      e.stopPropagation();      var was=el.classList.contains('open');      document.querySelectorAll('.jt.open').forEach(function(o){o.classList.remove('open')});      if(!was) el.classList.add('open');    });  });  document.addEventListener('click',function(){    document.querySelectorAll('.jt.open').forEach(function(o){o.classList.remove('open')});  });  /* ambient starfield */  var c=$('sky'), x=c.getContext('2d'), W,H,stars=[];  function resize(){    W=c.width=innerWidth*devicePixelRatio; H=c.height=innerHeight*devicePixelRatio;    c.style.width=innerWidth+'px'; c.style.height=innerHeight+'px';    var n=Math.min(150,Math.floor(innerWidth*innerHeight/12000)); stars=[];    for(var i=0;i<n;i++) stars.push({x:Math.random()*W,y:Math.random()*H,      z:Math.random()*.8+.2,r:Math.random()*1.1+.2,t:Math.random()*6.28});  }  addEventListener('resize',resize); resize();  var sc=0;  addEventListener('scroll',function(){sc=(scrollY||0)*devicePixelRatio*.04},{passive:true});  function loop(){    x.clearRect(0,0,W,H);    for(var i=0;i<stars.length;i++){      var s=stars[i]; s.t+=0.015;      var a=(0.35+0.35*Math.sin(s.t))*s.z;      var yy=(s.y - sc*s.z) % H; if(yy<0) yy+=H;      x.beginPath(); x.arc(s.x,yy,s.r,0,6.28);      x.fillStyle='rgba('+(230)+','+(224)+','+(210)+','+a+')'; x.fill();    }    requestAnimationFrame(loop);  }  if(!reduce) requestAnimationFrame(loop);})();</script></body></html>