:root {
--bg: #050507;
--card: rgba(255, 255, 255, 0.07);
--accent: #00c4ff;
--text: #f5f5f5;
--muted: #cfd6e3;
--gradient: linear-gradient(120deg, #0a1c2e, #113f5a 55%, #050507);
}

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

body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}

.hero {
position: relative;
min-height: 70vh;
background-image: var(--gradient);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 1.5rem;
}

.hero .overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(5,5,7,0.4) 0%, rgba(5,5,7,0.9) 100%);
}

.hero-content {
position: relative;
text-align: center;
max-width: 640px;
}

.badge {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
padding: 0.35rem 1rem;
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}

.hero h1 {
font-family: 'Oswald', sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin: 1rem 0 0.25rem;
letter-spacing: 0.05em;
}

.subtitle {
font-size: 1.1rem;
color: var(--muted);
margin-bottom: 2rem;
}

.cta-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}

.btn {
border: none;
padding: 0.9rem 1.8rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn.primary {
background: var(--accent);
color: #05121c;
box-shadow: 0 10px 40px rgba(0, 196, 255, 0.2);
}

.btn.ghost {
border: 1px solid rgba(255,255,255,0.3);
color: var(--text);
}

.btn:hover {
transform: translateY(-3px);
}

.intro {
padding: 3rem 1.5rem 4rem;
max-width: 960px;
margin: 0 auto;
}

.artist-card {
background: var(--card);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 2rem;
display: grid;
grid-template-columns: 100px 1fr;
gap: 1.5rem;
align-items: center;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
}

.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: #0f1725;
border: 3px solid rgba(255,255,255,0.2);
}

.links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}

.links a {
text-decoration: none;
color: var(--text);
padding: 0.85rem 1.2rem;
border-radius: 14px;
background: var(--card);
border: 1px solid rgba(255,255,255,0.05);
text-align: center;
transition: background 0.2s ease, transform 0.2s ease;
}

.links a:hover {
background: rgba(0, 196, 255, 0.12);
transform: translateY(-2px);
}

footer {
text-align: center;
padding: 2rem 1rem;
border-top: 1px solid rgba(255,255,255,0.08);
color: var(--muted);
font-size: 0.9rem;
}

@media (max-width: 600px) {
.artist-card {
grid-template-columns: 1fr;
text-align: center;
}

.avatar {
margin: 0 auto;
}
}