:root {
	/* Palette */
	--hp-bg-0: #020617;
	--hp-bg-1: #050816;
	--hp-surface: rgba(15, 23, 42, 0.84);
	--hp-surface-alt: rgba(15, 23, 42, 0.96);
	--hp-border: rgba(148, 163, 184, 0.28);
	--hp-border-soft: rgba(148, 163, 184, 0.12);
	--hp-text-main: #e5e9f0;
	--hp-text-subtle: #a5b4cf;
	--hp-accent: #b4befe;
	--hp-accent-soft: rgba(180, 190, 254, 0.18);
	--hp-accent-strong: rgba(180, 190, 254, 0.75);

	/* Shape and shadow for cards */
	--hp-radius-card: 1rem;
	--hp-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.50);
	--hp-shadow-strong: 0 20px 60px rgba(15, 23, 42, 0.70);

	/* Motion */
	--hp-transition-fast: 150ms ease-out;
	--hp-transition-med: 220ms ease-out;

	/* Tag category colours (tuned) */
	--tag-core-bg:     rgba(110, 100, 135, 0.60);
	--tag-core-border: rgba(180, 190, 254, 0.65);
	--tag-core-text:   rgba(240, 245, 255, 1);

	--tag-storage-bg:     rgba(115, 115, 155, 0.60);
	--tag-storage-border: rgba(210, 215, 240, 0.65);
	--tag-storage-text:   rgba(245, 245, 255, 1);

	--tag-network-bg:     rgba(62, 70, 90, 0.60);
	--tag-network-border: rgba(145, 160, 200, 0.65);
	--tag-network-text:   rgba(235, 240, 255, 1);

	--tag-media-bg:     rgba(65, 75, 110, 0.60);
	--tag-media-border: rgba(130, 150, 220, 0.65);
	--tag-media-text:   rgba(235, 240, 255, 1);

	--tag-ui-bg:     rgba(105, 90, 125, 0.60);
	--tag-ui-border: rgba(205, 175, 245, 0.65);
	--tag-ui-text:   rgba(250, 245, 255, 1);

	/* Dark theme hint */
	color-scheme: dark;
}

/* Global background and typography */

html,
body {
	background:
	radial-gradient(circle at 0% 0%, #11111f 0, transparent 55%),
	radial-gradient(circle at 100% 0%, #221433 0, transparent 55%),
	radial-gradient(circle at 50% 100%, #050816 0, #020617 60%) !important;
	color: var(--hp-text-main) !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
	"Segoe UI", sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Main content centring and layout */

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.75rem 1.5rem 2.25rem;
}

/* Core / Media columns spacing */
main > div {
	column-gap: 2.25rem;
}

/* Top bar */

header,
header > div {
	background: linear-gradient(
		to right,
		rgba(15, 23, 42, 0.94),
								rgba(15, 23, 42, 0.88)
	) !important;
	backdrop-filter: blur(18px) saturate(135%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(135%) !important;
	border-bottom: 1px solid var(--hp-border-soft) !important;
}

header small,
header span {
	color: var(--hp-text-subtle) !important;
}

/* Search */

header input[type="search"],
header input[type="text"] {
	background-color: rgba(15, 23, 42, 0.9) !important;
	border-radius: 999px !important;
	border: 1px solid var(--hp-border-soft) !important;
	color: var(--hp-text-main) !important;
}

/* Section headings */

main h2 {
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	color: #e2e8f0 !important;
	margin-bottom: 0.6rem;
	font-size: 1.15rem !important;
	text-transform: none;
}

main h2::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: 0.35rem;
	background: linear-gradient(to right, var(--hp-accent), transparent);
	border-radius: 999px;
	opacity: 0.9;
}

/* Top level section titles such as CORE, MEDIA, NETWORK */

.section-title {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

/* Small pill for the “category word” */

.section-title-label {
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(180, 190, 254, 0.55);
	background: radial-gradient(circle at top left,
								rgba(180, 190, 254, 0.17),
								rgba(15, 23, 42, 0.9)
	);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(226, 232, 240, 0.92);
}

/* Main text part of the title, if you want a slightly longer name */

.section-title-text {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #e2e8f0;
}

/* Optional subtitle, quieter line under a section heading */

.section-subtitle {
	display: block;
	margin-top: 0.05rem;
	font-size: 0.85rem;
	color: var(--hp-text-subtle);
}

/* Scrollbars */

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.55);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(180, 190, 254, 0.9);
}

/* Firefox scrollbar styling to roughly match WebKit */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

/* =========
 *   Sections and services spacing
 *   ========= */

main section {
	margin-top: 1.6rem;
	margin-bottom: 1.6rem;
}

main section:first-of-type {
	margin-top: 1.25rem;
}

main section:last-of-type {
	margin-bottom: 1.75rem;
}

/* No automatic separator at the top of each section */
main section::before {
	content: none;
}

/* Separation only between stacked sections */
main section + section {
	margin-top: 2rem;
}

/* Group heading (the Proxmox / Synology title above a list) */
#services .service-group-name {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
margin-top: 0.5rem;
margin-bottom: 0.65rem;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(180, 190, 254, 0.9);
text-transform: uppercase;
}

#services .service-group-name::after {
content: "";
display: block;
height: 1px;
width: 4.5rem;
border-radius: 999px;
background: linear-gradient(to right, var(--hp-accent), transparent);
opacity: 0.8;
}

/* Remove extra top margin for the very first group in services */
#services .service-group:first-of-type .service-group-name,
#services > div:first-of-type .service-group-name {
margin-top: 0.4rem;
}

/* Tiny alignment tweak for second services group (MEDIA) header */
#services .services-group:nth-of-type(2) .service-group-name {
margin-top: 0.4rem;
}

/* Services list spacing (comfortable, not cramped) */
#services .services-list {
row-gap: 0.9rem;
column-gap: 0.9rem;
}

/* Slightly softer top and bottom padding inside each card */
#services .service-title {
padding-top: 0.35rem;
padding-bottom: 0.4rem;
}

/* =========
 *   Refined Services group headers
 *   ========= */

/* Add glow, pill background and motion */
#services .service-group-name {
position: relative;
padding: 0.14rem 0.9rem 0.2rem 0.9rem; /* small pill around the text */
margin-bottom: 0.8rem;
border-radius: 999px;

background: radial-gradient(
	circle at top left,
	rgba(180, 190, 254, 0.16),
							rgba(15, 23, 42, 0.0)
);

font-size: 1.18rem;
letter-spacing: 0.08em;
color: rgba(214, 219, 255, 0.96);
text-shadow: 0 0 10px rgba(129, 140, 248, 0.65);

transition:
color var(--hp-transition-med),
text-shadow var(--hp-transition-med),
background var(--hp-transition-med),
transform var(--hp-transition-med);
}

/* Underline: tie it into the same accent language, add animation */
#services .service-group-name::after {
content: "";
display: block;
height: 1px;
width: 4.5rem;
margin-top: 0.25rem;
border-radius: 999px;
background: linear-gradient(to right, var(--hp-accent-soft), transparent);
opacity: 0.85;

transition:
width var(--hp-transition-med),
opacity var(--hp-transition-med),
background var(--hp-transition-med);
}

/* Hover: slight lift and stronger glow, echoing card behaviour */
#services .service-group-name:hover {
color: #f8f9ff;
text-shadow: 0 0 14px rgba(180, 190, 254, 0.9);
background: radial-gradient(
	circle at top left,
	rgba(180, 190, 254, 0.24),
							rgba(15, 23, 42, 0.0)
);
transform: translateY(-1px);
}

#services .service-group-name:hover::after {
width: 5.7rem;
opacity: 1;
background: linear-gradient(to right, var(--hp-accent), transparent);
}

/* Reduced-motion: keep the look but remove the movement */
@media (prefers-reduced-motion: reduce) {
	#services .service-group-name {
	transition: none !important;
	transform: none !important;
	}
}

/* =========
 *   Service cards
 *   ========= */

/* Core card styling */
#services .service-card {
position: relative;
border-radius: var(--hp-radius-card) !important;

/* Softer base gradient, slightly lighter overall */
background: linear-gradient(
	90deg,
	rgba(134, 144, 200, 0.12) 0%,
							rgba(98, 110, 170, 0.16) 42%,
							rgba(60, 70, 130, 0.18) 100%
) !important;

border: 1px solid var(--hp-border-soft) !important;

box-shadow:
var(--hp-shadow-soft),
0 0 0 1px rgba(10, 18, 35, 0.9) !important;

backdrop-filter: blur(16px) saturate(145%) !important;
-webkit-backdrop-filter: blur(16px) saturate(145%) !important;

transition:
background-color var(--hp-transition-med),
background var(--hp-transition-med),
border-color var(--hp-transition-med),
box-shadow var(--hp-transition-med),
transform var(--hp-transition-med);

/* Fix for clipped hover glows */
overflow: visible !important;
}

/* Hover lavender glow – slightly tamer by default */
#services .service-card:hover {
transform: translateY(-2px) scale(1.01);

box-shadow:
0 12px 30px rgba(10, 16, 32, 0.85),
0 0 12px rgba(180, 190, 254, 0.24) !important;

border-color: rgba(180, 190, 254, 0.42) !important;

background: linear-gradient(
	90deg,
	rgba(112, 132, 204, 0.48),
							rgba(54, 68, 126, 0.86),
							rgba(24, 32, 68, 0.94)
) !important;
}

/* Active press state */
#services .service-card:active {
transform: translateY(-1px) scale(1.005);
box-shadow:
0 10px 24px rgba(10, 16, 32, 0.85),
0 0 10px rgba(180, 190, 254, 0.22) !important;
border-color: rgba(180, 190, 254, 0.5) !important;
}

/* Keyboard focus – disabled later for click focus */
#services .service-card:focus-within {
outline: 2px solid var(--hp-accent);
outline-offset: 3px;
}

/* Title and description inside the card */
#services .service-title-text {
color: var(--hp-text-main);
position: relative;
padding-left: 1.0rem; /* space for the hanging icon */
}

/* Base style for service icons, hanging in the left margin */
#services .service-title-text::before {
position: absolute;
left: 0;
top: 0.14rem;     /* lowered slightly because icons are larger */
display: inline-block;
width: 1.1rem;    /* widened to fit the larger icons */
text-align: center;

font-size: 1.25em;               /* larger icon */
opacity: 0.9;
color: rgba(225, 232, 255, 0.96);
pointer-events: none;
}

#services .service-description {
font-size: 0.82rem;
color: var(--hp-text-subtle);
}

/* Animated accent line under each card – softened */
#services .service-card::after {
content: "";
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.15rem;
height: 1px;
border-radius: 999px;
background: linear-gradient(
	90deg,
	transparent,
	var(--hp-accent),
							transparent
);

opacity: 0.08;
pointer-events: none;

transition: opacity 0.3s ease-out;
}

#services .service-card:hover::after {
opacity: 0.52;
}

/* =========
 *   Tags
 *   ========= */

/* Tag container position */
#services .service-tags {
position: absolute;
top: 0.45rem;
right: 0.30rem;
display: flex;
align-items: center;
gap: 0.35rem;
pointer-events: none;
}

/* Optional chip styling for real .tag elements, if you ever use them */
#services .service-tags .tag {
padding: 0.15rem 0.45rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(180, 190, 254, 0.4);
color: rgba(180, 190, 254, 0.9);
pointer-events: none;
}

/* Base style for pseudo tag chips on cards */
#services .service-tags::before,
#services .service-tags::after {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-left: 0.35rem;

border: 1px solid transparent;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.5),
0 0 1px rgba(255, 255, 255, 0.05);

pointer-events: none;
}

/* Stronger ambient glow when the card is hovered */
#services .service-card:hover .service-tags::before,
#services .service-card:hover .service-tags::after {
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.6),
0 0 6px rgba(180, 190, 254, 0.28);
}

/* Safety: tags never block clicks (reasserted below for status) */
#services .service-tags,
#services .service-tags::before,
#services .service-tags::after {
pointer-events: none !important;
}

/* =========
 *   Tag assignments (multi-tag)
 *   ========= */

/* Proxmox: CORE + UI */
li.service[data-name="Proxmox"] .service-tags::before {
	content: "CORE";
	background: var(--tag-core-bg) !important;
	border-color: var(--tag-core-border) !important;
	color: var(--tag-core-text) !important;
}

li.service[data-name="Proxmox"] .service-tags::after {
	content: "UI";
	background: var(--tag-ui-bg) !important;
	border-color: var(--tag-ui-border) !important;
	color: var(--tag-ui-text) !important;
}

/* Synology: STORAGE + CORE */
li.service[data-name="Synology"] .service-tags::before {
	content: "STORAGE";
	background: var(--tag-storage-bg) !important;
	border-color: var(--tag-storage-border) !important;
	color: var(--tag-storage-text) !important;
}

li.service[data-name="Synology"] .service-tags::after {
	content: "CORE";
	background: var(--tag-core-bg) !important;
	border-color: var(--tag-core-border) !important;
	color: var(--tag-core-text) !important;
}

/* NPMPlus: NETWORK + UI */
li.service[data-name="NPMPlus"] .service-tags::before {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

li.service[data-name="NPMPlus"] .service-tags::after {
	content: "UI";
	background: var(--tag-ui-bg) !important;
	border-color: var(--tag-ui-border) !important;
	color: var(--tag-ui-text) !important;
}

/* AdGuard: NETWORK + CORE */
li.service[data-name="AdGuard"] .service-tags::before {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

li.service[data-name="AdGuard"] .service-tags::after {
	content: "CORE";
	background: var(--tag-core-bg) !important;
	border-color: var(--tag-core-border) !important;
	color: var(--tag-core-text) !important;
}

/* qBittorrent: NETWORK + CORE */
li.service[data-name="qBittorrent"] .service-tags::before {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

li.service[data-name="qBittorrent"] .service-tags::after {
	content: "CORE";
	background: var(--tag-core-bg) !important;
	border-color: var(--tag-core-border) !important;
	color: var(--tag-core-text) !important;
}

/* Homepage: UI */
li.service[data-name="Homepage"] .service-tags::before {
	content: "UI";
	background: var(--tag-ui-bg) !important;
	border-color: var(--tag-ui-border) !important;
	color: var(--tag-ui-text) !important;
}

/* Jellyfin: MEDIA */
li.service[data-name="Jellyfin"] .service-tags::before {
	content: "MEDIA";
	background: var(--tag-media-bg) !important;
	border-color: var(--tag-media-border) !important;
	color: var(--tag-media-text) !important;
}

/* Jellyseerr: MEDIA */
li.service[data-name="Jellyseerr"] .service-tags::before {
	content: "MEDIA";
	background: var(--tag-media-bg) !important;
	border-color: var(--tag-media-border) !important;
	color: var(--tag-media-text) !important;
}

/* Radarr: MEDIA + NETWORK */
li.service[data-name="Radarr"] .service-tags::before {
	content: "MEDIA";
	background: var(--tag-media-bg) !important;
	border-color: var(--tag-media-border) !important;
	color: var(--tag-media-text) !important;
}

li.service[data-name="Radarr"] .service-tags::after {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

/* Sonarr: MEDIA + NETWORK */
li.service[data-name="Sonarr"] .service-tags::before {
	content: "MEDIA";
	background: var(--tag-media-bg) !important;
	border-color: var(--tag-media-border) !important;
	color: var(--tag-media-text) !important;
}

li.service[data-name="Sonarr"] .service-tags::after {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

/* Prowlarr: MEDIA + NETWORK */
li.service[data-name="Prowlarr"] .service-tags::before {
	content: "MEDIA";
	background: var(--tag-media-bg) !important;
	border-color: var(--tag-media-border) !important;
	color: var(--tag-media-text) !important;
}

li.service[data-name="Prowlarr"] .service-tags::after {
	content: "NETWORK";
	background: var(--tag-network-bg) !important;
	border-color: var(--tag-network-border) !important;
	color: var(--tag-network-text) !important;
}

/* ===========================
 *   Service icons (per-service, tunable)
 *   =========================== */

/* Proxmox – hypervisor */
li.service[data-name="Proxmox"] .service-title-text::before {
	content: "◆";
	font-size: 1.30em;
	top: 0.10rem;
}

/* Synology – storage */
li.service[data-name="Synology"] .service-title-text::before {
	content: "⬒";
	font-size: 1.25em;
	top: 0.10rem;
}

/* Homepage – dashboard UI */
li.service[data-name="Homepage"] .service-title-text::before {
	content: "◌";
	font-size: 1.20em;
	top: 0.12rem;
	opacity: 0.95;
}

/* NPMPlus – reverse proxy */
li.service[data-name="NPMPlus"] .service-title-text::before {
	content: "◍";
	font-size: 1.30em;
	top: 0.09rem;
}

/* qBittorrent – network-ish */
li.service[data-name="qBittorrent"] .service-title-text::before {
	content: "◍";
	font-size: 1.30em;
	top: 0.09rem;
}

/* AdGuard – shield with checkmark */
li.service[data-name="AdGuard"] .service-title-text::before {
	content: "⛉";
	font-size: 1.25em;
	top: 0.06rem;
}

li.service[data-name="AdGuard"] .service-title-text::after {
	content: "✓";
	position: absolute;
	left: 0.10rem;
	top: 0.48rem;
	width: 1.1rem;
	text-align: center;

	font-size: 0.74em;
	opacity: 0.98;
	color: rgba(210, 255, 210, 0.96);
	pointer-events: none;
}

/* Media stack – all ⯈ variations */
li.service[data-name="Jellyfin"] .service-title-text::before {
	content: "⯈";
	font-size: 1.28em;
	top: 0.11rem;
}

li.service[data-name="Jellyseerr"] .service-title-text::before {
	content: "⯈";
	font-size: 1.16em;
	top: 0.16rem;
	opacity: 0.92;
}

li.service[data-name="Radarr"] .service-title-text::before {
	content: "⯈";
	font-size: 1.22em;
	top: 0.12rem;
}

li.service[data-name="Sonarr"] .service-title-text::before {
	content: "⯈";
	font-size: 1.22em;
	top: 0.12rem;
}

li.service[data-name="Prowlarr"] .service-title-text::before {
	content: "⯈";
	font-size: 1.18em;
	top: 0.14rem;
	opacity: 0.9;
}

/* Smooth text and icon polish */
#services .service-title-text,
#services .service-title-text::before,
#services .service-description {
transition:
color var(--hp-transition-med),
opacity var(--hp-transition-med),
transform var(--hp-transition-med);
}

/* Slight icon nudge and brighter title on hover */
#services .service-card:hover .service-title-text::before {
transform: translateY(-1px);
opacity: 1;
}

#services .service-card:hover .service-title-text {
color: #f6f7ff;
}

#services .service-card:hover .service-description {
opacity: 0.96;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	#services .service-card,
	#services .service-card::after,
	#services .service-title-text::before {
	transition: none !important;
	transform: none !important;
	}
}

/* =========
 *   Status chips (ping + running) – tag-like, but distinct
 *   ========= */

/* Size tweak for status text (Tailwind span) */
#services .text-emerald-500\/80 {
	font-size: 0.6rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;

	/* NEW: fixed-ish width so pills don't resize */
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
	"Liberation Mono", "Courier New", monospace;
	min-width: 5ch;           /* room for "99+ ms" */
	text-align: center;
}


/* Base styling for both status elements */
#services .service-site-monitor,
#services .service-container-stats {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 2.2rem;
padding: 0.15rem 0.60rem;
margin-left: 0.35rem;

border-radius: 999px;
max-height: 1.5rem;

background: radial-gradient(
	circle at top left,
	rgba(148, 163, 184, 0.25),
							rgba(15, 23, 42, 0.95)
);
border: 1px solid rgba(148, 163, 184, 0.7);
border-color: rgba(180, 190, 254, 0.35);
color: rgba(226, 232, 240, 0.96);

box-shadow:
0 1px 2px rgba(0, 0, 0, 0.55),
0 0 4px rgba(148, 163, 184, 0.40);

position: relative;
z-index: 10;
pointer-events: auto;
}

/* Ping – quieter */
#services .service-site-monitor {
opacity: 0.92;
background: radial-gradient(
	circle at top left,
	rgba(148, 163, 184, 0.18),
							rgba(15, 23, 42, 0.96)
);
}

/* Running status – slightly emphasised */
#services .service-container-stats {
border-color: rgba(180, 190, 254, 0.35);
background: radial-gradient(
	circle at top left,
	rgba(148, 163, 184, 0.15),
							rgba(15, 23, 42, 0.94)
);
opacity: 0.92;
}

/* Neutralise default widget backgrounds */
#services .docker-status,
#services .site-monitor-status {
background-color: transparent !important;
}

/* Hover state */
#services .service-container-stats:hover,
#services .service-site-monitor:hover {
filter: brightness(1.15);
transform: translateY(-1px);
transition:
filter var(--hp-transition-fast),
transform var(--hp-transition-fast),
box-shadow var(--hp-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
	#services .service-container-stats:hover,
	#services .service-site-monitor:hover {
	transform: none;
	transition: none;
	}
}

/* Keep order consistent: tags, running, ping */
#services .service-tags {
order: 1;
}
#services .service-container-stats {
order: 2;
}
#services .service-site-monitor {
order: 3;
}

/* Ensure the status pill can always be clicked to toggle Docker stats */
#services .service-container-stats,
#services .service-site-monitor,
#services .service-site-monitor * {
position: relative;
z-index: 10;
pointer-events: auto !important;
}

/* Chevron hint */
#services .service-container-stats::after {
content: "▾";
font-size: 1.1rem;
margin-left: 0.35rem;
opacity: 0.9;
transition: transform 140ms ease-out;
}

/* Flip chevron when stats are visible */
#services li.service:has(.service-stats.max-h-\[110px\].opacity-100)
.service-container-stats::after {
	transform: rotate(180deg);
}

/* Soft hover on widget/stat rows */
#services .service-card .service-stats > * {
transition:
opacity 140ms ease-out,
transform 140ms ease-out;
}

#services .service-card .service-stats > *:hover {
opacity: 0.9;
transform: translateY(-0.5px);
}

@media (prefers-reduced-motion: reduce) {
	#services .service-card .service-stats > * {
	transition: none;
	}
}

/* Subtle top border only when stats are visible */
#services .service-stats.opacity-100 {
margin-top: 0.15rem;
padding-top: 0.15rem;
border-top: 1px solid rgba(148, 163, 184, 0.20);
}

/* =========
 *   Misc refinements
 *   ========= */

/* Make disclosure panels themselves non-clipping for glows */
[id^="headlessui-disclosure-panel"] {
	overflow: visible !important;
}

/* Disable the focus outline on cards (click focus effect) */
#services .service-card:focus-within {
outline: none !important;
outline-offset: 0 !important;
}

/* ===========
 *   Old text legend (disabled, kept for reference)
 *   =========== */
/*
 * #services::before {
 *	content: "LEGEND •   ◆ CORE   ⬒ STORAGE   ◍ NETWORK   ⯈ MEDIA   ◌ UI";
 *	display: block;
 *	flex: 0 0 100%;
 *	width: 100%;
 *	margin: 0 0 0.9rem 0;
 *	padding: 0 0 1.2rem 0;
 *	border: none;
 *	box-shadow: none;
 *
 *	font-size: 0.70rem;
 *	font-weight: 500;
 *	letter-spacing: 0.085em;
 *	word-spacing: 0.32em;
 *	text-transform: uppercase;
 *	color: rgba(220, 228, 245, 0.74);
 *	text-align: center;
 *
 *	white-space: nowrap;
 *	position: relative;
 *
 *	background:
 *		linear-gradient(
 *			to right,
 *			rgba(180, 190, 254, 0.00),
 *			rgba(180, 190, 254, 0.22),
 *			rgba(180, 190, 254, 0.00)
 *		)
 *		0 calc(100% - 0.1rem) / 100% 1px no-repeat;
 * }
 *
 * @media (max-width: 768px) {
 *	#services::before {
 *		display: block;
 *		font-size: 0.68rem;
 *		word-spacing: 0.28em;
 *		white-space: normal;
 *		text-align: left;
 *	}
 * }
 *
 * @media (prefers-reduced-motion: reduce) {
 *	#services::before {
 *		box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
 *	}
 * }
 */

/* ===========
 *   Interactive legend strip – dark / quiet
 *   =========== */

#hp-legend {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin: 0.85rem auto 0.45rem;
	padding: 0.5rem 0.9rem 0.5rem;
	max-width: 720px;

	border-radius: var(--hp-radius-card);
	background:
	radial-gradient(circle at top,
					rgba(32, 28, 70, 0.60),
					rgba(18, 20, 40, 0.78));
	box-shadow:
	0 0 0 1px rgba(148, 163, 184, 0.25),        /* soft outline */
	0 6px 18px rgba(10, 12, 28, 0.40),          /* subtle drop shadow */
	0 18px 45px rgba(6, 8, 22, 0.55);           /* wide, soft feather */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Legend pills */

.hp-legend-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.16rem 0.55rem;

	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	background: radial-gradient(circle at top,
								rgba(30, 64, 175, 0.22),
								rgba(15, 23, 42, 0.95));
	box-shadow:
	0 4px 10px rgba(15, 23, 42, 0.85);

	color: rgba(226, 232, 240, 0.86);
	font-weight: 500;
	cursor: pointer;

	transition:
	background var(--hp-transition-fast),
	box-shadow var(--hp-transition-fast),
	transform var(--hp-transition-fast),
	color var(--hp-transition-fast),
	opacity var(--hp-transition-fast);
}

.hp-legend-pill:hover {
	transform: translateY(-0.5px);
	box-shadow:
	0 6px 14px rgba(15, 23, 42, 0.95);
	background: radial-gradient(circle at top,
								rgba(59, 130, 246, 0.30),
								rgba(15, 23, 42, 0.96));
}

/* Active state */

.hp-legend-pill.is-active {
	background: radial-gradient(circle at top,
								rgba(129, 140, 248, 0.42),
								rgba(15, 23, 42, 0.98));
	border-color: rgba(191, 219, 254, 0.95);
	box-shadow:
	0 0 0 1px rgba(191, 219, 254, 0.85),
	0 10px 22px rgba(30, 64, 175, 0.85);
	color: #f9fafb;
}

/* Dimmed services should not be interactive */
.hp-dimmed {
	pointer-events: none;
	opacity: 0.35; /* keep your existing fade if you like */
	filter: grayscale(0.4); /* optional, remove if unwanted */
}


/* Glyph + label inside pill (unchanged, keep for completeness) */

.hp-legend-glyph {
	font-size: 0.9rem;
	line-height: 1;
	opacity: 0.95;
}

.hp-legend-label {
	font-size: 0.65rem;
	line-height: 1;
}


/* Services dimmed when filtered */

#services li.service.hp-dimmed .service-card {
opacity: 0.32;
transform: none;
box-shadow:
0 0 0 1px rgba(42, 34, 88, 0.55),
0 18px 40px rgba(4, 1, 20, 0.9);
}

#services li.service.hp-dimmed .service-card:hover {
opacity: 0.40;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hp-legend-pill {
		transition: none;
	}
}

/* ===========
 *   Mobile layout
 *   =========== */

@media (max-width: 768px) {
	/* Let the main content breathe edge to edge a bit more */
	main {
		max-width: 100%;
		padding: 0.75rem 0.75rem 1.5rem;
	}

	/* Single column for service groups on small screens */
	#services .services-group {
	display: grid;
	grid-template-columns: 1fr !important;
	gap: 0.75rem;
	}

	/* Make each card a bit tighter on mobile */
	#services .service-card {
	padding: 0.75rem 0.9rem;
	}

	/* Title text and icon – pull them in a bit */
	#services .service-title-text {
	padding-left: 2.0rem;
	font-size: 0.95rem;
	}

	#services .service-title-text::before {
	left: 0.4rem;
	font-size: 1.1rem;
	top: 0.22rem;
	}

	/* Description text a touch smaller but still readable */
	#services .service-description {
	font-size: 0.8rem;
	line-height: 1.35;
	}

	/* Tags – flow under the title instead of floating top-right */
	#services .service-tags {
	position: static;
	margin-top: 0.4rem;
	justify-content: flex-start;
	gap: 0.25rem;
	}

	#services .service-tags .tag {
	font-size: 0.7rem;
	padding: 0.1rem 0.4rem;
	}

	/* Header tweaks */
	header,
	.app-header {
		padding: 0.5rem 0.75rem;
	}

	.app-header input[type="search"],
	header input[type="search"] {
		width: 100%;
		max-width: none;
	}

	/* Soften hover on touch devices – less jumpy */
	#services .service-card:hover {
	transform: translateY(-1px) scale(1.005);
	}

	/* Mobile: let legend compress a bit */
	#hp-legend {
	flex-wrap: wrap;
	row-gap: 0.4rem;
	font-size: 0.64rem;
	}
}

/* Respect reduced-motion preferences for card hover */
@media (prefers-reduced-motion: reduce) {
	#services .service-card {
	transition: none !important;
	transform: none !important;
	}
}