/* Sfiniti spectral backdrops: a canvas behind hero content plus a caption of the certified values it draws. */
.spectral-host{position:relative;isolation:isolate}
canvas.spectral-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;animation:spectral-in 1.6s .3s ease forwards;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%)}
canvas.spectral-bg.full{-webkit-mask-image:none;mask-image:none}
@keyframes spectral-in{to{opacity:1}}
.spectral-host>*:not(canvas):not(.spectral-caption){position:relative;z-index:2}
.spectral-caption{position:absolute;right:28px;bottom:18px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:3px;max-width:min(430px,90%);padding:10px 14px;border-radius:10px;background:rgba(8,9,12,.72);backdrop-filter:blur(6px);border:1px solid rgba(45,52,65,.6);
  font-family:"JetBrains Mono",ui-monospace,monospace;text-align:right;pointer-events:none;opacity:0;animation:spectral-in 1.2s 1.1s ease forwards}
.spectral-caption .spectral-t{font-size:10.5px;letter-spacing:.06em;color:#8a929d}
.spectral-caption .spectral-v{font-size:14px;color:#f0ad44;letter-spacing:.01em}
.spectral-caption .spectral-s{font-size:10px;color:#565d68}
.spectral-caption.top{top:86px;bottom:auto}
.spectral-caption.narrow{max-width:372px;right:20px}.spectral-caption.narrow .spectral-v{font-size:13px}
@media(max-width:760px){.spectral-caption,.spectral-caption.top{display:none}canvas.spectral-bg{opacity:.38!important;-webkit-mask-image:none;mask-image:none}}
@media(prefers-reduced-motion:reduce){canvas.spectral-bg,.spectral-caption{animation:none;opacity:1}}