:where(*, *::before, *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--apxsc-bg: #FFFFFF;
	--apxsc-surface: #F4F5FE;
	--apxsc-ink: #222529;
	--apxsc-accent: #018CC9;
	--apxsc-muted: #777777;

	--apxsc-radius-sm: 6px;
	--apxsc-radius-md: 12px;
	--apxsc-radius-pill: 999px;

	--apxsc-space-xs: 8px;
	--apxsc-space-sm: 16px;
	--apxsc-space-md: 24px;
	--apxsc-space-lg: 48px;

	--apxsc-font-heading: 'Lexend', 'Segoe UI', system-ui, sans-serif;
	--apxsc-font-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;

	--apxsc-max-width: 480px;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.apxsc-body {
	font-family: var(--apxsc-font-body);
	color: var(--apxsc-ink);
	background-color: var(--apxsc-bg);
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
	line-height: 1.6;
	min-height: 100vh;
}

.apxsc-card {
	max-width: var(--apxsc-max-width);
	margin-inline: auto;
	background: var(--apxsc-bg);
	min-height: 100vh;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

/* Header / avatar overlap ---------------------------------------------- */

.apxsc-header {
	position: relative;
	aspect-ratio: 16 / 8;
	background: linear-gradient(180deg, var(--apxsc-surface), var(--apxsc-bg));
}

.apxsc-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apxsc-avatar-wrap {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: -56px;
}

.apxsc-avatar {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	border: 4px solid var(--apxsc-bg);
	object-fit: cover;
	background: var(--apxsc-surface);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Identity block --------------------------------------------------------- */

.apxsc-identity {
	text-align: center;
	padding: var(--apxsc-space-sm) var(--apxsc-space-md) 0;
}

.apxsc-name {
	font-family: var(--apxsc-font-heading);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	color: var(--apxsc-ink);
}

.apxsc-job-title {
	margin-top: 4px;
	font-size: 14px;
	color: var(--apxsc-muted);
}

.apxsc-bio {
	margin-top: var(--apxsc-space-xs);
	font-size: 14px;
	color: var(--apxsc-ink);
	max-width: 60ch;
	margin-inline: auto;
}

/* Section rhythm ---------------------------------------------------------- */

.apxsc-section {
	padding: var(--apxsc-space-md);
}

.apxsc-section + .apxsc-section {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.apxsc-section--surface {
	background: var(--apxsc-surface);
}

.apxsc-section-title {
	font-family: var(--apxsc-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--apxsc-muted);
	margin-bottom: var(--apxsc-space-sm);
}

/* Social icons ------------------------------------------------------------ */

.apxsc-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--apxsc-space-sm);
}

.apxsc-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--apxsc-radius-pill);
	background: var(--apxsc-surface);
	color: var(--apxsc-accent);
	text-decoration: none;
}

.apxsc-social-link svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Buttons ------------------------------------------------------------------ */

.apxsc-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--apxsc-space-xs);
}

.apxsc-button {
	display: block;
	text-align: center;
	padding: 14px var(--apxsc-space-md);
	background: var(--apxsc-accent);
	color: #FFFFFF;
	font-family: var(--apxsc-font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border-radius: var(--apxsc-radius-pill);
}

.apxsc-button--square {
	border-radius: var(--apxsc-radius-sm);
}

.apxsc-button--rounded {
	border-radius: var(--apxsc-radius-md);
}

/* Gallery -------------------------------------------------------------- */

.apxsc-gallery {
	display: flex;
	gap: var(--apxsc-space-xs);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}

.apxsc-gallery img {
	scroll-snap-align: start;
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: var(--apxsc-radius-md);
	flex: 0 0 auto;
}

/* Video / map ------------------------------------------------------------ */

.apxsc-media-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--apxsc-radius-md);
	overflow: hidden;
	background: var(--apxsc-surface);
}

.apxsc-media-frame iframe,
.apxsc-media-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.apxsc-address {
	font-size: 14px;
	color: var(--apxsc-ink);
	margin-bottom: var(--apxsc-space-sm);
}

/* Footer -------------------------------------------------------------- */

.apxsc-footer {
	text-align: center;
	padding: var(--apxsc-space-md);
}

.apxsc-footer img {
	width: 100%;
	border-radius: var(--apxsc-radius-md);
	margin-bottom: var(--apxsc-space-sm);
}

.apxsc-watermark {
	font-size: 12px;
	color: var(--apxsc-muted);
	text-decoration: none;
}

.apxsc-watermark strong {
	color: var(--apxsc-accent);
}

/* Reveal-on-load, degrades to visible ------------------------------------ */

.apxsc-reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

html.apxsc-js .apxsc-reveal {
	opacity: 0;
}

.apxsc-reveal.apxsc-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.apxsc-reveal {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

[dir='rtl'] .apxsc-social-link,
[dir='rtl'] .apxsc-buttons {
	direction: rtl;
}