/* ==========================================================================
   PUBLYGOO — DESIGN SYSTEM
   Joomla 6 · Helix Ultimate · CSS puro (nessun preprocessore)
   --------------------------------------------------------------------------
   Palette: fucsia #C026D3 x arancio #F97316 su viola profondo #0D0D14.
   I nomi dei token sono volutamente identici a quelli del progetto Lovable,
   cosi' la conversione delle pagine e' una trasposizione diretta.

   Ordine di caricamento Helix:
     bootstrap.min.css -> template.css -> presets/default.css -> QUESTO FILE
   Quindi qui si vince su tutto senza bisogno di !important.

   INDICE
     1.  Token
     2.  Reset e base
     3.  Tipografia
     4.  Layout e container
     5.  Ponte verso Bootstrap 5
     6.  Bottoni
     7.  Superfici e card
     8.  Badge, eyebrow, pill
     9.  Header e navigazione
     10. Footer
     11. Effetti decorativi
     12. Animazioni e reveal allo scroll
     13. Accessibilita' e stampa
     14. Home — impaginazione da documento tecnico
   ========================================================================== */


/* ==========================================================================
   1. TOKEN
   ========================================================================== */

:root {
	/* --- Colori (HSL senza wrapper, per poter modulare l'alpha) ---------- */
	--background: 240 22% 6%;          /* #0D0D14 fondo pagina            */
	--foreground: 240 8% 96%;          /* #F5F5F7 testo principale        */

	--card: 240 17% 10%;               /* #15151F superficie card         */
	--card-foreground: 240 8% 96%;
	--popover: 240 17% 10%;
	--popover-foreground: 240 8% 96%;

	--secondary: 240 25% 14%;          /* #1C1C2E superficie elevata      */
	--secondary-foreground: 240 8% 96%;
	--muted: 240 25% 14%;
	--muted-foreground: 220 9% 65%;    /* #9CA3AF testo secondario        */

	--primary: 292 69% 49%;            /* #C026D3 fucsia                  */
	--primary-foreground: 240 8% 98%;
	--primary-glow: 292 80% 60%;

	--accent: 25 95% 53%;              /* #F97316 arancio                 */
	--accent-foreground: 240 22% 6%;
	--accent-glow: 25 95% 60%;

	--border: 240 19% 20%;             /* #2A2A3E bordi                   */
	--input: 240 19% 20%;
	--ring: 292 69% 49%;

	--destructive: 0 84% 60%;
	--destructive-foreground: 240 8% 98%;
	--warning: 35 95% 55%;
	--success: 145 65% 50%;

	/* --- Raggi ----------------------------------------------------------- */
	--radius: 0.75rem;
	--radius-sm: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-pill: 999px;

	/* --- Gradienti ------------------------------------------------------- */
	--gradient-primary: linear-gradient(135deg, hsl(292 69% 49%) 0%, hsl(25 95% 53%) 100%);
	--gradient-hero:
		radial-gradient(ellipse at top, hsl(292 69% 49% / .22), transparent 60%),
		radial-gradient(ellipse at bottom right, hsl(25 95% 53% / .15), transparent 60%);
	--gradient-mesh: conic-gradient(from 180deg at 50% 50%,
		hsl(292 69% 49% / .3), hsl(25 95% 53% / .3), hsl(292 69% 49% / .3));
	--gradient-card-border: linear-gradient(135deg, hsl(292 69% 49% / .6), hsl(25 95% 53% / .6));
	--gradient-text: linear-gradient(135deg, hsl(292 80% 65%), hsl(25 95% 60%));

	/* --- Ombre e bagliori ------------------------------------------------ */
	--shadow-glow-primary: 0 0 40px hsl(292 69% 49% / .35);
	--shadow-glow-accent: 0 0 40px hsl(25 95% 53% / .30);
	--shadow-elegant: 0 20px 60px -20px hsl(292 69% 49% / .45);
	--shadow-card: 0 4px 24px -8px hsl(240 22% 0% / .6);

	/* --- Transizioni ----------------------------------------------------- */
	--transition-smooth: .4s cubic-bezier(.22, 1, .36, 1);
	--transition-fast: .2s ease-out;

	/* --- Layout ---------------------------------------------------------- */
	--container-max: 1320px;
	--container-pad: 1.5rem;
	--section-py: 6rem;
	--section-py-lg: 8rem;

	/* --- Font ------------------------------------------------------------ */
	--font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

html {
	scroll-behavior: smooth;
	/* compensa l'header sticky quando si atterra su un'ancora */
	scroll-padding-top: 6rem;
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: var(--font-body);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Il taglio orizzontale delle aure sfocate lo fa gia' il default di Helix
   (body e .body-innerwrapper hanno overflow-x:hidden). NON lo si sovrascrive
   con "clip": sul body, "hidden" viene PROPAGATO al viewport (quindi non
   rompe position:sticky ne' forza la barra classica su Firefox), mentre
   "clip" rende il body stesso un contenitore e fa comparire la barra fissa.
   E' esattamente il comportamento di un Helix non modificato. */

.body-innerwrapper {
	background-color: hsl(var(--background));
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Il media che fa da sfondo e' posizionato e deve coprire il suo contenitore:
   height:auto del reset qui sopra lo lascerebbe alto quanto le sue proporzioni
   naturali, scoprendo il fondo. */
video[class*="pg-"],
.pg-close video,
.pg-hero video {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

hr {
	border-color: hsl(var(--border));
	opacity: 1;
}

::selection {
	background: hsl(var(--primary) / .4);
	color: hsl(var(--foreground));
}

/* Barra di scorrimento coerente col tema scuro.
   NB: scrollbar-width/color su Firefox disattivano la barra OVERLAY di macOS
   e la rendono classica SEMPRE visibile, che ruba 15px permanenti e rompe le
   sezioni a tutta larghezza. Li si applica quindi solo alle aree con scroll
   PROPRIO (offcanvas, blocchi che scorrono), mai al documento: la barra
   principale resta quella di sistema, come su un Helix non modificato. */
.offcanvas-menu .offcanvas-inner,
.pg-scroll {
	scrollbar-color: hsl(var(--border)) hsl(var(--background));
	scrollbar-width: thin;
}

/* Le regole ::-webkit-scrollbar col selettore NUDO si applicano al documento.
   Da Firefox 154 vengono ONORATE (non piu' solo da Chrome), e imporre una
   width alla barra la rende CLASSICA sempre visibile su macOS invece che
   overlay. Per questo si stilizza solo lo scroll PROPRIO (offcanvas,
   .pg-scroll), lasciando la barra principale a quella di sistema/overlay,
   come su un Helix non modificato. */
.offcanvas-menu .offcanvas-inner::-webkit-scrollbar,
.pg-scroll::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.offcanvas-menu .offcanvas-inner::-webkit-scrollbar-track,
.pg-scroll::-webkit-scrollbar-track {
	background: hsl(var(--background));
}

.offcanvas-menu .offcanvas-inner::-webkit-scrollbar-thumb,
.pg-scroll::-webkit-scrollbar-thumb {
	background: hsl(var(--border));
	border-radius: 8px;
}

.offcanvas-menu .offcanvas-inner::-webkit-scrollbar-thumb:hover,
.pg-scroll::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--primary) / .5);
}

/* Focus visibile e coerente su tutto il sito */
:focus-visible {
	outline: 2px solid hsl(var(--ring));
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}


/* ==========================================================================
   3. TIPOGRAFIA
   Le famiglie, i corpi e i pesi arrivano dai parametri Helix (che li stampa
   inline, quindi dopo questo file). Qui si regola solo cio' che Helix non
   espone: tracking, interlinea, colori, elementi di testo.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	color: hsl(var(--foreground));
	letter-spacing: -.025em;
	line-height: 1.1;
	margin-block-end: .5em;
}

h4, h5, h6 {
	line-height: 1.3;
	letter-spacing: -.01em;
}

p {
	line-height: 1.7;
	margin-block-end: 1rem;
}

a {
	color: hsl(var(--primary));
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: hsl(var(--accent));
}

strong, b {
	font-weight: 600;
	color: hsl(var(--foreground));
}

small {
	font-size: .875rem;
}

blockquote {
	/* Filetto da 1px: sopra questo spessore il bordo laterale colorato e' uno
	   dei difetti piu' riconoscibili delle interfacce generate. */
	border-inline-start: 1px solid hsl(var(--primary));
	padding: .25rem 0 .25rem 1.25rem;
	color: hsl(var(--muted-foreground));
	font-style: italic;
}

code, kbd, pre {
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-sm);
	color: hsl(var(--foreground));
	font-size: .875em;
}

code { padding: .15em .4em; }
pre  { padding: 1rem; overflow-x: auto; }
pre code { border: 0; padding: 0; }

/* --- Utility di testo ---------------------------------------------------- */

.pg-lead {
	font-size: 1.125rem;
	line-height: 1.7;
	color: hsl(var(--muted-foreground));
}

.pg-muted   { color: hsl(var(--muted-foreground)); }
.pg-fg      { color: hsl(var(--foreground)); }
.pg-primary { color: hsl(var(--primary)); }
.pg-accent  { color: hsl(var(--accent)); }

/* Titolo con riempimento a gradiente (usatissimo nelle hero) */
.text-gradient {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;

	/* Con background-clip:text i discendenti (g, q, p) che escono dal line-box
	   stretto non ricevono il gradiente e vengono tagliati. Si allarga il
	   riquadro del background verso il basso, compensando con margine negativo
	   per non alterare il flusso. */
	padding-block-end: .14em;
	margin-block-end: -.14em;
}

.pg-balance { text-wrap: balance; }


/* ==========================================================================
   4. LAYOUT E CONTAINER
   ========================================================================== */

.container,
.container-lg,
.container-xl,
.container-xxl {
	max-width: var(--container-max);
	padding-inline: var(--container-pad);
}

/* Sezione standard: respiro verticale coerente su tutto il sito */
.pg-section {
	position: relative;
	padding-block: var(--section-py);
	overflow: hidden;
}

.pg-section--lg { padding-block: var(--section-py-lg); }
.pg-section--sm { padding-block: 3.5rem; }
.pg-section--flush-top { padding-block-start: 0; }
.pg-section--flush-bottom { padding-block-end: 0; }

/* Fondo alternato per spezzare la pagina */
.pg-section--elevated { background: hsl(var(--card)); }

/* Aura fucsia/arancio dietro le sezioni hero */
.pg-section--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-hero);
	pointer-events: none;
	z-index: 0;
}

.pg-section > .container { position: relative; z-index: 1; }

/* Intestazione di sezione centrata */
.pg-section-head {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: 3.5rem;
	text-align: center;
}

.pg-section-head p {
	color: hsl(var(--muted-foreground));
	font-size: 1.0625rem;
	margin-block-end: 0;
}

/* Griglia fluida: si adatta senza media query */
.pg-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.pg-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

@media (max-width: 767.98px) {
	:root {
		--section-py: 3.5rem;
		--section-py-lg: 4.5rem;
		--container-pad: 1.25rem;
	}
	.pg-section-head { margin-block-end: 2.5rem; }
	.pg-section--sm { padding-block: 2.5rem; }
}


/* ==========================================================================
   5. PONTE VERSO BOOTSTRAP 5
   Helix carica Bootstrap 5.2: rimappando le sue variabili, i componenti
   nativi (form, tabelle, modali, alert, RSForm) ereditano il tema scuro
   senza doverli ristilizzare uno per uno.
   ========================================================================== */

:root {
	--bs-body-bg: hsl(var(--background));
	--bs-body-color: hsl(var(--foreground));
	--bs-body-font-family: var(--font-body);
	--bs-emphasis-color: hsl(var(--foreground));
	--bs-secondary-color: hsl(var(--muted-foreground));
	--bs-secondary-bg: hsl(var(--secondary));
	--bs-tertiary-bg: hsl(var(--card));
	--bs-border-color: hsl(var(--border));
	--bs-border-radius: var(--radius);
	--bs-link-color: hsl(var(--primary));
	--bs-link-hover-color: hsl(var(--accent));
	--bs-primary: #c026d3;
	--bs-primary-rgb: 192, 38, 211;
	--bs-heading-color: hsl(var(--foreground));
}

/* --- Campi form --------------------------------------------------------- */

.form-control,
.form-select,
input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="number"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="search"]:not(.form-control),
textarea:not(.form-control),
select:not(.form-control):not(.form-select) {
	background-color: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-sm);
	color: hsl(var(--foreground));
	padding: .7rem .9rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
	background-color: hsl(var(--secondary));
	border-color: hsl(var(--primary));
	box-shadow: 0 0 0 3px hsl(var(--primary) / .25);
	color: hsl(var(--foreground));
	outline: none;
}

::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }

select option { background-color: hsl(var(--card)); color: hsl(var(--foreground)); }

label,
.form-label,
.control-label {
	color: hsl(var(--foreground));
	font-weight: 500;
	margin-block-end: .4rem;
}

/* Il browser colora gli autofill di bianco: lo si neutralizza */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: hsl(var(--foreground));
	-webkit-box-shadow: 0 0 0 100px hsl(var(--secondary)) inset;
	caret-color: hsl(var(--foreground));
}

/* --- Tabelle ------------------------------------------------------------ */

.table {
	--bs-table-bg: transparent;
	--bs-table-color: hsl(var(--foreground));
	--bs-table-border-color: hsl(var(--border));
	--bs-table-striped-bg: hsl(var(--card));
	--bs-table-striped-color: hsl(var(--foreground));
	--bs-table-hover-bg: hsl(var(--secondary));
	--bs-table-hover-color: hsl(var(--foreground));
}

/* --- Modali, dropdown, alert -------------------------------------------- */

.modal-content,
.dropdown-menu {
	background-color: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	color: hsl(var(--foreground));
}

.modal-header,
.modal-footer { border-color: hsl(var(--border)); }

.dropdown-item { color: hsl(var(--muted-foreground)); }
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: hsl(var(--secondary));
	color: hsl(var(--foreground));
}

.alert {
	background-color: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	color: hsl(var(--foreground));
	border-radius: var(--radius);
}

/* Lo stato non lo porta un bordo laterale spesso, ma il filetto da 1px unito
   a una velatura del proprio colore: si legge prima e non e' un costume. */
.alert-success { background: hsl(var(--success) / .07);     border-color: hsl(var(--success) / .35);     border-inline-start: 1px solid hsl(var(--success)); }
.alert-danger  { background: hsl(var(--destructive) / .07); border-color: hsl(var(--destructive) / .35); border-inline-start: 1px solid hsl(var(--destructive)); }
.alert-warning { background: hsl(var(--warning) / .07);     border-color: hsl(var(--warning) / .35);     border-inline-start: 1px solid hsl(var(--warning)); }
.alert-info    { background: hsl(var(--primary) / .07);     border-color: hsl(var(--primary) / .35);     border-inline-start: 1px solid hsl(var(--primary)); }


/* ==========================================================================
   6. BOTTONI
   Riproduce le varianti del progetto Lovable: hero, gradient, ghostNeon,
   outline. Le classi Bootstrap piu' comuni sono agganciate a queste.
   ========================================================================== */

.pg-btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1;
	padding: .75rem 1.375rem;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            box-shadow var(--transition-smooth),
	            color var(--transition-fast),
	            transform var(--transition-smooth);
	white-space: nowrap;
}

.pg-btn:disabled,
.btn:disabled,
.pg-btn.disabled {
	opacity: .5;
	pointer-events: none;
}

/* --- Dimensioni --------------------------------------------------------- */

.pg-btn--sm { font-size: .875rem; padding: .55rem 1rem; }
.pg-btn--lg { font-size: 1rem; padding: .9rem 1.75rem; border-radius: var(--radius); }
.pg-btn--xl { font-size: 1.0625rem; font-weight: 600; padding: 1.075rem 2.25rem; border-radius: var(--radius); }
.pg-btn--block { display: flex; width: 100%; }

/* --- Varianti ----------------------------------------------------------- */

/* Piena fucsia con alone: la CTA principale */
.pg-btn--hero,
.btn-primary,
.sppb-btn-primary {
	background: hsl(var(--primary));
	background-clip: padding-box;
	border-color: hsl(var(--primary));
	box-shadow: 0 6px 20px -8px hsl(240 22% 0% / .8);
	color: hsl(var(--primary-foreground));
}

.pg-btn--hero:hover,
.pg-btn--hero:focus,
.btn-primary:hover,
.btn-primary:focus,
.sppb-btn-primary:hover {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	box-shadow: 0 12px 28px -10px hsl(240 22% 0% / .9);
	color: hsl(var(--primary-foreground));
	transform: translateY(-2px);
}

/* Gradiente fucsia -> arancio */
/* L'alone colorato e' decorazione, e l'utente ha riservato il bagliore alla
   sola CTA del Radar AI: qui resta un'ombra di profondita' vera, con scarto
   verticale e sfocatura morbida. Il glow lo porta solo .animate-pulse-glow. */
.pg-btn--gradient {
	background: var(--gradient-primary);
	/* Il bordo trasparente + clip border-box lascerebbe vedere il gradiente
	   sotto il bordo (fucsia in alto a sinistra, arancio in basso a destra):
	   fermando il background al padding-box il bordo torna davvero invisibile. */
	background-clip: padding-box;
	border-color: transparent;
	box-shadow: 0 6px 20px -8px hsl(240 22% 0% / .8);
	color: hsl(var(--primary-foreground));
}

.pg-btn--gradient:hover,
.pg-btn--gradient:focus {
	box-shadow: 0 12px 28px -10px hsl(240 22% 0% / .9);
	color: hsl(var(--primary-foreground));
	transform: translateY(-2px);
}

/* Contorno neutro che si accende di fucsia */
.pg-btn--ghost,
.btn-outline-primary,
.btn-secondary {
	background: transparent;
	border-color: hsl(var(--border));
	color: hsl(var(--foreground));
}

.pg-btn--ghost:hover,
.pg-btn--ghost:focus,
.btn-outline-primary:hover,
.btn-secondary:hover {
	background: transparent;
	border-color: hsl(var(--primary));
	box-shadow: 0 0 20px hsl(var(--primary) / .4);
	color: hsl(var(--primary));
}

/* Superficie piena, senza alone */
.pg-btn--soft {
	background: hsl(var(--secondary));
	border-color: hsl(var(--border));
	color: hsl(var(--foreground));
}

.pg-btn--soft:hover {
	background: hsl(var(--secondary));
	border-color: hsl(var(--primary) / .5);
	color: hsl(var(--foreground));
}

/* Solo testo */
.pg-btn--link {
	background: none;
	border: 0;
	color: hsl(var(--primary));
	padding-inline: 0;
}

.pg-btn--link:hover { color: hsl(var(--accent)); }

/* L'icona segue il movimento del bottone */
.pg-btn i,
.pg-btn svg { transition: transform var(--transition-fast); }
.pg-btn:hover > i.fa-arrow-right,
.pg-btn:hover > .pg-btn-arrow { transform: translateX(3px); }


/* ==========================================================================
   7. SUPERFICI E CARD
   ========================================================================== */

.pg-card {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	position: relative;
}

.pg-card--flat { box-shadow: none; }
.pg-card--pad-lg { padding: 2.5rem; }

/* Card con bordo a gradiente che compare in hover + sollevamento */
.card-glow {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
	will-change: transform;
}

.card-glow::before {
	background: var(--gradient-card-border);
	border-radius: inherit;
	content: "";
	inset: -1px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	padding: 1px;
	pointer-events: none;
	position: absolute;
	transition: opacity .3s ease;
}

.card-glow:hover::before { opacity: 1; }

.card-glow:hover {
	box-shadow: 0 20px 50px -20px hsl(var(--primary) / .35);
	transform: translateY(-4px);
}

/* Riquadro con bordo conico rotante (card strumento Radar AI) */
.radar-border {
	isolation: isolate;
	position: relative;
}

/* L'angolo del gradiente e' animabile solo se registrato come proprieta'
   tipizzata. Dove @property non c'e', il bordo resta un gradiente fisso:
   degrada bene e non sborda. */
@property --pg-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.radar-border::before {
	animation: pg-radar-spin 4s linear infinite;
	/* Si anima l'angolo, non una rotazione dello pseudo-elemento: ruotare un
	   rettangolo largo lo farebbe sporgere ben oltre la card. */
	background: conic-gradient(from var(--pg-angle), #c026d3, #f97316, #c026d3);
	border-radius: inherit;
	content: "";
	inset: -2px;
	position: absolute;
	z-index: -1;
}

.radar-border::after {
	background: hsl(var(--card));
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
	z-index: -1;
}

/* Riquadro con bordo statico a gradiente */
.pg-card--outlined {
	background:
		linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
		var(--gradient-card-border) border-box;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	padding: 1.75rem;
}

/* Icona quadrata in cima alle card */
.pg-icon-box {
	align-items: center;
	background: hsl(var(--primary) / .12);
	border: 1px solid hsl(var(--primary) / .25);
	border-radius: var(--radius);
	color: hsl(var(--primary));
	display: inline-flex;
	font-size: 1.25rem;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.pg-icon-box--accent {
	background: hsl(var(--accent) / .12);
	border-color: hsl(var(--accent) / .25);
	color: hsl(var(--accent));
}

.pg-icon-box--lg { font-size: 1.5rem; height: 3.75rem; width: 3.75rem; }


/* ==========================================================================
   8. BADGE, EYEBROW, PILL
   ========================================================================== */

.pg-badge {
	align-items: center;
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-pill);
	color: hsl(var(--muted-foreground));
	display: inline-flex;
	font-size: .8125rem;
	font-weight: 500;
	gap: .5rem;
	line-height: 1;
	padding: .5rem 1rem;
	white-space: nowrap;
}

.pg-badge--primary {
	background: hsl(var(--primary) / .12);
	border-color: hsl(var(--primary) / .3);
	color: hsl(var(--primary-glow));
}

.pg-badge--accent {
	background: hsl(var(--accent) / .12);
	border-color: hsl(var(--accent) / .3);
	color: hsl(var(--accent-glow));
}

/* Pallino colorato prima del testo (badge "Web agency italiana - dal 2012") */
.pg-badge--dot::before {
	background: hsl(var(--accent));
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: .4rem;
	width: .4rem;
}

/* NB: qui viveva .pg-eyebrow, l'occhiello sopra i titoli di sezione.
   Rimossa deliberatamente il 2026-08-20: e' uno dei segnali piu' riconoscibili
   di pagina generata automaticamente, e il titolo regge da solo. Non
   reintrodurla. Per marcare una sezione si usa .pg-head con il suo filetto. */


/* ==========================================================================
   9. HEADER E NAVIGAZIONE
   Al top l'header e' trasparente e si fonde con la hero; oltre la soglia
   Helix aggiunge .header-sticky e compare il vetro smerigliato.
   ========================================================================== */

#sp-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            backdrop-filter var(--transition-fast);
}

#sp-header.header-sticky {
	background: hsl(var(--background) / .75);
	-webkit-backdrop-filter: blur(20px);
	        backdrop-filter: blur(20px);
	border-bottom-color: hsl(var(--border));
	box-shadow: none;
}

/* Fallback: senza backdrop-filter serve un fondo pieno o il testo sparisce */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#sp-header.header-sticky { background: hsl(var(--background) / .97); }
}

.logo-image { transition: opacity var(--transition-fast); }

/* --- Megamenu ----------------------------------------------------------- */

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
	font-weight: 500;
	padding-inline: .9rem;
	position: relative;
	transition: color var(--transition-fast);
}

/* Sottolineatura fucsia sulla voce attiva */
.sp-megamenu-parent > li > a::after {
	background: var(--gradient-primary);
	border-radius: 2px;
	bottom: -.35rem;
	content: "";
	height: 2px;
	inset-inline: .9rem;
	opacity: 0;
	position: absolute;
	transform: scaleX(.4);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sp-megamenu-parent > li:hover > a::after,
.sp-megamenu-parent > li.active > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: .5rem;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
	border-radius: var(--radius-sm);
	padding: .55rem .75rem;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
	background: hsl(var(--secondary));
}

/* --- Offcanvas ---------------------------------------------------------- */

.offcanvas-menu {
	background: hsl(var(--background));
	border-inline-start: 1px solid hsl(var(--border));
}

.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span {
	border-bottom: 1px solid hsl(var(--border));
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 500;
	padding-block: .85rem;
}

#offcanvas-toggler > .fa,
#offcanvas-toggler > .fas,
#offcanvas-toggler > .far {
	font-size: 1.35rem;
	transition: color var(--transition-fast);
}

.burger-icon > span { background-color: hsl(var(--foreground)); }

/* --- Barra di avanzamento lettura --------------------------------------- */

.sp-reading-progress-bar { background: var(--gradient-primary); }

/* --- Torna su ----------------------------------------------------------- */

.sp-scroll-up {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	box-shadow: var(--shadow-card);
	color: hsl(var(--foreground));
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            transform var(--transition-fast);
}

.sp-scroll-up:hover {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	transform: translateY(-3px);
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

#sp-footer,
#sp-bottom {
	background: hsl(var(--background));
	border-top: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
}

#sp-bottom { border-top: 0; }

#sp-footer a,
#sp-bottom a {
	color: hsl(var(--muted-foreground));
	transition: color var(--transition-fast);
}

#sp-footer a:hover,
#sp-bottom a:hover {
	color: hsl(var(--foreground));
}

#sp-footer .sp-module-title,
#sp-bottom .sp-module-title {
	color: hsl(var(--foreground));
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	margin-block-end: 1rem;
	text-transform: uppercase;
}

#sp-bottom .sp-module ul > li > a { padding-block: .35rem; }


/* ==========================================================================
   11. EFFETTI DECORATIVI
   ========================================================================== */

/* Aura sfocata da posizionare dentro una sezione relative */
.blob {
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
	position: absolute;
	will-change: transform;
	z-index: 0;
}

.blob--primary { background: hsl(var(--primary) / .35); }
.blob--accent  { background: hsl(var(--accent) / .28); }

/* Reticolo tenue di sfondo */
.pg-grid-bg::before {
	background-image:
		linear-gradient(hsl(var(--border) / .35) 1px, transparent 1px),
		linear-gradient(90deg, hsl(var(--border) / .35) 1px, transparent 1px);
	background-size: 56px 56px;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
	        mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* Nastro scorrevole (loghi clienti, keyword) */
.marquee {
	display: flex;
	gap: 2rem;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	overflow: hidden;
	user-select: none;
}

.marquee-track {
	animation: pg-marquee 35s linear infinite;
	display: flex;
	flex-shrink: 0;
	gap: 2rem;
	min-width: 100%;
	will-change: transform;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee--slow .marquee-track { animation-duration: 55s; }
.marquee--reverse .marquee-track { animation-direction: reverse; }

/* Bagliori applicabili a qualsiasi elemento */
.glow-primary { box-shadow: var(--shadow-glow-primary); }
.glow-accent  { box-shadow: var(--shadow-glow-accent); }

/* Separatore sfumato */
.pg-divider {
	background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
	border: 0;
	height: 1px;
	margin-block: 3rem;
}


/* ==========================================================================
   12. ANIMAZIONI E REVEAL ALLO SCROLL
   I keyframes decorativi girano da soli. Le classi .pg-reveal partono
   inizialmente nascoste e vengono attivate da custom.js con un
   IntersectionObserver: nessuna libreria, nessun peso aggiuntivo.
   ========================================================================== */

@keyframes pg-radar-spin {
	to { --pg-angle: 360deg; }
}

@keyframes pg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@keyframes pg-blob-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-20px) scale(1.05); }
}

@keyframes pg-pulse-glow {
	0%, 100% { box-shadow: 0 0 30px hsl(var(--primary) / .4); transform: scale(1); }
	50%      { box-shadow: 0 0 60px hsl(var(--primary) / .7); transform: scale(1.05); }
}

@keyframes pg-border-pulse {
	0%, 100% { opacity: .6; }
	50%      { opacity: 1; }
}

@keyframes pg-spin {
	to { transform: rotate(360deg); }
}

.animate-blob       { animation: pg-blob-float 6s ease-in-out infinite; will-change: transform; }
.animate-pulse-glow { animation: pg-pulse-glow 3s ease-in-out infinite; will-change: transform; }
.animate-border-pulse { animation: pg-border-pulse 3s ease-in-out infinite; }

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

/* L'elemento parte nascosto solo se il JS e' vivo: custom.js marchia <html>
   con .pg-js come prima istruzione. Senza JS il contenuto resta visibile. */
.pg-js .pg-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity .7s cubic-bezier(.22, 1, .36, 1) var(--pg-delay, 0s),
		transform .7s cubic-bezier(.22, 1, .36, 1) var(--pg-delay, 0s);
	will-change: opacity, transform;
}

.pg-js .pg-reveal--left  { transform: translateX(-40px); }
.pg-js .pg-reveal--right { transform: translateX(40px); }
.pg-js .pg-reveal--zoom  { transform: scale(.94); }
.pg-js .pg-reveal--fade  { transform: none; }

.pg-js .pg-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Ritardi a cascata: si applicano ai figli diretti di un contenitore */
.pg-stagger > * { --pg-delay: 0s; }
.pg-stagger > *:nth-child(2) { --pg-delay: .08s; }
.pg-stagger > *:nth-child(3) { --pg-delay: .16s; }
.pg-stagger > *:nth-child(4) { --pg-delay: .24s; }
.pg-stagger > *:nth-child(5) { --pg-delay: .32s; }
.pg-stagger > *:nth-child(6) { --pg-delay: .40s; }
.pg-stagger > *:nth-child(7) { --pg-delay: .48s; }
.pg-stagger > *:nth-child(8) { --pg-delay: .56s; }

/* Ritardi espliciti */
.pg-delay-1 { --pg-delay: .1s; }
.pg-delay-2 { --pg-delay: .2s; }
.pg-delay-3 { --pg-delay: .3s; }
.pg-delay-4 { --pg-delay: .4s; }
.pg-delay-5 { --pg-delay: .5s; }

/* Rete di sicurezza: se per qualsiasi motivo l'observer non fa in tempo a
   marcare gli elementi, dopo il caricamento tutto torna visibile. */
.pg-js.pg-reveal-off .pg-reveal {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   13. ACCESSIBILITA' E STAMPA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}

	.pg-reveal {
		opacity: 1;
		transform: none;
	}

	.marquee-track,
	.radar-border::before {
		animation: none;
	}
}

.pg-sr-only {
	clip: rect(0, 0, 0, 0);
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media print {
	#sp-header,
	#sp-footer,
	.sp-scroll-up,
	.blob { display: none !important; }

	body {
		background: #fff !important;
		color: #000 !important;
	}
}


/* ==========================================================================
   14. HOME — impaginazione da documento tecnico
   --------------------------------------------------------------------------
   Il materiale strutturale qui e' il FILETTO da 1px, non la card. Le griglie
   condividono i separatori invece di essere rettangoli staccati con ombra:
   e' la differenza tra una pagina impaginata e una pila di contenitori.
   ========================================================================== */

/* --- Fuori container -----------------------------------------------------
   In Joomla il contenuto dell'articolo sta dentro il .container di Helix:
   le sezioni a tutta larghezza devono uscirne. Snippet identico a
   bebdeipoeti.it (Helix uguale), tenuto perche' collaudato.

   Il centro dell'elemento resta il centro del viewport, quindi il contenuto
   interno non si sposta. Con barra di scorrimento OVERLAY (default macOS) la
   sezione tocca i bordi esatti; con barra CLASSICA sporge di mezza barra per
   lato, ma la taglia l'`overflow-x: hidden` di Helix su body/.body-innerwrapper
   (NON sovrascriverlo con clip: vedi commento in sezione 2). */

.pg-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* --- Icone -------------------------------------------------------------- */

.pg-i {
	display: inline-block;
	flex: 0 0 auto;
	height: 1.5rem;
	vertical-align: middle;
	width: 1.5rem;
}

.pg-i--sm { height: 1.125rem; width: 1.125rem; }
.pg-i--lg { height: 2.25rem; width: 2.25rem; }

/* --- Grana ---------------------------------------------------------------
   Un velo di rumore sul fondo. E' l'intervento che piu' toglie la piattezza
   "schermo puro" senza aggiungere un solo elemento visibile. */

.pg-grain::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	opacity: .16;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/* --- Testata di sezione --------------------------------------------------
   Allineata a sinistra e appesa a un filetto che attraversa il container.
   Sostituisce il blocco "occhiello + titolo centrato + sottotitolo". */

.pg-head {
	border-top: 1px solid hsl(var(--border));
	display: grid;
	gap: 1rem 3rem;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	padding-block-start: 2rem;
	margin-block-end: 3.5rem;
}

.pg-head h2 {
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}

.pg-head p {
	align-self: end;
	color: hsl(var(--muted-foreground));
	margin: 0;
	max-width: 46ch;
}

/* Variante stretta, per le sezioni che non hanno sottotitolo */
.pg-head--solo { grid-template-columns: minmax(0, 1fr); }

/* Rientrata: il titolo scala nella seconda colonna e si allinea alla griglia
   che introduce. Nessun righello: la sezione precedente fa gia' da stacco. */
/* Rientrata: il titolo parte dalla seconda colonna DELLA STESSA griglia che
   introduce, cosi' si allinea a una cella reale invece di galleggiare. Il
   righello resta: e' cio' che la tiene ancorata al margine. */
.pg-head--inset { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pg-head--inset h2 { grid-column: 2 / 4; max-width: 24ch; }
.pg-head--inset p  { grid-column: 2 / 4; max-width: 60ch; }

@media (max-width: 860px) {
	.pg-head--inset { grid-template-columns: minmax(0, 1fr); }
	.pg-head--inset h2, .pg-head--inset p { grid-column: 1; }
}

/* Impilata: titolo grande a tutta misura, lede sotto alla misura del corpo.
   Per le sezioni che aprono un ragionamento invece di una griglia. */
.pg-head--stack {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

.pg-head--stack h2 { max-width: 26ch; }
.pg-head--stack p  { max-width: 58ch; }

@media (max-width: 860px) {
	.pg-head {
		gap: .9rem;
		grid-template-columns: minmax(0, 1fr);
		margin-block-end: 2.5rem;
		padding-block-start: 1.5rem;
	}
	.pg-head h2 { max-width: none; }
}

/* --- Griglia a filetti condivisi ----------------------------------------
   Il fondo del contenitore fa da inchiostro, le celle lo coprono: restano
   in vista solo le fughe da 1px. Un reticolo continuo, non sei riquadri. */

.pg-rules {
	background: hsl(var(--border));
	border: 1px solid hsl(var(--border));
	display: grid;
	gap: 1px;
	overflow: hidden;
}

.pg-rules > * {
	background: hsl(var(--background));
	padding: 2.25rem;
	position: relative;
}

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

/* Su fondo elevato le celle prendono il colore della superficie */
.pg-section--elevated .pg-rules > * { background: hsl(var(--card)); }

@media (max-width: 980px) {
	.pg-rules--3, .pg-rules--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pg-rules--2, .pg-rules--3, .pg-rules--4 { grid-template-columns: minmax(0, 1fr); }
	.pg-rules > * { padding: 1.75rem 1.5rem; }
}

/* --- Indice dei servizi --------------------------------------------------
   Non sei celle uguali ma un indice: due voci guida a peso doppio, le altre
   quattro come righe di un sommario. La gerarchia dice quali servizi
   contano, cosa che una griglia isometrica non puo' dire. */

.pg-index { border-top: 1px solid hsl(var(--border)); }

.pg-index__lead {
	background: hsl(var(--border));
	border-bottom: 1px solid hsl(var(--border));
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-index__lead > * {
	background: hsl(var(--background));
	padding: 2.75rem 2.25rem 2.25rem;
}

.pg-index__lead h3 { font-size: 1.5rem; transition: color var(--transition-fast); }
.pg-index__lead h3 .pg-i { color: hsl(var(--primary)); margin-inline-start: .5rem; transition: transform var(--transition-fast); vertical-align: -.1em; }
.pg-index__lead a:hover h3 { color: hsl(var(--primary)); }
.pg-index__lead a:hover h3 .pg-i { transform: translateX(3px); }
.pg-index__lead .pg-cell__icon { margin-block-end: 1.75rem; }

.pg-index__row {
	align-items: baseline;
	border-bottom: 1px solid hsl(var(--border));
	color: inherit;
	display: grid;
	gap: .75rem 1.75rem;
	grid-template-columns: 2rem minmax(0, 17rem) minmax(0, 1fr);
	padding-block: 1.5rem;
	text-decoration: none;
	/* Il rientro in hover si fa con transform, non con padding: animare il
	   padding costringe il browser a rifare il layout a ogni fotogramma. */
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.pg-index__row:hover {
	background: hsl(var(--secondary));
	color: inherit;
	transform: translateX(.75rem);
}

.pg-index__row .pg-i { color: hsl(var(--primary)); position: relative; top: .35rem; }
.pg-index__row h3 { font-size: 1.0625rem; margin: 0; }
.pg-index__row p {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	margin: 0;
	max-width: 68ch;   /* il tetto del corpo, non un taglio del testo */
}
.pg-index__row h3 .pg-i { color: hsl(var(--primary)); margin-inline-start: .5rem; transition: transform var(--transition-fast); vertical-align: -.15em; }
.pg-index__row:hover h3 { color: hsl(var(--primary)); }
.pg-index__row:hover h3 .pg-i { transform: translateX(3px); }
.pg-index__row h3 { transition: color var(--transition-fast); }

@media (max-width: 860px) {
	.pg-index__lead { grid-template-columns: minmax(0, 1fr); }
	.pg-index__lead > * { padding: 2rem 1.5rem; }
	.pg-index__row {
		grid-template-columns: 2rem minmax(0, 1fr);
		gap: .5rem 1.25rem;
	}
	.pg-index__row p { grid-column: 2; }
}

/* --- Cella di servizio --------------------------------------------------- */

.pg-cell-link {
	color: inherit;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: background-color var(--transition-fast);
}

.pg-cell-link:hover { background: hsl(var(--secondary)); color: inherit; }

/* L'inchiostro di segnalazione entra da sinistra, come un indice */
.pg-cell-link::before {
	background: var(--gradient-primary);
	content: "";
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--transition-smooth);
	width: 2px;
}

.pg-cell-link:hover::before { transform: scaleY(1); }

.pg-cell__icon {
	color: hsl(var(--primary));
	margin-block-end: 1.5rem;
}

.pg-cell h3 {
	font-size: 1.125rem;
	letter-spacing: -.015em;
	margin-block-end: .625rem;
}

.pg-cell p {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	line-height: 1.65;
	margin-block-end: 1.5rem;
}

.pg-cell__more {
	align-items: center;
	color: hsl(var(--primary));
	display: inline-flex;
	font-size: .875rem;
	font-weight: 500;
	gap: .4rem;
	margin-block-start: auto;
}

.pg-cell-link:hover .pg-cell__more .pg-i { transform: translateX(3px); }
.pg-cell__more .pg-i { transition: transform var(--transition-fast); }

/* --- Riga di dati --------------------------------------------------------
   I quattro numeri non sono card: sono una riga di misure, con i separatori
   verticali e le cifre a larghezza fissa come in una tabella. */

.pg-figures {
	border-top: 1px solid hsl(var(--border));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 4rem;
}

/* Etichetta a sinistra, cifra tabellare a destra: la misura si legge come
   dato, non come numerone da vetrina. */
.pg-figures > * {
	align-items: baseline;
	border-bottom: 1px solid hsl(var(--border));
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	padding-block: 1.125rem;
}

.pg-figure__value {
	color: hsl(var(--foreground));
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	order: 2;
}

.pg-figure__label {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	max-width: none;
}

.pg-figures__source {
	color: hsl(var(--muted-foreground));
	font-size: .8125rem;
	padding-block-start: 1rem;
}

@media (max-width: 720px) {
	.pg-figures { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
}

/* --- Fascia di allerta ---------------------------------------------------
   Fondo pieno fucsia. E' l'unico punto della pagina dove il colore prende
   tutta la larghezza: per questo funziona. */

.pg-strip {
	background: hsl(var(--primary));
	color: hsl(var(--accent-foreground));
	position: relative;
}

.pg-strip .container {
	align-items: center;
	display: flex;
	gap: .875rem;
	justify-content: center;
	padding-block: .9rem;
	text-align: center;
}

.pg-strip p {
	font-size: .9375rem;
	font-weight: 600;
	margin: 0;
}

@media (max-width: 640px) {
	.pg-strip .container { align-items: flex-start; text-align: start; }
	.pg-strip p { font-size: .875rem; }
}

/* --- Hero ----------------------------------------------------------------- */

.pg-hero {
	align-items: center;
	display: flex;
	min-height: min(92vh, 900px);
	padding-block: 2.5rem 5rem;
	position: relative;
}

.pg-hero__bg {
	background-position: center;
	background-size: cover;
	inset: 0;
	position: absolute;
}

.pg-hero__veil {
	background:
		linear-gradient(hsl(var(--background) / .82), hsl(var(--background) / .94)),
		hsl(var(--background) / .55);
	inset: 0;
	position: absolute;
}

.pg-hero__inner {
	align-items: center;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.pg-hero__figure {
	position: relative;
	/* L'ombra sta sul contenitore, non sull'immagine: sull'immagine la mask
	   qui sotto verrebbe applicata DOPO il filtro e taglierebbe via l'ombra.
	   Sul contenitore (overflow visibile) l'ombra segue la forma mascherata
	   e sborda liberamente. */
	filter: drop-shadow(0 25px 60px hsl(var(--primary) / .35));
}

.pg-hero__figure img {
	display: block;
	margin-inline: auto;
	max-width: 420px;
	width: 100%;

	/* Il PNG della statua e' tagliato di netto in basso: senza dissolvenza
	   si vede la riga orizzontale dove finisce il file. */
	-webkit-mask-image: linear-gradient(#000 78%, transparent 99%);
	        mask-image: linear-gradient(#000 78%, transparent 99%);
}

.pg-hero h1 {
	font-size: clamp(1.85rem, 4.4vw, 3.5rem);
	letter-spacing: -.035em;
	line-height: 1.06;
	margin-block: 0;
}

/* Solo i figli DIRETTI sono le righe del titolo: senza il combinatore,
   la regola colpirebbe anche gli span annidati (correzione ottica della
   punteggiatura), mandandoli a capo come blocchi. */
.pg-hero h1 > span { display: block; }

.pg-hero__lede {
	color: hsl(var(--muted-foreground));
	font-size: 1.125rem;
	margin-block-start: 2rem;
	max-width: 54ch;
}

.pg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .875rem;
	margin-block-start: 2.5rem;
}

@media (max-width: 980px) {
	.pg-hero__inner { gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
	.pg-hero__figure { order: 2; }
	.pg-hero__copy { order: 1; }
	.pg-hero__figure img { max-width: 280px; }
}

/* --- Blocco strumento (CTA Radar) ---------------------------------------- */

.pg-tool {
	border: 1px solid hsl(var(--primary) / .35);
	border-radius: var(--radius-xl);
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	overflow: hidden;
	padding: 3rem;
	position: relative;
}

/* Nessuna barra ne' velatura in cima: il blocco si segnala col solo bordo
   fucsia tenue di .pg-tool. */

.pg-tool > * { position: relative; z-index: 2; }

.pg-tool h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	margin-block-end: 1.25rem;
	max-width: 20ch;
}

.pg-tool p { color: hsl(var(--muted-foreground)); }

.pg-tool__aside {
	align-self: center;
	border-inline-start: 1px solid hsl(var(--border));
	padding-inline-start: 2.5rem;
}

.pg-tool__note {
	color: hsl(var(--muted-foreground));
	font-size: .8125rem;
	margin-block-start: 1rem;
	margin-block-end: 0;
}

@media (max-width: 900px) {
	.pg-tool { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; }
	.pg-tool__aside { border-inline-start: 0; border-top: 1px solid hsl(var(--border)); padding-inline-start: 0; padding-block-start: 2rem; }
}

/* --- Recensioni ----------------------------------------------------------
   Citazioni impaginate, non card. Il filetto in alto le lega alla griglia. */

.pg-quotes {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg-quote { border-top: 1px solid hsl(var(--border)); padding-block-start: 1.75rem; }

/* Cinque stelle arancioni x3 sono il componente di categoria. Nel mondo del
   documento la valutazione e' una misura, con la stessa notazione tabellare
   dei dati della pagina. */
.pg-quote__rating {
	align-items: center;
	color: hsl(var(--accent));
	display: flex;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	gap: .4rem;
	letter-spacing: .04em;
	margin-block-end: 1.25rem;
}

.pg-quote blockquote {
	border: 0;
	color: hsl(var(--foreground));
	font-size: 1.0625rem;
	font-style: normal;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	padding: 0;
}

.pg-quote__who { font-size: .875rem; font-weight: 600; }
.pg-quote__role { color: hsl(var(--muted-foreground)); font-size: .8125rem; }

@media (max-width: 900px) { .pg-quotes { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* --- Prima / dopo --------------------------------------------------------- */

.pg-deltas {
	background: hsl(var(--border));
	border: 1px solid hsl(var(--border));
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-delta { background: hsl(var(--background)); padding: 1.5rem; }

.pg-delta__label {
	align-items: center;
	color: hsl(var(--muted-foreground));
	display: flex;
	font-size: .8125rem;
	gap: .5rem;
	margin-block-end: 1.25rem;
}

.pg-delta__label .pg-i { color: hsl(var(--primary)); }

.pg-delta__values { align-items: baseline; display: flex; gap: .6rem; }

.pg-delta__before {
	color: hsl(var(--muted-foreground));
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
}

.pg-delta__after {
	color: hsl(var(--foreground));
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -.03em;
}

/* --- Righe definitorie ---------------------------------------------------
   Etichetta a sinistra, prosa a destra, separate da un filetto. E' la forma
   che la pagina ha gia' guadagnato altrove: sostituisce le griglie di celle
   identiche, che sono lo scaffold che la THESIS rifiuta. */

.pg-defs { border-top: 1px solid hsl(var(--border)); }

.pg-defs > div {
	align-items: start;
	border-bottom: 1px solid hsl(var(--border));
	display: grid;
	gap: .5rem 2.5rem;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	padding-block: 1.625rem;
}

.pg-defs h3 {
	align-items: baseline;
	display: flex;
	font-size: 1.0625rem;
	gap: .75rem;
	margin: 0;
}

.pg-defs h3 .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; position: relative; top: .2rem; }

.pg-defs p {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	line-height: 1.7;
	margin: 0;
	max-width: 68ch;
}

@media (max-width: 780px) {
	.pg-defs > div { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
}

/* (8) Correzione ottica: in Plus Jakarta Sans i segni finali hanno un
   sidebearing generoso che oltre i ~2rem si legge come uno spazio prima del
   punto. Non e' kerning (verificato: nessuna differenza attivandolo). */
.pg-punct { margin-inline-start: -.09em; }

/* La correzione crea un riquadro inline: senza questo il segno finale puo'
   andare a capo da solo, che e' peggio del difetto che corregge. */
.pg-nb { white-space: nowrap; }

/* --- Due colonne testo / griglia ------------------------------------------ */

.pg-split {
	align-items: start;
	display: grid;
	gap: 3.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-split--media { align-items: center; }

.pg-prose p {
	color: hsl(var(--muted-foreground));
	line-height: 1.75;
	max-width: 62ch;
}

.pg-prose strong { color: hsl(var(--foreground)); }

@media (max-width: 980px) { .pg-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }

/* --- Figura con didascalia ------------------------------------------------ */

.pg-figure-media {
	border: 1px solid hsl(var(--border));
	overflow: hidden;
	position: relative;
}

.pg-figure-media img { display: block; height: 100%; object-fit: cover; width: 100%; }

.pg-figure-media figcaption {
	align-items: center;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: hsl(var(--background) / .82);
	border-top: 1px solid hsl(var(--border));
	display: flex;
	gap: .875rem;
	inset-inline: 0;
	bottom: 0;
	padding: 1rem 1.25rem;
	position: absolute;
}

.pg-figure-media figcaption .pg-i { color: hsl(var(--primary)); }
.pg-figure-media b { display: block; font-size: .875rem; }
.pg-figure-media small { color: hsl(var(--muted-foreground)); font-size: .75rem; }

/* --- Nota a margine ------------------------------------------------------- */

.pg-note {
	border-inline-start: 1px solid hsl(var(--primary));
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	line-height: 1.7;
	margin-block-start: 2rem;
	padding-inline-start: 1.25rem;
}

.pg-note strong { color: hsl(var(--foreground)); }

/* --- Domande frequenti ---------------------------------------------------
   <details> nativo: accessibile e senza JavaScript. */

.pg-faq { border-top: 1px solid hsl(var(--border)); margin-inline: auto; max-width: 52rem; }

.pg-faq details { border-bottom: 1px solid hsl(var(--border)); }

.pg-faq summary {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	gap: 1rem;
	letter-spacing: -.015em;
	list-style: none;
	padding-block: 1.35rem;
	transition: color var(--transition-fast);
}

.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary:hover { color: hsl(var(--primary)); }

/* Il segno di apertura e' una croce che diventa un meno: niente chevron */
.pg-faq summary::after {
	background:
		linear-gradient(hsl(var(--muted-foreground)), hsl(var(--muted-foreground))) center/100% 1px no-repeat,
		linear-gradient(hsl(var(--muted-foreground)), hsl(var(--muted-foreground))) center/1px 100% no-repeat;
	content: "";
	flex: 0 0 auto;
	height: .75rem;
	margin-inline-start: auto;
	transition: transform var(--transition-smooth);
	width: .75rem;
}

.pg-faq details[open] summary { color: hsl(var(--foreground)); }
.pg-faq details[open] summary::after { background-size: 100% 1px, 0 100%; transform: rotate(180deg); }

.pg-faq__answer {
	color: hsl(var(--muted-foreground));
	line-height: 1.75;
	max-width: 68ch;
	padding-block-end: 1.5rem;
}

/* --- Anteprime del blog --------------------------------------------------- */

.pg-posts { display: grid; gap: 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pg-post {
	border-top: 1px solid hsl(var(--border));
	color: inherit;
	display: flex;
	flex-direction: column;
	padding-block-start: 1.75rem;
	text-decoration: none;
	transition: border-color var(--transition-fast);
}

.pg-post:hover { border-top-color: hsl(var(--primary)); color: inherit; }

/* La tassonomia sta SOTTO il titolo come metadato, in colore di testo
   secondario. Sopra il titolo e in colore d'accento sarebbe un occhiello,
   che e' l'elemento vietato — l'informazione invece resta. */
.pg-post__meta {
	color: hsl(var(--muted-foreground));
	font-size: .8125rem;
	margin-block-end: .75rem;
	order: 0;
}

.pg-post h3 {
	font-size: 1.125rem;
	letter-spacing: -.015em;
	margin-block-end: .5rem;
	transition: color var(--transition-fast);
}

.pg-post:hover h3 { color: hsl(var(--primary)); }
.pg-post p { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.65; }

@media (max-width: 900px) { .pg-posts { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* --- Chiusura ------------------------------------------------------------- */

.pg-close { overflow: hidden; padding-block: 7rem; position: relative; text-align: center; }

.pg-close video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* Solo velo scuro. Il gradiente fucsia che stava qui sopra era una velatura
   piena, cioe' esattamente cio' che OWN-WORLD esclude: in chiusura l'inchiostro
   lo porta la CTA, non il fondo. */
.pg-close__veil {
	background: linear-gradient(hsl(var(--background) / .62), hsl(var(--background) / .88));
	inset: 0;
	position: absolute;
}

.pg-close h2 {
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	letter-spacing: -.04em;
	margin: 0;
}

.pg-close p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; margin-block-start: 1.25rem; }

/* --- Etichette territorio ------------------------------------------------- */

.pg-places { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 2rem; }

.pg-place {
	align-items: center;
	border: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground));
	display: inline-flex;
	font-size: .8125rem;
	gap: .375rem;
	padding: .4rem .75rem;
}

.pg-place .pg-i { color: hsl(var(--primary)); }

/* --- Punto separatore del nastro ------------------------------------------ */

.pg-dot {
	background: hsl(var(--primary));
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	height: 4px;
	width: 4px;
}

/* --- Prove in linea ------------------------------------------------------- */

/* Tre pillole centrate erano un modulo. Una lista di misure con il proprio
   filetto e le cifre tabellari e' la stessa informazione, letta come dato. */
.pg-proofs { border-top: 1px solid hsl(var(--border)); margin: 0; }

.pg-proofs > div {
	align-items: baseline;
	border-bottom: 1px solid hsl(var(--border));
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	padding-block: .875rem;
}

.pg-proofs dt { color: hsl(var(--muted-foreground)); font-size: .9375rem; font-weight: 400; }

.pg-proofs dd {
	color: hsl(var(--foreground));
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 0;
}

/* Le celle guida dell'indice ospitano il filetto acceso di .pg-cell-link */
.pg-index__lead > * { position: relative; }


/* ==========================================================================
   15. INNESTO IN JOOMLA
   Le pagine costruite con questo sistema occupano tutta la pagina: il
   respiro verticale lo danno le sezioni, non il contenitore di Helix.
   Si riconoscono dal wrapper .pg-home / .pg-page dentro l'articolo, quindi
   non serve una classe sul body ne' un template style dedicato.
   ========================================================================== */

#sp-main-body:has(.pg-home),
#sp-main-body:has(.pg-page) {
	padding: 0;
}

/* Joomla incapsula l'articolo in .article-details: va reso trasparente al
   layout, altrimenti margini e sfondi suoi spezzano le sezioni a tutta
   larghezza. */
#sp-main-body:has(.pg-home) .article-details,
#sp-main-body:has(.pg-page) .article-details {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

/* Fallback per browser senza :has() — il padding resta, ma nulla si rompe. */
@supports not selector(:has(*)) {
	.pg-home, .pg-page { margin-block: -100px; }
}


/* ==========================================================================
   16. FOOTER E TASTO DI NAVIGAZIONE
   ========================================================================== */

/* Il tasto CTA nell'header (modulo custom in posizione "menu"). Helix gli
   mette attorno il proprio contenitore, qui si allinea al menu. */
.pg-nav-cta { white-space: nowrap; }

/* Helix rende #sp-footer1 come col-lg-12: il footer prende tutta la larghezza.
   Si annulla il padding del wrapper modulo per governarlo da qui. */
#sp-footer .sp-module,
#sp-footer .sp-module-content { padding: 0; margin: 0; }

.pg-footer { padding-block: 4rem 2rem; }

.pg-footer__top {
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
}

.pg-footer__logo { height: 36px; width: auto; margin-block-end: 1.25rem; }

.pg-footer__claim {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	max-width: 30ch;
	margin-block-end: 1rem;
}

.pg-footer__note {
	color: hsl(var(--muted-foreground) / .8);
	font-size: .8125rem;
	max-width: 34ch;
	margin: 0;
}

.pg-footer__col h4 {
	color: hsl(var(--foreground));
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	margin-block-end: 1.25rem;
	text-transform: uppercase;
}

.pg-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pg-footer__col li { margin-block-end: .7rem; }

.pg-footer__col a {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	transition: color var(--transition-fast);
}

.pg-footer__col a:hover { color: hsl(var(--primary)); }

/* Fascia contatti + social, separata da un filetto */
.pg-footer__mid {
	align-items: start;
	border-top: 1px solid hsl(var(--border));
	display: grid;
	gap: 1.5rem 3rem;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
}

.pg-footer__contacts {
	color: hsl(var(--muted-foreground));
	display: grid;
	gap: .75rem 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-footer__contacts li {
	align-items: center;
	display: flex;
	font-size: .875rem;
	gap: .625rem;
}

.pg-footer__contacts .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; }
.pg-footer__contacts a { color: inherit; transition: color var(--transition-fast); }
.pg-footer__contacts a:hover { color: hsl(var(--primary)); }

.pg-footer__social { display: flex; gap: .625rem; }

.pg-footer__social a {
	align-items: center;
	border: 1px solid hsl(var(--border));
	border-radius: 50%;
	color: hsl(var(--muted-foreground));
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
	width: 2.25rem;
}

.pg-footer__social a:hover {
	border-color: hsl(var(--primary));
	box-shadow: 0 0 18px hsl(var(--primary) / .35);
	color: hsl(var(--primary));
}

.pg-footer__legal {
	border-top: 1px solid hsl(var(--border));
	color: hsl(var(--muted-foreground) / .8);
	font-size: .8125rem;
	margin: 2rem 0 0;
	padding-block-start: 1.5rem;
}

@media (max-width: 860px) {
	.pg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
	.pg-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.pg-footer__top { grid-template-columns: minmax(0, 1fr); }
	.pg-footer__mid { grid-template-columns: minmax(0, 1fr); }
	.pg-footer__contacts { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   17. CORREZIONI ALL'HEADER DI HELIX
   --------------------------------------------------------------------------
   Bug del core (template.css, non modificabile): in stato sticky Helix forza
   .logo-sticky a display:block con !important IGNORANDO le classi responsive
   d-none/d-lg-inline-block. Sotto lg il logo desktop compare quindi accanto a
   .logo-image-phone: due loghi sovrapposti. Qui si rimette la regola
   responsive, vincendo per ordine di caricamento (custom.css e' dopo). */

@media (max-width: 991.98px) {
	#sp-header.header-sticky .logo-sticky { display: none !important; }
}


/* ==========================================================================
   18. PAGINA SERVIZI
   ========================================================================== */

/* Hero editoriale: titolo a sinistra, non l'ennesimo box centrato */
.pg-page-hero {
	border-bottom: 1px solid hsl(var(--border));
	padding-block: 3rem 3.5rem;
}

.pg-page-hero h1 {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	letter-spacing: -.035em;
	margin: 0;
	max-width: 18ch;
}

.pg-page-hero__lede {
	color: hsl(var(--muted-foreground));
	font-size: 1.125rem;
	line-height: 1.7;
	margin-block: 1.5rem 0;
	max-width: 60ch;
}

/* Fascia immagine a tutta larghezza tra hero e contenuto */
.pg-strip-media {
	height: 220px;
	overflow: hidden;
	position: relative;
}

.pg-strip-media img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.pg-strip-media::after {
	background: linear-gradient(hsl(var(--background) / .55), hsl(var(--background) / .8));
	content: "";
	inset: 0;
	position: absolute;
}

/* --- Blocco servizio: testo + "cosa include", alternati -------------------- */

.pg-service {
	align-items: start;
	border-top: 1px solid hsl(var(--border));
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	padding-block: 3.5rem;
	scroll-margin-top: 6rem;
}

/* Ritmo alternato: sui blocchi pari l'elenco "cosa include" passa a sinistra
   e la prosa a destra. Nome classe corretto (.pg-include) + grid-column
   esplicito, piu' robusto di order. */
.pg-service:nth-child(even) .pg-include { grid-column: 1; grid-row: 1; }
.pg-service:nth-child(even) .pg-service__body { grid-column: 2; grid-row: 1; }

.pg-service__icon {
	color: hsl(var(--primary));
	display: block;
	margin-block-end: 1.25rem;
}

.pg-service h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -.02em;
	margin-block-end: 1.25rem;
	max-width: 20ch;
}

.pg-service__body p {
	color: hsl(var(--muted-foreground));
	line-height: 1.75;
	max-width: 60ch;
}

/* Nota locale: filetto 1px, non bordo spesso */
.pg-service__local {
	align-items: start;
	color: hsl(var(--muted-foreground));
	display: flex;
	font-size: .9375rem;
	gap: .625rem;
	line-height: 1.7;
	margin-block-start: 1.75rem;
	max-width: 58ch;
}

.pg-service__local .pg-i { color: hsl(var(--accent)); flex: 0 0 auto; position: relative; top: .2rem; }

/* "Cosa include": elenco a spunta dentro un riquadro a filetto */
/* Colonna a filetto, non una card: un solo filetto in alto la lega alla
   griglia, come tutto il resto della pagina. Era l'unica card superstite. */
.pg-include {
	border-top: 1px solid hsl(var(--border));
	padding-block-start: 1.5rem;
	position: sticky;
	top: 6rem;
}

.pg-include__title {
	color: hsl(var(--muted-foreground));
	font-size: .9375rem;
	font-weight: 500;
	margin-block-end: 1.25rem;
}

.pg-include ul { display: grid; gap: .875rem; list-style: none; margin: 0; padding: 0; }

.pg-include li {
	align-items: start;
	color: hsl(var(--foreground) / .9);
	display: flex;
	font-size: .9375rem;
	gap: .75rem;
	line-height: 1.5;
}

.pg-include li .pg-i {
	color: hsl(var(--accent));
	flex: 0 0 auto;
	position: relative;
	top: .05rem;
}

@media (max-width: 900px) {
	.pg-service { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem; }
	/* In colonna singola sempre: prima il testo, poi l'elenco. Si annulla
	   l'alternanza a griglia dei blocchi pari. */
	.pg-service:nth-child(even) .pg-service__body,
	.pg-service:nth-child(even) .pg-include { grid-column: 1; grid-row: auto; }
	.pg-service__body { order: 0; }
	.pg-service__include, .pg-include { order: 1; }
	.pg-include { position: static; }
}

/* --- CTA di chiusura a due azioni ----------------------------------------- */

.pg-cta {
	border: 1px solid hsl(var(--primary) / .35);
	border-radius: var(--radius-xl);
	overflow: hidden;
	padding: 3rem;
	position: relative;
	text-align: center;
}

.pg-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); margin: 0 auto; max-width: 24ch; }
.pg-cta p { color: hsl(var(--muted-foreground)); margin-block: 1rem 2rem; }
.pg-cta__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

@media (max-width: 640px) { .pg-cta { padding: 2rem 1.5rem; } }


/* ==========================================================================
   19. PAGINA REELS
   ========================================================================== */

/* --- Hero a tutta altezza con immagine --- */
.pg-reels-hero {
	align-items: center;
	display: flex;
	min-height: min(92vh, 880px);
	overflow: hidden;
	padding-block: 6rem 4rem;
	position: relative;
}

.pg-reels-hero__bg { inset: 0; position: absolute; }
.pg-reels-hero__bg img { height: 100%; object-fit: cover; width: 100%; }
.pg-reels-hero__veil { background: hsl(var(--background) / .85); inset: 0; position: absolute; }

.pg-reels-hero h1 {
	font-size: clamp(2.25rem, 5.5vw, 4.25rem);
	letter-spacing: -.04em;
	line-height: 1.05;
	margin: 0;
	max-width: 20ch;
}

.pg-reels-hero__lede { color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.7; margin-block: 1.75rem 0; max-width: 60ch; }
.pg-reels-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-block-start: 2.5rem; }
.pg-reels-hero__proof { display: flex; flex-wrap: wrap; gap: .625rem; margin-block-start: 2.5rem; }
/* Il badge lungo dell'hero puo' andare a capo su schermi stretti */
.pg-reels-hero > .container > .pg-badge { white-space: normal; }

/* --- Miti: citazione falsa + verità, a filetto --- */
.pg-myths { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0,1fr)); background: hsl(var(--border)); border-block: 1px solid hsl(var(--border)); }
.pg-myth { background: hsl(var(--background)); padding: 2rem 1.75rem; }
.pg-section--elevated .pg-myth { background: hsl(var(--card)); }
.pg-myth__icon { color: hsl(var(--accent)); margin-block-end: 1.25rem; }
.pg-myth__claim { color: hsl(var(--foreground)); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0 0 1rem; }
.pg-myth__truth { border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.65; margin: 0; padding-block-start: 1rem; }
@media (max-width: 820px) { .pg-myths { grid-template-columns: minmax(0,1fr); } }

/* --- Metodo in 3 parti: blocchi a filetto con indice, claim, punti --- */
.pg-method { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0,1fr)); background: hsl(var(--border)); border: 1px solid hsl(var(--border)); }
.pg-method__item { background: hsl(var(--background)); display: flex; flex-direction: column; padding: 2.25rem 1.75rem; }
.pg-method__top { align-items: center; display: flex; gap: .875rem; margin-block-end: 1.5rem; }
.pg-method__idx { color: hsl(var(--muted-foreground)); font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.pg-method__icon { color: hsl(var(--primary)); }
.pg-method h3 { font-size: 1.1875rem; margin: 0 0 .375rem; }
.pg-method__claim { color: hsl(var(--accent)); font-size: .875rem; font-weight: 500; margin: 0 0 1rem; }
.pg-method__desc { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.65; margin: 0 0 1.5rem; }
.pg-method__points { border-top: 1px solid hsl(var(--border)); display: grid; gap: .75rem; list-style: none; margin: 0; margin-block-start: auto; padding: 1.25rem 0 0; }
.pg-method__points li { align-items: start; color: hsl(var(--foreground) / .9); display: flex; font-size: .875rem; gap: .625rem; }
.pg-method__points .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; top: .05rem; position: relative; }
@media (max-width: 900px) { .pg-method { grid-template-columns: minmax(0,1fr); } }

/* --- Funnel: riga di 4 tappe a filetto --- */
.pg-funnel { border-block: 1px solid hsl(var(--border)); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.pg-funnel > * { border-inline-start: 1px solid hsl(var(--border)); padding: 1.75rem 1.5rem; }
.pg-funnel > *:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pg-funnel__step { color: hsl(var(--primary)); font-size: .75rem; font-weight: 600; letter-spacing: .06em; }
.pg-funnel h4 { font-size: 1.0625rem; margin: .5rem 0 .25rem; }
.pg-funnel__val { color: hsl(var(--accent)); font-size: .8125rem; font-weight: 500; }
.pg-funnel p { color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.55; margin: .75rem 0 0; }
@media (max-width: 820px) { .pg-funnel { grid-template-columns: repeat(2, minmax(0,1fr)); } .pg-funnel > *:nth-child(odd){border-inline-start:0;padding-inline-start:0} .pg-funnel > *:nth-child(n+3){border-top:1px solid hsl(var(--border))} }
@media (max-width: 480px) { .pg-funnel { grid-template-columns: minmax(0,1fr); } .pg-funnel > *{border-inline-start:0;padding-inline-start:0;border-top:1px solid hsl(var(--border))} .pg-funnel > *:first-child{border-top:0} }

/* --- Mockup telefono 9:16 --- */
.pg-phone-wrap { align-items: center; display: flex; flex-direction: column; gap: 2rem; }
.pg-phone { aspect-ratio: 9 / 16; border: 6px solid hsl(var(--border)); border-radius: 2rem; max-width: 220px; overflow: hidden; position: relative; width: 100%; }
/* Riquadro 9:16 sobrio: superficie scura + un accenno di sottotitoli e un
   play discreto. Rappresenta il formato senza fingere un device ne' velare
   di gradiente (regola: inchiostri di segnalazione, mai velature). */
.pg-phone__screen { background: hsl(var(--secondary)); inset: 0; position: absolute; }
.pg-phone__screen::before {
	background:
		linear-gradient(hsl(var(--foreground) / .18) 0 0) 12% 74% / 55% 3px,
		linear-gradient(hsl(var(--foreground) / .18) 0 0) 12% 82% / 72% 3px,
		linear-gradient(hsl(var(--primary) / .5) 0 0) 12% 90% / 34% 3px;
	background-repeat: no-repeat;
	content: "";
	inset: 0;
	position: absolute;
}
.pg-phone__play { align-items: center; border: 1px solid hsl(var(--border)); border-radius: 50%; color: hsl(var(--primary)); display: flex; height: 3.25rem; inset: 0; justify-content: center; margin: auto auto 30%; position: absolute; width: 3.25rem; z-index: 2; }
.pg-phone__bar { background: hsl(var(--border)); border-radius: 999px; bottom: .8rem; height: .2rem; inset-inline: .8rem; overflow: hidden; position: absolute; z-index: 2; }
.pg-phone__bar::after { background: hsl(var(--primary)); content: ""; display: block; height: 100%; width: 66%; }
.pg-phone-tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* Filigrana "9:16" gigante */
.pg-watermark { position: relative; }
.pg-watermark::before { color: hsl(var(--primary) / .08); content: "9:16"; font-family: var(--font-display); font-size: clamp(8rem, 16vw, 14rem); font-weight: 800; left: -.5rem; line-height: .8; pointer-events: none; position: absolute; top: -3rem; z-index: 0; }
.pg-watermark > * { position: relative; z-index: 1; }

/* --- Timeline processo (7 step alternati) --- */
.pg-timeline { margin-inline: auto; max-width: 56rem; position: relative; }
.pg-timeline::before { background: linear-gradient(hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary))); content: ""; inset-block: 0; left: 1rem; position: absolute; width: 1px; }
.pg-tstep { display: grid; gap: 1.5rem; padding-block-end: 2.25rem; padding-inline-start: 3rem; position: relative; }
.pg-tstep__num { align-items: center; background: hsl(var(--primary)); border-radius: 50%; color: hsl(var(--primary-foreground)); display: flex; font-size: .8125rem; font-weight: 700; height: 2rem; justify-content: center; left: 1rem; position: absolute; top: 0; transform: translateX(-50%); width: 2rem; }
.pg-tstep--accent .pg-tstep__num { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.pg-tstep__who { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--primary)); }
.pg-tstep--accent .pg-tstep__who { color: hsl(var(--accent)); }
.pg-tstep h3 { font-size: 1.0625rem; margin: .4rem 0 .35rem; }
.pg-tstep p { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.6; margin: 0; max-width: 60ch; }
@media (min-width: 820px) {
	.pg-timeline::before { left: 50%; }
	.pg-tstep { grid-template-columns: 1fr 1fr; padding-inline-start: 0; }
	.pg-tstep__num { left: 50%; }
	.pg-tstep__content { grid-column: 1; padding-inline-end: 3rem; text-align: right; }
	.pg-tstep--accent .pg-tstep__content { grid-column: 2; padding-inline: 3rem 0; text-align: left; }
	.pg-tstep--accent .pg-tstep__who, .pg-tstep--accent p { margin-inline-start: 0; }
}

/* Nota "dopo i 2 mesi" */
.pg-afternote { align-items: start; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); display: flex; gap: 1rem; margin: 3.5rem auto 0; max-width: 48rem; padding: 1.5rem; }
.pg-afternote .pg-i { color: hsl(var(--accent)); flex: 0 0 auto; position: relative; top: .15rem; }
.pg-afternote p { color: hsl(var(--muted-foreground)); line-height: 1.65; margin: 0; }
.pg-afternote strong { color: hsl(var(--foreground)); }
.pg-afternote .pg-accent { color: hsl(var(--accent)); font-weight: 600; }

/* --- Prezzi: 3 blocchi a filetto --- */
.pg-pricing { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0,1fr)); background: hsl(var(--border)); border: 1px solid hsl(var(--border)); align-items: stretch; }
.pg-price { background: hsl(var(--background)); display: flex; flex-direction: column; padding: 2rem 1.75rem; }
.pg-price--lead { background: linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box, var(--gradient-card-border) border-box; border: 1px solid transparent; }
.pg-price__tag { align-self: start; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: .6875rem; font-weight: 600; letter-spacing: .05em; margin-block-end: 1.25rem; padding: .3rem .6rem; text-transform: uppercase; }
.pg-price--lead .pg-price__tag { border-color: hsl(var(--primary) / .4); color: hsl(var(--primary-glow)); }
.pg-price__label { color: hsl(var(--muted-foreground)); font-size: .875rem; margin: 0; }
.pg-price__value { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: .5rem 0 .25rem; }
.pg-price__value small { color: hsl(var(--muted-foreground)); font-size: 1.125rem; font-weight: 600; }
.pg-price__note { color: hsl(var(--muted-foreground)); font-size: .8125rem; margin: 0; }
.pg-price__icon { color: hsl(var(--accent)); margin-block-end: 1rem; }
.pg-price h3 { font-size: 1.1875rem; margin: 0 0 .5rem; }
.pg-price ul { border-top: 1px solid hsl(var(--border)); display: grid; gap: .75rem; list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; }
.pg-price li { align-items: start; color: hsl(var(--foreground) / .9); display: flex; font-size: .875rem; gap: .625rem; }
.pg-price li .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; position: relative; top: .05rem; }
.pg-price__rows { display: grid; gap: .5rem; margin-block-start: 1.5rem; }
.pg-price__row { align-items: center; border: 1px solid hsl(var(--border)); display: flex; gap: .75rem; justify-content: space-between; padding: .7rem .9rem; }
.pg-price__row span:first-child { color: hsl(var(--foreground) / .9); font-size: .875rem; }
.pg-price__row span:last-child { color: hsl(var(--accent)); font-size: .875rem; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pg-price__extra { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
.pg-price__extra > div { border: 1px solid hsl(var(--border)); padding: 1rem; }
.pg-price__extra h4 { font-size: .9375rem; margin: 0 0 .35rem; display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.pg-price__extra h4 span { color: hsl(var(--primary)); font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-price__extra p { color: hsl(var(--muted-foreground)); font-size: .8125rem; line-height: 1.5; margin: 0; }
.pg-price__foot { color: hsl(var(--muted-foreground)); font-size: .75rem; line-height: 1.5; margin: auto 0 0; padding-block-start: 1.5rem; }
.pg-price .pg-btn { margin-block-start: 2rem; }
@media (max-width: 960px) { .pg-pricing { grid-template-columns: minmax(0,1fr); } .pg-price--lead { order: -1; } }

/* --- CTA finale con bordo pulsante (sostituisce .radar-border) --- */
.pg-cta--bordered {
	background: linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box, var(--gradient-card-border) border-box;
	border: 1px solid transparent;
}


/* ==========================================================================
   20. PAGINA CHI SIAMO
   ========================================================================== */

/* Storia: paragrafo largo, misura da lettura */
.pg-story { max-width: 46rem; }
.pg-story p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.8; }

/* Ritratto team: cornice a filetto a gradiente (1px, non 3), non una card */
.pg-portrait {
	background: linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box, var(--gradient-card-border) border-box;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.pg-portrait img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* Blocco team centrato ma sobrio */
.pg-team { align-items: center; display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); max-width: 46rem; }
.pg-team__portrait { aspect-ratio: 4 / 5; }
.pg-team h3 { font-size: 1.375rem; margin: 0 0 .25rem; }
.pg-team__role { color: hsl(var(--primary)); font-size: .9375rem; font-weight: 500; margin: 0 0 1rem; }
.pg-team p { color: hsl(var(--muted-foreground)); line-height: 1.7; margin: 0; }
@media (max-width: 700px) { .pg-team { grid-template-columns: minmax(0,1fr); gap: 1.75rem; justify-items: center; text-align: center; } .pg-team__portrait { max-width: 15rem; } }

/* Spazio Para Compartir: immagine + testo */
.pg-space { align-items: center; display: grid; gap: 3rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.pg-space__figure { aspect-ratio: 4 / 3; }
.pg-space__logo { display: block; margin: 0 0 1.5rem; max-width: 240px; }
.pg-space p { color: hsl(var(--muted-foreground)); line-height: 1.75; }
.pg-space__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-block-start: 1.75rem; }
@media (max-width: 900px) { .pg-space { grid-template-columns: minmax(0,1fr); gap: 2rem; } }

/* Dove siamo: contatti a filetto + mappa */
.pg-where { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.pg-contacts { border-top: 1px solid hsl(var(--border)); padding-block-start: 1.5rem; }
.pg-contacts h3 { font-size: 1.5rem; margin: 0 0 1.5rem; }
.pg-contacts ul { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.pg-contacts li { align-items: start; color: hsl(var(--muted-foreground)); display: flex; font-size: .9375rem; gap: .75rem; }
.pg-contacts li .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; position: relative; top: .15rem; }
.pg-contacts a { color: inherit; transition: color var(--transition-fast); }
.pg-contacts a:hover { color: hsl(var(--primary)); }
.pg-map { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; }
.pg-map iframe { border: 0; display: block; height: 100%; min-height: 320px; width: 100%; filter: grayscale(.72) contrast(1.05) brightness(.92); }
@media (max-width: 820px) { .pg-where { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   21. BLOG
   Listing come indice di risorse (riuso .pg-page-hero + .pg-posts/.pg-post),
   filtro per categoria lato client, e pagina articolo a colonna di lettura.
   La categoria resta un METADATO sotto il titolo (regola anti-occhiello,
   coerente con la Home), mai un occhiello colorato sopra.
   ========================================================================== */

/* --- Barra filtri --------------------------------------------------------- */
.pg-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-block: 2.25rem 3rem;
}

.pg-filter__btn {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	display: inline-flex;
	font: 500 .875rem/1 var(--font-body, inherit);
	padding: .55rem 1.05rem;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pg-filter__btn:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--foreground)); }

.pg-filter__btn[aria-current="true"] {
	background: hsl(var(--primary));
	border-color: transparent;
	color: hsl(var(--primary-foreground));
}

/* Nessun risultato per un filtro (di norma mai, ma non lasciamo il vuoto muto) */
.pg-filter-empty {
	color: hsl(var(--muted-foreground));
	display: none;
	padding-block: 3rem;
	text-align: center;
}

/* Card della lista: aggiunge alla .pg-post il tempo di lettura in coda meta */
.pg-post__time { display: inline-flex; align-items: center; gap: .35rem; }
.pg-post__time .pg-i { width: .85em; height: .85em; }
.pg-post[hidden] { display: none; }

/* --- Pagina articolo ------------------------------------------------------ */
.pg-article { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(3rem, 7vw, 5rem); }

.pg-narrow { margin-inline: auto; max-width: 46rem; }

.pg-back {
	align-items: center;
	color: hsl(var(--muted-foreground));
	display: inline-flex;
	font-size: .875rem;
	gap: .5rem;
	margin-block-end: 2.25rem;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.pg-back:hover { color: hsl(var(--primary)); }
.pg-back .pg-i { transform: rotate(180deg); transition: transform var(--transition-fast); }
.pg-back:hover .pg-i { transform: rotate(180deg) translateX(3px); }

.pg-article h1 {
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	letter-spacing: -.03em;
	line-height: 1.12;
	margin: 0;
}

.pg-article__meta {
	align-items: center;
	color: hsl(var(--muted-foreground));
	display: flex;
	flex-wrap: wrap;
	font-size: .875rem;
	gap: .75rem;
	margin-block-start: 1.35rem;
}

.pg-article__meta .pg-i { width: .95em; height: .95em; margin-inline-end: .3rem; vertical-align: -.12em; }
.pg-article__meta .pg-dot { background: hsl(var(--muted-foreground) / .5); border-radius: 50%; height: 3px; width: 3px; }

/* Standfirst: l'anteprima (introtext) fa da attacco, chiusa da un filetto */
.pg-article__lead {
	border-block-end: 1px solid hsl(var(--border));
	color: hsl(var(--foreground));
	font-size: 1.15rem;
	line-height: 1.7;
	margin-block: 2.5rem 0;
	padding-block-end: 2.25rem;
}

.pg-article__lead p { margin: 0; }

/* Corpo dell'articolo: tipografia da lettura, titoli con filetto d'accento */
.pg-article .pg-prose { margin-block-start: 2.25rem; }
.pg-article .pg-prose > :first-child { margin-block-start: 0; }

.pg-article .pg-prose p {
	color: hsl(var(--foreground) / .85);
	font-size: 1.0625rem;
	line-height: 1.8;
	margin-block: 0 1.25rem;
	max-width: none;
}

.pg-article .pg-prose h2 {
	border-inline-start: 2px solid hsl(var(--primary));
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.25;
	margin-block: 2.75rem 1rem;
	padding-inline-start: 1rem;
}

.pg-article .pg-prose .pg-ul {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.pg-article .pg-prose .pg-ul li {
	color: hsl(var(--foreground) / .85);
	line-height: 1.7;
	padding-inline-start: 1.4rem;
	position: relative;
}

.pg-article .pg-prose .pg-ul li::before {
	background: hsl(var(--accent));
	border-radius: 50%;
	content: "";
	height: .42rem;
	inset-block-start: .62em;
	inset-inline-start: .2rem;
	position: absolute;
	width: .42rem;
}

.pg-article .pg-prose .pg-note { margin-block: 2rem; }

/* Pannello CTA e correlati in fondo all'articolo */
.pg-article__cta { margin-block-start: 3.5rem; }

.pg-related { border-block-start: 1px solid hsl(var(--border)); margin-block-start: 4rem; padding-block-start: 2.5rem; }
.pg-related__title { font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.02em; margin-block-end: 2rem; }

@media (max-width: 640px) {
	.pg-article__lead { font-size: 1.075rem; }
}

/* CTA in coda alla lista blog: bottone centrato su filetto */
.pg-blog__cta { border-block-start: 1px solid hsl(var(--border)); display: flex; justify-content: center; padding-block-start: 3rem; }

/* I correlati respirano oltre la colonna di lettura, come in origine */
.pg-article__related { margin-inline: auto; max-width: 62rem; }

/* --- Paginazione blog (lato client, sul set filtrato) --------------------- */
.pg-pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-block-start: 3.25rem; }
.pg-pager[hidden] { display: none; }

.pg-pager__btn {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 1px solid hsl(var(--border));
	border-radius: 8px;
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	display: inline-flex;
	font: 500 .875rem/1 var(--font-body, inherit);
	justify-content: center;
	min-width: 2.5rem;
	padding: .6rem .7rem;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pg-pager__btn:hover:not([aria-disabled="true"]):not([aria-current="page"]) { border-color: hsl(var(--primary) / .5); color: hsl(var(--foreground)); }
.pg-pager__btn[aria-current="page"] { background: hsl(var(--primary)); border-color: transparent; color: hsl(var(--primary-foreground)); }
.pg-pager__btn[aria-disabled="true"] { cursor: default; opacity: .4; }
.pg-pager__btn--arrow { font-size: 1.15rem; line-height: 1; }

/* --- Copertina della card blog (intro image come cover) ------------------- */
/* Con la copertina la card parte dall'immagine: niente filetto/padding in cima. */
.pg-post--cover { border-block-start: 0; padding-block-start: 0; }

.pg-post__cover {
	aspect-ratio: 1 / 1;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	display: block;
	margin-block-end: 1.25rem;
	overflow: hidden;
}

.pg-post__cover img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
	transition: transform var(--transition-smooth);
}

.pg-post--cover:hover .pg-post__cover img { transform: scale(1.03); }

/* ==========================================================================
   22. PAGINA CONTATTI
   Modulo a sinistra (pannello a filetto), recapiti + WhatsApp + mappa a destra.
   I campi ereditano gli stili form globali (sez. iniziale), che varranno anche
   per RSForm. Niente card glowy: filetto 1px come materiale.
   ========================================================================== */

.pg-contact {
	align-items: start;
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

/* --- Modulo --------------------------------------------------------------- */
.pg-form {
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pg-form h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .25rem; }

.pg-field { display: flex; flex-direction: column; }
.pg-field input,
.pg-field textarea { width: 100%; }
.pg-field textarea { resize: vertical; min-height: 8rem; }
.pg-field__opt { color: hsl(var(--muted-foreground)); font-weight: 400; }

.pg-field-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pg-consent {
	align-items: flex-start;
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	display: flex;
	font-size: .875rem;
	font-weight: 400;
	gap: .6rem;
	line-height: 1.5;
	margin-block-end: 0;
}

.pg-consent input {
	accent-color: hsl(var(--primary));
	flex: 0 0 auto;
	height: 1rem;
	margin-block-start: .15rem;
	width: 1rem;
}

.pg-consent a { color: hsl(var(--primary)); }

/* --- Colonna recapiti ----------------------------------------------------- */
.pg-contact__info { display: flex; flex-direction: column; gap: 1.75rem; }

/* Tasto WhatsApp: affordance riconoscibile, non decorazione */
.pg-btn--whatsapp {
	background: #25d366;
	border: 1px solid transparent;
	color: #0a2e1b;
}
.pg-btn--whatsapp:hover { background: #1faa54; color: #fff; }

@media (max-width: 900px) {
	.pg-contact { gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.pg-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   23. PERFORMANCE — casi studio con grafici (Chart.js)
   Card dati (bordo 1px), KPI in griglia, cornice grafico su superficie
   elevata, risultati a check, citazione a filetto. Badge colorato per tipo
   di caso (color-mix su --c). Grafici renderizzati da performance.js.
   ========================================================================== */

.pg-perf-hero { text-align: center; }
.pg-perf-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -.035em; line-height: 1.06; margin: 0 auto; max-width: 16ch; }
.pg-perf-hero__lede { color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.7; margin: 1.5rem auto 0; max-width: 60ch; }
.pg-perf-chips { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: center; margin-block-start: 2rem; }
.pg-perf-chips span {
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: 999px;
	color: hsl(var(--foreground));
	font-size: .875rem;
	font-weight: 500;
	padding: .5rem 1rem;
}

/* --- Griglia dei casi ----------------------------------------------------- */
.pg-cases { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.pg-case {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

.pg-case__head { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.pg-case__badge {
	align-items: center;
	background: color-mix(in srgb, var(--c, hsl(var(--primary))) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--c, hsl(var(--primary))) 42%, transparent);
	border-radius: 999px;
	color: var(--c, hsl(var(--primary)));
	display: inline-flex;
	font-size: .75rem;
	font-weight: 600;
	gap: .4rem;
	letter-spacing: .02em;
	padding: .25rem .7rem;
}
.pg-case__head .pg-i { color: var(--c, hsl(var(--primary))); flex: 0 0 auto; }

.pg-case__sector { color: hsl(var(--muted-foreground)); font-size: .8125rem; margin-block: 1.25rem 0; }
.pg-case__headline { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; margin-block: .4rem 0; }
.pg-case__context { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.65; margin-block: .85rem 0; }

/* --- KPI ------------------------------------------------------------------ */
.pg-metrics { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 1.5rem; }
.pg-metric {
	align-items: center;
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 6.5rem;
	padding: 1rem .5rem;
	text-align: center;
}
.pg-metric__v { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.1; }
.pg-metric__l { color: hsl(var(--muted-foreground)); font-size: .72rem; line-height: 1.3; margin-block-start: .5rem; }

/* --- Cornice grafico ------------------------------------------------------ */
.pg-chart-frame {
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	margin-block-start: 1.5rem;
	padding: 1.15rem;
}
.pg-chart-frame figcaption { color: hsl(var(--muted-foreground)); font-size: .78rem; font-weight: 600; letter-spacing: .02em; margin-block-end: .9rem; }
.pg-chart-wrap { height: 300px; position: relative; width: 100%; }
.pg-chart-wrap--sm { height: 240px; }
.pg-chart-note { color: hsl(var(--muted-foreground)); font-size: .78rem; font-style: italic; margin-block-start: .75rem; text-align: center; }
.pg-chart-twin { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Risultati + citazione ------------------------------------------------ */
.pg-results { display: flex; flex-direction: column; gap: .65rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.pg-results li { color: hsl(var(--foreground)); display: flex; font-size: .9375rem; gap: .65rem; line-height: 1.55; }
.pg-results .pg-i { color: hsl(var(--primary)); flex: 0 0 auto; margin-block-start: .15rem; }

.pg-quote {
	background: hsl(var(--secondary));
	border-inline-start: 3px solid hsl(var(--primary));
	border-radius: 0 var(--radius) var(--radius) 0;
	margin-block-start: 1.5rem;
	padding: 1.15rem 1.25rem;
}
.pg-quote p { color: hsl(var(--foreground)); font-size: .9375rem; font-style: italic; line-height: 1.6; margin: 0; }
.pg-quote cite { color: hsl(var(--muted-foreground)); display: block; font-size: .8125rem; font-style: normal; margin-block-start: .65rem; }

@media (max-width: 980px) {
	.pg-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.pg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg-chart-twin { grid-template-columns: minmax(0, 1fr); }
}

/* --- Campo telefono internazionale (intl-tel-input) dentro RSForm --------- */
/* La libreria arriva col dropdown chiaro: lo si porta sul tema scuro. */
.iti__dropdown-content {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius-sm);
	box-shadow: 0 12px 32px hsl(240 40% 3% / .55);
	color: hsl(var(--foreground));
}
.iti__search-input {
	background: hsl(var(--secondary)) !important;
	border: 0 !important;
	border-bottom: 1px solid hsl(var(--border)) !important;
	border-radius: 0 !important;
	color: hsl(var(--foreground)) !important;
}
.iti__country,
.iti__country-name { color: hsl(var(--foreground)); }
.iti__country:hover,
.iti__country.iti__highlight { background: hsl(var(--secondary)); }
.iti__country:hover .iti__country-name,
.iti__country.iti__highlight .iti__country-name { color: hsl(var(--foreground)); }
.iti__dial-code { color: hsl(var(--muted-foreground)); }
.iti__selected-country,
.iti__selected-country-primary { color: hsl(var(--foreground)); }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: hsl(var(--muted) / .4); }


/* ==========================================================================
   24. RADAR AI — /checkup
   Solo lo schermo radar condiviso (idle, nell'hero) + il layout di pagina
   (hero, card strumento, indice aree, FAQ). Tutto cio' che appartiene al
   form RSForm 4 in senso stretto - stile dei campi, bottone submit nascosto,
   animazione della pagina 2, l'intero pannello risultati (score/barre/
   criticita'/soluzioni/CTA) - vive nel campo CSS del form stesso (RSForm 4 >
   Design > CSS e JavaScript), cosi' resta tutto insieme a quel form invece
   che sparso in un file di template condiviso. Filetti 1px per liste
   (criticità/soluzioni), niente card impilate con ombra.
   ========================================================================== */

/* --- Schermo radar (prototipo approvato, invariato nello stato idle) ------ */
.pg-radar {
	--size: min(78vw, 320px);
	--scan: 8s;
	position: relative;
	width: var(--size); height: var(--size);
	margin-inline: auto;
	display: grid; place-items: center;
}
.pg-radar::before {
	content: ""; position: absolute; inset: -14%;
	background:
		radial-gradient(circle at 50% 50%, hsl(292 69% 49% / .22), transparent 62%),
		radial-gradient(circle at 62% 38%, hsl(25 95% 53% / .10), transparent 60%);
	filter: blur(8px);
	animation: pg-radar-glow 6s ease-in-out infinite;
}
@keyframes pg-radar-glow { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }

.pg-radar__screen {
	position: relative; width: 100%; height: 100%; border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 50% 50%, hsl(240 30% 9%), hsl(240 30% 6%) 70%, hsl(240 32% 5%));
	border: 1px solid hsl(292 69% 49% / .35);
	box-shadow:
		inset 0 0 60px hsl(292 69% 49% / .10),
		inset 0 0 0 1px hsl(240 20% 100% / .02),
		0 30px 80px -30px hsl(240 60% 2% / .9);
}

.pg-radar__rings {
	position: absolute; inset: 0; border-radius: 50%;
	background: repeating-radial-gradient(circle at 50% 50%,
		transparent 0, transparent calc(100% / 5 - 1px),
		hsl(292 60% 62% / .2) calc(100% / 5 - 1px), hsl(292 60% 62% / .2) calc(100% / 5));
}

.pg-radar__grid {
	position: absolute; inset: 0;
	background:
		linear-gradient(hsl(292 60% 60% / .14), hsl(292 60% 60% / .14)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(hsl(292 60% 60% / .14), hsl(292 60% 60% / .14)) 0 50% / 100% 1px no-repeat;
}
.pg-radar__grid::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(45deg, transparent calc(50% - .5px), hsl(292 60% 60% / .07) calc(50% - .5px), hsl(292 60% 60% / .07) calc(50% + .5px), transparent calc(50% + .5px)),
		linear-gradient(-45deg, transparent calc(50% - .5px), hsl(292 60% 60% / .07) calc(50% - .5px), hsl(292 60% 60% / .07) calc(50% + .5px), transparent calc(50% + .5px));
}

.pg-radar__sweep {
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(from 0deg,
		hsl(292 80% 60% / .38) 0deg, hsl(292 80% 60% / .10) 22deg,
		transparent 60deg, transparent 360deg);
	mix-blend-mode: screen;
	animation: pg-radar-sweep var(--scan) linear infinite;
}
.pg-radar__sweep::after {
	content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 50%;
	transform-origin: bottom;
	background: linear-gradient(hsl(25 95% 60% / 0), hsl(292 85% 66% / .9));
	box-shadow: 0 0 10px hsl(292 85% 66% / .6);
}
@keyframes pg-radar-sweep { to { transform: rotate(360deg) } }

.pg-radar__blip {
	position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
	transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * var(--size) / -2)) rotate(calc(var(--a) * -1));
	background: radial-gradient(circle, hsl(var(--c, 292 80% 62%) / .95), hsl(var(--c, 292 80% 62%) / .2) 68%, transparent);
	opacity: .6;
	box-shadow: 0 0 0 1px hsl(var(--c, 292 80% 62%) / .3), 0 0 12px hsl(var(--c, 292 80% 62%) / .4);
	transition: opacity .3s ease;
}
.pg-radar__blip::after {
	content: ""; position: absolute; inset: -5px; border-radius: 50%;
	border: 1px solid hsl(var(--c, 292 80% 62%) / .22);
}

.pg-radar__core {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 12px; height: 12px; border-radius: 50%;
	background: radial-gradient(circle, hsl(25 95% 62%), hsl(292 80% 58%));
	box-shadow: 0 0 0 4px hsl(292 69% 49% / .16), 0 0 18px hsl(292 80% 60% / .6);
	animation: pg-radar-core 3.2s ease-in-out infinite;
}
@keyframes pg-radar-core { 0%, 100% { box-shadow: 0 0 0 4px hsl(292 69% 49% / .16), 0 0 18px hsl(292 80% 60% / .55) } 50% { box-shadow: 0 0 0 7px hsl(292 69% 49% / .06), 0 0 26px hsl(292 80% 60% / .8) } }

/* --- Hero full width (.pg-bleed): titolo/sottotitolo a sinistra, radar a
   destra, mai sovrapposti — niente trasparenze necessarie per leggerli.
   Griglia Bootstrap (.row/.col-md-*), non una griglia custom. ------------ */
body.itemid-113 #sp-main-body { padding-top: 0; }

.pg-radar-hero { padding-block: 1.5rem 2.5rem; }
.pg-radar-hero__title { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
.pg-radar-hero__lede { font-size: 1.0625rem; max-width: 34ch; }
.pg-radar-hero__meta { font-size: .8rem; }
.pg-radar-hero__visual { display: flex; justify-content: center; }
.pg-radar-hero__visual .pg-radar { --size: min(60vw, 380px); margin-inline: 0; }
@media (max-width: 767px) {
	.pg-radar-hero__visual .pg-radar { margin-inline: auto; }
	.pg-radar-hero { padding-block-start: 5.5rem; }
}

/* --- Strumento: card pulita e opaca (come in checkup), campi impilati a
   piena larghezza e ingranditi, indice piatto delle 7 aree in fondo. ----- */
.pg-radar-tool { max-width: 34rem; margin-inline: auto; }
.pg-radar-narrow { max-width: 44rem; }

.pg-radar-status-line {
	text-align: center;
	font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
	color: hsl(292 40% 78%);
	margin: 0 0 1.25rem;
}
.pg-radar-status-line b { color: hsl(var(--foreground)); font-weight: 600; }

/* --- Le 7 aree, riproposte in fondo alla card come indice piatto (icona +
   etichetta, niente riquadri): lo stesso elenco che il radar rappresenta. */
.pg-radar-areas { border-block-start: 1px solid hsl(var(--border)); margin-block-start: 2rem; padding-block-start: 1.75rem; }
.pg-radar-areas__label {
	text-align: center; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
	color: hsl(var(--muted-foreground)); font-weight: 600; margin: 0 0 1.25rem;
}
.pg-radar-areas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem .5rem; text-align: center; }
@media (min-width: 560px) { .pg-radar-areas__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.pg-radar-areas__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pg-radar-areas__item svg { color: hsl(var(--primary)); }
.pg-radar-areas__item span { font-size: .68rem; color: hsl(var(--muted-foreground)); line-height: 1.3; }

/* --- Stato "scanning": sweep piu' veloce, blip accesi in sequenza --------- */
#radar-app[data-phase="scanning"] .pg-radar { --scan: 1.6s; }
#radar-app[data-phase="scanning"] .pg-radar__blip {
	opacity: 1;
	animation: pg-radar-blip-pulse 1.8s ease-in-out infinite;
}
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(1) { animation-delay: 0s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(2) { animation-delay: .2s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(3) { animation-delay: .4s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(4) { animation-delay: .6s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(5) { animation-delay: .8s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(6) { animation-delay: 1s }
#radar-app[data-phase="scanning"] .pg-radar__blip:nth-of-type(7) { animation-delay: 1.2s }
@keyframes pg-radar-blip-pulse { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }

#radar-app[data-phase="scanning"] .pg-radar-tool { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.pg-radar__sweep, .pg-radar__screen, .pg-radar::before, .pg-radar__core, .pg-radar__blip { animation: none; }
}

/* Il resto (campi/bottone del form, animazione pagina 2, pannello risultati
   score/barre/criticita'/soluzioni/CTA, .pg-radar-error) vive nel campo CSS
   di RSForm 4 - vedi nota in cima a questa sezione. */

/* FAQ: riusa il pattern globale .pg-faq (vedi sez. 13/iniziale) — niente
   ridefinizione qui, era la causa della doppia icona sul summary. */