:root {
  --ink: #e9f5f2;
  --muted: #91aaa7;
  --paper: #071211;
  --panel: #0d1d1b;
  --green: #20d6b0;
  --green-dark: #0e8f7d;
  --lime: #d5f36b;
  --line: #1d3935;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 85% 8%, #12332e 0, transparent 28%), var(--paper); }
a { color: inherit; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

header { padding: 22px 0; border-bottom: 1px solid var(--line); background: rgba(7, 18, 17, .88); }
nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: bold; text-decoration: none; }
.mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--green); color: #061310; font: bold 1.05rem Arial, sans-serif; transform: rotate(-8deg); box-shadow: 5px 5px 0 var(--lime); }
.nav-links { display: flex; align-items: center; gap: 26px; font: 0.88rem Arial, sans-serif; }
.nav-links a { text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--green); }
.nav-join { padding: 11px 17px; border: 1px solid var(--green); border-radius: 3px; color: var(--green); text-decoration: none; font: bold 0.8rem Arial, sans-serif; }
.nav-join:hover { background: var(--green); color: #061310; }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; min-height: 590px; padding: 80px 0 100px; }
.eyebrow { margin: 0 0 18px; color: var(--green); font: bold 0.75rem Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { max-width: 680px; margin: 0; color: var(--ink); font-size: clamp(3.7rem, 8vw, 7.5rem); line-height: 0.88; letter-spacing: 0; font-weight: 700; }
.intro { max-width: 620px; margin: 30px 0 34px; color: var(--muted); font-size: 1.18rem; line-height: 1.6; }
.actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.button { display: inline-block; padding: 15px 21px; border-radius: 3px; text-decoration: none; font: bold 0.85rem Arial, sans-serif; }
.button-primary { background: var(--green); color: #061310; box-shadow: 0 0 24px rgba(32, 214, 176, .2); }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { border: 1px solid var(--line); color: var(--ink); }
.button-quiet { border-bottom: 1px solid var(--ink); text-decoration: none; }

.scene { position: relative; min-height: 360px; border: 1px solid var(--green); background: linear-gradient(145deg, #123d36, #0b201d); overflow: hidden; box-shadow: var(--shadow); }
.scene::before { content: ''; position: absolute; width: 250px; height: 250px; right: -50px; top: -55px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.05), 0 0 0 52px rgba(255,255,255,.05); }
.hill { position: absolute; bottom: -90px; left: -10%; width: 125%; height: 240px; border-radius: 50% 50% 0 0; background: #071b18; transform: rotate(-5deg); }
.pixel-sun { position: absolute; right: 20%; top: 22%; width: 62px; height: 62px; background: var(--lime); box-shadow: 12px 12px 0 rgba(183,216,107,.35); }
.scene-note { position: absolute; left: 24px; bottom: 22px; color: white; font: 0.72rem Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 25px 28px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact strong { display: block; margin-bottom: 6px; font-size: 1.15rem; }
.fact span { color: var(--muted); font: 0.76rem Arial, sans-serif; }
.about { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 80px; padding: 100px 0; }
h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: 0; }
.about-copy { max-width: 570px; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }

.page-content { min-height: calc(100vh - 160px); padding: 100px 0 120px; }
.page-content h1 { max-width: 760px; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 850px; margin-top: 70px; }
.content-grid article, .status-panel, .launch-panel { padding: 32px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(13, 29, 27, .96), rgba(8, 24, 22, .96)); box-shadow: var(--shadow); }
.content-grid h2 { margin-bottom: 18px; font-size: 2rem; }
.content-grid p, .status-panel p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.rules-list { max-width: 820px; margin: 65px 0 0; padding: 0; list-style: none; counter-reset: rules; }
.rules-list li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.05rem; line-height: 1.65; counter-increment: rules; }
.rules-list li::before { content: counter(rules, decimal-leading-zero); color: var(--green); font: bold 0.82rem Arial, sans-serif; }
.rules-list strong { color: var(--ink); }
.status-panel { max-width: 700px; margin-top: 65px; }
.status-panel h2 { margin: 10px 0 18px; font-size: 2.4rem; }
.status-label { color: var(--green) !important; font: bold 0.75rem Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.status-label span { color: #4d9c62; }
.status-panel .button { margin-top: 12px; }
.launch-page .intro { max-width: 600px; }
.launch-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 850px; margin-top: 65px; border-color: var(--green-dark); }
.launch-panel h2 { margin: 10px 0 12px; font-size: 2.4rem; }
.launch-panel p:not(.status-label) { margin: 0; color: var(--muted); line-height: 1.6; }
.launch-button { flex: 0 0 auto; }
footer { padding: 24px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font: 0.75rem Arial, sans-serif; }

@media (max-width: 720px) {
  .wrap { width: min(100% - 28px, 560px); }
  .nav-links { display: none; }
  .hero { display: block; min-height: 0; padding: 65px 0 70px; }
  h1 { font-size: clamp(3.5rem, 17vw, 6rem); }
  .scene { min-height: 250px; margin-top: 55px; }
  .strip, .about, .content-grid { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--ink); }
  .fact:last-child { border-bottom: 0; }
  .about { gap: 32px; padding: 70px 0; }
  .page-content { padding: 70px 0 90px; }
  .content-grid { margin-top: 50px; }
  .launch-panel { display: block; margin-top: 50px; }
  .launch-button { margin-top: 26px; }
  .rules-list { margin-top: 45px; }
}