/* ── PAGE DECORATIONS ─────────────────────────────────────────────────────── */

.page-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── CIRCLES ── */
.pd-circle { position: absolute; border-radius: 50%; }

/* Large cream circle — top right */
.pd-cream-lg {
  width: 380px; height: 380px;
  top: -120px; right: -100px;
  background: rgba(255, 253, 248, 0.88);
}

/* Large lavender circle — bottom left */
.pd-purple-lg {
  width: 460px; height: 460px;
  bottom: -180px; left: -110px;
  background: var(--purple-light);
  opacity: 0.55;
}

/* Medium yellow circle — left mid */
.pd-yellow-md {
  width: 160px; height: 160px;
  top: 37%; left: -28px;
  background: var(--yellow);
  opacity: 0.88;
}

/* Small yellow circle 1 */
.pd-yellow-sm1 {
  width: 82px; height: 82px;
  top: 45%; left: 116px;
  background: var(--yellow);
  opacity: 0.78;
}

/* Small yellow circle 2 */
.pd-yellow-sm2 {
  width: 50px; height: 50px;
  top: 56%; left: 72px;
  background: var(--yellow);
  opacity: 0.65;
}

/* ── PILL ── */
.pd-pill {
  position: absolute;
  width: 142px; height: 44px;
  border-radius: 100px;
  background: var(--yellow);
  opacity: 0.88;
  top: 72px; left: 52px;
}

/* ── DOT CROSS ── */
.pd-dotcross {
  position: absolute;
  width: 420px;
  top: 30px; right: -80px;
  transform: rotate(45deg);
  opacity: 0.55;
}

/* ── MEGAPHONE ── */
.pd-megaphone {
  position: absolute;
  width: 150px;
  bottom: 22px; right: 22px;
  opacity: 0.82;
  transform: scaleX(-1) rotate(-45deg) scale(1.4);
  transform-origin: center center;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .pd-cream-lg  { width: 240px; height: 240px; top: -80px; right: -70px; }
  .pd-purple-lg { width: 300px; height: 300px; bottom: -120px; left: -80px; }
  .pd-yellow-md { width: 100px; height: 100px; left: -18px; }
  .pd-yellow-sm1 { width: 55px; height: 55px; left: 70px; }
  .pd-yellow-sm2 { width: 36px; height: 36px; left: 50px; }
  .pd-pill { width: 100px; height: 34px; left: 36px; top: 52px; }
  .pd-dotcross { width: 220px; right: -50px; top: 20px; }
  .pd-megaphone { width: 100px; bottom: 12px; right: 12px; transform: scaleX(-1) rotate(-45deg) scale(1.4); }
}