/* ============================================================
   HERO — Home em duas colunas
   ============================================================ */

.hero {
  position: relative;
  padding-block: 96px 120px;
  /* Contém o brilho ambiente (::before). 'hidden' tem suporte universal
     (o 'clip' falha em navegadores mais antigos). O header sticky fica
     fora do hero, então não é afetado. */
  overflow: hidden;
}

/* Brilho ambiente sutil ao fundo */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(
    circle,
    rgba(109, 40, 168, 0.1),
    rgba(59, 130, 246, 0.06) 45%,
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
}

/* ---- Coluna esquerda ---- */
.hero-content {
  max-width: 620px;
}

.hero-title {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.hero-description {
  margin-top: 24px;
  max-width: 540px;
  color: var(--color-text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

/* ---- Ícones sociais ---- */
.hero-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

.social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  transition: color var(--transition), border-color var(--transition),
    transform var(--transition), background-color var(--transition);
}

.social-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  transform: translateY(-3px);
}

/* ---- Coluna direita: visual ---- */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0; /* impede blowout do item de grid pela largura da imagem */
}

/* A caixa da imagem define o tamanho pelo aspect-ratio; a <img> é
   posicionada de forma absoluta preenchendo-a. Como a imagem sai do fluxo,
   o tamanho natural dela NUNCA alarga o container (corrige o vazamento no
   mobile/Safari). A figure não recorta (sem overflow), então os chips podem
   ultrapassar a borda normalmente. */
.hero-image {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  aspect-ratio: 4 / 5;
}

.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* ---- Chips flutuantes com o stack principal ---- */
.floating-chip {
  position: absolute;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
  animation: float 5s ease-in-out infinite;
}

/* Cada chip fica num quadrante, sobrepondo levemente a borda da moldura. */
.chip-1 {
  top: 9%;
  left: -7%;
  color: var(--color-primary);
  animation-delay: 0s;
}

.chip-2 {
  top: 34%;
  right: -8%;
  color: var(--color-secondary);
  animation-delay: 1s;
}

.chip-3 {
  bottom: 20%;
  left: -5%;
  animation-delay: 2s;
}

.chip-4 {
  bottom: 7%;
  right: -6%;
  color: var(--color-primary);
  animation-delay: 3s;
}