@charset "UTF-8";
/* HTSS 2026 - restyling del sito pubblico.
   Tutte le regole sono vincolate a body.site, cosi' le pagine interne non cambiano.
   Per tornare al vecchio look: togliere il <link> a htss-2026.css da header.php. */

body.site {
	--ink: #0b1118;
	--ink-2: #111a24;
	--ink-3: #1b2735;
	--paper: #f3f6f9;
	--white: #ffffff;
	--line: #d3dce6;
	--line-dark: #263547;
	--text: #17212c;
	--muted: #475769;
	--muted-dark: #a8b5c3;
	--blue: #0f96f8;
	--blue-deep: #0a62b0;
	--blue-deeper: #084d8b;

	--display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

	--nav-h: 76px;
	--gutter: clamp(20px, 5vw, 96px);
	--ease: cubic-bezier(0.23, 1, 0.32, 1);

	margin: 0;
	padding-top: var(--nav-h);
	height: auto;
	width: auto;
	background: var(--paper);
	color: var(--text);
	font-family: var(--body);
	font-size: clamp(17px, 0.25vw + 16px, 20px);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.site *,
body.site *::before,
body.site *::after {
	box-sizing: border-box;
}

body.site ::selection {
	background: var(--blue);
	color: var(--ink);
}

body.site img {
	max-width: 100%;
	height: auto;
	display: block;
}

body.site a {
	color: var(--blue-deep);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

body.site a:hover {
	color: var(--blue-deeper);
	text-decoration: underline;
}

body.site :focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	border-radius: 2px;
}

body.site [id] {
	scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ---------- scrollbar ---------- */
html {
	font-size: 100%;
	scrollbar-color: #5b6f84 #0b1118;
	scroll-behavior: smooth;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #0b1118; }
html::-webkit-scrollbar-thumb { background: #3b4d62; border: 3px solid #0b1118; border-radius: 8px; }
html::-webkit-scrollbar-thumb:hover { background: #0f96f8; }

/* ---------- tipografia ---------- */
body.site h1,
body.site h2,
body.site h3 {
	font-family: var(--display);
	color: inherit;
	text-align: left;
	margin: 0;
	text-wrap: balance;
	letter-spacing: -0.025em;
}

body.site h1 {
	font-size: clamp(2.15rem, 1.1rem + 3.4vw, 4.4rem);
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -0.035em;
}

body.site h2 {
	font-size: clamp(1.75rem, 1.15rem + 1.8vw, 2.9rem);
	line-height: 1.1;
	font-weight: 700;
}

body.site h3 {
	font-size: 1.2rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
}

body.site p {
	margin: 0 0 1.1em;
	max-width: 68ch;
}

body.site .lead {
	font-size: clamp(1.2rem, 1rem + 0.5vw, 1.6rem);
	line-height: 1.5;
	font-weight: 500;
}

/* link "vai al contenuto": visibile solo con la tastiera */
body.site .skip-link {
	position: absolute;
	left: 12px;
	top: -64px;
	z-index: 3000;
	padding: 10px 16px;
	background: var(--white);
	color: var(--ink);
	border-radius: 4px;
	text-decoration: none;
	transition: top 0.15s var(--ease);
}
body.site .skip-link:focus { top: 12px; }

/* ---------- barra di navigazione ---------- */
body.site .navbar-personal {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	height: var(--nav-h);
	margin: 0;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--ink);
	border: 0;
	border-bottom: 1px solid var(--line-dark);
	border-radius: 0;
	min-height: 0;
}

body.site .nav-logo {
	display: block;
	flex: none;
	line-height: 0;
}

body.site .nav-logo img {
	height: 42px;
	width: auto;
	margin: 0;
	max-width: none;
}

body.site .nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--line-dark);
	border-radius: 4px;
	width: 46px;
	height: 46px;
	padding: 0;
	cursor: pointer;
	color: var(--white);
}

body.site .nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	margin: 5px auto;
	background: currentColor;
	transition: transform 0.3s var(--ease), opacity 0.2s;
}

body.site .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.site .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
body.site .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.site .nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(8px, 2vw, 32px);
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
}

body.site .nav-menu > li {
	position: relative;
	margin: 0;
}

body.site .nav-menu a,
body.site .nav-menu .nav-drop-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	font-family: var(--body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: #e7edf4;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	position: relative;
}

body.site .nav-menu > li > a::after,
body.site .nav-menu .nav-drop-btn::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 4px;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--ease);
}

body.site .nav-menu > li > a:hover::after,
body.site .nav-menu > li > a:focus-visible::after,
body.site .nav-menu .nav-drop-btn:hover::after,
body.site .nav-menu .nav-drop-btn[aria-expanded="true"]::after,
body.site .nav-menu a[aria-current="page"]::after {
	transform: scaleX(1);
}

body.site .nav-menu a:hover { color: var(--white); text-decoration: none; }

body.site .nav-drop-btn svg {
	width: 10px;
	height: 10px;
	transition: transform 0.2s var(--ease);
}
body.site .nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

body.site .nav-sub {
	transform-origin: top left;
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: -12px;
	min-width: 330px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	border-radius: 6px;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
}

body.site .nav-sub.is-open { display: block; animation: sub-in 0.16s var(--ease); }

@keyframes sub-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

body.site .nav-sub a {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 1.35;
	color: #d3dde8;
}

body.site .nav-sub a::after { display: none; }
body.site .nav-sub a:hover { background: var(--ink-3); color: var(--white); }

body.site .nav-sub .nav-sub-head {
	font-family: var(--mono);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
}

body.site .nav-menu .nav-cta {
	margin-left: 8px;
	padding: 11px 24px;
	border: 1px solid var(--blue);
	border-radius: 999px;
	color: var(--white);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease);
}
body.site .nav-menu .nav-cta::after { display: none; }
body.site .nav-menu .nav-cta:active { transform: scale(0.97); }
body.site .nav-menu .nav-cta:hover { background: var(--blue); color: var(--ink); }

/* ---------- pulsanti ---------- */
body.site .btn-s,
body.site a.btn-s {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	font-family: var(--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--white);
	background: var(--blue-deep);
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease);
}

body.site .btn-s::after {
	content: "\2192";
	transition: transform 0.2s var(--ease);
}

body.site .btn-s:hover {
	background: var(--blue-deeper);
	color: var(--white);
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	body.site .btn-s:hover::after { transform: translateX(4px); }
}
body.site .btn-s:active { transform: scale(0.97); }

body.site .on-dark .btn-s,
body.site .on-dark-2 .btn-s,
body.site .band .btn-s,
body.site .closer .btn-s {
	background: var(--blue);
	color: var(--ink);
}
body.site .on-dark .btn-s:hover,
body.site .on-dark-2 .btn-s:hover,
body.site .band .btn-s:hover,
body.site .closer .btn-s:hover { background: #4db2ff; color: var(--ink); }

/* ---------- struttura sezioni ---------- */
body.site .wrap {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

body.site .sec {
	padding-top: clamp(64px, 9vw, 140px);
	padding-bottom: clamp(64px, 9vw, 140px);
}

body.site .on-dark {
	background: var(--ink);
	color: #e8eef5;
}

body.site .on-dark-2 {
	background: var(--ink-2);
	color: #e8eef5;
}

body.site .on-dark p,
body.site .on-dark-2 p { color: var(--muted-dark); }

body.site .on-white { background: var(--white); }

body.site .split {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}

body.site .split__a { grid-column: 1 / span 6; }
body.site .split__b { grid-column: 8 / span 5; }
body.site .split--flip .split__a { grid-column: 7 / span 6; grid-row: 1; }
body.site .split--flip .split__b { grid-column: 1 / span 5; grid-row: 1; }
body.site .split--wide .split__a { grid-column: 1 / span 5; }
body.site .split--wide .split__b { grid-column: 7 / span 6; }
body.site .split--wide.split--flip .split__a { grid-column: 8 / span 5; }
body.site .split--wide.split--flip .split__b { grid-column: 1 / span 6; }

body.site .sec-head { margin-bottom: clamp(28px, 4vw, 56px); max-width: 24em; }
body.site .sec-head h2 + p { margin-top: 1.1em; }

/* titolo e sottotitolo nelle colonne di testo */
body.site .split__a > h2 { margin-bottom: 0.8em; }
body.site .split__b > h3 { margin-bottom: 1em; }
body.site .on-dark .lead,
body.site .on-dark-2 .lead { color: #e8eef5; }

body.site .rule {
	display: block;
	width: 56px;
	height: 3px;
	background: var(--blue);
	margin: 0 0 1.6em;
	border: 0;
}

/* ---------- hero ---------- */
body.site .hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	background: var(--ink);
	color: #eef3f8;
	min-height: calc(100vh - var(--nav-h));
	min-height: calc(100svh - var(--nav-h));
	overflow: hidden;
}

body.site .hero__text {
	grid-column: 1;
	align-self: center;
	padding: clamp(40px, 7vw, 110px) clamp(24px, 4vw, 72px) clamp(110px, 12vw, 150px) var(--gutter);
	position: relative;
	z-index: 2;
}

body.site .hero h1 {
	color: var(--white);
	margin-bottom: 0.7em;
}

body.site .hero .lead {
	color: var(--white);
	margin-bottom: 0.8em;
}

body.site .hero p { color: var(--muted-dark); }

body.site .hero .btn-s { margin-top: 0.6em; }

body.site .hero__media {
	grid-column: 2;
	position: relative;
	margin: 0;
	min-height: 320px;
	background: var(--ink-2);
	overflow: hidden;
	border-left: 1px solid var(--line-dark);
}

body.site .hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 62% 38%;
	animation: hero-in 1.4s var(--ease) both;
}

@keyframes hero-in {
	from { opacity: 0; transform: scale(1.06); }
	to { opacity: 1; transform: none; }
}

body.site .hero__scan {
	position: absolute;
	inset: 0;
	border-right: 2px solid var(--blue);
	opacity: 0;
	animation: scan 1.6s var(--ease) 0.5s 1 both;
	pointer-events: none;
}

@keyframes scan {
	0% { transform: translateX(-100%); opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateX(0); opacity: 0; }
}

/* ingresso del testo in testata: poche voci, ritardi brevi */
body.site .hero__text > * {
	animation: rise 0.7s var(--ease) both;
}
body.site .hero__text > :nth-child(2) { animation-delay: 70ms; }
body.site .hero__text > :nth-child(3) { animation-delay: 140ms; }
body.site .hero__text > :nth-child(4) { animation-delay: 210ms; }

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

body.site .tagrail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
	background: var(--ink);
	border-top: 1px solid var(--line-dark);
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-dark);
}

body.site .tagrail li {
	padding: 18px 22px;
	margin: 0;
	border-right: 1px solid var(--line-dark);
}
body.site .tagrail li:first-child { padding-left: 0; }
body.site .tagrail li:last-child { border-right: 0; }

/* ---------- smart apps / schermo ---------- */
body.site .device {
	margin: 0;
	padding: clamp(24px, 4vw, 56px);
	background-color: var(--ink-2);
	background-image:
		linear-gradient(rgba(15, 150, 248, 0.14) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 150, 248, 0.14) 1px, transparent 1px);
	background-size: 32px 32px;
	border: 1px solid var(--line-dark);
	border-radius: 6px;
}

body.site .device img { margin: 0 auto; width: 100%; max-width: 520px; }

/* ---------- elenco di due servizi ---------- */
body.site .duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 72px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.site .duo li {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 36px 0 0;
	border-top: 1px solid var(--blue);
}

body.site .duo img { width: 84px; height: 84px; object-fit: contain; flex: none; }

body.site .duo h3 {
	font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
	color: var(--white);
	text-transform: capitalize;
}

/* ---------- fascia dati ---------- */
body.site .band {
	position: relative;
	background-color: var(--ink);
	background-image: url("../immagini/software_108744983.png");
	background-size: cover;
	background-position: center;
	color: #eef3f8;
	isolation: isolate;
}

body.site .band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 15, 24, 0.82);
	z-index: -1;
}

body.site .band h2 { color: var(--white); max-width: 18em; margin-bottom: 0.6em; }
body.site .band p { color: #c3cfdb; }

/* ---------- immagini editoriali ---------- */
body.site .photo {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--ink-2);
}
body.site .photo img { width: 100%; }
body.site .photo--plain { border: 0; background: transparent; }

/* ---------- testata di pagina interna ---------- */
body.site .page-head {
	background: var(--ink);
	color: var(--white);
	padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--line-dark);
}
body.site .page-head h1 {
	font-size: clamp(2rem, 1rem + 3vw, 3.9rem);
	max-width: 17em;
}

body.site .tech-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 3vw, 40px);
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}
body.site .tech-trio li {
	margin: 0;
	padding: clamp(14px, 2vw, 28px);
	background: var(--ink-2);
	border: 1px solid var(--line-dark);
	border-radius: 6px;
}
body.site .tech-trio img { width: 100%; height: 150px; object-fit: contain; }

/* ---------- testo lungo e liste ---------- */
body.site .prose p { font-size: 1.05em; }

body.site .spec-list {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
body.site .spec-list li {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1rem;
}
body.site .on-dark .spec-list,
body.site .on-dark .spec-list li,
body.site .on-dark-2 .spec-list,
body.site .on-dark-2 .spec-list li { border-color: var(--line-dark); }

body.site .cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 5vw, 80px);
}
body.site .cols-2 h3 { margin-bottom: 1em; }

body.site .legal-text { max-width: 760px; }
body.site .legal-text h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); margin: 2.2em 0 0.6em; }
body.site .legal-text h3 { font-size: 1.05rem; margin: 1.6em 0 0.4em; }
body.site .legal-text .lead { margin-bottom: 0; }
body.site .legal-list { margin: 0 0 1.2em; padding-left: 1.2em; max-width: 68ch; }
body.site .legal-list li { margin-bottom: 0.6em; }

/* ---------- chi siamo ---------- */
body.site .person {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}
body.site .person img { width: 120px; height: 120px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 18px; }
body.site .person h2 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); }

/* ---------- contatti ---------- */
body.site .form-s .field { margin-bottom: 14px; }
body.site .form-s input[type="text"],
body.site .form-s input[type="email"],
body.site .form-s textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	color: var(--text);
	background: var(--white);
	border: 1px solid #aab8c6;
	border-radius: 4px;
	box-shadow: none;
	height: auto;
	transition: border-color 0.2s, box-shadow 0.2s;
}
body.site .form-s input:focus,
body.site .form-s textarea:focus {
	outline: 0;
	border-color: var(--blue-deep);
	box-shadow: 0 0 0 3px rgba(15, 150, 248, 0.28);
}
body.site .form-s textarea { min-height: 180px; resize: vertical; }
body.site .form-s .check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; margin: 18px 0 24px; }
body.site .form-s .check input { margin-top: 5px; accent-color: var(--blue-deep); }

body.site .address {
	padding: 32px;
	background: var(--ink);
	color: #d9e2ec;
	border-radius: 6px;
	font-style: normal;
	line-height: 1.8;
}
body.site .address a { color: var(--blue); }
body.site .address strong { color: var(--white); font-family: var(--display); font-size: 1.3rem; display: block; margin-bottom: 8px; }

/* ---------- chiusura pagina ---------- */
body.site .closer {
	background: var(--ink);
	color: var(--white);
	padding: clamp(56px, 8vw, 112px) 0;
}
body.site .closer .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
}
body.site .closer a.mail {
	font-family: var(--display);
	font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--white);
	text-decoration: none;
	overflow-wrap: anywhere;
}
body.site .closer a.mail:hover { color: var(--blue); text-decoration: none; }

/* ---------- piede ---------- */
body.site .site-footer {
	background: var(--ink);
	color: var(--muted-dark);
	padding: clamp(48px, 6vw, 88px) 0 32px;
	text-align: left;
	border-top: 1px solid var(--line-dark);
}
body.site .site-footer .grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--line-dark);
}
body.site .site-footer img { height: 40px; width: auto; margin-bottom: 18px; }
body.site .site-footer h3 {
	font-family: var(--mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 14px;
}
body.site .site-footer a { color: #e3ebf3; }
body.site .site-footer a:hover { color: var(--blue); }
body.site .site-footer ul { list-style: none; margin: 0; padding: 0; }
body.site .site-footer li { margin: 0 0 8px; }
body.site .site-footer address { font-style: normal; line-height: 1.8; }
body.site .site-footer .legal { padding-top: 24px; font-size: 0.88rem; }
body.site .site-footer .legal p { margin: 0; max-width: none; }

/* ---------- banner cookie ---------- */
body.site #eucookielaw {
	display: none;
	position: fixed;
	z-index: 2000;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 24px;
	background: var(--ink-2);
	color: #dfe8f1;
	border: 1px solid var(--line-dark);
	border-radius: 8px;
	text-align: left;
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
	font-size: 0.92rem;
	line-height: 1.5;
}
body.site #eucookielaw p { color: #dfe8f1; margin: 0 0 14px; max-width: none; }
body.site #eucookielaw .btn { border-radius: 999px; padding: 9px 20px; font-weight: 600; margin-right: 8px; }
body.site #eucookielaw .btn-success { background: var(--blue); border-color: var(--blue); color: var(--ink); }
body.site #eucookielaw .btn-outline-info { background: transparent; border: 1px solid #5d7189; color: #dfe8f1; }

/* ---------- movimento: un solo momento, all'ingresso delle sezioni ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.js body.site .reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	}
	html.js body.site .reveal.is-in { opacity: 1; transform: none; }
}

@media (hover: hover) and (min-width: 1021px) {
	body.site .nav-menu > li:hover > .nav-sub { display: block; animation: sub-in 0.28s var(--ease); }
	body.site .nav-menu > li:hover > .nav-drop-btn::after { transform: scaleX(1); }
	body.site .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body.site .hero__scan { display: none; }
	body.site .hero__media img,
	body.site .hero__text > *,
	body.site .nav-sub.is-open { animation: none; }
}

/* ---------- adattamento ---------- */
@media (max-width: 1020px) {
	body.site { --nav-h: 68px; }

	body.site .nav-toggle { display: block; }

	body.site .nav-menu {
		display: none;
		position: absolute;
		top: var(--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 12px var(--gutter) 24px;
		background: var(--ink);
		border-bottom: 1px solid var(--line-dark);
		max-height: calc(100vh - var(--nav-h));
		overflow-y: auto;
	}
	body.site .nav-menu.is-open { display: flex; }
	body.site .nav-menu > li { border-bottom: 1px solid var(--line-dark); }
	body.site .nav-menu a,
	body.site .nav-menu .nav-drop-btn { width: 100%; padding: 16px 4px; justify-content: space-between; }
	body.site .nav-menu > li > a::after,
	body.site .nav-menu .nav-drop-btn::after { display: none; }
	body.site .nav-sub { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 10px 8px; background: transparent; }
	body.site .nav-menu .nav-cta { margin: 16px 0 0; justify-content: center; }
	body.site .nav-menu > li:last-child { border: 0; }

	body.site .hero { grid-template-columns: 1fr; min-height: 0; }
	body.site .hero__text { grid-column: 1; padding: clamp(36px, 8vw, 64px) var(--gutter) 40px; }
	body.site .hero__media { grid-column: 1; grid-row: 2; min-height: 300px; border-left: 0; border-top: 1px solid var(--line-dark); }
	body.site .tagrail { position: static; grid-row: 3; }

	body.site .split,
	body.site .split--wide { display: block; }
	body.site .split__b { margin-top: 36px; }
	body.site .split--flip .split__b,
	body.site .split--wide.split--flip .split__b { margin-top: 0; margin-bottom: 36px; }
	body.site .split--flip { display: flex; flex-direction: column; }
	body.site .split--flip .split__b { order: 2; margin: 36px 0 0; }
	body.site .split--flip .split__a { order: 1; }

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

@media (max-width: 640px) {
	body.site { font-size: 17px; }
	body.site .duo,
	body.site .cols-2 { grid-template-columns: 1fr; }
	body.site .tech-trio { gap: 10px; }
	body.site .tech-trio li { padding: 10px; }
	body.site .duo li { gap: 20px; }
	body.site .person { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; }
	body.site .person img { width: 84px; height: 84px; padding: 12px; }
	body.site .tagrail li { padding: 14px 14px; font-size: 0.72rem; }
	body.site .tagrail li:first-child { padding-left: 0; }
	body.site .nav-logo img { height: 36px; }
	body.site .tech-trio img { height: 72px; }
}


/* ===================== ANIMAZIONI (11/10/2026) =====================
   Tutte dentro prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {

	/* barra di avanzamento sotto il menu, legata allo scorrimento (dove il browser la supporta) */
	@supports (animation-timeline: scroll()) {
		body.site .navbar-personal::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1px;
			height: 2px;
			background: var(--blue);
			transform-origin: left;
			transform: scaleX(0);
			animation: progress linear both;
			animation-timeline: scroll(root);
		}
		@keyframes progress { to { transform: scaleX(1); } }
	}

	/* foto di testata: lentissimo avvicinamento dopo l'ingresso */
	body.site .hero__media img {
		animation: hero-in 1.2s var(--ease) both, drift 26s ease-out 1.2s both;
	}
	@keyframes drift {
		from { transform: scale(1); }
		to { transform: scale(1.06); }
	}

	/* fascia delle tecnologie: una voce alla volta si accende, come una scansione */
	body.site .tagrail li {
		animation: tagpulse 9.6s ease-in-out infinite;
	}
	body.site .tagrail li:nth-child(1) { animation-delay: 2.0s; }
	body.site .tagrail li:nth-child(2) { animation-delay: 3.2s; }
	body.site .tagrail li:nth-child(3) { animation-delay: 4.4s; }
	body.site .tagrail li:nth-child(4) { animation-delay: 5.6s; }
	body.site .tagrail li:nth-child(5) { animation-delay: 6.8s; }
	body.site .tagrail li:nth-child(6) { animation-delay: 8.0s; }
	body.site .tagrail li:nth-child(7) { animation-delay: 9.2s; }
	body.site .tagrail li:nth-child(8) { animation-delay: 10.4s; }
	@keyframes tagpulse {
		0%, 14%, 100% { color: var(--muted-dark); box-shadow: inset 0 0 0 var(--blue); }
		4%, 9% { color: var(--white); box-shadow: inset 0 -2px 0 var(--blue); }
	}

	/* gruppi di voci: entrano una dopo l'altra */
	html.js body.site .stagger > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
	}
	html.js body.site .stagger.is-in > * { opacity: 1; transform: none; }
	html.js body.site .stagger.is-in > :nth-child(2) { transition-delay: 70ms; }
	html.js body.site .stagger.is-in > :nth-child(3) { transition-delay: 140ms; }
	html.js body.site .stagger.is-in > :nth-child(4) { transition-delay: 210ms; }
	html.js body.site .stagger.is-in > :nth-child(5) { transition-delay: 280ms; }
	html.js body.site .stagger.is-in > :nth-child(6) { transition-delay: 350ms; }
	html.js body.site .stagger.is-in > :nth-child(7) { transition-delay: 420ms; }
	html.js body.site .stagger.is-in > :nth-child(8) { transition-delay: 490ms; }

	/* la fascia tecnologie e' gia' visibile alla partenza: niente ritardo sulle voci */
	html.js body.site .tagrail.stagger > * { transform: none; }

	/* immagini: si scoprono dall'alto verso il basso quando la sezione entra */
	html.js body.site .reveal .photo img,
	html.js body.site .reveal .device img {
		clip-path: inset(0 0 100% 0);
		transition: clip-path 0.9s var(--ease) 0.15s, transform 0.6s var(--ease);
	}
	html.js body.site .reveal.is-in .photo img,
	html.js body.site .reveal.is-in .device img { clip-path: inset(0 0 0 0); }

	/* piccoli movimenti al passaggio del mouse (non sul telefono) */
	@media (hover: hover) and (pointer: fine) {
		body.site .duo img { transition: transform 0.25s var(--ease); }
		body.site .duo li:hover img { transform: translateY(-5px) scale(1.04); }

		body.site .tech-trio li { transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); }
		body.site .tech-trio li:hover { transform: translateY(-4px); border-color: var(--blue); }

		body.site .photo img { transition: transform 0.6s var(--ease); }
		body.site .photo:hover img { transform: scale(1.03); }

		body.site .spec-list li { transition: padding-left 0.2s var(--ease), color 0.2s var(--ease); }
		body.site .spec-list li:hover { padding-left: 10px; color: var(--blue-deep); }
		body.site .on-dark-2 .spec-list li:hover,
		body.site .on-dark .spec-list li:hover { color: var(--blue); }
	}
}

/* Con "riduci movimento" attivo: niente spostamenti, ma dissolvenze leggere */
@media (prefers-reduced-motion: reduce) {
	html.js body.site .reveal,
	html.js body.site .stagger > * {
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	html.js body.site .reveal.is-in,
	html.js body.site .stagger.is-in > * { opacity: 1; }

	body.site .hero__text > * { animation: fade-only 0.6s ease both; }
	body.site .hero__text > :nth-child(2) { animation-delay: 70ms; }
	body.site .hero__text > :nth-child(3) { animation-delay: 140ms; }
	body.site .hero__text > :nth-child(4) { animation-delay: 210ms; }
	@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
}