.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-dark);
}

.hero__video {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 65%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

@media (max-width: 767px) {
  .hero__video {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg-dark) 30%, rgba(26,26,26,0.5) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(26,26,26,0.4) 0%, transparent 40%, rgba(26,26,26,0.6) 100%);
}

@media (max-width: 767px) {
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(26,26,26,0.72) 0%,
      rgba(26,26,26,0.45) 20%,
      rgba(26,26,26,0.12) 45%,
      rgba(26,26,26,0.12) 55%,
      rgba(26,26,26,0.75) 75%,
      rgba(26,26,26,0.92) 100%
    );
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--nav-height) + var(--space-8)) var(--space-8) var(--space-16);
}

@media (max-width: 1023px) {
  .hero__content {
    padding: calc(var(--nav-height) + var(--space-6)) var(--space-4) var(--space-12);
  }
}

.hero__tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: var(--space-4);
  display: block;
  /* sem opacity: 0 aqui. O GSAP define o estado inicial em runtime via from().
     Escondendo no CSS, o texto some de vez se o JS falhar, o CDN cair ou o
     usuario tiver movimento reduzido. */
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, var(--text-5xl));
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  max-width: 780px;
}

.hero__title .line-wrapper {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero__title em {
  /* enfase por cor, nao por italico: italico em heading e um tell de IA,
     e o deck da marca traz "personalizada" em romano */
  font-style: normal;
  color: var(--accent-gold);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--text-light);
  opacity: 0.8;
  margin-bottom: var(--space-8);
  letter-spacing: 0.04em;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__badge {
  position: absolute;
  top: calc(var(--nav-height) + var(--space-4));
  left: calc(60% - 56px);
  width: 112px;
  height: 112px;
  object-fit: contain;
  transform: rotate(-8deg);
  z-index: 3;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

@media (max-width: 1023px) {
  .hero__badge {
    top: auto;
    bottom: calc(var(--space-16) + 52px);
    left: auto;
    right: var(--space-4);
    width: 68px;
    height: 68px;
    transform: rotate(0deg);
  }
}

/* ── Scroll indicator ── */
.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-light);
  opacity: 0.5;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: var(--font-body);
}

.hero__scroll-arrow {
  width: 20px;
  height: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
    min-height: 100vh;
    justify-content: flex-start;
  }

  .hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--nav-height) + var(--space-6));
    padding-bottom: var(--space-16);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero__tag {
    display: none;
  }

  .hero__title {
    font-size: clamp(2.2rem, 9vw, 3rem);
    margin-bottom: 0;
  }

  .hero__title em {
    text-shadow: 0 1px 10px rgba(0,0,0,0.75), 0 2px 4px rgba(0,0,0,0.5);
  }

  .hero__subtitle {
    font-size: var(--text-base);
    margin-top: auto;
    margin-bottom: var(--space-3);
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .hero__scroll {
    bottom: var(--space-3);
  }
}