/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: #000;
  padding: 9rem 1.5rem 0;
  overflow: hidden;
}
.footer__top {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 3rem clamp(3rem, 6vw, 8rem);
  align-items: start;
}

/* brand + short description */
.footer__logo { display: inline-block; font-weight: 900; font-size: 2.2rem; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.footer__about { margin: 2.2rem 0 0; display: grid; gap: 0.7rem; font-size: 1.15rem; line-height: 1.3; color: #8a8a8a; }

/* link columns */
.footer__col h4 { margin: 0 0 2rem; font-size: 1.05rem; font-weight: 500; color: #fff; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.footer__col a { font-size: 1.1rem; color: #8a8a8a; transition: color 0.2s ease; }
.footer__col a:hover { color: #fff; }

/* the giant dashed word */
.footer__word { position: relative; max-width: 130rem; margin: 6rem auto 0; }
.footer__word svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer__word text {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 300px;
  letter-spacing: -0.03em;
  fill: #0a0a0a;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
}
.footer__copy {
  position: absolute; left: 0; bottom: 1.6rem;
  margin: 0;
  font-size: 1.05rem;
  color: #8a8a8a;
}


@media (max-width: 820px) {
  .footer { padding-top: 5rem; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__logo { font-size: 1.9rem; }
  .footer__about { margin-top: 1.4rem; font-size: 1.05rem; }
  .footer__col h4 { margin-bottom: 1.2rem; }
  .footer__word { margin-top: 3rem; }
  .footer__copy { position: static; padding: 1.4rem 0 1.6rem; font-size: 0.9rem; }
}

/* the word is now a fixed vector outline (overlapping pieces already merged), so the dashed line only follows the true edges */
.footer__word path {
  fill: #0a0a0a;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5;
  stroke-dasharray: 7 6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---- moving outline + soft blur at the bottom ---- */
.footer__word path {
  stroke-dasharray: 10 8;
  animation: outline-march 1.6s linear infinite;      /* the dashes travel around every letter */
}
@keyframes outline-march { to { stroke-dashoffset: -18; } }   /* one full dash + gap per cycle, so it loops seamlessly */

.footer__word::after {                                 /* a little blur, stronger towards the bottom edge */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 80%);
}
.footer__copy { z-index: 2; }                          /* copyright stays sharp above the blur */
@media (prefers-reduced-motion: reduce) { .footer__word path { animation: none; } }
@media (max-width: 820px) { .footer__word::after { height: 45%; } }

/* email line under the description */
.footer__about a { color: #8a8a8a; transition: color 0.2s ease; }
.footer__about a:hover { color: #fff; }

/* email: white and bold */
.footer__about a { color: #fff; font-weight: 700; }
.footer__about a:hover { color: #d6d6d6; }
.footer__about a { font-size: 1.4rem; margin-top: 0.3rem; }   /* a little larger than the lines above */
@media (max-width: 820px) { .footer__about a { font-size: 1.2rem; } }