/* ============================================================================
   Landing page: the same look, less work for the browser.

   The light behind the page was a full-screen layer blurred by 60px with five
   shapes drifting inside it, so the browser blurred the whole screen again on
   every frame for as long as the page was open. The shapes are soft gradients
   already: drop the blur, soften the gradients a touch, and let each shape move
   as a finished picture on its own layer.
   ========================================================================== */
.mesh{filter:none}
.mesh i{will-change:transform;backface-visibility:hidden}
.m-rose  {background:radial-gradient(circle,rgba(233,142,180,.72),rgba(233,142,180,.34) 34%,rgba(233,142,180,.10) 55%,rgba(233,142,180,0) 72%)}
.m-blue  {background:radial-gradient(circle,rgba(120,185,255,.68),rgba(120,185,255,.32) 34%,rgba(120,185,255,.09) 55%,rgba(120,185,255,0) 72%)}
.m-gold  {background:radial-gradient(circle,rgba(255,206,130,.60),rgba(255,206,130,.28) 34%,rgba(255,206,130,.08) 55%,rgba(255,206,130,0) 72%)}
.m-teal  {background:radial-gradient(circle,rgba(120,229,216,.54),rgba(120,229,216,.25) 34%,rgba(120,229,216,.07) 55%,rgba(120,229,216,0) 72%)}
.m-purple{background:radial-gradient(circle,rgba(180,160,255,.56),rgba(180,160,255,.26) 34%,rgba(180,160,255,.08) 55%,rgba(180,160,255,0) 72%)}

/* The floating cards are 90% white: the frosted blur behind them hardly shows,
   but it was recalculated on every frame of their float. */
.float-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)}