/*
 * AXIA Agency Child - axia-main.css
 * ---------------------------------------------------------------------------
 * Design system globale front-end di AXIA Agency.
 * Agency digitale premium: dark, moderno, minimal, accenti viola/cosmo.
 *
 * Regole:
 * - tutte le classi sono prefissate con .axia-
 * - non sovrascrive il layout globale del tema parent (Nextawards)
 * - pensato per blocchi Gutenberg HTML personalizzati
 * ---------------------------------------------------------------------------
 */

/* ========================================================================= *
 * 1. VARIABILI GLOBALI
 * ========================================================================= */
:root {
	/* --- Colori brand --- */
	--axia-black: #0F0F12;
	--axia-white: #FFFFFF;
	--axia-purple: #7C3AED;          /* viola principale */
	--axia-purple-deep: #4C1D95;     /* viola profondo */
	--axia-purple-bright: #A855F7;   /* viola luminoso */
	--axia-dark-card: #17171C;       /* superficie card scura */
	--axia-border: rgba(255, 255, 255, 0.10);
	--axia-muted: #9A9AA5;           /* testo secondario */

	/* --- Colori semantici --- */
	--axia-bg: var(--axia-black);
	--axia-surface: var(--axia-dark-card);
	--axia-surface-glass: rgba(255, 255, 255, 0.04);
	--axia-text: var(--axia-white);
	--axia-text-muted: var(--axia-muted);
	--axia-accent: var(--axia-purple);
	--axia-accent-hover: var(--axia-purple-bright);
	--axia-focus-ring: var(--axia-purple-bright);

	/* --- Gradienti --- */
	--axia-gradient-purple: linear-gradient(135deg, var(--axia-purple) 0%, var(--axia-purple-deep) 100%);
	--axia-gradient-cosmic: linear-gradient(135deg, var(--axia-purple-bright) 0%, var(--axia-purple) 45%, var(--axia-purple-deep) 100%);
	--axia-gradient-text: linear-gradient(90deg, var(--axia-purple-bright) 0%, var(--axia-purple) 100%);
	--axia-gradient-cosmic-bg: radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, rgba(76, 29, 149, 0.06) 40%, transparent 70%);

	/* --- Font family fallback (eredita il font del parent, poi fallback di sistema) --- */
	--axia-font-base: inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--axia-font-heading: inherit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* --- Scala tipografica (fluid con clamp) --- */
	--axia-fs-eyebrow: 0.8125rem;                       /* 13px */
	--axia-fs-text: 1rem;                                /* 16px */
	--axia-fs-title: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	--axia-fs-title-lg: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	--axia-fs-title-xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
	--axia-lh-tight: 1.18; /* era 1.12: troppo stretto, tagliava i discendenti (g, p, q, y) */
	--axia-lh-base: 1.65;

	/* --- Spacing (scala 4px) --- */
	--axia-space-xs: 0.5rem;    /* 8px  */
	--axia-space-sm: 1rem;      /* 16px */
	--axia-space-md: 1.5rem;    /* 24px */
	--axia-space-lg: 2.5rem;    /* 40px */
	--axia-space-xl: 4rem;      /* 64px */
	--axia-space-2xl: 6rem;     /* 96px */

	/* --- Border radius --- */
	--axia-radius-sm: 8px;
	--axia-radius-md: 14px;
	--axia-radius-lg: 22px;
	--axia-radius-pill: 999px;

	/* --- Shadow --- */
	--axia-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
	--axia-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.40);
	--axia-shadow-glow: 0 0 0 1px var(--axia-border), 0 16px 48px rgba(124, 58, 237, 0.18);

	/* --- Transizioni --- */
	--axia-transition-fast: 0.15s ease;
	--axia-transition: 0.25s ease;

	/* --- Container --- */
	--axia-container-max: 1200px;
	--axia-container-narrow: 760px;
}

/* Classe di test non invasiva (verifica caricamento CSS). */
.axia-test-ready {
	display: none;
}

/* ========================================================================= *
 * 2. LAYOUT
 * ========================================================================= */
.axia-section {
	position: relative;
	padding-top: var(--axia-space-2xl);
	padding-bottom: var(--axia-space-2xl);
}

.axia-section--dark {
	background-color: var(--axia-bg);
	color: var(--axia-text);
}

.axia-section--cosmic {
	background-color: var(--axia-bg);
	background-image: var(--axia-gradient-cosmic-bg);
	color: var(--axia-text);
}

.axia-container {
	width: 100%;
	max-width: var(--axia-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--axia-space-md);
	padding-right: var(--axia-space-md);
}

.axia-container--narrow {
	max-width: var(--axia-container-narrow);
}

.axia-grid {
	display: grid;
	gap: var(--axia-space-md);
}

.axia-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.axia-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axia-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ========================================================================= *
 * 3. TESTO
 * ========================================================================= */
.axia-eyebrow {
	display: inline-block;
	font-family: var(--axia-font-base);
	font-size: var(--axia-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--axia-accent-hover);
	margin-bottom: var(--axia-space-sm);
}

.axia-title {
	font-family: var(--axia-font-heading);
	font-size: var(--axia-fs-title);
	line-height: var(--axia-lh-tight);
	font-weight: 700;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-md);
}

.axia-title--lg { font-size: var(--axia-fs-title-lg); }
.axia-title--xl { font-size: var(--axia-fs-title-xl); }

.axia-text {
	font-family: var(--axia-font-base);
	font-size: var(--axia-fs-text);
	line-height: var(--axia-lh-base);
	color: var(--axia-text);
}

.axia-text--muted { color: var(--axia-text-muted); }

.axia-gradient-text {
	background: var(--axia-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--axia-accent-hover); /* fallback se background-clip non supportato */
}

/* ========================================================================= *
 * 4. COMPONENTI
 * ========================================================================= */
.axia-card {
	background-color: var(--axia-surface);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: var(--axia-space-lg);
	box-shadow: var(--axia-shadow-sm);
	transition: transform var(--axia-transition), box-shadow var(--axia-transition), border-color var(--axia-transition);
}

.axia-card:hover {
	transform: translateY(-4px);
	border-color: rgba(168, 85, 247, 0.35);
	box-shadow: var(--axia-shadow-glow);
}

.axia-card--glass {
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* --- Bottoni --- */
.axia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--axia-space-xs);
	font-family: var(--axia-font-base);
	font-size: var(--axia-fs-text);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	padding: 0.875rem 1.75rem;
	border-radius: var(--axia-radius-pill);
	border: 1px solid transparent;
	transition: transform var(--axia-transition-fast), box-shadow var(--axia-transition), background-color var(--axia-transition), border-color var(--axia-transition), color var(--axia-transition);
}

.axia-btn:hover { transform: translateY(-2px); }
.axia-btn:active { transform: translateY(0); }

.axia-btn--primary {
	background: var(--axia-gradient-purple);
	color: var(--axia-white);
	box-shadow: 0 8px 24px rgba(124, 58, 237, 0.30);
}

.axia-btn--primary:hover {
	box-shadow: 0 12px 32px rgba(168, 85, 247, 0.42);
}

.axia-btn--secondary {
	background-color: transparent;
	color: var(--axia-text);
	border-color: var(--axia-border);
}

.axia-btn--secondary:hover {
	border-color: var(--axia-accent-hover);
	color: var(--axia-accent-hover);
}

.axia-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axia-space-sm);
	align-items: center;
}

/* --- Pill list --- */
.axia-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axia-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.axia-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--axia-font-base);
	font-size: var(--axia-fs-eyebrow);
	font-weight: 500;
	color: var(--axia-text-muted);
	background-color: var(--axia-surface-glass);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	padding: 0.4rem 0.9rem;
}

/* ========================================================================= *
 * 5. ACCESSIBILITÀ - focus visibile
 * ========================================================================= */
.axia-btn:focus-visible,
.axia-pill:focus-visible,
.axia-card:focus-visible,
.axia-gradient-text:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}

/* ========================================================================= *
 * 6. RESPONSIVE
 * ========================================================================= */
@media (max-width: 1024px) {
	.axia-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.axia-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.axia-section {
		padding-top: var(--axia-space-xl);
		padding-bottom: var(--axia-space-xl);
	}
}

@media (max-width: 767px) {
	.axia-grid--2,
	.axia-grid--3,
	.axia-grid--4 {
		grid-template-columns: 1fr;
	}
	.axia-card { padding: var(--axia-space-md); }
}

@media (max-width: 480px) {
	.axia-title { font-size: 1.5rem; }
	.axia-title--lg { font-size: 1.875rem; }
	.axia-title--xl { font-size: 2.25rem; }

	.axia-btn-group { flex-direction: column; align-items: stretch; }
	.axia-btn-group .axia-btn { width: 100%; }
}

/* ========================================================================= *
 * 7. ACCESSIBILITÀ - prefers-reduced-motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.axia-card,
	.axia-btn,
	.axia-card:hover,
	.axia-btn:hover {
		transition: none;
		transform: none;
	}
	.axia-hero__orb,
	.axia-hero__scroll-dot {
		animation: none;
	}
}

/* ========================================================================= *
 * 8. HERO (Home)
 * ========================================================================= */
.axia-hero {
	position: relative;
	overflow: hidden;
	min-height: 90vh;
	display: flex;
	align-items: center;
	background-color: var(--axia-bg);
	color: var(--axia-text);
	/* Background cosmico: radial gradients viola su nero, nessuna immagine richiesta. */
	background-image:
		radial-gradient(60% 60% at 50% 0%, rgba(124, 58, 237, 0.22) 0%, rgba(76, 29, 149, 0.08) 38%, transparent 70%),
		radial-gradient(40% 50% at 85% 80%, rgba(168, 85, 247, 0.14) 0%, transparent 60%),
		radial-gradient(40% 50% at 12% 90%, rgba(76, 29, 149, 0.16) 0%, transparent 60%);
}

.axia-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--axia-container-max);
	margin: 0 auto;
	padding: var(--axia-space-2xl) var(--axia-space-md);
}

.axia-hero__content {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.axia-hero__eyebrow {
	display: inline-block;
	font-size: var(--axia-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--axia-accent-hover);
	padding: 0.45rem 1rem;
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	background-color: var(--axia-surface-glass);
	margin-bottom: var(--axia-space-md);
}

.axia-hero__title {
	font-family: var(--axia-font-heading);
	font-size: var(--axia-fs-title-xl);
	line-height: var(--axia-lh-tight);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--axia-space-md);
}

.axia-hero__text {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	max-width: 640px;
	margin: 0 auto var(--axia-space-lg);
}

.axia-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axia-space-sm);
	justify-content: center;
	margin-bottom: var(--axia-space-lg);
}

.axia-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axia-space-xs);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Orb decorativi: glow morbidi dietro al contenuto. */
.axia-hero__orb {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.55;
	pointer-events: none;
	animation: axia-orb-float 14s ease-in-out infinite;
}

.axia-hero__orb--1 {
	width: 420px;
	height: 420px;
	top: -120px;
	left: -80px;
	background: var(--axia-gradient-purple);
}

.axia-hero__orb--2 {
	width: 360px;
	height: 360px;
	bottom: -140px;
	right: -60px;
	background: var(--axia-gradient-cosmic);
	animation-delay: -7s;
}

@keyframes axia-orb-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -28px, 0); }
}

/* Indicatore di scroll. */
.axia-hero__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: var(--axia-space-md);
	transform: translateX(-50%);
	width: 24px;
	height: 40px;
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	display: flex;
	justify-content: center;
	padding-top: 7px;
}

.axia-hero__scroll-dot {
	width: 4px;
	height: 8px;
	border-radius: var(--axia-radius-pill);
	background-color: var(--axia-accent-hover);
	animation: axia-scroll-dot 1.8s ease-in-out infinite;
}

@keyframes axia-scroll-dot {
	0%   { opacity: 0; transform: translateY(-4px); }
	40%  { opacity: 1; }
	80%  { opacity: 0; transform: translateY(10px); }
	100% { opacity: 0; }
}

/* --- Hero responsive --- */
@media (max-width: 767px) {
	.axia-hero { min-height: 88vh; }
	.axia-hero__inner { padding: var(--axia-space-xl) var(--axia-space-md); }
	.axia-hero__orb { filter: blur(55px); opacity: 0.45; }
	.axia-hero__orb--1 { width: 280px; height: 280px; }
	.axia-hero__orb--2 { width: 240px; height: 240px; }
}

@media (max-width: 480px) {
	.axia-hero { min-height: 82vh; }
	.axia-hero__actions { flex-direction: column; align-items: stretch; }
	.axia-hero__actions .axia-btn { width: 100%; }
	.axia-hero__scroll { display: none; }
}

/* ========================================================================= *
 * 9. SECTION HEAD (intestazione centrata riutilizzabile)
 * ========================================================================= */
.axia-section__head {
	max-width: 760px;
	margin: 0 auto var(--axia-space-xl);
	text-align: center;
}

/* ========================================================================= *
 * 10. BENEFIT CARD (badge icona/numero per .axia-card)
 * ========================================================================= */
.axia-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--axia-space-md);
	border-radius: var(--axia-radius-md);
	background: var(--axia-gradient-purple);
	color: var(--axia-white);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.axia-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: var(--axia-lh-tight);
	margin: 0 0 var(--axia-space-xs);
	color: var(--axia-text);
}

/* Variante badge testuale (es. WEB, SEO, ADS): larghezza auto, testo compatto. */
.axia-card__icon--text {
	width: auto;
	min-width: 48px;
	height: auto;
	padding: 0.5rem 0.85rem;
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.08em;
}

/* ========================================================================= *
 * 11. SECTION CTA (call-to-action centrata sotto una griglia)
 * ========================================================================= */
.axia-section__cta {
	margin-top: var(--axia-space-xl);
	text-align: center;
}

/* ========================================================================= *
 * 12. STEPS / TIMELINE (Metodo)
 * ========================================================================= */
.axia-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--axia-space-md);
}

.axia-step {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Numero step grande in gradiente viola. */
.axia-step__num {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: var(--axia-space-sm);
	background: var(--axia-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--axia-accent-hover); /* fallback */
}

/* Connettore sottile tra gli step (visibile solo da desktop). */
@media (min-width: 768px) {
	.axia-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.25rem;
		right: calc(var(--axia-space-md) / -2 - 1px);
		width: var(--axia-space-md);
		height: 1px;
		background: linear-gradient(90deg, var(--axia-border), transparent);
		pointer-events: none;
	}
}

/* ========================================================================= *
 * 13. CARD FEATURE (variante autorevole con accento superiore)
 * ========================================================================= */
.axia-card--feature {
	position: relative;
	padding-top: var(--axia-space-xl);
	overflow: hidden;
}

/* Barra accento sfumata in cima alla card. */
.axia-card--feature::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--axia-gradient-cosmic);
	opacity: 0.9;
}

.axia-card--feature .axia-step__num {
	font-size: 3rem;
}

/* ========================================================================= *
 * 14. HOME V2 — GUTENBERG NATIVO
 * ========================================================================= */

/* Wrapper pagina: fondo continuo, niente spazi chiari tra i blocchi.
   .axia-services-page (pagina Servizi, sez. 21) condivide le stesse regole. */
.axia-home,
.axia-services-page {
	background-color: var(--axia-bg);
	color: var(--axia-text);
}
.axia-home > .axia-section,
.axia-home > .wp-block-cover,
.axia-services-page > .axia-section,
.axia-services-page > .wp-block-cover { margin-top: 0; margin-bottom: 0; }
.axia-home p + p,
.axia-services-page p + p { margin-top: var(--axia-space-sm); }
p.axia-eyebrow { margin-bottom: var(--axia-space-sm); }

/* --- Hero (wp:cover) --- */
.axia-hero-cover {
	min-height: min(92vh, 60rem);
	overflow: hidden;
}
.axia-hero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(55% 65% at 18% 8%, rgba(124, 58, 237, 0.24), transparent 65%),
		radial-gradient(45% 55% at 90% 88%, rgba(168, 85, 247, 0.13), transparent 60%);
}
.axia-hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--axia-container-max);
	margin: 0 auto;
	padding: var(--axia-space-2xl) var(--axia-space-md);
	text-align: left;
}

/* Titoli display: misura editoriale + enfasi in gradiente via <em>. */
.axia-display { letter-spacing: -0.02em; }
.axia-hero-cover .axia-display { max-width: 18ch; }
.axia-display em {
	font-style: normal;
	background: var(--axia-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--axia-accent-hover); /* fallback */
}

.axia-lead {
	max-width: 58ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin-bottom: var(--axia-space-lg);
}
.axia-trustline {
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.06em;
	color: var(--axia-text-muted);
	margin-top: var(--axia-space-lg);
}

/* --- Bottoni nativi wp:button --- */
/* Solid: il gradiente (background-image) copre il background-color
   del parent senza bisogno di !important. */
.wp-block-button.axia-btn-solid .wp-block-button__link {
	background: var(--axia-gradient-purple);
	color: var(--axia-white);
	border-radius: var(--axia-radius-pill);
	padding: 0.9rem 1.9rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(124, 58, 237, 0.30);
	transition: transform var(--axia-transition-fast), box-shadow var(--axia-transition);
}
.wp-block-button.axia-btn-solid .wp-block-button__link:hover {
	color: var(--axia-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(168, 85, 247, 0.42);
}
/* Ghost: usa is-style-outline, così il parent non gli applica i suoi colori. */
.wp-block-button.axia-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--axia-text);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	padding: 0.9rem 1.9rem;
	font-weight: 600;
	transition: transform var(--axia-transition-fast), border-color var(--axia-transition), color var(--axia-transition);
}
.wp-block-button.axia-btn-ghost .wp-block-button__link:hover {
	border-color: var(--axia-accent-hover);
	color: var(--axia-accent-hover);
	transform: translateY(-2px);
}
.axia-home .wp-block-button__link:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}

/* --- Split editoriale a due colonne --- */
.wp-block-columns.axia-cols-split { gap: var(--axia-space-xl); }

/* --- Voci con filetto superiore (benefici / perché) --- */
.axia-benefit {
	border-top: 1px solid var(--axia-border);
	padding-top: var(--axia-space-md);
}
.axia-benefit h3 { font-size: 1.15rem; line-height: 1.22; margin: 0 0 var(--axia-space-xs); }
/* Distanzia i benefit solo quando sono impilati in verticale dentro una
   colonna (sezione "Perché AXIA"). Senza lo scope, il margine colpiva anche
   le 4 colonne affiancate dei Benefici, disallineandole rispetto alla prima. */
.wp-block-column > .axia-benefit + .axia-benefit { margin-top: var(--axia-space-md); }

/* --- Step del metodo --- */
.axia-steps-cols .wp-block-column {
	border-top: 1px solid var(--axia-border);
	padding-top: var(--axia-space-md);
}
p.axia-step__num { margin-bottom: var(--axia-space-sm); }
p.axia-card__icon { margin-bottom: var(--axia-space-md); }

/* --- Hairline e firma --- */
hr.wp-block-separator.axia-hairline {
	border: 0;
	height: 1px;
	width: 100%;
	max-width: none;
	background-color: var(--axia-border);
	margin: var(--axia-space-xl) auto 0;
	opacity: 1;
}
.axia-signature {
	text-align: center;
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--axia-text-muted);
	margin-top: var(--axia-space-sm);
}

/* --- Placeholder progetti --- */
.axia-ph-thumb {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	background:
		radial-gradient(80% 90% at 70% 12%, rgba(124, 58, 237, 0.20), transparent 62%),
		var(--axia-surface);
	margin-bottom: var(--axia-space-md);
}
.axia-ph-thumb p {
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--axia-text-muted);
}

/* --- Pannello CTA finale --- */
.axia-cta-panel {
	position: relative;
	overflow: hidden;
	text-align: center;
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: clamp(2.5rem, 2rem + 4vw, 6rem) var(--axia-space-md);
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(124, 58, 237, 0.26), transparent 60%),
		var(--axia-surface);
}
.axia-cta-panel .axia-title { max-width: 22ch; margin-left: auto; margin-right: auto; }
.axia-cta-panel .axia-lead { margin-left: auto; margin-right: auto; }
.axia-cta-panel .wp-block-buttons { justify-content: center; }
.axia-cta-panel .axia-trustline { margin-top: var(--axia-space-md); }

/* --- Responsive Home V2 --- */
@media (max-width: 1024px) {
	.wp-block-columns.axia-cols-split { gap: var(--axia-space-lg); }
}
@media (max-width: 480px) {
	.axia-hero-cover { min-height: 86vh; }
	.axia-home .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.axia-home .wp-block-button { width: 100%; }
	.axia-home .wp-block-button__link { display: flex; width: 100%; justify-content: center; }
}

/* ========================================================================= *
 * 15. PORTFOLIO / PROGETTI (Home V2)
 * ========================================================================= */

/* Griglia progetti: 3 → 2 → 1 colonne, card a pari altezza. */
.axia-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--axia-space-md);
	align-items: stretch;
}
/* Azzera i margini di flusso che WordPress genera a runtime sui figli dei
   gruppi (.wp-container-* > * + * { margin-block-start: ... }): quella regola
   salta il primo figlio e disallinea le card. Specificità doppia per vincerla. */
.axia-projects-grid > *,
.axia-projects-grid > .axia-project { margin: 0; }

.axia-project {
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: var(--axia-space-lg);
	transition: transform var(--axia-transition), border-color var(--axia-transition), box-shadow var(--axia-transition);
}

/* Filo d'accento superiore, visibile solo in hover. */
.axia-project::before {
	content: "";
	position: absolute;
	top: -1px;
	left: var(--axia-space-lg);
	right: var(--axia-space-lg);
	height: 2px;
	border-radius: var(--axia-radius-pill);
	background: var(--axia-gradient-text);
	opacity: 0;
	transition: opacity var(--axia-transition);
}

@media (hover: hover) {
	.axia-project:hover {
		transform: translateY(-3px);
		border-color: rgba(168, 85, 247, 0.35);
		box-shadow: var(--axia-shadow-glow);
	}
	.axia-project:hover::before { opacity: 1; }
}

.axia-project__meta {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--axia-accent-hover);
	margin: 0 0 var(--axia-space-sm);
}

.axia-project__title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: var(--axia-lh-tight);
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-xs);
}

.axia-project__desc {
	font-size: 0.975rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0;
}

/* Responsive griglia progetti. */
@media (max-width: 1024px) {
	.axia-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.axia-projects-grid { grid-template-columns: 1fr; }
	.axia-project { padding: var(--axia-space-md); }
}

/* Niente movimenti per chi li riduce. */
@media (prefers-reduced-motion: reduce) {
	.axia-project,
	.axia-project:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 15.1 MEDIA PROGETTI (immagini nelle card portfolio) — v3
 * Preview incorniciata dentro la card: niente bleed, cornice glass,
 * radius su tutti e 4 gli angoli.
 * ------------------------------------------------------------------------- */

/* Cornice scura/glass intorno alla preview.
   Il contenitore impone il rapporto 5:3, lo stesso delle immagini
   portfolio (1280x768): riempimento pieno senza crop percepibile. */
.axia-project__media {
	margin: 0 0 var(--axia-space-md);
	padding: 6px;
	aspect-ratio: 5 / 3;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	transition: border-color var(--axia-transition);
}

/* Preview piena nel frame: stessa altezza visiva per tutte le card. */
.axia-project__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background-color: rgba(15, 15, 18, 0.60); /* visibile solo in caricamento */
	border-radius: calc(var(--axia-radius-md) - 6px);
	filter: saturate(0.95) brightness(0.95);
	transition: filter var(--axia-transition);
}

/* Hover sobrio: la cornice prende l'accento viola, la preview "si accende".
   Niente zoom: dentro una cornice il movimento risulterebbe rumoroso. */
@media (hover: hover) {
	.axia-project:hover .axia-project__media {
		border-color: rgba(168, 85, 247, 0.30);
	}
	.axia-project:hover .axia-project__media img {
		filter: saturate(1) brightness(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.axia-project__media,
	.axia-project__media img {
		transition: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 15.2 LIGHTBOX TRIGGER (pulsante "Espandi al clic" di WordPress)
 * Il core posiziona il bottone con stili INLINE calcolati via JS
 * (data-wp-style--top/right), che con la cornice della preview sbagliano
 * l'ancoraggio. Gli !important qui sotto sono strettamente necessari:
 * nessun selettore può battere uno stile inline riscritto a ogni resize.
 * ------------------------------------------------------------------------- */
.axia-project__media.wp-lightbox-container {
	position: relative; /* ancoraggio al frame preview, non alla card */
}

.axia-project__media .lightbox-trigger {
	top: 12px !important;
	right: 12px !important;
	left: auto;
	margin: 0;
	width: 32px;
	height: 32px;
	z-index: 2;
	border-radius: var(--axia-radius-pill);
	background-color: rgba(15, 15, 18, 0.55);
	border: 1px solid var(--axia-border);
	cursor: zoom-in;
}

@media (max-width: 767px) {
	.axia-project__media .lightbox-trigger {
		top: 10px !important;
		right: 10px !important;
	}
}

/* ------------------------------------------------------------------------- *
 * 15.3 NORMALIZZAZIONE FRAME PREVIEW
 * WordPress 7 inlinea le regole .wp-block-image in un <style> stampato DOPO
 * questo foglio: a parità di specificità il core vince e scavalca margini e
 * height del frame. Selettori a specificità maggiore (niente !important).
 * ------------------------------------------------------------------------- */
figure.wp-block-image.axia-project__media {
	width: 100%;
	max-width: 100%;
	margin: 0 auto var(--axia-space-md);
	box-sizing: border-box;
}

figure.axia-project__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}

@media (max-width: 767px) {
	figure.wp-block-image.axia-project__media {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ========================================================================= *
 * 16. FIX TIPOGRAFICO — discendenti nei testi con background-clip: text
 * ========================================================================= */
/* Le classi gradiente dipingono i glifi col solo background: un discendente
   che esce dal box resta trasparente e appare mozzato. Il padding inferiore
   estende l'area dipinta; su elementi inline non sposta il layout. */
.axia-gradient-text,
.axia-display em {
	padding-bottom: 0.08em;
}

/* Titoli piccoli (card, progetti, voci elenco) in DM Sans: la "g" di Syne
   ha un discendente corto e piatto per design che ai corpi ridotti sembra
   tagliato. Syne resta su hero, titoli di sezione e display (identità AXIA).
   La classe (0,1,0) batte la regola h1-h6 del Customizer parent (0,0,1)
   senza bisogno di !important. DM Sans è già caricato dal tema: zero peso. */
.axia-card__title,
.axia-project__title,
.axia-benefit h3 {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ========================================================================= *
 * 17. FOOTER
 * ========================================================================= */
.axia-footer {
	background-color: var(--axia-bg);
	border-top: 1px solid var(--axia-border);
	color: var(--axia-text-muted);
	font-size: 0.95rem;
}

.axia-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: var(--axia-space-lg);
	padding-top: var(--axia-space-xl);
	padding-bottom: var(--axia-space-xl);
}

.axia-footer__logo-link {
	display: inline-block;
	margin-bottom: var(--axia-space-sm);
}
.axia-footer__logo-link:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}
.axia-footer__logo {
	display: block;
	height: 64px;
	width: auto;
}

.axia-footer__text {
	max-width: 36ch;
	line-height: var(--axia-lh-base);
	margin: 0;
}

.axia-footer__title {
	font-size: var(--axia-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-sm);
}

.axia-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.axia-footer__list li + li { margin-top: 0.65rem; }
.axia-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	max-width: 100%;
	color: var(--axia-text-muted);
	text-decoration: none;
	transition: color var(--axia-transition);
}
.axia-footer__list a:hover { color: var(--axia-accent-hover); }
.axia-footer__list a:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}
/* Il testo (es. email lunga) può andare a capo senza rompere il layout. */
.axia-footer__list a > span:not(.axia-footer__icon) {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Badge icona: piccolo elemento viola/glass, sobrio. */
.axia-footer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: var(--axia-radius-pill);
	background-color: rgba(124, 58, 237, 0.14);
	border: 1px solid rgba(124, 58, 237, 0.25);
	color: var(--axia-accent-hover);
	font-size: 0.7rem;
	line-height: 1;
	transition: background-color var(--axia-transition), border-color var(--axia-transition), color var(--axia-transition), transform var(--axia-transition-fast);
}
.axia-footer__icon svg { display: block; }
.axia-footer__list a:hover .axia-footer__icon {
	background-color: rgba(124, 58, 237, 0.28);
	border-color: rgba(168, 85, 247, 0.45);
	color: var(--axia-white);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.axia-footer__icon,
	.axia-footer__list a:hover .axia-footer__icon {
		transition: none;
		transform: none;
	}
}

.axia-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--axia-space-xs) var(--axia-space-md);
	border-top: 1px solid var(--axia-border);
	padding-top: var(--axia-space-md);
	padding-bottom: var(--axia-space-md);
	font-size: var(--axia-fs-eyebrow);
}
.axia-footer__bottom p { margin: 0; }

/* --- Footer responsive --- */
@media (max-width: 1024px) {
	.axia-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.axia-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--axia-space-md);
		padding-top: var(--axia-space-lg);
		padding-bottom: var(--axia-space-lg);
	}
	.axia-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ========================================================================= *
 * 18. HEADER / MENU MOBILE
 * Il parent lascia --site-text-color a #000 mentre header e sfondo del sito
 * sono #000000: voci menu, separatori e hamburger risultano neri su nero.
 * Il breakpoint mobile reale di Nextawards è 1190px (non 767px).
 *
 * NOTA SPECIFICITÀ: Nextawards enqueua il proprio style.css una seconda
 * volta DOPO questo foglio (handle "nextawards"), quindi a parità di
 * selettore il parent vince per ordine. Tutti i selettori qui sotto sono
 * prefissati con .header per battere il parent in specificità, non in ordine.
 * ========================================================================= */
@media (max-width: 1190px) {

	/* Pannello menu aperto: fondo coerente col design AXIA. */
	.header .menu {
		background-color: var(--axia-bg);
	}

	/* Voci di primo livello: chiare e piene. */
	.header .menu li a {
		color: rgba(255, 255, 255, 0.92);
		opacity: 1;
	}

	/* Hover / focus / voce corrente in viola AXIA. */
	.header .menu li a:hover,
	.header .menu li a:focus,
	.header .menu li a:focus-visible,
	.header .menu li.current-menu-item > a {
		color: var(--axia-accent-hover);
	}

	/* Sottovoci leggibili, leggermente attenuate. */
	.header .menu .sub-menu li a {
		color: rgba(255, 255, 255, 0.78);
	}
	.header .menu .sub-menu li a:hover,
	.header .menu .sub-menu li a:focus {
		color: var(--axia-accent-hover);
	}

	/* Separatori voci: il parent usa border-bottom #000, invisibile su dark. */
	.header .menu li {
		border-bottom-color: var(--axia-border);
	}

	/* Icona hamburger: il parent colora le barrette con --site-text-color (#000). */
	.header .icon-hamburger span {
		background: var(--axia-white);
	}

	/* Link del quick menu nell'header (stessa variabile nera del parent). */
	.header .header__quick a {
		color: rgba(255, 255, 255, 0.92);
	}
	.header .header__quick a:hover,
	.header .header__quick a:focus {
		color: var(--axia-accent-hover);
	}
}

/* ========================================================================= *
 * 19. METODO — TIMELINE (sezione "Il metodo AXIA")
 * Ibrido Gutenberg: blocchi nativi + classi; la linea e i nodi sono CSS.
 * ========================================================================= */
.axia-method {
	/* variabili locali della sezione */
	--axia-m-node: 72px;
	--axia-m-num-size: 1.6rem;
	--axia-m-line: rgba(124, 58, 237, 0.35);
}

/* Timeline: la linea orizzontale passa dietro ai nodi. */
.wp-block-columns.axia-method-timeline {
	position: relative;
}
.axia-method-timeline::before {
	content: "";
	position: absolute;
	top: calc(var(--axia-m-node) / 2);
	left: 4%;
	right: 4%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--axia-m-line) 12%, var(--axia-m-line) 88%, transparent);
	pointer-events: none;
}

.axia-method-step {
	text-align: center;
}

/* Nodo glass: cerchio con glow, numero grande in Syne (sole cifre). */
p.axia-method-node {
	width: var(--axia-m-node);
	height: var(--axia-m-node);
	margin: 0 auto var(--axia-space-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	background-color: var(--axia-surface);
	border: 1px solid rgba(168, 85, 247, 0.30);
	border-radius: 50%;
	box-shadow: 0 0 24px rgba(124, 58, 237, 0.22), inset 0 0 12px rgba(124, 58, 237, 0.10);
	font-family: "Syne", sans-serif;
	font-size: var(--axia-m-num-size);
	font-weight: 700;
	line-height: 1;
	color: var(--axia-purple-bright);
	transition: border-color var(--axia-transition), box-shadow var(--axia-transition);
}

/* Icona outline sotto il nodo. */
.axia-method-icon {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--axia-space-xs);
	color: var(--axia-accent-hover);
}
.axia-method-icon svg {
	width: 20px;
	height: 20px;
}

/* Titolo step in DM Sans (discendenti completi, vedi sezione 16). */
h3.axia-method-step-title {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-xs);
}

/* Micro-testo: breve, centrato, misura stretta. */
.axia-method-step-text {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	max-width: 24ch;
	margin: 0 auto;
}

/* Hover sobrio (solo desktop): il nodo si accende. */
@media (hover: hover) {
	.axia-method-step:hover .axia-method-node {
		border-color: rgba(168, 85, 247, 0.55);
		box-shadow: 0 0 32px rgba(124, 58, 237, 0.35), inset 0 0 12px rgba(124, 58, 237, 0.15);
	}
}

/* Tablet: nodi e numeri leggermente ridotti. */
@media (max-width: 1024px) and (min-width: 782px) {
	.axia-method {
		--axia-m-node: 60px;
		--axia-m-num-size: 1.35rem;
	}
}

/* Mobile (le colonne core si impilano a 781px): linea orizzontale via,
   connettore verticale sotto ogni step tranne l'ultimo. */
@media (max-width: 781px) {
	.axia-method-timeline::before {
		display: none;
	}
	.axia-method-step:not(:last-child)::after {
		content: "";
		display: block;
		width: 1px;
		height: 28px;
		margin: var(--axia-space-sm) auto 0;
		background: linear-gradient(180deg, var(--axia-m-line), transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	p.axia-method-node {
		transition: none;
	}
}

/* ========================================================================= *
 * 20. SOLUZIONI — ICON CARDS (sezione "Soluzioni e risultati")
 *
 * Card servizio con badge icona tondo in stile nodo Metodo (sez. 19).
 * Griglia: desktop 3+2 centrata, tablet 2 colonne, mobile 1 colonna.
 * Blocchi nativi: Gruppo (card) > Paragrafo (icona) + Titolo h3 + Paragrafo.
 * ========================================================================= */
.axia-solutions {
	--axia-s-icon: 72px;   /* diametro badge icona */
	--axia-s-glyph: 34px;  /* dimensione del simbolo dentro il badge (20.1) */
}

/* Griglia a 6 tracce: ogni card occupa 2 tracce (= 3 per riga);
   la 4ª card parte dalla traccia 2, così la seconda riga (2 card) è centrata. */
.axia-solutions__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--axia-space-md);
}

/* Azzera i margini verticali che WP inietta sui figli dei gruppi (flow). */
.axia-solutions__grid > *,
.axia-solutions__grid > .axia-solution-card {
	margin: 0;
}

.axia-solution-card {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: var(--axia-space-lg);
	box-shadow: var(--axia-shadow-sm);
	transition: transform var(--axia-transition),
		border-color var(--axia-transition),
		box-shadow var(--axia-transition);
}

.axia-solution-card:nth-child(4) {
	grid-column: 2 / span 2;
}

@media (hover: hover) {
	.axia-solution-card:hover {
		transform: translateY(-4px);
		border-color: rgba(168, 85, 247, 0.35);
		box-shadow: var(--axia-shadow-glow);
	}
}

/* Badge icona: nodo tondo glass coerente coi nodi numerati del Metodo.
   Contenuto: sigla testuale (es. AN, WEB, SEO) o in futuro un glifo.
   p.axia-service-block__icon (pagina Servizi, sez. 21) condivide il badge. */
p.axia-solution-card__icon,
p.axia-service-block__icon {
	width: var(--axia-s-icon);
	height: var(--axia-s-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--axia-space-md);
	background-color: var(--axia-surface);
	border: 1px solid rgba(168, 85, 247, 0.30);
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(124, 58, 237, 0.20),
		inset 0 0 10px rgba(124, 58, 237, 0.10);
	font-family: "Syne", sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--axia-purple-bright);
}

/* Titolo card in DM Sans (vedi sez. 16: Syne taglia i discendenti). */
h3.axia-solution-card__title {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-xs);
}

.axia-solution-card__text {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0;
}

/* Nota finale sotto la griglia. */
.axia-solutions__note {
	margin: var(--axia-space-xl) auto 0;
	max-width: 62ch;
	text-align: center;
	font-size: 0.95rem;
	color: var(--axia-text-muted);
	border-top: 1px solid var(--axia-border);
	padding-top: var(--axia-space-md);
}

/* Tablet: 2 colonne piene, niente centratura speciale. */
@media (max-width: 1024px) {
	.axia-solutions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.axia-solution-card,
	.axia-solution-card:nth-child(4) {
		grid-column: auto;
	}
}

/* Mobile: colonna singola, padding ridotto, badge leggermente più piccolo. */
@media (max-width: 767px) {
	.axia-solutions {
		--axia-s-icon: 64px;
		--axia-s-glyph: 30px;
	}
	.axia-solutions__grid {
		grid-template-columns: 1fr;
	}
	.axia-solution-card {
		padding: var(--axia-space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.axia-solution-card,
	.axia-solution-card:hover {
		transition: none;
		transform: none;
	}
}

/* ========================================================================= *
 * 20.1 ICONE GRAFICHE SOLUZIONI (classi modificatore .axia-icon--*)
 *
 * Icone monocromatiche a tratto sottile renderizzate via CSS mask su
 * pseudo-elemento ::before: il colore arriva da background-color (viola
 * brand), quindi niente emoji colorate e pieno controllo da stylesheet.
 * La sigla testuale nel paragrafo resta nel markup come fallback ma viene
 * nascosta (font-size: 0) quando è presente una classe .axia-icon--*.
 * ========================================================================= */
p.axia-solution-card__icon[class*="axia-icon--"],
p.axia-service-block__icon[class*="axia-icon--"] {
	font-size: 0;
	letter-spacing: 0;
}

p.axia-solution-card__icon[class*="axia-icon--"]::before,
p.axia-service-block__icon[class*="axia-icon--"]::before {
	content: "";
	display: block;
	width: var(--axia-s-glyph);
	height: var(--axia-s-glyph);
	background-color: var(--axia-purple-bright);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Target / mirino — analisi strategica. */
p.axia-solution-card__icon.axia-icon--strategy::before,
p.axia-service-block__icon.axia-icon--strategy::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E");
}

/* Desktop + smartphone — siti web. */
p.axia-solution-card__icon.axia-icon--devices::before,
p.axia-service-block__icon.axia-icon--devices::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M6.5 19h5'/%3E%3Cpath d='M9 14.5V19'/%3E%3Crect x='16.5' y='9' width='5.5' height='11.5' rx='1.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M6.5 19h5'/%3E%3Cpath d='M9 14.5V19'/%3E%3Crect x='16.5' y='9' width='5.5' height='11.5' rx='1.4'/%3E%3C/svg%3E");
}

/* Lente di ricerca — SEO e indicizzazione. */
p.axia-solution-card__icon.axia-icon--seo::before,
p.axia-service-block__icon.axia-icon--seo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.6-4.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.6-4.6'/%3E%3C/svg%3E");
}

/* Grafico in crescita — campagne ads. */
p.axia-solution-card__icon.axia-icon--growth::before,
p.axia-service-block__icon.axia-icon--growth::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17.5 9 11l4.5 4.5L21.5 7'/%3E%3Cpath d='M15.5 7h6v6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17.5 9 11l4.5 4.5L21.5 7'/%3E%3Cpath d='M15.5 7h6v6'/%3E%3C/svg%3E");
}

/* Nodi connessi / network — gestione social. */
p.axia-solution-card__icon.axia-icon--social::before,
p.axia-service-block__icon.axia-icon--social::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.7 13.4 6.6 3.9'/%3E%3Cpath d='M15.3 6.7 8.7 10.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.7 13.4 6.6 3.9'/%3E%3Cpath d='M15.3 6.7 8.7 10.6'/%3E%3C/svg%3E");
}

/* ========================================================================= *
 * 21. PAGINA SERVIZI
 *
 * Riusa: wrapper pagina (sez. 14, .axia-services-page), sezioni/testi
 * (sez. 2-3, 9), bottoni Gutenberg (sez. 14), pannello CTA (.axia-cta-panel),
 * timeline Metodo (sez. 19), badge + icone SVG (sez. 20/20.1).
 * Qui solo ciò che è specifico della pagina: hero, griglia 2x2, card servizio.
 * ========================================================================= */

/* Hero pagina: più compatto della Home, respiro extra in alto. */
.axia-services-hero {
	padding-top: clamp(7rem, 5rem + 8vh, 10rem);
}
.axia-services-hero .axia-section__head {
	max-width: 820px;
	margin-bottom: 0;
}
.axia-services-hero .wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

/* Griglia servizi: 2x2 su desktop, colonna singola sotto i 781px. */
.axia-services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--axia-space-md);
}

/* Azzera i margini verticali che WP inietta sui figli dei gruppi (flow). */
.axia-services-grid > *,
.axia-services-grid > .axia-service-block {
	margin: 0;
}

/* Card servizio: glass premium, flex column così la CTA si ancora in basso. */
.axia-service-block {
	--axia-s-icon: 64px;   /* diametro badge (vedi sez. 20) */
	--axia-s-glyph: 30px;  /* simbolo interno (vedi sez. 20.1) */
	display: flex;
	flex-direction: column;
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: var(--axia-space-lg);
	box-shadow: var(--axia-shadow-sm);
	transition: transform var(--axia-transition),
		border-color var(--axia-transition),
		box-shadow var(--axia-transition);
}

@media (hover: hover) {
	.axia-service-block:hover {
		transform: translateY(-4px);
		border-color: rgba(168, 85, 247, 0.35);
		box-shadow: var(--axia-shadow-glow);
	}
}

/* Titolo card in DM Sans (vedi sez. 16: Syne taglia i discendenti). */
h3.axia-service-block__title {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-xs);
}

.axia-service-block__text {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0 0 var(--axia-space-sm);
}

/* Micro-lista: trattino viola al posto del bullet. */
ul.axia-service-block__list {
	list-style: none;
	margin: 0 0 var(--axia-space-md);
	padding: 0;
}
ul.axia-service-block__list li {
	position: relative;
	padding-left: 1.4em;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--axia-text-muted);
}
ul.axia-service-block__list li + li {
	margin-top: 0.5em;
}
ul.axia-service-block__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--axia-purple-bright);
}

/* CTA testuale in fondo alla card (margin-top auto = card allineate). */
.axia-service-block__cta {
	margin: auto 0 0;
	padding-top: var(--axia-space-sm);
	font-size: 0.95rem;
	font-weight: 600;
}
.axia-service-block__cta a {
	color: var(--axia-purple-bright);
	text-decoration: none;
	transition: color var(--axia-transition-fast);
}
.axia-service-block__cta a:hover,
.axia-service-block__cta a:focus {
	color: var(--axia-white);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Responsive. */
@media (max-width: 781px) {
	.axia-services-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.axia-services-hero {
		padding-top: var(--axia-space-2xl);
	}
	.axia-service-block {
		padding: var(--axia-space-md);
	}
}
@media (prefers-reduced-motion: reduce) {
	.axia-service-block,
	.axia-service-block:hover {
		transition: none;
		transform: none;
	}
}

/* ========================================================================= *
 * 21.1 FINAL CTA (card scenografica di chiusura, pagina Servizi)
 *
 * Una sola classe da assegnare in Gutenberg: .axia-final-cta sul Gruppo.
 * Dentro: blocchi standard (axia-eyebrow, axia-title--lg, axia-lead,
 * Pulsanti axia-btn-solid/ghost). Decorazioni interamente via ::before
 * (alone) e ::after (orbite + particelle), nessun markup aggiuntivo.
 * Non sostituisce .axia-cta-panel, che resta invariata per la Home.
 * ========================================================================= */
.axia-final-cta {
	position: relative;
	overflow: hidden;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
	background:
		radial-gradient(90% 90% at 50% 0%, rgba(124, 58, 237, 0.28), transparent 60%),
		radial-gradient(120% 80% at 50% 115%, rgba(76, 29, 149, 0.20), transparent 60%),
		var(--axia-surface);
	border: 1px solid rgba(168, 85, 247, 0.28);
	border-radius: var(--axia-radius-lg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
		0 0 48px rgba(124, 58, 237, 0.12);
	transition: border-color var(--axia-transition),
		box-shadow var(--axia-transition);
}

/* Il contenuto sta sopra le decorazioni dei pseudo-elementi. */
.axia-final-cta > * {
	position: relative;
	z-index: 1;
}

/* Alone radiale morbido che sborda dal bordo superiore. */
.axia-final-cta::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: 560px;
	height: 560px;
	left: 50%;
	top: -340px;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 65%);
}

/* Orbite sottili + particelle luminose: solo layer di radial-gradient. */
.axia-final-cta::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	background-image:
		radial-gradient(circle at 12% 30%, transparent 119px, rgba(168, 85, 247, 0.18) 120px, transparent 122px),
		radial-gradient(circle at 88% 75%, transparent 89px, rgba(168, 85, 247, 0.14) 90px, transparent 92px),
		radial-gradient(circle 2.5px at 18% 22%, rgba(216, 180, 254, 0.9), transparent),
		radial-gradient(circle 2px at 82% 30%, rgba(168, 85, 247, 0.8), transparent),
		radial-gradient(circle 1.5px at 70% 85%, rgba(216, 180, 254, 0.7), transparent),
		radial-gradient(circle 2px at 30% 80%, rgba(168, 85, 247, 0.6), transparent);
}

/* Titolo e lead centrati e con misura di lettura contenuta. */
.axia-final-cta .axia-title {
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}
.axia-final-cta .axia-lead {
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
}
.axia-final-cta .wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

/* Hover discreto: bordo e glow si accendono, la card non si muove. */
@media (hover: hover) {
	.axia-final-cta:hover {
		border-color: rgba(168, 85, 247, 0.45);
		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
			0 0 64px rgba(124, 58, 237, 0.22);
	}
}

@media (max-width: 767px) {
	.axia-final-cta {
		padding: var(--axia-space-lg) var(--axia-space-md);
	}
	.axia-final-cta::before {
		width: 380px;
		height: 380px;
		top: -240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.axia-final-cta {
		transition: none;
	}
}

/* ========================================================================= *
 * 22. PAGINA PORTFOLIO
 *
 * Riusa: sezioni/container/testi (sez. 2-3, 9), bottoni Gutenberg (sez. 14),
 * card metodo (sez. 4/13, .axia-card--feature), CTA finale scenografica
 * (sez. 21.1, .axia-final-cta). Qui solo ciò che è specifico della pagina:
 * wrapper pagina, hero, riga filtri statica, griglia 3→2→1 e card progetto
 * con media (placeholder o immagine), badge, micro-lista e CTA.
 * ========================================================================= */

/* Wrapper pagina Portfolio: fondo scuro continuo come Home/Servizi. */
.axia-portfolio-page {
	background-color: var(--axia-bg);
	color: var(--axia-text);
}
.axia-portfolio-page > .axia-section {
	margin-top: 0;
	margin-bottom: 0;
}
.axia-portfolio-page p + p {
	margin-top: var(--axia-space-sm);
}
.axia-portfolio-page .wp-block-button__link:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}

/* Hero pagina: respiro extra in alto, contenuto centrato. */
.axia-portfolio-hero {
	padding-top: clamp(7rem, 5rem + 8vh, 10rem);
}
.axia-portfolio-hero .axia-section__head {
	max-width: 860px;
	margin-bottom: 0;
}
.axia-portfolio-hero .wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

/* Filtri statici (beta, nessun JS): una sola List block, ogni <li> = pill,
   il primo è lo stato "attivo". */
ul.axia-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--axia-space-xs);
	list-style: none;
	margin: 0 auto var(--axia-space-xl);
	padding: 0;
	max-width: 760px;
}
ul.axia-portfolio-filters li {
	font-size: var(--axia-fs-eyebrow);
	font-weight: 500;
	color: var(--axia-text-muted);
	background-color: var(--axia-surface-glass);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	padding: 0.4rem 0.9rem;
	transition: color var(--axia-transition-fast), border-color var(--axia-transition-fast);
}
ul.axia-portfolio-filters li:first-child {
	color: var(--axia-white);
	border-color: rgba(168, 85, 247, 0.45);
	background-color: rgba(124, 58, 237, 0.16);
}
@media (hover: hover) {
	ul.axia-portfolio-filters li:hover {
		color: var(--axia-white);
		border-color: rgba(168, 85, 247, 0.35);
	}
}

/* Griglia progetti: 3 → 2 → 1 colonne, card a pari altezza. */
.axia-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--axia-space-md);
	align-items: stretch;
}
/* Azzera i margini di flusso che WP inietta sui figli dei gruppi. */
.axia-portfolio-grid > *,
.axia-portfolio-grid > .axia-portfolio-card {
	margin: 0;
}

/* Card progetto: glass premium, flex column (CTA ancorata in basso). */
.axia-portfolio-card {
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: var(--axia-space-md);
	transition: transform var(--axia-transition),
		border-color var(--axia-transition),
		box-shadow var(--axia-transition);
}
@media (hover: hover) {
	.axia-portfolio-card:hover {
		transform: translateY(-3px);
		border-color: rgba(168, 85, 247, 0.35);
		box-shadow: var(--axia-shadow-glow);
	}
}

/* Media: cornice 5:3 che ospita un'immagine o un placeholder con nome. */
.axia-portfolio-card__media {
	position: relative;
	margin: 0 0 var(--axia-space-md);
	aspect-ratio: 5 / 3;
	overflow: hidden;
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	background:
		radial-gradient(80% 90% at 70% 12%, rgba(124, 58, 237, 0.20), transparent 62%),
		var(--axia-surface);
}
/* Variante blocco Immagine (figure): specificità maggiore del core WP. */
figure.axia-portfolio-card__media {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.axia-portfolio-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	filter: saturate(0.95) brightness(0.95);
	transition: filter var(--axia-transition);
}
@media (hover: hover) {
	.axia-portfolio-card:hover .axia-portfolio-card__media img {
		filter: saturate(1) brightness(1);
	}
}
/* Placeholder beta: nome progetto centrato nel frame. */
.axia-portfolio-card__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 var(--axia-space-md);
	text-align: center;
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--axia-text-muted);
}

/* Badge categoria. */
p.axia-portfolio-card__badge {
	align-self: flex-start;
	margin: 0 0 var(--axia-space-sm);
	padding: 0.3rem 0.75rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--axia-purple-bright);
	background-color: rgba(124, 58, 237, 0.12);
	border: 1px solid rgba(168, 85, 247, 0.30);
	border-radius: var(--axia-radius-pill);
}

/* Titolo progetto (DM Sans, vedi sez. 16: Syne taglia i discendenti). */
h3.axia-portfolio-card__title {
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--axia-text);
	margin: 0 0 var(--axia-space-xs);
}

.axia-portfolio-card__text {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0 0 var(--axia-space-md);
}

/* Micro-lista: trattino viola al posto del bullet. */
ul.axia-portfolio-card__meta {
	list-style: none;
	margin: 0 0 var(--axia-space-md);
	padding: 0;
}
ul.axia-portfolio-card__meta li {
	position: relative;
	padding-left: 1.4em;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--axia-text-muted);
}
ul.axia-portfolio-card__meta li + li {
	margin-top: 0.4em;
}
ul.axia-portfolio-card__meta li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--axia-purple-bright);
}

/* CTA in fondo alla card (margin-top auto = bottoni allineati tra le card).
   Element-prefixed per battere i margini di flusso iniettati da WP. */
p.axia-portfolio-card__cta {
	margin: auto 0 0;
	padding-top: var(--axia-space-xs);
	font-size: 0.95rem;
	font-weight: 600;
}
.axia-portfolio-card__cta a {
	color: var(--axia-purple-bright);
	text-decoration: none;
	transition: color var(--axia-transition-fast);
}
.axia-portfolio-card__cta a::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.4em;
	transition: transform var(--axia-transition-fast);
}
.axia-portfolio-card__cta a:hover,
.axia-portfolio-card__cta a:focus {
	color: var(--axia-white);
}
@media (hover: hover) {
	.axia-portfolio-card__cta a:hover::after {
		transform: translateX(3px);
	}
}

/* Responsive griglia + hero. */
@media (max-width: 1024px) {
	.axia-portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.axia-portfolio-grid {
		grid-template-columns: 1fr;
	}
	.axia-portfolio-hero {
		padding-top: var(--axia-space-2xl);
	}
}
@media (prefers-reduced-motion: reduce) {
	.axia-portfolio-card,
	.axia-portfolio-card:hover,
	.axia-portfolio-card__media img {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 22.1 PORTFOLIO REFINEMENTS — anteprime reali nelle card
 *
 * Quando il placeholder testuale diventa un blocco Immagine, il media è una
 * <figure class="wp-block-image axia-portfolio-card__media">. WP7 inlina le
 * regole .wp-block-image img in un <style> stampato DOPO questo foglio: a
 * parità di specificità vincerebbe il core, rimettendo height:auto e rompendo
 * il frame 5:3. Selettore figure-prefixed a specificità maggiore (stessa
 * difesa della sez. 15.3), nessun !important. Inerte finché si usano i
 * placeholder: agisce solo quando il media è una figure immagine.
 * ------------------------------------------------------------------------- */
figure.axia-portfolio-card__media {
	margin: 0 0 var(--axia-space-md);
	padding: 0;
}
figure.axia-portfolio-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/* ------------------------------------------------------------------------- *
 * 22.2 PORTFOLIO METHOD ICONS — icone SVG nelle 3 card Metodo/Risultato
 *
 * Sostituiscono i badge testuali STR/UX/SYS. Stesso sistema mask della
 * sez. 20.1: SVG monocromo come data-URI in mask-image, colore dal
 * background-color. Il blocco Gutenberg resta un Paragrafo nativo (il testo
 * di fallback è nascosto via font-size:0), l'icona è interamente controllata
 * via CSS. Variante .axia-card__icon--svg sul badge base .axia-card__icon
 * (sez. 10): eredita dimensioni/raggio/centratura, qui solo fondo, bordo,
 * glow e glifo. Nessuna libreria, nessun JS, nessun font-icon.
 * ------------------------------------------------------------------------- */

/* Badge SVG: fondo scuro + gradiente viola leggero, bordo viola sottile, glow. */
.axia-card__icon--svg {
	border: 1px solid rgba(168, 85, 247, 0.30);
	background:
		radial-gradient(120% 120% at 30% 18%, rgba(124, 58, 237, 0.30), transparent 60%),
		var(--axia-surface);
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.18),
		inset 0 0 12px rgba(124, 58, 237, 0.10);
	font-size: 0; /* nasconde il testo di fallback (STR/UX/SYS) */
	transition: box-shadow var(--axia-transition),
		border-color var(--axia-transition);
}

/* Glifo: mask SVG colorata in viola, nitida a ogni dimensione. */
.axia-card__icon--svg::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--axia-purple-bright);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color var(--axia-transition);
}

/* Icona 1 — Strategia: bussola (direzione / strategia). */
.axia-card__icon--svg.axia-card__icon--strategy::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88' fill='black'/%3E%3C/svg%3E");
}

/* Icona 2 — Contenuti: documento con righe di testo (file-text). */
.axia-card__icon--svg.axia-card__icon--content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

/* Icona 3 — Struttura: livelli impilati (layers). */
.axia-card__icon--svg.axia-card__icon--structure::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}

/* Hover card: glow appena più intenso, bordo più acceso, glifo bianco. */
@media (hover: hover) {
	.axia-card:hover .axia-card__icon--svg {
		border-color: rgba(168, 85, 247, 0.45);
		box-shadow: 0 10px 24px rgba(124, 58, 237, 0.26),
			inset 0 0 14px rgba(124, 58, 237, 0.16);
	}
	.axia-card:hover .axia-card__icon--svg::before {
		background-color: var(--axia-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.axia-card__icon--svg,
	.axia-card__icon--svg::before {
		transition: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 22.3 PORTFOLIO HERO COVER — hero a due colonne con visual card
 *
 * Trasforma la hero Portfolio in due colonne: a sinistra testo + CTA già
 * esistenti, a destra una "cover" dashboard in puro HTML/CSS (blocchi nativi
 * + classi), nessuna immagine. Riusa variabili, glass, glow, pill e bottoni
 * del design system. Mobile (≤860px): testo sopra, visual sotto, niente
 * sovrapposizioni. Tocca SOLO la hero: nessun'altra sezione coinvolta.
 * ------------------------------------------------------------------------- */

/* Griglia hero: 2 colonne desktop, 1 colonna sotto gli 860px. */
.axia-portfolio-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

/* Colonna testo: allineata a sinistra (la hero a colonna singola centrava). */
.axia-portfolio-hero__content {
	text-align: left;
}
.axia-portfolio-hero__content .wp-block-buttons {
	justify-content: flex-start;
}

/* Colonna visual: centra la cover nella sua metà. */
.axia-portfolio-hero__visual {
	display: flex;
	justify-content: center;
}

/* Cover/dashboard: card glass premium, bordo viola sottile, glow soft. */
.axia-portfolio-hero__panel {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 420px;
	padding: var(--axia-space-lg);
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
		var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(168, 85, 247, 0.22);
	border-radius: var(--axia-radius-lg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
		0 0 40px rgba(124, 58, 237, 0.12);
}
/* Alone morbido in alto a destra (decorazione, nessun markup). */
.axia-portfolio-hero__panel::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.20), transparent 65%);
}
.axia-portfolio-hero__panel > * {
	position: relative;
	z-index: 1;
}
.axia-portfolio-hero__panel .axia-eyebrow {
	margin-bottom: var(--axia-space-md);
}

/* Flusso del metodo: step collegati da frecce viola, dentro una fascia. */
ul.axia-portfolio-hero__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--axia-space-md);
	padding: var(--axia-space-sm) 0;
	list-style: none;
	border-top: 1px solid var(--axia-border);
	border-bottom: 1px solid var(--axia-border);
}
ul.axia-portfolio-hero__flow li {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--axia-text);
	white-space: nowrap;
}
ul.axia-portfolio-hero__flow li:not(:first-child)::before {
	content: "\2192";
	margin-right: 0.4rem;
	color: var(--axia-purple-bright);
	font-weight: 700;
}

/* Micro-pill delle competenze. */
ul.axia-portfolio-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--axia-space-xs);
	margin: 0 0 var(--axia-space-md);
	padding: 0;
	list-style: none;
}
ul.axia-portfolio-hero__pills li {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--axia-text-muted);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-pill);
	padding: 0.32rem 0.7rem;
}

/* Barra risultato: l'esito concreto, accento viola e pallino guida. */
.axia-portfolio-hero__result {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--axia-white);
	background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.06));
	border: 1px solid rgba(168, 85, 247, 0.30);
	border-radius: var(--axia-radius-md);
}
.axia-portfolio-hero__result::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--axia-purple-bright);
	box-shadow: 0 0 10px rgba(168, 85, 247, 0.80);
}

/* Responsive: una colonna, visual sotto il testo, tutto ricentrato. */
@media (max-width: 860px) {
	.axia-portfolio-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--axia-space-xl);
	}
	.axia-portfolio-hero__content {
		text-align: center;
	}
	.axia-portfolio-hero__content .wp-block-buttons {
		justify-content: center;
	}
	.axia-portfolio-hero__content .axia-lead {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ========================================================================= *
 * 23. PAGINA CONTATTI
 *
 * Riusa: sezioni/container/testi (sez. 2-3, 9), bottoni Gutenberg
 * (sez. 14, .axia-btn-solid/.axia-btn-ghost), card (.axia-card, sez. 4),
 * badge icona tondo + maschere SVG (sez. 20/20.1, p.axia-solution-card__icon
 * + .axia-icon--*), CTA finale scenografica (.axia-final-cta, sez. 21.1).
 * Qui solo cio che e specifico della pagina: hero cosmica con starfield,
 * pannello form + card laterale, griglia tipologie, stile Contact Form 7.
 * Nessuna libreria, nessun JS, nessuna immagine esterna.
 * ========================================================================= */
.axia-contact-page {
	background-color: var(--axia-bg);
	color: var(--axia-text);
}

.axia-contact-page :focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------- *
 * 23.1 HERO COSMICA
 * Fondo: base --cosmic (sez. 2) + starfield e glow morbido su ::before,
 * griglia "futuro" molto leggera e sfumata su ::after. Decorazioni dietro,
 * contenuto sopra (z-index). Testo sempre leggibile (stelle tenui, niente
 * overlay scuro aggressivo).
 * ------------------------------------------------------------------------- */
.axia-contact-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(7rem, 5rem + 8vh, 10rem);
}

/* Glow superiore + stelle leggere (solo layer di radial-gradient). */
.axia-contact-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	background-image:
		radial-gradient(circle at 50% -8%, rgba(124, 58, 237, 0.32), transparent 55%),
		radial-gradient(circle 2px at 12% 22%, rgba(216, 180, 254, 0.90), transparent),
		radial-gradient(circle 1.5px at 26% 64%, rgba(168, 85, 247, 0.70), transparent),
		radial-gradient(circle 2px at 38% 16%, rgba(168, 85, 247, 0.65), transparent),
		radial-gradient(circle 1.5px at 52% 78%, rgba(216, 180, 254, 0.70), transparent),
		radial-gradient(circle 2.5px at 64% 28%, rgba(216, 180, 254, 0.85), transparent),
		radial-gradient(circle 1.5px at 74% 60%, rgba(168, 85, 247, 0.60), transparent),
		radial-gradient(circle 2px at 84% 20%, rgba(168, 85, 247, 0.70), transparent),
		radial-gradient(circle 1.5px at 90% 50%, rgba(216, 180, 254, 0.65), transparent),
		radial-gradient(circle 1.5px at 18% 40%, rgba(168, 85, 247, 0.55), transparent);
}

/* Griglia "futuro" sottilissima, sfumata verso il basso e ai bordi. */
.axia-contact-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 75% at 50% 0%, rgba(0, 0, 0, 0.9), transparent 72%);
	mask-image: radial-gradient(120% 75% at 50% 0%, rgba(0, 0, 0, 0.9), transparent 72%);
}

/* Contenuto sopra le decorazioni. */
.axia-contact-hero > * {
	position: relative;
	z-index: 1;
}

.axia-contact-hero__content {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.axia-contact-hero__actions.wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

.axia-contact-hero__content .axia-lead {
	margin-left: auto;
	margin-right: auto;
}

.axia-contact-hero__note {
	margin-top: var(--axia-space-md);
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.04em;
	color: var(--axia-text-muted);
}

/* ------------------------------------------------------------------------- *
 * 23.2 PANNELLO FORM + CARD LATERALE
 * Due colonne (form piu largo, card "Cosa succede dopo?" piu stretta).
 * Su mobile: colonna singola, form sopra, card sotto.
 * ------------------------------------------------------------------------- */
.axia-contact-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: start;
}

.axia-contact-panel > * {
	margin: 0;
}

/* Card glass che contiene il modulo. */
.axia-contact-form-card {
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: var(--axia-shadow-md);
}

.axia-contact-form-card__title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: var(--axia-lh-tight);
	margin: 0 0 var(--axia-space-xs);
	color: var(--axia-text);
}

.axia-contact-form-card__intro {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0 0 var(--axia-space-md);
}

/* Card laterale "Cosa succede dopo?": glass con glow d'angolo. */
.axia-contact-side-card {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 90% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
		var(--axia-surface);
	border: 1px solid rgba(168, 85, 247, 0.22);
	border-radius: var(--axia-radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 40px rgba(124, 58, 237, 0.12);
}

.axia-contact-side-card::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	top: -60px;
	right: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.20), transparent 65%);
}

.axia-contact-side-card > * {
	position: relative;
	z-index: 1;
}

.axia-contact-side-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: var(--axia-lh-tight);
	margin: 0 0 var(--axia-space-xs);
	color: var(--axia-text);
}

/* Mini-step numerati: pallino in gradiente generato via counter. */
ol.axia-contact-steps {
	list-style: none;
	counter-reset: axia-step;
	margin: var(--axia-space-md) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--axia-space-sm);
}

ol.axia-contact-steps li {
	counter-increment: axia-step;
	position: relative;
	margin: 0;
	padding-left: 2.75rem;
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text);
}

ol.axia-contact-steps li::before {
	content: counter(axia-step);
	position: absolute;
	left: 0;
	top: 0.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--axia-gradient-purple);
	color: var(--axia-white);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 14px rgba(124, 58, 237, 0.40);
}

/* --- Stile Contact Form 7 dentro la card glass --- */
.axia-contact-form-card .wpcf7-form p {
	margin: 0 0 var(--axia-space-sm);
}

.axia-contact-form-card .axia-field-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--axia-text);
	margin-bottom: 0.35rem;
}

.axia-contact-form-card input[type="text"],
.axia-contact-form-card input[type="email"],
.axia-contact-form-card input[type="tel"],
.axia-contact-form-card select,
.axia-contact-form-card textarea {
	width: 100%;
	font-family: var(--axia-font-base);
	font-size: 0.95rem;
	color: var(--axia-text);
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-sm);
	padding: 0.7rem 0.85rem;
	transition: border-color var(--axia-transition), box-shadow var(--axia-transition);
}

.axia-contact-form-card textarea {
	min-height: 130px;
	resize: vertical;
}

.axia-contact-form-card select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A855F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 16px;
	padding-right: 2.4rem;
}

.axia-contact-form-card input::placeholder,
.axia-contact-form-card textarea::placeholder {
	color: var(--axia-text-muted);
	opacity: 1;
}

.axia-contact-form-card input[type="text"]:focus,
.axia-contact-form-card input[type="email"]:focus,
.axia-contact-form-card input[type="tel"]:focus,
.axia-contact-form-card select:focus,
.axia-contact-form-card textarea:focus {
	outline: none;
	border-color: var(--axia-purple-bright);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* Consenso privacy (acceptance): checkbox + testo in linea. */
.axia-contact-form-card .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.axia-contact-form-card .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--axia-text-muted);
}

.axia-contact-form-card input[type="checkbox"] {
	margin-top: 0.2rem;
	accent-color: var(--axia-purple);
}

/* Pulsante invio: stesso linguaggio del bottone solido AXIA. */
.axia-contact-form-card .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--axia-space-xs);
	font-family: var(--axia-font-base);
	font-size: var(--axia-fs-text);
	font-weight: 600;
	color: var(--axia-white);
	background: var(--axia-gradient-purple);
	border: 1px solid transparent;
	border-radius: var(--axia-radius-pill);
	padding: 0.9rem 1.9rem;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(124, 58, 237, 0.30);
	transition: transform var(--axia-transition-fast), box-shadow var(--axia-transition);
}

@media (hover: hover) {
	.axia-contact-form-card .wpcf7-submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 32px rgba(168, 85, 247, 0.42);
	}
}

/* Messaggi di validazione / risposta CF7. */
.axia-contact-form-card .wpcf7-not-valid-tip {
	font-size: 0.8rem;
	color: #ff8e8e;
	margin-top: 0.3rem;
}

.axia-contact-form-card .wpcf7-not-valid {
	border-color: rgba(255, 120, 120, 0.6);
}

.axia-contact-form-card .wpcf7 .wpcf7-response-output {
	margin: var(--axia-space-sm) 0 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.88rem;
	border-radius: var(--axia-radius-sm);
	border: 1px solid var(--axia-border);
	color: var(--axia-text);
}

/* ------------------------------------------------------------------------- *
 * 23.3 TIPOLOGIE RICHIESTE
 * Griglia 3 -> 2 -> 1. Le card riusano .axia-card (sez. 4) e il badge icona
 * tondo + maschere SVG (sez. 20/20.1): qui basta impostare le variabili di
 * dimensione del badge sul contenitore. Aggiunta una sola nuova icona
 * (--landing) coerente col sistema mask esistente.
 * ------------------------------------------------------------------------- */
.axia-contact-types {
	--axia-s-icon: 60px;
	--axia-s-glyph: 26px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--axia-space-md);
}

.axia-contact-types > *,
.axia-contact-types > .axia-card {
	margin: 0;
}

.axia-contact-types .axia-card {
	display: flex;
	flex-direction: column;
}

.axia-contact-type__text {
	font-size: 0.92rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0;
}

/* Nuova icona: landing page (finestra browser con titolo + CTA). */
p.axia-solution-card__icon.axia-icon--landing::before,
p.axia-service-block__icon.axia-icon--landing::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8.5h18'/%3E%3Cpath d='M7.5 12.5h9'/%3E%3Crect x='7.5' y='15.5' width='6' height='2.4' rx='1.2' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8.5h18'/%3E%3Cpath d='M7.5 12.5h9'/%3E%3Crect x='7.5' y='15.5' width='6' height='2.4' rx='1.2' fill='black'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------- *
 * 23.4 BLOCCO FIDUCIA / POSIZIONAMENTO
 * Pannello glass centrato e contenuto. Testi standard (axia-title, axia-lead).
 * ------------------------------------------------------------------------- */
.axia-contact-trust {
	position: relative;
	overflow: hidden;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
	background:
		radial-gradient(100% 100% at 50% 0%, rgba(124, 58, 237, 0.16), transparent 60%),
		var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
}

.axia-contact-trust .axia-title {
	max-width: 24ch;
	margin-left: auto;
	margin-right: auto;
}

.axia-contact-trust .axia-lead {
	max-width: 58ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------------- *
 * 23.5 RESPONSIVE PAGINA CONTATTI
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.axia-contact-panel {
		grid-template-columns: 1fr;
		gap: var(--axia-space-lg);
	}
	.axia-contact-types {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.axia-contact-types {
		grid-template-columns: 1fr;
	}
	.axia-contact-hero__actions.wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.axia-contact-hero__actions.wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.axia-contact-form-card input[type="text"],
	.axia-contact-form-card input[type="email"],
	.axia-contact-form-card input[type="tel"],
	.axia-contact-form-card select,
	.axia-contact-form-card textarea,
	.axia-contact-form-card .wpcf7-submit {
		transition: none;
	}
}

/* ========================================================================= *
 * 24. HERO LOGO SPACING FIX
 *
 * Le hero interne (Servizi, Portfolio, Contatti) hanno un logo dentro la
 * sezione: lo stacco header -> contenuto risultava eccessivo. Qui si riduce
 * il padding-top delle 3 hero e si controlla il margine del logo, senza
 * toccare la Home (.axia-hero, sez. 8) ne il markup Gutenberg.
 * Override append-only: stesse classi, piu avanti nel file => prevalgono.
 * ========================================================================= */
.axia-services-hero,
.axia-portfolio-hero,
.axia-contact-hero {
	padding-top: clamp(5rem, 3.5rem + 4vh, 6.75rem); /* ~80-108px (prima ~112-160px) */
}

/* Logo interno alla hero: stacco inferiore piu contenuto.
   Lo scope alla hero evita di colpire altre immagini; se assegni la classe
   .axia-hero-logo al blocco logo, viene gestita anche quella. La dimensione
   del logo NON viene toccata (resta come l'hai impostata). */
.axia-services-hero .wp-block-image,
.axia-portfolio-hero .wp-block-image,
.axia-contact-hero .wp-block-image,
.axia-services-hero .axia-hero-logo,
.axia-portfolio-hero .axia-hero-logo,
.axia-contact-hero .axia-hero-logo {
	margin-top: 0;
	margin-bottom: var(--axia-space-md); /* 24px */
}

/* Tablet: riduzione moderata. */
@media (max-width: 1024px) {
	.axia-services-hero,
	.axia-portfolio-hero,
	.axia-contact-hero {
		padding-top: clamp(4.5rem, 3rem + 3vh, 6rem); /* ~72-96px */
	}
}

/* Mobile: hero compatta, ma il logo non schiaccia il titolo. */
@media (max-width: 767px) {
	.axia-services-hero,
	.axia-portfolio-hero,
	.axia-contact-hero {
		padding-top: 5rem; /* 80px: spazio sufficiente sotto l'header */
	}
	.axia-services-hero .wp-block-image,
	.axia-portfolio-hero .wp-block-image,
	.axia-contact-hero .wp-block-image,
	.axia-services-hero .axia-hero-logo,
	.axia-portfolio-hero .axia-hero-logo,
	.axia-contact-hero .axia-hero-logo {
		margin-bottom: var(--axia-space-sm); /* 16px */
	}
}

/* ========================================================================= *
 * 25. SERVIZI — HERO "SERVICE CONSTELLATION" (solo .axia-services-hero)
 *
 * Differenzia la hero Servizi da quella Contatti aggiungendo, SOLO su
 * .axia-services-hero, un background piu ricco ma sobrio che evoca i servizi
 * digitali AXIA: griglia/interfaccia leggera in alto-destra, nodi luminosi,
 * orbite morbide e una traccia HUD. Tutto via pseudo-elementi (nessun markup,
 * nessuna immagine, nessuna libreria). Decorazioni dietro al contenuto; la
 * zona centrale (logo, H1, sottotitolo, CTA) e protetta da una mask che svuota
 * il centro -> testo sempre perfettamente leggibile.
 * Non tocca .axia-contact-hero, .axia-portfolio-hero, .axia-hero (Home).
 * ========================================================================= */
.axia-services-hero {
	overflow: hidden; /* le decorazioni non sbordano dalla sezione */
}

/* Contenuto sempre sopra le decorazioni. */
.axia-services-hero > .axia-container {
	position: relative;
	z-index: 2;
}

/* ::before -> alone tecnico lato destro + griglia "interfaccia" in alto/destra,
   sfumata via mask cosi non invade il centro. */
.axia-services-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	background-image:
		radial-gradient(55% 50% at 80% 6%, rgba(124, 58, 237, 0.20), transparent 60%),
		radial-gradient(50% 55% at 14% 14%, rgba(76, 29, 149, 0.12), transparent 62%),
		linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
	-webkit-mask-image: radial-gradient(135% 95% at 82% 0%, rgba(0, 0, 0, 0.95), transparent 70%);
	mask-image: radial-gradient(135% 95% at 82% 0%, rgba(0, 0, 0, 0.95), transparent 70%);
}

/* ::after -> "costellazione di servizi": nodi luminosi, due orbite sottili e
   una traccia diagonale HUD. La mask svuota il centro (34%) e tiene le
   decorazioni verso i bordi, lontano da logo/H1/sottotitolo/CTA. */
.axia-services-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	inset: 0;
	opacity: 0.9;
	background-image:
		radial-gradient(circle 2px at 16% 30%, rgba(216, 180, 254, 0.55), transparent),
		radial-gradient(circle 2.5px at 84% 22%, rgba(168, 85, 247, 0.50), transparent),
		radial-gradient(circle 1.5px at 73% 66%, rgba(216, 180, 254, 0.45), transparent),
		radial-gradient(circle 2px at 27% 72%, rgba(168, 85, 247, 0.42), transparent),
		radial-gradient(circle 1.5px at 91% 50%, rgba(216, 180, 254, 0.40), transparent),
		radial-gradient(circle 2px at 8% 56%, rgba(168, 85, 247, 0.38), transparent),
		radial-gradient(circle at 87% 16%, transparent 56px, rgba(168, 85, 247, 0.12) 57px, transparent 59px),
		radial-gradient(circle at 13% 80%, transparent 44px, rgba(168, 85, 247, 0.10) 45px, transparent 47px),
		linear-gradient(118deg, transparent 49.6%, rgba(168, 85, 247, 0.10) 50%, transparent 50.5%);
	-webkit-mask-image: radial-gradient(78% 68% at 50% 46%, transparent 34%, rgba(0, 0, 0, 0.92) 76%);
	mask-image: radial-gradient(78% 68% at 50% 46%, transparent 34%, rgba(0, 0, 0, 0.92) 76%);
}

/* Tablet: pattern piu rado e leggero. */
@media (max-width: 1024px) {
	.axia-services-hero::before {
		background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
	}
	.axia-services-hero::after {
		opacity: 0.7;
	}
}

/* Mobile: solo glow + griglia leggerissima; via la costellazione fitta per
   non affollare l'area dietro al titolo. */
@media (max-width: 767px) {
	.axia-services-hero::before {
		background-image:
			radial-gradient(60% 50% at 82% 4%, rgba(124, 58, 237, 0.18), transparent 62%),
			linear-gradient(rgba(168, 85, 247, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(168, 85, 247, 0.04) 1px, transparent 1px);
		background-size: 100% 100%, 52px 52px, 52px 52px;
	}
	.axia-services-hero::after {
		display: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 25.1 SERVIZI — BUSINESS DIGITAL LAYER (solo .axia-services-hero)
 *
 * Aggiunge un layer "digital agency" piu inerente al business AXIA, senza
 * sovrascrivere gli pseudo-elementi della 25 (gia occupati):
 *  - rail laterali sottili come "mappa strategica" -> background-layer extra
 *    sull'elemento (cosmic-bg preservato come ultimo layer);
 *  - micro-dashboard astratta in alto a destra con barre + punto KPI
 *    -> .axia-container::before (libero), label "KPI";
 *  - card HUD a pillola in basso a sinistra -> .axia-container::after
 *    (libero), label "LEAD".
 * I due pseudo del container sono z-index:-1: stanno sopra la costellazione
 * (25) ma SEMPRE dietro al contenuto (logo/H1/sottotitolo/CTA, z-index:2).
 * Niente markup, niente immagini, niente JS. Solo .axia-services-hero.
 * ------------------------------------------------------------------------- */
.axia-services-hero {
	background-image:
		linear-gradient(90deg, transparent 6.4%, rgba(160, 110, 255, 0.06) 6.6%, transparent 6.9%),
		linear-gradient(90deg, transparent 93.1%, rgba(160, 110, 255, 0.06) 93.3%, transparent 93.6%),
		var(--axia-gradient-cosmic-bg);
}

/* Micro-dashboard astratta (alto destra): 3 barre + punto KPI + label. */
.axia-services-hero > .axia-container::before {
	content: "KPI";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 6%;
	right: 0;
	width: 118px;
	height: 72px;
	padding: 9px 11px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(216, 180, 254, 0.32);
	background-color: rgba(255, 255, 255, 0.02);
	background-image:
		linear-gradient(rgba(160, 110, 255, 0.22), rgba(160, 110, 255, 0.22)),
		linear-gradient(rgba(160, 110, 255, 0.16), rgba(160, 110, 255, 0.16)),
		linear-gradient(rgba(160, 110, 255, 0.12), rgba(160, 110, 255, 0.12)),
		radial-gradient(circle 3px at center, rgba(216, 180, 254, 0.55), transparent);
	background-repeat: no-repeat;
	background-size: 66px 5px, 46px 5px, 80px 5px, 8px 8px;
	background-position: 11px 32px, 11px 44px, 11px 56px, 99px 14px;
	border: 1px solid rgba(160, 110, 255, 0.12);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Card HUD a pillola (basso sinistra): punto + label "LEAD". */
.axia-services-hero > .axia-container::after {
	content: "LEAD";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	bottom: 9%;
	left: 0;
	padding: 7px 13px 7px 21px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: rgba(216, 180, 254, 0.34);
	background-color: rgba(130, 70, 255, 0.04);
	background-image: radial-gradient(circle 3px at 9px 50%, rgba(168, 85, 247, 0.70), transparent);
	background-repeat: no-repeat;
	border: 1px solid rgba(160, 110, 255, 0.12);
	border-radius: var(--axia-radius-pill);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Tablet: layer business piu discreto. */
@media (max-width: 1024px) {
	.axia-services-hero > .axia-container::before,
	.axia-services-hero > .axia-container::after {
		opacity: 0.7;
	}
}

/* Mobile: via micro-card e rail; resta solo il fondo cosmico (+ glow/griglia
   leggera gia gestiti dalla 25). */
@media (max-width: 767px) {
	.axia-services-hero {
		background-image: var(--axia-gradient-cosmic-bg);
	}
	.axia-services-hero > .axia-container::before,
	.axia-services-hero > .axia-container::after {
		display: none;
	}
}

/* ------------------------------------------------------------------------- *
 * 25.2 SERVIZI — BUSINESS ICONS LAYER (solo .axia-services-hero)
 *
 * Tre segni "HUD/dashboard" inline-SVG aggiunti come background-layer
 * sull'elemento (gli pseudo ::before/::after di hero e container sono gia
 * occupati da 25/25.1). Posizionati agli angoli via background-position,
 * colore e alpha baked nell'SVG, micro-label come <text>. Niente markup,
 * niente immagini esterne, niente JS. Rail + cosmic-bg preservati.
 *  1) Utenti/lead   -> basso sinistra (vicino alla pillola LEAD)
 *  2) Fidelity/stelle + "TRUST" -> alto sinistra (sotto l'header)
 *  3) Crescita "ROAS" (barre + linea + punto) -> basso destra
 * Tutto e il layer piu profondo: SEMPRE dietro al contenuto (z-index:2).
 * ------------------------------------------------------------------------- */
.axia-services-hero {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 34'%3E%3Ctext x='2' y='15' font-family='sans-serif' font-size='13' letter-spacing='2' fill='%23C4B5FD' fill-opacity='0.42'%3E%E2%98%85%E2%98%85%E2%98%85%E2%98%85%E2%98%85%3C/text%3E%3Ctext x='3' y='30' font-family='sans-serif' font-size='8' font-weight='700' letter-spacing='2.5' fill='%23FFFFFF' fill-opacity='0.30'%3ETRUST%3C/text%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='none'%3E%3Cg stroke='%23FFFFFF' stroke-opacity='0.18' stroke-width='1.4'%3E%3Ccircle cx='16' cy='12' r='4.5'/%3E%3Cpath d='M8 25c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3Ccircle cx='48' cy='12' r='4.5'/%3E%3Cpath d='M40 25c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/g%3E%3Cg stroke='%23A855F7' stroke-opacity='0.5' stroke-width='1.6'%3E%3Ccircle cx='32' cy='9' r='5.2' fill='%23A855F7' fill-opacity='0.10'/%3E%3Cpath d='M23 25c0-5 4-9 9-9s9 4 9 9'/%3E%3C/g%3E%3Ccircle cx='32' cy='28' r='1.6' fill='%23C4B5FD' fill-opacity='0.7'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'%3E%3Cg fill='%23A855F7' fill-opacity='0.20'%3E%3Crect x='6' y='30' width='8' height='12'/%3E%3Crect x='20' y='24' width='8' height='18'/%3E%3Crect x='34' y='16' width='8' height='26'/%3E%3Crect x='48' y='8' width='8' height='34'/%3E%3C/g%3E%3Cpath d='M6 32 L24 26 L38 18 L62 6' stroke='%23C4B5FD' stroke-opacity='0.42' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='62' cy='6' r='2.6' fill='%23E9D5FF' fill-opacity='0.85'/%3E%3Ctext x='6' y='49' font-family='sans-serif' font-size='8' font-weight='700' letter-spacing='2.5' fill='%23FFFFFF' fill-opacity='0.30'%3EROAS%3C/text%3E%3C/svg%3E"),
		linear-gradient(90deg, transparent 6.4%, rgba(160, 110, 255, 0.06) 6.6%, transparent 6.9%),
		linear-gradient(90deg, transparent 93.1%, rgba(160, 110, 255, 0.06) 93.3%, transparent 93.6%),
		var(--axia-gradient-cosmic-bg);
	background-repeat: no-repeat;
	background-size: 84px 34px, 64px 32px, 80px 50px, 100% 100%, 100% 100%, 100% 100%;
	background-position:
		left 30px top 104px,
		left 40px bottom 72px,
		right 40px bottom 58px,
		0 0, 0 0, 0 0;
}

/* Tablet: stessi segni in scala ridotta (piu discreti). */
@media (max-width: 1024px) {
	.axia-services-hero {
		background-size: 72px 29px, 56px 28px, 70px 44px, 100% 100%, 100% 100%, 100% 100%;
	}
}

/* Mobile: via i segni business; resta solo il fondo cosmico (priorita al
   titolo + CTA puliti). I pseudo container sono gia nascosti dalla 25.1. */
@media (max-width: 767px) {
	.axia-services-hero {
		background-image: var(--axia-gradient-cosmic-bg);
	}
}

/* ------------------------------------------------------------------------- *
 * 25.3 SERVIZI — BUSINESS ICONS POSITION FIX (solo .axia-services-hero)
 *
 * Riposiziona i 4 segnali business gia esistenti (nessun nuovo elemento):
 *  A. TRUST/stelle  -> piu verso l'interno, staccato da bordo e logo header.
 *  B. KPI           -> scende e rientra, lontano dal bottone Contatti.
 *  C. LEAD + utenti -> l'icona utenti, prima layer di sfondo hero-anchored
 *     (si separava su schermi larghi), viene PARCHEGGIATA (size 0) e ridisegnata
 *     DENTRO la pill LEAD (container-anchored) -> gruppo unico "LEAD generation".
 *  D. ROAS          -> piu verso il centro, non attaccato al bordo destro.
 * Override append-only: stesse proprieta, piu avanti => prevalgono. Ordine dei
 * layer invariato. Niente !important, nessuna grafica rimossa.
 * ------------------------------------------------------------------------- */
.axia-services-hero {
	background-size:
		84px 34px,   /* 1 TRUST */
		0 0,         /* 2 utenti: parcheggiato (ora dentro la pill LEAD) */
		80px 50px,   /* 3 ROAS */
		100% 100%, 100% 100%, 100% 100%;
	background-position:
		left 15vw top 134px,    /* A. TRUST: dentro, sotto l'header */
		left -9999px top 0,     /* utenti: fuori scena come layer hero */
		left 76vw bottom 24%,   /* D. ROAS: verso il centro, lato destro */
		0 0, 0 0, 0 0;
}

/* B. KPI: scende leggermente e rientra dal bordo destro/menu. */
.axia-services-hero > .axia-container::before {
	top: 12%;
	right: 4%;
}

/* C. LEAD + utenti = un solo gruppo: la pill diventa una micro-card verticale
   con label "LEAD" sopra e icona utenti integrata sotto (stesso anchor). */
.axia-services-hero > .axia-container::after {
	bottom: 14%;
	left: 2.5%;
	width: 60px;
	padding: 8px 6px 30px;
	text-align: center;
	border-radius: var(--axia-radius-md);
	background-color: rgba(130, 70, 255, 0.05);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' fill='none'%3E%3Cg stroke='%23FFFFFF' stroke-opacity='0.18' stroke-width='1.4'%3E%3Ccircle cx='16' cy='12' r='4.5'/%3E%3Cpath d='M8 25c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3Ccircle cx='48' cy='12' r='4.5'/%3E%3Cpath d='M40 25c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/g%3E%3Cg stroke='%23A855F7' stroke-opacity='0.5' stroke-width='1.6'%3E%3Ccircle cx='32' cy='9' r='5.2' fill='%23A855F7' fill-opacity='0.10'/%3E%3Cpath d='M23 25c0-5 4-9 9-9s9 4 9 9'/%3E%3C/g%3E%3Ccircle cx='32' cy='28' r='1.6' fill='%23C4B5FD' fill-opacity='0.7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center bottom 7px;
	background-size: 46px 23px;
}

/* Tablet: stessi segni in scala ridotta; KPI/TRUST piu interni per non
   sfiorare menu/logo. (Le card container restano a opacity 0.7 dalla 25.1.) */
@media (max-width: 1024px) {
	.axia-services-hero {
		background-size: 74px 30px, 0 0, 70px 44px, 100% 100%, 100% 100%, 100% 100%;
		background-position:
			left 16vw top 124px,
			left -9999px top 0,
			left 72vw bottom 26%,
			0 0, 0 0, 0 0;
	}
	.axia-services-hero > .axia-container::before {
		top: 13%;
		right: 6%;
	}
	.axia-services-hero > .axia-container::after {
		background-size: 42px 21px;
	}
}

/* Mobile: hero business pulita. Solo fondo cosmico; niente card/segni. */
@media (max-width: 767px) {
	.axia-services-hero {
		background-image: var(--axia-gradient-cosmic-bg);
		background-size: auto;
		background-position: 0 0;
	}
	.axia-services-hero > .axia-container::before,
	.axia-services-hero > .axia-container::after {
		display: none;
	}
}

/* ========================================================================= *
 * 26. FOOTER — WIDE LAYOUT FIX
 *
 * Allarga e ribilancia SOLO il footer (sez. 17), senza toccare il .axia-container
 * globale (riga 110) ne altre sezioni. Override append-only: stessi selettori
 * piu avanti nel file => prevalgono. Le media query qui ridichiarate vincono su
 * quelle della sez. 17 (sorgente successiva). Nessun !important.
 * ========================================================================= */

/* Contenitore footer piu largo (scoped: NON tocca .axia-container globale). */
.axia-footer .axia-container {
	max-width: 1360px;
	padding-left: var(--axia-space-lg);
	padding-right: var(--axia-space-lg);
}

/* Tre colonne distribuite in orizzontale: brand | navigazione | contatti. */
.axia-footer__inner {
	grid-template-columns: 1.5fr 0.8fr 1fr;
	gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
	align-items: start;
}

/* Testo brand con respiro: niente colonna strettissima ne a-capo per parola. */
.axia-footer__text {
	max-width: 44ch;
}

/* Riga bassa: copyright a sinistra, servizi + legal a destra, su tutta la
   larghezza del nuovo contenitore. */
.axia-footer__bottom {
	gap: var(--axia-space-sm) var(--axia-space-lg);
}

/* Link Privacy/Cookie: testuali, integrati nel mood AXIA (no badge/bottoni). */
.axia-footer__legal-links {
	margin: 0;
	padding: 0;
	text-align: right;
	line-height: 1.9;
}
.axia-footer__legal-links a {
	color: var(--axia-text-muted);
	text-decoration: none;
	transition: color var(--axia-transition);
}
.axia-footer__legal-links a:hover {
	color: var(--axia-accent-hover);
}
.axia-footer__legal-links a:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
}

/* --- Tablet: brand a tutta larghezza sopra, nav + contatti sotto. --- */
@media (max-width: 1024px) {
	.axia-footer .axia-container {
		max-width: none;
		padding-left: var(--axia-space-md);
		padding-right: var(--axia-space-md);
	}
	.axia-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--axia-space-lg);
	}
	.axia-footer__brand {
		grid-column: 1 / -1;
	}
	.axia-footer__text {
		max-width: 60ch;
	}
}

/* --- Mobile: una colonna; copyright e legal uno sotto l'altro. --- */
@media (max-width: 767px) {
	.axia-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--axia-space-md);
	}
	.axia-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.axia-footer__legal-links {
		text-align: left;
	}
}

/* ========================================================================= *
 * 26.6 FOOTER — FULL WIDTH (footer.php override nel child)
 *
 * Il footer è renderizzato da axia-agency-child/footer.php come figlio diretto
 * di .wrapper (parent: width:100%; padding:0 3%), FUORI dall'area widget del
 * parent (niente .footer-content/.grid/.col-33/#block-11).
 *
 * Full-bleed simmetrico con la stessa tecnica del parent (.footer-content):
 * width:auto + margin-inline: calc(50% - 50vw) => edge-to-edge senza width:100vw
 * (niente scroll orizzontale da scrollbar). Il contenuto interno resta centrato
 * via .axia-container (max-width 1360px, sez. 26). Niente :has(), niente !important. */
footer.axia-footer {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

/* ------------------------------------------------------------------------- *
 * 25.4 SERVIZI — HERO GRAPHICS ON MOBILE (solo .axia-services-hero)
 *
 * Le sezioni 25 / 25.1 / 25.2 / 25.3 sotto i 767px nascondono (display:none e
 * background ridotto al solo cosmic-bg) tutte le decorazioni della hero Servizi,
 * rendendola troppo simile alle altre hero. Qui le RIPRISTINIAMO anche su mobile
 * ma in versione discreta e controllata:
 *  - segni piu piccoli (background-size / transform: scale ridotti);
 *  - opacita abbassata (costellazione 0.38, card 0.55);
 *  - SEMPRE dietro al testo: z-index gia gestito a monte (contenuto z-index:2,
 *    decorazioni 0/1 e card container -1) -> qui NON tocchiamo lo z-index;
 *  - niente scroll orizzontale: tutto vive dentro .axia-services-hero che ha
 *    overflow:hidden (sez. 25), nessun offset sborda la sezione;
 *  - leggibilita di titolo/testo/CTA preservata: la mask centrale della
 *    costellazione svuota il centro e le card stanno negli angoli.
 * Override append-only: stesse classi, DOPO i blocchi mobile 25.x => prevalgono.
 * Scope esclusivo .axia-services-hero: Contatti / Portfolio / Home non toccate.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Costellazione di nodi (sez. 25 ::after, prima display:none): torna
	   visibile ma molto attenuata. Mask centrale e gradienti restano dalla 25,
	   percio l'area del testo resta pulita. */
	.axia-services-hero::after {
		display: block;
		opacity: 0.38;
	}

	/* Segni business ripristinati e rimpiccioliti, spinti agli angoli lontano
	   dal blocco di testo centrale: TRUST/stelle in alto-sinistra, ROAS/grafico
	   in basso-destra. Rail laterali + fondo cosmico preservati. L'icona utenti
	   NON e qui (vive nella pill LEAD sotto): nessun doppione. */
	.axia-services-hero {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 34'%3E%3Ctext x='2' y='15' font-family='sans-serif' font-size='13' letter-spacing='2' fill='%23C4B5FD' fill-opacity='0.42'%3E%E2%98%85%E2%98%85%E2%98%85%E2%98%85%E2%98%85%3C/text%3E%3Ctext x='3' y='30' font-family='sans-serif' font-size='8' font-weight='700' letter-spacing='2.5' fill='%23FFFFFF' fill-opacity='0.30'%3ETRUST%3C/text%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'%3E%3Cg fill='%23A855F7' fill-opacity='0.20'%3E%3Crect x='6' y='30' width='8' height='12'/%3E%3Crect x='20' y='24' width='8' height='18'/%3E%3Crect x='34' y='16' width='8' height='26'/%3E%3Crect x='48' y='8' width='8' height='34'/%3E%3C/g%3E%3Cpath d='M6 32 L24 26 L38 18 L62 6' stroke='%23C4B5FD' stroke-opacity='0.42' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='62' cy='6' r='2.6' fill='%23E9D5FF' fill-opacity='0.85'/%3E%3Ctext x='6' y='49' font-family='sans-serif' font-size='8' font-weight='700' letter-spacing='2.5' fill='%23FFFFFF' fill-opacity='0.30'%3EROAS%3C/text%3E%3C/svg%3E"),
			linear-gradient(90deg, transparent 6.4%, rgba(160, 110, 255, 0.06) 6.6%, transparent 6.9%),
			linear-gradient(90deg, transparent 93.1%, rgba(160, 110, 255, 0.06) 93.3%, transparent 93.6%),
			var(--axia-gradient-cosmic-bg);
		background-repeat: no-repeat;
		background-size: 60px 24px, 58px 36px, 100% 100%, 100% 100%, 100% 100%;
		background-position:
			left 14px top 92px,     /* TRUST: angolo alto-sinistra, sotto l'header */
			right 14px bottom 14%,  /* ROAS: angolo basso-destra */
			0 0, 0 0, 0 0;
	}

	/* Micro-card KPI (alto-destra) e pill LEAD+utenti (basso-sinistra): tornano
	   visibili, ridotte (scale .82) e piu trasparenti, ancorate agli angoli.
	   Restano dietro al contenuto (z-index:-1 ereditato dalla 25.1). */
	.axia-services-hero > .axia-container::before,
	.axia-services-hero > .axia-container::after {
		display: block;
		opacity: 0.55;
	}
	.axia-services-hero > .axia-container::before {
		top: 6%;
		right: 3%;
		transform: scale(0.82);
		transform-origin: top right;
	}
	.axia-services-hero > .axia-container::after {
		bottom: 12%;
		left: 3%;
		transform: scale(0.82);
		transform-origin: bottom left;
	}
}

/* ========================================================================= *
 * 27. CHI SONO PAGE (solo .axia-about-page / .axia-about-*)
 *
 * Pagina "Chi sono" in Gutenberg nativo. Riusa al massimo il design system:
 * sezioni/container/testi (sez. 2-3, 9), bottoni Gutenberg (sez. 14), card
 * (sez. 4/10), timeline Metodo (sez. 19), CTA finale scenografica (sez. 21.1).
 * Qui SOLO cio che e specifico della pagina: wrapper, hero distintiva (anche
 * su mobile), blocco presentazione a due colonne con ritratto, callout "perche"
 * e micro-fix icone card. Tutto scoped sotto .axia-about-*: nessun override
 * globale, nessun'altra pagina toccata.
 * ========================================================================= */

/* --- Wrapper pagina: fondo scuro continuo come Home/Servizi/Portfolio. --- */
.axia-about-page {
	background-color: var(--axia-bg);
	color: var(--axia-text);
}
.axia-about-page > .axia-section,
.axia-about-page > .wp-block-cover { margin-top: 0; margin-bottom: 0; }
.axia-about-page p + p { margin-top: var(--axia-space-sm); }

/* ------------------------------------------------------------------------- *
 * 27.1 HERO "CHI SONO" — firma cosmica distinta (anche da mobile)
 * Doppio orb + anello-orbita: identita visiva diversa da Servizi/Contatti.
 * overflow:hidden -> niente scroll orizzontale; contenuto sempre sopra (z 2).
 * ------------------------------------------------------------------------- */
.axia-about-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(7rem, 5rem + 8vh, 10rem);
}
.axia-about-hero > .axia-container {
	position: relative;
	z-index: 2;
}
.axia-about-hero .axia-section__head {
	max-width: 880px;
	margin-bottom: 0;
}
.axia-about-hero .axia-lead {
	margin-left: auto;
	margin-right: auto;
}
.axia-about-hero .wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

/* ::before -> aura del founder: orb grande alto-destra + orb piccolo basso-sx. */
.axia-about-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: 0;
	background-image:
		radial-gradient(42% 46% at 82% 12%, rgba(168, 85, 247, 0.26), transparent 62%),
		radial-gradient(38% 42% at 12% 88%, rgba(124, 58, 237, 0.20), transparent 64%);
}

/* ::after -> anello orbita + particelle sul lato destro; la mask svuota il
   centro cosi titolo/testo/CTA restano perfettamente leggibili. */
.axia-about-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	inset: 0;
	opacity: 0.85;
	background-image:
		radial-gradient(circle at 82% 30%, transparent 96px, rgba(168, 85, 247, 0.16) 97px, transparent 99px),
		radial-gradient(circle at 82% 30%, transparent 60px, rgba(168, 85, 247, 0.12) 61px, transparent 63px),
		radial-gradient(circle 2.5px at 82% 30%, rgba(216, 180, 254, 0.80), transparent),
		radial-gradient(circle 2px at 70% 16%, rgba(168, 85, 247, 0.60), transparent),
		radial-gradient(circle 1.5px at 93% 44%, rgba(216, 180, 254, 0.55), transparent),
		radial-gradient(circle 2px at 16% 74%, rgba(168, 85, 247, 0.45), transparent);
	-webkit-mask-image: radial-gradient(80% 70% at 42% 46%, transparent 36%, rgba(0, 0, 0, 0.92) 74%);
	mask-image: radial-gradient(80% 70% at 42% 46%, transparent 36%, rgba(0, 0, 0, 0.92) 74%);
}

/* Tablet: orbita un filo piu discreta. */
@media (max-width: 1024px) {
	.axia-about-hero::after { opacity: 0.7; }
}

/* Mobile: la firma RESTA visibile (hero distinta anche da smartphone), solo
   piu compatta e attenuata. Anello in alto-destra, sopra l'area testo. */
@media (max-width: 767px) {
	.axia-about-hero {
		padding-top: var(--axia-space-2xl);
	}
	.axia-about-hero::before {
		background-image:
			radial-gradient(54% 40% at 86% 6%, rgba(168, 85, 247, 0.24), transparent 62%),
			radial-gradient(50% 36% at 8% 96%, rgba(124, 58, 237, 0.18), transparent 64%);
	}
	.axia-about-hero::after {
		opacity: 0.6;
		background-image:
			radial-gradient(circle at 86% 15%, transparent 58px, rgba(168, 85, 247, 0.16) 59px, transparent 61px),
			radial-gradient(circle 2px at 86% 15%, rgba(216, 180, 254, 0.70), transparent),
			radial-gradient(circle 1.5px at 68% 9%, rgba(168, 85, 247, 0.50), transparent),
			radial-gradient(circle 1.5px at 14% 90%, rgba(168, 85, 247, 0.40), transparent);
		-webkit-mask-image: radial-gradient(130% 58% at 50% 26%, rgba(0, 0, 0, 0.95), transparent 80%);
		mask-image: radial-gradient(130% 58% at 50% 26%, rgba(0, 0, 0, 0.95), transparent 80%);
	}
}

/* ------------------------------------------------------------------------- *
 * 27.2 PRESENTAZIONE ANDREA — due colonne desktop, una colonna mobile
 * ------------------------------------------------------------------------- */
.wp-block-columns.axia-about-intro {
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.axia-about-intro__content .axia-title {
	margin-bottom: var(--axia-space-md);
}

/* Ritratto: cornice glass premium con alone cosmico. Mostra il placeholder
   finche non si inserisce la foto; con una <img> reale la cornice la avvolge. */
.axia-about-portrait {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(168, 85, 247, 0.22);
	border-radius: var(--axia-radius-lg);
	background:
		radial-gradient(90% 80% at 80% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
		var(--axia-surface-glass);
	box-shadow: var(--axia-shadow-md);
	aspect-ratio: 4 / 5;
}
.axia-about-portrait:has(img) { aspect-ratio: auto; }
.axia-about-portrait figure { margin: 0; }
.axia-about-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}
.axia-about-portrait__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: var(--axia-space-md);
	text-align: center;
	font-size: var(--axia-fs-eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--axia-text-muted);
}
.axia-about-portrait__ph strong {
	display: block;
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--axia-text);
}

/* ------------------------------------------------------------------------- *
 * 27.3 "PERCHE NASCE AXIA" — callout con frase chiave evidenziata
 * ------------------------------------------------------------------------- */
.axia-about-why .axia-container { max-width: 880px; }
.axia-about-quote {
	position: relative;
	margin: var(--axia-space-lg) 0 0;
	padding: var(--axia-space-lg);
	padding-left: calc(var(--axia-space-lg) + 6px);
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.4;
	font-weight: 600;
	color: var(--axia-text);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(124, 58, 237, 0.16), transparent 55%),
		var(--axia-surface-glass);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
}
.axia-about-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--axia-space-md);
	bottom: var(--axia-space-md);
	width: 3px;
	border-radius: var(--axia-radius-pill);
	background: var(--axia-gradient-cosmic);
}

/* ------------------------------------------------------------------------- *
 * 27.4 "COSA FACCIO" — 4 card del design system (.axia-card) con icona SVG
 * Azzera i margini di flusso che WP inietta sui figli del gruppo-griglia.
 * ------------------------------------------------------------------------- */
.axia-about-grid > * { margin: 0; }
.axia-about-grid .axia-card { height: 100%; }
.axia-about-grid .axia-card__icon svg {
	width: 24px;
	height: 24px;
}
.axia-about-grid .axia-card p {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0;
}

/* ------------------------------------------------------------------------- *
 * 27.5 RESPONSIVE — ritratto centrato/limitato quando le colonne si impilano
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.axia-about-portrait {
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ------------------------------------------------------------------------- *
 * 27.6 "RISULTATI CONCRETI PER I CLIENTI" — 3 card glass + frase + CTA
 * Sezione tra "Cosa faccio" (4) e "Il metodo" (5). Riusa .axia-card/--glass.
 * Griglia 3 col desktop -> 2 (tablet, da sez. 6) -> 1 (mobile). Azzera i
 * margini di flusso WP sui figli del gruppo-griglia; card a pari altezza.
 * Tutto scoped .axia-about-results*: nessun override globale.
 * ------------------------------------------------------------------------- */
.axia-about-results-grid > * { margin: 0; }
.axia-about-results-grid .axia-card { height: 100%; }
.axia-about-results-grid .axia-card__icon svg {
	width: 24px;
	height: 24px;
}
.axia-about-results-grid .axia-card p {
	font-size: 0.95rem;
	line-height: var(--axia-lh-base);
	color: var(--axia-text-muted);
	margin: 0;
}

/* Frase conclusiva: centrata, filetto viola superiore, tono autorevole. */
.axia-about-results-note {
	max-width: 60ch;
	margin: var(--axia-space-xl) auto 0;
	padding-top: var(--axia-space-md);
	border-top: 1px solid var(--axia-border);
	text-align: center;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	line-height: var(--axia-lh-base);
	color: var(--axia-text);
}

/* CTA sezione: centrata sotto la frase conclusiva. */
.axia-about-results .wp-block-buttons {
	justify-content: center;
	margin-top: var(--axia-space-lg);
}

/* ------------------------------------------------------------------------- *
 * 27.7 ABOUT HERO COVER — hero scenografica con immagine di sfondo (Opzione C)
 *
 * SOSTITUISCE la precedente 27.7 (split media/testo): quella struttura non e
 * piu usata, percio le sue classi (__grid/__media/__image) sono state RIMOSSE
 * per non lasciare CSS morto. Ora la hero "Chi sono" e una cover: foto di
 * Andrea full-bleed (.axia-about-hero__bg, blocco immagine reale con alt),
 * overlay scuro multi-livello (.axia-about-hero__overlay) per la leggibilita
 * di logo e testo, blocco testo a sinistra (.axia-about-hero__content) e CTA
 * (.axia-about-hero__actions). Le decorazioni orb/orbita di 27.1 vengono
 * disattivate SOLO per la variante --cover. Tutto scoped .axia-about-hero*:
 * Home/Servizi/Portfolio non toccate. Niente scroll orizzontale (overflow:hidden).
 * ------------------------------------------------------------------------- */

/* Sezione cover: altezza importante, contenuto centrato in verticale. */
.axia-about-hero--cover {
	display: flex;
	align-items: center;
	min-height: clamp(620px, 72vh, 720px);
	padding-top: clamp(5rem, 3rem + 5vh, 7rem);    /* spazio sotto header/logo */
	padding-bottom: clamp(3rem, 2rem + 4vh, 5rem);
}

/* Disattiva orb/orbita di 27.1 nella variante cover (overlay dedicato sotto). */
.axia-about-hero--cover::before,
.axia-about-hero--cover::after {
	display: none;
}

/* Immagine di sfondo full-bleed: soggetto verso destra. */
.axia-about-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}
.axia-about-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 28%; /* destra + leggermente in alto: soggetto e volto visibili */
}

/* Overlay multi-livello: glow viola basso-sx + scurita sx->dx + alto/basso. */
.axia-about-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(55% 70% at 10% 102%, rgba(124, 58, 237, 0.22), transparent 60%),
		linear-gradient(90deg, rgba(10, 10, 14, 0.92) 0%, rgba(10, 10, 14, 0.72) 40%, rgba(10, 10, 14, 0.30) 70%, rgba(10, 10, 14, 0.52) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0.58) 100%);
}

/* Blocco testo a sinistra, leggibile sopra l'immagine. */
.axia-about-hero__content {
	max-width: 760px;
	text-align: left;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.axia-about-hero__content .axia-lead {
	max-width: 56ch;
	margin-left: 0;
	margin-right: 0;
}

/* CTA allineate a sinistra sotto il lead (vince su 27.1 .wp-block-buttons). */
.axia-about-hero--cover .axia-about-hero__actions {
	justify-content: flex-start;
	margin-top: var(--axia-space-lg);
}

/* Tablet: hero un po' piu bassa. */
@media (max-width: 1024px) {
	.axia-about-hero--cover {
		min-height: clamp(560px, 68vh, 660px);
	}
}

/* Mobile: testo sempre leggibile, immagine piu scura, altezza contenuta. */
@media (max-width: 767px) {
	.axia-about-hero--cover {
		min-height: clamp(480px, 76vh, 560px);
		padding-top: clamp(4.5rem, 3rem + 6vh, 6rem);
		padding-bottom: var(--axia-space-xl);
	}
	.axia-about-hero__bg img {
		object-position: 58% 22%; /* evita tagli brutti del volto su schermi stretti */
	}
	.axia-about-hero__overlay {
		background:
			radial-gradient(70% 60% at 12% 100%, rgba(124, 58, 237, 0.20), transparent 62%),
			linear-gradient(180deg, rgba(8, 8, 12, 0.82) 0%, rgba(8, 8, 12, 0.55) 45%, rgba(8, 8, 12, 0.86) 100%);
	}
	.axia-about-hero__content {
		max-width: none;
	}
}

/* Smartphone: CTA impilate a piena larghezza, ben distanziate. */
@media (max-width: 480px) {
	.axia-about-hero--cover .axia-about-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.axia-about-hero--cover .axia-about-hero__actions .wp-block-button {
		width: 100%;
	}
	.axia-about-hero--cover .axia-about-hero__actions .wp-block-button__link {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

/* ========================================================================= *
 * 28. HOME — CTA INTERMEDIE DI NAVIGAZIONE + FAQ
 *     Scope: SOLO .axia-home-cta* e .axia-faq* (blocchi nuovi della Home).
 *     Nessun override globale: le altre sezioni della Home non sono toccate.
 * ========================================================================= */

/* --- 28.1 CTA intermedia: banda compatta con pannello dark glass --- */

/* La banda riduce il respiro verticale rispetto a .axia-section (2xl):
   interrompe lo scroll senza diventare una sezione "piena". */
.axia-home-cta-band {
	padding-top: var(--axia-space-xl);
	padding-bottom: var(--axia-space-xl);
}

/* Pannello: dark glass, bordo sottile, glow viola leggero. */
.axia-home-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axia-space-lg);
	padding: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem) clamp(1.5rem, 1.1rem + 1.6vw, 3rem);
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-lg);
	background-color: var(--axia-surface-glass);
	background-image: radial-gradient(120% 180% at 0% 0%, rgba(124, 58, 237, 0.16), transparent 58%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--axia-shadow-sm);
}

/* Filo d'accento viola sul bordo sinistro: segnale visivo di "stop & azione". */
.axia-home-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: var(--axia-gradient-cosmic);
	opacity: 0.9;
	pointer-events: none;
}

.axia-home-cta__text {
	max-width: 62ch;
}

.axia-home-cta__title {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
	font-weight: 700;
	line-height: var(--axia-lh-tight);
	margin: 0 0 var(--axia-space-xs);
	color: var(--axia-text);
}

.axia-home-cta__desc {
	margin: 0;
	color: var(--axia-text-muted);
	line-height: var(--axia-lh-base);
}

.axia-home-cta__action {
	flex-shrink: 0;
	margin: 0;
}

/* Responsive CTA: testo e bottone impilati su schermi medio-piccoli. */
@media (max-width: 860px) {
	.axia-home-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--axia-space-md);
	}
	.axia-home-cta__text {
		max-width: none;
	}
}

/* --- 28.2 FAQ: accordion nativo (wp:details) in stile dark glass --- */
.axia-faq {
	display: flex;
	flex-direction: column;
	gap: var(--axia-space-sm);
	margin-top: var(--axia-space-lg);
}

.axia-faq__item {
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 0 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	transition: border-color var(--axia-transition), background-color var(--axia-transition);
}

.axia-faq__item[open] {
	border-color: rgba(168, 85, 247, 0.35);
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 60%);
}

/* Domanda cliccabile: rimuove il marker nativo, aggiunge chevron a destra. */
.axia-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axia-space-md);
	list-style: none;
	cursor: pointer;
	padding: var(--axia-space-md) 0;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
	font-weight: 600;
	line-height: var(--axia-lh-tight);
	color: var(--axia-text);
}
.axia-faq__item > summary::-webkit-details-marker {
	display: none;
}

/* Chevron +/- realizzato con un quadrato ruotato. */
.axia-faq__item > summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--axia-accent-hover);
	border-bottom: 2px solid var(--axia-accent-hover);
	transform: rotate(45deg);
	transition: transform var(--axia-transition);
}
.axia-faq__item[open] > summary::after {
	transform: rotate(-135deg);
}

.axia-faq__item > summary:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
	border-radius: var(--axia-radius-sm);
}

/* Risposta (paragrafo dopo summary). */
.axia-faq__item > *:not(summary) {
	margin: 0 0 var(--axia-space-md);
	color: var(--axia-text-muted);
	line-height: var(--axia-lh-base);
}

/* ========================================================================= *
 * 29. SERVIZI — FAQ (accordion nativo <details>/<summary> in Custom HTML)
 *     Scope: SOLO .axia-services-faq* (blocco HTML personalizzato della
 *     pagina Servizi). Riusa la logica visiva della FAQ Home (sez. 28.2) in
 *     stile dark glass. Nessun override globale: nessun'altra sezione toccata.
 * ========================================================================= */
.axia-services-faq {
	display: flex;
	flex-direction: column;
	gap: var(--axia-space-sm);
	margin-top: var(--axia-space-lg);
}

.axia-services-faq__item {
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 0 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	transition: border-color var(--axia-transition), background-color var(--axia-transition);
}

.axia-services-faq__item[open] {
	border-color: rgba(168, 85, 247, 0.35);
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 60%);
}

/* Domanda cliccabile: niente marker nativo, chevron a destra come la FAQ Home. */
.axia-services-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axia-space-md);
	list-style: none;
	cursor: pointer;
	padding: var(--axia-space-md) 0;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
	font-weight: 600;
	line-height: var(--axia-lh-tight);
	color: var(--axia-text);
}
.axia-services-faq__question::-webkit-details-marker {
	display: none;
}

/* Chevron realizzato con un quadrato ruotato (come .axia-faq). */
.axia-services-faq__question::after {
	content: "";
	flex-shrink: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--axia-accent-hover);
	border-bottom: 2px solid var(--axia-accent-hover);
	transform: rotate(45deg);
	transition: transform var(--axia-transition);
}
.axia-services-faq__item[open] .axia-services-faq__question::after {
	transform: rotate(-135deg);
}

.axia-services-faq__question:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
	border-radius: var(--axia-radius-sm);
}

/* Risposta: stesso colore/leading dei testi muted, spazio inferiore interno. */
.axia-services-faq__answer {
	padding-bottom: var(--axia-space-md);
}
.axia-services-faq__answer > * {
	margin: 0;
	color: var(--axia-text-muted);
	line-height: var(--axia-lh-base);
}
.axia-services-faq__answer > * + * {
	margin-top: var(--axia-space-sm);
}

/* ========================================================================= *
 * 30. PORTFOLIO — FAQ (accordion nativo <details>/<summary> in Custom HTML)
 *     Scope: SOLO .axia-portfolio-faq* (blocco HTML personalizzato della
 *     pagina Portfolio). Riusa la logica visiva della FAQ Home (sez. 28.2)
 *     in stile dark glass. Nessun override globale: nessun'altra sezione
 *     della pagina Portfolio viene toccata.
 * ========================================================================= */
.axia-portfolio-faq {
	display: flex;
	flex-direction: column;
	gap: var(--axia-space-sm);
	margin-top: var(--axia-space-lg);
}

.axia-portfolio-faq__item {
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 0 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	transition: border-color var(--axia-transition), background-color var(--axia-transition);
}

.axia-portfolio-faq__item[open] {
	border-color: rgba(168, 85, 247, 0.35);
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 60%);
}

/* Domanda cliccabile: niente marker nativo, chevron a destra come la FAQ Home. */
.axia-portfolio-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axia-space-md);
	list-style: none;
	cursor: pointer;
	padding: var(--axia-space-md) 0;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
	font-weight: 600;
	line-height: var(--axia-lh-tight);
	color: var(--axia-text);
}
.axia-portfolio-faq__question::-webkit-details-marker {
	display: none;
}

/* Chevron realizzato con un quadrato ruotato (come .axia-faq). */
.axia-portfolio-faq__question::after {
	content: "";
	flex-shrink: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--axia-accent-hover);
	border-bottom: 2px solid var(--axia-accent-hover);
	transform: rotate(45deg);
	transition: transform var(--axia-transition);
}
.axia-portfolio-faq__item[open] .axia-portfolio-faq__question::after {
	transform: rotate(-135deg);
}

.axia-portfolio-faq__question:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
	border-radius: var(--axia-radius-sm);
}

/* Risposta: stesso colore/leading dei testi muted, spazio inferiore interno. */
.axia-portfolio-faq__answer {
	padding-bottom: var(--axia-space-md);
}
.axia-portfolio-faq__answer > * {
	margin: 0;
	color: var(--axia-text-muted);
	line-height: var(--axia-lh-base);
}
.axia-portfolio-faq__answer > * + * {
	margin-top: var(--axia-space-sm);
}

/* ========================================================================= *
 * 31. CONTATTI — FAQ (accordion nativo <details>/<summary> in Custom HTML)
 *     Scope: SOLO .axia-contact-faq* (blocco HTML personalizzato della
 *     pagina Contatti). Riusa la logica visiva della FAQ Home (sez. 28.2)
 *     in stile dark glass. Nessun override globale: hero, modulo contatti,
 *     card e CTA della pagina non vengono toccati.
 * ========================================================================= */
.axia-contact-faq {
	display: flex;
	flex-direction: column;
	gap: var(--axia-space-sm);
	margin-top: var(--axia-space-lg);
}

.axia-contact-faq__item {
	border: 1px solid var(--axia-border);
	border-radius: var(--axia-radius-md);
	background-color: var(--axia-surface-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 0 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
	transition: border-color var(--axia-transition), background-color var(--axia-transition);
}

.axia-contact-faq__item[open] {
	border-color: rgba(168, 85, 247, 0.35);
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 60%);
}

/* Domanda cliccabile: niente marker nativo, chevron a destra come la FAQ Home. */
.axia-contact-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--axia-space-md);
	list-style: none;
	cursor: pointer;
	padding: var(--axia-space-md) 0;
	font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
	font-weight: 600;
	line-height: var(--axia-lh-tight);
	color: var(--axia-text);
}
.axia-contact-faq__question::-webkit-details-marker {
	display: none;
}

/* Chevron realizzato con un quadrato ruotato (come .axia-faq). */
.axia-contact-faq__question::after {
	content: "";
	flex-shrink: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--axia-accent-hover);
	border-bottom: 2px solid var(--axia-accent-hover);
	transform: rotate(45deg);
	transition: transform var(--axia-transition);
}
.axia-contact-faq__item[open] .axia-contact-faq__question::after {
	transform: rotate(-135deg);
}

.axia-contact-faq__question:focus-visible {
	outline: 2px solid var(--axia-focus-ring);
	outline-offset: 3px;
	border-radius: var(--axia-radius-sm);
}

/* Risposta: stesso colore/leading dei testi muted, spazio inferiore interno. */
.axia-contact-faq__answer {
	padding-bottom: var(--axia-space-md);
}
.axia-contact-faq__answer > * {
	margin: 0;
	color: var(--axia-text-muted);
	line-height: var(--axia-lh-base);
}
.axia-contact-faq__answer > * + * {
	margin-top: var(--axia-space-sm);
}