/* One page-sized canvas. Never apply this gradient to a section or fixed layer. */
html[data-continuous-background] {
  min-height: 100%;
  background: #09001f;
  color-scheme: dark;
}
html[data-continuous-background] body {
  --bg: #09001f;
  --text: #f7f5ff;
  --text2: #d5cde9;
  --text-2: #d5cde9;
  --muted: #bbb1d0;
  min-height: 100vh;
  color: #f7f5ff;
  /* Size the soft spots by viewport width, not the full document height:
     farthest-corner circles wash out on long pages and hide the color pools. */
  background:
    radial-gradient(circle clamp(600px, 75vw, 1200px) at var(--purple-spot-x, 8%) var(--purple-spot-y, 380px),
      rgba(112, 39, 184, var(--purple-spot-strength, .38)) 0%, rgba(112, 39, 184, .24) 22%,
      rgba(112, 39, 184, .09) 48%, rgba(112, 39, 184, .02) 72%,
      rgba(112, 39, 184, 0) 100%),
    radial-gradient(circle clamp(700px, 85vw, 1400px) at var(--blue-spot-x, 95%) var(--blue-spot-y, 42%),
      rgba(45, 76, 165, var(--blue-spot-strength, .42)) 0%, rgba(45, 76, 165, .26) 24%,
      rgba(45, 76, 165, .10) 50%, rgba(45, 76, 165, .025) 74%,
      rgba(45, 76, 165, 0) 100%),
    radial-gradient(circle clamp(650px, 80vw, 1300px) at 12% 78%,
      rgba(93, 35, 155, .32) 0%, rgba(93, 35, 155, .20) 24%,
      rgba(93, 35, 155, .07) 50%, rgba(93, 35, 155, .015) 74%,
      rgba(93, 35, 155, 0) 100%),
    linear-gradient(120deg, #09001f 0%, #100725 38%, #141d3c 72%, #1c2a4b 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: scroll !important;
}
/* The ID in :is matches the existing hero specificity; the other branches
   cover every section, including nested sections and legacy card sections. */
html[data-continuous-background] body :is(main, section, footer, #top-section,
  .work-page-wrap, .work-page-container, .page-wrapper, .main-wrapper,
  .site-footer, .cta-inner-v2) {
  background: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--text);
}
/* Remove full-surface artwork, fades, grids and other ambient layers.
   Component icons and the liquid glass button highlights remain intact. */
html[data-continuous-background] body::before,
html[data-continuous-background] body::after,
html[data-continuous-background] body :is(main, section, footer, #top-section)::before,
html[data-continuous-background] body :is(main, section, footer, #top-section)::after {
  content: none !important;
  display: none !important;
}
html[data-continuous-background] body :is(
  #blob-bg, #bg-canvas, #particle-canvas, #top-star-canvas,
  #top-particles-canvas, #trail-canvas, #cursor-glow, .cursor-glow,
  .top-hero-video, .contact-bg-orb, .noise-overlay, .glow-sphere,
  .coffee-hero-band, .coffee-hero-decor, .coffee-liquid
) { display: none !important; }
html[data-continuous-background] body :is(.site-nav, .nav-submenu, .nav-links.nav-open) {
  --nav-glass-fill: rgba(9, 5, 24, .56);
  background:
    linear-gradient(112deg, rgba(255,255,255,.105), rgba(255,255,255,.015) 38%, rgba(191,199,255,.055) 78%, rgba(255,255,255,.09)),
    var(--nav-glass-fill) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  border-color: rgba(230,224,255,.22) !important;
  border-top-color: rgba(255,255,255,.48) !important;
  border-bottom-color: rgba(197,191,234,.14) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 1px 0 1px rgba(255,255,255,.10),
    inset 0 -1px 1px rgba(193,201,255,.09),
    0 4px 8px rgba(3,0,14,.12),
    0 14px 36px rgba(3,0,14,.26);
  color: #fff !important;
}
/* Keep the floating pill's transform and dropdown overflow untouched. */
html[data-continuous-background] body .site-nav {
  transition: box-shadow .25s ease, border-color .25s ease;
}
html[data-continuous-background] body .site-nav.scrolled {
  --nav-glass-fill: rgba(9,5,24,.72);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -1px 1px rgba(193,201,255,.1),
    0 6px 12px rgba(3,0,14,.16), 0 18px 40px rgba(3,0,14,.32);
}
html[data-continuous-background] body :is(.nav-submenu, .nav-links.nav-open) {
  --nav-glass-fill: rgba(9,5,24,.84);
}
html[data-continuous-background] body .site-nav :is(a, button):focus-visible {
  outline: 2px solid #dfc5ff;
  outline-offset: 4px;
}
@media (max-width: 768px) {
  html[data-continuous-background] body .site-nav {
    --nav-glass-fill: rgba(9,5,24,.66);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-continuous-background] body :is(.site-nav, .nav-submenu, .nav-links.nav-open) {
    --nav-glass-fill: #100b21;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-continuous-background] body .site-nav { transition: none; }
}
html[data-continuous-background] body :is(.nav-logo-text, .nav-drop-trigger, .nav-links > li > a, .nav-submenu a) {
  color: #f7f5ff !important;
}

/* Home hero lighting still belongs to the single body background. Position
   both color pools in the opening viewport instead of halfway down the page. */
html[data-continuous-background] body:has(#pre-hero-section) {
  --purple-spot-x: 18%;
  --purple-spot-y: clamp(240px, 38svh, 440px);
  --purple-spot-strength: .56;
  --blue-spot-x: 88%;
  --blue-spot-y: clamp(420px, 70svh, 720px);
  --blue-spot-strength: .58;
}
html[data-continuous-background] #pre-hero-section .pre-hero-title {
  text-shadow: 0 4px 28px rgba(5, 0, 20, .28);
}
html[data-continuous-background] #pre-hero-section .pre-hero-title-accent {
  color: #dfc5ff;
}
html[data-continuous-background] #pre-hero-section .pre-hero-sub {
  color: #e0daef;
}
html[data-continuous-background] body #pre-hero-section .pre-hero-cta {
  --glass-fill: rgba(105, 52, 173, .64);
  color: #fff !important;
  border-color: rgba(226, 205, 255, .5) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 2px rgba(211,183,255,.16),
    0 8px 28px rgba(4,0,18,.3),
    0 0 42px rgba(133,70,210,.18) !important;
}
html[data-continuous-background] #pre-hero-section .pre-hero-slide {
  border-color: rgba(221,207,250,.25);
}