/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/*
 * Persicus Imperium V2 — Global Design System v1.0
 * Stage 1: global foundations only. No page structure is defined here.
 */
:root {
	--pi-cosmic-black: #09060F;
	--pi-deep-imperial-purple: #14071F;
	--pi-royal-purple: #2A0D45;
	--pi-imperial-purple: #4B136F;
	--pi-accent-purple: #7A2CCB;
	--pi-soft-purple-glow: #9A5AE6;
	--pi-imperial-gold: #D4AF37;
	--pi-bright-gold: #F2D46B;
	--pi-marble-white: #F8F8F6;
	--pi-roman-stone: #2E2E2E;
	--pi-text-secondary: rgba(248, 248, 246, 0.72);

	--pi-space-1: 8px;
	--pi-space-2: 16px;
	--pi-space-3: 24px;
	--pi-space-4: 32px;
	--pi-space-5: 48px;
	--pi-space-6: 64px;
	--pi-space-7: 96px;
	--pi-content-width: 1200px;
	--pi-section-padding: 96px;
	--pi-radius-button: 8px;
	--pi-radius-card: 12px;
	--pi-transition-fast: 225ms ease;
	--pi-transition-card: 250ms ease;
}

/* Stage 6: Featured Games */
.pi-featured-games {
	position: relative;
	overflow: hidden;
	padding: 96px 0;
	background:
		radial-gradient(circle at 50% 8%, rgba(122, 44, 203, 0.2), transparent 42%),
		linear-gradient(180deg, #210a35 0%, #14071f 48%, #2a0d45 100%);
}

.pi-featured-games::before,
.pi-featured-games::after {
	position: absolute;
	left: 50%;
	width: min(760px, 72vw);
	height: 1px;
	content: "";
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.48), transparent);
}

.pi-featured-games::before { top: 0; }
.pi-featured-games::after { bottom: 0; }

.pi-featured-games__inner {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 48px), var(--pi-content-width));
	margin-inline: auto;
}

.pi-featured-games__heading {
	display: grid;
	max-width: 820px;
	margin: 0 auto 48px;
	justify-items: center;
	text-align: center;
}

.pi-featured-games__eyebrow {
	margin: 0 0 16px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-featured-games__title {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 44px;
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.pi-featured-games__subtitle {
	max-width: 680px;
	margin: 16px 0 0;
	color: rgba(248, 248, 246, 0.82);
	font-size: 18px;
	line-height: 1.65;
	text-wrap: balance;
}

.pi-featured-games__ornament {
	display: flex;
	width: min(360px, 72vw);
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	color: var(--pi-imperial-gold);
}

.pi-featured-games__ornament::before,
.pi-featured-games__ornament::after {
	height: 1px;
	flex: 1;
	content: "";
	background: linear-gradient(90deg, transparent, currentColor);
}

.pi-featured-games__ornament::after {
	background: linear-gradient(90deg, currentColor, transparent);
}

.pi-featured-games__ornament span {
	font-size: 10px;
	line-height: 1;
}

.pi-featured-games__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pi-game-card {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border: 1px solid rgba(212, 175, 55, 0.42);
	border-radius: 12px;
	background: #14071f;
	box-shadow: 0 18px 48px rgba(9, 6, 15, 0.3);
	isolation: isolate;
	transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.pi-game-card__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.pi-game-card::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background:
		linear-gradient(180deg, rgba(9, 6, 15, 0.08) 10%, rgba(20, 7, 31, 0.48) 50%, rgba(9, 6, 15, 0.96) 100%),
		linear-gradient(90deg, rgba(42, 13, 69, 0.22), transparent 55%);
	transition: background-color 250ms ease;
}

.pi-game-card__content {
	display: flex;
	height: 100%;
	min-height: 420px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 32px;
}

.pi-game-card__title {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 2px 14px rgba(9, 6, 15, 0.9);
	transition: color 250ms ease;
}

.pi-game-card__description {
	max-width: 540px;
	margin: 12px 0 22px;
	color: rgba(248, 248, 246, 0.88);
	font-size: 16px;
	line-height: 1.6;
}

.pi-game-card__link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--pi-imperial-gold);
	border-radius: 8px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.pi-game-card__link::after { content: "→"; }

.pi-game-card:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 212, 107, 0.78);
	box-shadow: 0 22px 58px rgba(9, 6, 15, 0.4), 0 0 24px rgba(122, 44, 203, 0.16);
}

.pi-game-card:hover .pi-game-card__image { transform: scale(1.035); }
.pi-game-card:hover .pi-game-card__title { color: var(--pi-bright-gold); }

.pi-game-card__link:hover {
	transform: translateY(-2px);
	background: rgba(212, 175, 55, 0.12);
	color: var(--pi-marble-white);
}

.pi-game-card__link:focus-visible {
	outline: 3px solid var(--pi-bright-gold);
	outline-offset: 4px;
}

@media (max-width: 921px) {
	.pi-featured-games { padding: 64px 0; }
	.pi-featured-games__title { font-size: 38px; }
	.pi-game-card,
	.pi-game-card__content { min-height: 380px; }
}

@media (max-width: 700px) {
	.pi-featured-games { padding: 48px 0; }
	.pi-featured-games__inner { width: min(calc(100% - 32px), var(--pi-content-width)); }
	.pi-featured-games__heading { margin-bottom: 32px; }
	.pi-featured-games__title { font-size: 32px; }
	.pi-featured-games__subtitle { font-size: 16px; }
	.pi-featured-games__grid { grid-template-columns: 1fr; gap: 16px; }
	.pi-game-card,
	.pi-game-card__content { min-height: 360px; }
	.pi-game-card__content { padding: 24px; }
	.pi-game-card__title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.pi-game-card,
	.pi-game-card__image,
	.pi-game-card__title,
	.pi-game-card__link {
		transition: none;
	}

	.pi-game-card:hover,
	.pi-game-card:hover .pi-game-card__image,
	.pi-game-card__link:hover {
		transform: none;
	}
}

html {
	overflow-x: clip;
}

body {
	background-color: var(--pi-royal-purple);
	background-image:
		radial-gradient(circle at 78% 8%, rgba(154, 90, 230, 0.27), transparent 34rem),
		radial-gradient(circle at 12% 42%, rgba(122, 44, 203, 0.3), transparent 40rem),
		linear-gradient(145deg, #1F0A34 0%, var(--pi-royal-purple) 46%, #3A105C 72%, var(--pi-deep-imperial-purple) 100%);
	background-attachment: fixed;
	color: var(--pi-marble-white);
}

p,
.entry-content {
	color: var(--pi-text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--pi-marble-white);
}

/* Reusable section and card foundations for future page stages. */
.pi-section {
	padding-block: var(--pi-section-padding);
	position: relative;
	isolation: isolate;
}

/* Alternate these foundations so adjoining sections never share a treatment. */
.pi-section--royal {
	background: linear-gradient(150deg, rgba(42, 13, 69, 0.96), rgba(75, 19, 111, 0.72));
}

.pi-section--deep {
	background:
		radial-gradient(circle at 82% 30%, rgba(154, 90, 230, 0.1), transparent 30rem),
		linear-gradient(180deg, rgba(20, 7, 31, 0.96), rgba(42, 13, 69, 0.88));
}

.pi-section--imperial {
	background:
		radial-gradient(circle at 18% 68%, rgba(122, 44, 203, 0.14), transparent 34rem),
		linear-gradient(135deg, rgba(75, 19, 111, 0.82), rgba(42, 13, 69, 0.96));
}

.pi-section + .pi-section::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	width: min(72%, 860px);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.58), transparent);
	box-shadow: 0 0 16px rgba(154, 90, 230, 0.12);
}

.pi-container {
	width: min(calc(100% - 48px), var(--pi-content-width));
	margin-inline: auto;
}

/*
 * Spectra applies a late `margin: 0` reset to every direct child of a root
 * container. Keep the shared Persicus content wrapper centered inside the
 * viewport-wide section without changing Spectra's full-width breakout.
 */
.wp-block-spectra-container[data-spectra-id^="pi-"] > .pi-container {
	margin-left: auto;
	margin-right: auto;
}

/* Keep responsive media inside Spectra columns at intermediate widths. */
.entry-content .wp-block-spectra-container .wp-block-image {
	max-width: 100%;
}

.entry-content .wp-block-spectra-container .wp-block-image img {
	max-width: 100%;
	height: auto;
}

.pi-card {
	padding: var(--pi-space-4);
	background: linear-gradient(145deg, rgba(42, 13, 69, 0.94), rgba(20, 7, 31, 0.9));
	border: 1px solid rgba(212, 175, 55, 0.24);
	border-radius: var(--pi-radius-card);
	box-shadow: 0 10px 28px rgba(9, 6, 15, 0.2);
	transition: transform var(--pi-transition-card), border-color var(--pi-transition-card), box-shadow var(--pi-transition-card);
}

/*
 * Imported Galatic homepage: color refinement only.
 * Existing section IDs are targeted so no block structure or spacing changes.
 */
.home .uagb-block-1f6df054 {
	background-color: rgba(42, 13, 69, 0.76) !important;
}

.home .uagb-block-6e8a8037 {
	background: linear-gradient(145deg, #32104F 0%, #4B136F 52%, #260B3F 100%) !important;
}

.home .uagb-block-1c438e22 {
	background: linear-gradient(155deg, #4B136F 0%, #351052 46%, #2A0D45 100%) !important;
}

.home .wp-block-spectra-container[data-spectra-id="fb54e593"] {
	background: linear-gradient(140deg, #2A0D45 0%, #55177D 48%, #351052 100%) !important;
}

.home .uagb-block-dd3543eb {
	background: linear-gradient(160deg, #3C115D 0%, #641C91 46%, #2A0D45 100%) !important;
}

.home .uagb-block-spectra-mhj0nbqx-f47afy {
	background: linear-gradient(145deg, #230A39 0%, #4B136F 54%, #32104F 100%) !important;
}

.pi-card:hover,
.pi-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, 0.48);
	box-shadow: 0 14px 34px rgba(75, 19, 111, 0.22), 0 0 18px rgba(212, 175, 55, 0.08);
}

/* Astra, WordPress, and Spectra buttons share one global treatment. */
.ast-button,
.button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.uagb-buttons-repeater.wp-block-button__link {
	min-height: 48px;
	padding: 14px 28px;
	border-radius: var(--pi-radius-button);
	font-family: Inter, sans-serif;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 6px 16px rgba(9, 6, 15, 0.2);
	transition: transform var(--pi-transition-fast), background-color var(--pi-transition-fast), border-color var(--pi-transition-fast), box-shadow var(--pi-transition-fast), color var(--pi-transition-fast);
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.uagb-buttons-repeater.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(9, 6, 15, 0.24), 0 0 18px rgba(212, 175, 55, 0.18);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.pi-button-secondary {
	color: var(--pi-marble-white);
	background: transparent;
	border: 1px solid var(--pi-imperial-gold);
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.pi-button-secondary:hover {
	color: var(--pi-marble-white);
	background: rgba(212, 175, 55, 0.1);
	border-color: var(--pi-bright-gold);
}

.pi-fade-up {
	animation: pi-fade-up 500ms ease both;
}

@keyframes pi-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 921px) {
	:root { --pi-section-padding: 64px; }
}

@media (max-width: 544px) {
	:root { --pi-section-padding: 48px; }

	.pi-container {
		width: min(calc(100% - 32px), var(--pi-content-width));
	}

	.pi-card { padding: var(--pi-space-3); }

	.ast-button,
	.button,
	button,
	input[type="button"],
	input[type="submit"],
	.wp-block-button__link,
	.uagb-buttons-repeater.wp-block-button__link {
		min-width: 44px;
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ================================================================
 * Stage 2 — Persicus Imperium header and navigation
 * Scoped to Astra header elements; homepage content is unaffected.
 * ================================================================ */
.site-header {
	position: relative;
	z-index: 100;
	background:
		radial-gradient(circle at 52% 0%, rgba(75, 19, 111, 0.3), transparent 28rem),
		linear-gradient(180deg, rgba(9, 6, 15, 0.99), rgba(20, 7, 31, 0.99) 20%, rgba(42, 13, 69, 0.98));
	border-bottom: 1px solid rgba(242, 212, 107, 0.58);
	box-shadow: 0 14px 34px rgba(9, 6, 15, 0.5), 0 1px 0 rgba(75, 19, 111, 0.42) inset;
}

.site-header::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: min(70%, 840px);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(242, 212, 107, 0.82), transparent);
	box-shadow: 0 0 16px rgba(154, 90, 230, 0.24);
	pointer-events: none;
}

.ast-primary-header-bar {
	background: transparent;
	border: 0;
}

.ast-builder-grid-row {
	min-height: 82px;
}

.site-title a,
.site-title a:focus,
.site-title a:hover {
	color: var(--pi-bright-gold) !important;
	font-family: Cinzel, serif;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-shadow: 0 1px 16px rgba(242, 212, 107, 0.16), 0 0 24px rgba(212, 175, 55, 0.2);
}

.site-title a::before {
	content: "◆";
	display: inline-block;
	margin-right: 10px;
	color: var(--pi-imperial-gold);
	font-size: 0.48em;
	vertical-align: 0.18em;
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.28);
}

.main-header-menu > .menu-item > .menu-link {
	position: relative;
	padding-inline: 11px;
	color: var(--pi-bright-gold) !important;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.025em;
}

.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 17px;
	width: 0;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, var(--pi-imperial-gold), transparent);
	transition: width var(--pi-transition-fast);
}

.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--pi-bright-gold) !important;
	text-shadow: 0 0 14px rgba(212, 175, 55, 0.24);
}

.site-header .main-header-menu .ast-icon,
.site-header .main-header-menu .dropdown-menu-toggle {
	color: var(--pi-bright-gold) !important;
}

.site-header .main-header-menu .sub-menu {
	background: linear-gradient(155deg, rgba(42, 13, 69, 0.99), rgba(20, 7, 31, 0.99));
	border-color: rgba(212, 175, 55, 0.42);
}

.site-header .main-header-menu .sub-menu .menu-link {
	color: var(--pi-bright-gold) !important;
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after {
	width: calc(100% - 22px);
}

.ast-header-button-1 .ast-custom-button {
	min-height: 44px;
	padding: 12px 20px;
	border: 1px solid var(--pi-imperial-gold);
	border-radius: var(--pi-radius-button);
	background: linear-gradient(135deg, var(--pi-imperial-gold), #E5C65A);
	color: var(--pi-deep-imperial-purple);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 18px rgba(9, 6, 15, 0.28), 0 0 14px rgba(212, 175, 55, 0.1);
}

.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 .ast-custom-button:focus {
	transform: translateY(-2px);
	background: linear-gradient(135deg, var(--pi-bright-gold), var(--pi-imperial-gold));
	color: var(--pi-deep-imperial-purple);
	box-shadow: 0 8px 20px rgba(9, 6, 15, 0.32), 0 0 18px rgba(212, 175, 55, 0.2);
}

.ast-sticky-active .site-header,
.ast-sticky-active .ast-primary-header-bar {
	background:
		radial-gradient(circle at 52% 0%, rgba(75, 19, 111, 0.26), transparent 26rem),
		linear-gradient(180deg, rgba(9, 6, 15, 0.98), rgba(20, 7, 31, 0.98) 22%, rgba(42, 13, 69, 0.98));
	backdrop-filter: blur(14px);
}

.ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle {
	color: var(--pi-marble-white);
	border: 1px solid rgba(212, 175, 55, 0.42);
	border-radius: var(--pi-radius-button);
	background: rgba(42, 13, 69, 0.72);
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background:
		radial-gradient(circle at 90% 8%, rgba(122, 44, 203, 0.22), transparent 24rem),
		linear-gradient(160deg, var(--pi-royal-purple), var(--pi-deep-imperial-purple));
	border-left: 1px solid rgba(212, 175, 55, 0.28);
}

.ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link {
	min-height: 50px;
	padding-inline: 24px;
	border-bottom: 1px solid rgba(154, 90, 230, 0.12);
	font-size: 15px;
}

@media (max-width: 1100px) and (min-width: 922px) {
	.main-header-menu > .menu-item > .menu-link {
		padding-inline: 7px;
		font-size: 13px;
	}

	.ast-header-button-1 .ast-custom-button {
		padding-inline: 15px;
	}
}

@media (max-width: 921px) {
	.ast-builder-grid-row { min-height: 70px; }

	.site-title a { letter-spacing: 0.04em; }
}

@media (max-width: 420px) {
	.site-title { font-size: 18px; }
	.site-title a::before { margin-right: 7px; }
}

/* ================================================================
 * Stage 3 — Homepage Hero
 * ================================================================ */
.pi-hero {
	position: relative;
	display: grid;
	min-height: clamp(680px, calc(100svh - 82px), 900px);
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--pi-deep-imperial-purple);
}

.pi-hero__art,
.pi-hero__veil,
.pi-hero__atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pi-hero__art {
	z-index: -4;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: saturate(1.06) contrast(1.03);
	animation: pi-hero-breathe 24s ease-in-out infinite alternate;
}

.pi-hero__veil {
	z-index: -3;
	background:
		linear-gradient(90deg, rgba(9, 6, 15, 0.96) 0%, rgba(20, 7, 31, 0.88) 26%, rgba(42, 13, 69, 0.46) 53%, rgba(9, 6, 15, 0.12) 78%),
		linear-gradient(180deg, rgba(9, 6, 15, 0.18), transparent 42%, rgba(9, 6, 15, 0.62));
}

.pi-hero__atmosphere {
	z-index: -2;
	op: auto;
	height: 38%;
	background:
		radial-gradient(ellipse at 68% 100%, rgba(154, 90, 230, 0.18), transparent 58%),
		linear-gradient(0deg, rgba(248, 248, 246, 0.06), transparent 70%);
	filter: blur(12px);
	opacity: 0.72;
	animation: pi-hero-mist 18s ease-in-out infinite alternate;
}

.pi-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(242, 212, 107, 0.48) 0 1px, transparent 1.5px),
		radial-gradient(circle, rgba(154, 90, 230, 0.36) 0 1px, transparent 1.5px);
	background-position: 12% 28%, 72% 18%;
	background-size: 210px 210px, 290px 290px;
	opacity: 0.3;
	animation: pi-hero-particles 28s linear infinite;
}

.pi-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(88%, 1120px);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.72), transparent);
	box-shadow: 0 0 22px rgba(154, 90, 230, 0.25);
}

.pi-hero__inner {
	width: min(calc(100% - 48px), var(--pi-content-width));
	margin-inline: auto;
	padding-block: 96px;
}

.pi-hero__content {
	max-width: 690px;
	padding: 34px 0 36px 32px;
	border-left: 1px solid rgba(212, 175, 55, 0.6);
	filter: drop-shadow(0 12px 32px rgba(9, 6, 15, 0.3));
}

.pi-hero__content::before,
.pi-hero__content::after {
	content: "◆";
	position: absolute;
	left: -5px;
	color: var(--pi-imperial-gold);
	font-size: 9px;
	line-height: 1;
	text-shadow: 0 0 12px rgba(212, 175, 55, 0.28);
}

.pi-hero__content::before { top: 0; }
.pi-hero__content::after { bottom: 0; }

.pi-hero__eyebrow {
	margin: 0 0 18px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.17em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-hero__title {
	max-width: 660px;
	margin: 0;
	color: var(--pi-marble-white);
	font-size: clamp(44px, 5.3vw, 72px);
	line-height: 1.05;
	letter-spacing: 0.015em;
	text-wrap: balance;
	text-shadow: 0 3px 28px rgba(9, 6, 15, 0.72), 0 0 34px rgba(154, 90, 230, 0.14);
}

.pi-hero__lead {
	max-width: 630px;
	margin: 24px 0 0;
	color: rgba(248, 248, 246, 0.84);
	font-size: 19px;
	line-height: 1.7;
	text-shadow: 0 2px 16px rgba(9, 6, 15, 0.86);
}

.pi-hero__paths {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	color: rgba(248, 248, 246, 0.72);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pi-hero__paths li::before {
	content: "◇";
	margin-right: 8px;
	color: var(--pi-imperial-gold);
}

.pi-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.pi-hero__button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: var(--pi-radius-button);
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform var(--pi-transition-fast), background-color var(--pi-transition-fast), border-color var(--pi-transition-fast), box-shadow var(--pi-transition-fast);
}

.pi-hero__button--primary {
	border: 1px solid var(--pi-imperial-gold);
	background: linear-gradient(135deg, var(--pi-imperial-gold), #E5C65A);
	color: var(--pi-deep-imperial-purple);
	box-shadow: 0 8px 24px rgba(9, 6, 15, 0.34), 0 0 18px rgba(212, 175, 55, 0.1);
}

.pi-hero__button--secondary {
	border: 1px solid rgba(242, 212, 107, 0.72);
	background: rgba(42, 13, 69, 0.48);
	color: var(--pi-marble-white);
	box-shadow: 0 8px 24px rgba(9, 6, 15, 0.22);
	backdrop-filter: blur(8px);
}

.pi-hero__button:hover,
.pi-hero__button:focus-visible {
	transform: translateY(-2px);
}

.pi-hero__button--primary:hover,
.pi-hero__button--primary:focus-visible {
	background: linear-gradient(135deg, var(--pi-bright-gold), var(--pi-imperial-gold));
	color: var(--pi-deep-imperial-purple);
	box-shadow: 0 10px 26px rgba(9, 6, 15, 0.4), 0 0 20px rgba(212, 175, 55, 0.2);
}

.pi-hero__button--secondary:hover,
.pi-hero__button--secondary:focus-visible {
	border-color: var(--pi-bright-gold);
	background: rgba(75, 19, 111, 0.68);
	color: var(--pi-marble-white);
}

@keyframes pi-hero-breathe {
	from { transform: scale(1); }
	to { transform: scale(1.035); }
}

@keyframes pi-hero-mist {
	from { transform: translate3d(-2%, 2%, 0) scale(1.04); opacity: 0.56; }
	to { transform: translate3d(3%, -1%, 0) scale(1.1); opacity: 0.82; }
}

@keyframes pi-hero-particles {
	from { background-position: 12% 28%, 72% 18%; }
	to { background-position: 14% 6%, 70% -8%; }
}

@media (max-width: 921px) {
	.pi-hero {
		min-height: clamp(650px, calc(100svh - 70px), 820px);
	}

	.pi-hero__art { object-position: 60% center; }

	.pi-hero__veil {
		background:
			linear-gradient(90deg, rgba(9, 6, 15, 0.95), rgba(20, 7, 31, 0.76) 60%, rgba(42, 13, 69, 0.3)),
			linear-gradient(180deg, rgba(9, 6, 15, 0.14), transparent 38%, rgba(9, 6, 15, 0.7));
	}

	.pi-hero__inner { padding-block: 72px; }
	.pi-hero__content { max-width: 620px; }
}

@media (max-width: 544px) {
	.pi-hero {
		min-height: 680px;
		place-items: end center;
	}

	.pi-hero__art { object-position: 68% center; }

	.pi-hero__veil {
		background:
			linear-gradient(180deg, rgba(9, 6, 15, 0.22), rgba(20, 7, 31, 0.64) 30%, rgba(9, 6, 15, 0.96) 75%),
			linear-gradient(90deg, rgba(9, 6, 15, 0.54), transparent 75%);
	}

	.pi-hero__inner {
		width: min(calc(100% - 32px), var(--pi-content-width));
		padding-block: 72px 54px;
	}

	.pi-hero__content {
		padding: 24px 0 26px 20px;
	}

	.pi-hero__eyebrow {
		margin-bottom: 14px;
		font-size: 11px;
		letter-spacing: 0.13em;
	}

	.pi-hero__title { font-size: 40px; }

	.pi-hero__lead {
		margin-top: 18px;
		font-size: 16px;
		line-height: 1.65;
	}

	.pi-hero__paths {
		gap: 7px 16px;
		margin-top: 18px;
		font-size: 10px;
	}

	.pi-hero__actions {
		display: grid;
		gap: 10px;
		margin-top: 26px;
	}

	.pi-hero__button { width: 100%; }
}

/* ================================================================
 * Stage 4 — Ecosystem Overview
 * ================================================================ */
.pi-ecosystem {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: 96px;
	background:
		radial-gradient(circle at 50% 0%, rgba(122, 44, 203, 0.2), transparent 34rem),
		radial-gradient(circle at 8% 68%, rgba(75, 19, 111, 0.3), transparent 32rem),
		linear-gradient(180deg, #14071F 0%, #2A0D45 46%, #351052 100%);
}

.pi-ecosystem::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background-image:
		linear-gradient(30deg, transparent 48%, rgba(242, 212, 107, 0.035) 49%, rgba(242, 212, 107, 0.035) 51%, transparent 52%),
		linear-gradient(150deg, transparent 48%, rgba(154, 90, 230, 0.045) 49%, rgba(154, 90, 230, 0.045) 51%, transparent 52%);
	background-size: 88px 152px;
	opacity: 0.48;
}

.pi-ecosystem::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 34px;
	right: max(24px, calc((100% - var(--pi-content-width)) / 2));
	bottom: 34px;
	left: max(24px, calc((100% - var(--pi-content-width)) / 2));
	border: 1px solid rgba(212, 175, 55, 0.12);
	border-block-color: rgba(212, 175, 55, 0.22);
	pointer-events: none;
}

.pi-ecosystem__inner {
	width: min(calc(100% - 48px), var(--pi-content-width));
	margin-inline: auto;
}

.pi-ecosystem__heading {
	display: grid;
	justify-items: center;
	margin: 0 auto 48px;
	text-align: center;
}

.pi-ecosystem__eyebrow {
	margin: 0 0 14px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-ecosystem__title {
	max-width: 780px;
	margin: 0;
	color: var(--pi-marble-white);
	font-size: 44px;
	line-height: 1.16;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(9, 6, 15, 0.62);
}

.pi-ecosystem__ornament {
	display: flex;
	width: min(360px, 72vw);
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	color: var(--pi-imperial-gold);
}

.pi-ecosystem__ornament::before,
.pi-ecosystem__ornament::after {
	content: "";
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, currentColor);
}

.pi-ecosystem__ornament::after {
	background: linear-gradient(90deg, currentColor, transparent);
}

.pi-ecosystem__ornament span {
	font-size: 10px;
	line-height: 1;
}

.pi-ecosystem__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pi-ecosystem-card {
	position: relative;
	display: flex;
	min-height: 310px;
	flex-direction: column;
	padding: 32px;
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(75, 19, 111, 0.96), rgba(42, 13, 69, 0.98) 56%, rgba(20, 7, 31, 0.98));
	border: 1px solid rgba(212, 175, 55, 0.34);
	border-radius: var(--pi-radius-card);
	box-shadow:
		0 12px 28px rgba(9, 6, 15, 0.24),
		0 1px 0 rgba(248, 248, 246, 0.06) inset,
		0 -1px 0 rgba(9, 6, 15, 0.48) inset;
	transition: transform var(--pi-transition-card), border-color var(--pi-transition-card), box-shadow var(--pi-transition-card), background var(--pi-transition-card);
}

.pi-ecosystem-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(242, 212, 107, 0.62), transparent);
}

.pi-ecosystem-card::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -80px;
	width: 190px;
	height: 190px;
	border: 1px solid rgba(154, 90, 230, 0.08);
	border-radius: 50%;
	box-shadow: 0 0 0 24px rgba(154, 90, 230, 0.025), 0 0 0 48px rgba(154, 90, 230, 0.018);
	pointer-events: none;
}

.pi-ecosystem-card:hover,
.pi-ecosystem-card:focus-within {
	transform: translateY(-4px);
	background: linear-gradient(145deg, rgba(85, 23, 125, 0.98), rgba(42, 13, 69, 0.98) 56%, rgba(20, 7, 31, 0.98));
	border-color: rgba(242, 212, 107, 0.66);
	box-shadow: 0 18px 38px rgba(9, 6, 15, 0.3), 0 0 22px rgba(122, 44, 203, 0.12), 0 1px 0 rgba(248, 248, 246, 0.08) inset;
}

.pi-ecosystem-card__icon {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	margin-bottom: 24px;
	color: var(--pi-bright-gold);
	background: linear-gradient(145deg, rgba(20, 7, 31, 0.76), rgba(75, 19, 111, 0.5));
	border: 1px solid rgba(212, 175, 55, 0.42);
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(9, 6, 15, 0.22), 0 0 14px rgba(212, 175, 55, 0.06);
}

.pi-ecosystem-card__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.pi-ecosystem-card__title {
	margin: 0;
	color: var(--pi-marble-white);
	font-size: 26px;
	line-height: 1.2;
}

.pi-ecosystem-card__description {
	margin: 14px 0 28px;
	color: rgba(248, 248, 246, 0.82);
	font-size: 16px;
	line-height: 1.65;
}

.pi-ecosystem-card__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: auto;
	color: var(--pi-bright-gold);
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pi-ecosystem-card__link span {
	transition: transform var(--pi-transition-fast);
}

.pi-ecosystem-card__link:hover,
.pi-ecosystem-card__link:focus-visible {
	color: var(--pi-bright-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pi-ecosystem-card__link:hover span,
.pi-ecosystem-card__link:focus-visible span {
	transform: translateX(3px);
}

@media (max-width: 921px) {
	.pi-ecosystem { padding-block: 64px; }

	.pi-ecosystem__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pi-ecosystem__title { font-size: 38px; }
	.pi-ecosystem-card { min-height: 290px; }
}

@media (max-width: 620px) {
	.pi-ecosystem { padding-block: 48px; }

	.pi-ecosystem::after {
		top: 20px;
		right: 12px;
		bottom: 20px;
		left: 12px;
	}

	.pi-ecosystem__inner {
		width: min(calc(100% - 32px), var(--pi-content-width));
	}

	.pi-ecosystem__heading { margin-bottom: 32px; }
	.pi-ecosystem__title { font-size: 32px; }

	.pi-ecosystem__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pi-ecosystem-card {
		min-height: 0;
		padding: 24px;
	}

	.pi-ecosystem-card__icon {
		width: 52px;
		height: 52px;
		margin-bottom: 20px;
	}

	.pi-ecosystem-card__title { font-size: 24px; }
	.pi-ecosystem-card__description { margin-block: 12px 24px; }
}

/* ================================================================
 * Stage 5 — Why Persicus Imperium?
 * ================================================================ */
.pi-principles {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: 96px;
	background:
		radial-gradient(circle at 86% 22%, rgba(154, 90, 230, 0.13), transparent 30rem),
		radial-gradient(circle at 16% 84%, rgba(122, 44, 203, 0.18), transparent 34rem),
		linear-gradient(145deg, #351052 0%, #2A0D45 45%, #14071F 100%);
}

.pi-principles::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background-image:
		radial-gradient(circle at center, rgba(242, 212, 107, 0.06) 0 1px, transparent 1.5px),
		linear-gradient(90deg, transparent 49.5%, rgba(154, 90, 230, 0.035) 50%, transparent 50.5%);
	background-size: 72px 72px, 180px 100%;
	opacity: 0.5;
}

.pi-principles::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 34px;
	right: max(24px, calc((100% - var(--pi-content-width)) / 2));
	bottom: 34px;
	left: max(24px, calc((100% - var(--pi-content-width)) / 2));
	border: 1px solid rgba(212, 175, 55, 0.13);
	border-inline-color: rgba(154, 90, 230, 0.14);
	pointer-events: none;
}

.pi-principles__inner {
	width: min(calc(100% - 48px), 1120px);
	margin-inline: auto;
}

.pi-principles__heading {
	display: grid;
	width: 100%;
	justify-items: center;
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center;
}

.pi-principles__eyebrow {
	margin: 0 0 16px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-principles__title {
	margin: 0;
	color: var(--pi-marble-white);
	font-size: 44px;
	line-height: 1.16;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(9, 6, 15, 0.62);
}

.pi-principles__subtitle {
	max-width: 720px;
	margin: 16px 0 0;
	color: rgba(248, 248, 246, 0.82);
	font-size: 18px;
	line-height: 1.65;
	text-wrap: balance;
}

.pi-principles__ornament {
	display: flex;
	width: min(360px, 72vw);
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	color: var(--pi-imperial-gold);
}

.pi-principles__ornament::before,
.pi-principles__ornament::after {
	content: "";
	height: 1px;
	flex: 1;
	background: linear-gradient(90deg, transparent, currentColor);
}

.pi-principles__ornament::after {
	background: linear-gradient(90deg, currentColor, transparent);
}

.pi-principles__ornament span {
	font-size: 10px;
	line-height: 1;
}

.pi-principles__grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-inline: auto;
}

.pi-principle-card {
	position: relative;
	display: flex;
	min-height: 300px;
	flex-direction: column;
	padding: 32px;
	overflow: hidden;
	background:
		linear-gradient(155deg, rgba(42, 13, 69, 0.98), rgba(20, 7, 31, 0.98) 76%),
		var(--pi-deep-imperial-purple);
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: var(--pi-radius-card);
	box-shadow: 0 12px 28px rgba(9, 6, 15, 0.25), 0 1px 0 rgba(248, 248, 246, 0.05) inset;
	transition: transform var(--pi-transition-card), border-color var(--pi-transition-card), box-shadow var(--pi-transition-card), background var(--pi-transition-card);
}

.pi-principle-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(242, 212, 107, 0.54), transparent);
}

.pi-principle-card::after {
	content: attr(data-number);
	position: absolute;
	right: 22px;
	bottom: 8px;
	color: rgba(154, 90, 230, 0.08);
	font-family: Cinzel, serif;
	font-size: 68px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.pi-principle-card:hover,
.pi-principle-card:focus-within {
	transform: translateY(-4px);
	background:
		linear-gradient(155deg, rgba(75, 19, 111, 0.96), rgba(20, 7, 31, 0.98) 76%),
		var(--pi-deep-imperial-purple);
	border-color: rgba(242, 212, 107, 0.62);
	box-shadow: 0 18px 38px rgba(9, 6, 15, 0.3), 0 0 22px rgba(122, 44, 203, 0.11), 0 1px 0 rgba(248, 248, 246, 0.07) inset;
}

.pi-principle-card__icon {
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	margin-bottom: 24px;
	color: var(--pi-bright-gold);
	background: linear-gradient(145deg, rgba(9, 6, 15, 0.78), rgba(75, 19, 111, 0.42));
	border: 1px solid rgba(212, 175, 55, 0.4);
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(9, 6, 15, 0.22), 0 0 14px rgba(212, 175, 55, 0.05);
}

.pi-principle-card__icon svg {
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.pi-principle-card__title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--pi-marble-white);
	font-size: 25px;
	line-height: 1.25;
}

.pi-principle-card__description {
	position: relative;
	z-index: 1;
	margin: 14px 0 0;
	color: rgba(248, 248, 246, 0.82);
	font-size: 16px;
	line-height: 1.65;
}

@media (max-width: 921px) {
	.pi-principles { padding-block: 64px; }

	.pi-principles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pi-principles__title { font-size: 38px; }
	.pi-principle-card { min-height: 290px; }
}

@media (max-width: 620px) {
	.pi-principles { padding-block: 48px; }

	.pi-principles::after {
		top: 20px;
		right: 12px;
		bottom: 20px;
		left: 12px;
	}

	.pi-principles__inner {
		width: min(calc(100% - 32px), var(--pi-content-width));
	}

	.pi-principles__heading { margin-bottom: 32px; }
	.pi-principles__title { font-size: 32px; }

	.pi-principles__subtitle {
		margin-top: 16px;
		font-size: 16px;
	}

	.pi-principles__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pi-principle-card {
		min-height: 0;
		padding: 24px;
	}

	.pi-principle-card__icon {
		width: 52px;
		height: 52px;
		margin-bottom: 20px;
	}

	.pi-principle-card__title { font-size: 23px; }
}

/* Persian Community destination */
.pi-community-page {
	position: relative;
	overflow: hidden;
	padding: 96px 0;
	background:
		radial-gradient(circle at 50% 10%, rgba(122, 44, 203, 0.24), transparent 38%),
		linear-gradient(180deg, #14071f 0%, #2a0d45 52%, #1a0828 100%);
}

.pi-community-page::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(154, 90, 230, 0.04), transparent);
}

.pi-community-page__inner {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 48px), 1120px);
	margin-inline: auto;
}

.pi-community-page__heading {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.pi-community-page__eyebrow,
.pi-channel-card__type {
	margin: 0 0 16px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-community-page__heading h1 {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 52px;
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.pi-community-page__lead {
	margin: 24px 0 12px;
	color: var(--pi-marble-white);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.55;
}

.pi-community-page__heading > p:last-child {
	margin: 0;
	color: var(--pi-text-secondary);
	font-size: 18px;
	line-height: 1.65;
}

.pi-community-page__divider {
	display: flex;
	width: min(360px, 72vw);
	align-items: center;
	gap: 12px;
	margin: 32px auto 48px;
	color: var(--pi-imperial-gold);
}

.pi-community-page__divider::before,
.pi-community-page__divider::after {
	height: 1px;
	flex: 1;
	content: "";
	background: linear-gradient(90deg, transparent, currentColor);
}

.pi-community-page__divider::after {
	background: linear-gradient(90deg, currentColor, transparent);
}

.pi-community-page__section-title {
	margin: 0 0 32px;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 32px;
	font-weight: 600;
	text-align: center;
}

.pi-community-page__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pi-channel-card {
	position: relative;
	display: flex;
	min-height: 330px;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	border: 1px solid rgba(212, 175, 55, 0.38);
	border-radius: 12px;
	background:
		linear-gradient(145deg, rgba(75, 19, 111, 0.48), rgba(20, 7, 31, 0.92)),
		radial-gradient(circle at 85% 10%, rgba(154, 90, 230, 0.16), transparent 42%);
	box-shadow: 0 18px 44px rgba(9, 6, 15, 0.25);
	transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.pi-channel-card__icon {
	display: grid;
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	place-items: center;
	border: 1px solid rgba(212, 175, 55, 0.48);
	border-radius: 50%;
	color: var(--pi-bright-gold);
	font-size: 24px;
}

.pi-channel-card__type { margin-bottom: 10px; }

.pi-channel-card h3 {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
}

.pi-channel-card h3 span {
	font-family: Inter, sans-serif;
	font-size: 0.82em;
}

.pi-channel-card > p:not(.pi-channel-card__type) {
	margin: 16px 0 24px;
	color: var(--pi-text-secondary);
	font-size: 16px;
	line-height: 1.65;
}

.pi-channel-card a {
	margin-top: auto;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.pi-channel-card a:hover { color: var(--pi-marble-white); }
.pi-channel-card a:focus-visible { outline: 3px solid var(--pi-bright-gold); outline-offset: 5px; }

.pi-channel-card:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 212, 107, 0.72);
	box-shadow: 0 22px 54px rgba(9, 6, 15, 0.34), 0 0 22px rgba(122, 44, 203, 0.14);
}

.pi-community-page__future {
	max-width: 720px;
	margin: 32px auto 0;
	color: var(--pi-text-secondary);
	font-size: 15px;
	line-height: 1.65;
	text-align: center;
}

@media (max-width: 921px) {
	.pi-community-page { padding: 64px 0; }
	.pi-community-page__heading h1 { font-size: 42px; }
}

@media (max-width: 620px) {
	.pi-community-page { padding: 48px 0; }
	.pi-community-page__inner { width: min(calc(100% - 32px), 1120px); }
	.pi-community-page__heading h1 { font-size: 36px; }
	.pi-community-page__lead,
	.pi-community-page__heading > p:last-child { font-size: 16px; }
	.pi-community-page__divider { margin: 24px auto 32px; }
	.pi-community-page__section-title { font-size: 28px; margin-bottom: 24px; }
	.pi-community-page__grid { grid-template-columns: 1fr; gap: 16px; }
	.pi-channel-card { min-height: 0; padding: 24px; }
	.pi-channel-card h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.pi-channel-card { transition: none; }
	.pi-channel-card:hover { transform: none; }
}

/* Canonical resource and download directories */
.pi-resource-page {
	position: relative;
	overflow: hidden;
	padding: 96px 0;
	background:
		radial-gradient(circle at 50% 6%, rgba(122, 44, 203, 0.22), transparent 36%),
		linear-gradient(180deg, #14071f 0%, #2a0d45 52%, #1a0828 100%);
}

.pi-resource-page__inner {
	position: relative;
	z-index: 1;
}

.pi-resource-page__heading {
	max-width: 860px;
	margin: 0 auto 48px;
	text-align: center;
}

.pi-resource-page__eyebrow,
.pi-download-card__type {
	margin: 0 0 16px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pi-resource-page__heading h1 {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 52px;
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.pi-resource-page__heading > p:not(.pi-resource-page__eyebrow) {
	max-width: 760px;
	margin: 20px auto 0;
	color: var(--pi-text-secondary);
	font-size: 18px;
	line-height: 1.65;
	text-wrap: balance;
}

.pi-resource-page__divider {
	display: flex;
	width: min(360px, 72vw);
	align-items: center;
	gap: 12px;
	margin: 24px auto 0;
	color: var(--pi-imperial-gold);
}

.pi-resource-page__divider::before,
.pi-resource-page__divider::after {
	height: 1px;
	flex: 1;
	content: "";
	background: linear-gradient(90deg, transparent, currentColor);
}

.pi-resource-page__divider::after { background: linear-gradient(90deg, currentColor, transparent); }

.pi-resource-intro {
	max-width: 820px;
	margin: 0 auto 48px;
	text-align: center;
}

.pi-resource-intro h2 {
	margin: 0 0 16px;
	font-family: Cinzel, serif;
	font-size: 32px;
}

.pi-resource-intro p,
.pi-resource-future,
.pi-resource-credit {
	color: var(--pi-text-secondary);
	font-size: 16px;
	line-height: 1.65;
}

.pi-resource-grid,
.pi-download-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pi-resource-grid--single {
	max-width: 680px;
	grid-template-columns: 1fr;
	margin-inline: auto;
}

.pi-resource-card,
.pi-download-card,
.pi-resource-notice {
	border: 1px solid rgba(212, 175, 55, 0.38);
	border-radius: 12px;
	background:
		linear-gradient(145deg, rgba(75, 19, 111, 0.5), rgba(20, 7, 31, 0.94)),
		radial-gradient(circle at 85% 12%, rgba(154, 90, 230, 0.16), transparent 42%);
	box-shadow: 0 18px 44px rgba(9, 6, 15, 0.24);
}

.pi-resource-card {
	display: flex;
	min-height: 250px;
	flex-direction: column;
	align-items: flex-start;
	padding: 32px;
	color: var(--pi-marble-white);
	text-decoration: none;
	transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}

.pi-resource-card > span {
	margin-bottom: 16px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pi-resource-card > strong {
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.35;
}

.pi-resource-card > p {
	margin: 14px 0 0;
	color: var(--pi-text-secondary);
	font-size: 16px;
	line-height: 1.6;
}

.pi-resource-card > em {
	margin-top: auto;
	padding-top: 24px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

.pi-resource-card:hover,
.pi-resource-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(242, 212, 107, 0.74);
	box-shadow: 0 22px 54px rgba(9, 6, 15, 0.34), 0 0 22px rgba(122, 44, 203, 0.14);
}

.pi-resource-card:focus-visible,
.pi-download-card a:focus-visible,
.pi-resource-notice a:focus-visible,
.pi-resource-credit a:focus-visible {
	outline: 3px solid var(--pi-bright-gold);
	outline-offset: 5px;
}

.pi-resource-notice {
	max-width: 900px;
	margin: 0 auto 48px;
	padding: 24px 32px;
}

.pi-resource-notice strong {
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 20px;
}

.pi-resource-notice p {
	margin: 10px 0 0;
	color: var(--pi-text-secondary);
	font-size: 16px;
	line-height: 1.65;
}

.pi-resource-notice a,
.pi-resource-credit a {
	display: inline-block;
	margin-top: 14px;
	color: var(--pi-bright-gold);
	font-weight: 600;
}

.pi-resource-credit {
	max-width: 900px;
	margin: -24px auto 48px;
	text-align: center;
}

.pi-download-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pi-download-card {
	display: flex;
	min-height: 270px;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
}

.pi-download-card__type { margin-bottom: 12px; }

.pi-download-card h2 {
	margin: 0;
	color: var(--pi-marble-white);
	font-family: Cinzel, serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
}

.pi-download-card > p:not(.pi-download-card__type) {
	margin: 14px 0 24px;
	color: var(--pi-text-secondary);
	font-size: 15px;
	line-height: 1.6;
}

.pi-download-card > a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 10px 16px;
	border: 1px solid var(--pi-imperial-gold);
	border-radius: 8px;
	color: var(--pi-bright-gold);
	font-family: Cinzel, serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.pi-download-card > a:hover {
	background: rgba(212, 175, 55, 0.12);
	color: var(--pi-marble-white);
}

.pi-resource-future {
	max-width: 680px;
	margin: 32px auto 0;
	text-align: center;
}

@media (max-width: 921px) {
	.pi-resource-page { padding: 64px 0; }
	.pi-resource-page__heading h1 { font-size: 42px; }
	.pi-download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.pi-resource-page { padding: 48px 0; }
	.pi-resource-page__heading { margin-bottom: 32px; }
	.pi-resource-page__heading h1 { font-size: 36px; }
	.pi-resource-page__heading > p:not(.pi-resource-page__eyebrow) { font-size: 16px; }
	.pi-resource-grid,
	.pi-download-grid { grid-template-columns: 1fr; gap: 16px; }
	.pi-resource-card { min-height: 0; padding: 24px; }
	.pi-download-card { min-height: 0; }
	.pi-resource-notice { margin-bottom: 32px; padding: 24px; }
	.pi-resource-credit { margin: -8px auto 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.pi-resource-card { transition: none; }
	.pi-resource-card:hover,
	.pi-resource-card:focus-visible { transform: none; }
}