.footer {
  position: relative;
  margin-top: 4rem;
  padding: 3rem 0 1rem;
  overflow: hidden;
  color: #ccc;
  background: #1a1a2e;
}

.footer .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-brand { margin-bottom: 2rem; }
.footer-logo { display: flex; align-items: center; margin-bottom: 1rem; }
.footer-logo img { width: 40px; height: 40px; margin-right: 15px; object-fit: contain; }
.footer-logo span { color: #fff; font-size: 1.5rem; font-weight: 700; }
.footer-tagline { max-width: 300px; margin-bottom: 2rem; color: #999; font-size: 1rem; line-height: 1.6; }
.social-links { display: flex; gap: 1rem; margin-bottom: 2rem; }
.social-link {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #ccc;
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.social-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
  transform: translateY(-2px);
}
.social-link__glyph { font-size: 14px; font-weight: 750; line-height: 1; }
.footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem; margin-bottom: 3rem; }
.footer-brand-desktop { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.footer-section h3 { margin-bottom: 1.5rem; color: #fff; font-size: 1.1rem; font-weight: 600; }
.footer-section ul,
.footer-mobile-content ul { margin: 0; padding: 0; list-style: none; }
.footer-section li,
.footer-mobile-content li { margin-bottom: .8rem; }
.footer-section a,
.footer-mobile-content a {
  display: flex;
  align-items: center;
  color: #999;
  font-size: .95rem;
  text-decoration: none;
  transition: color .3s ease;
}
.footer-section a:hover,
.footer-mobile-content a:hover { color: #e5e7eb; }
.footer .new-badge {
  margin-left: .45rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  color: #c7d2fe;
  background: rgba(79, 70, 229, .24);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.4;
}
.footer-mobile-section { display: none; padding: 1rem 0; border-bottom: 1px solid #333; }
.footer-mobile-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
}
.footer-mobile-header:hover { color: #e5e7eb; }
.footer-mobile-content { display: none; padding-top: 1rem; }
.footer-mobile-content.active { display: block; }
.footer-chevron { transition: transform .3s ease; }
.footer-chevron.active { transform: rotate(180deg); }
.footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #333; color: #666; font-size: .9rem; }
.footer-bottom-content { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: .75rem; }
.footer-bottom-row { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.footer-links { display: flex; align-items: center; gap: 1rem; text-align: left; }
.footer-links a { color: #999; text-decoration: none; }
.footer-links a:hover { color: #e5e7eb; }
.footer-language { display: flex; align-items: center; gap: .5rem; padding: 0; border: 0; color: #999; background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; }
.footer-language:hover { color: #ccc; }
.footer-copyright { width: 100%; text-align: left; }
.footer-wordmark {
  position: absolute;
  bottom: -20px;
  left: 50%;
  color: transparent;
  font-family: Inter, sans-serif;
  font-size: 18rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
  white-space: nowrap;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .04);
}

@media (min-width: 769px) {
  .footer-brand:not(.footer-brand-desktop) { display: none; }
}

@media (max-width: 768px) {
  .footer .container { padding: 0 1.25rem; }
  .footer-grid { display: none; }
  .footer-mobile-section { display: block; }
  .footer-brand { display: block; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #333; text-align: left; }
  .footer-brand-desktop { display: none !important; }
  .social-links { justify-content: flex-start; }
  .footer-bottom-row { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .footer-language { min-height: 44px; }
  .footer-wordmark { font-size: 10rem; }
}