---
id: seed:archetypes/footer
title: Footer section archetypes
source_type: seed_archetype
priority: warm
---

The footer is the visitor's escape hatch — they ended up here because the page didn't immediately convert. Treat it as a navigational safety net, not as a place to dump every link in the org. Five working archetypes:

---

**Multi-column link grid (default).** 3–5 columns: Product, Resources, Company, Legal. Each column has a heading and 3–6 links. Bottom strip with copyright + social icons.

*Animation & Visual Details:*
- *Entrance*: Columns stagger in from bottom with fade (0.05s between), bottom strip follows
- *Hover*: Links get gradient underline on hover (width 0% → 100%); social icons scale and get radial glow
- *Gradients*: Link hover uses gradient underline; social icon buttons have gradient on hover
- *Radial circles*: Small radial glow behind social icons on hover; radial ring behind the footer brand logo
- *Scroll trigger*: IntersectionObserver at 30% threshold (footer is lower priority)
- *JS interaction*: Social icon SVG stroke animation on hover

```html
<footer data-amb-section="site-footer" class="site-footer">
  <div class="container">
    <div class="site-footer-grid">
      <div class="site-footer-brand">
        <a class="site-footer-logo" href="/">
          <svg viewBox="0 0 120 32" fill="none">
            <rect width="32" height="32" rx="8" fill="url(#logo-gradient)"/>
            <defs>
              <linearGradient id="logo-gradient" x1="0" y1="0" x2="32" y2="32">
                <stop offset="0%" stop-color="#6366f1"/>
                <stop offset="100%" stop-color="#7c3aed"/>
              </linearGradient>
            </defs>
          </svg>
          <span>Brand</span>
        </a>
        <p class="site-footer-tagline">{one-line product positioning}</p>
        <div class="site-footer-social">
          <a class="site-footer-icon" href="#" aria-label="Twitter">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
          <a class="site-footer-icon" href="#" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <a class="site-footer-icon" href="#" aria-label="GitHub">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
          </a>
        </div>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Product</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Features</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Pricing</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Changelog</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Roadmap</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Resources</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Documentation</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">API Reference</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Blog</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Community</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Company</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">About</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Careers</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Legal</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Privacy</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Terms</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Security</a></li>
        </ul>
      </div>
    </div>
    <div class="site-footer-bottom">
      <p class="site-footer-copyright">© 2026 Brand. All rights reserved.</p>
      <button class="site-footer-top" aria-label="Back to top">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
      </button>
    </div>
  </div>
</footer>
```

```css
:root {
  --footer-enter-duration: 0.5s;
  --footer-stagger: 0.05s;
}

.site-footer {
  padding: clamp(48px, 6vw, 80px) 0 0;
  background: var(--color-bg-alt, #f8fafc);
  border-top: 1px solid #e2e8f0;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.site-footer-brand {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--footer-enter-duration) ease, transform var(--footer-enter-duration) ease;
}

.site-footer-column {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--footer-enter-duration) ease, transform var(--footer-enter-duration) ease;
}

.site-footer-brand.is-visible { animation: footer-enter var(--footer-enter-duration) ease-out forwards; }
.site-footer-column:nth-child(2).is-visible { animation: footer-enter var(--footer-enter-duration) ease-out forwards; animation-delay: calc(var(--footer-stagger) * 1); }
.site-footer-column:nth-child(3).is-visible { animation: footer-enter var(--footer-enter-duration) ease-out forwards; animation-delay: calc(var(--footer-stagger) * 2); }
.site-footer-column:nth-child(4).is-visible { animation: footer-enter var(--footer-enter-duration) ease-out forwards; animation-delay: calc(var(--footer-stagger) * 3); }
.site-footer-column:nth-child(5).is-visible { animation: footer-enter var(--footer-enter-duration) ease-out forwards; animation-delay: calc(var(--footer-stagger) * 4); }

@keyframes footer-enter {
  to { opacity: 1; transform: translateY(0); }
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  text-decoration: none;
  margin-bottom: 12px;
}

.site-footer-tagline {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 20px;
  line-height: 1.5;
}

.site-footer-social {
  display: flex;
  gap: 12px;
}

.site-footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(99,102,241,0.06);
  color: var(--color-text-muted, #64748b);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  position: relative;
}

.site-footer-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-footer-icon:hover {
  background: rgba(99,102,241,0.12);
  color: var(--color-accent, #6366f1);
  transform: scale(1.1);
}

.site-footer-icon:hover::before {
  opacity: 1;
}

.site-footer-icon svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

.site-footer-heading {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.site-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer-item {
  margin-bottom: 10px;
}

.site-footer-link {
  position: relative;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent, #6366f1), #7c3aed);
  transition: width 0.3s ease;
}

.site-footer-link:hover {
  color: var(--color-accent, #6366f1);
}

.site-footer-link:hover::after {
  width: 100%;
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-top: 1px solid #e2e8f0;
}

.site-footer-copyright {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

.site-footer-top {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-footer-top:hover {
  background: var(--color-bg-alt, #f8fafc);
  border-color: var(--color-accent, #6366f1);
  color: var(--color-accent, #6366f1);
  transform: translateY(-2px);
}

.site-footer-top svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
  }
  .site-footer-brand {
    grid-column: span 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-brand, .site-footer-column {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const footerElements = document.querySelectorAll('.site-footer-brand, .site-footer-column');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });
footerElements.forEach(el => observer.observe(el));

// Scroll to top
document.querySelector('.site-footer-top').addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
```

---

**Minimal footer.** Single row: brand + copyright + 3 links + social. Use for landing pages where the goal is focused conversion and a sprawling footer would dilute it.

*Animation & Visual Details:*
- *Entrance*: Fade in from bottom on scroll-into-view
- *Hover*: Links get underline draw; social icons scale with radial glow
- *Gradients*: Subtle gradient on the separator line
- *Radial circles*: Small radial dot beside the brand name
- *Scroll trigger*: IntersectionObserver at 30% threshold

```html
<footer data-amb-section="site-footer" class="site-footer site-footer--minimal">
  <div class="container">
    <div class="site-footer-minimal">
      <div class="site-footer-minimal-brand">
        <span class="site-footer-minimal-logo">Brand</span>
        <span class="site-footer-minimal-divider">·</span>
        <span class="site-footer-minimal-copy">© 2026</span>
      </div>
      <nav class="site-footer-minimal-links" aria-label="Footer">
        <a class="site-footer-minimal-link" href="#">Privacy</a>
        <a class="site-footer-minimal-link" href="#">Terms</a>
        <a class="site-footer-minimal-link" href="#">Contact</a>
      </nav>
      <div class="site-footer-minimal-social">
        <a class="site-footer-icon" href="#" aria-label="Twitter">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
      </div>
    </div>
  </div>
</footer>
```

```css
.site-footer--minimal {
  padding: 24px 0;
}

.site-footer-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.site-footer--minimal.is-visible .site-footer-minimal {
  opacity: 1;
  transform: translateY(0);
}

.site-footer-minimal-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer-minimal-logo {
  font-weight: 600;
  color: var(--color-text, #1e293b);
}

.site-footer-minimal-divider {
  color: var(--color-text-muted, #64748b);
}

.site-footer-minimal-copy {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

.site-footer-minimal-links {
  display: flex;
  gap: 24px;
}

.site-footer-minimal-link {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-minimal-link:hover {
  color: var(--color-accent, #6366f1);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-minimal {
    opacity: 1;
    transform: none;
  }
}
```

---

**CTA footer.** Footer leads with a final CTA card (headline + button), then the link grid below. Use on long pages where you want one more conversion attempt before they leave.

*Animation & Visual Details:*
- *Entrance*: CTA card enters first with scale animation; link grid follows at 0.2s delay
- *Hover*: CTA button has radial glow on hover; links have gradient underline
- *Gradients*: CTA card has gradient background (dark tones); CTA button has gradient fill
- *Radial circles*: Radial glow behind the CTA button
- *Scroll trigger*: IntersectionObserver at 40% threshold

```html
<footer data-amb-section="site-footer" class="site-footer site-footer--cta">
  <div class="container">
    <div class="site-footer-cta-card">
      <div class="site-footer-cta-glow"></div>
      <h3 class="site-footer-cta-title">Ready to get started?</h3>
      <p class="site-footer-cta-text">Join thousands of teams already using our product.</p>
      <a class="site-footer-cta-button" href="#">Start free trial</a>
    </div>
    <div class="site-footer-grid site-footer-grid--compact">
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Product</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Features</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Company</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">About</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Legal</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Privacy</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="site-footer-bottom">
      <p class="site-footer-copyright">© 2026 Brand</p>
    </div>
  </div>
</footer>
```

```css
.site-footer-cta-card {
  position: relative;
  background: linear-gradient(135deg, #1e1e2e, #2d1b4e);
  border-radius: 20px;
  padding: 48px;
  text-align: center;
  margin-bottom: 48px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-footer--cta.is-visible .site-footer-cta-card {
  opacity: 1;
  transform: translateY(0);
}

.site-footer-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 150px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.site-footer-cta-title {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.site-footer-cta-text {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 28px;
}

.site-footer-cta-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(99,102,241,0.3);
}

.site-footer-cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-footer-cta-button:hover::before {
  opacity: 1;
}

.site-footer-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99,102,241,0.4);
}

.site-footer-grid--compact {
  margin-bottom: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-cta-card {
    opacity: 1;
    transform: none;
  }
}
```

---

**Gradient top border footer.** Animated gradient line separator at the top of the footer. The gradient "draws" across on scroll-into-view.

*Animation & Visual Details:*
- *Entrance*: Gradient line draws from left to right (width 0% → 100%) on scroll-into-view; footer content fades in after
- *Hover*: Not applicable
- *Gradients*: Top border is a gradient line (accent → secondary → tertiary → accent)
- *Radial circles*: None
- *Scroll trigger*: Gradient line animates when footer enters viewport at 10% threshold
- *JS interaction*: CSS width animation triggered by class toggle on viewport entry

```html
<footer data-amb-section="site-footer" class="site-footer site-footer--gradient-border">
  <div class="site-footer-gradient-line"></div>
  <div class="container">
    <div class="site-footer-grid">
      <div class="site-footer-brand">
        <a class="site-footer-logo" href="/">Brand</a>
        <p class="site-footer-tagline">Product positioning tagline.</p>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Product</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Features</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Company</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">About</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="site-footer-column">
        <h4 class="site-footer-heading">Legal</h4>
        <ul class="site-footer-list">
          <li class="site-footer-item"><a class="site-footer-link" href="#">Privacy</a></li>
          <li class="site-footer-item"><a class="site-footer-link" href="#">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="site-footer-bottom">
      <p class="site-footer-copyright">© 2026 Brand</p>
    </div>
  </div>
</footer>
```

```css
.site-footer--gradient-border {
  position: relative;
  padding-top: 0;
}

.site-footer-gradient-line {
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1);
  background-size: 200% 100%;
  width: 0;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.site-footer--gradient-border.is-visible .site-footer-gradient-line {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-gradient-line {
    width: 100%;
    transition: none;
  }
}
```

---

**Animated social icons footer.** Social icons have pulsing radial glow, SVG stroke draw animation on hover.

*Animation & Visual Details:*
- *Entrance*: Social icons stagger in from right with fade
- *Hover*: Icon SVG stroke draws (stroke-dashoffset animation); radial pulse behind icon
- *Gradients*: Icons use gradient fill on hover (accent colors)
- *Radial circles*: Pulsing radial ring behind each social icon at rest
- *Scroll trigger*: IntersectionObserver at 30% threshold
- *JS interaction*: SVG stroke animation triggered on hover

```html
<footer data-amb-section="site-footer" class="site-footer site-footer--social-animated">
  <div class="container">
    <div class="site-footer-content">
      <div class="site-footer-brand">
        <a class="site-footer-logo" href="/">Brand</a>
        <p class="site-footer-tagline">Product tagline.</p>
      </div>
      <div class="site-footer-links-grid">
        <div class="site-footer-column">
          <h4 class="site-footer-heading">Product</h4>
          <ul class="site-footer-list">
            <li class="site-footer-item"><a class="site-footer-link" href="#">Features</a></li>
            <li class="site-footer-item"><a class="site-footer-link" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="site-footer-column">
          <h4 class="site-footer-heading">Company</h4>
          <ul class="site-footer-list">
            <li class="site-footer-item"><a class="site-footer-link" href="#">About</a></li>
            <li class="site-footer-item"><a class="site-footer-link" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
      <div class="site-footer-social-wrapper">
        <p class="site-footer-social-label">Follow us</p>
        <div class="site-footer-social">
          <a class="site-footer-social-link" href="#" aria-label="Twitter">
            <div class="site-footer-social-ring"></div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
            </svg>
          </a>
          <a class="site-footer-social-link" href="#" aria-label="LinkedIn">
            <div class="site-footer-social-ring"></div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
          </a>
          <a class="site-footer-social-link" href="#" aria-label="GitHub">
            <div class="site-footer-social-ring"></div>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="site-footer-bottom">
      <p class="site-footer-copyright">© 2026 Brand</p>
    </div>
  </div>
</footer>
```

```css
.site-footer-content {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.site-footer-social-wrapper {
  text-align: right;
}

.site-footer-social-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.site-footer-social {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.site-footer-social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-footer-social-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
  opacity: 0.5;
  animation: social-ring-pulse 2s ease-in-out infinite;
}

@keyframes social-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.site-footer-social-link svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.4s ease, color 0.2s ease;
}

.site-footer-social-link:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(124,58,237,0.08));
  border-color: var(--color-accent, #6366f1);
  color: var(--color-accent, #6366f1);
}

.site-footer-social-link:hover svg {
  stroke-dashoffset: 0;
}

@media (max-width: 768px) {
  .site-footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer-social-wrapper {
    text-align: left;
  }
  .site-footer-social {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-social-ring {
    animation: none;
  }
  .site-footer-social-link svg {
    stroke-dashoffset: 0;
    transition: none;
  }
}
```

*JS behavior:*
```javascript
const footer = document.querySelector('.site-footer--social-animated');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });
observer.observe(footer);
```

---

Copy rules: don't include "Home" in any footer column — circular. Include real legal links (Terms, Privacy) even on marketing-only pages; absence signals amateur. Social icons should be `aria-label`'d, not just visual.

Layout rules: never use this section if the page has a footer template attached — the template owns it. Footer should be visually quieter than the page body (neutral background, smaller type, lower contrast).

CSS custom property summary:
```css
:root {
  --footer-enter-duration: 0.5s;
  --footer-stagger: 0.05s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```