* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at center, #02110f, #000000 70%);
  color: #00e5ff;
  font-family: 'Inter', sans-serif;
}

/* HEADER */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  backdrop-filter: blur(6px);
  z-index: 20;
}

/* MAIN */
.main {
  padding-top: 60px;
}

/* CORE CONTAINER */
.genesis-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 2 / 3;
}

/* IMAGE */
.genesis-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px #13ffc6);
}

/* INTERACTION NODES */
.node {
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

/* 🧬 BODY */
.node-body {
  width: 38%;
  height: 28%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}

/* 🍎 APPLE (PRIMARY CTA) */
.node-apple {
  width: 65px;
  height: 65px;
  left: 68%;
  top: 57%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 20;
  animation: pulse 2s infinite;
}

/* 🐍 SNAKE */
.node-snake {
  width: 28%;
  height: 38%;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

/* 🌱 ROOTS */
.node-roots {
  width: 55%;
  height: 22%;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
}

/* 👤 EVE */
.node-eve {
  width: 25%;
  height: 40%;
  right: 0;
  top: 40%;
}

/* APPLE PULSE */
@keyframes pulse {
  0% { box-shadow: 0 0 5px rgba(255,0,0,0.4); }
  50% { box-shadow: 0 0 20px rgba(255,0,0,0.9); }
  100% { box-shadow: 0 0 5px rgba(255,0,0,0.4); }
}

/* HOVER (desktop only) */
@media (hover: hover) {
  .node:hover {
    box-shadow: 0 0 20px #00e5ff;
  }

  .node-apple:hover {
    box-shadow: 0 0 30px red;
  }
}

/* TEXT BLOCK */
.text-block {
  padding: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* MODULES (mobile navigation) */
.modules {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 10px;
}

.modules a {
  border: 1px solid #00e5ff;
  padding: 12px;
  text-decoration: none;
  color: #00e5ff;
  font-size: 14px;
}

.modules a:hover {
  background: #00e5ff;
  color: black;
}

/* TICKER */
.ticker {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.ticker-track {
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

@keyframes scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* DESKTOP MODE */
@media (min-width: 900px) {

  .main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 100vh;
  }

  .text-block {
    width: 260px;
  }

  .modules {
    width: 260px;
  }

  .genesis-container {
    max-width: 600px;
  }
}