:root {
  --sky: #1aa4fe;
  --sky-deep: #0b8eef;
  --ink: #16304a;
  --yellow: #ffe14a;
  --cyan: #7eebff;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Nunito, "Avenir Next", sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, #7ed0ff 0%, transparent 55%),
    radial-gradient(800px 480px at 100% 0%, #49b6ff 0%, transparent 50%),
    linear-gradient(180deg, #3cb6ff 0%, var(--sky) 38%, #1496f4 100%);
}
a { color: inherit; }

.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 999px;
  opacity: 0.9;
  filter: blur(0.2px);
}
.cloud:before, .cloud:after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 999px;
}
.c1 { width: 180px; height: 54px; top: 70%; left: 6%; animation: drift 22s ease-in-out infinite; }
.c1:before { width: 70px; height: 70px; top: -36px; left: 28px; }
.c1:after { width: 90px; height: 64px; top: -28px; left: 78px; }
.c2 { width: 220px; height: 60px; top: 58%; right: -40px; animation: drift 26s ease-in-out infinite reverse; }
.c2:before { width: 84px; height: 84px; top: -42px; left: 36px; }
.c2:after { width: 110px; height: 70px; top: -30px; left: 96px; }
.c3 { width: 140px; height: 42px; top: 78%; left: 46%; opacity: 0.55; animation: drift 30s ease-in-out infinite; }
.float {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  letter-spacing: 0.02em;
  color: var(--white);
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  transform: rotate(var(--r));
  animation: bob var(--t) ease-in-out infinite;
}
.float.edge {
  left: auto;
  right: var(--x);
}
.float.y { color: var(--yellow); }
.float.c { color: var(--cyan); }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -22px; }
}
@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 18px -12px; }
}

.nav, main { position: relative; z-index: 2; }
.nav {
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 6vw;
}
.brand {
  font-family: "Lilita One", sans-serif;
  font-size: 1.7rem;
  text-decoration: none;
  color: var(--white);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.01em;
}
.brand span { color: var(--yellow); }
.brand b { color: var(--cyan); font-weight: 400; }
.nav nav { display: flex; gap: 16px; margin-right: auto; }
.nav nav a {
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(22, 48, 74, 0.35);
}
.cta {
  text-decoration: none;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

main { width: min(980px, calc(100% - 8vw)); margin: 0 auto; padding-bottom: 80px; }
.hero { text-align: center; padding-top: 8px; }
.hero img {
  width: min(860px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 0 rgba(11, 90, 160, 0.18));
}
.members {
  margin: 0;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  text-shadow: 0 3px 0 rgba(22, 48, 74, 0.35);
}
.members strong {
  font-family: "Lilita One", sans-serif;
  font-size: clamp(3rem, 8vw, 5.2rem);
  display: block;
  color: var(--cyan);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  line-height: 0.95;
  text-shadow: none;
}

.sheet, .stats article {
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--ink);
}
.sheet { padding: 28px 28px 22px; margin-top: 28px; }
.kicker {
  margin: 0 0 8px;
  font-family: "Lilita One", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-deep);
}
h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.25;
  font-weight: 800;
}
.pays { display: flex; gap: 10px; flex-wrap: wrap; padding: 0; margin: 18px 0 0; list-style: none; }
.pays li {
  font-family: "Lilita One", sans-serif;
  background: var(--sky);
  color: var(--white);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 1.35rem;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.stats article { padding: 18px 10px 16px; text-align: center; }
.stats strong {
  display: block;
  font-family: "Lilita One", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 0.95;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}
.stats article:nth-child(1) strong { color: var(--cyan); }
.stats article:nth-child(2) strong { color: var(--yellow); }
.stats article:nth-child(3) strong { color: #3ec0ff; }
.stats span { display: block; margin-top: 8px; font-weight: 800; }
ol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
ol li {
  background: #e8f6ff;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 4px;
}
ol b { font-family: "Lilita One", sans-serif; font-size: 1.25rem; color: var(--sky-deep); }
ol span { font-weight: 800; }

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; padding: 14px 5vw; }
  .nav nav { order: 3; width: 100%; }
  .float { font-size: 1.35rem; -webkit-text-stroke-width: 4px; }
  .float.edge { right: 10%; }
  .float:nth-child(5) { top: 24%; }
  .float:nth-child(6) { display: none; }
  .float:nth-child(n + 7) { display: none; }
  .stats { gap: 8px; }
  .stats article { padding: 12px 6px; }
  .stats strong { font-size: 1.25rem; -webkit-text-stroke-width: 3px; }
  .stats span { font-size: 0.78rem; }
  ol { grid-template-columns: 1fr; }
  .sheet { padding: 20px; }
}