:root {
  color: #f6f0fb;
  background: #0a0410;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; }
button, a { font: inherit; }
button { cursor: pointer; }

.landing {
  --scene-x: 0px;
  --scene-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --spot-x: 50%;
  --spot-y: 34%;
  --press-scale: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  overflow: hidden;
  place-items: center;
  padding: 38px 20px;
  background: #050609;
  touch-action: manipulation;
}

.landing::before {
  position: absolute;
  z-index: -4;
  inset: 0;
  content: "";
  background: url("/community-assets/assets/prime-baila.webp") center / cover no-repeat;
  filter: saturate(.78) contrast(1.09) brightness(.72);
  transform: scale(1.055) translate(var(--scene-x), var(--scene-y));
  transition: transform 420ms cubic-bezier(.23, 1, .32, 1);
}

.landing::after {
  position: absolute;
  z-index: -3;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(2,4,7,.88), rgba(3,7,9,.51) 48%, rgba(2,4,7,.82)), radial-gradient(circle at 50% 45%, rgba(126, 255, 244, .12), transparent 34%), linear-gradient(180deg, rgba(4,7,8,.25), rgba(3,4,7,.82));
}

.aurora {
  position: absolute;
  z-index: -2;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .34;
  pointer-events: none;
}
.aurora-one { top: -230px; left: -180px; background: #32d8df; }
.aurora-two { right: -190px; bottom: -220px; background: #6179f8; }
.grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .23;
  background-image: linear-gradient(rgba(197,237,244,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(197,237,244,.075) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.profile {
  position: relative;
  width: min(100%, 485px);
  overflow: hidden;
  border: 1px solid rgba(190, 239, 244, .36);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(8, 18, 24, .88), rgba(4, 8, 13, .92));
  box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(220,255,255,.12);
  text-align: center;
  backdrop-filter: blur(14px);
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--press-scale));
  transform-style: preserve-3d;
  transition: transform 240ms cubic-bezier(.23, 1, .32, 1), box-shadow 240ms cubic-bezier(.23, 1, .32, 1), border-color 240ms ease;
}
.profile::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(128deg, rgba(238,255,255,.12), transparent 26%);
}
.profile::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(197,255,255,.17), transparent 29%);
  mix-blend-mode: screen;
  opacity: .82;
}
.profile > * { position: relative; z-index: 1; }
.profile.is-pressing { --press-scale: .987; border-color: rgba(229,255,255,.72); box-shadow: 0 20px 56px rgba(0,0,0,.72), 0 0 38px rgba(100,228,236,.18), inset 0 1px 0 rgba(220,255,255,.16); }
.profile-topline {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(188,239,244,.16);
  color: #accad0;
  font: 8px "IBM Plex Mono", monospace;
  letter-spacing: .13em;
}
.profile-topline span:first-child { display: flex; align-items: center; gap: 6px; color: #baf4f2; }
.profile-topline i, .status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #74fff0;
  box-shadow: 0 0 12px #74fff0;
}

.mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 29px auto 17px;
  border: 1px solid rgba(181, 239, 242, .76);
  border-radius: 30px;
  background: linear-gradient(140deg, #164c58, #07151c 68%);
  box-shadow: 0 0 0 7px rgba(87, 225, 238, .1), 0 15px 35px rgba(0,0,0,.42);
  transform: rotate(-7deg);
}
.mark::before { position: absolute; inset: 8px; border: 1px solid rgba(222,255,255,.3); border-radius: 22px; content: ""; }
.mark div {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(1,7,10,.45);
  color: #e6ffff;
  font-size: 32px;
  font-weight: 700;
  transform: rotate(7deg);
}
.mark i { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border: 3px solid #071015; border-radius: 50%; background: #74fff0; box-shadow: 0 0 16px #74fff0; }

.intro { padding: 0 32px; }
.eyebrow { color: #b9e5e8; font: 8px "IBM Plex Mono", monospace; letter-spacing: .14em; }
h1 { margin: 10px 0 9px; color: #f2ffff; font-size: clamp(39px, 9vw, 53px); font-weight: 700; letter-spacing: -.09em; line-height: .92; }
h1 em { color: #85f8ef; font-style: normal; text-shadow: 0 0 24px rgba(133,248,239,.36); }
.intro p { max-width: 320px; margin: 0 auto; color: #bfd1d3; font-size: 13px; line-height: 1.55; }

.links { display: grid; gap: 11px; padding: 27px 24px 24px; text-align: left; }
.social-link {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(208,244,245,.27);
  border-radius: 12px;
  background: rgba(4,11,16,.66);
  color: inherit;
  text-decoration: none;
  transform: translateZ(18px);
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), border-color 160ms, background-color 160ms, box-shadow 160ms;
}
.social-link::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(113,252,241,.22), rgba(120,135,255,.14)); transform: scaleX(0); transform-origin: left; }
@media (hover: hover) { .social-link:hover { border-color: #99fbf4; background: rgba(7,23,29,.84); box-shadow: 0 9px 28px rgba(0,0,0,.27), 0 0 20px rgba(103,231,236,.13); transform: translate3d(4px,-2px,24px); } }
.social-link.is-holding { transform: translate3d(1px, 1px, 12px) scale(.985); border-color: #e9ffff; }
.social-link.is-holding::before { animation: link-charge 950ms linear forwards; }
.social-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: none; border-radius: 11px; }
.social-icon svg { width: 22px; height: 22px; fill: currentColor; }
.discord .social-icon { color: #f1f2ff; background: linear-gradient(145deg, #6271d8, #313a86); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.whatsapp .social-icon { color: #e1fff0; background: linear-gradient(145deg, #39b97d, #176b4c); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.social-copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
.social-copy strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.social-copy small { overflow: hidden; color: #a7bcc0; font: 8px "IBM Plex Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.social-link b { color: #9ffff4; font-size: 19px; font-weight: 400; }
.social-link:active { transform: translate3d(1px, 1px, 12px) scale(.975); }
@keyframes link-charge { to { transform: scaleX(1); } }

.status { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 24px; color: #b6d6d9; font: 8px "IBM Plex Mono", monospace; letter-spacing: .1em; }
footer { padding: 14px; border-top: 1px solid rgba(208,244,245,.16); color: #9ebfc2; font: 8px "IBM Plex Mono", monospace; letter-spacing: .08em; }
footer span { margin: 0 5px; color: #78eee7; }
.hint { position: absolute; bottom: 12px; color: #b5d0d2; font: 8px "IBM Plex Mono", monospace; letter-spacing: .06em; }
.cursor-glow { position: fixed; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(112, 247, 244, .16), transparent 66%); filter: blur(5px); pointer-events: none; transform: translate3d(-50%, -50%, 0); opacity: 0; transition: opacity 180ms ease; }
.landing.has-pointer .cursor-glow { opacity: 1; }

@media (max-width: 560px) {
  .landing { padding: 20px 15px 38px; }
  .profile { border-radius: 21px; }
  .profile-topline { padding: 13px 15px; }
  .mark { width: 78px; height: 78px; margin-top: 25px; margin-bottom: 15px; }
  .intro { padding: 0 20px; }
  .intro p { font-size: 12px; }
  .links { padding: 24px 15px 21px; }
  .social-link { gap: 10px; padding: 10px; }
  .social-icon { width: 34px; height: 34px; }
  .social-copy strong { font-size: 11px; }
  .status { margin-bottom: 20px; font-size: 7px; }
  footer { padding: 13px 8px; font-size: 7px; }
}

@media (pointer: coarse) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .landing::before { transform: scale(1.04); } .profile { transform: none; } }