html {
  scroll-behavior: smooth;
}

body {
  background-color: #fbf9f8;
  background-image:
    radial-gradient(circle at top right, rgba(255, 177, 197, 0.15), transparent 40%),
    radial-gradient(circle at bottom left, rgba(227, 0, 113, 0.05), transparent 40%);
  background-attachment: fixed;
}

.top-fade {
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 205, 223, 0.34), transparent 24%),
    radial-gradient(circle at 86% 54%, rgba(255, 224, 234, 0.48), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(251, 249, 248, 0.96) 100%);
}

.section-rule {
  background: linear-gradient(90deg, transparent, rgba(141, 111, 118, 0.18), transparent);
}

.hero-phone-shadow {
  filter: drop-shadow(0 30px 60px rgba(84, 48, 62, 0.16));
}

.soft-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.54));
  backdrop-filter: blur(18px);
}

.dark-orbit {
  background:
    radial-gradient(circle at 70% 40%, rgba(255, 65, 145, 0.18), transparent 20%),
    linear-gradient(135deg, #181618 0%, #1b1c1f 55%, #241820 100%);
}

body.modal-open {
  overflow: hidden;
}

.modal-overlay.is-open {
  display: flex;
}