.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
/* Slider Container */
.banner .slider {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 40%;

  left: calc(50% - 100px);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  animation: autorun 20s linear infinite;
}
@keyframes autorun {
  from {
    transform: perspective(1000px) rotateY(0deg);
  }
  to {
    transform: perspective(1000px) rotateY(360deg);
  }
}
/* Each Item (3D Placement) */
.banner .slider .item {
  position: absolute;
  inset: 0;
  transform: rotateY(
      calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)
    )
    rotateX(0deg) translateZ(400px);
}
.banner .slider.top {
  /* transform: translate(-50%, -50%); */
}
.banner .slider.top .item {
  transform: rotateY(
      calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)
    )
    rotateX(40deg) translateZ(390px);
}

.banner .slider.bottom .item {
  transform: rotateY(
      calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)
    )
    rotateX(-40deg) translateZ(390px);
}
/* Image Styling */
.banner .slider .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── BRAND TOKENS (matches CloudBliss website) ─────── */
:root {
  --bg: #07091a;
  --s1: #0d1027;
  --s2: #111330;
  --s3: #171b3a;
  --s4: #1d2247;
  --b0: #1e244a;
  --b1: #252c58;
  --b2: #303870;
  --b3: #3d4788;

  /* 🔁 Updated Accent (Purple) */
  --acc: #5b29d9;
  --acc2: #7c52e6;
  --acc3: #a78cf0;
  --acc4: #e6ddff;

  /* Gradient adjusted to match */
  --acc-g1: #7c52e6;
  --acc-g2: #5b29d9;

  --teal: #00c9a7;
  --teal2: #00e8c3;
  --gold: #f0a500;
  --gold-lt: rgba(240, 165, 0, 0.1);
  --red: #e05555;
  --red-lt: rgba(224, 85, 85, 0.1);
  --green: #22c55e;
  --green-lt: rgba(34, 197, 94, 0.1);

  /* Glow updated */
  --glow: rgba(91, 41, 217, 0.16);

  --txt: #eef0ff;
  --txt2: #9da8d8;
  --txt3: #5c6899;
  --txt4: #343d68;

  --r: 8px;
  --r2: 12px;
  --r3: 16px;
  --r4: 22px;

  --fh: "Inter", sans-serif;
  --fb: "Inter", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}