/* MarketAlong Spectrum: shared colour layer (concept, for approval).
   Blue leads. Colour arrives as light behind meaningful content, never as flat boxes.
   Buttons stay MarketAlong blue. Accent text uses darker shades of each hue for readable contrast. */
html,body{overflow-x:clip}
@property --acc{syntax:"<color>";inherits:true;initial-value:#087FFF}
:root{
  --ma-blue:#087FFF;--ma-cyan:#27CBF5;--ma-coral:#FF6B78;--ma-orange:#FF9855;--ma-amber:#FFC65A;--ma-teal:#19BCA9;--ma-rose:#F2668B;
  /* readable text shades of the accents (4.5:1 or better on white) */
  --t-cyan:#0A6F94;--t-coral:#C3364A;--t-amber:#8F5E00;--t-teal:#0A7569;--t-rose:#B8325C;
  --cobalt:#0870E6;--electric:#087FFF;
}
/* the light: soft blurred colour fields with a precise core, faded at the edges */
.spx{position:absolute;pointer-events:none;z-index:-1;filter:blur(64px) saturate(1.08);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.spx i{position:absolute;border-radius:50%;display:block}
@media (prefers-reduced-motion:no-preference){
  .spx i{animation:drift 26s ease-in-out infinite alternate}
  .spx i:nth-child(2){animation-duration:31s;animation-delay:-8s}.spx i:nth-child(3){animation-duration:23s;animation-delay:-4s}.spx i:nth-child(4){animation-duration:35s;animation-delay:-12s}
  @keyframes drift{to{transform:translate(4%,-5%) scale(1.06)}}
}