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

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>MoonBite — Mine the moon. Fair-launch proof-of-work money (MBITE)</title><meta name="description" content="You can't buy MBITE — it isn't listed anywhere, and that's the point. Proof-of-work money you mine on your own hardware, hold in your own wallet, and verify with your own node. No premine, no gatekeepers."><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=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><style>  :root { --void:#04050a; --ice:#F2F6FF; --accent:#5FE9D0; --cool:#5B7BFF; }  * { box-sizing: border-box; }  html, body { margin: 0; }  body {    background: var(--void);    color: var(--ice);    font-family: "Space Grotesk", system-ui, sans-serif;    min-height: 100vh;    overflow-x: hidden;  }  a { color: var(--accent); text-decoration: none; }  .mono { font-family: "JetBrains Mono", monospace; }  img, svg { max-width: 100%; }  /* keep the vector splash + marks razor-sharp at any DPI / scale-up */  svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }  /* ---------- animation keyframes ---------- */  @keyframes mbSpin { to { transform: rotate(360deg); } }  @keyframes mbRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }  @keyframes mbFade { from { opacity: 0; } to { opacity: 1; } }  @keyframes mbPulseA { 0% { opacity: 0; transform: scale(0.92); } 26% { opacity: 1; } 100% { opacity: 0; transform: scale(1.52); } }  @keyframes mbPulseB { 0% { opacity: 0; transform: scale(0.92); } 26% { opacity: 1; } 100% { opacity: 0; transform: scale(1.52); } }  @keyframes mbRowIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }  @keyframes mbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }  /* ---------- ambient background ---------- */  .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;    background: radial-gradient(58% 52% at 50% 38%, #101a3a 0%, rgba(4,5,10,0) 72%); }  .bg-scan { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5;    background: repeating-linear-gradient(to bottom, rgba(242,246,255,0.05) 0 1px, transparent 1px 6px); }  /* ---------- mega-nav (shared partials/mega_nav.html, scoped to cinematic palette) ---------- */  .mb-meganav { position: fixed; top: 0; left: 0; right: 0; z-index: 100;    background: rgba(4,5,10,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);    border-bottom: 1px solid rgba(242,246,255,0.08); animation: mbFade 0.9s ease-out 0.4s both; }  .mb-nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 44px; height: 64px;    display: flex; align-items: center; gap: 18px; }  .mb-brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700;    text-decoration: none; color: var(--ice); white-space: nowrap; }  .mb-brand img { width: 30px; height: 30px; }  .mb-brand .mb-brand-name { background: linear-gradient(90deg, var(--accent), var(--cool));    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }  .mb-nav-links { display: flex; align-items: center; gap: 2px; list-style: none;    margin: 0 auto 0 18px; padding: 0; }  .mb-nav-item { position: relative; }  .mb-nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px;    border-radius: 3px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500;    letter-spacing: 1.4px; text-transform: uppercase; color: rgba(242,246,255,0.62);    background: none; border: none; cursor: pointer; white-space: nowrap; transition: color .2s ease, background .2s ease; }  .mb-nav-trigger:hover, .mb-nav-item.is-open .mb-nav-trigger { color: var(--ice); background: rgba(242,246,255,0.06); }  .mb-nav-trigger .mb-caret { width: 7px; height: 7px; border-right: 2px solid currentColor;    border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);    transition: transform .2s ease; opacity: 0.7; }  .mb-nav-item.is-open .mb-caret { transform: rotate(-135deg) translateY(-1px); }  .mb-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 244px; padding: 8px;    background: rgba(6,8,14,0.98); border: 1px solid rgba(95,233,208,0.18); border-radius: 4px;    box-shadow: 0 24px 60px rgba(0,0,0,0.5);    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);    opacity: 0; visibility: hidden; transform: translateY(-6px);    transition: opacity .18s ease, transform .18s ease, visibility .18s; }  .mb-nav-item.is-open .mb-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }  .mb-dropdown a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 3px;    text-decoration: none; color: rgba(242,246,255,0.86); transition: background .15s ease, color .15s ease; }  .mb-dropdown a:hover { background: rgba(95,233,208,0.08); }  .mb-dropdown a .mb-dd-title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0; }  .mb-dropdown a .mb-dd-desc { font-size: 0.76rem; color: rgba(242,246,255,0.5); letter-spacing: 0; }  .mb-dropdown a:hover .mb-dd-title { color: var(--accent); }  .mb-nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }  .mb-nav-cta .mb-theme-btn { display: none; }  .mb-meganav .mb-nav-cta-btn { display: inline-flex; align-items: center; padding: 10px 18px;    font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;    border-radius: 2px; white-space: nowrap; transition: filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }  .mb-meganav .mb-nav-cta-btn.btn-secondary { border: 1px solid rgba(242,246,255,0.22); color: var(--ice); background: none; }  .mb-meganav .mb-nav-cta-btn.btn-secondary:hover { border-color: var(--ice); }  .mb-meganav .mb-nav-cta-btn.btn-primary { background: var(--accent); color: var(--void); border: 1px solid var(--accent); }  .mb-meganav .mb-nav-cta-btn.btn-primary:hover { filter: brightness(1.12); }  .mb-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px;    width: 42px; height: 42px; border: 1px solid rgba(242,246,255,0.22); border-radius: 3px;    background: none; cursor: pointer; }  .mb-hamburger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: var(--ice); transition: transform .2s ease; }  /* mobile full-screen sheet */  .mb-mobile-sheet { position: fixed; inset: 0; z-index: 200; background: var(--void);    padding: 22px; overflow-y: auto; transform: translateX(100%);    transition: transform .3s cubic-bezier(0.4,0,0.2,1); }  .mb-mobile-sheet.is-open { transform: translateX(0); }  .mb-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }  .mb-mobile-close { background: none; border: none; color: var(--ice); font-size: 1.8rem; cursor: pointer; line-height: 1; }  .mb-mobile-group { border-bottom: 1px solid rgba(242,246,255,0.1); }  .mb-mobile-group > button { width: 100%; display: flex; align-items: center; justify-content: space-between;    padding: 16px 4px; background: none; border: none; color: var(--ice); font-family: "Space Grotesk", sans-serif;    font-size: 1.05rem; font-weight: 600; cursor: pointer; }  .mb-mobile-group .mb-mobile-links { display: none; padding: 0 0 12px 4px; }  .mb-mobile-group.is-open .mb-mobile-links { display: block; }  .mb-mobile-links a { display: block; padding: 9px 0; color: rgba(242,246,255,0.6); text-decoration: none; }  .mb-mobile-links a:hover { color: var(--accent); }  .mb-mobile-cta { margin-top: 22px; display: grid; gap: 12px; }  .mb-mobile-cta .btn { justify-content: center; }  main { position: relative; z-index: 10; }  /* ---------- hero ---------- */  .hero { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; padding: 200px 44px 34px; }  .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 32px; max-width: 1120px; }  .chip { display: flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace;    font-size: 12px; letter-spacing: 3px; color: rgba(242,246,255,0.5); animation: mbRise 0.7s ease-out 0.78s both; }  .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: mbBlink 2.4s ease-in-out infinite; }  h1.head { margin: 0; font-size: clamp(56px, 9vw, 158px); font-weight: 700; line-height: 0.9;    letter-spacing: -3px; text-wrap: balance; animation: mbRise 0.8s cubic-bezier(0.2,0,0.1,1) 0.84s both; }  .lead { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.6; color: rgba(242,246,255,0.66);    text-wrap: pretty; animation: mbRise 1s ease-out 0.92s both; }  .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; animation: mbRise 1s ease-out 1.0s both; }  .btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px;    font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 2.4px; border-radius: 2px;    transition: filter .2s ease, border-color .2s ease, color .2s ease; }  .btn.solid { background: var(--accent); color: var(--void); }  .btn.solid:hover { filter: brightness(1.12); }  .btn.line { border: 1px solid rgba(242,246,255,0.24); color: rgba(242,246,255,0.8); }  .btn.line:hover { border-color: var(--ice); color: var(--ice); }  .btn.text { font-size: 12px; letter-spacing: 2.2px; color: rgba(242,246,255,0.45); padding-left: 8px; }  .btn.text:hover { color: var(--ice); }  .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;    background: rgba(242,246,255,0.1); border: 1px solid rgba(242,246,255,0.1); animation: mbFade 1.2s ease-out 1.0s both; }  .statcell { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: var(--void); }  .statcell .k { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 2.6px; color: rgba(242,246,255,0.42); }  .statcell .v { font-size: 27px; font-weight: 500; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }  /* ---------- generic section header ---------- */  section { position: relative; }  .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--accent); }  .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;    border-bottom: 1px solid rgba(242,246,255,0.1); padding-bottom: 18px; }  .sec-head h2 { margin: 0; font-size: clamp(32px, 3.8vw, 60px); font-weight: 700; letter-spacing: -1.4px; }  .sec-head .note { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 2.6px; color: rgba(242,246,255,0.42); }  /* ---------- reactor ---------- */  .reactor { padding: 130px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));    gap: 70px; align-items: center; }  .reactor-copy { display: flex; flex-direction: column; gap: 26px; }  .reactor-copy h2 { margin: 0; font-size: clamp(36px, 4.6vw, 76px); font-weight: 700; line-height: 0.98; letter-spacing: -2px; }  .reactor-copy p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.62; color: rgba(242,246,255,0.62); text-wrap: pretty; }  .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; padding-top: 6px; }  .spec { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid rgba(242,246,255,0.14); padding-top: 14px; }  .spec .v { font-size: 21px; font-weight: 500; letter-spacing: -0.4px; }  .spec .k { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 2.2px; color: rgba(242,246,255,0.42); }  .reactor-side { display: flex; flex-direction: column; gap: 26px; }  .bigmoon { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; width: 100%; }  .bigmoon .spin { position: absolute; inset: 0; animation: mbSpin 60s linear infinite; }  .bigmoon svg { position: absolute; inset: 0; }  .feed { border: 1px solid rgba(242,246,255,0.12); border-radius: 3px; overflow: hidden; }  .feed-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px;    border-bottom: 1px solid rgba(242,246,255,0.12); font-family: "JetBrains Mono", monospace; font-size: 10.5px;    letter-spacing: 2.4px; color: rgba(242,246,255,0.5); }  .feed-head .live { display: inline-flex; align-items: center; gap: 9px; }  .feed-head .live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: mbBlink 2s ease-in-out infinite; }  .feed-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; padding: 13px 16px;    border-bottom: 1px solid rgba(242,246,255,0.07); font-family: "JetBrains Mono", monospace; font-size: 12px; }  .feed-row.newest { background: rgba(95,233,208,0.07); animation: mbRowIn 0.55s ease-out both; }  .feed-row .h { color: var(--ice); }  .feed-row .x { color: rgba(242,246,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  .feed-row .r { color: var(--accent); }  .feed-empty { padding: 22px 16px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 1.4px; color: rgba(242,246,255,0.4); }  /* ---------- ways in ---------- */  .waysin { padding: 40px 44px 130px; display: flex; flex-direction: column; gap: 40px; }  .cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }  .wcard { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 3px; }  .wcard.open { border: 1px solid var(--accent); background: rgba(95,233,208,0.05); transition: background .2s ease; }  .wcard.open:hover { background: rgba(95,233,208,0.1); }  .wcard.soon { border: 1px solid rgba(242,246,255,0.12); }  .wcard .tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 2.6px; }  .wcard.open .tag { color: var(--accent); }  .wcard.soon .tag { color: rgba(242,246,255,0.42); }  .wcard .title { font-size: 30px; font-weight: 700; letter-spacing: -1px; }  .wcard.open .title { color: var(--ice); }  .wcard.soon .title { color: rgba(242,246,255,0.6); }  .wcard .desc { font-size: 17px; line-height: 1.6; text-wrap: pretty; }  .wcard.open .desc { color: rgba(242,246,255,0.68); }  .wcard.soon .desc { color: rgba(242,246,255,0.5); }  .wcard .go { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 2.2px; }  .wcard.open .go { color: var(--accent); }  .wcard.soon .go { color: rgba(242,246,255,0.6); }  .wcard.soon .go:hover { color: var(--ice); }  /* ---------- proof ---------- */  .proof { padding: 0 44px 130px; display: flex; flex-direction: column; gap: 40px; }  .cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }  .pcard { display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid rgba(242,246,255,0.12);    border-radius: 3px; background: rgba(242,246,255,0.02); }  .pcard .tag { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 2.6px; color: var(--accent); }  .pcard .title { font-size: 23px; font-weight: 500; letter-spacing: -0.6px; }  .pcard .body { font-size: 16px; line-height: 1.62; color: rgba(242,246,255,0.58); text-wrap: pretty; }  /* ---------- first bite ---------- */  .firstbite { padding: 0 44px 140px; }  .fb-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 60px; align-items: center;    border: 1px solid rgba(242,246,255,0.12); border-radius: 4px; padding: 56px 44px;    background: radial-gradient(70% 120% at 88% 50%, rgba(95,233,208,0.07), rgba(4,5,10,0)); }  .fb-copy { display: flex; flex-direction: column; gap: 22px; }  .fb-copy h2 { margin: 0; font-size: clamp(34px, 4.2vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -1.8px; }  .fb-copy p { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.62; color: rgba(242,246,255,0.62); text-wrap: pretty; }  .fb-cta { display: flex; flex-wrap: wrap; gap: 12px; }  .fb-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px;    font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 2.4px; border-radius: 2px; }  .fb-cta a.solid { background: var(--accent); color: var(--void); }  .fb-cta a.solid:hover { filter: brightness(1.12); }  .fb-cta a.line { border: 1px solid rgba(242,246,255,0.24); color: rgba(242,246,255,0.78); }  .fb-cta a.line:hover { border-color: var(--ice); color: var(--ice); }  .receipt { display: flex; flex-direction: column; border: 1px solid rgba(242,246,255,0.18); border-radius: 3px;    background: #06070f; max-width: 440px; width: 100%; justify-self: end; font-family: "JetBrains Mono", monospace; }  .receipt-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px;    border-bottom: 1px dashed rgba(242,246,255,0.18); font-size: 10.5px; letter-spacing: 2.6px; color: rgba(242,246,255,0.5); }  .receipt-body { display: flex; align-items: center; gap: 20px; padding: 26px 20px; }  .receipt-body .mk { position: relative; width: 74px; height: 74px; flex: none; }  .receipt-body .mk svg { position: absolute; inset: 0; }  .receipt-body .blk { display: flex; flex-direction: column; gap: 6px; }  .receipt-body .blk .k { font-size: 11px; letter-spacing: 2.4px; color: rgba(242,246,255,0.45); }  .receipt-body .blk .v { font-family: "Space Grotesk", sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -1px;    color: var(--ice); font-variant-numeric: tabular-nums; }  .receipt-rows { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 22px; font-size: 11.5px; }  .receipt-rows .row { display: flex; justify-content: space-between; gap: 14px; }  .receipt-rows .row .k { color: rgba(242,246,255,0.42); letter-spacing: 2px; }  .receipt-rows .row .a { color: var(--accent); }  .receipt-rows .row .t { color: rgba(242,246,255,0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }  .receipt-foot { padding: 14px 20px; border-top: 1px dashed rgba(242,246,255,0.18); font-size: 10.5px; letter-spacing: 2.4px; color: rgba(242,246,255,0.4); }  /* ---------- footer (unified mega-footer, scoped to the cinematic palette) ---------- */  footer.mb-footer { border-top: 1px solid rgba(242,246,255,0.1); background: rgba(255,255,255,0.015); padding: 64px 0 30px; margin-top: 40px; }  footer.mb-footer .mb-container { max-width: 1200px; margin: 0 auto; padding: 0 44px; }  .mb-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 34px; margin-bottom: 34px; }  .mb-footer .mb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }  .mb-footer .mb-brand-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; color: var(--ice); }  .mb-footer-brand p { margin: 0; color: rgba(242,246,255,0.5); font-size: 14px; line-height: 1.55; max-width: 260px; text-wrap: pretty; }  .mb-footer-col h4 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(242,246,255,0.5); margin: 0 0 14px; }  .mb-footer-col a { display: block; padding: 5px 0; color: rgba(242,246,255,0.72); text-decoration: none; font-size: 14px; }  .mb-footer-col a:hover { color: var(--accent); }  .mb-footer-bottom { border-top: 1px solid rgba(242,246,255,0.1); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: rgba(242,246,255,0.5); font-size: 13px; }  .mb-footer-legal { max-width: 620px; line-height: 1.5; }  .mb-footer-legal strong { color: rgba(242,246,255,0.72); }  /* below this the seven labels + CTAs no longer fit, so collapse to a hamburger */  @media (max-width: 1120px) {    .mb-nav-links { display: none; }    .mb-nav-cta .mb-nav-cta-btn { display: none; }    .mb-hamburger { display: flex; }  }  /* ---------- tablet ---------- */  @media (max-width: 1024px) {    .mb-nav-inner { padding: 0 32px; }    .hero { padding: 150px 32px 30px; }    .reactor { padding: 96px 32px; gap: 46px; }    .waysin { padding: 40px 32px 96px; }    .proof { padding: 0 32px 96px; }    .firstbite { padding: 0 32px 100px; }    .fb-box { padding: 44px 32px; gap: 40px; }    footer.mb-footer .mb-container { padding: 0 32px; }    .mb-footer-cols { grid-template-columns: 1fr 1fr; }    .receipt { justify-self: stretch; max-width: 100%; }  }  /* ---------- mobile ---------- */  @media (max-width: 640px) {    .mb-nav-inner { padding: 0 20px; }    .hero { padding: 100px 20px 24px; min-height: auto; }    h1.head { letter-spacing: -1.5px; }    .lead { font-size: 17px; }    .reactor { padding: 50px 20px; gap: 40px; }    .waysin { padding: 32px 20px 50px; }    .proof { padding: 0 20px 50px; }    .firstbite { padding: 0 20px 60px; }    .sec-head { flex-wrap: wrap; }    .fb-box { padding: 32px 20px; gap: 30px; }    .wcard { padding: 26px; }    footer.mb-footer .mb-container { padding: 0 20px; }    .mb-footer-cols { grid-template-columns: 1fr; gap: 26px; }    .mb-footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }  }  /* ---------- small phones ---------- */  @media (max-width: 400px) {    .mb-nav-inner { padding: 0 16px; }    .hero { padding: 120px 16px 20px; }    .reactor, .waysin, .proof, .firstbite, footer.site { padding-left: 16px; padding-right: 16px; }    .btn { padding: 15px 22px; }  }  @media (prefers-reduced-motion: reduce) {    .mb-meganav, .chip, h1.head, .lead, .hero-cta, .statgrid { animation: none !important; }    .chip, h1.head, .lead, .hero-cta, .statgrid, .mb-meganav { opacity: 1 !important; transform: none !important; }  }</style></head><body>  <div class="bg-glow"></div>  <div class="bg-scan"></div>  {% include "partials/mega_nav.html" %}  <main>    <!-- HERO -->    <section class="hero">      <div class="hero-copy">        <div class="chip"><span class="dot"></span><span>PRE-MAINNET &middot; LIVE TESTNET &middot; MBITE</span></div>        <h1 class="head">Mine the moon.</h1>        <p class="lead">You can't buy MBITE. It isn't listed anywhere &mdash; and that's the point. Proof-of-work money you mine on your own hardware, hold in your own wallet, and verify with your own node. No premine. No gatekeepers.</p>        <div class="hero-cta">          <a href="/mine" class="btn solid">START MINING<span>&#8599;</span></a>          <a href="/get-wallet" class="btn line">GET THE WALLET</a>          <a href="#reactor" class="btn text">or watch blocks get mined &rarr;</a>        </div>      </div>      <div class="statgrid" id="statgrid">        <div class="statcell"><span class="k">BLOCK HEIGHT</span><span class="v" id="stHeight">&mdash;</span></div>        <div class="statcell"><span class="k">MBITE MINED</span><span class="v" id="stMined">&mdash;</span></div>        <div class="statcell"><span class="k">TRANSACTIONS</span><span class="v" id="stTx">&mdash;</span></div>        <div class="statcell"><span class="k">MEMPOOL</span><span class="v" id="stMempool">&mdash;</span></div>      </div>    </section>    <!-- REACTOR -->    <section id="reactor" class="reactor">      <div class="reactor-copy" id="supply">        <span class="eyebrow">THE MECHANIC</span>        <h2>Every block is a bite.</h2>        <p>The supply is fixed and public. Each block mined takes a piece out of it &mdash; one published emission schedule, no insider allocation, nothing held back. The mark isn't decoration: it's the ledger, mid-bite.</p>        <div class="specs">          <div class="spec"><span class="v">~33,000,000</span><span class="k">MAX SUPPLY</span></div>          <div class="spec"><span class="v">10 MBITE</span><span class="k">GENESIS REWARD</span></div>          <div class="spec"><span class="v">1,000,000</span><span class="k">BLOCKS PER HALVING</span></div>          <div class="spec"><span class="v">2 min</span><span class="k">TARGET BLOCK TIME</span></div>        </div>      </div>      <div class="reactor-side">        <div class="bigmoon">          <div class="spin">            <svg viewBox="-120 -120 240 240">              <circle cx="0" cy="0" r="112" fill="none" stroke="#F2F6FF" stroke-opacity="0.14" stroke-width="0.8"/>              <circle cx="0" cy="0" r="104" fill="none" stroke="#5FE9D0" stroke-opacity="0.3" stroke-width="0.8" stroke-dasharray="1 9"/>            </svg>          </div>          <svg viewBox="-120 -120 240 240">            <mask id="mbBigBite" maskUnits="userSpaceOnUse" x="-120" y="-120" width="240" height="240">              <rect x="-120" y="-120" width="240" height="240" fill="#fff"/>              <circle cx="45" cy="-12" r="76" fill="#000"/>            </mask>            <g mask="url(#mbBigBite)">              <circle cx="-4" cy="0" r="86" fill="#5FE9D0" opacity="0.5"/>              <circle cx="4" cy="0" r="86" fill="#5B7BFF" opacity="0.5"/>              <circle cx="0" cy="0" r="86" fill="#F2F6FF"/>              <circle cx="0" cy="0" r="57" fill="none" stroke="#04050a" stroke-opacity="0.14" stroke-width="1.4"/>              <circle cx="-32" cy="-26" r="5" fill="#04050a" opacity="0.13"/>              <circle cx="-14" cy="34" r="3" fill="#04050a" opacity="0.11"/>            </g>            <circle id="reactorPulse" cx="0" cy="0" r="86" fill="none" stroke="#5FE9D0" stroke-width="1.6" opacity="0"/>          </svg>        </div>        <div class="feed">          <div class="feed-head">            <span class="live"><span class="dot"></span>LIVE REACTOR</span>            <span id="feedNote">TESTNET &middot; CONNECTING&hellip;</span>          </div>          <div id="feedRows">            <div class="feed-empty" id="feedEmpty">Waiting for the node&hellip;</div>          </div>        </div>      </div>    </section>    <!-- WAYS IN -->    <section id="mine" class="waysin">      <div class="sec-head">        <h2>Two honest ways in.</h2>        <span class="note">ONE OF THEM WORKS TODAY</span>      </div>      <div class="cards2">        <a href="/mine" class="wcard open">          <span class="tag">01 &middot; OPEN NOW</span>          <span class="title">Mine it</span>          <span class="desc">Point a miner at the network and earn the block reward directly. Windows, macOS, Linux &mdash; or watch it happen in your browser first.</span>          <span class="go">DOWNLOAD THE MINER &rarr;</span>        </a>        <div class="wcard soon">          <span class="tag">02 &middot; NOT YET</span>          <span class="title">Buy it</span>          <span class="desc">MBITE isn't trading on any exchange. When that changes we'll say so once, in plain language. No countdowns, no price talk.</span>          <a href="/markets" class="go">TELL ME WHEN IT LISTS &rarr;</a>        </div>      </div>    </section>    <!-- PROOF -->    <section id="proof" class="proof">      <div class="sec-head">        <h2>Proof, not promises.</h2>        <a href="/whitepaper">READ THE DESIGN RECORDS &rarr;</a>      </div>      <div class="cards3">        <div class="pcard">          <span class="tag">NO PREMINE</span>          <span class="title">Fair launch, in the open</span>          <span class="body">Every MBITE is mined under one published emission schedule. No insider allocation, no head start, nothing reserved.</span>        </div>        <div class="pcard">          <span class="tag">SELF-CUSTODY</span>          <span class="title">Your keys, your coins</span>          <span class="body">Non-custodial by default. This site will never ask you for a seed phrase or a private key &mdash; and never needs to.</span>        </div>        <div class="pcard">          <span class="tag">VERIFY</span>          <span class="title">Don't trust, check</span>          <span class="body">An open explorer and a read-only API. Every claim on this page can be tested against the chain by you, right now.</span>        </div>      </div>    </section>    <!-- FIRST BITE -->    <section id="firstbite" class="firstbite">      <div class="fb-box">        <div class="fb-copy">          <span class="eyebrow">THE RITUAL</span>          <h2>Take your first bite.</h2>          <p>Mine your first block and the wallet issues a receipt: height, timestamp, hash. It can't be bought and it can't be faked &mdash; anyone can check it against the chain. That's the only membership card this network has.</p>          <div class="fb-cta">            <a href="/mine" class="solid">MINE MY FIRST BLOCK<span>&#8599;</span></a>            <a href="/explorer" class="line">VERIFY A RECEIPT</a>          </div>        </div>        <div class="receipt">          <div class="receipt-top"><span>FIRST BITE &middot; RECEIPT</span><span>MBITE</span></div>          <div class="receipt-body">            <div class="mk">              <svg viewBox="-100 -100 200 200">                <mask id="mbReceiptBite" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200">                  <rect x="-100" y="-100" width="200" height="200" fill="#fff"/>                  <circle cx="50" cy="-13" r="84" fill="#000"/>                </mask>                <g mask="url(#mbReceiptBite)"><circle cx="0" cy="0" r="92" fill="#F2F6FF"/></g>              </svg>            </div>            <div class="blk"><span class="k">BLOCK</span><span class="v" id="receiptHeight">&mdash;</span></div>          </div>          <div class="receipt-rows">            <div class="row"><span class="k">REWARD</span><span class="a">+10.00000000</span></div>            <div class="row"><span class="k">HASH</span><span class="t" id="receiptHash">&mdash;</span></div>            <div class="row"><span class="k">MINED BY</span><span class="t">you</span></div>          </div>          <div class="receipt-foot">VERIFIABLE IN THE EXPLORER</div>        </div>      </div>    </section>    {% include "partials/mega_footer.html" %}  </main><script nonce="{{ csp_nonce }}">(function () {  "use strict";  var $ = function (id) { return document.getElementById(id); };  function num(n) { return Number(n).toLocaleString("en-US"); }  /* ---- live network data (real endpoints, honest empty state) ---- */  function subsidyFor(height) {    var halvings = Math.floor(height / 1000000);    return 10 / Math.pow(2, halvings);  }  function shortHash(h) {    if (!h) return "\u2014";    return h.length > 26 ? h.slice(0, 20) + "\u2026" + h.slice(-4) : h;  }  var newestSeen = null;  function loadInfo() {    fetch("/api/blockchain/info").then(function (r) { return r.json(); }).then(function (d) {      if (!d || d.status !== "success") throw new Error("bad");      $("stHeight").textContent = num(d.height);      $("stMined").textContent = num(Math.round(d.total_money_coins || 0));      $("stTx").textContent = num(d.tx_count || 0);      $("stMempool").textContent = num(d.mempool_size || 0) + " tx";    }).catch(function () { /* leave the em-dashes: never fabricate */ });  }  function loadBlocks() {    fetch("/api/explorer/blocks?limit=4").then(function (r) { return r.json(); }).then(function (d) {      if (!d || d.status !== "success" || !d.blocks) throw new Error("bad");      var blocks = d.blocks;      $("feedNote").innerHTML = "TESTNET &middot; LIVE";      if (!blocks.length) {        $("feedRows").innerHTML = '<div class="feed-empty">No blocks yet &mdash; be the first to mine one.</div>';        return;      }      var isNew = newestSeen !== null && blocks[0] && blocks[0].height > newestSeen;      var html = blocks.map(function (b, i) {        var cls = (i === 0 && isNew) ? "feed-row newest" : "feed-row";        return '<div class="' + cls + '">' +          '<span class="h">#' + num(b.height) + '</span>' +          '<span class="x">' + shortHash(b.hash) + '</span>' +          '<span class="r">+' + subsidyFor(b.height).toFixed(2) + '</span>' +        '</div>';      }).join("");      $("feedRows").innerHTML = html;      if (blocks[0]) newestSeen = blocks[0].height;      // pulse the reactor moon when a new block lands      if (isNew) {        var pulse = $("reactorPulse");        pulse.style.animation = "none"; void pulse.offsetWidth;        pulse.style.animation = "mbPulseA 1.5s ease-out";      }      // fill the "first bite" receipt from the oldest visible real block      var recv = blocks[blocks.length - 1];      if (recv) {        $("receiptHeight").textContent = "#" + num(recv.height);        $("receiptHash").textContent = shortHash(recv.hash);      }    }).catch(function () {      $("feedNote").innerHTML = "TESTNET &middot; OFFLINE";      $("feedRows").innerHTML = '<div class="feed-empty">Node unreachable &mdash; start it to see live blocks.</div>';    });  }  function tick() { loadInfo(); loadBlocks(); }  tick();  setInterval(tick, 5000);  // ---------- mega-nav dropdowns (same behaviour as site.js on every other page) ----------  var navItems = Array.prototype.slice.call(document.querySelectorAll(".mb-nav-item"));  function closeAllDropdowns() { navItems.forEach(function (i) { i.classList.remove("is-open"); }); }  navItems.forEach(function (item) {    var trigger = item.querySelector(".mb-nav-trigger");    if (!trigger || !item.querySelector(".mb-dropdown")) return;    trigger.addEventListener("click", function (e) {      e.preventDefault();      var wasOpen = item.classList.contains("is-open");      closeAllDropdowns();      if (!wasOpen) item.classList.add("is-open");    });  });  // ---------- mobile sheet ----------  var hamburger = document.querySelector(".mb-hamburger");  var sheet = document.querySelector(".mb-mobile-sheet");  var sheetClose = document.querySelector(".mb-mobile-close");  function openMobileSheet() { if (sheet) { sheet.classList.add("is-open"); document.body.style.overflow = "hidden"; } }  function closeMobileSheet() { if (sheet) { sheet.classList.remove("is-open"); document.body.style.overflow = ""; } }  if (hamburger) hamburger.addEventListener("click", openMobileSheet);  if (sheetClose) sheetClose.addEventListener("click", closeMobileSheet);  document.querySelectorAll(".mb-mobile-group > button").forEach(function (btn) {    btn.addEventListener("click", function () { btn.parentElement.classList.toggle("is-open"); });  });  document.querySelectorAll(".mb-mobile-links a").forEach(function (a) {    a.addEventListener("click", closeMobileSheet);  });  document.addEventListener("click", function (e) {    if (!e.target.closest(".mb-nav-item")) closeAllDropdowns();  });  document.addEventListener("keydown", function (e) {    if (e.key === "Escape") { closeAllDropdowns(); closeMobileSheet(); }  });})();</script></body></html>