/* ==========================================================================
   Header & Banner – CredSync
   ========================================================================== */

:root {
  --header-bg: transparent;
  --header-text: var(--Greys-1000, #ffffff);
  --banner-bg: #19191c; /* Base bg from SCSS */
  --banner-text: var(--Greys-1000, #ffffff);
  --banner-accent: var(--Brand-Primary, #fad3a6);
}

/* Main Container */
.main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  background-color: var(--banner-bg);
  /* Gradient from SCSS */
  background-image: linear-gradient(123.81deg, #222225 34.05%, #22222500 89.87%),
    linear-gradient(#19191cb2, #19191cb2);
  position: relative;
  overflow: hidden;
}

/* Header */
.cs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Use fixed values for smoother transition compatibility, handling responsiveness via media queries if needed */
  padding-top: 32px;
  padding-bottom: 32px;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  /* Transition all relevant properties smoothly */
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s ease;
}

.cs-header.scrolled {
  background-color: rgba(25, 25, 28, 0.9); /* Slightly more opaque for better contrast */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 1024px) {
  .cs-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.cs-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cs-header__logo-img {
  width: clamp(118px, calc(8.782vw + 86.39px), 255px);
  height: auto;
  display: block;
}

.cs-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
  max-width: clamp(400px, calc(60.5vw - 64.64px), 1097px);
}

@media (max-width: 1024px) {
  .cs-header__nav {
    display: none;
  }

.cs-header .container {
  justify-content: center;
}

}

.cs-header__link {
  color: var(--header-text);
  text-decoration: none;
  font-family: 'Satoshi', sans-serif;
  line-height: 28px;
  font-weight: 400; /* Regular per SCSS (no weight specified defaults to regular) */
  transition: color 0.3s ease;
  white-space: nowrap;
}

.cs-header__link:hover {
  color: var(--banner-accent);
}

.cs-header__mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--header-text);
  font-size: 24px;
  cursor: pointer;
}

/* Banner */
.cs-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 0; /* Layout handled by flex justify-between */
  /* Background image replaced by video */
  background-color: var(--banner-bg);
  position: relative;
  height: 100vh;
  /* overflow: hidden; Removed to allow image overlap */
    padding: clamp(20px, calc(3.846vw + 6.15px), 80px) 0;

  padding-top: calc(
    clamp(20px, calc(3.846vw + 6.15px), 80px) +
    clamp(26px, calc(1.923vw + 19.08px), 56px)
  );
}

.cs-banner__video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  overflow: hidden;
}

.cs-banner .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.cs-banner__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 50px; /* From SCSS .coluna1 row-gap */
  max-width: fit-content; /* From SCSS .mainHeading width approx */
  z-index: 5;
}

.cs-banner__text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px; /* From SCSS .textos row-gap */
  width: 100%;
}

.cs-banner__headline {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(28px, calc(2.308vw + 19.69px), 64px);
  font-weight: 700;
  line-height: clamp(31.5px, calc(2.596vw + 22.15px), 72px);
  letter-spacing: -0.01em;
  color: var(--banner-text);
  margin: 0;
  width: 100%;
  max-width: 804px;
}

.cs-banner__subhead {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(14px, calc(0.385vw + 12.62px), 20px);
line-height: clamp(19.6px, calc(0.539vw + 17.66px), 28px);
  color: #ffffff;
  margin: 0;
}

.cs-banner__chips {
  display: flex;
  gap: 40px; /* From SCSS .chipsContainer column-gap */
}

.stagger-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.cs-banner__actions {
  display: flex;
  gap: 20px; /* From SCSS .buttonsContainer column-gap */
  align-items: flex-start;
  flex-wrap: wrap;
}

.cs-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 12px clamp(17px, calc(0.833vw + 14px), 30px);
  max-height: 52px;
}

@media screen and (max-width: 1024px) {
.cs-banner__btn {
  max-height: 44px;
}

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

.cs-banner__text-group {
  align-items: center;
}

.cs-banner__actions {
  margin: 0 auto;
}
}

.cs-banner__btn--primary {
  background-color: var(--banner-accent);
  color: #19191c;
  border: 1px solid var(--banner-accent);
  box-shadow: 0 4px 16px rgba(250, 211, 166, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: btn-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes btn-glow-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(250, 211, 166, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow: 0 4px 28px rgba(250, 211, 166, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
  }
}

.cs-banner__btn--primary:hover {
  background-color: #e8b76a;
  border-color: #e8b76a;
  box-shadow: 0 6px 28px rgba(250, 211, 166, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: none;
}

.cs-banner__btn--primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(250, 211, 166, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  animation: none;
}

.cs-banner__btn--outline {
  background-color: transparent;
  color: var(--banner-accent);
  border: 1px solid var(--banner-accent);
}

.cs-banner__btn--outline:hover {
  background-color: rgba(250, 211, 166, 0.1);
}

.cs-banner__btn-icon {
  width: 18px; /* From SCSS .frame2 */
  height: 18px;
}

.cs-banner__right {
  width:100%;
  width: clamp(260px, calc(29.1vw + 155.24px), 714px);
  height: auto; /* From SCSS .img height */
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.cs-banner__image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure image fits */
  object-position: top right;
}


@media screen and (max-width: 1200px) {
  .cs-banner {
    min-height: 100%;
    padding-top: 10vh;
    height: 100%;
  }

  .cs-banner .container {
    flex-direction: column;
    height: inherit;
    min-height: inherit;
    justify-content: flex-start;
  }

  .cs-banner__left {
    gap: 30px;
  }
}



@media screen and (max-width: 768px) {

  .cs-banner br {
    display: none;
  }


  .cs-banner__actions {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .cs-banner__chips {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
  }
}


@media screen and (max-width: 640px) {
  .cs-banner__right {
    max-width: 100%;
    width: 100%;
  }


  .cs-banner__btn img {
    display: none;
  }
}