:root{
  color-scheme:dark;
  --bg:#18191e;
  --gradient:linear-gradient(180deg,#5facff 0%,#268eff 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Graphik LCG","Inter","Segoe UI",system-ui,-apple-system,sans-serif
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%;overflow:hidden}
body{position:relative;background:var(--bg);color:#fff;font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased}
::selection{background:#268eff66}
:focus-visible{outline:.125rem solid #5facff;outline-offset:.25rem}

.glow{position:fixed;left:50%;bottom:-34vh;width:min(140rem,190vw);height:60vh;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,rgb(140 196 255 / .95) 0%,rgb(38 142 255 / .55) 34%,rgb(18 74 160 / .16) 58%,transparent 74%);filter:blur(84px);animation:glow-in 1.7s var(--ease) both}
@keyframes glow-in{from{opacity:0;translate:-50% 45%;scale:.9}to{opacity:1;translate:-50% 0;scale:1}}

.center{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;text-align:center}

.title{display:inline-flex;align-items:baseline;gap:.8rem;font-weight:600;font-size:clamp(3.25rem,11vw,8rem);line-height:1;letter-spacing:-.03em;animation:in 1s var(--ease) both}
.name{display:inline-block}
.accent{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

.cracked{color:#6b7380;font-size:clamp(.875rem,1.6vw,1.2rem);font-weight:500;letter-spacing:.04em;line-height:1}

.credit{margin-top:1.75rem;font-size:.9375rem;color:#6b7380;letter-spacing:.01em;animation:in 1s var(--ease) .45s both}
.credit a{color:inherit;text-decoration:none;transition:color .32s var(--ease)}
.credit a:hover{color:#9aa3b2}


.action{position:relative;margin-top:2.5rem;display:grid;place-items:center;animation:in 1s var(--ease) .3s both}
.ring{position:absolute;inset:0;border-radius:62rem;border:1px solid rgb(95 172 255 / .6);animation:ripple 3s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6,2.2);opacity:0}}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.75rem;height:3.75rem;padding:0 2.75rem;border-radius:62rem;background:var(--gradient);color:#fff;text-decoration:none;font-weight:600;font-size:1.125rem;box-shadow:0 .5rem 2rem #268eff59;transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.btn svg{width:1.4rem;height:1.4rem}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4s ease-in-out infinite}
@keyframes shine{0%,50%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 .75rem 2.5rem #268eff8c}
.btn:active{transform:scale(.97)}

@keyframes in{from{opacity:0;transform:translateY(1.25rem)}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}