/* Cadres des téléphones et écrans abstraits des apps en construction. */
.phone {
  width: 236px;
  height: 494px;
  padding: 6px;
  border-radius: 38px;
  background: linear-gradient(130deg,#b9b7b2,#e8e7e1 20%,#e6e3dd 70%,#aaa9a5);
  border: 1px solid #a9a7a1;
  box-shadow: inset 0 0 0 2px #f7f6f2, 0 3px 1px #9e9b95, 0 6px 0 #b7b3ad;
  position: relative;
}
.phone::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 42px;
  left: -3px;
  top: 100px;
  background: #adaaa3;
  border-radius: 2px;
}
.phone-screen {
  height: 100%;
  width: 100%;
  border-radius: 31px;
  position: relative;
  overflow: hidden;
}
.real-screenshot { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; }

/* Le flou reste dans l’écran pour conserver une silhouette de téléphone nette. */
.construction-screen { background: #171020; color: #fff4ff; isolation: isolate; }
.construction-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 35px #10091655;
  background: linear-gradient(135deg,#ffffff0a,transparent 45%,#ffffff05);
  pointer-events: none;
}
.construction-glow { position: absolute; inset: -30px; filter: blur(30px); opacity: .7; }
.construction-glow i {
  position: absolute;
  width: 200px;
  height: 240px;
  border-radius: 45%;
  background: radial-gradient(ellipse at 30% 20%,#ffb67b,#fc76c3 35%,#7c42ed 75%);
  top: 12%;
  left: -15%;
  animation: construction-drift 9s ease-in-out infinite alternate;
  animation-delay: calc(var(--construction-phase,0s) - 2s);
}
.construction-glow i:nth-child(2) {
  width: 210px;
  height: 235px;
  left: 40%;
  top: 45%;
  background: radial-gradient(ellipse at 70% 75%,#5ae6ff,#3458fd 45%,#8743e5 80%);
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}
.construction-glow i:nth-child(3) {
  width: 135px;
  height: 135px;
  left: 55%;
  top: 5%;
  opacity: .65;
  background: #c99af6;
  animation-duration: 8s;
}
.phone-position-0 { --construction-phase: -4s; }
.phone-position-2 { --construction-phase: -7s; }
.island {
  position: absolute;
  top: 9px;
  width: 67px;
  height: 18px;
  left: 50%;
  translate: -50%;
  background: #100c16;
  border-radius: 20px;
}
.phone-home {
  width: 65px;
  height: 3px;
  background: currentColor;
  opacity: .45;
  border-radius: 3px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  translate: -50%;
}
@keyframes construction-drift {
  from { transform: translate(-10px,-15px) rotate(-12deg) scale(.94); }
  to { transform: translate(25px,30px) rotate(18deg) scale(1.12); }
}