.site-footer {
  display: block;
  padding: 0 max(28px, calc((100vw - 1180px) / 2 + 28px));
  color: #fff;
  background:
    radial-gradient(circle at 10% 10%, rgba(229, 9, 11, 0.08), transparent 28%),
    linear-gradient(135deg, #071526 0%, #06101d 100%);
}

.footer-main {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr 1.1fr;
  gap: 72px;
  padding: 64px 0 50px;
}

.footer-main section {
  min-width: 0;
}

.footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  color: #fff;
}

.footer-brand img {
  width: 72px;
  height: 98px;
  object-fit: contain;
  object-position: top;
}

.footer-brand span {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.5px;
}

.footer-accent {
  display: block;
  width: 48px;
  height: 2px;
  margin: 18px 0;
  background: var(--red);
}

.footer-branding > strong,
.footer-company > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.site-footer p,
.footer-company > span:not(.footer-accent),
.footer-company address {
  margin: 0;
  color: #b8c0ca;
  font-size: 13px;
  line-height: 1.7;
}

.site-footer h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.footer-company address {
  margin-top: 20px;
  padding-left: 26px;
  position: relative;
  font-style: normal;
}

.footer-company address::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--red);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.footer-contact {
  display: block;
}

.footer-whatsapp-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-contact a {
  position: relative;
  display: block;
  padding: 12px 4px 12px 42px;
  overflow-wrap: anywhere;
  color: #cbd1d8;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    color 0.2s,
    padding-left 0.2s;
}

.footer-contact a:hover {
  padding-left: 46px;
  color: #fff;
}

.footer-contact a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 24px;
  height: 24px;
  background-color: var(--red);
  transform: translateY(-50%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.footer-whatsapp::before,
.footer-whatsapp-cta::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.8 9.8 0 0 0-8.5 14.7L2 22l5.5-1.4A10 10 0 1 0 12 2Zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.7.7.7-2.6-.3-.4A8 8 0 0 1 12 4Zm-3 3.5c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.6 4 3.5 2 .8 2.5.7 3 .6.4-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.1-.3-.2-.6-.4l-1.5-.7c-.2-.1-.4-.2-.6.2-.2.3-.6.8-.8 1-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2-1.3a7.8 7.8 0 0 1-1.4-1.7c-.1-.3 0-.4.1-.5l.4-.5.2-.4c.1-.2 0-.4 0-.5L9.6 8c-.1-.4-.3-.5-.6-.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a9.8 9.8 0 0 0-8.5 14.7L2 22l5.5-1.4A10 10 0 1 0 12 2Zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.7.7.7-2.6-.3-.4A8 8 0 0 1 12 4Zm-3 3.5c-.2 0-.5.1-.7.4-.2.3-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.6 4 3.5 2 .8 2.5.7 3 .6.4-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.1-.3-.2-.6-.4l-1.5-.7c-.2-.1-.4-.2-.6.2-.2.3-.6.8-.8 1-.1.2-.3.2-.6.1-.3-.1-1.1-.4-2-1.3a7.8 7.8 0 0 1-1.4-1.7c-.1-.3 0-.4.1-.5l.4-.5.2-.4c.1-.2 0-.4 0-.5L9.6 8c-.1-.4-.3-.5-.6-.5Z'/%3E%3C/svg%3E");
}

.footer-whatsapp-row .footer-whatsapp {
  padding-left: 38px;
  padding-right: 6px;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 0;
}

.footer-whatsapp-row .footer-whatsapp + .footer-whatsapp {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-contact .footer-whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 14px 0;
  padding: 12px 18px 12px 50px;
  overflow-wrap: normal;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: #25d366;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.18);
}

.footer-contact .footer-whatsapp-cta:hover {
  padding-left: 50px;
  color: #fff;
  background: #1eae54;
}

.footer-contact .footer-whatsapp-cta::before {
  left: 18px;
  background-color: #fff;
}

.footer-instagram::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black'/%3E%3C/svg%3E");
}

.footer-email::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.4l9 6 9-6V7H3Zm18 10V9.8l-8.4 5.6a1 1 0 0 1-1.2 0L3 9.8V17h18Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.4l9 6 9-6V7H3Zm18 10V9.8l-8.4 5.6a1 1 0 0 1-1.2 0L3 9.8V17h18Z'/%3E%3C/svg%3E");
}

.footer-bottom {
  padding: 24px 0 28px;
  color: #aeb7c1;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 48px;
  }

  .footer-contact {
    grid-column: 2;
  }
}

@media (max-width: 680px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 48px;
  }

  .footer-contact {
    grid-column: auto;
  }

  .footer-branding,
  .footer-company,
  .footer-contact {
    margin: 0;
  }
}