/* ==========================================================================
   Footer – CredSync (Fluid 360 → 1920)
   ========================================================================== */

:root {
  --footer-bg: var(--Greys-0, #19191c);
  --footer-text: var(--Greys-1000, #ffffff);
  --footer-muted: var(--Greys-80, #d8d8e2);
  --footer-accent: var(--Brand-Primary, #fad3a6);
  --footer-border: var(--Greys-20, #28282C);
}

/* ============================= */
/* Footer Section */
/* ============================= */

.cs-footer {
  background-color: transparent;

  padding:
    clamp(40px, calc(3.846vw + 26.15px), 100px)
    0
    clamp(12px, calc(0.513vw + 10.15px), 20px);

  width: 100%;
  font-family: 'Satoshi', sans-serif;
}

.cs-footer__container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ============================= */
/* Brand */
/* ============================= */

.cs-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cs-footer__logo img {
  width: clamp(145px, calc(7.051vw + 119.62px), 255px);
  height: auto;
}

/* ============================= */
/* Headline */
/* ============================= */

.cs-footer__headline {
  margin: 0;
  font-size: clamp(18px, calc(0.385vw + 16.62px), 24px);
  color: var(--footer-text);
  margin-top: clamp(30px, calc(1.282vw + 25.38px), 50px);

}

.cs-footer__subhead {
  margin-top: 16px; /* FIXO */
  font-size: clamp(14px, calc(0.256vw + 13.08px), 18px);
  color: #fff;
}

/* ============================= */
/* CTA Buttons */
/* ============================= */

.cs-footer__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: clamp(12px, calc(0.769vw + 9.23px), 24px);

  margin-top: clamp(30px, calc(1.282vw + 25.38px), 50px);

  list-style: none;
  padding: 0;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;
  padding: 0 20px;

  height: clamp(44px, calc(0.513vw + 42.16px), 52px);

  border-radius: 10px;
  text-decoration: none;

  font-size: clamp(14px, calc(0.256vw + 13.08px), 18px);

  width: fit-content;

  transition: all 0.3s ease;
  cursor: pointer;
}

.cs-btn--primary {
  background-color: var(--footer-accent);
  color: var(--Greys-0, #19191c);
  border: 1px solid var(--footer-accent);
}

.cs-btn--primary:hover {
  background-color: #e8b76a;
  border-color: #e8b76a;
  transform: translateY(-2px);
}

.cs-btn--outline {
  background-color: transparent;
  color: var(--footer-text);
  border: 1px solid var(--footer-accent);
}

.cs-btn--outline:hover {
  background-color: rgba(250, 211, 166, 0.1);
  transform: translateY(-2px);
}

/* ============================= */
/* Divider */
/* ============================= */

.cs-footer__divider {
  border: 0;
  height: 1px;

  margin-top: clamp(40px, calc(2.564vw + 30.77px), 80px);
  margin-bottom: clamp(12px, calc(0.769vw + 9.23px), 20px);

  background-color: var(--footer-border);
  width: 100%;
}

/* ============================= */
/* Bottom */
/* ============================= */

.cs-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* ============================= */
/* Social Icons */
/* ============================= */

.cs-footer__social-list {
  display: flex;

  gap: clamp(8px, calc(1.026vw + 4.31px), 24px);

  list-style: none;
  padding: 0;
  margin: 0;
}

.cs-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: clamp(24px, calc(0.513vw + 22.15px), 32px);
  height: clamp(24px, calc(0.513vw + 22.15px), 32px);

  transition: all 0.3s ease;
}

.cs-social:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* ============================= */
/* Copyright */
/* ============================= */

.cs-footer__copyright {
  margin: 0;
  color: var(--footer-muted);
  font-size: clamp(12px, calc(0.256vw + 11.08px), 14px);
  text-align: right;
}

/* ============================= */
/* Mobile Refinement */
/* ============================= */

@media (max-width: 768px) {
  .cs-footer__bottom {
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .cs-footer__copyright {
    text-align: center;
  }

  .cs-footer__cta {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 362px) {
  .cs-footer__bottom {
    align-items: center;
    text-align: center;
    flex-direction: column;
  }

}