@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --green: #168447;
  --deep: #07130d;
  --red: #d83a32;
  --gold: #f3c742;
  --cream: #fff7df;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(circle at 15% 15%, rgba(22,132,71,.25), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(216,58,50,.18), transparent 30%),
    #07130d;
  color: var(--cream);
  font-family: Fredoka, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px, #fff 4px
  );
}

.wrap {
  width: min(1050px, 92%);
  margin: 0 auto;
  padding: 55px 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(35px, 7vw, 85px);
  align-items: center;
}

.art-wrap {
  position: relative;
  transform: rotate(-2deg);
}

.art-wrap::after {
  content: "";
  position: absolute;
  inset: 8% -5% -4% 5%;
  border: 3px solid var(--gold);
  border-radius: 18px;
  z-index: -1;
  transform: rotate(4deg);
}

.rat {
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 7px solid var(--cream);
  box-shadow: 13px 13px 0 var(--red);
}

.eyebrow {
  font-family: "Space Mono", monospace;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

h1 {
  margin: 10px 0 5px;
  font-size: clamp(52px, 8vw, 92px);
  line-height: .85;
  letter-spacing: -4px;
}

h1 span {
  display: block;
  color: var(--green);
  text-shadow: 3px 3px 0 var(--cream);
}

.tagline {
  font-family: "Space Mono", monospace;
  color: #ff7167;
  font-weight: 700;
  line-height: 1.5;
}

.intro {
  max-width: 570px;
  color: #d8e1d9;
  font-size: 18px;
  line-height: 1.65;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.btn {
  display: inline-block;
  padding: 13px 18px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--cream);
  font-weight: 700;
  border: 2px solid var(--cream);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--gold);
}

.primary { background: var(--green); }
.secondary { background: var(--red); }

.card {
  padding: 23px;
  border: 2px solid rgba(255,247,223,.55);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  box-shadow: 7px 7px 0 rgba(22,132,71,.5);
}

.card-title {
  color: var(--gold);
  font-family: "Space Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.card p {
  margin: 8px 0;
  line-height: 1.6;
}

.small {
  color: #bfcac1;
  font-size: 14px;
}

.divider {
  height: 2px;
  margin: 18px 0;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}

.promise {
  color: #fff;
  font-style: italic;
}

.footer {
  margin-top: 30px;
  color: #758078;
  font-family: "Space Mono", monospace;
  font-size: 11px;
}

@media (max-width: 760px) {
  .wrap { padding: 30px 0 45px; }
  .hero { grid-template-columns: 1fr; gap: 35px; }
  .art-wrap { width: min(82vw, 360px); margin: 0 auto; }
  h1 { font-size: clamp(54px, 17vw, 78px); }
}