/* FONT: Inter variabile self-hosted (licenza OFL, fonts/LICENSE.txt).
	   Usato solo come fallback dopo il font di sistema (SF Pro su Apple) */
	@font-face {
		font-family: 'Inter';
		src: url('fonts/InterVariable.woff2') format('woff2');
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* DESIGN TOKEN (ADR 0001): base neutra + unico accento rosa #ff1297 */
	:root {
		color-scheme: light dark;

		/* Superfici e testo */
		--bg: #ffffff;
		--bg-alt: #f5f5f7;
		--bg-dark: #1d1d1f;
		--text: #1d1d1f;
		--text-2: #6e6e73;
		--hairline: rgba(0, 0, 0, 0.12);
		--nav-bg: rgba(255, 255, 255, 0.72);
		--menu-bg: #ffffff;

		/* Testo e filetti sulle superfici scure (banda contatti, footer):
		   scure in entrambi gli schemi */
		--on-dark: #f5f5f7;
		--on-dark-2: #a1a1a6;
		--on-dark-strong: #ffffff;
		--hairline-on-dark: rgba(255, 255, 255, 0.16);
		--border-on-dark: rgba(255, 255, 255, 0.24);

		/* Accento: --accent per riempimenti (testo bianco sopra),
		   --accent-link per testo/link sullo sfondo */
		--accent: #ff1297;
		--accent-hover: #d90a7e;
		--on-accent: #ffffff;
		--accent-link: #ff1297;

		/* Tipografia */
		--font:
			-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
			'Helvetica Neue', Arial, sans-serif;
		--fs-hero: clamp(2.5rem, 1.2rem + 6.4vw, 5.5rem);
		--fs-h2: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
		--fs-lead: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
		--fs-body: 1.0625rem;
		--fs-small: 0.875rem;
		--tracking-display: -0.03em;
		--tracking-title: -0.022em;
		--lh-display: 1.05;
		--lh-title: 1.12;
		--lh-body: 1.5;

		/* Forme */
		--radius-tile: 28px;
		--radius-pill: 980px;

		/* Layout */
		--nav-h: 48px;
		--container: 1080px;
		--gutter: 22px;

		/* Curva ease-out unica: parte rapida, atterraggio morbido */
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--bg: #000000;
			--bg-alt: #161617;
			--bg-dark: #1d1d1f;
			--text: #f5f5f7;
			--text-2: #a1a1a6;
			--hairline: rgba(255, 255, 255, 0.16);
			--nav-bg: rgba(22, 22, 23, 0.72);
			--menu-bg: #000000;
			--accent-link: #ff1297;
		}
	}

	@media (prefers-contrast: more) {
		:root {
			--text: #000000;
			--text-2: #3a3a3c;
			--hairline: rgba(0, 0, 0, 0.6);
			--accent: #a8005c;
			--accent-hover: #8a004c;
			--accent-link: #a8005c;
			--on-dark-2: #ffffff;
			--hairline-on-dark: rgba(255, 255, 255, 0.7);
		}
	}

	@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
		:root {
			--text: #ffffff;
			--text-2: #e5e5ea;
			--hairline: rgba(255, 255, 255, 0.7);
			--accent-link: #ff7bc3;
		}
	}

	html {
		scroll-behavior: smooth;
		/* Le ancore non finiscono sotto la nav sticky */
		scroll-padding-top: var(--nav-h);
		-webkit-text-size-adjust: 100%;
	}

	body {
		font-family: var(--font);
		font-size: var(--fs-body);
		color: var(--text);
		background: var(--bg);
		line-height: var(--lh-body);
		overflow-x: hidden;
		-webkit-font-smoothing: antialiased;
	}

	body.menu-open {
		overflow: hidden;
	}

	a,
	button {
		-webkit-tap-highlight-color: transparent;
	}

	a:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--accent-link);
		outline-offset: 3px;
	}

	/* BANDE a tutta larghezza: alternanza bianco / grigio / scuro */
	.band {
		max-width: none;
		margin: 0;
		padding: 96px var(--gutter);
	}

	.band-light {
		background: var(--bg);
		color: var(--text);
	}

	.band-alt {
		background: var(--bg-alt);
		color: var(--text);
	}

	.band-dark {
		background: var(--bg-dark);
		color: var(--on-dark);
	}

	/* HEADER / NAVIGATION: sticky, 48px, traslucida.
	   Il blur sta sul ::before così l'header non diventa il
	   containing block del menu mobile (position: fixed) */
	header {
		position: sticky;
		top: 0;
		z-index: 1000;
		height: var(--nav-h);
	}

	header::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--nav-bg);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}

	/* Filo sottile solo quando c'è contenuto sotto: si anima l'opacity */
	header::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 1px;
		background: var(--hairline);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s var(--ease-out);
	}

	header.scrolled::after {
		opacity: 1;
	}

	nav {
		max-width: var(--container);
		height: 100%;
		margin: 0 auto;
		padding: 0 var(--gutter);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		position: relative;
		z-index: 999;
		font-weight: 600;
		font-size: 1.0625rem;
		letter-spacing: -0.01em;
		color: var(--text);
		text-decoration: none;
	}

	.nav-links {
		display: flex;
		gap: 28px;
		list-style: none;
		align-items: center;
	}

	.nav-links a {
		text-decoration: none;
		color: var(--text);
		opacity: 0.8;
		font-weight: 400;
		font-size: 0.8125rem;
		letter-spacing: -0.005em;
		transition: opacity 0.2s var(--ease-out);
	}

	.cta-nav {
		background: var(--accent);
		padding: 6px 14px;
		border-radius: var(--radius-pill);
		transition: transform 0.2s var(--ease-out);
	}

	.nav-links a.cta-nav {
		color: var(--on-accent);
		font-weight: 500;
		opacity: 1;
	}

	/* Hamburger disegnato in CSS: due linee che diventano una X */
	.mobile-menu-btn {
		display: none;
		position: relative;
		background: none;
		border: none;
		color: var(--text);
		cursor: pointer;
		width: 44px;
		height: 44px;
		margin-right: -12px;
	}

	.menu-icon,
	.menu-icon::before {
		position: absolute;
		width: 18px;
		height: 1.5px;
		background: currentColor;
		border-radius: 1px;
		transition: transform 0.3s var(--ease-out);
	}

	.menu-icon {
		left: 13px;
		top: 19px;
	}

	.menu-icon::before {
		content: '';
		left: 0;
		top: 0;
		transform: translateY(6px);
	}

	.mobile-menu-btn[aria-expanded='true'] .menu-icon {
		transform: translateY(3px) rotate(45deg);
	}

	.mobile-menu-btn[aria-expanded='true'] .menu-icon::before {
		transform: rotate(-90deg);
	}

	/* HERO: solo tipografico, centrato */
	.hero {
		padding-top: 112px;
		padding-bottom: 96px;
		text-align: center;
	}

	.hero-content {
		max-width: 880px;
		margin: 0 auto;
	}

	.hero h1 {
		font-weight: 700;
		font-size: var(--fs-hero);
		line-height: var(--lh-display);
		letter-spacing: var(--tracking-display);
		color: var(--text);
		margin-bottom: 20px;
		text-wrap: balance;
	}

	.hero-subtitle {
		font-size: var(--fs-lead);
		line-height: 1.25;
		letter-spacing: -0.015em;
		color: var(--text);
		font-weight: 600;
		margin-bottom: 20px;
		text-wrap: balance;
	}

	.hero-description {
		font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
		line-height: 1.55;
		color: var(--text-2);
		max-width: 640px;
		margin: 0 auto 36px;
		text-wrap: pretty;
	}

	.hero-description strong {
		color: var(--text);
		font-weight: 600;
	}

	.hero-cta {
		display: flex;
		gap: 12px 28px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.btn-primary {
		background: var(--accent);
		color: var(--on-accent);
		padding: 13px 28px;
		border-radius: var(--radius-pill);
		text-decoration: none;
		font-weight: 500;
		font-size: 1.0625rem;
		line-height: 1.2;
		transition: transform 0.2s var(--ease-out);
		display: inline-block;
		font-family: inherit;
		border: none;
		cursor: pointer;
	}

	/* Secondaria: stile link Apple, con chevron */
	.btn-secondary {
		background: transparent;
		color: var(--accent-link);
		padding: 13px 4px;
		text-decoration: none;
		font-weight: 500;
		font-size: 1.0625rem;
		line-height: 1.2;
		display: inline-block;
		font-family: inherit;
	}

	.btn-secondary::after {
		content: '\203A';
		display: inline-block;
		margin-left: 0.3em;
		transition: transform 0.2s var(--ease-out);
	}

	.hero-chips {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		margin-top: 56px;
	}

	.chip {
		background: var(--bg-alt);
		color: var(--text-2);
		font-size: var(--fs-small);
		font-weight: 500;
		letter-spacing: -0.005em;
		line-height: 1.2;
		padding: 9px 16px;
		border-radius: var(--radius-pill);
	}

	/* TESTATE DI SEZIONE: titolo + sottotitolo comuni a tutte le bande */
	.section-header {
		max-width: var(--container);
		margin: 0 auto 56px;
		text-align: center;
	}

	.section-title {
		font-weight: 700;
		font-size: var(--fs-h2);
		line-height: var(--lh-title);
		letter-spacing: var(--tracking-title);
		color: var(--text);
		text-wrap: balance;
	}

	.section-subtitle {
		font-size: var(--fs-lead);
		line-height: 1.3;
		color: var(--text-2);
		max-width: 720px;
		margin: 16px auto 0;
	}

	/* CHI SONO (ticket 04) */
	.chi-sono-wrap {
		max-width: var(--container);
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 64px;
		row-gap: 56px;
		align-items: center;
	}

	#chi-sono .section-header {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	#chi-sono .section-title {
		line-height: 1.07;
		letter-spacing: -0.03em;
	}

	.chi-sono-content {
		display: contents;
	}

	.chi-sono-photo {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius-tile);
		overflow: hidden;
	}

	.chi-sono-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 0 -20px;
		display: block;
	}

	.chi-sono-text h3 {
		font-family: var(--font);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
		line-height: 1.1;
		letter-spacing: -0.02em;
		color: var(--text);
		margin-bottom: 24px;
	}

	.chi-sono-text p {
		font-size: var(--fs-body);
		line-height: 1.6;
		color: var(--text-2);
		margin-bottom: 18px;
	}

	.chi-sono-text p:last-child {
		margin-bottom: 0;
	}

	.chi-sono-text strong {
		color: var(--text);
		font-weight: 600;
	}

	.qualita-list {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 16px;
	}

	.qualita-item {
		background: var(--bg);
		color: var(--text);
		padding: 28px 24px;
		min-height: 180px;
		border-radius: var(--radius-tile);
		display: flex;
		align-items: flex-end;
		grid-column: span 5;
	}

	.qualita-item:nth-child(1),
	.qualita-item:nth-child(4) {
		grid-column: span 7;
		padding: 36px;
	}

	.qualita-text {
		font-weight: 600;
		font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);
		line-height: 1.2;
		letter-spacing: -0.015em;
	}

	.qualita-item:nth-child(1) .qualita-text,
	.qualita-item:nth-child(4) .qualita-text {
		font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
		line-height: 1.12;
		letter-spacing: -0.02em;
	}

	@media (max-width: 1024px) {
		.chi-sono-wrap {
			grid-template-columns: minmax(0, 1fr);
			row-gap: 40px;
		}

		.chi-sono-photo {
			max-width: 480px;
			margin: 0 auto;
		}

		.qualita-item {
			grid-column: span 6;
		}

		.qualita-item:nth-child(1),
		.qualita-item:nth-child(4) {
			padding: 28px 24px;
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 600px) {
		.qualita-item,
		.qualita-item:nth-child(1),
		.qualita-item:nth-child(4) {
			grid-column: 1 / -1;
			min-height: 120px;
			padding: 24px;
		}
	}

	@media (prefers-contrast: more) {
		.qualita-item {
			border: 1px solid var(--text);
			color: var(--text);
		}
	}

	/* SERVIZI + A CHI MI RIVOLGO (ticket 05): tile su bande chiare */
	.servizi-grid,
	.target-grid {
		max-width: var(--container);
		margin: 0 auto;
	}

	.servizi-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.servizio-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background: var(--bg-alt);
		color: var(--text);
		padding: 48px 40px 40px;
		border-radius: var(--radius-tile);
	}

	.servizio-card h3 {
		font-family: var(--font);
		font-weight: 700;
		font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
		line-height: var(--lh-title);
		letter-spacing: var(--tracking-title);
		color: var(--text);
		margin-bottom: 16px;
	}

	.servizio-card p {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-2);
		margin-bottom: 28px;
	}

	.servizio-features {
		list-style: none;
		margin: 0 0 36px;
		padding: 0;
		width: 100%;
	}

	.servizio-features li {
		padding: 14px 0;
		border-top: 1px solid var(--hairline);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text);
	}

	.servizio-features li:last-child {
		border-bottom: 1px solid var(--hairline);
	}

	.servizio-card .btn-primary {
		margin-top: auto;
	}

	.target-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.target-card {
		background: var(--bg-alt);
		color: var(--text);
		padding: 40px 36px;
		border-radius: var(--radius-tile);
		text-align: left;
	}

	/* Bento: tile larghe alternate (solo desktop) */
	.target-card:nth-child(1),
	.target-card:nth-child(4),
	.target-card:nth-child(5) {
		grid-column: span 2;
	}

	.target-card h3 {
		font-family: var(--font);
		font-weight: 700;
		font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
		line-height: var(--lh-title);
		letter-spacing: var(--tracking-title);
		color: var(--text);
		margin-bottom: 12px;
	}

	.target-card p {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-2);
	}

	@media (max-width: 1024px) {
		.target-card:nth-child(n) {
			grid-column: auto;
		}
	}

	@media (max-width: 768px) {
		.servizio-card {
			padding: 36px 28px 32px;
		}

		.target-card {
			padding: 32px 28px;
		}
	}

	/* APPROCCIO (ticket 06): banda dedicata, tipografia ariosa */
	#approccio .approccio-content,
	#processo .processo-timeline {
		max-width: var(--container);
		margin-left: auto;
		margin-right: auto;
	}

	.approccio-intro {
		max-width: 820px;
		margin: 0 auto;
		text-align: center;
		font-size: var(--fs-lead);
		line-height: 1.4;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: var(--text);
	}

	.approccio-intro strong {
		font-weight: 700;
		color: var(--accent-link);
	}

	#approccio .approccio-pillars {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 48px;
		margin-top: 80px;
	}

	.pillar {
		padding-top: 24px;
		border-top: 1px solid var(--hairline);
	}

	.pillar h3 {
		font-weight: 600;
		font-size: 1.5rem;
		letter-spacing: var(--tracking-title);
		color: var(--text);
		margin-bottom: 12px;
	}

	.pillar p {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-2);
	}

	@media (max-width: 1024px) {
		#approccio .approccio-pillars {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		#approccio .approccio-pillars {
			grid-template-columns: 1fr;
			gap: 32px;
			margin-top: 56px;
		}
	}

	/* COME LAVORO (ticket 06): step con numero grande */
	#processo .processo-timeline {
		max-width: 860px;
		padding: 0;
	}

	.timeline-item {
		display: grid;
		grid-template-columns: clamp(72px, 12vw, 120px) 1fr;
		gap: 24px 32px;
		align-items: start;
		padding: 40px 0;
		border-top: 1px solid var(--hairline);
	}

	.timeline-item:last-child {
		border-bottom: 1px solid var(--hairline);
	}

	.timeline-number {
		font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem);
		font-weight: 700;
		line-height: 0.9;
		letter-spacing: var(--tracking-display);
		color: var(--accent-link);
		font-variant-numeric: tabular-nums;
	}

	.timeline-content h3 {
		font-weight: 600;
		font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
		line-height: 1.2;
		letter-spacing: var(--tracking-title);
		color: var(--text);
		margin-bottom: 12px;
	}

	.timeline-content p {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-2);
	}

	@media (max-width: 600px) {
		.timeline-item {
			grid-template-columns: 1fr;
			gap: 12px;
			padding: 28px 0;
		}
	}

	/* FAQ (ticket 07): <details>/<summary> nativi, indipendenti */
	.faq-container {
		max-width: 760px;
		margin: 0 auto;
		display: grid;
		gap: 12px;
	}

	.faq-item {
		background: var(--bg-alt);
		border-radius: 20px;
		overflow: clip;
		interpolate-size: allow-keywords;
	}

	.faq-question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		padding: 22px 28px;
		cursor: pointer;
		list-style: none;
		font-weight: 600;
		font-size: 1.1875rem;
		line-height: 1.3;
		letter-spacing: -0.012em;
		color: var(--text);
	}

	.faq-question::-webkit-details-marker {
		display: none;
	}

	.faq-question:focus-visible {
		outline: 2px solid var(--accent-link);
		outline-offset: -2px;
		border-radius: 20px;
	}

	/* Indicatore "+": due barre disegnate in CSS, ruotano a 45deg */
	.faq-icon {
		position: relative;
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		color: var(--text-2);
		transition: transform 0.3s var(--ease-out);
	}

	.faq-icon::before,
	.faq-icon::after {
		content: '';
		position: absolute;
		background: currentColor;
		border-radius: 1px;
	}

	.faq-icon::before {
		top: 7px;
		left: 0;
		width: 16px;
		height: 2px;
	}

	.faq-icon::after {
		top: 0;
		left: 7px;
		width: 2px;
		height: 16px;
	}

	.faq-item[open] .faq-icon {
		transform: rotate(45deg);
	}

	.faq-answer p {
		padding: 0 28px 24px;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--text-2);
	}

	/* Animazione dell'altezza: miglioramento progressivo, dove il
	   browser supporta ::details-content (altrimenti apre di scatto) */
	@supports selector(::details-content) {
		.faq-item::details-content {
			block-size: 0;
			overflow: clip;
			transition:
				block-size 0.35s var(--ease-out),
				content-visibility 0.35s allow-discrete;
		}

		.faq-item[open]::details-content {
			block-size: auto;
		}
	}

	@media (hover: hover) {
		.faq-question:hover .faq-icon {
			color: var(--text);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.faq-item::details-content,
		.faq-icon {
			transition: none;
		}
	}

	@media (prefers-contrast: more) {
		.chip {
			color: var(--text);
			border: 1px solid var(--text);
		}

		.faq-item,
		.servizio-card,
		.target-card {
			border: 1px solid var(--hairline);
		}

		.faq-answer p,
		.faq-icon {
			color: var(--text);
		}
	}

	/* CONTATTI + FOOTER */
	.contatti {
		padding: clamp(80px, 12vw, 140px) var(--gutter) clamp(32px, 5vw, 56px);
		text-align: center;
	}

	.contatti-inner {
		max-width: var(--container);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.contatti-title {
		font-size: var(--fs-hero);
		font-weight: 700;
		line-height: var(--lh-display);
		letter-spacing: var(--tracking-display);
		color: var(--on-dark);
		margin-bottom: 20px;
	}

	.contatti-lead {
		font-size: var(--fs-lead);
		line-height: 1.3;
		color: var(--on-dark-2);
		max-width: 640px;
		margin: 0 auto;
	}

	.final-cta {
		margin-top: 40px;
		align-self: center;
	}

	.contatti .btn-primary {
		padding: 16px 36px;
		font-size: 1.1875rem;
	}

	.contatti-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
		margin-top: clamp(56px, 8vw, 88px);
		padding-top: 32px;
		border-top: 1px solid var(--hairline-on-dark);
		text-align: center;
	}

	.contatto-box h3 {
		font-size: var(--fs-small);
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--on-dark-2);
		margin-bottom: 8px;
	}

	.contatto-box p {
		font-size: var(--fs-small);
		line-height: 1.5;
		color: var(--on-dark);
		overflow-wrap: anywhere;
	}

	.contatto-box a {
		/* Area di tocco >= 44px senza cambiare l'impaginazione */
		padding-block: 14px;
		color: var(--on-dark);
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-color: rgba(245, 245, 247, 0.4);
	}

	footer {
		background: var(--bg-dark);
		color: var(--on-dark-2);
		padding: 0 var(--gutter) 32px;
		font-size: 0.75rem;
		line-height: 1.5;
	}

	.footer-content {
		max-width: var(--container);
		margin: 0 auto;
		padding: 48px 0 32px;
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		gap: 40px;
	}

	.footer-about h3,
	.footer-links h4 {
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--on-dark);
		margin-bottom: 12px;
	}

	.footer-about p {
		max-width: 340px;
		margin-bottom: 16px;
	}

	.social-links {
		display: flex;
		gap: 8px;
	}

	.social-link {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--on-dark);
		text-decoration: none;
		border: 1px solid var(--border-on-dark);
	}

	.social-icon {
		width: 18px;
		height: 18px;
	}

	.footer-links ul {
		list-style: none;
	}

	.footer-links a {
		/* Area di tocco >= 44px */
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.footer-links a,
	.footer-credit a {
		color: var(--on-dark-2);
		text-decoration: none;
	}

	.footer-credit a {
		/* Link in linea: area di tocco estesa senza cambiare la riga */
		padding-block: 14px;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.footer-bottom .footer-credit {
		margin-top: 15px;
		font-size: 0.8125rem;
	}

	.footer-bottom {
		max-width: var(--container);
		margin: 0 auto;
		padding-top: 24px;
		border-top: 1px solid var(--hairline-on-dark);
		text-align: center;
	}

	@media (hover: hover) {
		.contatto-box a:hover,
		.footer-links a:hover,
		.footer-credit a:hover {
			color: var(--on-dark-strong);
		}

		.social-link:hover {
			background: rgba(255, 255, 255, 0.12);
		}
	}

	.social-link:focus-visible,
	.footer-links a:focus-visible,
	.footer-credit a:focus-visible,
	.contatto-box a:focus-visible {
		outline: 2px solid var(--on-dark);
		outline-offset: 3px;
	}

	@media (max-width: 968px) {
		.contatti-grid {
			grid-template-columns: 1fr;
			gap: 24px;
		}

		.footer-content {
			grid-template-columns: 1fr;
		}
	}

	@media (prefers-contrast: more) {
		.contatti .btn-primary {
			border: 1px solid var(--on-dark-strong);
		}
	}

	.scroll-top-icon {
		width: 22px;
		height: 22px;
	}

	/* SCROLL TO TOP BUTTON */
	.scroll-top {
		position: fixed;
		bottom: 30px;
		right: 30px;
		width: 55px;
		height: 55px;
		background: var(--accent);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--on-accent);
		border: none;
		padding: 0;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.3s var(--ease-out),
			visibility 0.3s,
			transform 0.2s var(--ease-out);
		z-index: 999;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	}

	.scroll-top.visible {
		opacity: 1;
		visibility: visible;
	}

	/* INTERAZIONI
	   Hover solo con puntatore reale: su touch resterebbe
	   "incollato" dopo il tap */
	@media (hover: hover) {
		.nav-links a:hover {
			opacity: 1;
		}

		.cta-nav:hover,
		.btn-primary:hover {
			background: var(--accent-hover);
		}

		.btn-secondary:hover::after {
			transform: translateX(3px);
		}

		.scroll-top:hover {
			background: var(--accent-hover);
			transform: translateY(-2px);
		}
	}

	/* Feedback immediato alla pressione, anche su touch */
	.cta-nav:active,
	.btn-primary:active,
	.btn-secondary:active,
	.scroll-top:active,
	.mobile-menu-btn:active {
		transform: scale(0.97);
		transition-duration: 0.1s;
	}

	/* RESPONSIVE */
	@media (max-width: 1024px) {
		.servizi-grid {
			grid-template-columns: 1fr;
		}

		.target-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.nav-links {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			height: 100dvh;
			background: var(--menu-bg);
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: calc(var(--nav-h) + 32px) var(--gutter) 40px;
			gap: 0;
			overflow-y: auto;
			opacity: 0;
			visibility: hidden;
			transform: translateY(-12px);
			/* In chiusura visibility scatta a fine animazione */
			transition:
				opacity 0.3s var(--ease-out),
				transform 0.3s var(--ease-out),
				visibility 0s linear 0.3s;
			z-index: 998;
		}

		/* In apertura visibility scatta subito, così il focus
		   può andare sul primo link */
		.nav-links.active {
			opacity: 1;
			visibility: visible;
			transform: none;
			transition:
				opacity 0.3s var(--ease-out),
				transform 0.3s var(--ease-out),
				visibility 0s;
		}

		.nav-links li {
			width: 100%;
			border-bottom: 1px solid var(--hairline);
		}

		.nav-links li:last-child {
			border-bottom: none;
		}

		.nav-links a {
			display: block;
			padding: 14px 0;
			font-size: 1.75rem;
			font-weight: 600;
			letter-spacing: -0.02em;
			opacity: 1;
		}

		.nav-links a.cta-nav {
			display: inline-block;
			margin-top: 24px;
			padding: 14px 28px;
			font-size: 1.0625rem;
			font-weight: 500;
			letter-spacing: -0.01em;
		}

		.mobile-menu-btn {
			display: block;
			z-index: 999;
			position: relative;
		}

		.band {
			padding-top: 64px;
			padding-bottom: 64px;
		}

		.hero {
			padding-top: 72px;
			padding-bottom: 64px;
		}

		.hero-chips {
			margin-top: 40px;
		}

		.target-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ANIMAZIONI */
	/* COMPARSA ALLO SCROLL (ticket 03)
	   Marcatore comune: attributo data-reveal su qualsiasi blocco.
	   Attivo solo se JS aggiunge .reveal-ready a <html>. */
	/* Sulle bande a tutta larghezza si animano i figli: lo sfondo
	   resta fermo e non si vede il bordo della banda scivolare */
	.reveal-ready [data-reveal]:not(.band):not(.is-revealed),
	.reveal-ready .band[data-reveal]:not(.is-revealed) > * {
		opacity: 0;
		transform: translateY(24px);
	}

	.reveal-ready [data-reveal]:not(.band).is-revealed,
	.reveal-ready .band[data-reveal].is-revealed > * {
		transition:
			opacity 0.6s var(--ease-out),
			transform 0.6s var(--ease-out);
	}

	/* REDUCED MOTION: nessuna animazione ne' transizione (menu, hamburger,
	   filo dell'header, :active, FAQ, comparsa). !important qui e' voluto:
	   deve battere ogni regola di transizione, comprese quelle piu' specifiche */
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after,
		.faq-item::details-content {
			animation: none !important;
			transition: none !important;
		}

		.cta-nav:active,
		.btn-primary:active,
		.btn-secondary:active,
		.scroll-top:active,
		.mobile-menu-btn:active,
		.scroll-top:hover,
		.btn-secondary:hover::after {
			transform: none;
		}
	}

	/* TRASPARENZA RIDOTTA: materiale pieno */
	@media (prefers-reduced-transparency: reduce) {
		header::before {
			background: var(--bg);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}

	/* CONTRASTO ALTO */
	@media (prefers-contrast: more) {
		header::before {
			background: var(--bg);
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}
	}