:root {
  --ink: #10251b;
  --deep: #091b13;
  --forest: #143c28;
  --leaf: #2d6b3e;
  --lime: #a9d84b;
  --pam: #ffd84a;
  --orange: #f59b30;
  --cream: #fff5cf;
  --paper: #f4edcd;
  --muted: #93a88d;
  --pixel: "Press Start 2P", monospace;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--deep);
  font-family: var(--mono);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.32) 4px);
}

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 29;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 5vw, 80px);
  background: rgba(7, 25, 17, .96);
  border-bottom: 3px solid #31553a;
  position: relative;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 13px var(--pixel);
  letter-spacing: -1px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--deep);
  background: var(--pam);
  border: 3px solid #d18825;
  box-shadow: 3px 3px 0 #6e4219;
}
.brand-accent { color: var(--pam); }

nav { display: flex; gap: 40px; }
nav a {
  color: #a9b7a4;
  font: 8px var(--pixel);
  transition: .2s;
}
nav a:hover { color: var(--pam); }

.launchpad-badge {
  padding: 10px 13px;
  font: 7px var(--pixel);
  color: var(--lime);
  border: 1px solid #3d6a43;
  background: #0f2b1d;
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #9ddf50;
  box-shadow: 0 0 9px #9ddf50;
}

.hero {
  height: min(720px, calc(100vh - 78px));
  min-height: 600px;
  position: relative;
  display: grid;
  place-items: center;
  background: url("jungle-hero.jpg") center / cover no-repeat;
  image-rendering: pixelated;
  border-bottom: 8px solid #1f4b2c;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,23,15,.62), transparent 32%, transparent 68%, rgba(6,23,15,.62)),
    linear-gradient(0deg, rgba(6,23,15,.82), transparent 42%),
    rgba(14, 50, 31, .07);
}
.hero-content {
  width: min(920px, 90vw);
  position: relative;
  z-index: 2;
  text-align: center;
  transform: translateY(-4%);
}
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #173c28;
  font: 8px var(--pixel);
  text-shadow: 1px 1px var(--cream);
}
.eyebrow span { width: 40px; height: 2px; background: #173c28; }
h1 {
  margin: 28px 0 22px;
  color: #fff8d2;
  font: clamp(34px, 5.3vw, 72px)/1.35 var(--pixel);
  letter-spacing: -4px;
  text-shadow: 5px 5px 0 #173e28, 8px 8px 0 rgba(0,0,0,.35);
}
h1 em { color: var(--pam); font-style: normal; }
.hero-content > p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: #f7f4db;
  font-size: 16px;
  line-height: 1.7;
  text-shadow: 2px 2px #24482f;
}

.pixel-button {
  border: 0;
  cursor: pointer;
  font-family: var(--pixel);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 6px 6px);
}
.primary-button {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  padding: 18px 25px;
  color: #2b240c;
  background: var(--pam);
  box-shadow: inset 0 -6px #df9729;
  font-size: 11px;
  transition: transform .2s;
}
.primary-button:hover { transform: translateY(-3px); }
.primary-button span { font-size: 18px; }

.hero-stats {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 90%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 17px 0;
  background: rgba(8, 28, 19, .9);
  border: 2px solid #537345;
  border-bottom: 0;
}
.hero-stats div {
  display: grid;
  gap: 7px;
  text-align: center;
  border-right: 1px solid #486043;
}
.hero-stats div:last-child { border: 0; }
.hero-stats strong { color: var(--pam); font: 13px var(--pixel); }
.hero-stats span { color: #8ca18a; font: 7px var(--pixel); }
.floating-pam {
  position: absolute;
  z-index: 2;
  padding: 10px 12px;
  color: #2b240c;
  background: var(--pam);
  border: 3px solid #d18825;
  box-shadow: 4px 4px 0 rgba(52, 35, 8, .5);
  font: 10px var(--pixel);
  animation: float 4s ease-in-out infinite;
}
.pam-one { left: 12%; top: 30%; transform: rotate(-8deg); }
.pam-two { right: 12%; top: 38%; animation-delay: -2s; transform: rotate(6deg); }
@keyframes float { 50% { translate: 0 -13px; rotate: 7deg; } }

.miner-section {
  padding: 100px clamp(20px, 7vw, 110px) 120px;
  background:
    linear-gradient(rgba(11,34,23,.95), rgba(11,34,23,.98)),
    radial-gradient(circle at 20% 20%, #397448 0 2px, transparent 3px);
  background-size: auto, 22px 22px;
}
.section-heading { margin-bottom: 42px; }
.kicker { color: var(--lime); font: 8px var(--pixel); }
.section-heading h2 {
  margin: 17px 0 12px;
  font: clamp(22px, 3vw, 36px)/1.3 var(--pixel);
  color: var(--cream);
}
.section-heading p { color: var(--muted); }
.centered { text-align: center; }

.miner-grid {
  max-width: 1180px;
  margin: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: stretch;
}
.pixel-panel {
  position: relative;
  background: #102b1e;
  border: 2px solid #416044;
  box-shadow: 7px 7px 0 #06140d;
}
.pixel-panel::before, .pixel-panel::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--deep);
}
.pixel-panel::before { left: -2px; top: -2px; }
.pixel-panel::after { right: -2px; bottom: -2px; }
.wallet-panel { padding: 27px; }
.panel-label { color: var(--lime); font: 7px var(--pixel); }
.wallet-panel label {
  display: block;
  margin: 31px 0 10px;
  color: #d4dfc7;
  font: 7px var(--pixel);
}
.wallet-input-wrap { position: relative; }
.wallet-input-wrap input {
  width: 100%;
  padding: 15px 75px 15px 13px;
  color: var(--cream);
  outline: 0;
  border: 1px solid #48644b;
  background: #091c13;
  font-size: 12px;
}
.wallet-input-wrap input:focus { border-color: var(--lime); }
.wallet-status {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #748378;
  font: 6px var(--pixel);
}
.wallet-status.connected { color: var(--lime); }
.wallet-button {
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  color: #18210e;
  background: var(--lime);
  font-size: 8px;
}
.wallet-message { min-height: 35px; color: #788c7d; font-size: 10px; line-height: 1.5; }
.network-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px dashed #38513c;
  font: 7px var(--pixel);
}
.network-row span { color: #758b7a; }
.network-row strong { color: #c4d2ba; font-weight: normal; }
.status-light { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

.mining-console { padding: 30px; overflow: hidden; }
.mining-console::after {
  width: 180px;
  height: 180px;
  right: -50px;
  bottom: -50px;
  border-radius: 50%;
  filter: blur(60px);
  background: rgba(169,216,75,.18);
}
.console-top { display: flex; justify-content: space-between; }
.balance-line { display: flex; align-items: center; gap: 13px; margin-top: 13px; }
.pam-icon, .pam-step-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  color: #392907;
  background: var(--pam);
  border: 3px solid #d18a24;
  box-shadow: 3px 3px 0 #6d4914;
  font: 13px var(--pixel);
}
.pam-step-icon { width: 45px; height: 45px; }
.balance-line strong { color: var(--pam); font: clamp(27px, 4vw, 48px) var(--pixel); letter-spacing: -3px; }
.token-name { display: block; margin: 7px 0 0 49px; color: #a88e43; font: 8px var(--pixel); }
.mining-badge { align-self: start; padding: 10px; border: 1px solid #536157; color: #77847b; font: 7px var(--pixel); }
.mining-badge i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #748078; }
.mining-badge.active { color: var(--lime); border-color: #668d48; }
.mining-badge.active i { background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.progress-copy, .threshold-line { display: flex; justify-content: space-between; font-size: 10px; }
.progress-copy { margin-top: 38px; color: #a2b09f; }
.progress-copy span:last-child { color: var(--pam); }
.progress-track { height: 17px; margin-top: 10px; position: relative; border: 2px solid #405943; background: #091b12; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #79af3c, var(--pam)); transition: width .5s linear; box-shadow: 0 0 15px rgba(255,216,74,.3); }
.progress-marks { position: absolute; inset: 0; display: flex; justify-content: space-evenly; }
.progress-marks i { width: 1px; background: rgba(255,255,255,.2); }
.threshold-line { margin-top: 7px; color: #687b6c; font-size: 8px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 31px 0; border: 1px solid #3c5540; }
.metric { padding: 17px; border-right: 1px solid #3c5540; }
.metric:last-child { border: 0; }
.metric > span, .metric small { display: block; color: #738578; font: 6px var(--pixel); }
.metric strong { display: block; margin: 11px 0 8px; color: #e8efd6; font: 13px var(--pixel); }
.metric strong b { font-weight: normal; }
.metric small { color: #879e5b; }

.mine-button {
  width: 100%;
  min-height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
  color: #24200d;
  background: var(--pam);
  box-shadow: inset 0 -7px #dc9125;
}
.mine-button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .5; }
.mine-button .button-icon { font-size: 24px; }
.mine-button b, .mine-button small { display: block; }
.mine-button b { font: 11px var(--pixel); }
.mine-button small { margin-top: 7px; font: 6px var(--pixel); opacity: .65; }
.mine-button.running { background: #ef7747; box-shadow: inset 0 -7px #a83f29; color: #fff2d0; }
.claim-button {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  color: #66776a;
  border: 1px dashed #405543;
  background: transparent;
  font: 7px var(--pixel);
}
.claim-button.ready { color: var(--deep); background: var(--lime); border-style: solid; cursor: pointer; }

.steps-section { padding: 100px 8%; background: #f1e7bd; color: var(--ink); }
.steps-section h2 { color: var(--ink); }
.steps { max-width: 1060px; margin: 55px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps article { position: relative; padding: 34px 28px; border: 3px solid #23462c; box-shadow: 6px 6px 0 #23462c; background: #f8f0cf; }
.step-number { position: absolute; right: 17px; top: 17px; color: #b6ad88; font: 11px var(--pixel); }
.step-icon { font-size: 36px; }
.steps h3 { font: 13px var(--pixel); margin: 23px 0 15px; }
.steps p { color: #60705f; font-size: 13px; line-height: 1.7; }
.token-strip { display: grid; grid-template-columns: repeat(5, 1fr); background: #183824; border-block: 2px solid #52704f; }
.token-strip div { padding: 25px 14px; text-align: center; border-right: 1px solid #3d5940; }
.token-strip span, .token-strip strong { display: block; }
.token-strip span { margin-bottom: 10px; color: #748a77; font: 6px var(--pixel); }
.token-strip strong { color: var(--pam); font: 9px var(--pixel); }
.green-text { color: var(--lime) !important; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 35px 6%; background: #07150e; }
footer p { color: #5e7363; font: 6px var(--pixel); }
.social-link { color: var(--pam); font: 7px var(--pixel); transition: color .2s, transform .2s; }
.social-link:hover { color: var(--lime); transform: translateY(-2px); }
.footer-brand { font-size: 9px; }
.footer-brand .brand-mark { width: 30px; height: 30px; font-size: 9px; }

.toast {
  position: fixed;
  z-index: 50;
  right: 25px;
  bottom: 25px;
  padding: 16px 20px;
  color: var(--deep);
  background: var(--lime);
  border: 3px solid var(--cream);
  box-shadow: 5px 5px 0 #07150e;
  font: 7px var(--pixel);
  transform: translateY(100px);
  opacity: 0;
  transition: .25s;
}
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 850px) {
  nav { display: none; }
  .launchpad-badge { font-size: 5px; }
  .hero { min-height: 620px; }
  h1 { letter-spacing: -2px; }
  .miner-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .token-strip { grid-template-columns: 1fr 1fr; }
  footer { flex-direction: column; gap: 20px; }
}

@media (max-width: 560px) {
  .topbar { height: 67px; padding: 0 14px; }
  .brand { font-size: 9px; }
  .brand-mark { width: 31px; height: 31px; font-size: 9px; }
  .hero { height: 650px; background-position: 48% center; }
  .hero-content { transform: translateY(-8%); }
  .hero-content > p { font-size: 13px; }
  .floating-pam { display: none; }
  .hero-stats { width: 94%; }
  .hero-stats strong { font-size: 9px; }
  .hero-stats span { font-size: 5px; }
  .miner-section { padding: 75px 15px; }
  .mining-console, .wallet-panel { padding: 22px 17px; }
  .balance-line strong { font-size: 26px; letter-spacing: -2px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid #3c5540; }
  .token-strip { grid-template-columns: 1fr; }
  .token-strip div { border-right: 0; border-bottom: 1px solid #3d5940; }
}