/* Pop — cream and fresh teal, big brand-coloured app tiles, rounded everything. For salons, shops, creators, kids' brands. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
	--bg: #fbf6e8;
	--fg: #14221f;
	--muted: #5b6a66;
	--bio-fg: #3d4d49;
	--accent: #5fd3c1;
	--accent-fg: #0a2723;
	--accent-glyph: invert(1);
	--font-head: 'Outfit', system-ui, sans-serif;
	--font-body: 'Outfit', system-ui, sans-serif;

	--btn-bg: #14221f;
	--btn-fg: #fff;
	--btn-radius: 18px;
	--btn-pad: 18px 22px;
	--btn-shadow: 0 10px 20px -14px rgba(20, 34, 31, .9);

	--chip-size: 66px;
	--chip-radius: 20px;
	--chip-border: 0 solid transparent;
	--chip-bg: #14221f;

	--glyph-page: invert(1);
	--pop-bg: #fffdf5;
	--pop-fg: #14221f;
	--pop-border: rgba(20, 34, 31, .12);
	--pop-shade: rgba(20, 34, 31, .45);
	--field-bg: #fff;
	--star-filter: invert(1);
	--share-bg: rgba(255, 255, 255, .55);
	--share-fg: #14221f;
	--share-border: 1px solid rgba(255, 255, 255, .8);
}

/* the teal band */
body::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 190px;
	max-width: 760px;
	margin: 0 auto;
	background: var(--accent);
	border-radius: 0 0 44px 44px;
}
body::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 190px;
	max-width: 760px;
	margin: 0 auto;
	border-radius: 0 0 44px 44px;
	background: radial-gradient(120px 120px at 12% 20%, rgba(255, 255, 255, .35), transparent 70%), radial-gradient(160px 160px at 92% 90%, rgba(255, 255, 255, .22), transparent 70%);
}
body > * { position: relative; z-index: 1; }

.bg {
	width: 134px;
	height: 134px;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	margin-top: 70px;
	border-radius: 50%;
	border: 6px solid var(--bg);
	box-shadow: 0 18px 30px -14px rgba(10, 39, 35, .55);
}
.bg > img { border-radius: 50%; }
.bg::after { display: none; }

.header { margin-top: 16px; gap: 4px; }
.header .title h1 { font-size: clamp(1.8rem, 8.5vw, 2.3rem); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.header h2 { font-size: 1.02rem; font-weight: 500; }

.social-media {
	justify-content: center;
	gap: 14px;
	max-width: 372px;
	padding: 24px 24px 0;
}
.social-media > a { box-shadow: 0 12px 20px -12px rgba(20, 34, 31, .55); }
.social-media > a:hover { transform: translateY(-3px) rotate(-3deg); }
/* each platform in its own colour, app-icon style */
.social-media > a:has(> img[alt^='instagram ']) { background: linear-gradient(45deg, #fdb94f, #fa7e1e 28%, #d62976 58%, #962fbf 80%, #4f5bd5); }
.social-media > a:has(> img[alt^='facebook '])  { background: #1877f2; }
.social-media > a:has(> img[alt^='tiktok '])    { background: #0f0f10; box-shadow: 3px 3px 0 #25f4ee, -3px -3px 0 #fe2c55; }
.social-media > a:has(> img[alt^='whatsapp '])  { background: #25d366; }
.social-media > a:has(> img[alt^='phone '])     { background: #34c759; }
.social-media > a:has(> img[alt^='email '])     { background: #ea4335; }
.social-media > a:has(> img[alt^='youtube '])   { background: #ff0000; }
.social-media > a:has(> img[alt^='linkedin '])  { background: #0a66c2; }
.social-media > a:has(> img[alt^='twitter '])   { background: #0f0f10; }
.social-media > a:has(> img[alt^='telegram '])  { background: #26a5e4; }
.social-media > a:has(> img[alt^='pinterest ']) { background: #e60023; }
.social-media > a:has(> img[alt^='spotify '])   { background: #1db954; }
.social-media > a:has(> img[alt^='snapchat '])  { background: #fffc00; }
.social-media > a:has(> img[alt^='snapchat ']) > img { filter: invert(1); }
.social-media > a:has(> img[alt^='fax '])       { background: #6b7280; }
.social-media > a:has(> img[alt^='other '])     { background: var(--fg); }

.links { padding-top: 26px; gap: 12px; }
.link { font-size: 1.05rem; font-weight: 700; }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--accent) 90%, #000); }
.link:hover { transform: translateY(-2px); }
#rating-form { border-radius: 24px; }
#rating-form h4 { font-weight: 800; }