/* FOOTER */
footer {
  background:var(--bg);
  color:var(--ink);
  padding:64px 0 28px;
  border-top:1.5px solid var(--ink);
}
.footer-inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
}
.footer-mega {
  font-family:var(--font-display);
  font-size:clamp(36px, 11vw, 180px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-2px;
  color:var(--ink);
  margin-bottom:48px;
  text-align:center;
  text-transform:uppercase;
  position:relative;
  isolation:isolate;
  padding:0.2em 0 0.3em;
}

/* "PLAY" word as a chunky LEGO brick */
.footer-play {
  font-style:normal;
  display:inline-block;
  position:relative;
  color:var(--white);
  background:var(--orange);
  border:3px solid var(--ink);
  border-radius:0.16em;
  padding:0.04em 0.22em 0.08em;
  box-shadow: 0 0.1em 0 var(--ink);
  transform:rotate(-2deg);
  margin: 0 0.04em;
  line-height:.95;
  vertical-align:baseline;
}
.footer-play-studs {
  position:absolute;
  top:-0.32em;
  left:0; right:0;
  display:flex;
  justify-content:space-around;
  padding:0 0.18em;
  pointer-events:none;
}
.footer-play-studs .stud {
  width:0.34em;
  height:0.34em;
  border-width:2px;
}

/* Decorative floating bricks around the mega text */
.footer-brick {
  position:absolute;
  border:2px solid var(--ink);
  border-radius:0.06em;
  z-index:-1;
  display:block;
}
.footer-brick::before,
.footer-brick::after {
  content:'';
  position:absolute;
  width:32%;
  aspect-ratio:1;
  background:inherit;
  border:2px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
  top:-22%;
}
.footer-brick::before { left:14% }
.footer-brick::after  { right:14% }

.footer-brick-1 {
  width:1.05em; height:.6em;
  background:var(--yellow);
  top:10%; left:8%;
  transform:rotate(-10deg);
  box-shadow: 0 .06em 0 var(--ink);
  animation:footerFloat1 7s ease-in-out infinite;
}
.footer-brick-2 {
  width:.85em; height:.5em;
  background:var(--red);
  top:52%; left:3%;
  transform:rotate(12deg);
  box-shadow: 0 .05em 0 var(--ink);
  animation:footerFloat2 9s ease-in-out infinite;
}
.footer-brick-3 {
  width:1.2em; height:.62em;
  background:var(--blue);
  top:14%; right:6%;
  transform:rotate(8deg);
  box-shadow: 0 .06em 0 var(--ink);
  animation:footerFloat3 8s ease-in-out infinite;
}
.footer-brick-4 {
  width:.7em; height:.42em;
  background:var(--green);
  bottom:10%; right:14%;
  transform:rotate(-18deg);
  box-shadow: 0 .04em 0 var(--ink);
  animation:footerFloat1 10s ease-in-out infinite reverse;
}
.footer-brick-5 {
  width:.6em; height:.36em;
  background:var(--orange);
  bottom:14%; left:18%;
  transform:rotate(22deg);
  box-shadow: 0 .04em 0 var(--ink);
  animation:footerFloat2 11s ease-in-out infinite;
}

@keyframes footerFloat1 {
  0%,100% { transform:rotate(-10deg) translateY(0) }
  50%     { transform:rotate(-6deg)  translateY(-.08em) }
}
@keyframes footerFloat2 {
  0%,100% { transform:rotate(12deg)  translateY(0) }
  50%     { transform:rotate(16deg)  translateY(-.06em) }
}
@keyframes footerFloat3 {
  0%,100% { transform:rotate(8deg)   translateY(0) }
  50%     { transform:rotate(4deg)   translateY(-.07em) }
}
@media (prefers-reduced-motion: reduce) {
  .footer-brick { animation:none !important }
}

/* Mobile — move floating bricks outside the text so they don't overlap */
@media (max-width:768px) {
  .footer-brick-1 { top:-6%;  left:6%   }
  .footer-brick-2 { top:auto; bottom:-2%; left:6%; width:.7em; height:.42em }
  .footer-brick-3 { top:-6%;  right:6%  }
  .footer-brick-4 { bottom:-4%; right:6%; width:.6em; height:.36em }
  .footer-brick-5 { display:none }
}
@media (max-width:480px) {
  .footer-brick-2, .footer-brick-4 { display:none }
}

.footer-top {
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
  padding-bottom:40px;
  border-bottom:1.5px solid var(--ink);
}
.footer-brand img {
  height:42px;
  margin-bottom:16px;
}
.footer-brand p {
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--gray-1);
  line-height:1.55;
  max-width:320px;
}
.footer-brand-founder {
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  color:var(--gray-2) !important;
  margin-top:10px;
  letter-spacing:0.3px;
}
.footer-col h5 {
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:16px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.footer-col h5::before {
  content:'';
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px }
.footer-col a {
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--ink-soft);
  font-weight:500;
  transition:color .15s, padding-left .25s;
  display:inline-block;
  position:relative;
}
.footer-col a:hover {
  color:var(--orange-d);
  padding-left:12px;
}
.footer-col a::before {
  content:'→';
  position:absolute;
  left:0;
  opacity:0;
  transition:opacity .25s;
  color:var(--orange);
  font-weight:700;
}
.footer-col a:hover::before { opacity:1 }

.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:20px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--gray-1);
  line-height:1.6;
  letter-spacing:0.4px;
  text-transform:uppercase;
  font-weight:500;
}
.legal {
  max-width:600px;
  text-transform:none;
  letter-spacing:0.2px;
}