/* OMSAG LP · 5er-Grid Kachel-Slider */

.omsag-lp-g5 {
  --b:   var(--omsag-lp-brand, #50aa3c);
  --bl:  var(--omsag-lp-lime, #aad337);
  --bd:  var(--omsag-lp-brand-deep, #50aa3c);
  --bs:  var(--omsag-lp-brand-soft, rgba(80,170,60,.12));
  --ink: var(--omsag-lp-ink, #232730);
  --ts:  var(--omsag-lp-text-soft, #5a6270);
  --mut: var(--omsag-lp-muted, #8a93a3);
  --ln:  var(--omsag-lp-line, #e6e8ec);
  --bga: var(--omsag-lp-bg-alt, #f9faf8);
  --pill: var(--omsag-lp-pill, 999px);
  --ez:  var(--omsag-lp-ease, cubic-bezier(.2,.7,.2,1));
  --grad: var(--omsag-lp-brand-grad, linear-gradient(135deg,#50aa3c 0%,#aad337 100%));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  position: relative;
  font-family: var(--font);
  color: var(--ink);
  padding: 88px 0;
  background: #f1f2f5;
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-g5,
.omsag-lp-g5 *,
.omsag-lp-g5 *::before,
.omsag-lp-g5 *::after { box-sizing: border-box; }

.omsag-lp-g5__container { width: 100%; }

/* --- Header --- */
.omsag-lp-g5__head { max-width: 760px; margin: 0 auto 40px; padding: 0 28px; text-align: center; }
.omsag-lp-g5__eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--b);
  margin-bottom: 14px;
}
.omsag-lp-g5__headline {
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 700; letter-spacing: 0; line-height: 1.1;
  color: var(--ink); margin: 0;
}
.omsag-lp-g5__intro {
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6;
  color: var(--ts); margin: 16px auto 0; max-width: 680px;
}

/* --- Slider (bounded to 1240, centered) --- */
.omsag-lp-g5__slider {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.omsag-lp-g5__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scroll-behavior: smooth;
  padding: 20px 0 42px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline: none;
}
.omsag-lp-g5__track::-webkit-scrollbar { display: none; }
/* edge overlays — fade partial cards into the background; only shown where more content exists */
.omsag-lp-g5__slider::before,
.omsag-lp-g5__slider::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 7vw, 96px);
  z-index: 2; pointer-events: none; opacity: 1; transition: opacity .3s var(--ez);
}
.omsag-lp-g5__slider::before { left: 0;  background: linear-gradient(90deg, #f1f2f5 30%, rgba(241,242,245,0)); }
.omsag-lp-g5__slider::after  { right: 0; background: linear-gradient(270deg, #f1f2f5 30%, rgba(241,242,245,0)); }
.omsag-lp-g5.is-at-start .omsag-lp-g5__slider::before { opacity: 0; }
.omsag-lp-g5.is-at-end   .omsag-lp-g5__slider::after  { opacity: 0; }

/* --- Card --- */
.omsag-lp-g5__card {
  position: relative;
  flex: 0 0 330px;
  width: 330px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 24px;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 18px;
  box-shadow: none;
  transition: transform .3s var(--ez), box-shadow .3s var(--ez), border-color .3s var(--ez);
}
.omsag-lp-g5__card--link { cursor: pointer; }
/* shadow only on hover */
.omsag-lp-g5__card:hover {
  transform: translateY(-4px);
  border-color: rgba(80,170,60,.35);
  box-shadow: 0 6px 18px rgba(15,17,21,.07), 0 26px 60px -24px rgba(15,17,21,.22);
}
.omsag-lp-g5__stretch {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.omsag-lp-g5__stretch:focus { outline: none; }
.omsag-lp-g5__card-head,
.omsag-lp-g5__blocks,
.omsag-lp-g5__link { position: relative; z-index: 0; }

.omsag-lp-g5__card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.omsag-lp-g5__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--ln); border-radius: 12px;
  color: var(--b); background: var(--bga);
}
.omsag-lp-g5__icon svg { width: 25px; height: 25px; display: block; }
.omsag-lp-g5__card-titles { min-width: 0; }
.omsag-lp-g5__card-title { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 0; line-height: 1.2; }
.omsag-lp-g5__card-sub { display: block; font-size: 13px; color: var(--mut); font-weight: 500; margin-top: 3px; }

.omsag-lp-g5__blocks { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.omsag-lp-g5__block-label {
  display: block; font-size: 14px; font-weight: 600; color: var(--b);
  margin-bottom: 4px;
}
.omsag-lp-g5__block-text { font-size: 14.5px; line-height: 1.55; color: var(--ts); margin: 0; }

.omsag-lp-g5__link {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--b);
  text-decoration: none;
}
.omsag-lp-g5__card:hover .omsag-lp-g5__link { color: var(--bd); }
.omsag-lp-g5__arrow { display: inline-flex; align-items: center; transition: transform .35s cubic-bezier(.42,0,.58,1); }
.omsag-lp-g5__arrow svg { display: block; }
.omsag-lp-g5__card:hover .omsag-lp-g5__arrow { transform: translateX(5px); }

/* --- Nav --- */
.omsag-lp-g5__nav {
  position: relative;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 26px; padding: 0 28px;
}
.omsag-lp-g5__btn {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ln);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,17,21,.06);
  transition: transform .25s var(--ez), box-shadow .25s var(--ez), border-color .25s var(--ez), background .25s var(--ez), opacity .25s var(--ez);
}
.omsag-lp-g5__btn:hover { transform: translateY(-2px); border-color: rgba(80,170,60,.4); box-shadow: 0 10px 24px -10px rgba(15,17,21,.28); }
.omsag-lp-g5__btn:active { transform: translateY(0); }
.omsag-lp-g5__btn:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }
.omsag-lp-g5__btn svg { display: block; }

.omsag-lp-g5__dots { display: flex; align-items: center; gap: 7px; }
.omsag-lp-g5__dot {
  width: 8px; height: 8px; border-radius: var(--pill);
  border: 0; padding: 0; background: var(--ln); cursor: pointer;
  transition: background .25s var(--ez), width .25s var(--ez);
}
.omsag-lp-g5__dot.is-active { background: var(--b); width: 24px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .omsag-lp-g5 { padding: 72px 0; }
}
@media (max-width: 760px) {
  .omsag-lp-g5 { padding: 56px 0; }
  .omsag-lp-g5__head { padding: 0 20px; margin-bottom: 30px; }
  /* full-bleed slider so the next card clearly peeks at the edge */
  .omsag-lp-g5__slider { padding: 0; }
  .omsag-lp-g5__track { gap: 14px; padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
  .omsag-lp-g5__card { flex-basis: 78vw; width: 78vw; max-width: 340px; }
  .omsag-lp-g5__slider::before,
  .omsag-lp-g5__slider::after { width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-g5__track { scroll-behavior: auto; }
  .omsag-lp-g5 *, .omsag-lp-g5 *::before, .omsag-lp-g5 *::after { transition: none !important; }
}