/* ==========================================================================
   Puels.legal · Section blends — Zurückhaltend
   Sections behalten ihre Farbe. Nur die unmittelbaren Ränder bekommen
   einen sehr dezenten Übergang. Keine Cream-Schleier mehr in den oberen
   Hälften der dunklen Sektionen.
   ========================================================================== */

section {
  position: relative;
}

/* Sections with overflow=hidden so blobs are clipped properly */
.usp-bar,
.cta-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ================ Floating gold blobs (kept — these worked) ============ */
.usp-bar .blob,
.cta-block .blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.14;
  z-index: 0;
}
.usp-bar .blob-1,
.cta-block .blob-1 {
  top: -120px;
  left: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212,179,106,0.85), transparent 70%);
}
.usp-bar .blob-2,
.cta-block .blob-2 {
  bottom: -140px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(176,136,86,0.55), transparent 70%);
}

/* Content above blobs */
.usp-bar > *:not(.blob),
.cta-block > *:not(.blob) {
  position: relative;
  z-index: 2;
}

/* ============ Subtle inner highlight at the very top of dark sections == */
/* A faint 1.5px gold glow line at the absolute top — like a horizon line */
.usp-bar::before,
.cta-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,179,106,0.30) 20%,
    rgba(212,179,106,0.45) 50%,
    rgba(212,179,106,0.30) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* And one at the bottom — visual closure, like a serif */
.usp-bar::after,
.cta-block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,179,106,0.18) 30%,
    rgba(212,179,106,0.30) 50%,
    rgba(212,179,106,0.18) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* ============ Cream sections — soft shadow at bottom, not gradient ====== */
/* Replaces the strong cream-bottom-fade with a much softer one */
.bg-cream {
  position: relative;
}

/* ============ Reduced motion ============================================ */
@media (prefers-reduced-motion: reduce) {
  .usp-bar .blob,
  .cta-block .blob { opacity: 0.08; }
}

/* ============ Mobile ==================================================== */
@media (max-width: 720px) {
  .usp-bar .blob-1, .cta-block .blob-1 { width: 200px; height: 200px; filter: blur(50px); }
  .usp-bar .blob-2, .cta-block .blob-2 { width: 240px; height: 240px; filter: blur(50px); }
}

/* ==========================================================================
   Section bridges — Floating elements that span section boundaries
   Statt harter Linien: bewusste Inszenierung der Sektionsgrenze.
   3 Varianten: Thread (vertikale Linie), Dots (3 Punkte), Pill (Rating-Badge).
   ========================================================================== */

.section-bridge {
  position: relative;
  z-index: 5;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -40px auto;
  pointer-events: none;
  width: 100%;
  max-width: var(--container, 1200px);
  padding: 0 var(--gutter, 1.25rem);
  box-sizing: border-box;
}

/* Thread variant — single elegant gold line */
.section-bridge-thread {
  width: 1.5px;
  height: 80px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(176,136,86,0.55) 30%,
    rgba(176,136,86,0.55) 70%,
    transparent 100%
  );
  border-radius: 2px;
}

/* Top + bottom hairlines around content (used for dots & pill variants) */
.section-bridge-line {
  width: 1.5px;
  flex: 1 1 auto;
  background: linear-gradient(
    180deg,
    rgba(176,136,86,0.45),
    transparent
  );
  border-radius: 2px;
}
.section-bridge-line--top    { background: linear-gradient(180deg, transparent 0%, rgba(176,136,86,0.45) 100%); }
.section-bridge-line--bottom { background: linear-gradient(180deg, rgba(176,136,86,0.45) 0%, transparent 100%); }

/* Dots variant */
.section-bridge-dots {
  display: inline-flex;
  gap: 6px;
  padding: 8px 0;
}
.section-bridge-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold, #B08856);
  opacity: 0.55;
}

/* Pill variant — rating/stat badge */
.section-bridge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 6px 0;
  background: #FFFFFF;
  border: 1px solid var(--border, #E6E0D2);
  border-radius: 100px;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy, #14213D);
  box-shadow:
    0 4px 14px -4px rgba(15,17,21,0.08),
    0 0 0 1px rgba(176,136,86,0.10) inset;
  white-space: nowrap;
  pointer-events: auto;
}
.section-bridge-pill svg {
  color: var(--gold, #B08856);
  flex: 0 0 auto;
}

/* Subtle gold ring "halo" around the pill on hover */
.section-bridge-pill::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  background: radial-gradient(circle, rgba(212,179,106,0.25), transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-bridge-pill:hover::before { opacity: 1; }

/* ----------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section-bridge,
  .section-bridge-thread,
  .section-bridge-line,
  .section-bridge-dots span,
  .section-bridge-pill { transition: none; animation: none; }
}

/* Mobile — keep bridges subtle */
@media (max-width: 720px) {
  .section-bridge { height: 60px; margin: -30px auto; }
  .section-bridge-thread { height: 60px; }
  .section-bridge-pill { font-size: 0.7rem; padding: 0.4rem 0.85rem; }
}