/* =========================================================
   Section 5 — Enterprise-Grade Reliability
   Figma node 2132:1102 (desktop 1512 × 906, bg #020D18)
   All right-side artwork is positioned in the 1512px design
   space (--ox = left edge of that space) so it lines up with
   Figma at every desktop width.
   ========================================================= */

.ent {
  --ox: calc(50% - 756px);
  --card: #161b22;
  --line: #30363d;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 906px;
  padding-block: 160px 96px;
  background: #020d18;
}

/* ---------- Background art ---------- */
.ent__galaxy {
  position: absolute;
  z-index: -3;
  left: calc(var(--ox) + 136px);
  top: 0;
  width: 1376px;
  height: 906px;
  max-width: none;
  pointer-events: none;
}

/* 3 dotted orbits behind the phones (Figma group 2132:1103) */
.ent__orbits {
  position: absolute;
  z-index: -2;
  left: calc(var(--ox) + 889px);
  top: 22px;
  width: 803px;
  height: 803px;
  max-width: none;
  pointer-events: none;
  animation: ent-spin 120s linear infinite;
}

/* ---------- Tilted phones ---------- */
.ent__phones {
  position: absolute;
  z-index: -1;
  left: var(--ox);
  top: 0;
  width: 1512px;
  height: 906px;
  pointer-events: none;
  animation: ent-float 8s ease-in-out infinite;
}

.ent-phone__frame {
  position: absolute;
  width: 529.81px;
  height: 363.73px;
  max-width: none;
}

/* Flat 248 × 535 screen, projected onto the tilted phone.
   --tx / --ty are unitless (px) because matrix() needs plain numbers.
   The matrix was measured from the Figma export so the angle
   matches the design exactly. */
.ent-phone__screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 248px;
  height: 535px;
  transform-origin: 0 0;
  transform: matrix(0.57517, 0.26564, -0.51878, 0.36642, var(--tx), var(--ty));
  -webkit-mask-image: url("../../assets/images/screen-mask.png");
          mask-image: url("../../assets/images/screen-mask.png");
  -webkit-mask-size: 99.539% 99.893%;
          mask-size: 99.539% 99.893%;
  -webkit-mask-position: 50% 0;
          mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.ent-phone__screen img {
  display: block;
  width: 248px;
  height: 535px;
  max-width: none;
  object-fit: cover;
}

/* back → front: 4, 3, 2, 1 (same order as Figma) */
.ent-phone--4 .ent-phone__frame  { left: 854.94px;  top: 358.66px; }
.ent-phone--4 .ent-phone__screen { --tx: 1188.28; --ty: 397.03; }
.ent-phone--3 .ent-phone__frame  { left: 1182px;    top: 127.5px; }
.ent-phone--3 .ent-phone__screen { --tx: 1515.34; --ty: 165.87; }
.ent-phone--3 .ent-phone__screen img { object-position: top; }   /* taller screen, cropped at the bottom */
.ent-phone--2 .ent-phone__frame  { left: 1196.73px; top: 348.91px; }
.ent-phone--2 .ent-phone__screen { --tx: 1530.07; --ty: 387.28; }
.ent-phone--1 .ent-phone__frame  { left: 799.47px;  top: 166.21px; }
.ent-phone--1 .ent-phone__screen { --tx: 1132.81; --ty: 204.58; }

/* ---------- Left column ---------- */
.ent__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 661px;
}

.ent__head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ent__badge { --s: 64px; }
.ent__badge .icon-badge__inner img { width: 68%; }

.ent__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--color-white);
  white-space: nowrap;
}

.ent__title-accent { color: var(--color-amber); }

.ent__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  width: 619px;
  max-width: 100%;
}

.ent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  border-radius: 28px;
  background:
    linear-gradient(114.69deg, rgba(22, 27, 34, 0.2) 71.337%, rgba(255, 255, 255, 0.2) 110.66%),
    var(--card);
  filter: drop-shadow(0 5.021px 5.439px rgba(8, 8, 8, 0.12)) drop-shadow(0 20.083px 10.042px rgba(8, 8, 8, 0.08));
  transition: transform 0.35s var(--ease-out);
}

.ent-card:nth-child(n + 3) {
  background:
    linear-gradient(112.33deg, rgba(22, 27, 34, 0.2) 71.337%, rgba(255, 255, 255, 0.2) 110.66%),
    var(--card);
}

/* stroke + inner highlight, drawn inside like Figma */
.ent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  box-shadow: inset 1.674px 3.347px 13.389px 0 rgba(253, 253, 253, 0.05);
  pointer-events: none;
}

.ent-card:hover { transform: translateY(-4px); }

.ent-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.543px solid #414141;
  border-radius: 50%;
  background: radial-gradient(circle 20.3px at 50% 0, #202020, #141414);
  box-shadow: inset 0 0.159px 0 #777, 0 3.492px 0.794px rgba(0, 0, 0, 0.3);
}

.ent-card__icon img { width: 24px; height: 24px; }

.ent-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6;
}

.ent-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-white);
}

.ent-card__desc {
  font-size: 16px;
  color: var(--color-text-muted);
}

@keyframes ent-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes ent-spin { to { transform: rotate(360deg); } }

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

/* Below 1200px the phones would cover the cards → text-only layout */
@media (max-width: 1199px) {
  .ent {
    min-height: 0;
    padding-block: 96px;
  }

  .ent__phones,
  .ent__orbits { display: none; }

  .ent__galaxy { left: 50%; transform: translateX(-50%); }

  .ent__content {
    align-items: center;
    max-width: 680px;
    margin-inline: auto;
  }

  .ent__grid { width: 100%; }
}

/* Mobile — matches section_5_mobile.png (430 wide) */
@media (max-width: 767px) {
  .ent {
    padding-block: 32px 82px;
  }

  .ent__galaxy {
    top: -250px;
  }

  .ent__head {
    flex-direction: column;
    gap: 18px;
  }

  .ent__badge { --s: 42px; }

  .ent__title {
    font-size: 26px;
    letter-spacing: -0.26px;
    text-align: center;
  }

  .ent__content { gap: 34px; }

  .ent__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ent-card {
    gap: 14px;
    padding: 13px 18px 18px;
  }

  .ent-card__icon {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle 16.1px at 50% 0, #202020, #141414);
  }

  .ent-card__icon img { width: 20px; height: 20px; }

  .ent-card__text  { gap: 3px; }
  .ent-card__title { font-size: 16px; }

  .ent-card__desc {
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (max-width: 359px) {
  .ent__title { font-size: 23px; }
}

/* Phones & tablets: no endless animation, box-shadow instead of filter */
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
  .ent__orbits,
  .ent__phones { animation: none; }

  .ent-card {
    filter: none;
    box-shadow: 0 5px 5px rgba(8, 8, 8, 0.12), 0 20px 10px rgba(8, 8, 8, 0.08);
  }
}