/* Sito di Chiarini Automazioni — stile condiviso da tutte le pagine.
   Ripreso dal sito di Ohm Automation (ohme-multipage-site, css/site.css): Bricolage Grotesque (titoli),
   IBM Plex Sans (testo), IBM Plex Mono (etichette), superfici piatte, angoli ampi.
   Colore del marchio: l'arancione del logo di Chiarini Automazioni (#EF6C00). */

/* MARK: Font (ospitati in locale, licenza OFL) */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/IBMPlexSans-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-500-latin.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* MARK: Token */
:root {
	--bg: #f6f4fa;
	--surface: #ffffff;
	--surface-2: #efecf6;
	--fg: #14172a;
	--muted: #565c73;
	--line: #ddd9e8;

	--night: #14172a;
	--night-surface: #1c2038;
	--night-line: #2f3452;
	--on-night: #eef0f7;
	--on-night-muted: #a9adc2;

	/* l'arancione del logo; sopra si scrive in blu notte (5,8:1), il bianco arriva solo a 3,1:1 */
	--chiarini: #ef6c00;
	/* il blu del logo di Ubiquiti, per le pagine UniFi e Protect */
	--unifi: #0559c9;
	/* tinte per il testo (*-ink: leggibili sul fondo chiaro, più chiare nel tema scuro) */
	--chiarini-ink: #ad4600;
	--unifi-ink: #0559c9;
	--red-ink: #d42e12;
	--violet-ink: #5516b0;
	--blue-ink: #1a4fe0;
	--pink-ink: #c2107a;
	--teal-ink: #007a66;
	--green-ink: #1d7a55;
	--amber-ink: #a86200;
	--cyan-ink: #0b7a9e;

	/* l'hero: sfondo, nebulose e linee delle orbite, chiari o scuri col tema */
	--hero-top: #f7f5fb;
	--hero-bottom: #ebe7f3;
	--neb-orange: rgba(239, 108, 0, 0.12);
	--neb-red: rgba(255, 61, 31, 0.07);
	--neb-blue: rgba(5, 89, 201, 0.1);
	--neb-green: rgba(29, 122, 85, 0.08);
	--neb-unifi: rgba(5, 89, 201, 0.14);
	--neb-solar: rgba(29, 122, 85, 0.12);
	--orbit-line: rgba(20, 23, 42, 0.12);
	--orbit-dash: rgba(20, 23, 42, 0.18);
	--orbit-far: rgba(20, 23, 42, 0.07);
	--orbit-farther: rgba(20, 23, 42, 0.045);
	--mark-ring: rgba(20, 23, 42, 0.08);
	--mark-shadow: 0 30px 60px -24px rgba(20, 23, 42, 0.35);
	--mark-halo: rgba(239, 108, 0, 0.16);
	--mark-glow: transparent;
	--planet-ring: rgba(20, 23, 42, 0.1);
	--planet-shadow: 0 14px 24px -12px rgba(20, 23, 42, 0.35);

	--accent: var(--fg);
	--accent-ink: var(--fg);
	--on-accent: var(--bg);

	--display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
	--body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius: 20px;
	--radius-sm: 12px;
	--header-h: 64px;
	--shadow: 0 1px 2px rgba(20, 23, 42, 0.04), 0 18px 40px -18px rgba(20, 23, 42, 0.18);
	/* Contorno dei loghi in header e footer sui fondi scuri */
	--brand-ring: transparent;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) {
		--bg: #0e1120;
		--surface: #171b2e;
		--surface-2: #1e2338;
		--fg: #eef0f7;
		--muted: #a3a8be;
		--line: #2a2f47;
		--night: #080a14;
		--night-surface: #141829;
		--night-line: #262b45;
		--chiarini-ink: #ff9a52;
		--unifi-ink: #5c9cff;
		--red-ink: #ff8066;
		--violet-ink: #b08cff;
		--blue-ink: #7fa2ff;
		--pink-ink: #ff6ec4;
		--teal-ink: #3fe0c3;
		--green-ink: #5fd1a0;
		--amber-ink: #ffc04d;
		--cyan-ink: #5ccbf0;
		--hero-top: #0a0c18;
		--hero-bottom: #11142a;
		--neb-orange: rgba(239, 108, 0, 0.26);
		--neb-red: rgba(255, 61, 31, 0.14);
		--neb-blue: rgba(5, 89, 201, 0.24);
		--neb-green: rgba(29, 122, 85, 0.14);
		--neb-unifi: rgba(5, 89, 201, 0.36);
		--neb-solar: rgba(29, 122, 85, 0.3);
		--orbit-line: rgba(255, 255, 255, 0.1);
		--orbit-dash: rgba(255, 255, 255, 0.14);
		--orbit-far: rgba(255, 255, 255, 0.07);
		--orbit-farther: rgba(255, 255, 255, 0.045);
		--mark-ring: rgba(255, 255, 255, 0.16);
		--mark-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
		--mark-halo: rgba(170, 186, 255, 0.22);
		--mark-glow: #14172a;
		--planet-ring: rgba(255, 255, 255, 0.12);
		--planet-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.7);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
		--brand-ring: rgba(255, 255, 255, 0.18);
		color-scheme: dark;
	}
}
:root[data-color-scheme="dark"] {
	--bg: #0e1120;
	--surface: #171b2e;
	--surface-2: #1e2338;
	--fg: #eef0f7;
	--muted: #a3a8be;
	--line: #2a2f47;
	--night: #080a14;
	--night-surface: #141829;
	--night-line: #262b45;
	--chiarini-ink: #ff9a52;
	--unifi-ink: #5c9cff;
	--red-ink: #ff8066;
	--violet-ink: #b08cff;
	--blue-ink: #7fa2ff;
	--pink-ink: #ff6ec4;
	--teal-ink: #3fe0c3;
	--green-ink: #5fd1a0;
	--amber-ink: #ffc04d;
	--cyan-ink: #5ccbf0;
	--hero-top: #0a0c18;
	--hero-bottom: #11142a;
	--neb-orange: rgba(239, 108, 0, 0.26);
	--neb-red: rgba(255, 61, 31, 0.14);
	--neb-blue: rgba(5, 89, 201, 0.24);
	--neb-green: rgba(29, 122, 85, 0.14);
	--neb-unifi: rgba(5, 89, 201, 0.36);
	--neb-solar: rgba(29, 122, 85, 0.3);
	--orbit-line: rgba(255, 255, 255, 0.1);
	--orbit-dash: rgba(255, 255, 255, 0.14);
	--orbit-far: rgba(255, 255, 255, 0.07);
	--orbit-farther: rgba(255, 255, 255, 0.045);
	--mark-ring: rgba(255, 255, 255, 0.16);
	--mark-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
	--mark-halo: rgba(170, 186, 255, 0.22);
	--mark-glow: #14172a;
	--planet-ring: rgba(255, 255, 255, 0.12);
	--planet-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.7);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
	--brand-ring: rgba(255, 255, 255, 0.18);
	color-scheme: dark;
}

/* Colore della pagina (body[data-app]) o di un singolo blocco (.is-*).
   Ripetuto sulle sezioni scure, che ridefiniscono le tinte *-ink per il fondo scuro.
   chiarini: le pagine dell'azienda (arancione); solar: Fotovoltaico e Ambiente (verde); unifi: UniFi e Protect (blu);
   Sonos resta neutro, come il suo marchio. */
[data-app="chiarini"],
[data-app="chiarini"] .dark,
.is-orange {
	--accent: var(--chiarini);
	--accent-ink: var(--chiarini-ink);
	--on-accent: var(--night);
}
[data-app="solar"],
[data-app="solar"] .dark,
.is-green {
	--accent: #1d7a55;
	--accent-ink: var(--green-ink);
	--on-accent: #fff;
}
[data-app="unifi"],
[data-app="unifi"] .dark,
.is-unifi {
	--accent: var(--unifi);
	--accent-ink: var(--unifi-ink);
	--on-accent: #fff;
}
/* Altre tinte per i blocchi (es. i servizi): ognuno col suo colore */
.is-red {
	--accent: #ff3d1f;
	--accent-ink: var(--red-ink);
	--on-accent: #fff;
}
.is-violet {
	--accent: #5516b0;
	--accent-ink: var(--violet-ink);
	--on-accent: #fff;
}
.is-blue {
	--accent: #1a5cff;
	--accent-ink: var(--blue-ink);
	--on-accent: #fff;
}
.is-pink {
	--accent: #e8148f;
	--accent-ink: var(--pink-ink);
	--on-accent: #fff;
}
.is-teal {
	--accent: #00a67f;
	--accent-ink: var(--teal-ink);
	--on-accent: var(--night);
}
.is-amber {
	--accent: #ffa000;
	--accent-ink: var(--amber-ink);
	--on-accent: var(--night);
}
.is-cyan {
	--accent: #0b7a9e;
	--accent-ink: var(--cyan-ink);
	--on-accent: #fff;
}
.is-neutral {
	--accent: var(--fg);
	--accent-ink: var(--fg);
	--on-accent: var(--bg);
}

/* MARK: Base */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}
html.i18n-wait body {
	visibility: hidden;
}
img,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
p {
	margin: 0 0 1em;
}
h1,
.h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.4em;
	text-wrap: balance;
}
/* .h1: il titolo grande dell'hero quando l'H1 della pagina è l'occhiello (h1.eyebrow, con il settore e Verona) */
h1,
.h1 {
	font-size: clamp(40px, 6.6vw, 80px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}
h2 {
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -0.01em;
}
h3 {
	font-size: 22px;
	font-weight: 600;
}
h4 {
	font-size: 18px;
	font-weight: 600;
}
code {
	font-family: var(--mono);
	font-size: 0.9em;
}
:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
	border-radius: 6px;
}
[hidden] {
	display: none !important;
}
.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	background: var(--fg);
	color: var(--bg);
	padding: 10px 14px;
	border-radius: 10px;
}
.skip-link:focus {
	top: 12px;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.i {
	width: 24px;
	height: 24px;
	flex: none;
}
.i-sm {
	width: 18px;
	height: 18px;
	flex: none;
}

/* MARK: Layout */
.w {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 max(20px, env(safe-area-inset-left));
}
@media (max-width: 520px) {
	.w {
		padding: 0 16px;
	}
}
section {
	padding: clamp(64px, 9vw, 112px) 0;
}
section + section:not(.dark):not(.tint) {
	border-top: 1px solid var(--line);
}
.tint {
	background: var(--surface-2);
}
.dark {
	background: var(--night);
	color: var(--on-night);
	--fg: var(--on-night);
	--muted: var(--on-night-muted);
	--line: var(--night-line);
	--surface: var(--night-surface);
	--surface-2: var(--night-surface);
	--accent: var(--on-night);
	--accent-ink: var(--on-night);
	--on-accent: var(--night);
	--chiarini-ink: #ff9a52;
	--unifi-ink: #5c9cff;
	--red-ink: #ff8066;
	--violet-ink: #b08cff;
	--blue-ink: #7fa2ff;
	--pink-ink: #ff6ec4;
	--teal-ink: #3fe0c3;
	--green-ink: #5fd1a0;
	--amber-ink: #ffc04d;
	--cyan-ink: #5ccbf0;
}
.dark :focus-visible {
	outline-color: var(--on-night);
}
.section-head {
	max-width: 760px;
	margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.eyebrow {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}
.eyebrow.accent {
	color: var(--accent-ink);
}
.lead {
	font-size: clamp(18px, 2.1vw, 21px);
	color: var(--muted);
	max-width: 60ch;
}
.muted {
	color: var(--muted);
}
.grid {
	display: grid;
	gap: 20px;
}
.grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) {
	.grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 72px);
	align-items: center;
}
@media (max-width: 880px) {
	.split {
		grid-template-columns: 1fr;
	}
}

/* MARK: Pulsanti */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font: 600 16px/1.2 var(--body);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active {
	transform: translateY(1px);
}
.btn-primary {
	background: var(--accent);
	color: var(--on-accent);
}
.btn-primary:hover {
	background: color-mix(in srgb, var(--accent) 88%, #000);
}
/* WhatsApp: il verde del marchio; sopra si scrive in blu notte (9,5:1), il bianco arriva solo a 2:1 */
.btn-whatsapp {
	background: #25d366;
	color: #14172a;
}
.btn-whatsapp:hover {
	background: #1ebe5a;
}
.btn-ghost {
	background: transparent;
	color: var(--fg);
	border-color: var(--line);
}
.btn-ghost:hover {
	border-color: var(--fg);
}
.btn-sm {
	min-height: 38px;
	padding: 6px 14px;
	font-size: 15px;
	border-radius: 10px;
}
.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--accent-ink);
	text-decoration: none;
}
.text-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.text-link .i-sm {
	transition: transform 0.15s ease;
}
.text-link:hover .i-sm {
	transform: translateX(3px);
}

/* MARK: Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	/* tinta piena: Safari su iOS 26 colora l'area sotto la barra degli indirizzi solo se l'header è opaco,
	   altrimenti lì si vede scorrere la pagina */
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.site-header .w {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 24px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 21px;
	text-decoration: none;
	flex: none;
}
.brand img {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	box-shadow: 0 0 0 1px var(--brand-ring);
}
.main-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: auto;
}
.main-nav a {
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
}
.main-nav a:hover {
	color: var(--fg);
	background: var(--surface-2);
}
.main-nav a[aria-current="page"] {
	color: var(--fg);
	background: var(--surface-2);
}
.main-nav .only-menu {
	display: none;
}
.site-header.open .main-nav .only-menu {
	display: block;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.icon-btn {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--fg);
	font: 500 13px var(--mono);
	letter-spacing: 0.04em;
	cursor: pointer;
}
.icon-btn:hover {
	border-color: var(--fg);
}
.icon-btn .i {
	width: 20px;
	height: 20px;
}
.theme-toggle .moon {
	display: none;
}
:root[data-color-scheme="dark"] .theme-toggle .sun {
	display: none;
}
:root[data-color-scheme="dark"] .theme-toggle .moon {
	display: block;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .theme-toggle .sun {
		display: none;
	}
	:root:not([data-color-scheme="light"]) .theme-toggle .moon {
		display: block;
	}
}
/* Selettore della lingua: pulsante con il codice, menu con le lingue disponibili */
.lang-menu {
	position: relative;
}
.lang-menu ul {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
}
.lang-menu ul[hidden] {
	display: none;
}
.lang-menu li button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fg);
	font: 500 15px var(--body);
	text-align: left;
	cursor: pointer;
}
.lang-menu li button:hover {
	background: var(--surface-2);
}
.lang-menu li button span {
	font: 500 12px var(--mono);
	color: var(--muted);
}
.lang-menu li button[aria-checked="true"] {
	background: var(--surface-2);
	font-weight: 600;
}
.menu-btn {
	display: none;
}
.menu-btn .x {
	display: none;
}
.site-header.open .menu-btn .x {
	display: block;
}
.site-header.open .menu-btn .bars {
	display: none;
}
@media (max-width: 1080px) {
	.main-nav {
		display: none;
	}
	.menu-btn {
		display: inline-grid;
	}
	.header-actions {
		margin-left: auto;
	}
	.site-header.open .main-nav {
		display: flex;
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		height: calc(100dvh - var(--header-h));
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 16px 16px 32px;
		background: var(--bg);
		overflow-y: auto;
		margin: 0;
	}
	.site-header.open .main-nav a {
		font-family: var(--display);
		font-size: 24px;
		font-weight: 600;
		color: var(--fg);
		padding: 12px 14px;
	}
}
@media (max-width: 520px) {
	.header-actions .btn {
		display: none;
	}
}
body.menu-open {
	overflow: hidden;
}

/* MARK: Hero */
.hero {
	padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 8vw, 96px);
	border-top: 0;
}
.hero h1:not(.eyebrow),
.hero .h1 {
	max-width: 15ch;
}
h1.eyebrow {
	line-height: 1.5;
}
.hero .lead {
	margin-bottom: 0;
}
/* Chi siamo: il logo di Chiarini Automazioni sopra il titolo (l'hero è sempre scuro: scritta bianca) */
.hero-company {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font: 600 22px/1.2 var(--display);
}
.hero-company img {
	width: 48px;
	height: 48px;
	border-radius: 11px;
}

/* MARK: Hero nello spazio (tutte le pagine tranne contatti e note legali)
   Chiaro o scuro col tema della pagina. Le stelle e la scena della pagina sono nel canvas (js/hero.js),
   le nebulose sono sfumature nei colori del sito: --n1 è quella dietro al marchio, nel colore della pagina.
   Al centro il marchio, fermo: Chiarini Automazioni o il partner della pagina. */
.hero-space {
	--n1: var(--neb-orange);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(calc(100svh - var(--header-h)), 880px);
	background:
		radial-gradient(42% 52% at 76% 48%, var(--n1), transparent 70%),
		radial-gradient(30% 36% at 94% 88%, var(--neb-red), transparent 70%),
		radial-gradient(34% 40% at 58% 6%, var(--neb-blue), transparent 70%),
		radial-gradient(28% 34% at 6% 96%, var(--neb-green), transparent 70%),
		linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
}
[data-app="unifi"] .hero-space {
	--n1: var(--neb-unifi);
}
[data-app="solar"] .hero-space {
	--n1: var(--neb-solar);
}
/* Fotovoltaico e Ambiente: il cielo del canvas riempie l'hero e passa dal giorno alla notte; i testi lo seguono, con
   tutti e due i temi: chiari sul cielo di notte, scuri su quello di giorno (is-bright, da js/hero.js) */
.hero-space.is-sky .split > div:first-child {
	--fg: #eef0f7;
	--muted: #c3c8da;
	--line: rgba(238, 240, 247, 0.32);
	--accent-ink: #5fd1a0;
	color: var(--fg);
}
.hero-space.is-sky.is-bright .split > div:first-child {
	--fg: #14172a;
	--muted: #2c3249;
	--line: rgba(20, 23, 42, 0.28);
	--accent-ink: #145c3f;
}
.hero-space.is-sky :is(h1, .h1, .eyebrow, .lead) {
	transition: color 0.8s ease;
}
.hero-space.is-sky .btn-ghost {
	transition: transform 0.15s ease, color 0.8s ease, border-color 0.8s ease;
}
.hero-space .stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.hero-space .split {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.cosmos {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1;
	margin: 0 auto 40px;
}
/* due orbite molto più grandi, appena accennate: il sistema continua oltre il riquadro */
.cosmos::before,
.cosmos::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	border: 1px solid var(--orbit-far);
	pointer-events: none;
}
.cosmos::before {
	inset: -40%;
}
.cosmos::after {
	inset: -100%;
	border-color: var(--orbit-farther);
}
.orbit {
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--orbit-line);
}
/* --size: lato dei pianeti in % dell'orbita; --t: un giro */
.orbit.is-inner {
	inset: 23%;
	--size: 20%;
	--t: 56s;
}
.orbit.is-outer {
	inset: 7%;
	--size: 14.5%;
	--t: 90s;
	border-style: dashed;
	border-color: var(--orbit-dash);
}
/* braccio = l'orbita ruotata dell'angolo del pianeta; il pianeta sta in cima e si raddrizza */
.orbit .arm {
	position: absolute;
	inset: 0;
	transform: rotate(var(--a));
}
.orbit .planet {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--size);
	aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)) scale(calc(1 + 0.3 * var(--p, 0)));
}
.orbit .planet > * {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 22.5%;
	box-shadow: 0 0 0 1px var(--planet-ring), var(--planet-shadow);
}
/* il pianeta in cui si sta trasformando il logo al centro si illumina */
.orbit .planet::before {
	content: "";
	position: absolute;
	inset: -60%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--c, #fff) 70%, transparent), transparent 62%);
	opacity: var(--p, 0);
}
/* i loghi dei partner: tondi, sulla targhetta bianca o del colore del marchio (--plate). Il bordo arrotondato è
   sulla targhetta e non sull'immagine: su un'immagine taglierebbe anche gli angoli del logo */
.orbit .planet.is-logo > .plate {
	padding: 22%;
	border-radius: 50%;
	background: var(--plate, #fff);
}
.orbit .planet .plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* i loghi orizzontali (solo scritta) stanno in una pillola più larga, solo sull'orbita esterna:
   larga 1,5 volte un pianeta, a destra e a sinistra resta più lontana dal centro dei pianeti dell'orbita interna,
   così le due orbite (che girano in senso opposto) non si coprono mai */
.orbit.is-outer .planet.is-wide {
	width: calc(var(--size) * 1.5);
	aspect-ratio: 2.3;
}
.orbit .planet.is-logo.is-wide > .plate {
	padding: 10% 14%;
	border-radius: 999px;
}
.orbit.is-inner .planet {
	transition: transform 0.5s ease;
}
.orbit.is-inner .planet::before {
	transition: opacity 0.5s ease;
}
/* pagine dei prodotti: solo il marchio, la scena è nel canvas */
.stage {
	position: relative;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 1;
	margin: 0 auto 40px;
}
/* il marchio al centro (nome diverso da .sun, che è l'icona del pulsante del tema) */
.hero-mark {
	position: absolute;
	inset: 34%;
	border-radius: 22.46%;
	box-shadow: 0 0 0 1px var(--mark-ring), var(--mark-shadow);
}
.stage .hero-mark {
	inset: 17%;
}
/* il logo di Chiarini Automazioni ha gli angoli più tondi di quelli di OHMe (254 su 1024): stesso raggio, se no il
   bordo del riquadro si vede sotto gli angoli */
.hero-mark.is-chiarini {
	border-radius: 24.8%;
}
/* senza marchio (Ambiente): resta solo come misura per la scena */
.hero-mark.is-bare {
	visibility: hidden;
}
/* Home: la casa in sezione con i nostri lavori (js/hero.js, scena works): il riquadro è più largo che alto */
.stage.is-works {
	max-width: 640px;
	aspect-ratio: 1.3;
}
/* Le pagine dei settori (scene electrical, intercom, gates, automation): un riquadro più largo che alto */
.stage.is-wide {
	max-width: 600px;
	aspect-ratio: 1.25;
}
/* Chi siamo: il doodle di Chiarini Automazioni (img/doodle.svg). js/hero.js lo mette nella pagina come SVG (is-live)
   e accende un'attività alla volta (is-on); i tratti hanno il colore del testo (scuri o chiari col tema).
   Senza script resta l'immagine, tutta colorata, con i tratti scuri: col tema scuro si invertono */
.stage.is-doodle {
	max-width: 520px;
	aspect-ratio: auto;
}
.doodle img,
.doodle svg {
	display: block;
	width: 100%;
	height: auto;
}
.doodle svg .lines > g {
	fill: var(--fg);
}
@media (prefers-color-scheme: dark) {
	.doodle img {
		filter: invert(1) hue-rotate(180deg);
	}
}
.doodle.is-live .lines > g {
	opacity: 0.3;
	transition: opacity 0.6s ease;
}
.doodle.is-live .fills > g {
	opacity: 0;
	transition: opacity 0.6s ease;
}
.doodle.is-live [data-act].is-on {
	opacity: 1;
}
/* il nome dell'attività accesa, sotto il doodle */
.doodle-name {
	width: fit-content;
	min-height: 1.5em;
	margin: 14px auto 0;
	padding: 4px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 85%, transparent);
	border: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg);
	visibility: hidden;
}
.doodle.is-live + .doodle-name {
	visibility: visible;
}
/* UniFi: la console (il marchio) è più piccola, intorno ci sono lo switch, gli access point, la telecamera e la porta */
.hero-space[data-scene="unifi"] .stage.is-unifi {
	max-width: 460px;
}
.stage.is-unifi .hero-mark {
	inset: 32%;
}
/* Domotica: il logo di OHMe al centro e i dispositivi attorno (js/hero.js, scena ohme); --c è il colore del
   dispositivo, lo mette lo script; is-on quando OHMe lo comanda */
.stage.is-ohme {
	max-width: 460px;
}
.stage.is-ohme .hero-mark {
	inset: 33%;
}
.ohme-node {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	color: var(--muted);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ohme-node.is-on {
	color: var(--c);
	border-color: color-mix(in srgb, var(--c) 55%, transparent);
	background: color-mix(in srgb, var(--c) 14%, var(--surface));
	transform: scale(1.08);
}
.hero-card {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 9px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	white-space: nowrap;
}
.hero-card .ico {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	color: var(--ic);
	background: color-mix(in srgb, var(--ic) 16%, transparent);
	transition: background-color 0.4s ease;
}
.hero-card small {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.3;
}
.hero-card b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.hero-card .on,
.hero-space.is-lit .hero-card .off {
	display: none;
}
.hero-space.is-lit .hero-card .on {
	display: inline;
}
.hero-space.is-lit .hero-card .ico,
.hero-card.is-on .ico {
	background: color-mix(in srgb, var(--ic) 34%, transparent);
}
/* Fotovoltaico e Ambiente: le schede dell'energia intorno alla casa (i valori li scrive js/hero.js) */
.hero-card.is-solar {
	--ic: #f5b638;
	top: -4%;
	left: -10%;
}
.hero-card.is-battery {
	--ic: #4ade80;
	top: 24%;
	right: -16%;
}
.hero-card.is-load {
	--ic: #7cb7ff;
	top: 34%;
	left: -16%;
}
/* Fotovoltaico e Ambiente: ogni scheda cambia da sola (is-on, da js/hero.js) */
.hero-card.is-on .off {
	display: none;
}
.hero-card.is-on .on {
	display: inline;
}
/* corona: una luce fissa e una nel colore del marchio (--glow; nella scena di Chi siamo si accende con la corrente) */
.hero-mark::before,
.hero-mark::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.hero-mark::before {
	inset: -70%;
	background: radial-gradient(circle, var(--mark-halo), transparent 60%);
}
.hero-mark::after {
	inset: -55%;
	background: radial-gradient(circle, color-mix(in srgb, var(--glow, var(--mark-glow)) 75%, transparent), transparent 62%);
}
.hero-mark > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* il marchio di un partner su una piastrina del suo colore (--plate) */
.hero-mark.is-plate {
	display: grid;
	place-items: center;
	background: var(--plate, #fff);
}
.hero-mark.is-plate > img {
	position: static;
	width: 64%;
	height: 64%;
	object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
	.orbit,
	.orbit .planet > * {
		animation: orbit var(--t) linear infinite;
	}
	/* l'orbita esterna gira al contrario; ogni immagine gira al contrario della sua orbita, così resta dritta */
	.orbit.is-outer,
	.orbit.is-inner .planet > * {
		animation-direction: reverse;
	}
	.hero-space.is-paused .orbit,
	.hero-space.is-paused .orbit .planet > * {
		animation-play-state: paused;
	}
}
@keyframes orbit {
	to {
		transform: rotate(360deg);
	}
}
@media (max-width: 880px) {
	.hero-space {
		min-height: 0;
	}
	.hero-space .split {
		grid-template-columns: 1fr;
	}
	.cosmos {
		max-width: 420px;
	}
	.stage {
		max-width: 320px;
	}
	.hero-card {
		padding: 7px 12px 7px 7px;
		gap: 8px;
	}
	.hero-card .ico {
		width: 28px;
		height: 28px;
	}
	.hero-card b {
		font-size: 14px;
	}
	/* Ambiente: le schede restano dentro allo schermo */
	.stage.is-energy {
		margin-top: 36px;
	}
	.hero-card.is-solar,
	.hero-card.is-load {
		left: 0;
	}
	.hero-card.is-battery {
		right: 0;
	}
}
/* MARK: Card */
.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(22px, 3vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.card h3 {
	margin: 0;
}
.card p {
	margin: 0;
	color: var(--muted);
	font-size: 16px;
}
.card .text-link {
	margin-top: auto;
	padding-top: 8px;
}
a.card {
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.2s ease;
}
a.card:hover {
	border-color: var(--accent-ink);
	transform: translateY(-2px);
}
.ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: color-mix(in srgb, var(--accent-ink) 12%, transparent);
	color: var(--accent-ink);
	margin-bottom: 6px;
}
.ico .i {
	width: 24px;
	height: 24px;
}
.app-card {
	gap: 12px;
}
.app-card .logo {
	width: 72px;
	height: 72px;
	margin-bottom: 4px;
}
/* Soluzioni senza logo (OHMq, OHMb): icona nello stesso ingombro del logo */
.app-card .ico {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	margin-bottom: 4px;
}
.app-card .ico .i {
	width: 34px;
	height: 34px;
}
.app-card .role {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-ink);
}
.app-card ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: 15px;
	color: var(--muted);
}
.app-card li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.app-card li .i-sm {
	width: 16px;
	height: 16px;
	margin-top: 4px;
	color: var(--accent-ink);
}

/* Card orizzontale: logo a sinistra, nome e testo a destra (es. OHMe e Ohm Automation in home) */
.card.is-row {
	flex-direction: row;
	align-items: center;
	gap: 18px;
}
.card.is-row > img {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 22.5%;
	box-shadow: 0 0 0 1px var(--brand-ring);
}
.card.is-row > span {
	display: grid;
	gap: 4px;
	color: var(--muted);
	font-size: 16px;
}
.card.is-row b {
	color: var(--fg);
	font: 600 20px/1.2 var(--display);
}

/* MARK: Elenchi */
.checks {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.checks li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.checks .i-sm {
	margin-top: 4px;
	color: var(--accent-ink);
}

/* Passi numerati */
/* MARK: Statistiche */
.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.stat {
	border-left: 3px solid var(--accent);
	padding: 4px 0 4px 18px;
}
.stat b {
	display: block;
	font-family: var(--display);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.1;
}
.stat span {
	color: var(--muted);
	font-size: 15px;
}
@media (max-width: 760px) {
	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* MARK: Timeline */
.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* le tappe vanno a capo su più righe; ogni tappa disegna il suo tratto di linea fino alla successiva */
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 40px 20px;
	position: relative;
}
.timeline li {
	position: relative;
	padding-top: 52px;
}
.timeline li::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 0;
	right: -20px;
	height: 2px;
	background: var(--line);
}
.timeline li::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 14px;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bg);
	border: 4px solid var(--accent);
}
.timeline .year {
	font-family: var(--mono);
	font-size: 14px;
	color: var(--accent-ink);
}
.timeline h3 {
	font-size: 19px;
	margin: 4px 0 6px;
}
.timeline p {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}
@media (max-width: 900px) {
	.timeline {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-left: 34px;
	}
	.timeline li::after {
		display: none;
	}
	.timeline::before {
		content: "";
		position: absolute;
		background: var(--line);
		top: 0;
		bottom: 0;
		left: 8px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.timeline li {
		padding-top: 0;
	}
	.timeline li::before {
		top: 2px;
		left: -34px;
	}
}

/* MARK: Partner (come la pagina Integrazioni del sito di Ohm Automation)
   Ogni marchio ha una targhetta bianca anche nel tema scuro, così i loghi restano nei loro colori ufficiali;
   i loghi chiari stanno sulla targhetta del colore del marchio (--plate, es. Torri Solare sul nero). */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.brand-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 10px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	transition: border-color 0.15s ease, transform 0.2s ease;
}
.brand-card:hover {
	border-color: color-mix(in srgb, var(--fg) 30%, transparent);
	transform: translateY(-2px);
}
.brand-logo {
	display: block;
	height: 104px;
	padding: 22px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: var(--plate, #fff);
	box-shadow: inset 0 0 0 1px rgba(20, 23, 42, 0.07);
}
.brand-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.brand-logo.wide {
	padding: 22px 30px;
}
.brand-logo.is-icon {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent-ink) 10%, var(--surface));
	color: var(--accent-ink);
	box-shadow: none;
}
.brand-logo.is-icon .i {
	width: 40px;
	height: 40px;
}
/* logo di una nostra soluzione (OHMb, OHMq) sulla targhetta del suo colore */
.brand-logo.is-icon img {
	width: 60px;
	height: 60px;
}
.brand-card b,
.brand-card small {
	padding: 0 8px;
}
.brand-card b {
	font-size: 16px;
	font-weight: 600;
}
.brand-card small {
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}
/* --min: larghezza minima di una scheda (es. 230px in home, per avere 4 + 4 loghi) */
.brand-grid.compact {
	grid-template-columns: repeat(auto-fill, minmax(var(--min, 150px), 1fr));
}
.brand-grid.compact .brand-card {
	padding-bottom: 12px;
	text-align: center;
}
.brand-grid.compact .brand-logo {
	height: 88px;
	padding: 18px;
}
.brand-grid.compact .brand-logo.wide {
	padding: 18px 22px;
}
@media (max-width: 520px) {
	.brand-grid,
	.brand-grid.compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.brand-logo,
	.brand-grid.compact .brand-logo {
		height: 80px;
		padding: 16px;
	}
	.brand-logo.wide,
	.brand-grid.compact .brand-logo.wide {
		padding: 16px 12px;
	}
	/* il logo di OHMb e OHMq deve stare nei 48 px del riquadro, altrimenti sborda in basso */
	.brand-logo.is-icon img {
		width: 48px;
		height: 48px;
	}
	.brand-card b,
	.brand-card small {
		padding: 0 4px;
	}
}
/* la scheda porta alla pagina del partner o al suo sito */
a.brand-card {
	color: inherit;
	text-decoration: none;
}
a.brand-card:hover {
	border-color: var(--accent-ink);
}
/* la qualifica (es. SolarEdge Specialist, Installatore certificato): su una riga nelle schede larghe,
   su due nelle più strette (per questo gli angoli non sono a pillola) */
.brand-card .tag {
	align-self: flex-start;
	margin: 0 8px 4px;
	padding: 3px 9px;
	border-radius: 8px;
	font: 600 12.5px/1.35 var(--body);
	color: var(--accent-ink);
	background: color-mix(in srgb, var(--accent-ink) 12%, transparent);
}
.brand-card .go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 10px 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent-ink);
}
.brand-card .go .i-sm {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}
a.brand-card:hover .go .i-sm {
	transform: translateX(3px);
}
.integration-group + .integration-group {
	margin-top: clamp(40px, 6vw, 64px);
}
.integration-group > h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

/* MARK: Video dei partner (in una cornice, senza audio) */
.media {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: #000;
	box-shadow: var(--shadow);
}
.media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* MARK: CTA finale */
.cta {
	text-align: center;
}
.cta h2 {
	max-width: 20ch;
	margin-left: auto;
	margin-right: auto;
}
.cta .lead {
	margin: 0 auto;
}
.cta .btn-row {
	justify-content: center;
}

/* MARK: Progetti (ambiente) */
.project {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	isolation: isolate;
}
.project img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.4s ease;
}
.project::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 12, 24, 0) 25%, rgba(10, 12, 24, 0.85) 100%);
}
.project:hover img {
	transform: scale(1.04);
}
.project .year {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	opacity: 0.85;
}
.project h3 {
	margin: 4px 0 6px;
}
.project p {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
}

/* Chi è 3Bee: logo su targhetta bianca, leggibile con entrambi i temi */
.partner-card {
	flex-direction: row;
	align-items: center;
	gap: clamp(20px, 4vw, 40px);
	margin-top: 32px;
}
.partner-card .brand-logo {
	flex: none;
	width: clamp(180px, 26vw, 260px);
	height: auto;
	aspect-ratio: 2.4;
	margin: 0;
}
.partner-card > div {
	display: grid;
	gap: 8px;
}
@media (max-width: 640px) {
	.partner-card {
		flex-direction: column;
		align-items: stretch;
	}
	.partner-card .brand-logo {
		width: 100%;
		max-width: 280px;
	}
}

/* MARK: Contatti */
.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.contact-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.contact-list .i-sm {
	margin-top: 3px;
	color: var(--accent-ink);
}
.contact-list a {
	text-decoration: none;
}
.contact-list a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* MARK: Modulo di contatto (contact.html) */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
@media (max-width: 880px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}
.contact-form {
	gap: 18px;
}
.contact-form label {
	display: grid;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
}
.contact-form small {
	font-weight: 400;
}
.form-row.two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 560px) {
	.form-row.two {
		grid-template-columns: 1fr;
	}
}
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	font: 400 16px/1.4 var(--body);
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.contact-form textarea {
	resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--fg);
	outline: none;
}
.contact-form.checked :invalid {
	border-color: var(--red-ink);
}
.contact-form label.check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	color: var(--muted);
}
.contact-form .check input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--fg);
}
.contact-form.checked .check input:invalid {
	outline: 2px solid var(--red-ink);
	outline-offset: 1px;
}
/* campo trappola per lo spam */
.contact-form .hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.contact-form altcha-widget {
	--altcha-border-radius: var(--radius-sm);
	--altcha-color-base: var(--bg);
	--altcha-color-border: var(--line);
	--altcha-color-text: var(--fg);
	--altcha-color-border-focus: var(--fg);
	--altcha-max-width: 100%;
}
.form-msg {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}
.form-msg.is-ok {
	color: var(--green-ink);
}
.form-msg.is-error {
	color: var(--red-ink);
}

/* MARK: Policy
   Privacy e cookie policy sono testi Markdown (privacy/*.md), mostrati nella pagina da marked (vedi privacy e cookie). */
.policy {
	max-width: 820px;
	min-height: 320px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.65;
}
.policy h2,
.policy h3 {
	color: var(--fg);
	margin: 1.8em 0 0.6em;
}
.policy h2 {
	font-size: 26px;
}
.policy h3 {
	font-size: 19px;
}
.policy > :first-child {
	margin-top: 0;
}
.policy strong {
	color: var(--fg);
	font-weight: 600;
}
.policy a {
	color: var(--accent-ink);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.policy ul,
.policy ol {
	padding-left: 1.3em;
}
.policy li + li {
	margin-top: 0.4em;
}
/* Banner e pannello delle preferenze cookie (Iubenda) con colori, font e pulsanti del sito, chiaro e scuro.
   Iubenda aggiunge i suoi stili dopo questo file, tutti !important e in parte scritti sugli elementi:
   l'id ripetuto (#id#id) vince sulle sue regole; dove lo sfondo è scritto sull'elemento lo copre
   un background-image a tinta unita, e dove è scritto il colore del testo lo si riassegna ai figli. */
#iubenda-cs-banner#iubenda-cs-banner *,
#iubenda-iframe#iubenda-iframe * {
	font-family: var(--body) !important;
}
#iubenda-cs-banner#iubenda-cs-banner :focus,
#iubenda-iframe#iubenda-iframe :focus {
	outline: none !important;
}
#iubenda-cs-banner#iubenda-cs-banner :focus-visible,
#iubenda-iframe#iubenda-iframe :focus-visible {
	outline: 2px solid var(--fg) !important;
	outline-offset: 3px !important;
}

/* Banner */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-content {
	background-image: linear-gradient(var(--surface), var(--surface)) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale {
	color: var(--fg) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content {
	font-weight: 400 !important;
	padding: 24px 24px 16px !important;
}
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-title {
	font-family: var(--display) !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: var(--fg) !important;
	background: none !important;
	margin: 0 0 10px !important;
}
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph {
	color: var(--muted) !important;
	margin-top: 0 !important;
}
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph strong,
#iubenda-cs-banner#iubenda-cs-banner #iubenda-cs-paragraph a {
	color: var(--fg) !important;
	font-weight: 600 !important;
	text-underline-offset: 3px !important;
}
/* Sotto i 992px Iubenda attacca il banner ai bordi dello schermo: lo stacchiamo come una card */
@media (max-width: 991px) {
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container {
		padding: 0 12px 12px !important;
	}
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-granular-controls-container {
	--iub-granular-background: transparent;
	--iub-granular-border: var(--line);
	padding-left: 0 !important;
	padding-right: 0 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
#iubenda-cs-banner#iubenda-cs-banner .granular-control-checkbox span {
	background: none !important;
	color: var(--fg) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group {
	margin: 0 24px 24px !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button {
	min-height: 46px !important;
	padding: 10px 20px !important;
	border: 1px solid transparent !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Pulsanti: "Accetta" e "Rifiuta" pieni e uguali (stesso peso alle due scelte), gli altri a contorno */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-btn-primary,
#iubenda-iframe#iubenda-iframe #iubFooterBtnContainer button {
	background-color: var(--accent) !important;
	color: var(--on-accent) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-btn-primary:hover,
#iubenda-iframe#iubenda-iframe #iubFooterBtnContainer button:hover {
	background-color: color-mix(in srgb, var(--accent) 88%, #000) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn,
#iubenda-iframe#iubenda-iframe .iub-btn {
	background-color: transparent !important;
	color: var(--fg) !important;
	border: 1px solid var(--line) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn:hover,
#iubenda-iframe#iubenda-iframe .iub-btn:hover {
	border-color: var(--fg) !important;
}

/* Interruttori: spento a tinta linea, acceso col colore del testo */
#iubenda-cs-banner#iubenda-cs-banner .iub-toggle-checkbox input.style1,
#iubenda-iframe#iubenda-iframe .iub-toggle-checkbox input.style1 {
	background-color: var(--line) !important;
	background-image: radial-gradient(circle closest-side, var(--muted) 96%, transparent) !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iub-toggle-checkbox input.style1:checked,
#iubenda-iframe#iubenda-iframe .iub-toggle-checkbox input.style1:checked {
	background-color: var(--fg) !important;
	background-image: radial-gradient(circle closest-side, var(--bg) 96%, transparent) !important;
}

/* Pannello delle preferenze */
#iubenda-iframe#iubenda-iframe {
	background-color: rgba(8, 10, 20, 0.6) !important;
}
#iubenda-iframe#iubenda-iframe #iubenda-iframe-popup {
	background-color: var(--surface) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
}
#iubenda-iframe#iubenda-iframe #purposes-container,
#iubenda-iframe#iubenda-iframe #purposes-content-container {
	background-image: linear-gradient(var(--surface), var(--surface)) !important;
}
#iubenda-iframe#iubenda-iframe .iubenda-iframe-top-container,
#iubenda-iframe#iubenda-iframe .iubenda-iframe-footer,
#iubenda-iframe#iubenda-iframe .iub-consent-buttons,
#iubenda-iframe#iubenda-iframe .purposes-items {
	background-color: var(--surface) !important;
}
#iubenda-iframe#iubenda-iframe .iubenda-modal-navigation {
	color: var(--fg) !important;
	box-shadow: 0 18px 10px -8px var(--surface) !important;
}
#iubenda-iframe#iubenda-iframe .iubenda-iframe-footer {
	box-shadow: 0 -18px 10px -8px var(--surface) !important;
}
#iubenda-iframe#iubenda-iframe .iubenda-iframe-footer::before {
	background: linear-gradient(transparent, var(--surface)) !important;
}
#iubenda-iframe#iubenda-iframe .purposes-content {
	color: var(--fg) !important;
}
#iubenda-iframe#iubenda-iframe .purposes-header-title {
	font-family: var(--display) !important;
	font-size: clamp(26px, 4vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 12px !important;
}
#iubenda-iframe#iubenda-iframe .purposes-section-header-title {
	font-family: var(--display) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}
#iubenda-iframe#iubenda-iframe .purposes-header-text,
#iubenda-iframe#iubenda-iframe .purposes-section-header-text,
#iubenda-iframe#iubenda-iframe .purposes-item-body {
	color: var(--muted) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
}
#iubenda-iframe#iubenda-iframe .purposes-item-title label {
	font-weight: 600 !important;
}
#iubenda-iframe#iubenda-iframe #purposes-content-container a {
	color: var(--fg) !important;
	text-underline-offset: 3px !important;
}
#iubenda-iframe#iubenda-iframe .iub-consent-buttons,
#iubenda-iframe#iubenda-iframe .purposes-section-header,
#iubenda-iframe#iubenda-iframe .purposes-item {
	border-color: var(--line) !important;
}
#iubenda-iframe#iubenda-iframe .iub-btn {
	min-height: 38px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
#iubenda-iframe#iubenda-iframe .iub-btn-consent {
	background-image: none !important;
	padding: 6px 14px !important;
}
#iubenda-iframe#iubenda-iframe #iubFooterBtnContainer button {
	min-height: 46px !important;
	padding: 10px 20px !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* MARK: Footer */
.site-footer {
	background: var(--night);
	--brand-ring: rgba(255, 255, 255, 0.18);
	color: var(--on-night);
	/* Separa il footer da un'ultima sezione scura e, nel tema scuro, dal fondo pagina quasi uguale */
	border-top: 1px solid var(--night-line);
	padding: 64px 0 32px;
	--fg: var(--on-night);
	--muted: var(--on-night-muted);
	--line: var(--night-line);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 32px;
}
.footer-grid h4 {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-night-muted);
	margin: 0 0 14px;
}
.footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.footer-grid a {
	text-decoration: none;
	color: var(--on-night);
	opacity: 0.88;
}
.footer-grid a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.footer-brand p {
	color: var(--on-night-muted);
	font-size: 15px;
	margin-top: 14px;
	max-width: 32ch;
}
/* il logo di Ohm Automation, il reparto di Chiarini Automazioni che sviluppa la domotica OHMe (scritta bianca: il footer è sempre scuro) */
.footer-company {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	font: 600 16px/1.2 var(--display);
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}
.footer-company:hover {
	opacity: 1;
}
.footer-company img {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	/* il logo è blu notte come il footer: il bordino lo stacca */
	box-shadow: 0 0 0 1px rgba(238, 240, 247, 0.3);
}
.site-footer .contact-list {
	font-size: 15px;
	gap: 10px;
}
.site-footer .contact-list .i-sm {
	color: var(--on-night-muted);
}
.footer-bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--night-line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--on-night-muted);
}
/* i marchi citati nella pagina (solo nelle pagine che ne parlano) */
.footer-trademarks {
	flex-basis: 100%;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	opacity: 0.8;
}
.footer-bottom nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.footer-bottom a {
	color: var(--on-night-muted);
	text-decoration: none;
}
.footer-bottom a:hover {
	color: var(--on-night);
}
@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 520px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* MARK: Comparsa allo scroll (solo con JS e senza riduzione del movimento)
   Dove il browser lo supporta la comparsa è legata allo scroll: l'elemento compare man mano che entra.
   Con la transizione a tempo Safari su iPhone, durante lo scroll col dito, mostrava le card di scatto.
   Il keyframe finale è implicito: a comparsa finita valgono gli stili dell'elemento (es. l'hover). */
@keyframes reveal {
	from {
		opacity: 0;
		transform: translateY(36px) scale(0.97);
	}
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.js .reveal {
			animation: reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}
	@supports not (animation-timeline: view()) {
		.js .reveal {
			opacity: 0;
			transform: translateY(36px) scale(0.97);
			transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.js .reveal.in {
			opacity: 1;
			transform: none;
		}
	}
}