/* =========================================================
   DEVICES – LICHTE SECTIE MET MOCKUPS
   ========================================================= */

.df-section-devices {
  padding-block: 2.8rem 3rem;
  background: #f9fafb;
  color: #0b1225;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.df-section-devices h2 {
  margin-bottom: 0.4rem;
  color: #0b1225;
}

.df-section-devices p {
  margin-bottom: 1.6rem;
  color: #4b5563;
}

.df-section-devices .df-list li {
  color: #4b5563;
}

/* Layout */

.df-devices-inner {
  display: flex;
  align-items: center;
  gap: 2.6rem;
}

/* Tekst links */

.df-section-devices .df-section-header-left h2 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}

.df-section-devices .df-section-header-left p {
  max-width: 420px;
  font-size: 0.94rem;
}

/* Lijst onder de tekst */

.df-section-devices .df-list {
  margin-top: 1.2rem;
}

/* =========================================================
   DEVICE MOCKUPS — ALIGNED ON ONE LINE + BIGGER
   ========================================================= */

/* Mockups rechts – alles exact op dezelfde lijn */
.df-device-mockups {
  display: flex;
  align-items: flex-end;   /* ← zorgt dat alle onderkanten gelijk staan */
  gap: 2rem;
  justify-content: flex-start;
  padding-right: 1rem;
}

/* Basis device */
.df-device {
  border-radius: 2rem;
  background: radial-gradient(circle at top, #0b1120, #020617);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.85);
  position: relative;
  overflow: hidden;
}

/* Schermvlak binnen device */
.df-device::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 1.6rem;
  background: linear-gradient(to bottom, #020617, #020617);
  opacity: 0.96;
}

/* Kleine glans */
.df-device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0) 60%
  );
  pointer-events: none;
}

/* ---------------------------
   GROOTTES — iets groter
   --------------------------- */

/* Telefoon links */
.df-device-phone {
  width: 150px;
  height: 280px;
}

/* Telefoon midden */
.df-device-phone.df-device-phone-alt {
  width: 135px;
  height: 255px;
  opacity: 0.9;
  transform: translateY(0); /* ← stond eerder lager, nu niet meer */
}

/* Tablet rechts */
.df-device-tablet {
  width: 240px;
  height: 340px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.85);
}

/* ---------------------------
   RESPONSIVE
   --------------------------- */

@media (max-width: 900px) {
  .df-devices-inner {
    flex-direction: column;
    gap: 2.4rem;
  }

  .df-device-mockups {
    justify-content: flex-start;
  }

}

@media (max-width: 600px) {
  .df-device-phone {
    width: 120px;
    height: 235px;
  }

  .df-device-phone.df-device-phone-alt {
    width: 110px;
    height: 210px;
  }

  .df-device-tablet {
    width: 190px;
    height: 270px;
  }
}