/* ==========================================================================
   Homepage SERRA — stile Profound (canvas nero, frame hairline, dashboard)
   Tokens e sezioni secondo spec-finale del panel di design.
   ========================================================================== */

.hs {
	/* Canvas & superfici */
	--hs-canvas: #08090c;
	--hs-canvas-2: #0b0d12;
	--hs-panel: #0e1118;
	--hs-panel-2: #131722;
	--hs-ink: #1c1f29;

	/* Hairline */
	--hs-line: rgba(255, 255, 255, 0.08);
	--hs-line-strong: rgba(255, 255, 255, 0.14);
	--hs-line-dash: rgba(255, 255, 255, 0.1);

	/* Testo (text-3 ≥4,5:1 su canvas e panel per i corpi 11-14px) */
	--hs-text: #f5f7fa;
	--hs-text-2: #9ca3af;
	--hs-text-3: #7e8794;

	/* Brand */
	--hs-blue: #0365fa;
	--hs-blue-dark: #023a93;
	--hs-blue-40: #4d94ff;
	--hs-blue-soft: rgba(3, 101, 250, 0.14);
	--hs-orange: #fa9329;
	--hs-orange-soft: rgba(250, 147, 41, 0.14);

	/* Palette dati */
	--hs-d1: #0365fa;
	--hs-d2: #8b5cf6;
	--hs-d3: #10b981;
	--hs-d4: #fa9329;
	--hs-d5: #ef4444;
	--hs-pos: #10b981;
	--hs-neg: #ef4444;

	/* Layout & motion — wide: sfondi e rule full-bleed, contenuto centrato */
	--hs-content: 1320px;
	--hs-gutter: 32px;
	--hs-pad-x: max(var(--hs-gutter), calc((100% - var(--hs-content)) / 2));
	--hs-sec-pad: clamp(72px, 10vw, 128px);
	--hs-r-pill: 999px;
	--hs-r-card: 12px;
	--hs-r-row: 8px;
	--hs-shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 64px rgba(0, 0, 0, 0.45);
	--hs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--hs-dur-1: 200ms;
	--hs-dur-2: 300ms;
	--hs-dur-3: 600ms;
	--hs-dur-draw: 1300ms;

	position: relative;
	background: var(--hs-canvas);
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Regular', 'Plus Jakarta Sans', sans-serif;
	font-size: 17px;
	line-height: 1.55;
	overflow: clip;
}

/* L'header ora condivide il canvas (#08090c): nessun raccordo necessario */

/* Reset container Astra sulla home */
body.hs-home .site-content .ast-container {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
}

body.hs-home .site-content #primary,
body.hs-home .ast-article-single {
	width: 100%;
	margin: 0;
	padding: 0;
}

body.hs-home .site-content {
	background: #08090c;
}

/* --------------------------------------------------------------------------
   Frame: montanti hairline + binari tratteggiati in testa e in coda
   -------------------------------------------------------------------------- */

.hs-frame {
	position: relative;
}

.hs-frame > section {
	position: relative;
	/* header sticky (72) + barra GEO Score sticky (52): gli anchor #risultati
	   e #feedback devono atterrare sotto le due barre */
	scroll-margin-top: 132px;
	border-top: 1px solid var(--hs-line);
	padding-block: var(--hs-sec-pad);
	padding-inline: var(--hs-pad-x);
}

.hs-frame > section.hs-rule--dash {
	border-top-style: dashed;
	border-top-color: var(--hs-line-dash);
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

/* :where() = specificità zero: non deve vincere sui margini dichiarati
   dalle singole classi (clients__title, duel__sub, search__title, …) */
.hs :where(h1, h2, h3, p, blockquote, figure) {
	margin: 0;
}

/* Kerning ottico: in Plus Jakarta Sans i pesi forti hanno l'advance del punto
   molto largo (0,41em); nei display heading lo si riassorbe a mano.
   (NB: .hs-dot è già il cerchietto SVG dei grafici — qui serve un nome suo.) */
.hs-enddot {
	margin-left: -0.06em;
}

.hs-h1 {
	font-family: 'Plus Jakarta Sans ExtraBold', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(44px, 7.2vw, 92px);
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--hs-text);
}

/* Roberto 03-09: quattro righe FISSE (Trasformiamo / le ricerche su /
   [rotor] / in clienti) — il rotor ha la sua riga, quindi anche "AI
   Overviews" non manda mai nulla a capo e il corpo torna pieno */
#hs-hero-title .hs-h1__ailine,
#hs-hero-title .hs-h1__in {
	display: block;
}

/* il nome AI non è bianco: risalta col gradiente blu del brand.
   Il padding-bottom compensato allarga il box dipinto: col clip-text i
   discendenti (la g di Google) fuori dal box resterebbero trasparenti */
#hs-hero-title .hs-rotor,
.hs-closing__title .hs-rotor {
	background: linear-gradient(100deg, #2a80ff, #7ea6ff 62%, #b8d4ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	padding-bottom: 0.18em;
	margin-bottom: -0.18em;
}

.hs-h2 {
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(34px, 4.6vw, 60px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--hs-text);
}

.hs-h3 {
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--hs-text);
}

.hs-body {
	font-size: clamp(16px, 1.3vw, 18px);
	color: var(--hs-text-2);
}

.hs-eyebrow {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hs-text-3);
}

.hs-tiny {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hs-text-3);
}

.hs-caption {
	font-size: 12px;
	color: var(--hs-text-3);
}

.hs-caption a {
	display: inline-block;
	padding-block: 12px;
	margin-block: -12px;
	color: var(--hs-blue-40);
	text-decoration: none;
}

.hs-caption a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hs-sub {
	max-width: 52ch;
	font-size: clamp(16px, 1.3vw, 18px);
	color: var(--hs-text-2);
}

/* Claim "accettiamo solo progetti…" nel manifesto, evidenziato come
   elemento visivo a sé (call Roberto 28-07 + ok Giacomo 30-07, Q1):
   trattino electric + frase bianca con inciso in blu chiaro. */
.hs-claim {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(19px, 1.7vw, 24px);
	letter-spacing: 0.01em;
	color: var(--hs-text);
}

.hs-claim::before {
	content: '';
	flex: 0 0 auto;
	width: 38px;
	height: 2px;
	background: var(--hs-blue);
}

.hs-claim em {
	font-style: normal;
	color: var(--hs-blue-40);
}

/* CTA del manifesto (03-09): allineata al testo, sotto il claim */
.hs-manifesto__cta {
	margin-top: 34px;
}

.hs-trust {
	font-size: 14px;
	color: var(--hs-text-3);
}

/* Icone provider AI (al posto della ✦): pila sovrapposta nel rotor
   dell'hero — è visibile solo l'icona .is-on, che home-serra.js cambia
   in sincrono col nome — e icona singola inline nella closing. */
.hs-aimark {
	position: relative;
	display: inline-block;
	width: 0.68em;
	height: 0.68em;
	margin-right: 0.2em;
	vertical-align: baseline;
	transform: translateY(0.05em);
	transition: opacity 250ms var(--hs-ease), transform 250ms var(--hs-ease), width 300ms var(--hs-ease), margin-right 300ms var(--hs-ease);
}

/* parola senza icona nel rotore (es. Google): la pila collassa a zero */
.hs-aimark.hs-aimark--none {
	width: 0;
	margin-right: 0;
}

/* l'icona esce insieme al nome che le sta accanto (vedi home-serra.js) */
.hs-aimark.is-out {
	opacity: 0;
	transform: translateY(-0.3em);
}

.hs-aimark__i {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: var(--hs-blue);
	opacity: 0;
	transform: translateY(0.3em) scale(0.7);
	transition: opacity 250ms var(--hs-ease), transform 250ms var(--hs-ease);
}

.hs-aimark__i.is-on {
	opacity: 1;
	transform: none;
}

.hs-h1__ai {
	white-space: nowrap;
}

/* Rotor: la piattaforma AI nel H1 ruota (ChatGPT → Gemini → …) */
.hs-rotor {
	display: inline-block;
	white-space: nowrap;
	/* width nella transizione: col testo dopo il rotor ("in clienti") il cambio
	   di nome non deve far saltare la riga — il JS anima da larghezza a larghezza */
	transition: opacity 250ms var(--hs-ease), transform 250ms var(--hs-ease), width 300ms var(--hs-ease);
}

.hs-rotor.is-out {
	opacity: 0;
	transform: translateY(-0.35em);
}

/* --------------------------------------------------------------------------
   Bottoni, pill, chip, badge
   -------------------------------------------------------------------------- */

.hs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--hs-r-pill);
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hs-dur-1) var(--hs-ease), transform 120ms var(--hs-ease);
}

.hs-btn:active {
	transform: scale(0.97);
}

.hs-btn--primary {
	background: #fff;
	color: #08090c;
}

.hs-btn--primary:hover {
	background: #e8eaee;
	color: #08090c;
}

.hs-btn--ghost {
	background: #1a1e28;
	border: 1px solid var(--hs-line-strong);
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
}

.hs-btn--ghost:hover {
	background: #232836;
	color: var(--hs-text);
}

.hs-btn--blue {
	background: var(--hs-blue);
	color: #fff;
}

.hs-btn--blue:hover {
	background: #0357d6;
	color: #fff;
}

.hs a:focus-visible,
.hs button:focus-visible,
.hs input:focus-visible,
.hs [role="button"]:focus-visible,
.hs summary:focus-visible {
	outline: 2px solid var(--hs-blue);
	outline-offset: 3px;
}

.hs-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--hs-r-pill);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

.hs-pill i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.hs-pill--live,
.hs-pill--done {
	background: rgba(16, 185, 129, 0.12);
	color: var(--hs-d3);
}

.hs-chip {
	padding: 4px 10px;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-pill);
	font-size: 12px;
	color: var(--hs-text-2);
	white-space: nowrap;
}

.hs-badge {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--hs-blue-soft);
	color: var(--hs-blue-40);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
}

.hs-dotsq {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	margin-right: 6px;
	flex: none;
}

.hs-pos { color: var(--hs-pos); }

/* --------------------------------------------------------------------------
   Pannelli dashboard, KPI, grafici
   -------------------------------------------------------------------------- */

.hs-panel {
	background: var(--hs-panel);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-card);
	box-shadow: var(--hs-shadow-panel);
}

.hs-kpi {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hs-kpi__num {
	font-family: 'Plus Jakarta Sans ExtraBold', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(28px, 3vw, 40px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--hs-text);
	font-variant-numeric: tabular-nums;
}

.hs-kpi__lab {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	color: var(--hs-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hs-kpi__delta {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	color: var(--hs-pos);
}

.hs-grid line {
	stroke: rgba(255, 255, 255, 0.05);
	stroke-width: 1;
}

.hs-line {
	fill: none;
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.hs-baseline {
	fill: none;
	stroke: var(--hs-text-3);
	stroke-width: 1;
	stroke-dasharray: 4 6;
	opacity: 0.6;
}

.hs-area {
	opacity: 0;
	transition: opacity 500ms var(--hs-ease) 900ms;
}

[data-chart].is-drawn .hs-area {
	opacity: 1;
}

.hs-dot {
	fill: var(--hs-d1);
	opacity: 0;
	transform-origin: center;
	transition: opacity 150ms var(--hs-ease) 1200ms;
}

.hs-dot-halo {
	fill: rgba(3, 101, 250, 0.3);
	opacity: 0;
	transition: opacity 300ms var(--hs-ease) 1250ms;
}

[data-chart].is-drawn .hs-dot,
[data-chart].is-drawn .hs-dot-halo {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Reveal system
   -------------------------------------------------------------------------- */

/* Visibile di default; nascosto solo quando il JS (classe hs-js) è partito:
   sotto il delay-JS di Rocket lo script gira alla prima interazione e senza
   guardia le sezioni restavano invisibili al reload (bug 04-08). */
[data-reveal] {
	transition: opacity var(--hs-dur-3) var(--hs-ease), transform var(--hs-dur-3) var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 80ms);
}

.hs-js [data-reveal]:not(.is-in) {
	opacity: 0;
	transform: translateY(14px);
}

[data-reveal].is-in {
	opacity: 1;
	/* none (non translateY(0)): un transform attivo creerebbe uno stacking
	   context che isola il mix-blend-mode dei loghi clienti */
	transform: none;
}

/* Load-in del hero (senza observer) */
.hs-load {
	opacity: 0;
	transform: translateY(12px);
	animation: hs-load-in var(--hs-dur-3) var(--hs-ease) forwards;
	animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

@keyframes hs-load-in {
	to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   S1 · Hero + SERRA Console
   -------------------------------------------------------------------------- */

.hs-hero {
	border-top: 0 !important;
	background: radial-gradient(1200px 480px at 50% -10%, rgba(3, 101, 250, 0.22), transparent 70%);
	padding-top: 96px !important;
	padding-bottom: 0 !important;
	overflow: hidden;
	text-align: center;
}

.hs-hero__inner {
	max-width: 900px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.hs-hero .hs-h1 {
	/* call 01-09: 16ch spezzava "Trasformiamo le ricerche" — il titolo nuovo
	   usa tutta la colonna (900px), le righe le decide il markup */
	max-width: none;
}

.hs-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* Console */
.hs-console {
	position: relative;
	width: min(1160px, 100%);
	margin: 64px auto -220px;
	background: var(--hs-panel);
	border: 1px solid var(--hs-line-strong);
	border-radius: var(--hs-r-card);
	box-shadow: var(--hs-shadow-panel);
	text-align: left;
}

.hs-console__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-height: 44px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-console__dots {
	display: inline-flex;
	gap: 5px;
}

.hs-console__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2a2d36;
}

.hs-console__title {
	flex: 1;
	text-align: center;
	font-size: 13px;
	color: var(--hs-text-2);
}

.hs-console__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hs-console__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 20px 24px;
}

/* Corpo console: sidebar · main · colonna monitor (command center) */
.hs-console__body {
	display: grid;
	grid-template-columns: 156px 1fr 208px;
}

.hs-console__side {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 10px;
	border-right: 1px solid var(--hs-line);
}

.hs-console__navitem {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12.5px;
	color: var(--hs-text-3);
}

.hs-console__navitem svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	flex: none;
}

.hs-console__navitem--active {
	background: rgba(255, 255, 255, 0.06);
	color: var(--hs-text);
}

.hs-console__navitem--active svg {
	stroke: var(--hs-blue-40);
}

.hs-console__main {
	min-width: 0;
}

.hs-console__aside {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 16px;
	border-left: 1px solid var(--hs-line);
}

.hs-console__aside .hs-tiny {
	margin: 6px 0 4px;
	font-size: 10.5px;
}

.hs-monitor-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: 7px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	color: var(--hs-text-2);
}

.hs-monitor-row .hs-pill {
	padding: 2px 8px;
	font-size: 10.5px;
}

.hs-pill--idle {
	background: rgba(255, 255, 255, 0.06);
	color: var(--hs-text-3);
}

.hs-pill--live i {
	animation: hs-pulse-dot 1.8s ease-in-out infinite;
}

@keyframes hs-pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.hs-console__chart {
	position: relative;
	padding: 8px 16px 20px;
}

.hs-console__chart svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 960 / 300;
}

.hs-console__ylabels {
	position: absolute;
	top: 16px;
	bottom: 34px;
	left: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 11px;
	color: var(--hs-text-3);
	pointer-events: none;
}

.hs-console__tooltip {
	position: absolute;
	right: 18px;
	top: -6px;
	padding: 5px 10px;
	border-radius: var(--hs-r-pill);
	background: #191d27;
	border: 1px solid var(--hs-line-strong);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	color: var(--hs-text);
}

/* --------------------------------------------------------------------------
   S2 · Loghi clienti
   -------------------------------------------------------------------------- */

.hs-clients {
	background: var(--hs-canvas-2);
	padding-top: 72px !important;
	padding-bottom: 72px !important;
}

.hs-clients__title {
	text-align: center;
	font-size: 16px;
	color: var(--hs-text-2);
	margin-bottom: 44px;
}

.hs-clients__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}

.hs-clients__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	opacity: 0;
	transition: opacity 500ms var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 40ms);
}

[data-reveal].is-in .hs-clients__cell {
	opacity: 1;
}

.hs-clients__cell img {
	max-height: 40px;
	max-width: 100%;
	width: auto;
	filter: grayscale(1) invert(1) brightness(1.6) contrast(1.05);
	mix-blend-mode: screen;
	opacity: 0.7;
	transition: opacity var(--hs-dur-1) var(--hs-ease);
}

.hs-clients__cell img:hover {
	opacity: 1;
}

/* LAE: il marchio è un lockup orizzontale con due righe di testo minuto,
   a 40px risultava molto più piccolo degli altri a parità di altezza.
   La cella è flex senza overflow nascosto, quindi può sforare in altezza. */
.hs-clients__cell img[alt*="LAE"] {
	max-height: 58px;
}

/* Ultimo logo rimasto solo sulla sua riga (13 loghi su 6 colonne): senza
   questa regola resta appeso a sinistra come se fosse un errore. Occupa
   l'intera riga e la cella — già flex con justify-content:center — lo
   centra. Vale per ogni numero di colonne: 13 lascia 1 orfano a 6, 4 e 3. */
.hs-clients__cell:last-child:nth-child(6n + 1) {
	grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   S3 · Manifesto
   -------------------------------------------------------------------------- */

.hs-manifesto {
	background: radial-gradient(900px 420px at 10% -10%, rgba(3, 101, 250, 0.15), transparent 70%);
}

.hs-manifesto .hs-h2 {
	max-width: 20ch;
}

.hs-clipline {
	display: inline-block;
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--hs-dur-3) var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 120ms);
}

[data-reveal].is-in .hs-clipline {
	clip-path: inset(0 0 -8% 0);
}

.hs-clipline--dim {
	color: var(--hs-text-2);
}

.hs-manifesto .hs-body {
	max-width: 60ch;
	margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Feature rows (S4/S5/S6)
   -------------------------------------------------------------------------- */

.hs-row {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: 0;
}

.hs-row__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	padding-right: 40px;
}

.hs-row__copy .hs-btn {
	margin-top: 8px;
}

.hs-row__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	padding: calc(var(--hs-sec-pad) + 24px) 0 calc(var(--hs-sec-pad) + 24px) 40px;
	/* corre da hairline a hairline, come le verticali interne di Profound */
	margin-block: calc(-1 * var(--hs-sec-pad));
	border-left: 1px dashed var(--hs-line-dash);
	background:
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hs-canvas-2);
}

/* Tinte per-row: un glow radiale legato al colore della serie dati raccontata */
.hs-row--blue .hs-row__visual {
	background:
		radial-gradient(620px 420px at 72% 32%, rgba(3, 101, 250, 0.18), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hs-canvas-2);
}

.hs-row--violet .hs-row__visual {
	background:
		radial-gradient(620px 420px at 68% 40%, rgba(139, 92, 246, 0.17), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hs-canvas-2);
}

.hs-row--green .hs-row__visual {
	background:
		radial-gradient(620px 420px at 70% 35%, rgba(16, 185, 129, 0.15), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hs-canvas-2);
}

/* S4 · Ricerca */
.hs-search {
	width: min(520px, 100%);
	padding: 28px;
}

.hs-search__title {
	text-align: center;
	font-size: 18px;
	color: var(--hs-text-2);
	margin-bottom: 18px;
}

.hs-search__input {
	display: flex;
	align-items: center;
	padding: 12px 12px 12px 16px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-row);
	margin-bottom: 20px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
}

.hs-caret {
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	background: var(--hs-blue);
	animation: hs-blink 1s steps(1) infinite;
}

@keyframes hs-blink {
	50% { opacity: 0; }
}

.hs-search__btn {
	margin-left: auto;
	padding: 8px 16px;
	border-radius: var(--hs-r-pill);
	background: #fff;
	color: #08090c;
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	text-decoration: none;
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

a.hs-search__btn:hover {
	color: #08090c;
	transform: translateY(-1px);
}

.hs-search__rows {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.hs-search__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-row);
	font-size: 14px;
	color: var(--hs-text-2);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--hs-dur-2) var(--hs-ease), transform var(--hs-dur-2) var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 140ms + 500ms);
}

[data-reveal].is-in .hs-search__row,
.hs-search__rows.is-in .hs-search__row {
	opacity: 1;
	transform: translateY(0);
}

.hs-search__row--first {
	border-color: var(--hs-line-strong);
}

.hs-search__row strong {
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-weight: normal;
}

.hs-search__row span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* S5 · Growth */
.hs-growth {
	width: min(640px, 100%);
	padding: 24px;
}

.hs-growth__kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding-bottom: 18px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-growth__kpis .hs-kpi__num {
	font-size: clamp(20px, 2vw, 28px);
}

.hs-growth__kpis .hs-kpi__lab {
	white-space: normal;
	font-size: 12px;
	line-height: 1.35;
	/* riserva sempre 2 righe: i delta sotto restano su un'unica baseline */
	min-height: calc(2 * 1.35em);
	align-items: flex-start;
}

.hs-growth__chart {
	position: relative;
}

.hs-growth__chart svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 720 / 320;
}

.hs-growth__xlabels {
	display: flex;
	justify-content: space-between;
	padding: 4px 6% 0;
	font-size: 11px;
	color: var(--hs-text-3);
}

.hs-growth .hs-caption {
	margin-top: 14px;
}

/* S6 · Pipeline */
.hs-pipeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(420px, 100%);
}

.hs-node {
	position: relative;
	width: 100%;
	padding: 16px 18px;
	background: var(--hs-panel);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-card);
	transition: border-color var(--hs-dur-2) var(--hs-ease);
}

.hs-node.is-running {
	border-color: rgba(16, 185, 129, 0.5);
}

.hs-node .hs-pill--done {
	position: absolute;
	top: -12px;
	right: 14px;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--hs-dur-1) var(--hs-ease), transform var(--hs-dur-1) var(--hs-ease);
}

.hs-node.is-done .hs-pill--done {
	opacity: 1;
	transform: scale(1);
}

.hs-node__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	color: var(--hs-text);
}

.hs-node__head svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--hs-blue-40);
	stroke-width: 1.5;
	flex: none;
}

.hs-node__out {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 12px;
	background: var(--hs-panel-2);
	border-radius: var(--hs-r-row);
	font-size: 12px;
	color: var(--hs-text-3);
}

.hs-pipeline__link {
	position: relative;
	width: 1px;
	height: 28px;
	background: var(--hs-line-strong);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 250ms var(--hs-ease);
}

.hs-pipeline__link.is-done {
	transform: scaleY(1);
}

.hs-pipeline__link i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line-strong);
	color: var(--hs-text-3);
	font-style: normal;
	font-size: 11px;
	line-height: 14px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   S8 · Contatori + press
   -------------------------------------------------------------------------- */

.hs-stats {
	padding-block: 0 !important;
	background: radial-gradient(860px 340px at 50% -8%, rgba(250, 147, 41, 0.10), transparent 70%);
}

/* Card risultati stile reboot (call 28-07): logo cliente grande in alto,
   numero protagonista, card intera cliccabile dove esiste un caso studio. */
.hs-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding: 72px var(--hs-gutter, 32px) 64px;
}

.hs-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 26px 26px;
	background: var(--hs-panel);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-card);
	text-decoration: none;
	transition: transform var(--hs-dur-1) var(--hs-ease), border-color var(--hs-dur-1) var(--hs-ease), background var(--hs-dur-1) var(--hs-ease);
}

a.hs-stat:hover,
a.hs-stat:focus-visible {
	transform: translateY(-4px);
	border-color: var(--hs-line-strong);
	background: var(--hs-panel-2);
}

/* Riga-logo ad altezza fissa su TUTTE le card così i numeri restano
   allineati. Stesso trattamento monocromo della parete clienti. */
.hs-stat__logorow {
	display: flex;
	align-items: center;
	height: 64px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--hs-line);
	padding-bottom: 14px;
	box-sizing: content-box;
}

.hs-stat__logo {
	display: block;
	max-height: 46px;
	max-width: 82%;
	width: auto;
	filter: grayscale(1) invert(1) brightness(1.6) contrast(1.05);
	mix-blend-mode: screen;
	opacity: 0.9;
	transition: opacity var(--hs-dur-1) var(--hs-ease);
}

/* LAE e Fast Private Jet: lockup orizzontali a testo minuto, vanno più alti. */
.hs-stat__logo--wide {
	max-height: 60px;
	max-width: 92%;
}

/* Logo SERRA: già bianco, niente inversione. */
.hs-stat__logo--plain {
	filter: none;
	mix-blend-mode: normal;
	max-height: 30px;
	opacity: 0.85;
}

a.hs-stat:hover .hs-stat__logo,
a.hs-stat:focus-visible .hs-stat__logo {
	opacity: 1;
}

.hs-stat__num {
	font-family: 'Plus Jakarta Sans ExtraBold', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(38px, 3.6vw, 54px);
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--hs-text);
	font-variant-numeric: tabular-nums;
}

.hs-stat__lab {
	font-size: 14px;
	color: var(--hs-text-2);
}

.hs-stat__src {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12px;
	color: var(--hs-text-3);
}

.hs-stat__more {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	color: var(--hs-blue-40);
}

.hs-stat__more span {
	display: inline-block;
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

a.hs-stat:hover .hs-stat__more span,
a.hs-stat:focus-visible .hs-stat__more span {
	transform: translateX(4px);
}

.hs-press {
	border-top: 1px solid var(--hs-line);
	padding: 48px 32px 64px;
	text-align: center;
}

.hs-press__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin: 28px 0;
}

.hs-press__logos img {
	height: 26px;
	width: auto;
	opacity: 0;
	transition: opacity 500ms var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 60ms);
}

[data-reveal].is-in .hs-press__logos img {
	opacity: 0.65;
}

[data-reveal].is-in .hs-press__logos img:hover {
	opacity: 1;
}

/* pareggio del peso ottico: i lockup compatti/verticali salgono di corpo */
.hs-press__logos img[alt="Le Iene"] {
	height: 44px;
}

.hs-press__logos img[alt="Università di Cagliari"] {
	height: 36px;
}

.hs-press__quote {
	font-size: 15px;
	color: var(--hs-text-2);
}

/* --------------------------------------------------------------------------
   S9 · Casi studio
   -------------------------------------------------------------------------- */

.hs-cases {
	background: radial-gradient(760px 440px at 90% 4%, rgba(250, 147, 41, 0.11), transparent 70%);
}

.hs-cases__head {
	max-width: 640px;
	margin-bottom: 48px;
	display: grid;
	gap: 14px;
}

.hs-cases__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--hs-line);
}

.hs-case {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 280px;
	padding: 40px;
	color: var(--hs-text);
	text-decoration: none;
	transition: background var(--hs-dur-1) var(--hs-ease);
}

.hs-case:nth-child(2),
.hs-case:nth-child(4) {
	border-left: 1px solid var(--hs-line);
}

.hs-case:nth-child(3),
.hs-case:nth-child(4) {
	border-top: 1px solid var(--hs-line);
}

/* hover PERCEPIBILE (03-09, Giuseppe: "non si capisce che sono cliccabili"):
   anello blu interno, velo che si accende dal basso-destra, numero che
   cresce, chip freccia che si riempie di blu e scatta */
.hs-case:hover {
	background:
		radial-gradient(120% 90% at 85% 92%, rgba(3, 101, 250, 0.16), transparent 55%),
		#10141d;
	box-shadow: inset 0 0 0 1px rgba(77, 148, 255, 0.45);
	z-index: 1;
}

.hs-case__num {
	font-family: 'Plus Jakarta Sans ExtraBold', 'Plus Jakarta Sans', sans-serif;
	font-size: 40px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--hs-orange);
	font-variant-numeric: tabular-nums;
	transform-origin: left bottom;
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

.hs-case:hover .hs-case__num {
	transform: scale(1.06);
}

.hs-case__title {
	max-width: 34ch;
	font-size: 20px;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	line-height: 1.3;
	color: var(--hs-text);
}

/* la freccia È un bottone anche a riposo: chip circolare con hairline */
.hs-case__arrow {
	position: absolute;
	right: 28px;
	bottom: 24px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	color: var(--hs-text-3);
	font-size: 18px;
	transition: transform var(--hs-dur-1) var(--hs-ease), color var(--hs-dur-1) var(--hs-ease), background var(--hs-dur-1) var(--hs-ease), border-color var(--hs-dur-1) var(--hs-ease), box-shadow var(--hs-dur-1) var(--hs-ease);
}

.hs-case:hover .hs-case__arrow {
	background: var(--hs-blue);
	border-color: var(--hs-blue);
	color: #fff;
	transform: translateX(6px);
	box-shadow: 0 8px 22px rgba(3, 101, 250, 0.45);
}

/* --------------------------------------------------------------------------
   S10 · Big quote
   -------------------------------------------------------------------------- */

.hs-quote {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding-block: 0 !important;
}

.hs-quote__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 40px;
	/* verde come la curva ROI del pannello */
	background:
		radial-gradient(560px 380px at 50% 42%, rgba(16, 185, 129, 0.14), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hs-canvas-2);
}

.hs-roi {
	width: min(420px, 100%);
	padding: 24px;
	display: grid;
	gap: 12px;
}

.hs-roi__chart svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 400 / 220;
}

.hs-roi__xlabels {
	display: flex;
	justify-content: space-between;
	padding-top: 4px;
	font-size: 11px;
	color: var(--hs-text-3);
}

.hs-quote__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 64px;
	border-left: 1px solid var(--hs-line);
}

.hs-quote__text {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(20px, 1.9vw, 24px);
	line-height: 1.45;
	color: var(--hs-text);
	/* il tema mette i blockquote in italic: qui sarebbe un faux-italic */
	font-style: normal;
}

.hs-quote__who {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--hs-text-2);
}

.hs-quote__who img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.hs-quote__who strong {
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-weight: normal;
}

/* --------------------------------------------------------------------------
   S11 · Video + quote
   -------------------------------------------------------------------------- */

.hs-videos__head {
	max-width: 640px;
	margin-bottom: 48px;
	display: grid;
	gap: 14px;
}

.hs-videos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.hs-videocard figcaption {
	display: grid;
	gap: 2px;
	padding-top: 12px;
}

.hs-videocard strong {
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	font-weight: normal;
	font-size: 15px;
	color: var(--hs-text);
}

.hs-videocard span {
	font-size: 13px;
	color: var(--hs-text-2);
}

.hs-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--hs-r-card);
	overflow: hidden;
	background: var(--hs-panel);
	border: 1px solid var(--hs-line);
	cursor: pointer;
}

.hs-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hs-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 40%, rgba(8, 9, 12, 0.85));
}

.hs-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

.hs-video:hover .hs-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.hs-video__play svg {
	width: 22px;
	height: 22px;
	fill: #08090c;
	margin-left: 2px;
}

.hs-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hs-video.is-playing::after {
	display: none;
}

.hs-quotes3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 48px;
	border: 1px solid var(--hs-line);
}

.hs-quotecard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border-left: 1px solid var(--hs-line);
}

/* le stelline: la card si legge come RECENSIONE al primo sguardo
   (specificità: .hs-quotecard span altrimenti le ingrigisce) */
.hs-quotecard span.hs-quotecard__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--hs-orange);
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.hs-quotecard p {
	flex: 1;
}

.hs-quotecard__who {
	position: relative;
	padding-left: 18px;
}

.hs-quotecard__who::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 2px;
	background: var(--hs-orange);
}

.hs-quotecard:first-child {
	border-left: 0;
}

.hs-quotecard p {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: var(--hs-text);
}

.hs-quotecard span {
	font-size: 13px;
	color: var(--hs-text-3);
}

/* --------------------------------------------------------------------------
   S12 · GEO Score
   -------------------------------------------------------------------------- */

.hs-geo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.hs-geo__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding-right: 48px;
}

.hs-geo__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(420px, 100%);
	margin-top: 10px;
}

.hs-geo__form input {
	width: 100%;
	padding: 12px 18px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-pill);
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Regular', 'Plus Jakarta Sans', sans-serif;
	font-size: 15px;
}

.hs-geo__form input::placeholder {
	color: var(--hs-text-3);
}

.hs-geo__form .hs-btn {
	align-self: flex-start;
}

.hs-geo__error {
	display: none;
	margin-top: 6px;
	font-size: 13px;
	color: var(--hs-neg);
}

.hs-geo__error.is-visible {
	display: block;
}

/* --- Runner GEO Score live (sostituisce il pannello demo durante l'analisi) */

/* durante l'analisi i cursori decorativi lasciano spazio ai risultati */
.hs-geo__visual.is-running .hs-cursor {
	display: none;
}

.hs-geo-run {
	display: none;
	width: min(460px, 100%);
	padding: 20px;
	flex-direction: column;
	gap: 12px;
	max-height: 560px;
}

.hs-geo-run.is-active {
	display: flex;
}

.hs-geo-run__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-geo-run__domain {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	color: var(--hs-text-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hs-geo-run__score {
	font-family: 'Plus Jakarta Sans ExtraBold', 'Plus Jakarta Sans', sans-serif;
	font-size: 30px;
	line-height: 1;
	color: var(--hs-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hs-geo-run__score small {
	font-size: 15px;
	color: var(--hs-text-3);
}

.hs-geo-run__phase {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hs-blue-40);
	min-height: 1.4em;
}

.hs-geo-run__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

.hs-geo-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-row);
	animation: hs-load-in 300ms var(--hs-ease);
}

.hs-geo-check__dot {
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
}

.hs-geo-check--good .hs-geo-check__dot { background: var(--hs-pos); }
.hs-geo-check--warn .hs-geo-check__dot { background: var(--hs-orange); }
.hs-geo-check--bad .hs-geo-check__dot { background: var(--hs-neg); }

.hs-geo-check__name {
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	color: var(--hs-text);
}

.hs-geo-check__msg {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--hs-text-2);
}

.hs-geo-run__foot {
	padding-top: 10px;
	border-top: 1px solid var(--hs-line);
	font-size: 13px;
	color: var(--hs-text-2);
}

.hs-geo-run__foot a {
	color: var(--hs-blue-40);
	text-decoration: none;
}

.hs-geo-run__foot a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hs-geo__more {
	display: inline-block;
	padding-block: 12px;
	font-size: 14px;
	color: var(--hs-blue-40);
	text-decoration: none;
}

.hs-geo__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hs-geo__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	padding: calc(var(--hs-sec-pad) + 24px) 0 calc(var(--hs-sec-pad) + 24px) 48px;
	margin-block: calc(-1 * var(--hs-sec-pad));
	border-left: 1px dashed var(--hs-line-dash);
	background: radial-gradient(620px 440px at 55% 45%, rgba(3, 101, 250, 0.17), transparent 70%);
}

/* Wrapper del pannello demo: i cursori sono ancorati QUI (non al contenitore
   di sezione, molto più alto del pannello) */
.hs-ai-wrap {
	position: relative;
	width: min(460px, 100%);
}

.hs-ai {
	width: 100%;
	padding: 24px;
	display: grid;
	gap: 16px;
}

.hs-ai__q {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: var(--hs-panel-2);
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-r-row);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	min-height: 46px;
}

.hs-ai__a {
	display: grid;
	gap: 12px;
}

.hs-ai__block {
	font-size: 14px;
	line-height: 1.6;
	color: var(--hs-text-2);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 400ms var(--hs-ease), transform 400ms var(--hs-ease);
	transition-delay: calc(var(--i, 0) * 300ms + 400ms);
}

.hs-ai.is-in .hs-ai__block {
	opacity: 1;
	transform: translateY(0);
}

.hs-ai__brand {
	padding: 1px 7px;
	border-radius: 6px;
	background: var(--hs-blue-soft);
	color: var(--hs-blue-40);
	font-family: 'Plus Jakarta Sans Bold', 'Plus Jakarta Sans', sans-serif;
	white-space: nowrap;
}

.hs-ai__brand sup {
	font-size: 9px;
}

.hs-ai__foot {
	display: flex;
	justify-content: flex-end;
}

/* Cursori Figma */
.hs-cursor {
	position: absolute;
	display: inline-flex;
	align-items: flex-start;
	gap: 2px;
	pointer-events: none;
	z-index: 3;
}

.hs-cursor svg {
	width: 16px;
	height: 16px;
}

.hs-cursor span {
	margin-top: 12px;
	padding: 4px 10px;
	border-radius: var(--hs-r-pill);
	background: #12151d;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	white-space: nowrap;
}

.hs-cursor--1 { top: -34px; right: -18px; color: var(--hs-blue); }
.hs-cursor--1 svg { fill: var(--hs-blue); }
.hs-cursor--1 span { border: 1px solid var(--hs-blue); color: var(--hs-blue-40); }

.hs-cursor--2 { bottom: -48px; left: 12px; color: var(--hs-orange); }
.hs-cursor--2 svg { fill: var(--hs-orange); }
.hs-cursor--2 span { border: 1px solid var(--hs-orange); color: var(--hs-orange); }

.hs-cursor--3 { bottom: -52px; right: 12px; color: var(--hs-d3); }
.hs-cursor--3 svg { fill: var(--hs-d3); }
.hs-cursor--3 span { border: 1px solid var(--hs-d3); color: var(--hs-d3); }

[data-cursors].is-live .hs-cursor--1 { animation: hs-float-a 7s ease-in-out infinite alternate; }
[data-cursors].is-live .hs-cursor--2 { animation: hs-float-b 9s ease-in-out infinite alternate; animation-delay: 600ms; }
[data-cursors].is-live .hs-cursor--3 { animation: hs-float-c 11s ease-in-out infinite alternate; animation-delay: 1200ms; }

@keyframes hs-float-a {
	from { transform: translate(0, 0); }
	to { transform: translate(-24px, 16px); }
}

@keyframes hs-float-b {
	from { transform: translate(0, 0); }
	to { transform: translate(24px, -14px); }
}

@keyframes hs-float-c {
	from { transform: translate(0, 0); }
	to { transform: translate(-8px, -10px); }
}

/* --------------------------------------------------------------------------
   S13 · Servizi
   -------------------------------------------------------------------------- */

.hs-services {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.hs-services > .hs-eyebrow {
	padding: 0 var(--hs-pad-x) 20px;
}

.hs-service {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px var(--hs-pad-x);
	border-top: 1px solid var(--hs-line);
	color: var(--hs-text);
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 22px;
	text-decoration: none;
	transition: background var(--hs-dur-1) var(--hs-ease);
}

.hs-service:last-child {
	border-bottom: 1px solid var(--hs-line);
}

.hs-service:hover {
	background: #0c0e14;
	color: var(--hs-text);
}

.hs-service__arrow {
	color: var(--hs-text-3);
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

.hs-service:hover .hs-service__arrow {
	transform: translateX(6px);
	color: var(--hs-text);
}

/* --------------------------------------------------------------------------
   S14 · FAQ
   -------------------------------------------------------------------------- */

.hs-faq__head {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
	display: grid;
	gap: 14px;
}

.hs-faq__list {
	max-width: 760px;
	margin: 0 auto;
}

.hs-faq__list details {
	border-bottom: 1px solid var(--hs-line);
}

.hs-faq__list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	cursor: pointer;
	list-style: none;
	font-family: 'Plus Jakarta Sans Medium', 'Plus Jakarta Sans', sans-serif;
	font-size: 18px;
	color: var(--hs-text);
}

.hs-faq__list summary::-webkit-details-marker {
	display: none;
}

.hs-faq__plus {
	flex: none;
	color: var(--hs-text-3);
	font-size: 22px;
	line-height: 1;
	transition: transform var(--hs-dur-1) var(--hs-ease);
}

.hs-faq__list details[open] .hs-faq__plus {
	transform: rotate(45deg);
	color: var(--hs-blue-40);
}

.hs-faq__list details p {
	padding: 0 4px 24px;
	max-width: 64ch;
	font-size: 16px;
	color: var(--hs-text-2);
}

/* --------------------------------------------------------------------------
   S15 · Closing
   -------------------------------------------------------------------------- */

.hs-closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	background:
		radial-gradient(900px 400px at 50% 110%, rgba(3, 101, 250, 0.30), transparent),
		radial-gradient(640px 300px at 12% 12%, rgba(139, 92, 246, 0.12), transparent 70%);
	animation: hs-pulse 6s ease-in-out infinite alternate;
}

@keyframes hs-pulse {
	from { background-size: 100% 100%; }
	to { background-size: 118% 118%; }
}

.hs-closing__title {
	max-width: 16ch;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
	.hs-row,
	.hs-geo,
	.hs-quote {
		grid-template-columns: 1fr;
	}

	.hs-row__copy,
	.hs-geo__copy {
		padding-right: 0;
		padding-bottom: 40px;
	}

	.hs-row__visual,
	.hs-geo__visual {
		border-left: 0;
		border-top: 1px dashed var(--hs-line-dash);
		padding-left: 0;
		padding-top: 40px;
	}

	.hs-quote__copy {
		border-left: 0;
		border-top: 1px solid var(--hs-line);
		padding: 48px 32px;
	}

	.hs-quote__visual {
		padding: 48px 32px;
	}

	.hs-row__visual,
	.hs-geo__visual {
		margin-block: 0;
		padding-top: 40px;
		padding-bottom: 0;
	}

	.hs-stats__grid {
		grid-template-columns: 1fr 1fr;
		padding-block: 56px 48px;
	}

	.hs-clients__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px;
	}

	.hs-clients__cell:last-child:nth-child(4n + 1) {
		grid-column: 1 / -1;
	}

	.hs-videos__grid {
		grid-template-columns: 1fr 1fr;
	}

	.hs-quotes3 {
		grid-template-columns: 1fr;
	}

	.hs-quotecard {
		border-left: 0;
		border-top: 1px solid var(--hs-line);
	}

	.hs-quotecard:first-child {
		border-top: 0;
	}

	.hs-console {
		margin-bottom: -80px;
	}

	.hs-console__body {
		grid-template-columns: 1fr 200px;
	}

	.hs-console__side {
		display: none;
	}
}

@media (max-width: 640px) {
	.hs {
		--hs-gutter: 20px;
	}

	/* le righe-domanda del pannello Question Research: su schermi stretti
	   domanda sopra e intento sotto, invece che affiancati a incastro */
	.hs-search__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.hs-hero {
		padding-top: 64px !important;
	}

	.hs-cta-row {
		width: 100%;
		flex-direction: column;
	}

	.hs-cta-row .hs-btn {
		width: 100%;
	}

	.hs-clients__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.hs-clients__cell:last-child:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	.hs-cases__grid {
		grid-template-columns: 1fr;
	}

	.hs-case {
		min-height: 0;
		border-left: 0 !important;
		border-top: 1px solid var(--hs-line);
	}

	.hs-case:first-child {
		border-top: 0;
	}

	.hs-videos__grid {
		grid-template-columns: 1fr;
	}

	.hs-stats__grid {
		grid-template-columns: 1fr;
		padding-block: 48px 40px;
	}

	.hs-stat {
		padding: 24px 22px 22px;
	}

	.hs-growth__kpis {
		grid-template-columns: 1fr 1fr;
	}

	.hs-service {
		padding: 20px;
		font-size: 18px;
	}

	.hs-services > .hs-eyebrow {
		padding: 0 20px 16px;
	}

	.hs-cursor {
		display: none;
	}

	/* console quasi intera: il taglio cade sotto il grafico, non sopra */
	.hs-console {
		margin-bottom: -24px;
	}

	.hs-console__kpis {
		gap: 18px;
		padding: 16px;
	}

	.hs-console__ylabels,
	.hs-console__tooltip,
	.hs-console__meta,
	.hs-console__aside {
		display: none;
	}

	.hs-console__body {
		grid-template-columns: 1fr;
	}

	/* il nowrap del glifo ✦ non deve tagliare i titoli stretti */
	.hs-h1__ai {
		white-space: normal;
	}

	.hs-closing__title {
		font-size: clamp(34px, 10.5vw, 92px);
	}

	.hs-quote__copy {
		padding: 40px 20px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion: tutto visibile subito, stati finali
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hs *,
	.hs *::before,
	.hs *::after {
		animation: none !important;
		transition: none !important;
	}

	.hs [data-reveal],
	.hs .hs-load,
	.hs .hs-clients__cell,
	.hs .hs-search__row,
	.hs .hs-ai__block,
	.hs .hs-press__logos img {
		opacity: 1 !important;
		transform: none !important;
	}

	.hs .hs-clipline {
		clip-path: none !important;
	}

	.hs .hs-line,
	.hs .hs-area,
	.hs .hs-dot,
	.hs .hs-dot-halo {
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
	}

	.hs .hs-node .hs-pill--done {
		opacity: 1 !important;
		transform: none !important;
	}

	.hs .hs-pipeline__link {
		transform: scaleY(1) !important;
	}

	.hs .hs-press__logos img {
		opacity: 0.65 !important;
	}
}


/* ==========================================================================
   Scrollytelling 3D (home3d.min.js): canvas fisso dietro tutta la pagina.
   La classe hs-3d arriva dal JS solo a WebGL avviato: senza, la home resta
   opaca com'era (fallback).
   ========================================================================== */
.hs3d-stage {
	position: fixed;
	inset: 0;
	z-index: -1;
}

body.hs-3d {
	background: #08090c;
}

body.hs-3d .site-content,
body.hs-3d .hs {
	background: transparent;
}


/* ==========================================================================
   Con il 3D attivo (body.hs-3d): stessa logica del vetro della scena anche
   sui pannelli delle sezioni — mai opachi del tutto, la scena si intravede
   dietro; le superfici-card prendono il blur da vetro smerigliato.
   ========================================================================== */
body.hs-3d .hs {
	--hs-panel: rgba(14, 17, 24, 0.82);
	--hs-canvas-2: rgba(11, 13, 18, 0.72);
}

body.hs-3d .hs-panel,
body.hs-3d .hs-console {
	backdrop-filter: blur(12px) saturate(1.12);
	-webkit-backdrop-filter: blur(12px) saturate(1.12);
}

/* hover delle case-card: velo, non lastra (col tocco blu del pacchetto hover) */
body.hs-3d .hs-case:hover {
	background:
		radial-gradient(120% 90% at 85% 92%, rgba(3, 101, 250, 0.2), transparent 55%),
		rgba(12, 14, 20, 0.86);
}

/* dove c'è TESTO lo sfondo non è mai completamente trasparente: velo di
   base sulle sezioni senza fondo proprio (la scena resta in trasparenza) */
body.hs-3d .hs-manifesto,
body.hs-3d .hs-row,
body.hs-3d .hs-stats,
body.hs-3d .hs-cases,
body.hs-3d .hs-quote,
body.hs-3d .hs-videos,
body.hs-3d .hs-geo,
body.hs-3d .hs-services,
body.hs-3d .hs-faq {
	background: rgba(8, 9, 12, 0.62);
}

/* la chiusura è il finale del racconto: velo più leggero, il flare passa */
body.hs-3d .hs-closing {
	background: rgba(8, 9, 12, 0.42);
}

/* rotazione scenari del pannello Question Research: uscita/entrata morbida
   delle domande (il testo viene sostituito a meta' transizione) */
.hs-search__row > span:first-child {
	transition: opacity 0.26s ease, transform 0.26s ease;
}

.hs-search__row > span.is-qswap {
	opacity: 0;
	transform: translateY(6px);
}