:root {
  --volume-violet: 166, 126, 232;
  --volume-blue: 77, 173, 232;
  --volume-rose: 224, 126, 216;
  --volume-green: 89, 218, 170;
  --volume-x: 68%;
  --volume-y: 18%;
  --volume-dx: 0px;
  --volume-dy: 0px;
  --volume-scroll: 0px;
  --volume-grid-x: 0px;
  --volume-grid-y: 22%;
  --volume-a-x: 0px;
  --volume-a-y: 0px;
  --volume-b-x: 0px;
  --volume-b-y: 0px;
  --volume-c-x: 0px;
  --volume-c-y: 0px;
  --volume-halo-x: 0px;
  --volume-beam-y: 0px;
}

html { background:#09090d; }
body.volume-ready {
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:transparent!important;
}
body.volume-ready>.volumetric-scene { z-index:0; }
body.volume-ready>:not(.volumetric-scene):not(script) { position:relative;z-index:1; }

.volumetric-scene {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(1100px 680px at var(--volume-x) var(--volume-y),rgba(var(--volume-violet),.16),transparent 67%),
    linear-gradient(145deg,#09090d 0%,#101019 47%,#090b10 100%);
  transform:translateZ(0);
  contain:strict;
}
.volumetric-scene::before {
  content:"";
  position:absolute;
  inset:-20%;
  opacity:.22;
  background-image:
    linear-gradient(rgba(225,210,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(225,210,255,.07) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 45%,transparent 88%);
  transform:perspective(900px) rotateX(64deg) scale(1.45) translate3d(var(--volume-grid-x),var(--volume-grid-y),-80px);
  transform-origin:50% 100%;
}
.volumetric-scene::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.24;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.volume-blob,.volume-halo,.volume-beam { position:absolute;will-change:transform; }
.volume-blob { border-radius:50%;filter:blur(3px);mix-blend-mode:screen; }
.volume-blob-a {
  width:min(58vw,860px);aspect-ratio:1;right:-13vw;top:-31vw;
  background:radial-gradient(circle at 35% 38%,rgba(232,218,255,.26),rgba(var(--volume-violet),.16) 28%,rgba(78,44,132,.05) 58%,transparent 72%);
  box-shadow:inset 70px -80px 150px rgba(19,9,31,.72),0 80px 220px rgba(var(--volume-violet),.13);
  transform:translate3d(var(--volume-a-x),var(--volume-a-y),0);
}
.volume-blob-b {
  width:min(42vw,620px);aspect-ratio:1;left:-18vw;bottom:-24vw;
  background:radial-gradient(circle at 62% 35%,rgba(172,223,255,.2),rgba(var(--volume-blue),.1) 35%,rgba(25,70,108,.04) 62%,transparent 74%);
  box-shadow:inset -55px 35px 120px rgba(4,16,29,.7),0 0 180px rgba(var(--volume-blue),.08);
  transform:translate3d(var(--volume-b-x),var(--volume-b-y),0);
}
.volume-blob-c {
  width:min(28vw,420px);aspect-ratio:1;left:38%;top:42%;opacity:.32;
  background:radial-gradient(circle at 42% 34%,rgba(255,221,250,.2),rgba(var(--volume-rose),.09) 38%,transparent 72%);
  filter:blur(12px);
  transform:translate3d(var(--volume-c-x),var(--volume-c-y),0);
}
.volume-halo {
  width:min(70vw,1080px);height:min(42vw,650px);right:-15vw;top:10vh;border-radius:50%;
  border:1px solid rgba(207,180,255,.11);
  box-shadow:0 0 0 42px rgba(194,160,255,.018),0 0 0 98px rgba(117,211,255,.012),inset 0 0 100px rgba(166,126,232,.025);
  transform:perspective(1100px) rotateX(68deg) rotateZ(-17deg) translate3d(var(--volume-halo-x),0,0);
}
.volume-beam {
  width:74vw;height:18vw;right:-18vw;top:28%;opacity:.24;
  background:linear-gradient(90deg,transparent,rgba(182,151,244,.16),rgba(115,211,255,.08),transparent);
  filter:blur(34px);
  transform:rotate(-16deg) translate3d(0,var(--volume-beam-y),0);
}
.volume-vignette { position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(4,4,8,.28) 76%,rgba(4,4,8,.68) 100%); }

/* Touch screens keep the atmosphere without extra full-screen GPU layers. */
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .volumetric-scene::before,.volumetric-scene::after,.volume-blob-c,.volume-beam { display:none; }
  .volume-blob,.volume-halo { will-change:auto;filter:none;mix-blend-mode:normal; }
}

body.volume-home .volumetric-scene { --volume-intensity:1;background:radial-gradient(1000px 660px at var(--volume-x) var(--volume-y),rgba(var(--volume-violet),.2),transparent 68%),linear-gradient(145deg,#09080d,#121019 50%,#090b10); }
body.volume-pricing .volume-blob-a { top:-24vw;right:-7vw; }
body.volume-pricing .volume-blob-c { opacity:.44;left:48%;top:55%; }
body.volume-workspace .volumetric-scene,body.volume-agency .volumetric-scene { background:radial-gradient(960px 620px at var(--volume-x) var(--volume-y),rgba(var(--volume-violet),.12),transparent 68%),linear-gradient(145deg,#0a0a0e,#111019 52%,#090b10); }
body.volume-workspace .volume-blob-c,body.volume-agency .volume-blob-c { opacity:.18; }
body.volume-legal .volumetric-scene { background:radial-gradient(760px 520px at 75% 8%,rgba(var(--volume-violet),.11),transparent 70%),#0b0b10; }
body.volume-legal .volume-blob-b,body.volume-legal .volume-blob-c,body.volume-legal .volume-halo { display:none; }

@media(max-width:760px){
  .volumetric-scene::before{background-size:48px 48px;opacity:.14;transform:perspective(800px) rotateX(67deg) scale(1.75) translateY(28%)}
  .volume-blob-a{width:105vw;right:-48vw;top:-45vw}.volume-blob-b{width:90vw;left:-55vw;bottom:-30vw}.volume-blob-c{display:none}.volume-halo{width:125vw;height:76vw;right:-67vw;top:20vh}.volume-beam{width:120vw;height:36vw;right:-30vw}
}
@media(prefers-reduced-motion:reduce){
  .volumetric-scene::before,.volume-blob,.volume-halo,.volume-beam{transform:none!important;will-change:auto}
}