/* ── SVG Background Patterns ────────────────────────────────────────────── */
.bg-pattern {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .1; transition: opacity .5s;
  pointer-events: none;
}
#p-services { opacity: .08; }
#p-insights { opacity: .12; }
#p-contact  { opacity: .12; }

/* ── Left panel keyword ─────────────────────────────────────────────────── */
.left-keyword {
  position: relative; z-index: 2;
  font-family: var(--fd); font-weight: 700; color: #fff;
  line-height: 1; letter-spacing: -.04em;
  mix-blend-mode: overlay;
  font-size: clamp(3rem, 7vw, 9rem);
  text-align: center; padding: 0 1rem;
  transition: opacity .3s ease, transform .4s ease;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .85rem 2rem;
  font-size: .85rem; font-weight: 500;
  letter-spacing: .04em; cursor: pointer;
  border: none; transition: background .2s, transform .15s, color .2s;
  font-family: var(--fb); text-decoration: none;
}
.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(.98);  }
.btn-p { background: var(--coral); color: #fff; }
.btn-p:hover { background: #d05c3f; }
.btn-o { background: transparent; color: var(--text); border: 1px solid var(--text); }
.btn-o:hover { background: var(--text); color: var(--sand); }