.op-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
}

/* Variant degradat (sense foto) */
.op-hero--gradient {
  background: linear-gradient(135deg, #0d6e6a 0%, var(--op-brand) 60%, #43c6be 100%);
}
.op-hero--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 20%, rgba(255, 255, 255, .16), transparent 55%);
}

/* Variant foto: overlay fosc 35% per llegibilitat del text blanc */
.op-hero--photo {
  background-image: linear-gradient(rgba(15, 25, 30, .35), rgba(15, 25, 30, .35)), var(--op-hero-img);
  background-size: cover;
  background-position: center;
}

/* Cercles de lent — motiu de les formes circulars del logo */
.op-hero__lens {
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .22);
}
.op-hero__lens--a { width: 420px; height: 420px; right: -90px; top: -120px; }
.op-hero__lens--b { width: 300px; height: 300px; right: 210px; top: 120px; border-color: rgba(255, 255, 255, .14); }
.op-hero__lens--c { width: 180px; height: 180px; left: -60px; bottom: -70px; border-color: rgba(255, 255, 255, .18); }

.op-hero__inner {
  position: relative;
  z-index: 1;
  padding: 110px 0 120px;
  max-width: 640px;
}
.op-hero__eyebrow { color: rgba(255, 255, 255, .85); }
.op-hero__title {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 700;
  margin: .4em 0 .5em;
}
.op-hero__since {
  display: block;
  font-size: .48em;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .92;
  margin-top: .5em;
}
.op-hero__text {
  font-size: 1.1rem;
  max-width: 34em;
  opacity: .94;
  margin-bottom: 2em;
}
.op-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Sobre fons fosc, el botó primari s'inverteix a blanc */
.op-hero__cta-primary { background: #fff; color: var(--op-brand-dark); }
.op-hero__cta-primary:hover { background: var(--op-brand-light); transform: translateY(-2px); box-shadow: var(--op-shadow-hover); }
.op-hero__cta-secondary { border-color: #fff; color: #fff; }
.op-hero__cta-secondary:hover { background: #fff; color: var(--op-brand-dark); }

@media (max-width: 600px) {
  .op-hero__inner { padding: 80px 0 90px; }
}