/* ISP64 Link Hub — frontend */
.isp64-lh {
	--lh-p: #BE1FDC;
	--lh-o: #FF5A00;
	--lh-y: #FF9F03;
	--lh-b: #0D70FF;
	--lh-ink: #000;
	--lh-text: #14101a;
	--lh-muted: #5d5866;
	--lh-line: #e7e3ec;
	--lh-card: #fff;
	--lh-ease: cubic-bezier(.2, .9, .25, 1);
	--lh-spring: cubic-bezier(.34, 1.56, .64, 1);
	width: 100%;
	padding: 32px 16px 48px;
	color: var(--lh-text);
	line-height: 1.4;
}
.isp64-lh *,
.isp64-lh *::before,
.isp64-lh *::after { box-sizing: border-box; }
.isp64-lh a { text-decoration: none !important; }
.isp64-lh--font { font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.isp64-lh__inner {
	max-width: var(--lh-max, 560px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------- Avatar / logo ---------- */
.isp64-lh__avatar {
	position: relative;
	width: 112px;
	height: 112px;
	margin-bottom: 18px;
	display: grid;
	place-items: center;
}
.isp64-lh__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(var(--lh-o), var(--lh-y), var(--lh-b), var(--lh-p), var(--lh-o));
	animation: isp64Spin 9s linear infinite;
}
.isp64-lh__img {
	position: relative;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border-radius: 50%;
	overflow: hidden;
	background: var(--lh-logo-bg, #000);
	border: 3px solid #fff;
	display: grid;
	place-items: center;
}
.isp64-lh__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	max-width: none !important;
}

.isp64-lh--logo-rounded .isp64-lh__ring,
.isp64-lh--logo-rounded .isp64-lh__img { border-radius: 30%; }

.isp64-lh--logo-wide .isp64-lh__avatar { width: auto; height: auto; max-width: 100%; }
.isp64-lh--logo-wide .isp64-lh__ring { display: none; }
.isp64-lh--logo-wide .isp64-lh__img {
	width: auto;
	height: auto;
	border-radius: 16px;
	border: 0;
	padding: 6px 10px;
}
.isp64-lh--logo-wide .isp64-lh__img img {
	width: auto;
	height: auto;
	max-height: 96px;
	max-width: min(360px, 100%) !important;
	object-fit: contain;
}

.isp64-lh--retro:not(.isp64-lh--logo-wide) .isp64-lh__img { border-color: var(--lh-ink); }

/* ---------- Name + badge ---------- */
.isp64-lh__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: clamp(26px, 5vw, 32px);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--lh-text);
}
.isp64-lh__badge { width: .72em; height: .72em; flex: none; }

.isp64-lh__stripes {
	display: flex;
	gap: 4px;
	margin: 12px 0 10px;
}
.isp64-lh__stripes i {
	display: block;
	width: 22px;
	height: 5px;
	border-radius: 3px;
	transform-origin: left center;
}
.isp64-lh__stripes i:nth-child(1) { background: var(--lh-o); }
.isp64-lh__stripes i:nth-child(2) { background: var(--lh-y); }
.isp64-lh__stripes i:nth-child(3) { background: var(--lh-b); }

.isp64-lh__tagline {
	margin: 0 0 22px;
	max-width: 42ch;
	font-size: 15.5px;
	color: var(--lh-muted);
}

/* ---------- Social icons ---------- */
.isp64-lh__socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 30px;
}
.isp64-lh__social {
	--c: #333;
	--fg: #fff;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 19px;
	color: var(--c) !important;
	background: color-mix(in srgb, var(--c) 12%, #fff);
	border: 2px solid color-mix(in srgb, var(--c) 28%, #fff);
	transition: transform .35s var(--lh-spring), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
}
.isp64-lh__social:hover,
.isp64-lh__social:focus-visible {
	background: var(--c);
	color: var(--fg) !important;
	border-color: var(--c);
	transform: translateY(-4px) rotate(-8deg);
}
.isp64-lh__social i { transition: transform .35s var(--lh-spring); }
.isp64-lh__social:hover i { transform: scale(1.12); }

.isp64-lh--retro .isp64-lh__social {
	border-color: var(--lh-ink);
	box-shadow: 3px 3px 0 var(--lh-ink);
}
.isp64-lh--retro .isp64-lh__social:hover,
.isp64-lh--retro .isp64-lh__social:focus-visible {
	border-color: var(--lh-ink);
	box-shadow: 5px 6px 0 var(--lh-ink);
}

/* ---------- Link cards ---------- */
.isp64-lh__links {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.isp64-lh__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px 52px 16px 16px;
	text-align: left;
	border-radius: 16px;
	background: var(--lh-card);
	color: var(--lh-text) !important;
	border: 1.5px solid var(--lh-line);
	overflow: hidden;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: transform .3s var(--lh-ease), box-shadow .3s var(--lh-ease), border-color .2s, background-color .2s;
}
.isp64-lh__icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-size: 19px;
	color: var(--lh-p);
	background: color-mix(in srgb, var(--lh-p) 10%, #fff);
	transition: transform .4s var(--lh-spring), background-color .2s, color .2s;
}
.isp64-lh__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.isp64-lh__title { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.isp64-lh__sub { font-size: 13.5px; color: var(--lh-muted); }
.isp64-lh__arrow {
	position: absolute;
	right: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: var(--lh-muted);
	transition: transform .3s var(--lh-spring), color .2s;
}
.isp64-lh__arrow svg { width: 100%; height: 100%; display: block; }

/* soft */
.isp64-lh--soft .isp64-lh__link:hover,
.isp64-lh--soft .isp64-lh__link:focus-visible {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--lh-p) 45%, #fff);
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--lh-p) 55%, transparent);
}

/* retro — black outline + hard offset shadow, like the logo lettering */
.isp64-lh--retro .isp64-lh__link {
	border: 2px solid var(--lh-ink);
	box-shadow: 4px 4px 0 var(--lh-ink);
}
.isp64-lh--retro .isp64-lh__icon { border: 2px solid var(--lh-ink); }
.isp64-lh--retro .isp64-lh__link:hover,
.isp64-lh--retro .isp64-lh__link:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--lh-ink);
}
.isp64-lh--retro .isp64-lh__link:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--lh-ink);
	transition-duration: .08s;
}

.isp64-lh__link:hover .isp64-lh__icon { transform: rotate(-8deg) scale(1.08); background: var(--lh-p); color: #fff; }
.isp64-lh__link:hover .isp64-lh__arrow { transform: translate(3px, -3px); color: var(--lh-p); }

/* featured / highlighted */
.isp64-lh__link.is-featured {
	background: var(--lh-p);
	color: #fff !important;
	border-color: var(--lh-p);
}
.isp64-lh__link.is-featured .isp64-lh__sub { color: rgba(255, 255, 255, .82); }
.isp64-lh__link.is-featured .isp64-lh__arrow { color: #fff; }
.isp64-lh__link.is-featured .isp64-lh__icon { background: #fff; color: var(--lh-p); }
.isp64-lh__link.is-featured:hover .isp64-lh__icon { background: var(--lh-y); color: var(--lh-ink); }
.isp64-lh__link.is-featured:hover .isp64-lh__arrow { color: var(--lh-y); }

.isp64-lh--retro .isp64-lh__link.is-featured {
	border-color: var(--lh-ink);
	box-shadow: 4px 4px 0 var(--lh-o), 8px 8px 0 var(--lh-b);
}
.isp64-lh--retro .isp64-lh__link.is-featured:hover,
.isp64-lh--retro .isp64-lh__link.is-featured:focus-visible {
	box-shadow: 5px 5px 0 var(--lh-o), 10px 10px 0 var(--lh-b);
}
.isp64-lh--retro .isp64-lh__link.is-featured:active { box-shadow: 1px 1px 0 var(--lh-o), 2px 2px 0 var(--lh-b); }

/* shine sweep on the highlighted card */
.isp64-lh__link.is-featured::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-18deg);
	animation: isp64Shine 4.5s var(--lh-ease) 1.6s infinite;
	pointer-events: none;
}

/* ripple */
.isp64-lh__ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: color-mix(in srgb, var(--lh-p) 25%, transparent);
	animation: isp64Ripple .6s ease-out forwards;
	pointer-events: none;
	z-index: -1;
}
.is-featured .isp64-lh__ripple { background: rgba(255, 255, 255, .35); }

/* focus */
.isp64-lh a:focus-visible { outline: 3px solid var(--lh-b); outline-offset: 3px; }

/* ---------- Entrance (only when JS is on + animations enabled) ---------- */
.isp64-lh.lh-js .lh-anim { opacity: 0; }
.isp64-lh.lh-js .lh-anim.is-in { animation: isp64Up .7s var(--lh-ease) calc(var(--i, 0) * 70ms) both; }
.isp64-lh.lh-js .isp64-lh__social.is-in { animation-name: isp64Pop; animation-timing-function: var(--lh-spring); }
.isp64-lh.lh-js .isp64-lh__avatar.is-in { animation-name: isp64Drop; animation-timing-function: var(--lh-spring); }
.isp64-lh.lh-js .isp64-lh__stripes.is-in i { animation: isp64Grow .6s var(--lh-ease) both; }
.isp64-lh.lh-js .isp64-lh__stripes.is-in i:nth-child(1) { animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.isp64-lh.lh-js .isp64-lh__stripes.is-in i:nth-child(2) { animation-delay: calc(var(--i, 0) * 70ms + 160ms); }
.isp64-lh.lh-js .isp64-lh__stripes.is-in i:nth-child(3) { animation-delay: calc(var(--i, 0) * 70ms + 240ms); }
.isp64-lh.lh-js .lh-anim.is-done { animation: none; opacity: 1; }

.isp64-lh[data-anim="0"] .isp64-lh__ring,
.isp64-lh[data-anim="0"] .isp64-lh__link.is-featured::after { animation: none; }
.isp64-lh[data-anim="0"] .isp64-lh__link.is-featured::after { display: none; }

@keyframes isp64Spin { to { transform: rotate(360deg); } }
@keyframes isp64Up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes isp64Pop { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes isp64Drop { from { opacity: 0; transform: translateY(-16px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes isp64Grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes isp64Shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes isp64Ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.isp64-lh { padding: 24px 12px 40px; }
	.isp64-lh__avatar { width: 96px; height: 96px; }
	.isp64-lh__link { gap: 12px; padding: 14px 44px 14px 12px; }
	.isp64-lh__icon { width: 42px; height: 42px; font-size: 17px; }
	.isp64-lh__title { font-size: 15.5px; }
	.isp64-lh__arrow { right: 14px; }
	.isp64-lh__social { width: 42px; height: 42px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.isp64-lh *,
	.isp64-lh *::after { animation: none !important; transition-duration: .01ms !important; }
	.isp64-lh.lh-js .lh-anim { opacity: 1; }
	.isp64-lh__link.is-featured::after { display: none; }
}