/* ==========================================================================
   13 Footer — hairline grid, Resend-style sunken wordmark with a cursor light, lit floor
   ========================================================================== */
#footer { overflow: clip; --ft-lbl: var(--text-3); /* ~5:1 on --bg, AA for 11-12px mono labels */ }
#footer .ft-body { padding-top: clamp(56px, 6vw, 96px); }
#footer h3.mono { font-weight: 400; color: var(--ft-lbl); margin-bottom: 20px; }

#footer .ft-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ---------- newsletter ---------- */
#footer .ft-news { display: grid; align-content: start; justify-items: start; gap: 16px; padding-block: clamp(28px, 3vw, 44px); }
#footer .ft-news .h3 { font-size: clamp(26px, 2.4vw, 34px); margin-top: 6px; }
#footer .ft-news-p { max-width: 380px; font-size: 14.5px; }
#footer .ft-form {
  display: flex; align-items: center; gap: 6px; width: min(420px, 100%); height: 48px; margin-top: 8px; padding: 0 8px 0 14px;
  border-radius: var(--r); background: #0a0a0a; box-shadow: 0 0 0 1px #2e2e2e;
  transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
}
#footer .ft-form:hover { box-shadow: 0 0 0 1px #454545; }
#footer .ft-form:focus-within { box-shadow: 0 0 0 1px #8f8f8f, 0 0 0 4px rgba(255,255,255,.12); }
#footer .ft-form .btn { flex: none; }
#footer .ft-form input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 14px; }
#footer .ft-form input::placeholder { color: var(--text-3); }
#footer .ft-form-msg { font-size: 12px; color: var(--ft-lbl); min-height: 18px; }
#footer .ft-news.is-error .ft-form { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
#footer .ft-news.is-error .ft-form-msg { color: var(--accent-light); }
#footer .ft-news.is-done .ft-form-msg { color: #7cf0b5; }

/* ---------- links ---------- */
#footer .ft-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: clamp(28px, 3vw, 44px); }
#footer .ft-col ul, #footer .ft-contact ul { display: grid; gap: 11px; }
#footer .ft-col a, #footer .ft-contact a, #footer .ft-contact span {
  font-size: 14.5px; color: var(--text-2); letter-spacing: -0.01em; transition: color .25s;
  display: inline-flex; align-items: center; gap: 8px;
}
#footer .ft-col a:hover, #footer .ft-contact a:hover { color: var(--text); }
#footer .ft-col a::before {
  content: ""; width: 0; height: 1px; background: var(--text); transition: width .4s var(--ease-out), margin .4s var(--ease-out); margin-right: -8px;
}
#footer .ft-col a:hover::before { width: 10px; margin-right: 0; }
#footer .ft-badge {
  font-family: var(--font-mono); font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: var(--r-xs);
  background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- contact + social ---------- */
#footer .ft-contact { padding-block: clamp(24px, 2.6vw, 36px); }
#footer .ft-social { padding-block: clamp(24px, 2.6vw, 36px); }
#footer .ft-social ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 4px; }
#footer .ft-social a {
  display: flex; align-items: center; gap: 12px; height: 38px; font-size: 14.5px; color: var(--text-2); transition: color .25s;
}
#footer .ft-social a > svg:first-child { width: 15px; height: 15px; flex: none; color: var(--text); }
#footer .ft-dash { flex: 1; height: 1px; min-width: 16px; background: var(--line); position: relative; overflow: hidden; }
#footer .ft-dash::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--line-3), var(--text));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
#footer .ft-handle { font-family: var(--font-mono); font-size: 11px; color: var(--ft-lbl); letter-spacing: .02em; }
#footer .ft-arr { width: 14px; height: 14px; flex: none; color: var(--text-3); transition: transform .4s var(--ease-out), color .25s; }
#footer .ft-social a:hover { color: var(--text); }
#footer .ft-social a:hover .ft-dash::after { transform: scaleX(1); }
#footer .ft-social a:hover .ft-arr { color: var(--text); transform: translate(2px, -2px); }

/* ---------- giant wordmark (Resend) ----------
   One SVG: logo mark + "redloop" as Geist Medium outlines (viewBox 0 -731 3968 891, baseline y=0).
   At rest it is a 5% white fill; the floor below overlaps it so only the top --wm-show of it clears the hairline,
   which cuts straight through the logo's red dot. footer.js moves a radial light (an SVG mask) with the pointer:
   inside it the letter outlines glow white and the dot glows red. */
#footer {
  --wm-w: calc(var(--shell) - var(--pad) * 2);
  --wm-h: calc(var(--wm-w) * 891 / 3968);
  --wm-show: .632;                         /* cut at y = -168 of 891: just above the e terminals, through the top of the dot */
}
#footer .ft-brand { position: relative; z-index: 0; padding-top: clamp(44px, 5.5vw, 88px); }
#footer .ft-wm { position: relative; width: var(--wm-w); height: var(--wm-h); margin-inline: auto; user-select: none; -webkit-user-select: none; }
#footer .ft-wm-svg { display: block; width: 100%; height: 100%; overflow: visible; --wm-u: 3.3; /* viewBox units per CSS px (footer.js keeps it current) */ }
#footer .ft-wm-fill { fill: rgba(255, 255, 255, .05); }
#footer .ft-wm-dot { fill: rgba(236, 63, 42, .36); }       /* the single red signal, rising at the horizon */
#footer .ft-wm-lit { opacity: 0; transition: opacity .5s ease; }
#footer .ft-wm.is-lit .ft-wm-lit { opacity: 1; }
#footer .ft-wm-haze { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: calc(var(--wm-u) * 6px); }
#footer .ft-wm-lift { fill: rgba(255, 255, 255, .035); }
#footer .ft-wm-edge { fill: none; stroke: #fff; stroke-width: calc(var(--wm-u) * 1px); stroke-linejoin: round; }
#footer .ft-wm-dlift { fill: rgba(236, 63, 42, .5); }
#footer .ft-wm-dedge { fill: none; stroke: #ff6a52; stroke-width: calc(var(--wm-u) * 1.2px); }

/* ---------- floor: the panel whose top hairline cuts the wordmark ---------- */
#footer .ft-floor {
  position: relative; z-index: 1; background: var(--bg);
  margin-top: calc(var(--wm-h) * (var(--wm-show) - 1));
}
#footer .ft-floor > i { position: absolute; top: 0; pointer-events: none; }
#footer .ft-rule { left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .11); }
#footer .ft-hl {
  left: 30%; width: 40%; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(160, 160, 160, .7) 50%, transparent);
}
/* the line looks lit from above: a half-ellipse of light spilling down from it */
#footer .ft-glow {
  left: 15%; width: 70%; top: 1px; height: clamp(110px, 21vw, 300px);
  background: radial-gradient(50% 100% at 50% 0%, rgba(200, 200, 200, .085), rgba(200, 200, 200, .03) 45%, transparent 100%);
}
#footer .ft-floor .shell { border-inline: 1px solid var(--line); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(36px, 4.4vw, 64px); }

/* ---------- bottom bar ---------- */
#footer .ft-bottom {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 40px; padding-inline: var(--pad);
  color: var(--ft-lbl);
}
#footer .ft-status { justify-self: center; }
#footer .ft-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(62,224,143,.16); animation: ft-pulse 2s ease-in-out infinite; }
@keyframes ft-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }
#footer .ft-top { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); transition: color .25s; }
#footer .ft-top svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
#footer .ft-top:hover { color: var(--text); }
#footer .ft-top:hover svg { transform: translateY(-3px); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  /* newsletter and links full width; contact sits beside social so neither row is half empty */
  #footer .ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  #footer .ft-news, #footer .ft-links { grid-column: 1 / -1; }
  #footer .ft-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #footer .ft-social ul { column-gap: 24px; }
}
@media (max-width: 767px) {
  #footer .ft-news, #footer .ft-links, #footer .ft-contact, #footer .ft-social { padding: 28px 20px; }
  #footer .ft-grid { grid-template-columns: minmax(0, 1fr); }
  #footer .ft-links { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  #footer .ft-social ul { grid-template-columns: 1fr; }
  #footer .ft-bottom { grid-template-columns: 1fr auto; row-gap: 12px; padding-inline: 20px; }
  #footer .ft-status { grid-column: 1; grid-row: 2; justify-self: start; }
  #footer .ft-top { grid-row: 1 / span 2; grid-column: 2; }
  /* phones keep a scaled wordmark that spans the shell; footer.js sweeps the light across it */
  #footer { --wm-w: calc(var(--shell) - 40px); }   /* edges align with the 20px cell padding above and below */
  #footer .ft-wm-fill { fill: rgba(255, 255, 255, .07); }   /* the small phone wordmark needs a touch more presence */
}
@media (prefers-reduced-motion: reduce) {
  #footer .ft-ok { animation: none; }
}