:root {
  color-scheme: light;
  --ink: #27113d;
  --muted: #6f607c;
  --purple: #8f4de5;
  --deep-purple: #35105f;
  --surface: rgba(255, 255, 255, 0.88);
  --stroke: rgba(58, 20, 93, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #f5effb; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 4%, rgba(143, 77, 229, 0.18), transparent 32rem),
    radial-gradient(circle at 92% 78%, rgba(70, 20, 126, 0.12), transparent 28rem),
    linear-gradient(155deg, #fbf8ff 0%, #f4ecfb 62%, #ece0f8 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: linear-gradient(rgba(64,23,101,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(64,23,101,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.page-shell {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 42px 20px 34px;
}

.profile { text-align: center; }

.brand-hero {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0 auto 23px;
}

.brand-mark {
  width: 94px;
  height: 94px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(72, 25, 118, .2));
}

.brand-logo {
  width: min(300px, 72vw);
  height: auto;
  margin-top: 5px;
}

.eyebrow {
  margin: 0 0 9px;
  color: #6f2cac;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.bio {
  max-width: 470px;
  margin: 14px auto 29px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.links {
  display: grid;
  gap: 13px;
}

.link-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(64, 27, 96, .08);
  text-align: left;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.link-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, var(--purple));
}

.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(69, 24, 111, .28);
  background: #fff;
  outline: none;
}

.link-card:focus-visible { box-shadow: 0 0 0 3px rgba(130,67,191,.32); }

.mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  color: white;
  background: color-mix(in srgb, var(--accent, var(--purple)) 78%, #100619);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.mark svg { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark.mark-image { border: 1px solid rgba(69,24,111,.12); background: #fff; }
.mark.mark-image img { width: 36px; height: 36px; object-fit: contain; }
.mark.institutional-mark img { width: 40px; height: 40px; }
.instagram .mark { background: radial-gradient(circle at 32% 100%, #ffd600 0 20%, #ff7a00 34%, #ff0169 58%, #d300c5 78%, #7638fa 100%); }
.spotify .mark { background: #1ed760; color: #09150d; }
.youtube .mark { background: #ff0033; }

.link-copy { min-width: 0; }
.link-copy strong, .link-copy small { display: block; }
.link-copy strong { font-size: 1rem; line-height: 1.25; }
.link-copy small { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.25; }
.arrow { color: #785c8f; font-size: 1.3rem; }

.whatsapp { --accent: #25d366; }
.website { --accent: #6f35a8; }
.instagram { --accent: #d847a7; }
.spotify { --accent: #1ed760; }
.youtube { --accent: #ff3347; }
.endogest { --accent: #9c62ec; }
.unigoyazes { --accent: #4a2878; }

.section-label {
  margin: 13px 0 0;
  color: #6c5681;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}

footer {
  padding-top: 18px;
  margin-top: 28px;
  border-top: 1px solid rgba(58,20,93,.1);
  color: #857291;
  font-size: .76rem;
  line-height: 1.55;
}

footer p { margin: 0; }

@media (max-width: 420px) {
  .page-shell { padding: 30px 14px 28px; }
  .brand-mark { width: 82px; height: 82px; }
  .link-card { grid-template-columns: 43px 1fr 24px; gap: 11px; border-radius: 18px; padding: 11px 13px; }
  .mark { width: 43px; height: 43px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}