/* Spotlight — a glowing round avatar on deep violet, and white offer cards with prices, reviews and a button. For coaches, course creators, freelancers, shops. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--bg: #0f0b24;
	--fg: #fff;
	--muted: #bdb8dc;
	--bio-fg: #d4d0ec;
	--accent: #7c4dff;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Sora', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--max: 480px;

	--btn-bg: rgba(255, 255, 255, .1);
	--btn-fg: #fff;
	--btn-border: 1px solid rgba(255, 255, 255, .2);
	--btn-radius: 18px;
	--btn-pad: 17px 22px;

	--chip-bg: rgba(255, 255, 255, .1);
	--chip-border: 1px solid rgba(255, 255, 255, .22);
	--chip-size: 48px;

	--pop-bg: #19142f;
	--pop-border: rgba(255, 255, 255, .16);

	--card-bg: #fff;
	--card-fg: #15112b;
	--card-muted: #5a5478;
	--card-border: 0 solid transparent;
	--card-border-color: rgba(21, 17, 43, .16);
	--card-radius: 24px;
	--card-shadow: 0 18px 38px -16px rgba(0, 0, 0, .65);
	--card-pad: 16px;
	--card-chip-bg: #efeafd;
	--card-cta-bg: var(--accent);
	--card-cta-fg: var(--accent-fg);
	--card-cta-radius: 14px;
	--card-badge-bg: #ffe08a;
	--card-badge-fg: #4a3200;
	--card-input-bg: #f4f1ff;
}

html, body { background: var(--bg); }
body {
	background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent) 48%, var(--bg)) 0%, transparent 72%) no-repeat, var(--bg);
}

.bg {
	width: 132px;
	height: 132px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 54px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent), 0 18px 60px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.bg::after { display: none; }

.header { margin-top: 26px; gap: 6px; }
.header .title h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.header h2 { font-size: .98rem; font-weight: 500; }
.bio { color: var(--bio-fg); }

.social-media { padding-top: 22px; gap: 12px; }
.social-media > a:hover { background: rgba(255, 255, 255, .22); }

.links { padding-top: 28px; gap: 14px; }
.link { font-weight: 600; }
.link:hover { background: rgba(255, 255, 255, .18); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.links .link:first-child:hover { background: var(--accent); filter: brightness(1.08); }
.link.card .lk-title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.link.card .lk-price { font-family: var(--font-head); }
.subscribe h3 { font-family: var(--font-head); }