:root {
  --bg: #12081a;
  --card: rgba(18, 10, 28, 0.72);
  --gold: #ffe34a;
  --orange: #ffb020;
  --steam: #fff6c8;
  --text: #fff8dc;
  --muted: #ffe9a8;
  --line: rgba(255, 227, 74, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--text);
  background-color: #2a1840;
  position: relative;
  min-height: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(20,8,30,.18), rgba(12,8,24,.32)),
    url("bg-diver.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.85) contrast(1.18) brightness(1.06);
}

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  background: rgba(28, 12, 40, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: Bangers, cursive; font-size: 28px; color: var(--gold); letter-spacing: 1px; }
.nav-links a { color: var(--text); text-decoration: none; margin-left: 18px; font-weight: 600; }
.nav-links a:hover { color: var(--gold); }

.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--orange), var(--gold));
  color: #2a1400;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.hero {
  min-height: 90vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 20px 72px;
  background: transparent;
}
.mascot-wrap {
  width: min(340px, 78vw);
  margin: 0 auto 18px;
  position: relative;
}
.mascot-wrap img {
  width: 100%;
  border-radius: 50%;
  border: 4px solid rgba(255,227,74,.7);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero h1 {
  font-family: Bangers, cursive;
  font-size: clamp(52px, 11vw, 118px);
  color: var(--gold);
  line-height: .9;
  text-shadow: 0 4px 0 #7a4a00, 0 10px 24px rgba(0,0,0,.55);
}
.ticker {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--gold);
  letter-spacing: 2px;
  background: rgba(20,8,30,.45);
}
.tagline { margin: 16px 0 26px; font-size: 20px; color: var(--steam); }

section { padding: 72px 22px; max-width: 1080px; margin: 0 auto; }
h2 {
  font-family: Bangers, cursive;
  font-size: 46px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.lead { text-align: center; color: var(--muted); max-width: 720px; margin: 0 auto 32px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card {
  background: var(--card);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,227,74,.18);
  border-radius: 16px;
  padding: 20px;
  color: var(--text);
}
.card h3 { color: var(--gold); margin-bottom: 8px; }

.bar { height: 14px; border-radius: 99px; background: #1a3324; overflow: hidden; margin: 8px 0 16px; }
.fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); }

.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  background: var(--card);
  backdrop-filter: blur(8px);
  padding: 16px;
  border-radius: 14px;
  border-left: 4px solid var(--gold);
  margin-bottom: 12px;
  color: var(--text);
}

.recipe ol { margin-left: 18px; color: var(--muted); }
.recipe li { margin: 6px 0; }
.meta { font-size: 13px; color: var(--gold); margin-bottom: 10px; }

footer {
  text-align: center;
  padding: 36px 16px 56px;
  color: var(--muted);
  border-top: 1px solid rgba(255,227,74,.16);
}
.disclaimer { font-size: 12px; max-width: 640px; margin: 14px auto 0; opacity: .8; }
.contract { word-break: break-all; font-size: 13px; margin-top: 8px; }

@media (max-width: 720px) {
  .nav-links a:not(.btn) { display: none; }
  .step { grid-template-columns: 1fr; }
}


.swarm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.plank {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
  opacity: .92;
}
.p1 { width: 92px; top: 12%; animation: swimA 22s linear infinite; }
.p2 { width: 70px; top: 38%; animation: swimB 18s linear infinite; animation-delay: -4s; }
.p3 { width: 110px; top: 62%; animation: swimA 26s linear infinite reverse; animation-delay: -9s; }
.p4 { width: 58px; top: 78%; animation: swimC 16s linear infinite; animation-delay: -2s; }
.p5 { width: 84px; top: 22%; animation: swimB 24s linear infinite reverse; animation-delay: -11s; }
.p6 { width: 64px; top: 50%; animation: swimC 20s linear infinite reverse; animation-delay: -7s; }

@keyframes swimA {
  0%   { left: -12%; transform: translateY(0) rotate(-8deg); }
  50%  { transform: translateY(-28px) rotate(6deg); }
  100% { left: 108%; transform: translateY(10px) rotate(-4deg); }
}
@keyframes swimB {
  0%   { left: 108%; transform: translateY(0) scaleX(-1) rotate(-6deg); }
  50%  { transform: translateY(24px) scaleX(-1) rotate(8deg); }
  100% { left: -12%; transform: translateY(-16px) scaleX(-1) rotate(-2deg); }
}
@keyframes swimC {
  0%   { left: -10%; transform: translateY(0) rotate(4deg); }
  25%  { transform: translateY(-40px) rotate(-10deg); }
  75%  { transform: translateY(30px) rotate(8deg); }
  100% { left: 110%; transform: translateY(0) rotate(-3deg); }
}


.marlin-swim {
  position: fixed;
  top: 20%;
  left: -28%;
  width: 180px;          /* kleiner = weiter weg */
  z-index: 3;            /* hinter Text und Rezepten */
  opacity: 0.75;         /* durchscheinender */
  pointer-events: none;
  animation: none !important;
}

@keyframes marlinPace {
  0%   { left: -22%; transform: scaleX(-1); }
  45%  { left: 102%; transform: scaleX(-1); }
  50%  { left: 102%; transform: scaleX(1); }
  95%  { left: -22%; transform: scaleX(1); }
  100% { left: -22%; transform: scaleX(-1); }
}

.reef {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 250px;
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 2vw;
}
.weed {
  width: 42px;
  height: 170px;
  transform-origin: 50% 100%;
  opacity: .88;
  filter: drop-shadow(0 0 6px rgba(20,80,40,.4));
}
.w1 { height: 200px; animation: sway 4.6s ease-in-out infinite; }
.w2 { height: 150px; animation: sway 5.4s ease-in-out infinite reverse; }
.w3 { height: 180px; animation: sway 3.8s ease-in-out infinite; }
.w4 { height: 210px; animation: sway 6s ease-in-out infinite reverse; }
.w5 { height: 140px; animation: sway 4.2s ease-in-out infinite; }
.w6 { height: 190px; animation: sway 5.1s ease-in-out infinite; }
.w7 { height: 165px; animation: sway 3.5s ease-in-out infinite reverse; }
.w8 { height: 155px; animation: sway 4.9s ease-in-out infinite; }
.w9 { height: 205px; animation: sway 5.6s ease-in-out infinite reverse; }
.w10 { height: 148px; animation: sway 4s ease-in-out infinite; }
.w11 { height: 218px; animation: sway 6.4s ease-in-out infinite; }
.w12 { height: 172px; animation: sway 3.7s ease-in-out infinite reverse; }

@keyframes sway {
  0%,100% { transform: rotate(-8deg); }
  50% { transform: rotate(9deg); }
}

.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  overflow: hidden;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, #ffffff 0 7%, rgba(255,255,255,.0) 8%),
    radial-gradient(circle at 50% 50%, rgba(220,240,255,.14) 0 55%, rgba(255,255,255,.06) 100%);
  border: 2px solid #ffffff;
  box-shadow: none;
  outline: none;
  filter: none;
  image-rendering: crisp-edges;
  animation: rise var(--rise) linear forwards;
  will-change: transform, opacity;
}
.bubble::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 18%;
  left: 22%;
  top: 20%;
  border-radius: 50%;
  background: #fff;
}
.bubble-fg {
  border-width: 3px;
  border-color: #fff;
}
@keyframes rise {
  0%   { transform: translate(0, 0) scale(.55); }
  20%  { transform: translate(calc(var(--drift) * .2), -22vh) scale(.85) translateX(var(--wobble)); }
  50%  { transform: translate(calc(var(--drift) * .55), -55vh) scale(1) translateX(calc(var(--wobble) * -1)); }
  80%  { transform: translate(calc(var(--drift) * .85), -88vh) scale(1.05) translateX(var(--wobble)); }
  100% { transform: translate(var(--drift), -115vh) scale(1.12); opacity: 0; }
}

.tracker-box { margin-top: 8px; }
.tracker-row { display: flex; gap: 10px; margin: 10px 0 12px; flex-wrap: wrap; }
#wallet-input {
  flex: 1;
  min-width: 220px;
  background: rgba(8,6,16,.7);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 12px;
  font: inherit;
}
#wallet-status { margin-bottom: 14px; }

.holders-table { width: 100%; border-collapse: collapse; color: var(--text); }
.holders-table th, .holders-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.holders-table th { color: var(--gold); }
.holders-table a { color: var(--gold); text-decoration: none; }