/* Aurora — an animated colour mesh behind frosted-glass rows with icon badges. For modern brands, creators, venues. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #07080f;
	--fg: #f4f5ff;
	--muted: #a8abc8;
	--bio-fg: #c9cbe2;
	--accent: #7455f5;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Manrope', system-ui, sans-serif;
	--font-body: 'Manrope', system-ui, sans-serif;

	--btn-bg: rgba(255, 255, 255, .07);
	--btn-fg: var(--fg);
	--btn-border: 1px solid rgba(255, 255, 255, .13);
	--btn-radius: 20px;
	--btn-pad: 12px 16px 12px 12px;
	--btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 30px -22px rgba(0, 0, 0, .9);

	--chip-bg: rgba(255, 255, 255, .08);
	--chip-border: 1px solid rgba(255, 255, 255, .14);
	--chip-size: 50px;

	--row-ico: "";
	--row-ico-bg: rgba(255, 255, 255, .1);
	--pop-bg: #12131f;
	--pop-border: rgba(255, 255, 255, .14);
	--share-bg: rgba(255, 255, 255, .1);
}

html { background: var(--bg); }
body { background: transparent; }
@keyframes aurora { to { background-position: 100% 60%, 0% 20%, 30% 100%; } }
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55vmax 55vmax at 8% 0%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 62%),
		radial-gradient(50vmax 50vmax at 96% 38%, rgba(34, 211, 238, .30), transparent 62%),
		radial-gradient(58vmax 58vmax at 38% 108%, rgba(255, 95, 162, .30), transparent 62%);
	background-size: 140% 140%;
	background-repeat: no-repeat;
	animation: aurora 26s ease-in-out infinite alternate;
}
/* fine grain, so the gradient doesn't band */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	opacity: .07;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

.bg {
	width: 150px;
	height: 150px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 60px;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient(from 210deg, var(--accent), #22d3ee, #ff5fa2, var(--accent));
	box-shadow: 0 0 70px 4px color-mix(in srgb, var(--accent) 45%, transparent);
}
.bg > img { border-radius: 50%; border: 3px solid var(--bg); }
.bg::after { display: none; }

.header { margin-top: 24px; gap: 6px; }
.header .title h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.header h2 { font-size: 1rem; font-weight: 500; }

.social-media { padding-top: 22px; }
.social-media > a { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.social-media > a:hover { background: rgba(255, 255, 255, .16); }

.links { padding-top: 26px; gap: 12px; }
.link {
	justify-content: flex-start;
	text-align: left;
	font-size: 1rem;
	font-weight: 700;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.link::after { content: '→'; margin-left: auto; padding-left: 12px; color: var(--muted); font-weight: 500; transition: transform .15s, color .15s; }
.link:hover { background: rgba(255, 255, 255, .12); }
.link:hover::after { transform: translateX(4px); color: var(--fg); }
.save-contact {
	--row-ico-bg: rgba(255, 255, 255, .22);
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #000), color-mix(in srgb, var(--accent) 50%, #000));
	border-color: transparent;
	color: var(--accent-fg);
}
.save-contact::after { color: var(--accent-fg); opacity: .85; }
.save-contact:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #000), color-mix(in srgb, var(--accent) 50%, #000)); filter: brightness(1.12); }