/* ARYF Programs page — Sparks-style single-page experience */

.aryf-programs {
	--aryf-prog-text: #f5f7fa;
	--aryf-prog-text-soft: #a8b0bb;
	--aryf-prog-text-mute: #6b7480;
	--aryf-prog-border: rgba(255,255,255,0.08);
	--aryf-prog-card-bg: rgba(255,255,255,0.03);
	--aryf-prog-card-bg-hover: rgba(255,255,255,0.05);
	--aryf-prog-accent: #3d9eff;
	--aryf-prog-accent-orange: #ff7a3d;
	--aryf-prog-accent-teal: #2bd4a8;
	--aryf-prog-accent-purple: #b366ff;
	--aryf-prog-accent-pink: #ff5f9e;
	--aryf-prog-accent-yellow: #ffc933;

	/* Transparent so the parent theme's body background (gradient on prod)
	   shows through. Avoids the solid rectangle bleeding behind the sticky
	   header. */
	background: transparent;
	color: var(--aryf-prog-text);
	font-family: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	overflow-x: hidden;
}

/* Ambient gradient backdrop — fixed to viewport so it feels atmospheric
   while scrolling. Sticky header has its own bg that occludes it. */
.aryf-programs::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(60% 50% at 20% 10%, rgba(61,158,255,0.10), transparent 70%),
		radial-gradient(50% 40% at 85% 80%, rgba(179,102,255,0.08), transparent 70%),
		radial-gradient(40% 30% at 50% 50%, rgba(43,212,168,0.05), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.aryf-programs > * { position: relative; z-index: 1; }

/* Sticky left rail navigation (desktop) */
.aryf-prog-nav {
	position: fixed;
	left: 32px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	pointer-events: auto;
}
.aryf-prog-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.aryf-prog-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--aryf-prog-text-mute);
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}
.aryf-prog-nav a .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	flex-shrink: 0;
	transition: all 0.25s ease;
}
.aryf-prog-nav a .label {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.aryf-prog-nav a:hover .label,
.aryf-prog-nav.is-hover a .label {
	opacity: 1;
	transform: translateX(0);
}
.aryf-prog-nav a.is-active {
	color: var(--aryf-prog-text);
}
.aryf-prog-nav a.is-active .dot {
	background: var(--aryf-prog-accent);
	box-shadow: 0 0 0 4px rgba(61,158,255,0.18);
	transform: scale(1.2);
}

/* Sections — content-sized, generous but not full-viewport */
.aryf-prog-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 72px 24px;
	box-sizing: border-box;
}
.aryf-prog-inner {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}
.aryf-prog-section--wide .aryf-prog-inner {
	max-width: 1100px;
}

/* Hero is full-viewport for splash impact */
.aryf-prog-hero {
	text-align: center;
	min-height: 92vh;
	padding: 96px 24px;
}
.aryf-prog-eyebrow {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--aryf-prog-accent);
	margin: 0 0 24px;
	font-weight: 600;
}
.aryf-prog-title {
	font-size: clamp(40px, 7vw, 78px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
	background: linear-gradient(135deg, #ffffff 0%, #c4d3e6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.aryf-prog-lede {
	font-size: clamp(16px, 2.2vw, 20px);
	line-height: 1.55;
	color: var(--aryf-prog-text-soft);
	max-width: 620px;
	margin: 0 auto 56px;
}
.aryf-prog-scroll-cue {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--aryf-prog-text-soft);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.05em;
	padding: 12px 22px;
	border: 1px solid var(--aryf-prog-border);
	border-radius: 999px;
	background: var(--aryf-prog-card-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: all 0.25s ease;
}
.aryf-prog-scroll-cue:hover {
	color: var(--aryf-prog-text);
	border-color: var(--aryf-prog-accent);
	transform: translateY(-2px);
}
.aryf-prog-scroll-cue svg {
	animation: aryf-prog-bounce 2s ease-in-out infinite;
}
@keyframes aryf-prog-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* Glass cards */
.aryf-prog-card,
.aryf-prog-subcard {
	background: var(--aryf-prog-card-bg);
	border: 1px solid var(--aryf-prog-border);
	border-radius: 24px;
	padding: 48px 44px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.aryf-prog-card:hover {
	border-color: rgba(255,255,255,0.16);
}

.aryf-prog-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.aryf-prog-num {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--aryf-prog-accent);
	font-variant-numeric: tabular-nums;
}
.aryf-prog-tag {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aryf-prog-text-mute);
	padding: 4px 12px;
	border: 1px solid var(--aryf-prog-border);
	border-radius: 999px;
}

.aryf-prog-h {
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--aryf-prog-text);
}
.aryf-prog-sub {
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.4;
	color: var(--aryf-prog-accent);
	font-weight: 500;
	margin: 0 0 24px;
}
.aryf-prog-body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--aryf-prog-text-soft);
	margin: 0 0 28px;
}
.aryf-prog-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.aryf-prog-bullets li {
	font-size: 15px;
	line-height: 1.5;
	color: var(--aryf-prog-text-soft);
	padding-left: 26px;
	position: relative;
}
.aryf-prog-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 2px;
	background: var(--aryf-prog-accent);
	border-radius: 1px;
}
.aryf-prog-soon {
	font-size: 12px;
	color: var(--aryf-prog-text-mute);
	font-style: italic;
	margin-left: 6px;
}

/* AI section sub-grid */
.aryf-prog-card--lead {
	margin-bottom: 28px;
}
.aryf-prog-subgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.aryf-prog-subcard {
	padding: 32px 28px;
}
.aryf-prog-subcard:hover {
	transform: translateY(-3px);
	border-color: rgba(255,255,255,0.18);
}
.aryf-prog-subnum {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--aryf-prog-accent);
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: 12px;
}
.aryf-prog-subcard h3 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--aryf-prog-text);
}
.aryf-prog-subcard p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--aryf-prog-text-soft);
	margin: 0;
}

/* Per-section accent override */
.aryf-prog-section[data-accent="orange"] { --aryf-prog-accent: var(--aryf-prog-accent-orange); }
.aryf-prog-section[data-accent="teal"]   { --aryf-prog-accent: var(--aryf-prog-accent-teal); }
.aryf-prog-section[data-accent="purple"] { --aryf-prog-accent: var(--aryf-prog-accent-purple); }
.aryf-prog-section[data-accent="pink"]   { --aryf-prog-accent: var(--aryf-prog-accent-pink); }
.aryf-prog-section[data-accent="yellow"] { --aryf-prog-accent: var(--aryf-prog-accent-yellow); }

/* CTA */
.aryf-prog-cta { text-align: center; }
.aryf-prog-cta-title {
	font-size: clamp(36px, 6vw, 60px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.aryf-prog-cta-sub {
	font-size: 18px;
	color: var(--aryf-prog-text-soft);
	margin: 0 0 48px;
}
.aryf-prog-cta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.aryf-prog-cta-card {
	background: var(--aryf-prog-card-bg);
	border: 1px solid var(--aryf-prog-border);
	border-radius: 18px;
	padding: 32px 24px;
	text-decoration: none;
	color: var(--aryf-prog-text);
	display: flex;
	flex-direction: column;
	gap: 12px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: all 0.25s ease;
}
.aryf-prog-cta-card:hover {
	transform: translateY(-4px);
	border-color: var(--aryf-prog-accent);
	background: var(--aryf-prog-card-bg-hover);
}
.aryf-prog-cta-h {
	font-size: 20px;
	font-weight: 600;
}
.aryf-prog-cta-p {
	font-size: 14px;
	color: var(--aryf-prog-text-soft);
	line-height: 1.5;
}

/* Tablet */
@media (max-width: 1024px) {
	.aryf-prog-nav { left: 18px; }
	.aryf-prog-subgrid { grid-template-columns: 1fr; }
	.aryf-prog-card { padding: 36px 30px; }
	.aryf-prog-cta-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* Mobile */
@media (max-width: 768px) {
	.aryf-prog-section { padding: 56px 20px; }
	.aryf-prog-hero { padding: 80px 20px; min-height: 85vh; }

	/* Top progress dots instead of left rail */
	.aryf-prog-nav {
		left: 0;
		right: 0;
		top: 12px;
		bottom: auto;
		transform: none;
		display: flex;
		justify-content: center;
		pointer-events: none;
	}
	.aryf-prog-nav ol {
		flex-direction: row;
		gap: 10px;
		background: rgba(10,14,18,0.7);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		padding: 10px 14px;
		border-radius: 999px;
		border: 1px solid var(--aryf-prog-border);
		pointer-events: auto;
	}
	.aryf-prog-nav a .label { display: none; }
	.aryf-prog-nav a .dot { width: 7px; height: 7px; }

	.aryf-prog-card { padding: 28px 22px; border-radius: 18px; }
	.aryf-prog-bullets li { font-size: 14px; }
}