@import url('https://fonts.googleapis.com/css2?family=Syne:wght@800&family=Sora:wght@300;400;600;700&display=swap');

*{font-family:'Sora', sans-serif}
.display{font-family:'Syne', sans-serif; font-weight:800; letter-spacing:-0.04em; line-height:0.9}
.heading{font-family:'Sora', sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.05}
.marquee{animation: marquee 22s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.outline{ -webkit-text-stroke:1px rgba(244, 241, 255,0.14); color:transparent}
.noise:before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.clip-diagonal{clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%)}