.laptop-scene {
  --cyan: #30c3da;
  --pink: #fb3a6b;
  --ink: #0d132c;
  position: relative;
  width: 520px;
  height: 420px;
  margin: 0 auto;
  perspective: 1000px;
}

.laptop {
  position: relative;
  z-index: 2;
  width: 380px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  animation: laptopEnter .7s .2s cubic-bezier(.2,.8,.2,1) forwards;
}

.laptop.awesome {
  animation: laptopAwesome 1.4s ease-in-out forwards;
}

@keyframes laptopEnter {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes laptopAwesome {
  0% { opacity: 1; transform: translateY(0) rotateY(0) rotateX(0); }
  25% { opacity: 1; transform: translateY(-10px) rotateY(22deg) rotateX(-4deg); }
  50% { opacity: 1; transform: translateY(-10px) rotateY(-22deg) rotateX(-4deg); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) rotateX(0); }
}

.laptop-screen {
  width: 100%;
  height: 230px;
  background: #fff;
  border: 8px solid #1a1a2e;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(13, 19, 44, .2);
  position: relative;
}

.laptop-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #1a1a2e;
  border-radius: 0 0 8px 8px;
  z-index: 4;
}

.laptop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 8px;
  background: #f8f9fc;
}

.laptop-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.laptop-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.laptop-status { font-size: 10px; color: #27c577; font-weight: 600; }

.laptop-demo {
  padding: 10px;
  background: #fff;
  height: calc(100% - 54px);
}

.laptop-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.laptop-bubble {
  max-width: 80%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
}

.laptop-bubble.bot {
  background: #e9eaf0;
  color: #333;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}

.laptop-bubble.user {
  background: linear-gradient(135deg, var(--cyan), #23a6b8);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}

.laptop-ticket {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e9eaf0;
  border-radius: 10px;
  padding: 6px;
}

.laptop-ticket i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #ff7a96);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.laptop-ticket strong { font-size: 10px; color: var(--ink); display: block; }
.laptop-ticket span { font-size: 9px; color: #6c7488; }

.laptop-keyboard {
  width: 100%;
  background: #151523;
  padding: 16px 20px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 34px rgba(13, 19, 44, .24);
}

.laptop-keys {
  height: 120px;
  border-radius: 0 0 10px 10px;
  background-color: #0b0b14;
  background-image:
    repeating-linear-gradient(90deg, #2a2a3e 0 30px, transparent 30px 34px),
    repeating-linear-gradient(0deg, #2a2a3e 0 16px, transparent 16px 20px);
}

.laptop-trackpad {
  width: 110px;
  height: 52px;
  margin: 14px auto 0;
  background: #07070d;
  border: 1px solid #2a2a3e;
  border-radius: 8px;
}

.laptop-bottom {
  width: 100%;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1a1a2e, #0b0b14);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 10px 20px rgba(13, 19, 44, .18);
}

.laptop-float {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 12px 28px rgba(14, 21, 39, .18);
  animation: laptopFloat 4.5s ease-in-out infinite;
}

.laptop-float--qr { top: 6%; left: 0; background: linear-gradient(135deg, #7c4bd4, #a27cf5); animation-delay: -.6s; }
.laptop-float--check { top: 10%; right: 0; background: linear-gradient(135deg, #1bb9ac, #3ce0d0); animation-delay: -1.8s; }
.laptop-float--ticket { bottom: 10%; left: -2%; background: linear-gradient(135deg, var(--pink), #ff7a96); animation-delay: -3s; }
.laptop-float--users { bottom: 14%; right: -2%; background: linear-gradient(135deg, #f4a01a, #ffd36b); animation-delay: -4.2s; }

@keyframes laptopFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 1100px) {
  .laptop-scene { transform: scale(.75); }
}

@media (max-width: 576px) {
  .laptop-scene { transform: scale(.58); }
}