@font-face {
  font-family: "Anybody";
  src: url("fonts/Anybody-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}

* { box-sizing: border-box; }
:root { font-family: Arial, Helvetica, sans-serif; color: #fff; background: #080808; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
.light-field { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: #080808; }
.light { position: absolute; width: 115vmax; height: 115vmax; left: calc(50% - 57.5vmax); top: calc(50% - 57.5vmax); will-change: transform; }
.light-one { background: conic-gradient(from 20deg, transparent 0deg 35deg, #8ace00 80deg, transparent 135deg 205deg, #b2ff00 255deg, transparent 315deg); animation: turn 16s linear infinite; }
.light-two { background: radial-gradient(ellipse at 28% 36%, #ff5a00 0%, #ff5a00aa 12%, transparent 33%), radial-gradient(ellipse at 75% 70%, #ff7800 0%, transparent 30%); animation: sweep 11s ease-in-out infinite alternate; }
.light-three { background: radial-gradient(ellipse at 50% 15%, #ff007f 0%, transparent 27%), radial-gradient(ellipse at 45% 88%, #d9006c 0%, transparent 25%); animation: breathe 9s ease-in-out infinite alternate; }
.diffuser { position: absolute; inset: 0; backdrop-filter: blur(38px); background: radial-gradient(ellipse at center, #000c 0%, #000a 45%, #0006 100%); }
main { min-width: 0; width: 100%; padding: 70px 24px; text-align: center; }
section { margin-bottom: 10px; }
h1 { text-transform: uppercase; font-family: "Anybody", Arial, sans-serif; margin: 0; font-size: clamp(42px, 7.8vw, 120px); line-height: 1.05; font-weight: 700; font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: -0.04em; }
h2 { text-transform: uppercase; margin: 0 0 6px; font-size: inherit; font-weight: 600; }
p { margin: 0; }
.roles { margin-top: 24px; font-size: clamp(24px, 2.7vw, 34px); line-height: 1.2; letter-spacing: 0.015em; }
.available { margin: 37px auto 0; max-width: 650px; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; letter-spacing: 0.015em; }
a { display: inline-block; margin-top: 35px; color: inherit; font-size: clamp(16px, 1.5vw, 21px); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
::selection { background: #b2ff00; color: #000; }
ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
li { line-height: 1; }
@keyframes sweep { from { transform: translate(-12%, 8%) rotate(-25deg); } to { transform: translate(12%, -8%) rotate(65deg); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes breathe { from { transform: rotate(-25deg) scale(0.85); opacity: 0.5; } to { transform: rotate(35deg) scale(1.25); opacity: 1; } }
@media (max-width: 600px) {
  main { padding-inline: 25px; }
  h1 { font-size: clamp(32px, 9.5vw, 57px); }
  .roles { max-width: 290px; margin-inline: auto; }
  .available { max-width: 330px; margin-top: 30px; }
  .desktop-break { display: none; }
}
@media (prefers-reduced-motion: reduce) { .light { animation: none; } }
html.is-hidden .light { animation-play-state: paused; }

.background { max-width: 620px; margin: 36px auto 0; display: grid; gap: 21px; font-size: clamp(13px, 1.1vw, 15px); font-weight: 400; line-height: 1.6; text-wrap: balance; }

.background a { display: inline; margin-top: 0; font-size: inherit; }