.hero { background: var(--color-black); color: var(--color-white); padding: var(--space-xl) 0; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.hero__visual { aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .hero__grid { grid-template-columns: 1fr; }
}
.hero__claim { margin-bottom: var(--space-xs); }
.hero__lead { color: var(--color-gray-300); margin-bottom: var(--space-md); }
.hero__text { max-width: 40ch; margin-bottom: var(--space-md); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); }
.card { border: 1px solid var(--color-gray-300); padding: var(--space-md); }
.card__visual { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; margin-bottom: var(--space-sm); }
.card h3 { margin-bottom: var(--space-xs); }

.company-teaser__inner { max-width: 60ch; }
.company-teaser .button { margin-top: var(--space-sm); }

.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.brand-tile { border: 1px solid var(--color-gray-300); padding: var(--space-md); transition: border-color 0.15s ease; }
.brand-tile:hover { border-color: var(--color-red); }
.brand-tile__claim { color: var(--color-red); font-weight: 700; margin-bottom: var(--space-xs); }
.brand-tile__link { display: inline-block; margin-top: var(--space-sm); font-weight: 600; }

.ai-teaser { text-align: center; }
.ai-teaser__inner { max-width: 60ch; margin: 0 auto; }

.contact-closer { text-align: center; }