/* ============ CITY LANDING PAGES ============ */

/* Radial orange glow behind hero (replicates snippet 29732) */
.city-hero {
	position: relative;
	overflow: hidden;
}
.city-hero::before {
	content: '';
	position: absolute;
	top: -20%; right: -10%;
	width: 80%; height: 140%;
	background: radial-gradient(ellipse at center, var(--c-brand) 0%, var(--c-brand-2) 30%, var(--c-brand-soft) 55%, transparent 75%);
	filter: blur(60px);
	opacity: 0.5;
	z-index: -1;
	animation: mwl-grad-float 12s ease-in-out infinite;
}
@keyframes mwl-grad-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-30px, 20px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .city-hero::before { animation: none; } }

.city-hero__title em,
.city-hero__title .accent {
	background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-style: normal;
}

/* Stats row */
.city-stats {
	padding-block: clamp(4rem, 6vw, 5rem);
	border-block: 1px solid var(--c-border);
}
.city-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-8);
	text-align: left;
}
.city-stat__num {
	font-family: var(--ff-display);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
}
.city-stat__num em {
	color: var(--c-brand);
	font-style: normal;
}
.city-stat__lbl {
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-soft);
}

/* "Perché My Web Lab a CITY" two-column intro */
.city-intro {
	padding-block: clamp(5rem, 8vw, 7rem);
	border-bottom: 1px solid var(--c-border);
}
.city-intro__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
	align-items: start;
}
@media (min-width: 1024px) { .city-intro__grid { grid-template-columns: 5fr 7fr; gap: var(--sp-16); } }
.city-intro__left h2 {
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tight);
}
.city-intro__right p {
	font-size: var(--fs-md);
	color: var(--c-text-soft);
	margin-bottom: var(--sp-4);
}
.city-intro__right strong { color: var(--c-text); font-weight: var(--fw-semibold); }
