/* Fedrable Background Variant A — "Sliced orb" (warm ivory canvas) */

:root {
  --bg-canvas: #fafaf8;
  --bg-canvas-hsl: 40 20% 98%;
  --bg-cobalt: #2563eb;
  --bg-cobalt-deep: #1d4ed8;
  --background: var(--bg-canvas-hsl);
  --secondary: 40 16% 96%;
  --muted: 40 12% 95%;
  --accent: 40 14% 94%;
}

html {
  background-color: var(--bg-canvas) !important;
}

body {
  background-color: var(--bg-canvas) !important;
  overflow-x: hidden;
}

#root {
  background-color: transparent !important;
  position: relative;
  isolation: isolate;
}

.min-h-screen.bg-white,
.min-h-screen.bg-background,
.min-h-screen.page-gradient-bg,
.page-gradient-bg,
.hero-gradient-bg,
footer[style*="linear-gradient"],
section[style*="linear-gradient"],
div[style*="linear-gradient"] {
  background: var(--bg-canvas) !important;
  background-color: var(--bg-canvas) !important;
  background-image: none !important;
}

#root .min-h-screen > section:first-of-type,
#root .min-h-screen section.page-gradient-bg {
  position: relative !important;
  isolation: isolate;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#root .min-h-screen > section:first-of-type::before,
#root .min-h-screen section.page-gradient-bg::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -18%;
  width: min(72vw, 920px);
  height: min(70vh, 760px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 58% 46%, rgba(37, 99, 235, 0.92) 0%, rgba(29, 78, 216, 0.62) 34%, rgba(29, 78, 216, 0.08) 62%, transparent 74%);
  filter: blur(78px);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 78%);
  mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 78%);
}

#root .min-h-screen > section:first-of-type::after,
#root .min-h-screen section.page-gradient-bg::after {
  content: "";
  position: absolute;
  top: 4%;
  right: -8%;
  width: min(58vw, 760px);
  height: min(74vh, 780px);
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 46px,
    rgba(250, 250, 248, 0.98) 46px,
    rgba(250, 250, 248, 0.98) 68px,
    transparent 68px,
    transparent 118px
  );
  filter: blur(10px);
  opacity: 0.94;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 36%, transparent 72%);
  mask-image: linear-gradient(to left, #000 0%, #000 36%, transparent 72%);
}

footer {
  position: relative;
  isolation: isolate;
}

footer::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: min(42vw, 520px);
  height: min(34vh, 320px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, transparent 68%);
  filter: blur(64px);
}

@media (max-width: 899px) {
  #root .min-h-screen > section:first-of-type::before,
  #root .min-h-screen section.page-gradient-bg::before {
    top: auto;
    bottom: -8%;
    right: -28%;
    width: 88vw;
    height: 46vh;
    filter: blur(58px);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
    mask-image: linear-gradient(to top, #000 0%, transparent 72%);
  }

  #root .min-h-screen > section:first-of-type::after,
  #root .min-h-screen section.page-gradient-bg::after {
    display: none;
  }
}