/* ── Home challenge promo ── */
.hc-promo {
	--hc-primary: #066ac9;
	--hc-primary-deep: #044a8d;
	--hc-ink: #0f172a;
	--hc-muted: #64748b;
	--hc-code-bg: #1e1e2e;
	--hc-success: #10b981;
	position: relative;
	overflow: hidden;
	padding: 1rem 0 3.5rem;
	isolation: isolate;
}

.hc-promo__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 70% 55% at 85% 15%, rgba(6, 106, 201, 0.12), transparent 55%),
		radial-gradient(ellipse 55% 45% at 10% 90%, rgba(16, 185, 129, 0.08), transparent 50%),
		linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.hc-promo__panel {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 2rem;
	align-items: center;
	padding: 2rem 2.25rem;
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(6, 106, 201, 0.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 40px -28px rgba(4, 74, 141, 0.4);
	animation: hc-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hc-promo__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--hc-primary);
	margin-bottom: 0.75rem;
}

.hc-promo__eyebrow i {
	font-size: 1rem;
}

.hc-promo__title {
	font-size: clamp(1.45rem, 2.5vw, 2.05rem);
	font-weight: 800;
	line-height: 1.35;
	color: var(--hc-ink);
	margin: 0 0 0.7rem;
}

.hc-promo__title em {
	font-style: normal;
	background: linear-gradient(120deg, var(--hc-primary), #0ea5e9 70%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hc-promo__lead {
	color: var(--hc-muted);
	font-size: 0.98rem;
	line-height: 1.75;
	margin: 0 0 1.25rem;
	max-width: 34rem;
}

.hc-promo__levels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.4rem;
	padding: 0;
	list-style: none;
}

.hc-promo__levels li {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.35rem 0.7rem;
	border-radius: 0.55rem;
	letter-spacing: 0.01em;
}

.hc-promo__levels .easy {
	color: #047857;
	background: rgba(16, 185, 129, 0.12);
}

.hc-promo__levels .medium {
	color: #b45309;
	background: rgba(245, 158, 11, 0.14);
}

.hc-promo__levels .hard {
	color: #b91c1c;
	background: rgba(239, 68, 68, 0.12);
}

.hc-promo__levels .lang {
	color: var(--hc-primary-deep);
	background: rgba(6, 106, 201, 0.1);
}

.hc-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.35rem;
	border-radius: 0.7rem;
	background: linear-gradient(135deg, var(--hc-primary) 0%, var(--hc-primary-deep) 100%);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
	box-shadow: 0 10px 24px -14px rgba(6, 106, 201, 0.8);
}

.hc-promo__cta:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	color: #fff !important;
	box-shadow: 0 14px 28px -12px rgba(6, 106, 201, 0.75);
}

.hc-promo__cta i {
	transition: transform 0.25s ease;
}

.hc-promo__cta:hover i {
	transform: translateX(-3px);
}

/* Code window */
.hc-promo__editor {
	position: relative;
	border-radius: 1rem;
	background: var(--hc-code-bg);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow:
		0 24px 48px -24px rgba(15, 23, 42, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	overflow: hidden;
	direction: ltr;
	text-align: left;
	animation: hc-rise 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hc-promo__editor-bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hc-promo__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.hc-promo__dot--r { background: #ff5f57; }
.hc-promo__dot--y { background: #febc2e; }
.hc-promo__dot--g { background: #28c840; }

.hc-promo__editor-file {
	margin-inline-start: 0.55rem;
	font-family: Consolas, "Cascadia Code", monospace;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.55);
}

.hc-promo__accepted {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: #ecfdf5;
	background: rgba(16, 185, 129, 0.22);
	border: 1px solid rgba(16, 185, 129, 0.35);
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	animation: hc-accepted 0.55s 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.hc-promo__accepted i {
	color: var(--hc-success);
	font-size: 0.75rem;
}

.hc-promo__code {
	margin: 0;
	padding: 1.1rem 1.15rem 1.35rem;
	font-family: "Fira Code", Consolas, "Cascadia Code", monospace;
	font-size: 0.82rem;
	line-height: 1.7;
	color: #e2e8f0;
	overflow: hidden;
	min-height: 11.5rem;
}

.hc-promo__code .ln {
	display: block;
	white-space: pre;
	opacity: 0;
	transform: translateY(6px);
	animation: hc-line 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hc-promo__code .ln:nth-child(1) { animation-delay: 0.15s; }
.hc-promo__code .ln:nth-child(2) { animation-delay: 0.28s; }
.hc-promo__code .ln:nth-child(3) { animation-delay: 0.4s; }
.hc-promo__code .ln:nth-child(4) { animation-delay: 0.52s; }
.hc-promo__code .ln:nth-child(5) { animation-delay: 0.64s; }
.hc-promo__code .ln:nth-child(6) { animation-delay: 0.76s; }
.hc-promo__code .ln:nth-child(7) { animation-delay: 0.88s; }

.hc-promo__code .kw { color: #7dd3fc; }
.hc-promo__code .fn { color: #93c5fd; }
.hc-promo__code .str { color: #86efac; }
.hc-promo__code .num { color: #fcd34d; }
.hc-promo__code .cm { color: #94a3b8; }
.hc-promo__code .op { color: #cbd5e1; }

.hc-promo__cursor {
	display: inline-block;
	width: 7px;
	height: 1em;
	margin-inline-start: 2px;
	vertical-align: text-bottom;
	background: rgba(125, 211, 252, 0.9);
	animation: hc-blink 1s step-end infinite;
	animation-delay: 1s;
}

.hc-promo__glow {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(6, 106, 201, 0.35);
	filter: blur(40px);
	bottom: -50px;
	right: -30px;
	pointer-events: none;
	animation: hc-glow 4.5s ease-in-out infinite;
}

.hc-promo__scan {
	position: absolute;
	inset: 40px 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(6, 106, 201, 0.45), transparent);
	opacity: 0.55;
	animation: hc-scan 3.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hc-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes hc-line {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes hc-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@keyframes hc-accepted {
	from { opacity: 0; transform: scale(0.7) translateY(-4px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes hc-glow {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(1.12); }
}

@keyframes hc-scan {
	0% { top: 42px; opacity: 0; }
	15% { opacity: 0.55; }
	85% { opacity: 0.35; }
	100% { top: calc(100% - 24px); opacity: 0; }
}

@media (max-width: 991.98px) {
	.hc-promo__panel {
		grid-template-columns: 1fr;
		padding: 1.6rem 1.35rem;
		gap: 1.4rem;
	}

	.hc-promo__editor {
		order: -1;
	}

	.hc-promo__code {
		font-size: 0.76rem;
		min-height: 10rem;
	}
}

@media (max-width: 575.98px) {
	.hc-promo {
		padding: 0.5rem 0 2.5rem;
	}

	.hc-promo__cta {
		width: 100%;
		justify-content: center;
	}

	.hc-promo__code .ln {
		white-space: pre-wrap;
		word-break: break-word;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hc-promo__panel,
	.hc-promo__editor,
	.hc-promo__code .ln,
	.hc-promo__accepted,
	.hc-promo__cursor,
	.hc-promo__glow,
	.hc-promo__scan,
	.hc-promo__cta,
	.hc-promo__cta i {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}