:root {
  --refono-bg-0: #f7fbff;
  --refono-bg-1: #eef5ff;
  --refono-bg-2: #f9fcff;
  --refono-stripe: rgba(14, 99, 184, 0.08);
  --refono-stripe-soft: rgba(14, 99, 184, 0.04);
}

body.refono-3d-bg {
  background:
    radial-gradient(120% 85% at 85% -5%, #dcecff 0%, transparent 56%),
    radial-gradient(120% 80% at -10% 95%, #edf4ff 0%, transparent 60%),
    linear-gradient(130deg, var(--refono-bg-0) 0%, var(--refono-bg-1) 46%, var(--refono-bg-2) 100%);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

body.refono-3d-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(-26deg,
      transparent 0,
      transparent 28px,
      var(--refono-stripe) 28px,
      var(--refono-stripe) 30px,
      transparent 30px,
      transparent 90px),
    repeating-linear-gradient(24deg,
      transparent 0,
      transparent 72px,
      var(--refono-stripe-soft) 72px,
      var(--refono-stripe-soft) 74px,
      transparent 74px,
      transparent 128px);
  opacity: 0.55;
}

body.refono-3d-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(14, 99, 184, 0.09), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(76, 135, 201, 0.09), transparent 24%);
  filter: blur(2px);
}

body.refono-3d-bg > header,
body.refono-3d-bg > main,
body.refono-3d-bg > footer {
  position: relative;
  z-index: 1;
}