/* Cover — a painted gradient banner, an overlapping avatar, big round actions, soft cards. For professionals and personal brands. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #f1f1f4;
	--fg: #101114;
	--muted: #62646e;
	--bio-fg: #4a4c55;
	--accent: #ff5a1f;
	--accent-fg: #14100d;
	--accent-glyph: invert(1);
	--font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

	--btn-bg: #fff;
	--btn-fg: #101114;
	--btn-radius: 22px;
	--btn-pad: 14px 18px 14px 14px;
	--btn-shadow: 0 1px 0 rgba(16, 17, 20, .05), 0 12px 26px -18px rgba(16, 17, 20, .45);

	--chip-bg: #e7e7ec;
	--chip-border: 0 solid transparent;
	--chip-size: 60px;
	--chip-glyph: invert(1);

	--badge-color: #ff9f1a;
	--glyph-color: #101114;
	--glyph-page: invert(1);
	--pop-bg: #fff;
	--pop-fg: #101114;
	--pop-border: transparent;
	--pop-shade: rgba(16, 17, 20, .5);
	--field-bg: #f1f1f4;
	--star-filter: invert(1);

	--row-ico: "";
	--row-ico-bg: #efeff3;
	--share-bg: rgba(255, 255, 255, .28);
	--share-border: 1px solid rgba(255, 255, 255, .45);

	--g-link: var(--gd-link); --g-pin: var(--gd-pin); --g-phone: var(--gd-phone); --g-chat: var(--gd-chat);
	--g-mail: var(--gd-mail); --g-user: var(--gd-user); --g-arrow: var(--gd-arrow); --g-chev: var(--gd-chev);
}

/* the banner: layered colour fields that follow the accent, with grain */
body::before {
	content: '';
	position: absolute;
	top: 12px; left: 12px; right: 12px;
	height: 190px;
	max-width: 636px;
	margin: 0 auto;
	border-radius: 30px;
	background:
		radial-gradient(130px 110px at 18% 78%, color-mix(in srgb, var(--accent) 90%, #fff) 0, transparent 70%),
		radial-gradient(150px 120px at 82% 26%, #1d4ed8 0, transparent 72%),
		radial-gradient(120px 120px at 52% 112%, color-mix(in srgb, var(--accent) 60%, #7a1d00) 0, transparent 70%),
		radial-gradient(130px 100px at 4% 6%, #0b1b3a 0, transparent 70%),
		linear-gradient(135deg, #0b1b3a, #162c63 55%, #1d4ed8);
}
body::after {
	content: '';
	position: absolute;
	top: 12px; left: 12px; right: 12px;
	height: 190px;
	max-width: 636px;
	margin: 0 auto;
	border-radius: 30px;
	opacity: .22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
.share-btn { position: absolute; top: 28px; right: 28px; }

.bg {
	width: 124px;
	height: 124px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 132px;
	border-radius: 50%;
	border: 5px solid var(--bg);
	box-shadow: 0 14px 28px -14px rgba(16, 17, 20, .55);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 14px; gap: 2px; }
.header .title h1 { font-size: clamp(1.5rem, 7vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; }
.header .title > img { width: 24px; height: 24px; opacity: 1; }
.header h2 { font-size: .98rem; font-weight: 500; }

.social-media { padding-top: 22px; gap: 14px; }
.social-media > a:hover { background: #dcdce3; }

.links { padding-top: 24px; gap: 12px; }
.link { justify-content: flex-start; text-align: left; font-size: 1rem; font-weight: 700; }
.link::after { content: ''; margin-left: auto; width: 22px; height: 22px; background: var(--g-chev) center / 20px no-repeat; opacity: .55; }
.link:hover { transform: translateY(-2px); }
.links .link:first-child { background: #101114; color: #fff; --row-ico-bg: rgba(255, 255, 255, .14); --row-g: var(--gw-link); }
.links .link:first-child::after { background-image: var(--gw-chev); opacity: .8; }
.links .link:first-child[href^='tel:'] { --row-g: var(--gw-phone); }
.links .link:first-child[href*='maps'], .links .link:first-child[href*='goo.gl'], .links .link:first-child[href*='g.co/kgs'] { --row-g: var(--gw-pin); }
.links .link:first-child[href*='wa.me'] { --row-g: var(--gw-chat); }
.links .save-contact:first-child { --row-g: var(--gw-user); }
#rating-form { border-radius: 28px; }
#rating-form h4 { font-weight: 800; }