/* benefits.css — benefit slideshow */

.bslider { position: relative; display: flex; align-items: center; gap: .5rem; }
.bslider__track { flex: 1; position: relative; min-height: 320px; }
.bslide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 56px); text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility .5s;
}
.bslide.active { opacity: 1; visibility: visible; transform: none; position: relative; }
.bslide__ico {
  width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 1.1rem;
  color: var(--gold-600); background: linear-gradient(135deg, rgba(79,142,240,.12), rgba(207,162,74,.18));
  border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.bslide__num { font-size: .8rem; letter-spacing: .16em; font-weight: 700; color: var(--gold-600); margin-bottom: .6rem; }
.bslide h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .7rem; }
.bslide p { font-size: 1.08rem; color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }

.bslider__arrow {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: var(--navy-700);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow-1); transition: transform .25s, background .25s, box-shadow .25s;
}
.bslider__arrow:hover { transform: scale(1.08); background: var(--glass-bg-strong); box-shadow: var(--shadow-2); }
.bslider__arrow:active { transform: scale(.96); }

.bslider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.bdot { width: 9px; height: 9px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
  background: var(--grey-200); transition: width .3s, background .3s; }
.bdot.active { width: 26px; background: var(--grad-gold); }

@media (max-width: 620px) {
  .bslider__arrow { width: 42px; height: 42px; }
  .bslide { padding: 26px 18px; }
  .bslider__track { min-height: 300px; }
}