:root {
  --bg-deep:       #06080f;
  --bg-card:       #141722;
  --bg-section:    #1c2033;
  --bg-hover:      #222644;
  --border:        #252a42;
  --border-accent: #5865f2;

  --text-1:   #f2f3f5;
  --text-2:   #b5bac1;
  --text-3:   #72767d;
  --label:    #8b92f0;

  --blurple:  #5865f2;
  --blurple2: #7983f5;
  --blurple3: #3c45a5;
  --gn-blue:  #003189;
  --gn-gold:  #c8a84b;
  --dark-red: #811724;
  --red:    #EF0003;
  --wip:      #f0a732;

  --banner-h:    148px;
  --avatar-size: 100px;
  --card-w:      500px;
  --radius:      16px;

  --font: 'Outfit', sans-serif;
  --mono: 'Space Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  font-family: var(--font);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px);
  animation: orbDrift 18s ease-in-out infinite alternate;
}
.orb-1 { width:660px;height:660px; background:radial-gradient(circle,#5865f2,transparent 70%); opacity:.13; top:-160px;left:-130px; animation-duration:20s; }
.orb-2 { width:500px;height:500px; background:radial-gradient(circle,#003189,transparent 70%); opacity:.17; bottom:-100px;right:-90px; animation-duration:15s;animation-direction:alternate-reverse; }
.orb-3 { width:340px;height:340px; background:radial-gradient(circle,#7983f5,transparent 70%); opacity:.08; top:40%;left:52%; animation-duration:22s; }
.orb-4 { width:220px;height:220px; background:radial-gradient(circle,#c8a84b,transparent 70%); opacity:.06; top:18%;right:12%; animation-duration:12s;animation-direction:alternate-reverse; }

@keyframes orbDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(28px,20px) scale(1.07); }
  100% { transform: translate(-20px,38px) scale(0.95); }
}

.bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(88,101,242,.16) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .55;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 20%, transparent 100%);
}

.bg-noise {
  position: absolute; inset: 0;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

.stage {
  position: relative; z-index: 1;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.profile-card {
  width: var(--card-w);
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow:
    0 32px 80px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.055);
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateY(32px) scale(.97);
  animation: cardIn .6s cubic-bezier(.34,1.56,.64,1) .12s forwards;
}
@keyframes cardIn { to { opacity:1; transform:translateY(0) scale(1); } }

.banner { position:relative; height:var(--banner-h); overflow:hidden; background:#0d1020; border-radius: var(--radius) var(--radius) 0 0; }
.banner-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.banner-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 45%, rgba(20,23,34,.8) 100%);
}

.profile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 0 18px;
  margin-top: calc(-1 * var(--avatar-size) / 2 - 10px);
  position: relative; z-index: 2;
}

.avatar-wrap {
  position: relative;
  width: calc(var(--avatar-size) + 12px);
  height: calc(var(--avatar-size) + 12px);
  flex-shrink: 0;
}
.avatar-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--blurple) 0deg, var(--dark-red) 120deg, var(--blurple2) 240deg, var(--blurple) 360deg);
  animation: spinRing 8s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.avatar {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--bg-card);
  z-index: 1;
  transition: transform .3s ease;
}
.avatar:hover { transform: scale(1.06); cursor: pointer; }
.status-dot {
  position: absolute; bottom: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--bg-card);
  z-index: 2;
  box-shadow: 0 0 12px rgba(223, 49, 49, 0.5);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }

.header-actions {
  display: flex; gap: 9px; align-items: center;
  padding-top: calc(var(--avatar-size) / 2 + 6px);
}
.btn-action {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  text-decoration: none; border: 1px solid transparent;
  transition: all .2s ease; cursor: pointer; white-space: nowrap;
}
.btn-discord {
  background: rgba(88,101,242,.13);
  border-color: rgba(88,101,242,.38);
  color: var(--blurple2);
}
.btn-discord:hover {
  background: rgba(88,101,242,.26);
  border-color: var(--blurple);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(88,101,242,.35);
}
.btn-x {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--text-2);
}
.btn-x:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  transform: translateY(-2px);
}

.profile-body { padding: 14px 20px 22px; }

.username-block { margin-top: 10px; }
.username {
  font-size: 26px; font-weight: 900;
  color: var(--text-1); letter-spacing: -.5px; line-height: 1.1;
}
.user-handle {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--text-3); margin-top: 3px;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 15%, var(--border) 85%, transparent);
  margin: 14px 0;
}

.section-label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--label);
  margin-bottom: 10px;
}

.about-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 9px; font-size: 13.5px; font-weight: 500;
  background: var(--bg-section); border: 1px solid var(--border);
  color: var(--text-2); transition: all .2s ease;
}
.pill:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.pill-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  stroke: currentColor;
}

.interests-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}
.interest-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 6px;
  background: var(--bg-section); border: 1px solid var(--border);
  border-radius: 11px;
  transition: all .22s ease;
  opacity: 0;
  animation: chipIn .4s ease forwards;
}
.interest-chip[data-delay="0"] { animation-delay:.5s }
.interest-chip[data-delay="1"] { animation-delay:.62s }
.interest-chip[data-delay="2"] { animation-delay:.74s }
.interest-chip[data-delay="3"] { animation-delay:.86s }
.interest-chip[data-delay="4"] { animation-delay:.98s }
@keyframes chipIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.interest-chip:hover {
  border-color: var(--blurple);
  background: rgba(88,101,242,.1);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(88,101,242,.22);
}
.chip-wide {
  grid-column: span 4;
  flex-direction: row; justify-content: center; gap: 10px;
}
.chip-icon {
  width: 24px; height: 24px; flex-shrink: 0;
  stroke: var(--blurple2);
  transition: stroke .2s;
}
.interest-chip:hover .chip-icon { stroke: #fff; }
.chip-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-2); text-align: center;
}
.chip-wide .chip-label { font-size: 12.5px; }

.projects-list { display: flex; flex-direction: column; gap: 9px; }
.project-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px;
  background: var(--bg-section); border: 1px solid var(--border);
  border-radius: 11px;
  transition: all .22s ease;
  opacity: 0;
  animation: chipIn .4s ease 1.1s forwards;
}
.project-item:hover {
  border-color: var(--blurple);
  background: rgba(88,101,242,.08);
  transform: translateX(4px);
}
.project-info { display: flex; align-items: center; gap: 12px; }
.project-icon-wrap {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.25);
  display: flex; align-items: center; justify-content: center;
}
.project-icon-wrap svg { stroke: var(--blurple2); }
.project-text { display: flex; flex-direction: column; gap: 3px; }
.project-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.project-desc  { font-size: 11.5px; color: var(--text-3); line-height: 1.4; max-width: 220px; }

.project-badge {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  background: rgba(240,167,50,.1);
  border: 1px solid rgba(240,167,50,.32);
  color: var(--wip);
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wip);
  box-shadow: 0 0 7px rgba(240,167,50,.65);
  animation: pulse 2s ease-in-out infinite;
}

.member-since {
  display: flex; align-items: center; gap: 7px;
}
.member-since svg { stroke: var(--text-3); flex-shrink: 0; }
.member-since .section-label { margin: 0; }
.member-date {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--text-1);
}

.floating-particles { position:fixed; inset:0; pointer-events:none; z-index:0; }
.particle {
  position: absolute; border-radius: 50%; opacity: 0;
  animation: floatUp var(--dur,9s) var(--delay,0s) linear infinite;
}
@keyframes floatUp {
  0%  { opacity:0; transform:translateY(0) scale(0); }
  10% { opacity:.28; transform:translateY(-5px) scale(1); }
  90% { opacity:.1; transform:translateY(var(--t,-130px)) scale(.8); }
  100%{ opacity:0; transform:translateY(var(--t,-140px)) scale(0); }
}

::-webkit-scrollbar { display: none; }

@media (max-width: 540px) {
  :root { --card-w: 96vw; --avatar-size: 82px; --banner-h: 120px; }
  .interests-grid { grid-template-columns: repeat(2,1fr); }
  .chip-wide { grid-column: span 2; }
  .project-desc { max-width: 150px; }
}