:root {
  color-scheme: dark;
  --white: #f4f4f2;
  --muted: rgba(244, 244, 242, .62);
  --faint: rgba(244, 244, 242, .36);
  --glass: rgba(16, 17, 20, .58);
  --line: rgba(255, 255, 255, .17);
  --pink: #ff76ad;
  --blue: #45a9ff;
  --gold: #f3c45a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: #08090b url('./assets/bg.jpg') center / cover fixed no-repeat;
  font-family: 'DM Sans', sans-serif;
  cursor: url('./assets/cursor.png') 4 4, auto;
}
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(0, 0, 0, .48), rgba(7, 8, 11, .8)); pointer-events: none; }
a, button { cursor: url('./assets/cursor.png') 4 4, pointer; }
a { color: inherit; }

.page-shell { scroll-snap-type: y mandatory; }
.panel { position: relative; display: grid; min-height: 100svh; padding: 7vh 20px 10vh; place-items: center; scroll-snap-align: start; }
.glass-card { border: 1px solid rgba(255, 255, 255, .28); background: linear-gradient(135deg, rgba(28, 29, 34, .22), rgba(8, 9, 12, .14)); box-shadow: 0 28px 90px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .16); }
.profile-card { width: min(100%, 650px); padding: 38px 44px 28px; border-radius: 28px; animation: rise .75s both cubic-bezier(.2, .8, .2, 1); }
.profile-heading { display: flex; align-items: center; gap: 20px; }
.profile-picture { width: 92px; height: 92px; flex: 0 0 auto; border: 2px solid rgba(255, 255, 255, .66); border-radius: 50%; object-fit: cover; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); }
.identity h1 { margin: 0 0 11px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(32px, 7vw, 48px); line-height: .9; letter-spacing: -.05em; }
.badges { display: flex; gap: 8px; align-items: center; }
.badge { position: relative; display: grid; width: 25px; height: 25px; place-items: center; transition: filter .2s ease, transform .2s ease; }
.badge img { width: 100%; height: 100%; object-fit: contain; }
.badge-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 3; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 11, 14, .94); color: var(--white); font-size: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease; }
.badge:hover { transform: translateY(-2px) scale(1.08); }.badge:hover .badge-tooltip { opacity: 1; transform: translate(-50%, 0); }
.badge--founder img { filter: brightness(0) saturate(100%) invert(83%) sepia(83%) saturate(547%) hue-rotate(339deg) brightness(101%) contrast(91%) drop-shadow(0 0 7px rgba(243, 196, 90, .38)); }
.badge--verified img { filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(1417%) hue-rotate(183deg) brightness(100%) contrast(101%) drop-shadow(0 0 7px rgba(69, 169, 255, .35)); }
.badge--vip img { filter: brightness(0) saturate(100%) invert(67%) sepia(82%) saturate(1504%) hue-rotate(296deg) brightness(105%) contrast(102%) drop-shadow(0 0 7px rgba(255, 118, 173, .35)); }
.verified-check { position: absolute; color: white; font: 700 11px/1 'DM Sans', sans-serif; }
.bio { margin: 30px 0 24px; color: var(--muted); font-size: 15px; letter-spacing: -.01em; }
.social-links { display: grid; gap: 10px; }
.social-link, .server-card { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .06); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.social-link { min-height: 54px; padding: 0 16px; border-radius: 14px; color: var(--muted); font-size: 14px; }.social-link img { width: 19px; height: 19px; margin-right: 13px; filter: invert(1); opacity: .8; }.social-link:hover, .server-card:hover { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .13); box-shadow: 0 8px 25px rgba(0, 0, 0, .17); transform: translateY(-2px); }.link-arrow { margin-left: auto; color: var(--faint); font-size: 17px; }
.scroll-cue { display: block; margin-top: 30px; color: var(--faint); font-size: 10px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }.scroll-cue b { margin-left: 6px; color: var(--white); font-size: 15px; font-weight: 400; }

.panel--details { padding-top: 9vh; padding-bottom: 12vh; }.details-card { display: grid; grid-template-columns: 1fr 250px; gap: clamp(34px, 8vw, 100px); width: min(100%, 860px); padding: clamp(30px, 6vw, 65px); border-radius: 30px; align-items: end; animation: rise .75s .1s both cubic-bezier(.2, .8, .2, 1); }.section-kicker { margin: 0 0 18px; color: var(--pink); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }.details-copy h2 { margin: 0 0 32px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(42px, 7vw, 74px); line-height: .92; letter-spacing: -.07em; }.details-copy h2 em { color: rgba(244, 244, 242, .5); font-style: normal; }
.skills-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; margin: 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; counter-reset: skill; }.skills-list li { counter-increment: skill; }.skills-list li::before { content: counter(skill, decimal-leading-zero) '  '; color: var(--pink); font-size: 10px; }
.server-column { align-self: end; }.server-note { position: relative; margin: 0 0 16px; padding-left: 32px; color: var(--muted); font-size: 12px; line-height: 1.45; }.server-note-arrow { position: absolute; top: 0; left: 3px; color: var(--pink); font-size: 24px; line-height: 1; transform: rotate(12deg); }.server-card { min-height: 104px; padding: 17px; border-radius: 18px; color: var(--white); font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; }.server-card img { width: 63px; height: 63px; margin-right: 15px; border-radius: 14px; object-fit: cover; }
.site-footer { padding: 0 20px 28px; color: var(--faint); font-size: 11px; text-align: center; }.site-footer a { text-decoration: none; }.site-footer a:hover { color: var(--white); }
.music-toggle { position: fixed; right: 22px; bottom: 20px; z-index: 4; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(8, 9, 12, .52); color: var(--white); font-size: 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) { .panel { padding-top: 8vh; }.details-card { grid-template-columns: 1fr; gap: 34px; }.server-card { max-width: 310px; }.site-footer { margin-top: -1px; } }
@media (max-width: 430px) { .profile-card { padding: 30px 22px 24px; }.profile-picture { width: 76px; height: 76px; }.profile-heading { gap: 15px; }.skills-list { grid-template-columns: 1fr; }.details-card { padding: 30px 24px; }.music-toggle { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }