html { background: #03081A; }
body { margin: 0; background: #03081A; color: #FCFCFC; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #FCFCFC; text-decoration: none; }
::selection { background: rgba(29,131,236,.35); }
*:focus-visible { outline: 2px solid #1D83EC; outline-offset: 3px; }

@keyframes sbRise { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sbSweep { 0% { transform: translateX(-140%) skewX(-18deg); } 60%,100% { transform: translateX(260%) skewX(-18deg); } }

.sb-page { position: relative; min-height: 100vh; background: #03081A; }
/* Fixed (not absolute) so the particle field is pinned to the viewport and
   never has to resize/rerender as the page scrolls — on mobile, an
   absolute-positioned canvas tied to the scrollable page height gets
   resized by the browser's dynamic address bar hiding/showing mid-scroll,
   which re-seeds every particle and looks like they "jump". */
.sb-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.sb-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(3,8,26,.6) 100%); }

main { position: relative; z-index: 1; max-width: 500px; margin: 0 auto; padding: 72px 22px 48px; display: flex; flex-direction: column; gap: 40px; }

.sb-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.sb-logo-wrap { position: relative; animation: sbRise .9s cubic-bezier(.2,.7,.2,1) both; }
.sb-logo-glow { position: absolute; inset: -30px; pointer-events: none; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(29,131,236,.16), rgba(29,131,236,0) 70%); }
.sb-logo-frame { position: relative; width: 120px; height: 120px; border-radius: 32px; padding: 1px; background: linear-gradient(150deg, rgba(143,196,251,.35), rgba(255,255,255,.05) 45%, rgba(29,131,236,.28)); box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.sb-logo-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: linear-gradient(160deg, #0A1330, #04091D); }
.sb-logo-inner img { width: 68%; height: 68%; object-fit: contain; display: block; }

h1 { margin: 0; font-size: clamp(46px,14vw,66px); line-height: .96; font-weight: 600; letter-spacing: -.04em; animation: sbRise .95s cubic-bezier(.2,.7,.2,1) .12s both; }
.sb-tagline { margin: 0; max-width: 30ch; font-size: 16px; line-height: 1.65; color: rgba(252,252,252,.6); animation: sbRise .95s cubic-bezier(.2,.7,.2,1) .22s both; }

.sb-links { display: flex; flex-direction: column; gap: 13px; }

.sb-link { position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px; padding: 17px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s; animation: sbRise .8s cubic-bezier(.2,.7,.2,1) both; }
.sb-link:hover { transform: translateY(-3px); border-color: rgba(29,131,236,.4); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.sb-link:nth-of-type(1) { animation-delay: .3s; }
.sb-link:nth-of-type(2) { animation-delay: .38s; }
.sb-link:nth-of-type(3) { animation-delay: .46s; }
.sb-link:nth-of-type(4) { animation-delay: .54s; }

.sb-link .sb-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); flex: none; overflow: hidden; }
.sb-icon img { width: 70%; height: 70%; object-fit: contain; }
.sb-link .sb-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sb-link .sb-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.sb-link .sb-sub { font-size: 12.5px; color: rgba(252,252,252,.44); }
.sb-arrow { flex: none; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; opacity: .5; }
.sb-link:hover .sb-arrow { transform: translateX(4px); opacity: 1; }

.sb-link--discord { padding: 19px 18px; border-color: rgba(29,131,236,.45); background: linear-gradient(140deg, rgba(29,131,236,.14), rgba(29,131,236,.03)); }
.sb-link--discord:hover { border-color: rgba(29,131,236,.75); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(29,131,236,.22); }
.sb-link--discord .sb-sweep { position: absolute; top: 0; bottom: 0; width: 34%; pointer-events: none; background: linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); animation: sbSweep 6s ease-in-out infinite; }
.sb-link--discord .sb-icon { width: 48px; height: 48px; border-radius: 14px; border-color: rgba(29,131,236,.35); background: rgba(29,131,236,.14); }
.sb-link--discord .sb-title { font-size: 16px; }
.sb-link--discord .sb-sub { color: rgba(156,205,250,.8); }

footer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; animation: sbRise .9s cubic-bezier(.2,.7,.2,1) .62s both; }
.sb-rule { width: 56px; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); }
.sb-copy { font-size: 12px; letter-spacing: .06em; color: rgba(252,252,252,.34); }