/* ─────────────────────────────────────────────────────────────
   17-header.css
   Hero brand lockup — icon mark + "ConvertizeAI" wordmark
   integrated naturally into the hero content flow.
   No navbar. No fixed positioning. Just the brand as the
   first thing a visitor sees before the headline.
───────────────────────────────────────────────────────────── */

/* ── Outer lockup row ── */
.hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}

/* ── Icon mark wrapper ── */
.hero__brand-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Icon mark image — lime green via CSS filter ── */
.hero__brand-icon {
  display: block;
  width: 42px;
  height: 42px;
  filter: invert(1) hue-rotate(-110deg) saturate(6) brightness(1.25);
  mix-blend-mode: screen;
}

/* ── Thin vertical divider between icon and name ── */
.hero__brand-divider {
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Wordmark: "Convertize" white · "AI" lime ── */
.hero__brand-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #ffffff;
  line-height: 1;
}

.hero__brand-name em {
  font-style: normal;
  color: #C8F04A;
}


/* ── Mobile ── */
@media (max-width: 768px) {
  .hero__brand-name {
    font-size: 17px;
  }

  .hero__brand-icon {
    width: 34px;
    height: 34px;
  }

}