/**
 * Psy Core — Homepage
 * Brand tokens: --psy-pink · --psy-navy · --psy-indigo · --psy-violet · --psy-lavender · --psy-white (see tokens.css)
 * Site rule: outer full-width with 50px desktop / 20px mobile padding, inner max 1440.
 */

.psy-home {
	/* Brand tokens (--psy-pink / --psy-navy / --psy-indigo / --psy-lavender
	   / --psy-violet / --psy-white / --psy-blue-dark) live in tokens.css.
	   Do not redeclare them here — a shadow copy silently drifts from
	   the source of truth. */
	position: relative;
	color: var(--psy-white);
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	background: var(--psy-navy);
	overflow-x: clip;
	isolation: isolate;
}

.psy-home::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: var(--psy-home-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.85;
	pointer-events: none;
	z-index: 0;
}

.psy-home::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(229, 74, 218, 0.10) 0%, transparent 55%),
		linear-gradient(to bottom, transparent 0%, rgba(5, 0, 51, 0.6) 60%, var(--psy-blue-dark) 100%);
	pointer-events: none;
	z-index: 0;
}

.psy-home > * {
	position: relative;
	z-index: 1;
}

.psy-home__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 50px;
}

/* ========================================================================
   1. Ads slider slot
======================================================================== */
.psy-home__ads {
	padding-top: 32px;
}

.psy-home__ads-slot {
	--psy-ads-label-bar: 50px;
	min-height: clamp(380px, 46vw, 640px);
	border-radius: 28px;
	border: 1px solid rgba(229, 74, 218, 0.35);
	background:
		radial-gradient(ellipse at 50% 100%, rgba(229, 74, 218, 0.18) 0%, transparent 60%),
		rgba(12, 5, 72, 0.45);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--psy-lavender);
	letter-spacing: 0.22em;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	box-shadow: 0 0 32px rgba(229, 74, 218, 0.10);
}

.psy-home__ads-icon {
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E54ADA'><path d='M12 2l1.7 6.2L20 10l-6.3 1.8L12 18l-1.7-6.2L4 10l6.3-1.8z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 0 12px rgba(229, 74, 218, 0.8));
}

/* Filled state (one or more psy_ad posts published) */
.psy-home__ads-slot--filled {
	position: relative;
	padding: 0;
	overflow: hidden;
	background: rgba(12, 5, 72, 0.35);
	box-shadow: 0 0 42px rgba(229, 74, 218, 0.18);
}

.psy-home__ads-slide {
	position: absolute;
	inset: 0;
	opacity: 1;
	transition: opacity 500ms ease-in-out;
}

.psy-home__ads-slide[hidden] {
	display: block;
	opacity: 0;
	pointer-events: none;
}

.psy-home__ads-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.psy-home__ads-link {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}

/* Top-bar label — pink strip inside the banner, above the poster image.
   The image sits behind and is pushed down by --psy-ads-label-bar so the
   poster text below the bar keeps its safe area. */
.psy-home__promo-strip {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--psy-ads-label-bar);
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 0 clamp(16px, 3vw, 32px);
	background: var(--psy-pink);
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(18px, 2vw, 26px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	pointer-events: none;
}

/* Slot with a promo-strip: image is pushed below the strip and the slot
   grows by the strip height so the poster keeps its original visible area. */
.psy-home__ads-slot--filled .psy-home__ads-slide img {
	top: var(--psy-ads-label-bar);
	height: calc(100% - var(--psy-ads-label-bar));
}

.psy-home__ads-slot--filled {
	min-height: calc(clamp(380px, 46vw, 640px) + var(--psy-ads-label-bar));
}

@media (max-width: 768px) {
	.psy-home__ads-slot {
		--psy-ads-label-bar: 38px;
	}

	.psy-home__promo-strip {
		font-size: clamp(14px, 3.6vw, 18px);
		letter-spacing: 0.10em;
		padding: 0 14px;
	}
}

.psy-home__ads-link:focus-visible {
	outline: 2px solid var(--psy-pink);
	outline-offset: -4px;
	border-radius: 24px;
}

.psy-home__ads-dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.psy-home__ads-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: rgba(5, 0, 51, 0.55);
	padding: 0;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.psy-home__ads-dot:hover {
	transform: scale(1.15);
}

.psy-home__ads-dot.is-active {
	background: var(--psy-pink);
	border-color: var(--psy-pink);
}

.psy-home__ads-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(5, 0, 51, 0.75);
	color: #fff;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.psy-home__ads-arrow:hover {
	background: var(--psy-pink);
	border-color: #fff;
	transform: translateY(-50%) scale(1.08);
}

.psy-home__ads-arrow:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--psy-pink), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.psy-home__ads-arrow svg {
	width: 26px;
	height: 26px;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.psy-home__ads-arrow--prev { left: 20px; }
.psy-home__ads-arrow--next { right: 20px; }

@media (max-width: 768px) {
	.psy-home__ads-arrow {
		width: 36px;
		height: 36px;
		top: auto;
		bottom: 8px;
		transform: none;
		border-width: 1.5px;
	}

	.psy-home__ads-arrow:hover {
		transform: scale(1.08);
	}

	.psy-home__ads-arrow svg {
		width: 16px;
		height: 16px;
	}

	.psy-home__ads-arrow--prev { left: 12px; }
	.psy-home__ads-arrow--next { right: 12px; }

	.psy-home__ads-dots {
		bottom: 20px;
	}
}

/* ========================================================================
   2. Hero — title + category grid
======================================================================== */
.psy-home__hero {
	padding-top: 36px;
	padding-bottom: 60px;
	text-align: center;
	position: relative;
	z-index: 20 !important;
	overflow: visible;
}

.psy-home__title {
	font-family: 'Yacota Display Sans', 'Yacote Display Sans', 'Yacote', 'Audiowide', system-ui, sans-serif;
	font-size: clamp(48px, 8.2vw, 86px);
	line-height: 1;
	letter-spacing: -0.05em;
	margin: 0 0 18px;
	text-transform: uppercase;
	font-weight: 400;
	white-space: nowrap;
	-webkit-text-stroke: 10px transparent;
	background: linear-gradient(90deg, var(--psy-pink), var(--psy-royal), var(--psy-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: white;
	filter:
		drop-shadow(0 0 12px rgba(229, 74, 218, 0.55))
		drop-shadow(0 0 28px rgba(46, 229, 119, 0.30));
}

@media (max-width: 720px) {
	.psy-home__title {
		white-space: normal;
		letter-spacing: -0.04em;
	}
}

.psy-home__lead {
	margin: 0 auto 42px;
	max-width: 720px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: clamp(15px, 1.6vw, 21px);
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: var(--psy-white);
}

/* Category grid 4x2 — equal width, fluid up to inner container */
.psy-home__cats {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	grid-auto-rows: 152px !important;
	gap: 24px !important;
	align-items: stretch !important;
	justify-items: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

.psy-home__cat {
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	position: relative;
	z-index: 1;
}

.psy-home__cat:has(.psy-home__cat-btn[aria-expanded="true"]) {
	z-index: 50;
}

.psy-home__cat-btn {
	width: 100% !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 16px !important;
	background: rgba(255, 255, 255, 0.01) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 24px !important;
	color: var(--psy-white);
	font-family: inherit;
	cursor: pointer;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
	height: 152px !important;
	box-sizing: border-box;
}

.psy-home__cat-btn:hover {
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	transform: translateY(-1px);
	box-shadow: none !important;
}

.psy-home__cat-btn:focus {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.30) !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}

.psy-home__cat-btn:focus-visible {
	outline: 2px solid var(--psy-pink) !important;
	outline-offset: 2px;
	border-color: rgba(255, 255, 255, 0.30) !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}

.psy-home__cat-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	box-shadow: none !important;
}

.psy-home__cat-icon {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
}

.psy-home__cat-label {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0;
	color: var(--psy-white) !important;
}

.psy-home__cat-caret {
	display: inline-block !important;
	width: 12px !important;
	height: 12px !important;
	flex-shrink: 0;
	background-image: url('https://psytranceartist.com/wp-content/uploads/2026/06/freccia.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
	filter: brightness(0) invert(1);
	vertical-align: middle;
}

.psy-home__cat-btn[aria-expanded="true"] .psy-home__cat-caret {
	transform: rotate(180deg);
}

/* Subcategory dropdown — floats above neighbour boxes */
.psy-home__sub {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	right: 0;
	z-index: 999;
	padding: 16px 14px 12px;
	border-radius: 16px;
	background: rgba(20, 8, 80, 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: psy-home-fade 0.18s ease;
}

.psy-home__sub[hidden] {
	display: none;
}

@keyframes psy-home-fade {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.psy-home__sub-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--psy-pink);
	padding: 4px 6px 8px;
}

.psy-home__sub-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.psy-home__sub-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--psy-white) !important;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.15s ease;
}

.psy-home__sub-list li:first-child .psy-home__sub-item {
	background: rgba(229, 74, 218, 0.18);
	color: var(--psy-pink) !important;
}

.psy-home__sub-item:hover {
	background: rgba(229, 74, 218, 0.14);
	color: var(--psy-white) !important;
}

.psy-home__sub-caret {
	width: 10px;
	height: 10px;
	background-image: url('https://psytranceartist.com/wp-content/uploads/2026/06/freccia.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(-90deg);
	filter: brightness(0) invert(1);
	opacity: 0.7;
}

.psy-home__sub-all {
	margin-top: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	background: rgba(229, 74, 218, 0.10);
	color: var(--psy-pink) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease;
}

.psy-home__sub-all:hover {
	background: rgba(229, 74, 218, 0.22);
	color: var(--psy-white) !important;
}

/* ========================================================================
   3. Section titles (shared)
======================================================================== */
.psy-home__section-title {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 33px;
	line-height: 39.6px;
	letter-spacing: -3.3px;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--psy-white);
	text-align: center;
}

.psy-home__section-title--center {
	text-align: center;
}

.psy-home__section-sub {
	margin: 0 0 32px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: clamp(14px, 1.4vw, 18px);
	font-weight: 400;
	font-style: italic;
	color: var(--psy-lavender);
}

.psy-home__empty {
	color: var(--psy-lavender);
	font-style: italic;
	padding: 30px 0;
	text-align: center;
}

/* ========================================================================
   4. Latest artists grid
======================================================================== */
.psy-home__artists {
	padding: 30px 0 60px;
	text-align: center;
}

.psy-home__artist-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: left;
}

.psy-home__artist-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background-color: #0C0548;
	background: var(--psy-indigo, #0C0548);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.psy-home__artist-card:hover {
	transform: translateY(-3px);
	border-color: rgba(229, 74, 218, 0.55);
	box-shadow: 0 12px 28px rgba(229, 74, 218, 0.18);
}

.psy-home__artist-thumb {
	aspect-ratio: 1 / 1;
	background-color: var(--psy-violet);
	background-size: cover;
	background-position: center;
	position: relative;
}

.psy-home__artist-thumb-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2A1675 0%, #6C2BFF 100%);
}

.psy-home__artist-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.psy-home__artist-name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--psy-white);
	line-height: 1.2;
}

.psy-home__artist-meta {
	margin: 0;
	font-size: 13px;
	color: var(--psy-pink);
	font-style: italic;
}

.psy-home__artist-location {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--psy-lavender);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.psy-home__artist-pin {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.psy-home__artist-cta {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--psy-pink);
	background: transparent;
	color: var(--psy-pink) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: center;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.psy-home__artist-cta:hover {
	background: var(--psy-pink);
	color: var(--psy-white) !important;
	outline: none;
}

.psy-home__artist-cta:focus-visible {
	background: var(--psy-pink);
	color: var(--psy-white) !important;
	outline: 2px solid var(--psy-pink);
	outline-offset: 2px;
}

.psy-home__fav {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background: rgba(5, 0, 51, 0.65);
	color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.psy-home__fav:hover {
	background: rgba(5, 0, 51, 0.8);
	color: var(--psy-white);
	transform: scale(1.08);
}

.psy-home__fav:active {
	transform: scale(0.94);
}

.psy-home__fav:focus-visible {
	outline: 2px solid var(--psy-pink);
	outline-offset: 2px;
}

.psy-home__fav.is-active,
.psy-home__fav[aria-pressed="true"] {
	background: rgba(5, 0, 51, 0.75);
}

.psy-home__fav--locked::after {
	content: attr(data-psy-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--psy-navy);
	border: 1px solid rgba(229, 74, 218, 0.45);
	color: var(--psy-white);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 6px 10px;
	border-radius: 8px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 160ms ease, transform 160ms ease;
	pointer-events: none;
	z-index: 3;
}

.psy-home__fav--locked:hover::after,
.psy-home__fav--locked:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}

.psy-home__fav::before {
	content: '';
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 0.2s ease;
}

.psy-home__fav.is-active::before,
.psy-home__fav[aria-pressed="true"]::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E54ADA' stroke='%23E54ADA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
	animation: psy-fav-pop 0.32s ease;
}

@keyframes psy-fav-pop {
	0%   { transform: scale(0.6); }
	60%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* ========================================================================
   5. New releases
======================================================================== */
.psy-home__releases {
	padding: 30px 0 60px;
	text-align: center;
}

.psy-home__release-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: left;
}

.psy-home__release-card {
	border-radius: 16px;
	overflow: hidden;
	background-color: #0C0548;
	background: var(--psy-indigo, #0C0548);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.psy-home__release-card:hover {
	transform: translateY(-3px);
	border-color: rgba(229, 74, 218, 0.55);
	box-shadow: 0 12px 28px rgba(229, 74, 218, 0.18);
}

.psy-home__release-thumb {
	aspect-ratio: 1 / 1;
	background-color: var(--psy-violet);
	background-size: cover;
	background-position: center;
	position: relative;
}

.psy-home__release-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--psy-royal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--psy-white);
	line-height: 1;
}

.psy-home__release-note {
	position: absolute;
	bottom: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	display: block;
	line-height: 0;
}

.psy-home__release-note img {
	width: 40px;
	height: 40px;
	display: block;
}

.psy-home__release-body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.psy-home__release-artist {
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--psy-white);
	line-height: 1.2;
}

.psy-home__release-title {
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0;
	font-weight: 400;
	font-style: italic;
	color: var(--psy-pink);
}

.psy-home__release-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 8px 0 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0;
	font-weight: 400;
	color: #6B6394;
}

.psy-home__release-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--psy-pink);
	background: transparent;
	color: var(--psy-pink) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: center;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.psy-home__release-cta:hover {
	background: var(--psy-pink);
	color: var(--psy-white) !important;
	outline: none;
}

.psy-home__release-cta:focus-visible {
	background: var(--psy-pink);
	color: var(--psy-white) !important;
	outline: 2px solid var(--psy-pink);
	outline-offset: 2px;
}

.psy-home__release-cta-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ========================================================================
   6. Book in 3 steps
======================================================================== */
.psy-home__steps {
	padding: 30px 0 60px;
}

.psy-home__steps-box {
	background: var(--psy-navy);
	border-radius: 21.33px;
	padding: 64px 150px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
}

.psy-home__steps-title {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 29.33px;
	line-height: 35.2px;
	letter-spacing: -2.93px;
	font-weight: 700;
	color: var(--psy-white);
	margin: 0;
	text-align: center;
}

.psy-home__steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.psy-home__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	min-width: 140px;
}

.psy-home__step-num {
	font-family: 'Yacota Display Sans', 'Yacote', system-ui, sans-serif;
	font-size: 64px;
	line-height: 96px;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--psy-pink);
}

.psy-home__step-icon {
	width: 28px;
	height: 28px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.psy-home__step-icon--search  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E54ADA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>"); }
.psy-home__step-icon--find    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E54ADA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.psy-home__step-icon--contact { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E54ADA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='22' y1='2' x2='11' y2='13'/><polygon points='22 2 15 22 11 13 2 9 22 2'/></svg>"); }

.psy-home__step-label {
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--psy-white);
}

.psy-home__step-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-top: 32px;
}

.psy-home__step-arrow img {
	width: 32px;
	height: auto;
	display: block;
}

/* ========================================================================
   7. Why it works
======================================================================== */
.psy-home__why {
	padding: 60px 0;
}

.psy-home__why-grid {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 880px;
	margin: 30px auto 0;
}

.psy-home__why-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border-radius: 16px;
	background: var(--psy-royal);
}

.psy-home__why-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: block;
	object-fit: contain;
}

.psy-home__why-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.psy-home__why-title {
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 21px;
	line-height: 25.2px;
	letter-spacing: -1.47px;
	font-weight: 700;
	color: var(--psy-white);
}

.psy-home__why-text {
	margin: 0;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--psy-lavender);
}

/* ========================================================================
   8. CTA banner
======================================================================== */
.psy-home__cta {
	padding: 40px 0 80px;
}

.psy-home__cta-card {
	padding: 64px 32px;
	border-radius: 32px;
	background: url('https://psytranceartist.com/wp-content/uploads/2026/06/Background-scaled.png') center/cover no-repeat, linear-gradient(90deg, var(--psy-pink) 0%, var(--psy-royal) 100%);
	text-align: center;
	box-shadow: 0 12px 48px rgba(229, 74, 218, 0.22);
}

.psy-home__cta-title {
	margin: 0 0 12px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 33px;
	line-height: 39.6px;
	letter-spacing: -3.3px;
	font-weight: 700;
	color: var(--psy-white);
}

.psy-home__cta-text {
	margin: 0 0 28px;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--psy-white);
}

.psy-home__cta-btn {
	display: inline-block;
	padding: 14px 36px;
	background: var(--psy-royal);
	color: var(--psy-white) !important;
	border-radius: 999px;
	text-decoration: none;
	font-family: 'Open Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	transition: background 160ms ease, transform 160ms ease;
}

.psy-home__cta-btn:hover {
	background: var(--psy-navy);
	transform: translateY(-1px);
	outline: none;
}

.psy-home__cta-btn:focus-visible {
	background: var(--psy-navy);
	transform: translateY(-1px);
	outline: 2px solid var(--psy-pink);
	outline-offset: 2px;
}

/* ========================================================================
   Responsive
======================================================================== */
@media (max-width: 1024px) {
	.psy-home__cats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.psy-home__artist-grid,
	.psy-home__release-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.psy-home__steps-box {
		padding: 56px 60px;
	}
}

@media (max-width: 720px) {
	.psy-home__inner {
		padding: 0 20px;
	}

	.psy-home__cats {
		grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important;
		gap: 20px !important;
		row-gap: 20px !important;
	}

	.psy-home__cat-btn {
		background: rgba(255, 255, 255, 0.04) !important;
		border-color: rgba(255, 255, 255, 0.22) !important;
	}

	.psy-home__cat-label {
		font-size: 18px !important;
		line-height: 22px !important;
	}

	.psy-home__cat-icon {
		width: 32px !important;
		height: 32px !important;
	}

	.psy-home__artist-grid,
	.psy-home__release-grid,
	.psy-home__why-grid {
		grid-template-columns: 1fr;
	}

	.psy-home__why-grid {
		grid-auto-rows: 1fr;
	}

	.psy-home__why-card {
		min-height: 160px;
	}

	.psy-home__steps-box {
		padding: 40px 24px;
	}

	.psy-home__steps-list {
		flex-direction: column;
		gap: 14px;
		justify-content: center;
		align-items: center;
	}

	.psy-home__step-arrow {
		margin-top: 0;
	}

	.psy-home__step-arrow img {
		transform: rotate(90deg);
	}

	.psy-home__title {
		font-size: clamp(36px, 12vw, 64px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.psy-home__cat-btn,
	.psy-home__artist-card,
	.psy-home__cat-caret,
	.psy-home__sub {
		transition: none !important;
		animation: none !important;
	}
}

/* Locked sub (Worker / Volunteer) — replaces the subcategories list with a contact CTA */
.psy-home__sub--locked .psy-home__sub-locked-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 12px 8px 4px;
}
.psy-home__sub-lock {
	width: 32px;
	height: 32px;
	color: var(--psy-pink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.psy-home__sub-lock svg {
	width: 28px;
	height: 28px;
	display: block;
}
.psy-home__sub-locked-text {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--psy-lavender);
}
.psy-home__sub-locked-cta {
	margin-top: 4px;
}