/* ============================================================
   PANDA DIGITAL — Design system del sito
   Costruito sui token di brand-assets/design-tokens.css
   1. Token          5. Componenti
   2. Base           6. Sezioni Elementor
   3. Header         7. Blog
   4. Footer         8. Responsive
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
	--pd-navy: #021D3D;
	--pd-navy-800: #0A2A4E;
	--pd-blue: #175CF5;
	--pd-blue-700: #0F47C9;
	--pd-teal: #05C6BB;
	--pd-teal-800: #03736D;  /* 5.7:1 su bianco — #048B84 si fermava a 4.2 */

	--pd-gradient: linear-gradient(135deg, #175CF5 0%, #05C6BB 100%);
	--pd-gradient-soft: linear-gradient(135deg, rgba(23, 92, 245, .10) 0%, rgba(5, 198, 187, .10) 100%);

	--pd-paper: #F4F7FB;
	--pd-surface: #FFFFFF;
	--pd-border: #DCE3EE;
	--pd-ink: #0B1E38;
	--pd-muted: #566683;
	--pd-ink-light: #E8EEF6;
	--pd-muted-light: #A9BEDC;

	--pd-font-display: "Sora", system-ui, -apple-system, sans-serif;
	--pd-font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	--pd-font-mono: "IBM Plex Mono", ui-monospace, monospace;

	--pd-radius-sm: 8px;
	--pd-radius-md: 14px;
	--pd-radius-lg: 24px;
	--pd-radius-pill: 999px;

	--pd-shadow-sm: 0 1px 2px rgba(2, 29, 61, .06), 0 2px 8px rgba(2, 29, 61, .06);
	--pd-shadow-md: 0 12px 32px rgba(2, 29, 61, .12);
	--pd-shadow-lg: 0 24px 64px rgba(2, 29, 61, .16);

	--pd-header-h: 84px;
	--pd-header-h-mobile: 70px;
}

/* ---------- 2. BASE ---------- */
body,
#qodef-page-wrapper {
	background-color: var(--pd-surface);
	color: var(--pd-ink);
	font-family: var(--pd-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

#qodef-page-inner,
#qodef-page-outer { padding: 0; }

h1, h2, h3, h4, h5, h6,
.qodef-h1, .qodef-h2, .qodef-h3, .qodef-h4, .qodef-h5, .qodef-h6,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--pd-font-display);
	color: var(--pd-ink);
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
	font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1.1em; color: var(--pd-ink); }
p:last-child { margin-bottom: 0; }

a { color: var(--pd-blue-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--pd-teal-800); }

::selection { background: rgba(23, 92, 245, .18); }

:focus-visible {
	outline: 3px solid var(--pd-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Testo su fondo scuro */
.pd-dark,
.pd-dark p,
.pd-dark li { color: var(--pd-muted-light); }

.pd-dark h1, .pd-dark h2, .pd-dark h3, .pd-dark h4,
.pd-dark .elementor-heading-title { color: #FFFFFF; }

/* Occhiello sopra i titoli */
.pd-eyebrow,
.pd-eyebrow .elementor-heading-title {
	font-family: var(--pd-font-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pd-teal-800) !important;
	margin-bottom: 14px;
	line-height: 1.4 !important;
}

.pd-dark .pd-eyebrow,
.pd-dark .pd-eyebrow .elementor-heading-title,
.pd-eyebrow--light { color: var(--pd-teal) !important; }

/* Testo introduttivo più grande */
.pd-lead,
.pd-lead p {
	font-size: 1.18rem;
	line-height: 1.6;
	color: var(--pd-muted);
}

.pd-dark .pd-lead,
.pd-dark .pd-lead p { color: var(--pd-muted-light); }

/* Parola evidenziata nel titolo */
.pd-mark {
	background: var(--pd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- 3. HEADER ---------- */
#qodef-page-header {
	background-color: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--pd-border);
	height: var(--pd-header-h);
	box-shadow: none;
}

#qodef-page-header-inner {
	height: var(--pd-header-h);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

#qodef-page-header .qodef-header-logo-link img { max-height: 40px; width: auto; }

.qodef-header-navigation > ul > li > a {
	font-family: var(--pd-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--pd-ink);
	text-transform: none;
}

.qodef-header-navigation > ul > li > a:hover,
.qodef-header-navigation > ul > li.current-menu-item > a,
.qodef-header-navigation > ul > li.current-menu-ancestor > a { color: var(--pd-blue); }

.qodef-header-navigation > ul > li > a .qodef-menu-item-text::after {
	background-color: var(--pd-blue);
	height: 2px;
}

/* Sottomenu */
.qodef-header-navigation .qodef-drop-down-second-inner {
	background-color: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-md);
	box-shadow: var(--pd-shadow-md);
	padding: 10px;
}

.qodef-header-navigation .qodef-drop-down-second-inner ul li a {
	font-size: 14.5px;
	color: var(--pd-ink);
	border-radius: var(--pd-radius-sm);
	padding: 9px 14px;
}

.qodef-header-navigation .qodef-drop-down-second-inner ul li a:hover {
	background: var(--pd-gradient-soft);
	color: var(--pd-blue);
}

/* Voce di menu-pulsante */
.qodef-header-navigation > ul > li.pd-nav-cta { margin-left: 10px; }

.qodef-header-navigation > ul > li.pd-nav-cta > a {
	background: var(--pd-gradient);
	color: #FFFFFF !important;
	border-radius: var(--pd-radius-pill);
	padding: 11px 22px !important;
	line-height: 1;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(23, 92, 245, .28);
	transition: transform .2s ease, box-shadow .2s ease;
}

.qodef-header-navigation > ul > li.pd-nav-cta > a:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(23, 92, 245, .36);
}

.qodef-header-navigation > ul > li.pd-nav-cta > a .qodef-menu-item-text::after { display: none; }

/* Switcher lingua */
.pd-langs { display: inline-flex; align-items: center; gap: 2px; }

.pd-langs__item {
	font-family: var(--pd-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--pd-muted);
	padding: 5px 9px;
	border-radius: var(--pd-radius-pill);
	line-height: 1;
	transition: background .2s ease, color .2s ease;
}

.pd-langs__item:hover { color: var(--pd-ink); background: var(--pd-paper); }
.pd-langs__item.is-current { color: #FFFFFF; background: var(--pd-navy); }

.pd-menu-langs { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--pd-border); }
.pd-menu-langs::after { display: none !important; }

/* Header mobile */
#qodef-page-mobile-header {
	background-color: rgba(255, 255, 255, .95);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--pd-border);
}

#qodef-page-mobile-header .qodef-mobile-header-logo-link img { max-height: 34px; width: auto; }
.qodef-mobile-header-navigation ul li a { color: var(--pd-ink); font-family: var(--pd-font-body); }
#qodef-page-mobile-header .qodef-mobile-header-opener { color: var(--pd-navy); }

/* ---------- 4. FOOTER ---------- */
#qodef-page-footer {
	background-color: var(--pd-navy);
	color: var(--pd-muted-light);
	position: relative;
	overflow: hidden;
}

#qodef-page-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 300px at 12% 0%, rgba(23, 92, 245, .22), transparent 70%),
		radial-gradient(520px 260px at 88% 10%, rgba(5, 198, 187, .16), transparent 70%);
	pointer-events: none;
}

#qodef-page-footer-top-area { padding: 78px 0 48px; position: relative; }
#qodef-page-footer-top-area-inner,
#qodef-page-footer-bottom-area-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

#qodef-page-footer .widget { margin-bottom: 0; }

#qodef-page-footer .qodef-widget-title,
#qodef-page-footer h1, #qodef-page-footer h2,
#qodef-page-footer h3, #qodef-page-footer h4, #qodef-page-footer h5 {
	color: #FFFFFF;
	font-family: var(--pd-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 20px;
}

#qodef-page-footer p,
#qodef-page-footer li,
#qodef-page-footer a { color: var(--pd-muted-light); font-size: 15px; }
#qodef-page-footer a:hover { color: var(--pd-teal); }

#qodef-page-footer ul { list-style: none; padding: 0; margin: 0; }
#qodef-page-footer li { margin-bottom: 11px; }

#qodef-page-footer-bottom-area {
	padding: 22px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, .10);
	position: relative;
}

#qodef-page-footer-bottom-area p { font-size: 13.5px; margin: 0; color: #7E93B5; }

.pd-footer-brand { display: flex; flex-direction: column; gap: 18px; }
.pd-footer-brand img { max-width: 190px; height: auto; }
.pd-footer-brand .pd-footer-claim { font-size: 15px; line-height: 1.6; max-width: 34ch; }

.pd-footer-social { display: flex; gap: 10px; margin-top: 4px; }

.pd-footer-social a {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--pd-radius-pill);
	color: #FFFFFF;
	transition: border-color .2s ease, background .2s ease;
}

.pd-footer-social a:hover { border-color: var(--pd-teal); background: rgba(5, 198, 187, .12); }
.pd-footer-social svg { width: 17px; height: 17px; }

.pd-footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.pd-footer-legal a { font-size: 13.5px; color: #7E93B5; }

/* ---------- 5. COMPONENTI ---------- */

/* Pulsanti */
.pd-btn,
.elementor-button.pd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--pd-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 17px 30px;
	border-radius: var(--pd-radius-pill);
	border: 1px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
	cursor: pointer;
	text-align: center;
}

.pd-btn:hover { transform: translateY(-2px); }

.pd-btn--gradient,
.elementor-button.pd-btn--gradient {
	background: var(--pd-gradient);
	color: #FFFFFF !important;
	box-shadow: 0 8px 24px rgba(23, 92, 245, .30);
}

.pd-btn--gradient:hover { box-shadow: 0 14px 32px rgba(23, 92, 245, .40); color: #FFFFFF !important; }

.pd-btn--navy,
.elementor-button.pd-btn--navy {
	background: var(--pd-navy);
	color: #FFFFFF !important;
}

.pd-btn--navy:hover { background: var(--pd-navy-800); }

.pd-btn--ghost,
.elementor-button.pd-btn--ghost {
	background: transparent;
	color: var(--pd-navy) !important;
	border-color: var(--pd-border);
}

.pd-btn--ghost:hover { border-color: var(--pd-blue); color: var(--pd-blue) !important; background: rgba(23, 92, 245, .04); }

.pd-btn--ghost-light,
.elementor-button.pd-btn--ghost-light {
	background: transparent;
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, .28);
}

.pd-btn--ghost-light:hover { border-color: var(--pd-teal); background: rgba(5, 198, 187, .10); color: #FFFFFF !important; }

/* Elementor: tutti i bottoni prendono la forma del brand */
.elementor-button-wrapper .elementor-button {
	font-family: var(--pd-font-body);
	font-weight: 600;
	border-radius: var(--pd-radius-pill);
	padding: 17px 30px;
	transition: transform .2s ease, box-shadow .2s ease;
}

/* Etichetta/chip */
.pd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--pd-font-mono);
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--pd-muted);
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-pill);
	padding: 8px 15px;
}

.pd-dark .pd-chip {
	color: #C9D8EE;
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .16);
}

.pd-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* Card generica */
.pd-card {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 32px;
	box-shadow: var(--pd-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	height: 100%;
}

.pd-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pd-shadow-md);
	border-color: rgba(23, 92, 245, .35);
}

/* Icon box di Elementor con lo stile del brand */
.pd-icon-card {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 34px 30px;
	box-shadow: var(--pd-shadow-sm);
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pd-icon-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pd-shadow-md);
	border-color: rgba(23, 92, 245, .35);
}

.pd-icon-card .elementor-icon {
	background: var(--pd-gradient-soft);
	border-radius: var(--pd-radius-md);
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	color: var(--pd-blue);
	margin-bottom: 6px;
}

.pd-icon-card .elementor-icon svg { width: 24px; height: 24px; fill: var(--pd-blue); }
.pd-icon-card .elementor-icon-box-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.pd-icon-card .elementor-icon-box-description { color: var(--pd-muted); font-size: 15.5px; line-height: 1.6; }

/* Card scura (sezioni navy) */
.pd-dark .pd-icon-card {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.pd-dark .pd-icon-card:hover { border-color: rgba(5, 198, 187, .45); background: rgba(255, 255, 255, .06); }
.pd-dark .pd-icon-card .elementor-icon { background: rgba(5, 198, 187, .14); color: var(--pd-teal); }
.pd-dark .pd-icon-card .elementor-icon svg { fill: var(--pd-teal); }
.pd-dark .pd-icon-card .elementor-icon-box-title { color: #FFFFFF; }
.pd-dark .pd-icon-card .elementor-icon-box-description { color: var(--pd-muted-light); }

/* Numeri e dati */
.pd-stat { display: flex; flex-direction: column; gap: 6px; }
.pd-stat__value { font-family: var(--pd-font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; }
.pd-stat__value--gradient { background: var(--pd-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-stat__label { font-size: 14.5px; color: var(--pd-muted); }
.pd-dark .pd-stat__label { color: var(--pd-muted-light); }

/* Elenco con spunte */
.pd-check-list ul,
ul.pd-check-list { list-style: none; padding: 0; margin: 0; }

.pd-check-list li,
.pd-check-list .elementor-icon-list-item {
	position: relative;
	padding-left: 32px;
	margin-bottom: 13px;
	font-size: 16px;
	color: var(--pd-ink);
	line-height: 1.55;
}

.pd-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pd-gradient-soft);
	background-image: var(--pd-gradient);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

.pd-check-list li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: calc(.35em + 6px);
	width: 10px;
	height: 6px;
	border-left: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
	transform: rotate(-45deg);
}

.pd-dark .pd-check-list li { color: var(--pd-muted-light); }

/* Passi del metodo */
.pd-steps { display: grid; gap: 22px; counter-reset: pdstep; }

.pd-step {
	position: relative;
	padding: 30px 30px 30px 84px;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	counter-increment: pdstep;
}

.pd-step::before {
	content: counter(pdstep, decimal-leading-zero);
	position: absolute;
	left: 28px;
	top: 30px;
	font-family: var(--pd-font-mono);
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	background: var(--pd-gradient);
	border-radius: 9px;
	padding: 5px 9px;
	line-height: 1.2;
}

.pd-step h3 { font-size: 1.15rem; margin: 0 0 8px; }
.pd-step p { color: var(--pd-muted); font-size: 15.5px; margin: 0; }

/* Mockup SVG */
.pd-mockup-wrap { display: flex; justify-content: center; perspective: 1200px; }
.pd-mockup { width: 100%; max-width: 320px; height: auto; }
.pd-mockup-wrap--tilt .pd-mockup { transform: rotate3d(1, -.35, 0, 10deg); transition: transform .5s ease; }
.pd-mockup-wrap--tilt:hover .pd-mockup { transform: rotate3d(1, -.35, 0, 4deg) translateY(-6px); }

/* Blocco CTA */
.pd-cta {
	position: relative;
	overflow: hidden;
	background: var(--pd-navy);
	border-radius: var(--pd-radius-lg);
	padding: 72px 48px;
	text-align: center;
}

.pd-cta__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(420px 220px at 18% 12%, rgba(23, 92, 245, .40), transparent 70%),
		radial-gradient(420px 240px at 84% 88%, rgba(5, 198, 187, .30), transparent 70%);
}

.pd-cta__inner { position: relative; max-width: 620px; margin: 0 auto; }
.pd-cta__title { color: #FFFFFF; font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 16px; }
.pd-cta__text { color: var(--pd-muted-light); font-size: 1.08rem; margin: 0 0 32px; }
.pd-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Schede contatto */
.pd-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.pd-contact-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 28px;
	box-shadow: var(--pd-shadow-sm);
}

.pd-contact-card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--pd-radius-md);
	background: var(--pd-gradient-soft);
	color: var(--pd-blue);
	display: grid;
	place-items: center;
	margin-bottom: 10px;
}

.pd-contact-card__icon svg { width: 21px; height: 21px; }
.pd-contact-card__label { font-family: var(--pd-font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-muted); }
.pd-contact-card__value { font-family: var(--pd-font-display); font-size: 1.05rem; font-weight: 600; color: var(--pd-ink); word-break: break-word; }
.pd-contact-card__value a { color: var(--pd-ink); }
.pd-contact-card__value a:hover { color: var(--pd-blue); }
.pd-contact-card__note { font-size: 14px; color: var(--pd-muted); }

/* Fondatori */
.pd-founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

.pd-founder {
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 34px;
	box-shadow: var(--pd-shadow-sm);
}

.pd-founder__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }

.pd-avatar {
	width: 62px;
	height: 62px;
	flex: none;
	border-radius: var(--pd-radius-pill);
	background: var(--pd-gradient);
	color: #FFFFFF;
	font-family: var(--pd-font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .02em;
	display: grid;
	place-items: center;
}

.pd-founder__name { font-size: 1.25rem; margin: 0 0 2px; }
.pd-founder__role { font-family: var(--pd-font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--pd-teal-800); margin: 0; }
.pd-founder__bio { color: var(--pd-muted); font-size: 15.5px; margin: 0 0 20px; }
.pd-founder__skills { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }

.pd-founder__skills li {
	font-family: var(--pd-font-mono);
	font-size: 12px;
	color: var(--pd-muted);
	background: var(--pd-paper);
	border-radius: var(--pd-radius-pill);
	padding: 6px 13px;
}

.pd-founder__mail { font-size: 14.5px; font-weight: 500; }

/* Prezzi */
.pd-price .elementor-widget-container { height: 100%; }

.pd-price-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 36px 32px;
	box-shadow: var(--pd-shadow-sm);
}

.pd-price-card--featured {
	border-color: transparent;
	box-shadow: var(--pd-shadow-lg);
	position: relative;
	background:
		linear-gradient(var(--pd-surface), var(--pd-surface)) padding-box,
		var(--pd-gradient) border-box;
	border: 2px solid transparent;
}

.pd-price-card__badge {
	position: absolute;
	top: -13px;
	left: 32px;
	background: var(--pd-gradient);
	color: #FFFFFF;
	font-family: var(--pd-font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: var(--pd-radius-pill);
}

.pd-price-card__name { font-family: var(--pd-font-display); font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; }
.pd-price-card__for { font-size: 14.5px; color: var(--pd-muted); margin: 0 0 22px; }
.pd-price-card__price { font-family: var(--pd-font-display); font-size: 2.5rem; font-weight: 700; line-height: 1; margin: 0; }
.pd-price-card__from { font-family: var(--pd-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); display: block; margin-bottom: 6px; }
.pd-price-card__note { font-size: 13.5px; color: var(--pd-muted); margin: 8px 0 24px; }
.pd-price-card ul { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.pd-price-card .pd-price-card__cta { margin-top: auto; width: 100%; }

/* Tabella comparativa */
.pd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.pd-table th, .pd-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--pd-border); }
.pd-table thead th { font-family: var(--pd-font-display); font-size: 14px; font-weight: 600; color: var(--pd-ink); background: var(--pd-paper); }
.pd-table thead th:first-child { border-top-left-radius: var(--pd-radius-md); }
.pd-table thead th:last-child { border-top-right-radius: var(--pd-radius-md); }
.pd-table td { color: var(--pd-muted); }
.pd-table td strong { color: var(--pd-ink); font-weight: 600; }

/* Domande frequenti (accordion di Elementor) */
.pd-faq .elementor-accordion .elementor-accordion-item {
	border: 1px solid var(--pd-border) !important;
	border-radius: var(--pd-radius-md);
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--pd-surface);
}

.pd-faq .elementor-tab-title {
	font-family: var(--pd-font-display) !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	padding: 20px 24px !important;
	color: var(--pd-ink) !important;
}

.pd-faq .elementor-tab-title.elementor-active { color: var(--pd-blue) !important; }
.pd-faq .elementor-tab-content { padding: 0 24px 22px !important; color: var(--pd-muted); font-size: 15.5px; border: 0 !important; }

/* Form di contatto (CF7) */
.pd-form .wpcf7-form { display: grid; gap: 18px; }
.pd-form .pd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pd-form label { display: block; font-size: 14px; font-weight: 600; color: var(--pd-ink); margin-bottom: 7px; font-family: var(--pd-font-body); }

.pd-form input[type="text"],
.pd-form input[type="email"],
.pd-form input[type="tel"],
.pd-form select,
.pd-form textarea {
	width: 100%;
	font-family: var(--pd-font-body);
	font-size: 16px;
	color: var(--pd-ink);
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-md);
	padding: 14px 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.pd-form textarea { min-height: 148px; resize: vertical; }

.pd-form input:focus,
.pd-form select:focus,
.pd-form textarea:focus {
	border-color: var(--pd-blue);
	box-shadow: 0 0 0 4px rgba(23, 92, 245, .12);
	outline: none;
}

.pd-form .wpcf7-submit {
	background: var(--pd-gradient);
	color: #FFFFFF;
	border: 0;
	border-radius: var(--pd-radius-pill);
	font-family: var(--pd-font-body);
	font-size: 16px;
	font-weight: 600;
	padding: 17px 34px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(23, 92, 245, .28);
	transition: transform .2s ease, box-shadow .2s ease;
	justify-self: start;
}

.pd-form .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 92, 245, .36); }
.pd-form .pd-form-consent { font-size: 13.5px; color: var(--pd-muted); }
.pd-form .pd-form-consent a { text-decoration: underline; }
.pd-form .wpcf7-not-valid-tip { color: #C2334D; font-size: 13.5px; margin-top: 6px; }
.pd-form .wpcf7-response-output { border-radius: var(--pd-radius-md) !important; border-width: 1px !important; padding: 14px 18px !important; font-size: 15px; margin: 4px 0 0 !important; }

/* ---------- 6. SEZIONI ELEMENTOR ---------- */
.pd-section > .elementor-container { max-width: 1180px; }
.pd-section { padding-top: 92px; padding-bottom: 92px; }
.pd-section--tight { padding-top: 64px; padding-bottom: 64px; }
.pd-section--paper { background-color: var(--pd-paper); }
.pd-section--navy { background-color: var(--pd-navy); }

/* Eroe con aurora di brand */
.pd-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--pd-navy);
	padding-top: 150px;
	padding-bottom: 110px;
}

.pd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 420px at 8% -10%, rgba(23, 92, 245, .55), transparent 62%),
		radial-gradient(680px 420px at 92% 12%, rgba(5, 198, 187, .30), transparent 62%),
		radial-gradient(500px 300px at 50% 110%, rgba(23, 92, 245, .22), transparent 70%);
	pointer-events: none;
}

.pd-hero > .elementor-container { position: relative; z-index: 2; }

.pd-hero .elementor-heading-title { color: #FFFFFF; }
.pd-hero-title .elementor-heading-title { font-size: clamp(2.4rem, 5vw, 3.9rem) !important; letter-spacing: -.025em; }

/* Intestazione interna (pagine non-home) */
.pd-pagehead { padding-top: 142px; padding-bottom: 76px; background-color: var(--pd-navy); position: relative; overflow: hidden; }

.pd-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(620px 320px at 10% 0%, rgba(23, 92, 245, .45), transparent 65%),
		radial-gradient(520px 300px at 90% 20%, rgba(5, 198, 187, .24), transparent 65%);
}

.pd-pagehead > .elementor-container { position: relative; z-index: 2; }

/* Bordo superiore sfumato su una sezione */
.pd-section--edge { border-top: 1px solid var(--pd-border); }

/* Griglia di colonne uguali */
.pd-equal .elementor-column-wrap,
.pd-equal .elementor-widget-wrap { height: 100%; }

/* Pagina senza barra del titolo del tema padre */
.pd-no-title #qodef-page-title { display: none; }

/* ---------- 7. BLOG ---------- */
.pd-blog-hero { padding: 142px 0 60px; background: var(--pd-navy); }

.qodef-blog-item .qodef-e-title { font-family: var(--pd-font-display); font-size: 1.3rem; }
.qodef-blog-item .qodef-e-title a { color: var(--pd-ink); }
.qodef-blog-item .qodef-e-title a:hover { color: var(--pd-blue); }
.qodef-blog-item .qodef-e-info a,
.qodef-blog-item .qodef-e-info span { font-family: var(--pd-font-mono); font-size: 12.5px; color: var(--pd-muted); }
.qodef-blog-item .qodef-e-excerpt { color: var(--pd-muted); font-size: 15.5px; }

.pd-post-meta { font-family: var(--pd-font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--pd-muted); text-transform: uppercase; }

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.pd-section { padding-top: 70px; padding-bottom: 70px; }
	.pd-hero { padding-top: 120px; padding-bottom: 80px; }
	.pd-pagehead { padding-top: 112px; padding-bottom: 56px; }
	#qodef-page-header-inner { padding: 0 24px; }
	#qodef-page-footer-top-area-inner,
	#qodef-page-footer-bottom-area-inner { padding: 0 24px; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	.pd-section { padding-top: 56px; padding-bottom: 56px; }
	.pd-hero { padding-top: 104px; padding-bottom: 64px; }
	.pd-pagehead { padding-top: 96px; padding-bottom: 46px; }
	.pd-cta { padding: 48px 26px; }
	.pd-card, .pd-founder, .pd-price-card { padding: 26px; }
	.pd-step { padding: 26px 24px 26px 24px; }
	.pd-step::before { position: static; display: inline-block; margin-bottom: 12px; }
	.pd-form .pd-form-row { grid-template-columns: 1fr; }
	.pd-footer-legal { justify-content: flex-start; }
	.pd-cta__actions { flex-direction: column; }
	.pd-cta__actions .pd-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.pd-btn:hover, .pd-card:hover, .pd-icon-card:hover { transform: none; }
}

/* ---------- 9. MICROANIMAZIONI ---------- */
.pd-js .pd-reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s cubic-bezier(.22, .9, .3, 1); }
.pd-js .pd-reveal.is-visible { opacity: 1; transform: none; }
#qodef-page-header.pd-scrolled { box-shadow: 0 6px 24px rgba(2, 29, 61, .07); }

@media (prefers-reduced-motion: reduce) {
	.pd-js .pd-reveal { opacity: 1; transform: none; }
}

/* ---------- 10. PROGETTI CONCEPT ---------- */
.pd-projects { display: grid; gap: 28px; }

.pd-project {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: center;
	background: var(--pd-surface);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-lg);
	padding: 40px;
	box-shadow: var(--pd-shadow-sm);
	transition: box-shadow .3s ease, border-color .3s ease;
}

.pd-project:hover { box-shadow: var(--pd-shadow-md); border-color: rgba(23, 92, 245, .30); }
.pd-project__visual { display: flex; justify-content: center; }
.pd-project__visual .pd-mockup { max-width: 260px; }

.pd-project__badge {
	display: inline-block;
	font-family: var(--pd-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pd-teal-800);
	background: rgba(5, 198, 187, .12);
	border-radius: var(--pd-radius-pill);
	padding: 5px 12px;
	margin-bottom: 14px;
}

.pd-project__name { font-size: 1.5rem; margin: 0 0 4px; }
.pd-project__sector { font-family: var(--pd-font-mono); font-size: 12.5px; color: var(--pd-muted); margin: 0 0 20px; }

.pd-project__label {
	font-family: var(--pd-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pd-muted);
	margin: 0 0 4px;
}

.pd-project__text { color: var(--pd-ink); font-size: 15.5px; margin: 0 0 18px; }
.pd-project .pd-chips { margin-top: 4px; }

.pd-dark .pd-project { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.pd-dark .pd-project__name { color: #FFFFFF; }
.pd-dark .pd-project__text { color: var(--pd-muted-light); }
.pd-dark .pd-project__badge { color: var(--pd-teal); background: rgba(5, 198, 187, .16); }

@media (max-width: 880px) {
	.pd-project { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
	.pd-project__visual .pd-mockup { max-width: 230px; }
}

/* ============================================================
   11. PRIORITÀ SUI WIDGET ELEMENTOR
   Elementor stampa i suoi CSS dopo i nostri: qui alziamo la
   specificità con #qodef-page-wrapper per far vincere il brand.
   ============================================================ */

#qodef-page-wrapper .elementor-widget-heading .elementor-heading-title {
	font-family: var(--pd-font-display);
	color: var(--pd-ink);
	letter-spacing: -.02em;
	line-height: 1.12;
}

#qodef-page-wrapper .pd-dark .elementor-heading-title,
#qodef-page-wrapper .pd-hero .elementor-heading-title,
#qodef-page-wrapper .pd-pagehead .elementor-heading-title { color: #FFFFFF; }

#qodef-page-wrapper .pd-eyebrow .elementor-heading-title {
	font-family: var(--pd-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pd-teal-800);
	line-height: 1.5;
}

#qodef-page-wrapper .pd-dark .pd-eyebrow .elementor-heading-title,
#qodef-page-wrapper .pd-hero .pd-eyebrow .elementor-heading-title,
#qodef-page-wrapper .pd-pagehead .pd-eyebrow .elementor-heading-title { color: var(--pd-teal); }

#qodef-page-wrapper .elementor-widget-text-editor {
	font-family: var(--pd-font-body);
	color: var(--pd-ink);
	font-size: 17px;
	line-height: 1.65;
}

#qodef-page-wrapper .pd-lead { font-size: 1.18rem; color: var(--pd-muted); }
#qodef-page-wrapper .pd-lead p { font-size: inherit; color: inherit; }

#qodef-page-wrapper .pd-dark .elementor-widget-text-editor,
#qodef-page-wrapper .pd-dark .elementor-widget-text-editor p,
#qodef-page-wrapper .pd-dark .pd-lead,
#qodef-page-wrapper .pd-dark .pd-lead p { color: var(--pd-muted-light); }

/* Icon box: la card è il widget stesso */
#qodef-page-wrapper .pd-icon-card .elementor-icon-box-title,
#qodef-page-wrapper .pd-icon-card .elementor-icon-box-title a {
	font-family: var(--pd-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--pd-ink);
	margin-bottom: 10px;
}

#qodef-page-wrapper .pd-icon-card .elementor-icon-box-description {
	font-family: var(--pd-font-body);
	color: var(--pd-muted);
	font-size: 15.5px;
	line-height: 1.6;
}

#qodef-page-wrapper .pd-icon-card .elementor-icon { font-size: 22px; }
#qodef-page-wrapper .pd-icon-card .elementor-icon i { color: var(--pd-blue); }
#qodef-page-wrapper .pd-icon-card:hover .elementor-icon-box-title,
#qodef-page-wrapper .pd-icon-card:hover .elementor-icon-box-title a { color: var(--pd-blue); }

#qodef-page-wrapper .pd-dark .pd-icon-card .elementor-icon-box-title { color: #FFFFFF; }
#qodef-page-wrapper .pd-dark .pd-icon-card .elementor-icon-box-description { color: var(--pd-muted-light); }
#qodef-page-wrapper .pd-dark .pd-icon-card .elementor-icon i { color: var(--pd-teal); }

/* La card ha bisogno di respiro interno anche senza wrapper Elementor */
.pd-icon-card { display: flex; }
.pd-icon-card > .elementor-icon-box-wrapper { width: 100%; }

/* Bottoni Elementor */
#qodef-page-wrapper .elementor-button {
	font-family: var(--pd-font-body);
	font-weight: 600;
	border-radius: var(--pd-radius-pill);
}

/* Griglia dei numeri "perché noi" */
.pd-why-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 28px;
}

.pd-why-grid .pd-stat__value { font-size: 3rem; }
.pd-dark .pd-why-grid .pd-stat__label { color: var(--pd-muted-light); }

@media (max-width: 680px) {
	.pd-why-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Elementor: colonne uguali in altezza dentro le nostre griglie */
.pd-equal .elementor-column,
.pd-equal .elementor-widget-wrap { display: flex; }
.pd-equal .elementor-widget-wrap > .elementor-element { width: 100%; }

/* ---------- 12. PAGINA CONTATTI ---------- */
.pd-contact-aside h3 { font-size: 1.15rem; margin: 0 0 18px; }
.pd-mini-steps { counter-reset: pdmini; list-style: none; padding: 0; margin: 0 0 22px; }

.pd-mini-steps li {
	counter-increment: pdmini;
	position: relative;
	padding-left: 42px;
	margin-bottom: 18px;
	font-size: 15.5px;
	color: var(--pd-muted);
	line-height: 1.55;
}

.pd-mini-steps li::before {
	content: counter(pdmini);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pd-gradient);
	color: #FFFFFF;
	font-family: var(--pd-font-mono);
	font-size: 13px;
	display: grid;
	place-items: center;
}

.pd-mini-steps li strong { color: var(--pd-ink); font-weight: 600; }

.pd-contact-aside__note {
	font-size: 14.5px;
	color: var(--pd-muted);
	border-top: 1px solid var(--pd-border);
	padding-top: 18px;
	margin: 0;
}

/* Simbolo grande come elemento grafico */
/* Contenuto testuale lungo (pagine legali, articoli) */
#qodef-page-wrapper .elementor-widget-text-editor h2 {
	font-size: 1.5rem;
	margin: 38px 0 14px;
}

#qodef-page-wrapper .elementor-widget-text-editor h2:first-child { margin-top: 0; }
#qodef-page-wrapper .elementor-widget-text-editor ul { margin: 0 0 18px; padding-left: 22px; }
#qodef-page-wrapper .elementor-widget-text-editor li { margin-bottom: 8px; }

/* Card della stessa altezza dentro le griglie */
.pd-equal .elementor-widget-html,
.pd-equal .elementor-widget-icon-box { display: flex; width: 100%; }
.pd-equal .elementor-widget-html > .pd-price-card,
.pd-equal .elementor-widget-html > .pd-card { width: 100%; }

/* Le aree interne del footer del tema padre hanno un grigio proprio: via */
#qodef-page-footer-top-area,
#qodef-page-footer-bottom-area { background-color: transparent; }

/* ---------- 13. INTESTAZIONE DI ARCHIVI E ARTICOLI ---------- */
.pd-pagehead--archive { padding: 142px 0 70px; }

.pd-pagehead__inner {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

.pd-pagehead__title {
	color: #FFFFFF;
	font-size: clamp(2rem, 4vw, 3.1rem);
	margin: 0 0 18px;
	max-width: 20ch;
}

.pd-pagehead--archive .pd-lead { color: var(--pd-muted-light); max-width: 60ch; margin: 0; }
.pd-pagehead__meta { color: var(--pd-teal); margin: 18px 0 0; }
.pd-pagehead__back { margin: 24px 0 0; }
.pd-pagehead__back a { color: var(--pd-muted-light); font-size: 15px; }
.pd-pagehead__back a:hover { color: var(--pd-teal); }

/* Lista articoli */
.qodef-blog .qodef-e-media-image img { border-radius: var(--pd-radius-lg); }
.qodef-blog-item { margin-bottom: 44px; }
.qodef-blog-item .qodef-e-title { margin: 12px 0 10px; }

/* Articolo singolo */
.qodef-blog-single .qodef-e-content,
.entry-content {
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--pd-ink);
	max-width: 46rem;
}

.qodef-blog-single .qodef-e-content h2,
.entry-content h2 { font-size: 1.75rem; margin: 46px 0 16px; }
.qodef-blog-single .qodef-e-content h3,
.entry-content h3 { font-size: 1.28rem; margin: 34px 0 12px; }
.qodef-blog-single .qodef-e-content ul,
.qodef-blog-single .qodef-e-content ol,
.entry-content ul, .entry-content ol { margin: 0 0 22px; padding-left: 24px; }
.qodef-blog-single .qodef-e-content li,
.entry-content li { margin-bottom: 10px; }
.qodef-blog-single .qodef-e-content strong,
.entry-content strong { color: var(--pd-ink); font-weight: 600; }
.qodef-blog-single .qodef-e-media,
.qodef-blog-single .qodef-e-info { margin-bottom: 26px; }

/* Il contenuto del blog ha bisogno del respiro delle nostre sezioni */
.blog #qodef-page-inner,
.archive #qodef-page-inner,
.search #qodef-page-inner,
.single #qodef-page-inner,
.error404 #qodef-page-inner { padding: 72px 0 96px; }

/* Articolo singolo.
   Il tema padre annida titolo e data dentro .qodef-e-content e rende i
   contenitori come inline-block: i margini automatici non centrano nulla. */
.single-post .qodef-blog-item,
.single-post .qodef-blog-item > .qodef-e-inner,
.single-post .qodef-e-content { display: block; }

.single-post .qodef-blog-item > .qodef-e-inner {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* Titolo e data stanno già nell'intestazione scura in cima alla pagina */
.single-post .qodef-e-content > .qodef-e-top-holder,
.single-post .qodef-e-text > .qodef-e-title { display: none; }

.single-post .qodef-e-content {
	max-width: none;
	font-size: 17.5px;
	line-height: 1.75;
}

.single-post .qodef-e-media { margin: 0 auto 40px; }
.single-post .qodef-e-media img { border-radius: var(--pd-radius-lg); }

/* Le copertine non devono rubare tutto lo schermo */
.single-post .qodef-e-media-image img,
.qodef-blog .qodef-e-media-image img { aspect-ratio: 40 / 21; object-fit: cover; }

/* ---------- 14. PAGINA 404 ---------- */
.pd-404 {
	position: relative;
	overflow: hidden;
	background: var(--pd-navy);
	padding: 150px 24px 120px;
	text-align: center;
}

.pd-404::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(620px 340px at 20% 0%, rgba(23, 92, 245, .48), transparent 66%),
		radial-gradient(520px 300px at 82% 90%, rgba(5, 198, 187, .26), transparent 66%);
}

.pd-404__inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }

.pd-404__code {
	display: block;
	font-family: var(--pd-font-display);
	font-size: clamp(5rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
	background: var(--pd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 8px;
}

.pd-404__title { color: #FFFFFF; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 14px; }
.pd-404__text { color: var(--pd-muted-light); font-size: 1.08rem; margin: 0 0 32px; }
.pd-404__actions { margin-bottom: 34px; }
.pd-404__links { justify-content: center; }
.pd-404__links .pd-chip { color: #C9D8EE; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
.pd-404__links .pd-chip:hover { border-color: var(--pd-teal); color: #FFFFFF; }
.error404 #qodef-page-inner { padding: 0; }

/* ---------- 15. HEADER SEMPRE VISIBILE ---------- */
/* Il wrapper del tema padre ha overflow:hidden, che impedisce position:sticky. */
#qodef-page-wrapper { overflow: clip visible; }

#qodef-page-header {
	position: sticky;
	top: 0;
	z-index: 120;
}

#qodef-page-mobile-header {
	position: sticky;
	top: 0;
	z-index: 120;
}

/* Le sezioni con aloni restano contenute anche senza overflow sul wrapper */
.pd-hero, .pd-pagehead, .pd-404, #qodef-page-footer { overflow: hidden; }

/* ---------- 16. IDENTITÀ DEI CONCEPT ---------- */
/* Ogni concept porta il brand del suo cliente: niente cornice uguale per tutti. */
.pd-project__visual .pd-mockup {
	max-width: 280px;
	filter: drop-shadow(0 18px 40px rgba(2, 29, 61, .18));
	transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}

.pd-project:hover .pd-mockup { transform: translateY(-8px) rotate(-.6deg); }

.pd-project__brand {
	border-top: 1px solid var(--pd-border);
	margin: 22px 0 18px;
	padding-top: 18px;
}

.pd-swatches { display: flex; gap: 8px; margin: 10px 0 10px; }

.pd-swatch {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(2, 29, 61, .12);
	display: inline-block;
}

.pd-project__brandnote { font-size: 13.5px; color: var(--pd-muted); margin: 0; }

/* Un accento diverso per ogni concept, ripreso dalla sua palette */
.pd-project--borgo:hover { border-color: rgba(194, 84, 45, .45); }
.pd-project--vesuvio:hover { border-color: rgba(224, 49, 49, .45); }
.pd-project--aurora:hover { border-color: rgba(110, 79, 107, .45); }
.pd-project--nova:hover { border-color: rgba(14, 15, 18, .45); }

.pd-project--borgo .pd-project__badge { color: #A8431F; background: rgba(194, 84, 45, .12); }
.pd-project--vesuvio .pd-project__badge { color: #C02626; background: rgba(224, 49, 49, .12); }
.pd-project--aurora .pd-project__badge { color: #6E4F6B; background: rgba(110, 79, 107, .12); }
.pd-project--nova .pd-project__badge { color: #2F3A12; background: rgba(200, 255, 61, .30); }

/* A colonne alterne: il mockup cambia lato, la pagina non è una lista uguale */
.pd-projects .pd-project:nth-child(even) { grid-template-columns: 1fr 300px; }
.pd-projects .pd-project:nth-child(even) .pd-project__visual { order: 2; }

@media (max-width: 880px) {
	.pd-projects .pd-project:nth-child(even) { grid-template-columns: 1fr; }
	.pd-projects .pd-project:nth-child(even) .pd-project__visual { order: 0; }
}

/* ============================================================
   17. MOVIMENTO
   Tutto quello che si muove sta qui, e tutto si spegne con
   prefers-reduced-motion. Niente animazioni sopra i 400 ms
   sulle cose che servono a leggere.
   ============================================================ */

/* --- Barra di avanzamento della lettura --- */
.pd-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	pointer-events: none;
	background: transparent;
}

.pd-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pd-gradient);
	transform-origin: left center;
	transition: width .12s linear;
}

/* --- Aurora dell'hero: due masse di luce che si muovono lentamente --- */
.pd-hero__aurora {
	position: absolute;
	inset: -10% -5%;
	pointer-events: none;
	z-index: 0;
}

.pd-hero__aurora i {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	will-change: transform;
}

.pd-hero__aurora i:nth-child(1) {
	width: 42vw;
	height: 42vw;
	min-width: 340px;
	min-height: 340px;
	background: #175CF5;
	top: -12%;
	left: -6%;
	animation: pdDrift1 22s ease-in-out infinite alternate;
}

.pd-hero__aurora i:nth-child(2) {
	width: 36vw;
	height: 36vw;
	min-width: 300px;
	min-height: 300px;
	background: #05C6BB;
	bottom: -18%;
	right: -4%;
	opacity: .38;
	animation: pdDrift2 26s ease-in-out infinite alternate;
}

.pd-hero__aurora i:nth-child(3) {
	width: 24vw;
	height: 24vw;
	min-width: 220px;
	min-height: 220px;
	background: #0F47C9;
	top: 42%;
	left: 46%;
	opacity: .30;
	animation: pdDrift3 30s ease-in-out infinite alternate;
}

@keyframes pdDrift1 { to { transform: translate3d(9vw, 6vh, 0) scale(1.12); } }
@keyframes pdDrift2 { to { transform: translate3d(-7vw, -5vh, 0) scale(1.08); } }
@keyframes pdDrift3 { to { transform: translate3d(-5vw, 7vh, 0) scale(.9); } }

/* --- Parola che ruota nel titolo --- */
.pd-rotator {
	display: inline-grid;
	vertical-align: baseline;
	text-align: left;
}

.pd-rotator__item {
	grid-area: 1 / 1;
	background: var(--pd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0;
	transform: translateY(.42em) rotateX(-40deg);
	transform-origin: 50% 0;
	transition: opacity .42s ease, transform .42s cubic-bezier(.22, .9, .3, 1);
	white-space: nowrap;
}

.pd-rotator__item.is-active { opacity: 1; transform: none; }
.pd-rotator__item.is-leaving { opacity: 0; transform: translateY(-.42em) rotateX(40deg); }

/* --- Nastro dei settori --- */
.pd-ticker {
	overflow: hidden;
	background: var(--pd-navy);
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	padding: 18px 0;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.pd-ticker__track {
	display: flex;
	width: max-content;
	gap: 0;
	animation: pdTicker 46s linear infinite;
}

.pd-ticker:hover .pd-ticker__track { animation-play-state: paused; }

.pd-ticker__group { display: flex; align-items: center; }

.pd-ticker__item {
	font-family: var(--pd-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: #C9D8EE;
	padding: 0 22px;
	white-space: nowrap;
}

.pd-ticker__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pd-gradient);
	flex: none;
}

@keyframes pdTicker { to { transform: translate3d(-50%, 0, 0); } }

/* --- Comparsa in sequenza --- */
.pd-js .pd-reveal { transition-delay: calc(var(--pd-i, 0) * 55ms); }

/* --- Mockup: righe che entrano una dopo l'altra, pallino che pulsa --- */
.pd-js .pd-mockup__row { opacity: 0; }

.pd-js .is-visible .pd-mockup__row {
	animation: pdRowIn .55s cubic-bezier(.22, .9, .3, 1) forwards;
}

@keyframes pdRowIn { from { opacity: 0; } to { opacity: 1; } }

.pd-mockup__pulse { transform-box: fill-box; transform-origin: center; animation: pdPulse 2.4s ease-in-out infinite; }

@keyframes pdPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .55; transform: scale(1.35); }
}

/* --- Mockup che galleggia e segue il puntatore --- */
.pd-mockup-wrap { --rx: 0deg; --ry: 0deg; }

.pd-mockup-wrap--tilt .pd-mockup,
.pd-hero .pd-mockup {
	transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--float, 0));
	transition: transform .35s cubic-bezier(.22, .9, .3, 1);
	will-change: transform;
}

.pd-hero .pd-mockup { animation: pdFloat 7s ease-in-out infinite; }

@keyframes pdFloat {
	0%, 100% { --float: 0px; }
	50% { --float: -14px; }
}

@property --float {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

/* --- Titoli di sezione: filo di luce che si allunga --- */
.pd-section-line { position: relative; padding-top: 4px; }

.pd-section-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--pd-gradient);
	transition: width .8s cubic-bezier(.22, .9, .3, 1) .1s;
}

.is-visible.pd-section-line::before { width: 64px; }

/* --- Card: il bordo si accende dal punto in cui passa il mouse --- */
.pd-icon-card { position: relative; overflow: hidden; }

.pd-icon-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity .35s ease;
	background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(23, 92, 245, .10), transparent 60%);
	pointer-events: none;
}

.pd-icon-card:hover::after { opacity: 1; }
.pd-dark .pd-icon-card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(5, 198, 187, .16), transparent 60%); }

.pd-icon-card .elementor-icon { transition: transform .35s cubic-bezier(.22, .9, .3, 1); }
.pd-icon-card:hover .elementor-icon { transform: translateY(-3px) scale(1.06); }

/* --- Numeri che salgono --- */
.pd-stat__value { font-variant-numeric: tabular-nums; }

/* --- Pulsanti: pressione fisica --- */
.pd-btn:active, .elementor-button:active { transform: translateY(1px) scale(.985); }

/* --- Tutto fermo per chi lo chiede --- */
@media (prefers-reduced-motion: reduce) {
	.pd-hero__aurora i,
	.pd-ticker__track,
	.pd-hero .pd-mockup,
	.pd-mockup__pulse { animation: none !important; }

	.pd-mockup__row { opacity: 1; animation: none !important; }
	.pd-rotator__item { transition: none; }
	.is-visible.pd-section-line::before { transition: none; width: 64px; }
}

/* Filo di luce centrato quando l'occhiello è centrato */
.pd-section-line--center::before { left: 50%; transform: translateX(-50%); }

/* Il nastro dei settori esce dai margini della griglia */
.pd-ticker-section > .elementor-container { max-width: none; }
.pd-ticker-section .elementor-column-wrap,
.pd-ticker-section .elementor-widget-wrap { padding: 0 !important; }
.pd-ticker-section .elementor-widget-shortcode { margin: 0; }

/* L'hero deve stare sopra il nastro, non sotto */
.pd-hero { z-index: 1; }

/* Il titolo con la parola che ruota ha bisogno di respiro fra le righe */
.pd-hero-title .elementor-heading-title { line-height: 1.1; }
.pd-rotator { padding-bottom: .06em; }

/* Il rotatore si stringe sulla parola attiva */
.pd-rotator { transition: width .42s cubic-bezier(.22, .9, .3, 1); }
.pd-rotator__item { justify-self: start; }

/* Colonne del footer impilate sul telefono: servono aria fra un blocco e l'altro */
@media (max-width: 1024px) {
	#qodef-page-footer-top-area .qodef-grid-item { margin-bottom: 38px; }
	#qodef-page-footer-top-area .qodef-grid-item:last-child { margin-bottom: 0; }
	#qodef-page-footer-bottom-area .qodef-grid-item { margin-bottom: 10px; }
}

/* Il nastro dei settori rallenta e si stringe sul telefono */
@media (max-width: 768px) {
	.pd-ticker { padding: 14px 0; }
	.pd-ticker__item { font-size: .95rem; padding: 0 16px; }
	.pd-ticker__track { animation-duration: 32s; }
}

/* ============================================================
   18. VETRINA DELL'HERO
   Tre telefoni, tre brand: lo studio si presenta con il lavoro,
   non con un prodotto proprio.
   ============================================================ */
.pd-showcase {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 500px;
	perspective: 1600px;
}

.pd-showcase__item {
	position: absolute;
	width: 166px;
	filter: drop-shadow(0 26px 50px rgba(2, 15, 35, .55));
	transition: transform .6s cubic-bezier(.22, .9, .3, 1);
}

.pd-showcase__item .pd-mockup { width: 100%; height: auto; display: block; }

.pd-showcase__item--main {
	position: relative;
	width: 208px;
	z-index: 3;
	transform: translateY(-6px) rotate(-1deg);
}

.pd-showcase__item--left {
	z-index: 2;
	transform: translateX(-104px) translateY(34px) rotate(-9deg) scale(.88);
	opacity: .96;
}

.pd-showcase__item--right {
	z-index: 1;
	transform: translateX(106px) translateY(18px) rotate(8deg) scale(.9);
	opacity: .96;
}

/* Galleggiano con tempi diversi: sembra vivo, non un collage */
.pd-showcase__item--main { animation: pdFloatA 8s ease-in-out infinite; }
.pd-showcase__item--left { animation: pdFloatB 9.5s ease-in-out infinite; }
.pd-showcase__item--right { animation: pdFloatC 11s ease-in-out infinite; }

@keyframes pdFloatA {
	0%, 100% { transform: translateY(calc(-6px + var(--pd-par, 0px))) rotate(-1deg); }
	50% { transform: translateY(calc(-22px + var(--pd-par, 0px))) rotate(-1.6deg); }
}

@keyframes pdFloatB {
	0%, 100% { transform: translateX(-104px) translateY(calc(34px + var(--pd-par, 0px))) rotate(-9deg) scale(.88); }
	50% { transform: translateX(-108px) translateY(calc(18px + var(--pd-par, 0px))) rotate(-10deg) scale(.88); }
}

@keyframes pdFloatC {
	0%, 100% { transform: translateX(106px) translateY(calc(18px + var(--pd-par, 0px))) rotate(8deg) scale(.9); }
	50% { transform: translateX(110px) translateY(calc(34px + var(--pd-par, 0px))) rotate(9deg) scale(.9); }
}

/* Il puntatore apre leggermente il ventaglio */
.pd-showcase:hover .pd-showcase__item--left { transform: translateX(-120px) translateY(26px) rotate(-11deg) scale(.9); animation-play-state: paused; }
.pd-showcase:hover .pd-showcase__item--right { transform: translateX(122px) translateY(10px) rotate(10deg) scale(.92); animation-play-state: paused; }
.pd-showcase:hover .pd-showcase__item--main { transform: translateY(-16px) rotate(0deg) scale(1.02); animation-play-state: paused; }

@media (max-width: 1024px) {
	.pd-showcase { min-height: 440px; }
	.pd-showcase__item--main { width: 210px; }
	.pd-showcase__item { width: 172px; }
	.pd-showcase__item--left { transform: translateX(-100px) translateY(30px) rotate(-9deg) scale(.88); }
	.pd-showcase__item--right { transform: translateX(102px) translateY(16px) rotate(8deg) scale(.9); }
}

@media (max-width: 680px) {
	.pd-showcase { min-height: 400px; }
	.pd-showcase__item--main { width: 188px; }
	.pd-showcase__item { width: 150px; }
	.pd-showcase__item--left { transform: translateX(-84px) translateY(26px) rotate(-10deg) scale(.86); }
	.pd-showcase__item--right { transform: translateX(86px) translateY(14px) rotate(9deg) scale(.88); }
}

@media (prefers-reduced-motion: reduce) {
	.pd-showcase__item { animation: none !important; }
}

/* I mockup nelle pagine interne ora sono telefoni veri: più alti che larghi */
.pd-mockup { max-width: 260px; }
.pd-project__visual .pd-mockup { max-width: 240px; }
.pd-mockup-wrap .pd-mockup { max-width: 250px; }

/* ============================================================
   19. GRADIENTE DEL TEMA PADRE → GRADIENTE DI BRAND
   Deon usa un suo gradiente azzurro/indaco/lilla (#5cc2ed →
   #5d62ee → #c298d3) su menu, link e vari componenti. Qui lo
   sostituiamo ovunque con il blu→teal della brand identity.
   ============================================================ */

.qodef-e-info>a,
.qodef-mobile-header-navigation ul li ul li>a>span,
.qodef-mobile-header-navigation>ul>li>a>span,
.qodef-header-navigation>ul>li>a>span,
.qodef-header-navigation>ul>li.qodef-menu-item--narrow ul li>a>span,
.qodef-header-navigation>ul>li.qodef-menu-item--narrow ul:not(.qodef-drop-down--right) li>a>span,
.qodef-header-navigation>ul>li.qodef-menu-item--narrow ul.qodef-drop-down--right li>a>span,
.widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
#qodef-top-area .widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
#qodef-page-footer .widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
#qodef-page-footer-bottom-area-inner .widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
#qodef-side-area .widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
.qodef-mega-menu-widget-holder .widget ul:not(.qodef-shortcode-list).wp-block-categories-list a,
#qodef-woo-page.qodef--cart .shipping-calculator-button,
.yith-wcwl-form .shipping-calculator-button,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
.woocommerce-account div.woocommerce .woocommerce-MyAccount-content a:not(.woocommerce-Button),
.qodef-fullscreen-menu>ul>li>a>span,
.qodef-fullscreen-menu .qodef-drop-down-second-inner ul li>a>span,
#qodef-side-area-mobile-header .qodef-m-navigation ul li ul li>a>span,
#qodef-side-area-mobile-header .qodef-m-navigation>ul>li>a>span,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner>ul>li ul li>a>span,
.qodef-portfolio-single .qodef-portfolio-info a,
.qodef-portfolio-list.qodef-item-layout--info-on-hover article .qodef-e-title a,
.qodef-portfolio-list.qodef-item-layout--info-on-image article .qodef-e-title a,
.qodef-interactive-link-showcase.qodef-layout--list .qodef-m-items .qodef-m-item .qodef-e-title {
	background-image: linear-gradient(-90deg, #05C6BB 0, #175CF5 50%, currentColor 51%, currentColor 100%) !important;
}

.qodef-m-filter .qodef-m-filter-item.qodef--active,
.qodef-m-filter .qodef-m-filter-item:hover,
#qodef-page-footer-top-area a:hover,
#qodef-woo-page.qodef--single .product_meta .qodef-woo-meta-value a:hover,
#yith-quick-view-content.single-product .product_meta .qodef-woo-meta-value a:hover,
.qodef-instagram-list .sbi_photo_wrap a:after,
.widget_deon_core_woo_dropdown_cart .qodef-m-opener:hover,
.widget_shopping_cart .qodef-m-opener:hover,
.qodef-button.qodef-layout--outlined.qodef-skin--light:hover .qodef-m-text,
.qodef-numbered-text .qodef-m-number .qodef-letter,
.qodef-progress-bar.qodef-layout--line.qodef-line--default .proggress,
.qodef-workflow.qodef-layout--image-with-text .qodef-year,
.qodef-workflow.qodef-layout--two-images .qodef-year,
#qodef-page-spinner.qodef-layout--deon .qodef-m-deon .qodef-m-background,
#qodef-page-spinner.qodef-layout--deon .qodef-m-deon .qodef-m-background:before {
	background-image: var(--pd-gradient) !important;
}

/* ============================================================
   20. RIFINITURE HEADER
   ============================================================ */

/* Il pulsante Contatti: una pillola, non un cerchio.
   Il tema padre dà al link l'altezza piena dell'header: con il raggio
   arrotondato diventava un tondo che sembrava una voce selezionata. */
.qodef-header-navigation > ul > li.pd-nav-cta {
	display: flex;
	align-items: center;
	margin-left: 14px;
}

.qodef-header-navigation > ul > li.pd-nav-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 24px !important;
	line-height: 1;
	border-radius: var(--pd-radius-pill);
	background: var(--pd-gradient);
	color: #FFFFFF !important;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(23, 92, 245, .26);
	transition: transform .2s ease, box-shadow .2s ease;
}

.qodef-header-navigation > ul > li.pd-nav-cta > a:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(23, 92, 245, .34);
}

/* Dentro il pulsante il testo è bianco pieno: il tema padre lo riempie
   con un gradiente ritagliato sul testo, che qui non serve. */
.qodef-header-navigation > ul > li.pd-nav-cta > a > span,
.qodef-header-navigation > ul > li.pd-nav-cta > a .qodef-menu-item-text {
	background-image: none !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* Selettore lingua: controllo segmentato, staccato dal resto */
.pd-menu-langs {
	display: flex;
	align-items: center;
	margin-left: 26px;
	padding-left: 0;
	border-left: 0;
}

.pd-langs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--pd-paper);
	border: 1px solid var(--pd-border);
	border-radius: var(--pd-radius-pill);
}

.pd-langs__item {
	font-family: var(--pd-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pd-muted);
	padding: 6px 12px;
	border-radius: var(--pd-radius-pill);
	line-height: 1;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.pd-langs__item:hover { color: var(--pd-navy); }

.pd-langs__item.is-current {
	color: var(--pd-navy);
	background: var(--pd-surface);
	box-shadow: 0 1px 2px rgba(2, 29, 61, .12);
}

/* Nel menu mobile lo switcher va in fondo, largo quanto la voce */
.qodef-mobile-header-navigation .pd-menu-langs { margin: 18px 0 0; }

/* ============================================================
   21. CARD DELLA STESSA ALTEZZA
   Elementor impila i widget con align-content: flex-start, quindi
   una card con una voce in più diventa più alta delle vicine.
   ============================================================ */
.pd-equal .elementor-widget-wrap {
	align-content: stretch;
	align-items: stretch;
}

.pd-equal .elementor-widget-wrap > .elementor-widget { align-self: stretch; }
.pd-equal .elementor-widget-html > .pd-price-card,
.pd-equal .elementor-widget-html > .pd-card { height: 100%; }

/* L'elenco delle voci spinge il pulsante sempre in fondo */
.pd-price-card ul { flex: 1 1 auto; }

/* ============================================================
   22. LA VETRINA SI SCAMBIA LE APP
   ============================================================ */
.pd-showcase__item { aspect-ratio: 320 / 694; }

.pd-showcase__screen {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(.985);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .9, .3, 1);
	pointer-events: none;
}

.pd-showcase__screen.is-active { opacity: 1; transform: none; }
.pd-showcase__screen .pd-mockup { width: 100%; height: 100%; max-width: none; }

/* Le righe si ripopolano ogni volta che uno schermo torna in primo piano */
.pd-js .pd-showcase__screen .pd-mockup__row { opacity: 0; animation: none; }
.pd-js .pd-showcase__screen.is-active .pd-mockup__row { animation: pdRowIn .5s cubic-bezier(.22, .9, .3, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
	.pd-showcase__screen { transition: none; }
	.pd-js .pd-showcase__screen.is-active .pd-mockup__row { animation: none; opacity: 1; }
}

/* ============================================================
   23. HEADER TRASPARENTE CHE DIVENTA SOLIDO
   Vale solo sulle pagine marcate .pd-dark-top, cioè quelle che si
   aprono con una sezione scura. Altrove l'header resta bianco e
   occupa il suo spazio, così non si rischia bianco su bianco.
   ============================================================ */

.pd-dark-top #qodef-page-header {
	margin-bottom: calc(var(--pd-header-h) * -1);
	background-color: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.pd-dark-top #qodef-page-mobile-header {
	margin-bottom: calc(var(--pd-header-h-mobile) * -1);
	background-color: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Dopo 40 px di scroll: vetro smerigliato */
.pd-scrolled .pd-dark-top #qodef-page-header,
.pd-scrolled .pd-dark-top #qodef-page-mobile-header,
.pd-dark-top #qodef-page-header.pd-scrolled {
	background-color: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(170%) blur(16px);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	border-bottom-color: var(--pd-border);
	box-shadow: 0 6px 24px rgba(2, 29, 61, .07);
}

/* Logo bianco finché l'header è trasparente, a colori sul vetro.
   Il tema padre impila i tre loghi in posizione assoluta e li alterna con
   l'opacità: invece di smontare il suo meccanismo sostituiamo l'immagine
   di quello visibile, che ha le stesse proporzioni (1333 × 419). */
html:not(.pd-scrolled) .pd-dark-top #qodef-page-header .qodef-header-logo-image.qodef--main,
html:not(.pd-scrolled) .pd-dark-top #qodef-page-mobile-header .qodef-header-logo-image {
	content: url("../img/panda-digital-reversed.png");
}

/* Voci di menu chiare finché l'header è trasparente */
html:not(.pd-scrolled) .pd-dark-top .qodef-header-navigation > ul > li > a { color: #FFFFFF; }

html:not(.pd-scrolled) .pd-dark-top .qodef-header-navigation > ul > li > a:hover,
html:not(.pd-scrolled) .pd-dark-top .qodef-header-navigation > ul > li.current-menu-item > a,
html:not(.pd-scrolled) .pd-dark-top .qodef-header-navigation > ul > li.current-menu-ancestor > a { color: var(--pd-teal); }

html:not(.pd-scrolled) .pd-dark-top #qodef-page-mobile-header .qodef-mobile-header-opener { color: #FFFFFF; }

/* Selettore lingua in versione chiara */
html:not(.pd-scrolled) .pd-dark-top .pd-langs {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .24);
}

html:not(.pd-scrolled) .pd-dark-top .pd-langs__item { color: rgba(255, 255, 255, .72); }
html:not(.pd-scrolled) .pd-dark-top .pd-langs__item:hover { color: #FFFFFF; }

html:not(.pd-scrolled) .pd-dark-top .pd-langs__item.is-current {
	color: var(--pd-navy);
	background: #FFFFFF;
	box-shadow: none;
}

html:not(.pd-scrolled) .pd-dark-top .qodef-header-navigation > ul > li.pd-nav-cta > a {
	box-shadow: 0 6px 22px rgba(2, 15, 35, .38);
}

/* Lo sticky header del tema padre non serve: lo facciamo noi in CSS */
.qodef-header-sticky { display: none !important; }

/* Il menu mobile aperto ha bisogno di un fondo pieno */
.qodef-mobile-header-navigation ul { background-color: var(--pd-surface); }

/* ============================================================
   24. DATI VIVI DENTRO I CONCEPT
   Ogni schermo racconta una cosa che succede davvero mentre si
   lavora: un tavolo che si occupa, un ordine che entra in forno,
   una cabina che si riempie, un posto di boxe che sparisce.
   Due stati sovrapposti che si alternano su un ciclo di 10s.
   ============================================================ */
.pd-live { animation: pdLiveA 10s ease-in-out infinite; }
.pd-live--b { animation-name: pdLiveB; }

@keyframes pdLiveA {
	0%, 44% { opacity: 1; }
	50%, 94% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes pdLiveB {
	0%, 44% { opacity: 0; }
	50%, 94% { opacity: 1; }
	100% { opacity: 0; }
}

/* I quattro schermi non cambiano tutti insieme: sfalsati sembrano vivi */
.pd-mockup--borgo .pd-live { animation-delay: 0s; }
.pd-mockup--vesuvio .pd-live { animation-delay: -2.5s; }
.pd-mockup--aurora .pd-live { animation-delay: -5s; }
.pd-mockup--nova .pd-live { animation-delay: -7.5s; }

/* L'anello dei rinnovi si ridisegna a ogni giro */
.pd-ring { animation: pdRingDraw 10s cubic-bezier(.22, .9, .3, 1) infinite; }

@keyframes pdRingDraw {
	0% { stroke-dashoffset: 120; }
	28%, 100% { stroke-dashoffset: 0; }
}

/* Niente lavoro inutile sugli schermi nascosti della vetrina */
.pd-showcase__screen:not(.is-active) .pd-live,
.pd-showcase__screen:not(.is-active) .pd-ring,
.pd-showcase__screen:not(.is-active) .pd-mockup__pulse { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.pd-live { animation: none; }
	.pd-live--b { opacity: 0; }
	.pd-ring { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   25. NIENTE STRISCIA BIANCA SOTTO L'HEADER
   Il tema padre rende header e footer come inline-block: sotto
   l'elemento resta lo spazio della riga di testo (28 px), che con
   l'header trasparente si vedeva come una banda bianca in cima.
   ============================================================ */
/* Il tema padre mostra l'header desktop solo sopra i 1024 px: la correzione
   va tenuta dentro quella fascia, altrimenti ricompare sul telefono. */
@media only screen and (min-width: 1025px) {
	#qodef-page-header { display: block; }
}

#qodef-page-footer { display: block; }

/* L'header mobile ha un'altezza sua: il margine negativo la deve rispecchiare,
   altrimenti il contenuto scivola sopra il bordo dello schermo. */
#qodef-page-mobile-header,
#qodef-page-mobile-header-inner { height: var(--pd-header-h-mobile); }

/* ============================================================
   26. GRADIENTE FINO AL BORDO DEI PULSANTI
   I pulsanti hanno un bordo trasparente di 1 px (serve a tenere la
   stessa misura fra pieni e contornati). Il gradiente però veniva
   calcolato sul padding box e poi ripetuto: nell'anello del bordo
   ricompariva l'estremo opposto della sfumatura, come una riga di
   colore fisso su tutti i lati.
   ============================================================ */
.pd-btn,
.pd-price-card__cta,
.qodef-header-navigation > ul > li.pd-nav-cta > a,
#qodef-page-wrapper .elementor-button,
.pd-form .wpcf7-submit {
	background-origin: border-box;
	background-repeat: no-repeat;
}

/* Testo introduttivo: righe bilanciate, niente parole orfane a capo */
#qodef-page-wrapper .pd-lead p,
#qodef-page-wrapper .pd-lead { text-wrap: balance; }

.pd-lead--center {
	max-width: 66ch;
	margin-left: auto;
	margin-right: auto;
}

/* Motto sotto il logo nel footer */
.pd-footer-motto {
	font-family: var(--pd-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pd-teal);
	margin: -6px 0 0;
	white-space: nowrap;
}

/* ============================================================
   27. CORREZIONI DAL CONTROLLO QUALITÀ
   ============================================================ */

/* Dentro il pannello del menu mobile il fondo è bianco: lo switcher non può
   usare la variante chiara dell'header trasparente, o "EN" sparisce. */
#qodef-page-mobile-header .qodef-mobile-header-navigation .pd-langs {
	background: var(--pd-paper);
	border-color: var(--pd-border);
}

#qodef-page-mobile-header .qodef-mobile-header-navigation .pd-langs__item { color: var(--pd-muted); }

#qodef-page-mobile-header .qodef-mobile-header-navigation .pd-langs__item.is-current {
	color: var(--pd-navy);
	background: var(--pd-surface);
	box-shadow: 0 1px 2px rgba(2, 29, 61, .12);
}

.qodef-mobile-header-navigation .pd-menu-langs { padding: 8px 0 4px; }

/* Pagina dei risultati di ricerca: stessa griglia del blog */
.search #qodef-page-inner .qodef-search-page-holder { max-width: 46rem; margin: 0 auto; }
.qodef-e-search-heading-title { font-size: 1.15rem; margin: 0 0 6px; }
.qodef-e-search-heading-label { color: var(--pd-muted); font-size: 15px; }

/* Il magazzino degli schermi non si vede: serve solo al JavaScript */
.pd-showcase__sources { display: none; }

/* Ritratto del fondatore: stessa misura dell'avatar con le iniziali */
.pd-founder__photo {
	width: 62px;
	height: 62px;
	flex: none;
	border-radius: var(--pd-radius-pill);
	object-fit: cover;
	display: block;
}

/* ============================================================
   28. CREDENZIALE DEL FONDATORE
   La riga che dice in poche parole perché ci si può fidare:
   sta fra il ruolo e la biografia, dentro un riquadro tenue.
   ============================================================ */
.pd-founder__credential {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--pd-gradient-soft);
	border-radius: var(--pd-radius-md);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--pd-navy);
}

.pd-founder__credential-dot {
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--pd-gradient);
	flex: none;
}

@media (max-width: 680px) {
	.pd-founder__credential { font-size: 13.5px; padding: 11px 14px; }
}

/* ==========================================================================
   29. IL SIMBOLO CHE SI MONTA
   I sette pezzi del panda arrivano dall'esterno, ruotano in volo e si
   agganciano al centro superando di poco il bersaglio, come una piastra
   che scatta in sede. Rotta, rotazione e ritardo arrivano dall'SVG
   (--x, --y, --r, --d): qui resta solo il modo di muoversi.
   Il marchio "PANDA DIGITAL" non si scompone: accende e basta.
   ========================================================================== */

.pd-logo-build {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 0;
}

.pd-logo-build__svg {
	width: min(460px, 100%);
	height: auto;
	overflow: visible; /* i pezzi partono fuori dal viewBox */
}

/* La cornice non deve rivivere la sua animazione: si muovono i pezzi. */
.pd-js .pd-logo-build.pd-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

.pd-js .pd-logo-build__sym path,
.pd-js .pd-logo-build__word,
.pd-js .pd-logo-build__ring {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	opacity: 0;
}

.pd-js .pd-logo-build.is-visible .pd-logo-build__sym path {
	animation: pd-snap .58s cubic-bezier(.17, .78, .3, 1) both;
	animation-delay: var(--d);
}

.pd-js .pd-logo-build.is-visible .pd-logo-build__word {
	animation: pd-boot .62s linear .42s both;
}

.pd-js .pd-logo-build.is-visible .pd-logo-build__ring {
	animation: pd-lock .62s cubic-bezier(.2, .7, .3, 1) forwards;
}

.pd-js .pd-logo-build.is-visible .pd-logo-build__ring--a { animation-delay: .58s; }
.pd-js .pd-logo-build.is-visible .pd-logo-build__ring--b { animation-delay: .68s; }

@keyframes pd-snap {
	0% {
		opacity: 0;
		transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.72);
	}

	40% { opacity: 1; }

	74% {
		opacity: 1;
		/* sorpassa di poco la sede, poi rientra: è lo scatto dell'aggancio */
		transform: translate(calc(var(--x) * -.045), calc(var(--y) * -.045)) rotate(calc(var(--r) * -.09)) scale(1.035);
	}

	100% { opacity: 1; transform: none; }
}

/* Accensione del marchio: due sfarfallii brevi, come un pannello che parte. */
@keyframes pd-boot {
	0%   { opacity: 0; }
	22%  { opacity: .28; }
	34%  { opacity: .06; }
	62%  { opacity: 1; }
	72%  { opacity: .55; }
	100% { opacity: 1; }
}

@keyframes pd-lock {
	0%   { opacity: .5; transform: scale(.58); }
	100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 1024px) {
	.pd-logo-build__svg { width: min(400px, 82%); }
}

@media (max-width: 680px) {
	.pd-logo-build { padding: 8px 0; }
	.pd-logo-build__svg { width: min(320px, 88%); }
}

@media (prefers-reduced-motion: reduce) {
	.pd-js .pd-logo-build__sym path,
	.pd-js .pd-logo-build__word { opacity: 1; transform: none; animation: none; }
	.pd-js .pd-logo-build__ring { display: none; }
}

/* I pezzi in volo non devono allargare la pagina sul telefono. */
.pd-split-middle { overflow: hidden; }

/* Colonna del marchio centrata sull'altezza del testo accanto. */
.pd-split-middle .elementor-widget-wrap,
.pd-split-middle .elementor-column > .elementor-element-populated {
	align-content: center;
	align-items: center;
}

/* ==========================================================================
   30. PAGINA DI APERTURA
   Documento a sé: non passa dal tema padre, quindi qui c'è anche la base
   (azzeramento dei margini, fondo scuro). Vive solo finché l'interruttore
   in Impostazioni → Lettura è acceso.
   ========================================================================== */

body.pd-soon {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: var(--pd-navy);
	color: #FFF;
	font-family: var(--pd-font-body);
	position: relative;
	overflow-x: hidden;
}

/* Le stesse masse di luce dell'apertura del sito. */
.pd-soon__aurora {
	position: fixed;
	inset: -20% -10%;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 18% 22%, rgba(23, 92, 245, .45), transparent 70%),
		radial-gradient(34% 38% at 82% 30%, rgba(5, 198, 187, .30), transparent 70%),
		radial-gradient(46% 46% at 50% 92%, rgba(23, 92, 245, .22), transparent 72%);
	filter: blur(6px);
	animation: pd-soon-drift 26s ease-in-out infinite alternate;
}

@keyframes pd-soon-drift {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

.pd-soon__wrap {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	text-align: center;
}

.pd-soon__logo { padding: 0 0 34px; }

/* Il marchio qui è su fondo scuro: i tracciati di testo diventano bianchi. */
.pd-soon__logo .pd-mark__ink { fill: #FFF; }

.pd-soon__logo .pd-logo-build__svg { width: min(420px, 78%); }

/* Scelta della lingua, in alto a destra: stesse forme dello switcher del sito. */
.pd-soon__langs {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 2;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
}

.pd-soon__langs .pd-langs__item { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pd-soon__langs .pd-langs__item:hover { color: #FFF; }

.pd-soon__langs .pd-langs__item.is-current {
	color: var(--pd-navy);
	background: #FFF;
	box-shadow: none;
}

.pd-soon__eyebrow {
	margin: 0 0 14px;
	font-family: var(--pd-font-mono);
	font-size: 12.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pd-teal);
}

.pd-soon__title {
	margin: 0 0 20px;
	font-family: var(--pd-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 5.2vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.pd-soon__lead {
	margin: 0 auto 38px;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
	text-wrap: pretty;
}

/* Conto alla rovescia: quattro riquadri, cifre a larghezza fissa. */
.pd-soon__count {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	max-width: 520px;
	margin: 0 auto 18px;
}

.pd-soon__unit {
	padding: 18px 8px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--pd-radius-md);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(6px);
}

.pd-soon__num {
	display: block;
	font-family: var(--pd-font-display);
	font-size: clamp(1.7rem, 5.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	background: var(--pd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pd-soon__label {
	display: block;
	margin-top: 8px;
	font-family: var(--pd-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.pd-soon__date {
	margin: 0 0 34px;
	font-size: 15.5px;
	color: rgba(255, 255, 255, .72);
}

.pd-soon__date strong { color: #FFF; font-weight: 600; }

.pd-soon__contacts {
	margin: 0 0 30px;
	font-size: 16px;
	color: rgba(255, 255, 255, .72);
}

.pd-soon__contacts a {
	color: #FFF;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: 1px;
}

.pd-soon__contacts a:hover,
.pd-soon__en a:hover { border-bottom-color: var(--pd-teal); }

.pd-soon__contacts span { margin: 0 10px; color: rgba(255, 255, 255, .35); }

@media (max-width: 560px) {
	body.pd-soon { padding: 76px 18px 36px; }
	.pd-soon__langs { top: 16px; right: 16px; }
	.pd-soon__count { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
	.pd-soon__logo { padding-bottom: 26px; }

	/* i due recapiti vanno uno sotto l'altro: spezzati a metà si leggono male */
	.pd-soon__contacts { display: flex; flex-direction: column; gap: 8px; align-items: center; }
	.pd-soon__contacts span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pd-soon__aurora { animation: none; }
}

/* ==========================================================================
   31. PASSAGGIO FRA UNA PAGINA E L'ALTRA
   Al posto del lampo bianco, le pagine si dissolvono e l'intestazione resta
   ferma. I browser che non conoscono queste regole semplicemente navigano
   come sempre: non si rompe nulla.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
	animation: pd-pagina-esce .18s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: pd-pagina-entra .34s cubic-bezier(0, 0, .2, 1) both;
}

@keyframes pd-pagina-esce {
	to { opacity: 0; transform: translateY(-8px); }
}

@keyframes pd-pagina-entra {
	from { opacity: 0; transform: translateY(12px); }
}

/* L'intestazione non partecipa alla dissolvenza: sembra un'applicazione. */
#qodef-page-header { view-transition-name: pd-intestazione; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* ==========================================================================
   32. TITOLI CHE SI SCOPRONO
   I titoli di sezione entrano con una tendina verticale invece della solita
   dissolvenza. Restano fuori l'occhiello e il titolo dell'apertura, che ha
   già un'animazione sua.
   ========================================================================== */

.pd-js .pd-reveal.elementor-widget-heading:not(.pd-eyebrow):not(.pd-hero-title) {
	opacity: 1;
	transform: none;
}

.pd-js .pd-reveal.elementor-widget-heading:not(.pd-eyebrow):not(.pd-hero-title) .elementor-heading-title {
	clip-path: inset(0 0 108% 0);
	transition: clip-path .72s cubic-bezier(.22, .9, .3, 1);
	transition-delay: calc(var(--pd-i, 0) * 55ms);
}

.pd-js .pd-reveal.is-visible.elementor-widget-heading:not(.pd-eyebrow):not(.pd-hero-title) .elementor-heading-title {
	clip-path: inset(0 0 -20% 0);
}

@media (prefers-reduced-motion: reduce) {
	.pd-js .pd-reveal.elementor-widget-heading .elementor-heading-title {
		clip-path: none;
		transition: none;
	}
}

/* ==========================================================================
   33. CARD CON IL BORDO CHE SI ACCENDE
   Al passaggio del mouse il filo grigio diventa il gradiente del marchio e
   l'icona fa un passo avanti.
   ========================================================================== */

.pd-icon-card {
	background-image: linear-gradient(var(--pd-surface), var(--pd-surface)), linear-gradient(var(--pd-border), var(--pd-border));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-repeat: no-repeat;
	border-color: transparent;
	transition: transform .25s ease, box-shadow .25s ease, background-image .25s ease;
}

.pd-icon-card:hover {
	border-color: transparent;
	background-image: linear-gradient(var(--pd-surface), var(--pd-surface)), var(--pd-gradient);
}

.pd-dark .pd-icon-card {
	background-image: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12));
}

.pd-dark .pd-icon-card:hover {
	background-image: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--pd-gradient);
}

.pd-icon-card .elementor-icon {
	transition: transform .25s cubic-bezier(.22, .9, .3, 1);
}

.pd-icon-card:hover .elementor-icon {
	transform: translateY(-3px) scale(1.05);
}

/* ==========================================================================
   34. UNA LINEA SOTTO I NUMERI
   Mentre il numero sale, sotto si disegna un filo con il gradiente del
   marchio. Entrano uno dopo l'altro, come i numeri.
   ========================================================================== */

.pd-why-grid .pd-stat {
	position: relative;
	padding-bottom: 14px;
}

.pd-js .pd-why-grid .pd-stat::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 2px;
	border-radius: 2px;
	background: var(--pd-gradient);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .7s cubic-bezier(.22, .9, .3, 1);
}

.pd-js .pd-reveal.is-visible .pd-why-grid .pd-stat::after { transform: scaleX(1); }
.pd-js .pd-reveal.is-visible .pd-why-grid .pd-stat:nth-child(2)::after { transition-delay: .1s; }
.pd-js .pd-reveal.is-visible .pd-why-grid .pd-stat:nth-child(3)::after { transition-delay: .2s; }
.pd-js .pd-reveal.is-visible .pd-why-grid .pd-stat:nth-child(4)::after { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.pd-js .pd-why-grid .pd-stat::after { transform: scaleX(1); transition: none; }
}