/* ==========================================================================
   KOBIL — Products/mPower — Section: Features (Figma 16652:22411)
   "Core Capabilities of mPower" — Accordion links, Identity-Illustration
   rechts (ID-Karte, App-Tiles, Pills) auf weisser Karte (1360x690) mit
   weichem Blau-Glow und abgeschraegter Ecke unten rechts.
   ========================================================================== */

.sec-mpower-features {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 690px;
  background: var(--white);
  border-radius: var(--radius-sm);
}

/* ---- Deko: weicher Blau-Glow (von Figma gerendertes WebP, Weiss eingebacken) ---- */

.sec-mpower-features__glow {
  position: absolute;
  z-index: 0;
  top: -494px;
  left: 137px;
  width: 1223px;
  max-width: none;
  height: 1593px;
  pointer-events: none;
}

/* ---- Deko: abgeschraegte Ecke unten rechts (Seitenhintergrund-Farbe) ---- */

.sec-mpower-features__notch {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
}

/* ---- Layout ---- */

.sec-mpower-features__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 60px;
  height: 100%;
  padding: 0 40px;
}

.sec-mpower-features__content {
  flex: 0 1 574px;
  min-width: 0;
  /* Figma zentriert den Textblock im 700px-Frame (Top 64px in der 690px-Karte),
     nicht in der sichtbaren Karte — daher 10px Margin-Offset. */
  margin-top: 10px;
}

/* ---- Header ---- */

.sec-mpower-features__eyebrow {
  display: flex;
  gap: 10px;
  color: var(--navy-70);
  letter-spacing: 0.48px;
  margin-bottom: 24px;
}

.sec-mpower-features__eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-mpower-features__title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: var(--navy);
  margin-bottom: 16px;
}

.sec-mpower-features__accent {
  color: var(--blue);
}

.sec-mpower-features__lead {
  font-size: 16px;
  line-height: 23px;
  color: var(--navy-70);
  margin-bottom: 32px;
}

/* ---- Accordion ---- */

.sec-mpower-features__accordion {
  width: 507px;
  max-width: 100%;
}

/* Trennlinie als Inset-Shadow, damit sie (wie in Figma) keine Layout-Hoehe belegt */
.sec-mpower-features__item {
  box-shadow: inset 0 -1px 0 var(--navy-40);
  border-radius: 2px;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sec-mpower-features__item.is-open {
  background: #f9fafd;
  box-shadow: inset 0 -1px 0 rgba(226, 231, 242, 0);
}

.sec-mpower-features__item-heading {
  margin: 0;
}

.sec-mpower-features__item-head {
  display: block;
  width: 100%;
  padding: 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--navy-80);
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.sec-mpower-features__item-head:hover {
  color: var(--navy);
}

.sec-mpower-features__item-head:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: 2px;
}

.sec-mpower-features__item.is-open .sec-mpower-features__item-head {
  padding: 12px 16px 4px;
}

.sec-mpower-features__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.sec-mpower-features__item.is-open .sec-mpower-features__item-body {
  grid-template-rows: 1fr;
}

.sec-mpower-features__item-body-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0.3s;
}

.sec-mpower-features__item.is-open .sec-mpower-features__item-body-inner {
  visibility: visible;
}

.sec-mpower-features__item-text {
  margin: 0 16px 12px;
  max-width: 475px;
  font-size: 14px;
  line-height: 20px;
  color: var(--navy-80);
}

/* ---- Illustration (fixe 646x530-Buehne, Skalierung setzt features.js) ---- */

.sec-mpower-features__viz {
  flex: 1 1 auto;
  max-width: 646px;
  aspect-ratio: 646 / 530;
  overflow: hidden;
}

.sec-mpower-features__stage {
  position: relative;
  width: 646px;
  height: 530px;
  transform-origin: 0 0;
  transform: scale(var(--viz-scale, 1));
}

.sec-mpower-features__stage img {
  display: block;
}

.sec-mpower-features__rings {
  position: absolute;
  top: 265px;
  left: 50%;
  width: 506.57px;
  height: 506.57px;
  max-width: none;
  transform: translate(-50%, -50%);
}

/* ---- ID-Karte ---- */

.sec-mpower-features__card {
  position: absolute;
  top: 48.3px;
  left: 166px;
  width: 314.75px;
  height: 171.87px;
}

.sec-mpower-features__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 36px rgba(1, 42, 112, 0.12));
}

.sec-mpower-features__id-row {
  position: absolute;
  top: 23.9px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 8.7px;
}

.sec-mpower-features__id-avatar {
  width: 54.5px;
  height: 54.5px;
  border-radius: 50%;
}

.sec-mpower-features__id-meta {
  display: flex;
  flex-direction: column;
  gap: 4.4px;
}

.sec-mpower-features__id-name {
  font-family: var(--font-ui);
  font-size: 16.3px;
  font-weight: 600;
  line-height: normal;
  color: var(--navy);
  white-space: nowrap;
}

.sec-mpower-features__id-code {
  font-family: var(--font-ui);
  font-size: 12.7px;
  font-weight: 400;
  line-height: normal;
  color: var(--navy-70);
  white-space: nowrap;
}

.sec-mpower-features__id-lines {
  position: absolute;
  top: 92.7px;
  left: 22px;
  width: 190px;
  height: 52px;
}

.sec-mpower-features__id-fingerprint {
  position: absolute;
  top: 21.2px;
  left: 223.1px;
  width: 64.26px;
  height: 75.46px;
}

/* ---- App-Tiles ---- */

.sec-mpower-features__tile {
  position: absolute;
  top: 318px;
  width: 110px;
  height: 110px;
  border: 1.1px solid var(--white);
  border-radius: var(--radius-sm);
  background: linear-gradient(208.6deg, rgba(184, 232, 255, 0.6) -36.5%, rgba(41, 98, 246, 0.6) 94.5%);
  box-shadow: 0 7.7px 22px 0 rgba(1, 42, 112, 0.19);
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
}

.sec-mpower-features__tile--apps {
  left: 103px;
}

.sec-mpower-features__tile--sign {
  left: 268px;
}

.sec-mpower-features__tile--device {
  left: 433px;
}

.sec-mpower-features__mini {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 4.8px;
  background: rgba(255, 255, 255, 0.8);
}

.sec-mpower-features__mini img {
  width: 23.9px;
  height: 23.9px;
  mix-blend-mode: multiply;
}

.sec-mpower-features__mini--1 {
  top: 19.8px;
  left: 19.8px;
}

.sec-mpower-features__mini--2 {
  top: 19.8px;
  left: 56.96px;
}

.sec-mpower-features__mini--3 {
  top: 56.96px;
  left: 56.96px;
}

.sec-mpower-features__mini--4 {
  top: 56.9px;
  left: 19.9px;
  background: rgba(255, 255, 255, 0.3);
}

.sec-mpower-features__mini--4 img {
  width: 17.1px;
  height: 17.1px;
  mix-blend-mode: normal;
}

.sec-mpower-features__sign-icon {
  position: absolute;
  top: 32.3px;
  left: 24.2px;
  width: 57.2px;
  height: 47.56px;
}

.sec-mpower-features__sign-badge {
  position: absolute;
  top: 14.3px;
  left: 70.4px;
  width: 25.11px;
  height: 29.16px;
}

.sec-mpower-features__device-icon {
  position: absolute;
  top: 24.2px;
  left: 18.7px;
  width: 77px;
  height: 55px;
}

.sec-mpower-features__lock {
  position: absolute;
  top: 62.7px;
  left: 8.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30.8px;
  height: 30.8px;
  border-radius: 50%;
  background: var(--blue);
}

.sec-mpower-features__lock img {
  width: 17.9px;
  height: 17.9px;
}

/* ---- Pills ---- */

.sec-mpower-features__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #f5f5f8;
  border-radius: 20px;
  background: linear-gradient(227deg, #f7f9ff 0.47%, #eaefff 97.76%);
  backdrop-filter: blur(6.4px);
  -webkit-backdrop-filter: blur(6.4px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--navy-80);
  white-space: nowrap;
}

.sec-mpower-features__pill--mfa {
  top: 253px;
  left: 97px;
}

.sec-mpower-features__pill--passwordless {
  top: 253px;
  left: 439px;
}

.sec-mpower-features__pill--rba {
  top: 483px;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .sec-mpower-features {
    height: auto;
  }

  .sec-mpower-features__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 64px 32px;
  }

  .sec-mpower-features__content {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
  }

  .sec-mpower-features__accordion {
    width: 100%;
    max-width: 574px;
  }

  .sec-mpower-features__viz {
    flex: 0 0 auto;
    width: 100%;
    align-self: center;
  }

  .sec-mpower-features__glow {
    top: auto;
    left: 50%;
    bottom: -400px;
    transform: translateX(-70%);
  }
}

@media (max-width: 768px) {
  .sec-mpower-features__inner {
    gap: 40px;
    padding: 56px 24px;
  }

  .sec-mpower-features__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 480px) {
  .sec-mpower-features__inner {
    padding: 48px 16px;
  }
}