/* Basis Reset */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:#0b0c10;
  color:#f5f7fa;
  -webkit-font-smoothing: antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}

:root {
  --accent: #061ebf;
  --accent-glow: 20 70 255;
  --radius: 18px;
  --gradient: radial-gradient(circle at 30% 20%, rgba(var(--accent-glow)/0.25), transparent 60%), radial-gradient(circle at 70% 80%, rgba(92 148 255 / 0.18), transparent 70%);
  --surface: #141824cc;
  --border: #ffffff10;
  --shadow: 0 4px 10px -2px rgba(0 0 0 / .5), 0 0 0 1px var(--border), 0 0 22px -6px rgba(var(--accent-glow)/0.35);
  --focus: 0 0 0 3px #ffffff10, 0 0 0 6px rgba(var(--accent-glow)/0.65);
}

body.light {
  background:#f4f6fb;
  color:#1d2228;
  --surface:#ffffffee;
  --border:#00000010;
  --shadow:0 4px 14px -4px rgba(0 0 0 / .2), 0 0 0 1px var(--border);
  --gradient: radial-gradient(circle at 25% 25%, rgba(var(--accent-glow)/0.20), transparent 65%), radial-gradient(circle at 80% 75%, rgba(0 130 255 / 0.15), transparent 70%);
  --focus: 0 0 0 3px #0000000f, 0 0 0 6px rgba(var(--accent-glow)/0.5);
}

.bg-overlay {
  position:fixed;
  inset:0;
  background:var(--gradient);
  pointer-events:none;
  animation: float 16s linear infinite alternate;
  opacity:.85;
}
@keyframes float { from { transform:translateY(-2%);} to { transform:translateY(2%);} }

.card {
  width:100%;
  max-width:520px;
  background:var(--surface);
  backdrop-filter: blur(32px) saturate(170%);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:2.2rem 1.75rem 1.5rem;
  position:relative;
  overflow:hidden;
  margin: auto;
}

.artist { text-align:center; }
.artist__avatar { border-radius:50%; box-shadow:0 0 0 4px #ffffff08,0 6px 12px -4px rgba(0 0 0 /.55); }
.artist__name { margin:.9rem 0 .4rem; font-size: clamp(1.9rem, 4vw, 2.35rem); letter-spacing:.5px; }
.artist__tagline { margin:0; font-weight:500; opacity:.78; }

/* Intro section */
.intro { margin:1.4rem 0 0; font-size:.92rem; line-height:1.4; opacity:.92; }
.intro p { margin:0 0 .9rem; }
.services { list-style:disc; padding-left:1.2rem; margin:.25rem 0 1.1rem; display:grid; gap:.3rem; font-size:.9rem; }
.services li { opacity:.9; }


.links { margin-top:1.6rem; }
.link-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; }

.link-item a {
  --bg: linear-gradient(92deg,#061ebf,#ff8a34 55%,#ffc300);
  --bg-fallback:#061ebf;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  text-decoration:none;
  background: var(--bg);
  color:#fff;
  font-weight:600;
  padding:1rem 1.25rem;
  border-radius: calc(var(--radius) - 6px);
  position:relative;
  isolation:isolate;
  box-shadow: 0 4px 10px -3px rgba(var(--accent-glow)/0.6),0 2px 4px -2px rgba(0 0 0/.4);
  overflow:hidden;
}
.link-item a::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(255 255 255 / .25),transparent 45%);
  mix-blend-mode:overlay;
  opacity:.55;
  pointer-events:none;
}
.link-item a:focus-visible { outline:none; box-shadow: var(--focus); }
.link-item a:active { transform:translateY(2px); }

.link-item__icon { width:42px; height:42px; display:grid; place-items:center; font-size:1.35rem; background:#ffffff20; border-radius:12px; backdrop-filter: blur(6px) brightness(1.2); }
.link-item__title { font-size:1.05rem; }
.link-item__meta { font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.5px; opacity:.85; }
.link-item__action { font-size:.95rem; opacity:.8; }

.socials { margin:2.2rem 0 1rem; }
.socials__row { display:flex; justify-content:center; flex-wrap:wrap; gap:.85rem; }
.socials__icon { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; background:#ffffff10; color:#fff; text-decoration:none; font-size:1.25rem; position:relative; transition:.35s background, .35s transform, .35s box-shadow; overflow:hidden; }
.socials__icon::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, #ffffff22, transparent 70%); opacity:0; transition:.4s opacity; }
.socials__icon:hover::after, .socials__icon:focus-visible::after { opacity:1; }
.socials__icon:hover, .socials__icon:focus-visible { background:#ffffff22; outline:none; box-shadow:0 4px 12px -4px rgba(0 0 0/.6),0 0 0 1px #ffffff18; }
.socials__icon:active { transform:translateY(2px); }
body.light .socials__icon { background:#00000008; color:#1d2228; }
body.light .socials__icon:hover { background:#00000012; }

/* Watermark */
 .watermark {
  position:fixed;
  bottom:10px;
  right:12px;
  width:110px;
  opacity:.1;
  mix-blend-mode:luminosity;
  filter:grayscale(1) brightness(1.4);
  transition:.35s opacity, .35s filter, .35s transform;
  z-index:2;
  text-decoration:none;
 }
 body.light .watermark { filter:grayscale(1) brightness(.45); mix-blend-mode:multiply; }
 .watermark img { max-width:100%; display:block; }
 .watermark:hover, .watermark:focus-visible { opacity:.28; transform:scale(1.04); outline:none; }
 .watermark:active { transform:scale(.97); }
@media (max-width:600px){
  .watermark { width:78px; opacity:.12; }
}

/* SVG icon sizing */
.socials__icon .icon { width:24px; height:24px; display:block; }
/* Raster icon (Spotify PNG) */
.socials__icon .icon--img { width:24px; height:24px; object-fit:contain; image-rendering:-webkit-optimize-contrast; }

/* Brand base colors + subtle hover brighten */
.socials__icon[data-social="instagram"] { color:inherit; }
.socials__icon[data-social="youtube"] { color:#ff2c2c; }
.socials__icon[data-social="soundcloud"] { color:#ff7700; }
.socials__icon[data-social="mail"] { color:#ffffff; }
/* Keep Spotify PNG; no color rule needed */
.socials__icon[data-social="instagram"]:hover { filter:brightness(1.15) saturate(1.15); }
.socials__icon[data-social="youtube"]:hover { color:#ff4b4b; }
.socials__icon[data-social="soundcloud"]:hover { color:#ff8b26; }
.socials__icon[data-social="mail"]:hover { color:#ffffff; }
body.light .socials__icon[data-social]:hover { filter:brightness(.85); }

.footer { text-align:center; font-size:.75rem; opacity:.75; margin-top:2rem; }
.footer button { background:none; border:none; color:inherit; cursor:pointer; font-size:1rem; margin-left:.35rem; }
.footer button:focus-visible { outline:none; box-shadow: var(--focus); border-radius: 50%; }

.mode-toggle { line-height:1; }

.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

@media (prefers-reduced-motion:no-preference) {
  .link-item a { transition: .4s box-shadow, .4s transform; }
  .link-item a:hover { box-shadow:0 6px 16px -6px rgba(var(--accent-glow)/0.8),0 4px 8px -4px rgba(0 0 0/.45); transform:translateY(-2px); }
}

/* Light mode overrides inside body.light already defined where needed */
body.light .link-item a { color:#fff; }

/* Dark mode specific tweaks */
body:not(.light) .card { border:1px solid #ffffff15; }

/* Small screens */
@media (max-width:480px){
  .card { padding:2rem 1.1rem 1.25rem; }
  .link-item a { padding:.9rem 1rem; }
  .artist__avatar { width:120px; height:120px; }
}