/* ==========================================================================
   KOBIL — Produktseite SuperApp Platform — Sektion: Features (Figma 16621:26743)
   ========================================================================== */

.sec-superapp-features {
  --vscale: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: 690px;
  padding-top: 10px; /* Figma-Frame ist 700px (Karte 690px oben): Inhalt zentriert sich auf 700px → +5px nach unten */
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ---- Hintergrund: weiße Karte (Maske mit Eck-Notch) + Blau-Glow ---- */

.sec-superapp-features__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--white);
  -webkit-mask: url("/assets/products/superapp/features/card-shape.svg") 0 0 / 100% 100% no-repeat;
  mask: url("/assets/products/superapp/features/card-shape.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.sec-superapp-features__glow {
  position: absolute;
  top: -504px;
  right: -12px;
  width: 1223px;
  height: 1593px;
  max-width: none;
}

/* ---- Text-Spalte ---- */

.sec-superapp-features__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 1 611px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  margin-left: 40px;
}

.sec-superapp-features__eyebrow {
  gap: 10px;
  letter-spacing: 0.48px;
  color: var(--navy-70);
}

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

.sec-superapp-features__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

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

.sec-superapp-features__title-accent {
  color: var(--blue);
}

.sec-superapp-features__lede {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 574px;
}

.sec-superapp-features__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--navy-70);
}

/* ---- Feature-Liste (1 aktiver Punkt + 2 kompakte Zeilen) ---- */

.sec-superapp-features__list {
  display: flex;
  flex-direction: column;
  width: 507px;
  max-width: 100%;
}

.sec-superapp-features__item {
  width: 100%;
  padding: 16px;
  border-radius: 2px;
  color: var(--navy-80);
  transition: background-color var(--dur) var(--ease);
}

.sec-superapp-features__item:not(.sec-superapp-features__item--active) {
  border-bottom: 1px solid var(--navy-40);
}

.sec-superapp-features__item:not(.sec-superapp-features__item--active):hover {
  background-color: #f9fafd;
}

.sec-superapp-features__item--active {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: #f9fafd;
}

.sec-superapp-features__item-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: inherit;
}

.sec-superapp-features__item-body {
  margin: 0;
  max-width: 475px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: inherit;
}

/* ---- Visual: Ökosystem-Diagramm (Canvas 646x530) ---- */

.sec-superapp-features__visual {
  position: relative;
  z-index: 1;
  flex: 0 0 calc(646px * var(--vscale));
  width: calc(646px * var(--vscale));
  height: calc(530px * var(--vscale));
  margin-left: auto;
  margin-right: 40px;
  margin-bottom: 10px; /* Figma: Visual-Zentrum (345px) 5px über Copy-Zentrum (350px) */
}

.sec-superapp-features__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 646px;
  height: 530px;
  transform: scale(var(--vscale));
  transform-origin: top left;
}

/* Ringe */

.sec-superapp-features__ring {
  position: absolute;
  border: 2px solid var(--white);
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
}

.sec-superapp-features__ring--outer {
  left: 75px;
  top: 15px;
  width: 498px;
  height: 492px;
  border-width: 2.355px;
  filter: drop-shadow(0 0 18px rgba(41, 98, 246, 0.6));
}

.sec-superapp-features__ring--inner {
  left: 160px;
  top: 92px;
  width: 326px;
  height: 326px;
  filter: drop-shadow(0 0 15.3px rgba(41, 98, 246, 0.6));
}

/* Ring-Labels */

.sec-superapp-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(226.758deg, #f7f9ff 0.47%, #eaefff 97.76%);
  -webkit-backdrop-filter: blur(6.4px);
  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;
  transform: translateX(-50%);
}

.sec-superapp-features__pill--infrastructure {
  left: 191.5px;
  top: 39px;
}

.sec-superapp-features__pill--ecosystem {
  left: 255.5px;
  top: 103px;
  background: linear-gradient(231.863deg, #f7f9ff 0.47%, #eaefff 97.76%);
}

/* MiniApp-Kacheln */

.sec-superapp-features__tile {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid var(--white);
  border-radius: 10px;
  background: linear-gradient(257.951deg, #f7f9ff 27.02%, #eaefff 111.81%);
  box-shadow: 0 1.042px 5.734px rgba(1, 42, 112, 0.08);
}

.sec-superapp-features__tile img {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 64px;
  max-width: none;
  border-radius: 8.889px;
}

.sec-superapp-features__tile--1 { left: 200px; top: 178.8px; }
.sec-superapp-features__tile--2 { left: 291px; top: 178.8px; }
.sec-superapp-features__tile--3 { left: 382px; top: 178.8px; }
.sec-superapp-features__tile--4 { left: 200px; top: 266.8px; }
.sec-superapp-features__tile--5 { left: 291px; top: 266.8px; }

.sec-superapp-features__tile--empty {
  left: 382px;
  top: 266.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-20);
  border-color: var(--navy-40);
  border-radius: 8.889px;
}

.sec-superapp-features__tile--empty img {
  position: static;
  width: 24.6px;
  height: 24.6px;
  border-radius: 0;
}

/* Orbit-Badges */

.sec-superapp-features__badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.766px;
  width: 81.686px;
  height: 81.686px;
  padding: 6.727px;
  border: 1.057px solid var(--white);
  border-radius: 50%;
  background: linear-gradient(208.605deg, rgba(184, 232, 255, 0.6) -73%, rgba(41, 98, 246, 0.6) 109%);
  -webkit-backdrop-filter: blur(3.345px);
  backdrop-filter: blur(3.345px);
  box-shadow: 0 7.4px 21.142px rgba(1, 42, 112, 0.19);
}

.sec-superapp-features__badge span {
  font-family: var(--font-sans);
  font-size: 10.571px;
  font-weight: 500;
  line-height: 13.454px;
  color: var(--white);
  white-space: nowrap;
}

.sec-superapp-features__badge img {
  flex: 0 0 auto;
}

.sec-superapp-features__badge--identity img { width: 32.095px; height: 37.69px; }
.sec-superapp-features__badge--chat img { width: 32.042px; height: 32.042px; }
.sec-superapp-features__badge--payment img { width: 31.333px; height: 35.846px; }
.sec-superapp-features__badge--security img { width: 33.398px; height: 34.523px; }
.sec-superapp-features__badge--signatures img { width: 44.129px; height: 36.58px; }

.sec-superapp-features__badge--identity { left: 48px; top: 168.84px; }
.sec-superapp-features__badge--chat { left: 415px; top: 10px; }
.sec-superapp-features__badge--payment { left: 526px; top: 229px; }
.sec-superapp-features__badge--security { left: 110px; top: 393px; }
.sec-superapp-features__badge--signatures { left: 392px; top: 428px; }

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

@media (max-width: 1420px) {
  .sec-superapp-features {
    --vscale: 0.85;
  }
}

@media (max-width: 1220px) {
  .sec-superapp-features {
    --vscale: 0.7;
  }

  .sec-superapp-features__title {
    font-size: 36px;
    line-height: 46px;
  }
}

@media (max-width: 1080px) {
  .sec-superapp-features {
    --vscale: 0.6;
  }
}

@media (max-width: 1024px) {
  .sec-superapp-features {
    --vscale: 1;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 64px 40px;
    gap: 48px;
  }

  .sec-superapp-features__bg {
    -webkit-mask: none;
    mask: none;
  }

  .sec-superapp-features__glow {
    top: auto;
    bottom: -520px;
    right: calc(50% - 611px);
  }

  .sec-superapp-features__copy {
    flex: 0 0 auto;
    max-width: 640px;
    margin-left: 0;
  }

  .sec-superapp-features__visual {
    flex: 0 0 auto;
    margin: 0 auto;
  }
}

@media (max-width: 860px) {
  .sec-superapp-features {
    --vscale: 0.8;
  }
}

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

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

@media (max-width: 600px) {
  .sec-superapp-features {
    --vscale: 0.62;
  }
}

@media (max-width: 480px) {
  .sec-superapp-features {
    --vscale: 0.46;
    padding: 48px 20px;
    gap: 32px;
  }

  .sec-superapp-features__body {
    font-size: 15px;
    line-height: 22px;
  }

  .sec-superapp-features__item {
    padding: 14px 12px;
  }

  .sec-superapp-features__item--active {
    padding: 12px;
  }
}