/* ============================================================
 * BWC THEME · template-web-design.css
 * Stili dedicati alla pagina /servizi/web-design/
 * Caricato condizionalmente solo su quella pagina.
 * ============================================================ */

.wd { --wd-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* Hero giant */
.wd-hero {
	position: relative;
	padding: clamp(80px, 12vw, 140px) var(--gutter) clamp(60px, 8vw, 100px);
	overflow: hidden;
}
.wd-hero__grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(var(--bwc-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--bwc-border) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
	opacity: .4;
}
.wd-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; }
.wd-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 700; letter-spacing: .26em;
	color: var(--bwc-fg-muted);
	padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--bwc-border-strong);
	margin-bottom: 28px;
}
.wd-hero__eyebrow::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--bwc-accent2); animation: wd-pulse 1.6s infinite;
}
@keyframes wd-pulse { 50% { opacity: .35; transform: scale(1.4); } }
.wd-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(48px, 9vw, 156px);
	font-weight: 900; line-height: .9;
	letter-spacing: -0.03em;
	margin: 0 0 36px;
	max-width: 14ch;
}
.wd-hero h1 em {
	font-family: var(--font-italic); font-style: italic;
	color: var(--bwc-accent2); font-weight: 600;
	display: inline-block; transform: rotate(-3deg);
}
.wd-hero__lead {
	max-width: 580px;
	font-size: clamp(16px, 1.5vw, 19px);
	color: var(--bwc-fg-muted);
	line-height: 1.55; margin: 0 0 36px;
}
.wd-hero__lead strong { color: var(--bwc-fg); font-weight: 700; }

/* Manifesto bar marquee */
.wd-bar {
	background: var(--bwc-accent2);
	color: #fff;
	padding: 28px 0;
	overflow: hidden;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(24px, 3.5vw, 48px);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.wd-bar__track {
	display: flex; gap: 60px;
	animation: wd-scroll-left 30s linear infinite;
	width: max-content;
}
@keyframes wd-scroll-left { to { transform: translateX(-50%); } }
.wd-bar__item { display: inline-flex; align-items: center; gap: 60px; }
.wd-bar__dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.wd-bar em { font-family: var(--font-italic); font-style: italic; font-weight: 500; }

/* Showcase */
.wd-show {
	padding: clamp(80px, 12vw, 160px) var(--gutter);
	max-width: 1480px; margin: 0 auto;
}
.wd-show__head {
	display: grid; grid-template-columns: 5fr 7fr;
	gap: 32px;
	margin-bottom: clamp(40px, 6vw, 80px);
	align-items: end;
}
@media (max-width: 880px) { .wd-show__head { grid-template-columns: 1fr; } }
.wd-case-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .15em; color: var(--bwc-accent2); margin-bottom: 12px; }
.wd-case-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bwc-fg-faint); margin-bottom: 14px; }
.wd-case-title {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 800; line-height: 1; letter-spacing: -0.025em;
	margin: 0;
}
.wd-case-title em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-case-desc { color: var(--bwc-fg-muted); font-size: 16px; max-width: 520px; line-height: 1.6; }

.wd-show__visual {
	position: relative; margin: 0 auto;
	max-width: 1100px;
	aspect-ratio: 16/10;
}

/* Laptop mockup */
.wd-laptop {
	position: relative;
	width: 100%; aspect-ratio: 16/10;
	background: linear-gradient(180deg, #2A2A2A, #1A1A1A);
	border-radius: 14px 14px 4px 4px;
	padding: 18px 18px 22px;
	box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
	transform: perspective(1500px) rotateX(2deg);
	transition: transform .8s var(--wd-ease);
}
.in-view .wd-laptop { transform: perspective(1500px) rotateX(0deg); }
.wd-laptop::before {
	content: ''; position: absolute;
	top: 7px; left: 50%; transform: translateX(-50%);
	width: 6px; height: 6px; border-radius: 50%; background: #444;
}
.wd-laptop__screen {
	background: #fff;
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.wd-site {
	background: #fff; color: #1a1a1a;
	font-family: var(--font-display);
	height: 100%; overflow: hidden; position: relative;
}
.wd-site__bar {
	height: 26px; background: #f4f4f4;
	display: flex; align-items: center; gap: 6px; padding: 0 14px;
	border-bottom: 1px solid #e5e5e5;
}
.wd-site__bar::before, .wd-site__bar::after, .wd-site__bar i {
	content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ddd;
}
.wd-site__bar::before { background: #ff5f57; }
.wd-site__bar::after { background: #ffbd2e; }
.wd-site__bar i { background: #28ca42; display: block; }
.wd-site__bar span {
	margin-left: 14px;
	font-family: var(--font-mono); font-size: 10px; color: #999;
	background: #fff; padding: 2px 8px; border-radius: 4px;
	flex: 1; max-width: 280px;
}
.wd-site-content {
	padding: 22px 32px;
	height: calc(100% - 26px);
	overflow: hidden; position: relative;
}

/* Site type 1: landing architettura */
.wd-site--landing .wd-site-content { background: linear-gradient(180deg, #FFEAE0, #FFF8F4); }
.wd-site--landing .wd-site-content::before {
	content: '◆ LANDING';
	display: block;
	font-family: var(--font-mono);
	font-weight: 700; font-size: 11px; letter-spacing: .25em;
	margin-bottom: 22px; opacity: .55;
}
.wd-site--landing h2 {
	font-family: var(--font-italic); font-style: italic;
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 600; line-height: .95;
	margin: 0 0 12px; color: #2A1A12;
}
.wd-site--landing p { font-size: 12px; line-height: 1.5; color: #6B5145; max-width: 70%; }
.wd-site--landing .wd-product-grid {
	position: absolute; right: 32px; top: 22px;
	width: 38%;
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wd-site--landing .wd-product {
	aspect-ratio: 3/4;
	background: linear-gradient(135deg, #E94E24, #B83515);
	border-radius: 4px;
	display: flex; align-items: flex-end;
	padding: 8px;
	color: #fff; font-size: 9px; font-weight: 700;
}
.wd-site--landing .wd-product:nth-child(2) { background: linear-gradient(135deg, #2A1A12, #5A3A20); }
.wd-site--landing .wd-product:nth-child(3) { background: linear-gradient(135deg, #FFB68C, #FF8A4F); margin-top: 16px; }
.wd-site--landing .wd-product:nth-child(4) { background: linear-gradient(135deg, #4A2818, #8A4825); margin-top: 16px; }

/* Site type 2: dashboard performance */
.wd-site--dash .wd-site-content { background: #F7F8FA; color: #1a1a1a; }
.wd-site--dash .wd-site-content::before {
	content: '◆ DASHBOARD';
	display: block;
	font-family: var(--font-mono);
	font-weight: 700; font-size: 11px; letter-spacing: .25em;
	margin-bottom: 18px;
	color: var(--bwc-accent); opacity: .8;
}
.wd-site--dash h2 {
	font-size: clamp(20px, 3vw, 36px); font-weight: 900;
	line-height: .98; margin: 0 0 10px;
	max-width: 14ch; letter-spacing: -.02em;
}
.wd-site--dash h2 em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent); font-weight: 600; }
.wd-site--dash p { font-size: 11px; color: #555; max-width: 50%; margin-bottom: 14px; }
.wd-site--dash .wd-cta-row { display: flex; gap: 6px; }
.wd-site--dash .wd-pill {
	font-size: 9px; font-weight: 700;
	padding: 5px 10px; border-radius: 999px;
	background: var(--bwc-accent); color: #fff;
}
.wd-site--dash .wd-pill--g { background: transparent; border: 1px solid #ccc; color: #555; }
.wd-site--dash .wd-dashboard {
	position: absolute;
	right: 32px; bottom: 22px; top: 22px;
	width: 44%;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 30px rgba(0,0,0,.06);
	padding: 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.wd-site--dash .wd-dashboard h4 { font-size: 9px; font-weight: 800; letter-spacing: .15em; margin: 0; color: #777; text-transform: uppercase; }
.wd-site--dash .wd-dashboard .wd-num { font-size: clamp(20px, 2.5vw, 32px); font-weight: 900; letter-spacing: -.02em; color: #1a1a1a; }
.wd-site--dash .wd-dashboard .wd-num em { font-style: normal; color: var(--bwc-accent); }
.wd-site--dash .wd-chart { display: flex; align-items: flex-end; gap: 3px; height: 50px; flex: 1; }
.wd-site--dash .wd-chart > i {
	flex: 1; background: linear-gradient(180deg, var(--bwc-accent), #014a82);
	border-radius: 2px 2px 0 0;
	transition: height 1.2s ease-in-out;
}
.wd-site--dash .wd-chart > i.wd-peak { background: linear-gradient(180deg, var(--bwc-accent2), #cf3a14); }

/* Site type 3: design system */
.wd-site--ds .wd-site-content { background: #1a1a1a; color: #fff; }
.wd-site--ds .wd-site-content::before {
	content: '◐ DESIGN SYSTEM · v.2026';
	display: block;
	font-family: var(--font-mono);
	font-size: 10px; letter-spacing: .3em;
	margin-bottom: 18px; color: #999;
}
.wd-site--ds h2 {
	font-family: var(--font-italic); font-style: italic;
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 600; line-height: .95;
	margin: 0; max-width: 80%;
}
.wd-site--ds h2 strong {
	font-style: normal; font-family: var(--font-display); font-weight: 900;
}
.wd-site--ds .wd-meta {
	display: flex; gap: 18px;
	font-family: var(--font-mono); font-size: 9px;
	color: #888; margin-top: 14px;
	letter-spacing: .15em; text-transform: uppercase;
}
.wd-site--ds .wd-img-block {
	position: absolute; right: 32px; bottom: 22px;
	width: 32%; aspect-ratio: 3/4;
	background: linear-gradient(135deg, rgba(233,78,36,.4), transparent),
		linear-gradient(180deg, #2C3E48, #14242E);
	border-radius: 2px; overflow: hidden;
}
.wd-site--ds .wd-img-block::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse at 30% 60%, rgba(255,255,255,.15), transparent 50%),
		radial-gradient(circle at 70% 30%, rgba(233,78,36,.3), transparent 60%);
}

/* Stat overlay */
.wd-case-stat {
	position: absolute;
	background: var(--bwc-bg-card);
	border: 1px solid var(--bwc-border);
	padding: 18px 22px;
	border-radius: 12px;
	font-family: var(--font-display);
	box-shadow: 0 20px 50px rgba(0,0,0,.5);
	transform: translateY(20px);
	opacity: 0;
	transition: transform .8s var(--wd-ease), opacity .8s;
	transition-delay: .3s;
}
.in-view .wd-case-stat { opacity: 1; transform: translateY(0); }
.wd-case-stat__num {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 900; letter-spacing: -.02em; line-height: 1;
	color: var(--bwc-fg);
}
.wd-case-stat__num em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-case-stat__label {
	font-size: 11px; color: var(--bwc-fg-muted);
	letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
	margin-top: 4px;
}
.wd-case-stat--tl { top: -24px; left: -32px; }
.wd-case-stat--tr { top: -24px; right: -32px; }
.wd-case-stat--bl { bottom: -24px; left: -32px; transition-delay: .5s; }
.wd-case-stat--br { bottom: -24px; right: -32px; transition-delay: .5s; }
@media (max-width: 700px) {
	.wd-case-stat--tl, .wd-case-stat--tr { top: auto; bottom: -50px; }
	.wd-case-stat--bl, .wd-case-stat--br { display: none; }
}

/* Mobile mockup */
.wd-phone {
	width: 280px; aspect-ratio: 9/19;
	background: #1a1a1a;
	border-radius: 36px;
	padding: 14px;
	box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4);
	margin: 0 auto;
	position: relative;
	transform: perspective(1500px) rotateY(-8deg) rotateX(2deg);
	transition: transform .8s var(--wd-ease);
}
.in-view .wd-phone { transform: perspective(1500px) rotateY(0deg) rotateX(0deg); }
.wd-phone::before {
	content: ''; position: absolute;
	top: 14px; left: 50%; transform: translateX(-50%);
	width: 90px; height: 22px; border-radius: 0 0 16px 16px;
	background: #1a1a1a; z-index: 2;
}
.wd-phone__screen {
	background: linear-gradient(180deg, #14242E, #2C3E48);
	border-radius: 24px;
	height: 100%; overflow: hidden;
	position: relative; color: #fff;
	padding: 50px 18px 18px;
}
.wd-phone__screen::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(ellipse at top, rgba(233,78,36,.18), transparent 60%);
}
.wd-phone__app { position: relative; z-index: 1; }
.wd-phone__hello { font-size: 9px; letter-spacing: .25em; opacity: .55; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.wd-phone__name { font-family: var(--font-italic); font-style: italic; font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.wd-phone__metric {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 10px;
	position: relative;
}
.wd-phone__metric .wd-lbl { font-size: 9px; opacity: .55; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.wd-phone__metric .wd-val { font-family: var(--font-display); font-size: 22px; font-weight: 900; }
.wd-phone__metric .wd-val em { color: var(--bwc-accent2); font-style: normal; }
.wd-phone__metric .wd-ring {
	position: absolute; right: 14px; top: 14px;
	width: 32px; height: 32px;
	border: 2px solid rgba(255,255,255,.12);
	border-top-color: var(--bwc-accent2);
	border-radius: 50%;
	transform: rotate(-90deg);
}

/* Battle */
.wd-battle {
	padding: clamp(80px, 12vw, 160px) var(--gutter);
	background: var(--bwc-bg-inset);
	border-top: 1px solid var(--bwc-border);
	border-bottom: 1px solid var(--bwc-border);
}
.wd-battle__inner { max-width: 1280px; margin: 0 auto; }
.wd-battle__head { margin-bottom: clamp(40px, 6vw, 60px); }
.wd-battle__h2 {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 88px);
	font-weight: 900; line-height: .95; letter-spacing: -.025em;
	margin: 0 0 18px; max-width: 14ch;
}
.wd-battle__h2 em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-battle__split {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	border: 1px solid var(--bwc-border);
	border-radius: 20px;
	overflow: hidden;
}
@media (max-width: 700px) { .wd-battle__split { grid-template-columns: 1fr; } }
.wd-battle__col { padding: 36px 32px; display: flex; flex-direction: column; gap: 24px; }
.wd-battle__col--bad {
	background: var(--bwc-bg-alt, var(--bwc-bg));
	border-right: 1px solid var(--bwc-border);
	color: var(--bwc-fg-muted);
}
.wd-battle__col--good { background: var(--bwc-bg-card); color: var(--bwc-fg); }
@media (max-width: 700px) {
	.wd-battle__col--bad { border-right: none; border-bottom: 1px solid var(--bwc-border); }
}
.wd-battle__label {
	font-family: var(--font-mono);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
}
.wd-battle__col--bad .wd-battle__label { color: var(--bwc-fg-faint); }
.wd-battle__col--good .wd-battle__label { color: var(--bwc-accent2); }
.wd-battle__title { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 0; }
.wd-battle__metric {
	display: flex; align-items: baseline; justify-content: space-between;
	padding: 14px 0; border-top: 1px dashed var(--bwc-border);
}
.wd-battle__metric:first-of-type { border-top: none; }
.wd-battle__metric-name { font-size: 13px; font-weight: 600; }
.wd-battle__metric-value { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 900; letter-spacing: -.02em; }
.wd-battle__col--bad .wd-battle__metric-value { color: #d04444; }
.wd-battle__col--good .wd-battle__metric-value { color: #1AA66A; }
.wd-battle__col--good .wd-battle__metric-value em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); }
.wd-battle__bar {
	height: 6px; background: rgba(0,0,0,.04);
	border-radius: 999px; overflow: hidden;
	position: relative; margin-top: 6px;
}
html[data-bwc-theme="dark"] .wd-battle__bar { background: rgba(255,255,255,.04); }
.wd-battle__bar > i {
	position: absolute; left: 0; top: 0; bottom: 0;
	border-radius: 999px;
	background: var(--bwc-accent2);
	width: 0;
	transition: width 1.2s var(--wd-ease);
}
.in-view .wd-battle__bar > i { width: var(--w, 50%); }

/* Stack grid */
.wd-stack { padding: clamp(80px, 12vw, 160px) var(--gutter); max-width: 1480px; margin: 0 auto; }
.wd-stack__head { margin-bottom: 48px; max-width: 720px; }
.wd-stack__head h2 {
	font-family: var(--font-display);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 900; line-height: 1; margin: 0 0 16px;
	letter-spacing: -.025em;
}
.wd-stack__head h2 em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-stack__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--bwc-border);
	border: 1px solid var(--bwc-border);
	border-radius: 18px;
	overflow: hidden;
}
.wd-stack__cell {
	background: var(--bwc-bg-card);
	padding: 28px 22px;
	display: flex; flex-direction: column; gap: 8px;
	transition: background .3s, transform .3s;
}
.wd-stack__cell:hover { transform: translateY(-2px); }
.wd-stack__cell-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.wd-stack__cell-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--bwc-accent2); font-weight: 700; }
.wd-stack__cell-desc { font-size: 12px; color: var(--bwc-fg-muted); line-height: 1.5; }

/* Process */
.wd-process {
	padding: clamp(80px, 12vw, 160px) var(--gutter);
	background: var(--bwc-bg-inset);
	border-top: 1px solid var(--bwc-border);
}
.wd-process__inner { max-width: 1280px; margin: 0 auto; }
.wd-process__head { margin-bottom: 48px; }
.wd-process__head h2 {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 900; line-height: 1; margin: 0;
	letter-spacing: -.025em;
}
.wd-process__head h2 em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-process__steps {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 0; position: relative;
}
@media (max-width: 880px) { .wd-process__steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 480px) { .wd-process__steps { grid-template-columns: 1fr; } }
.wd-process__step {
	padding: 32px 24px 32px 0;
	border-top: 1px solid var(--bwc-border);
	position: relative;
}
.wd-process__step::before {
	content: ''; position: absolute; top: -1px; left: 0; height: 3px; width: 0;
	background: var(--bwc-accent2);
	transition: width 1.2s var(--wd-ease);
}
.in-view .wd-process__step::before { width: 80%; }
.wd-process__step:nth-child(1)::before { transition-delay: 0s; }
.wd-process__step:nth-child(2)::before { transition-delay: .15s; }
.wd-process__step:nth-child(3)::before { transition-delay: .3s; }
.wd-process__step:nth-child(4)::before { transition-delay: .45s; }
.wd-process__step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--bwc-accent2); font-weight: 700; margin-bottom: 14px; }
.wd-process__step-time { font-family: var(--font-italic); font-style: italic; color: var(--bwc-fg-faint); font-size: 13px; display: block; margin-bottom: 8px; }
.wd-process__step-title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.wd-process__step-desc { font-size: 13px; color: var(--bwc-fg-muted); line-height: 1.55; }

/* Final CTA */
.wd-cta {
	padding: clamp(80px, 12vw, 160px) var(--gutter);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.wd-cta::before, .wd-cta::after {
	content: ''; position: absolute;
	width: 480px; height: 480px;
	border-radius: 50%; filter: blur(100px);
	pointer-events: none;
}
.wd-cta::before { background: rgba(1,105,180,.4); top: 20%; left: -200px; animation: wd-float 20s ease-in-out infinite; }
.wd-cta::after { background: rgba(233,78,36,.35); bottom: -100px; right: -200px; animation: wd-float 24s ease-in-out infinite reverse; }
@keyframes wd-float { 50% { transform: translate(80px, -40px) scale(1.1); } }
.wd-cta__inner { position: relative; max-width: 1080px; margin: 0 auto; }
.wd-cta h2 {
	font-family: var(--font-display);
	font-size: clamp(40px, 7vw, 120px);
	font-weight: 900; line-height: .95;
	letter-spacing: -.03em;
	margin: 0 0 28px;
}
.wd-cta h2 em { font-family: var(--font-italic); font-style: italic; color: var(--bwc-accent2); font-weight: 600; }
.wd-cta p {
	color: var(--bwc-fg-muted);
	font-size: clamp(15px, 1.4vw, 18px);
	max-width: 560px;
	margin: 0 auto 36px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.wd-bar__track { animation: none; }
	.wd-cta::before, .wd-cta::after { animation: none; }
}

/* ============================================================
 * TRANSLATION-RESILIENT (Weglot) overrides per Web Design
 * ============================================================ */

.wd-hero h1 {
	max-width: 14ch;
	text-wrap: balance;
}
.wd-hero__lead { text-wrap: pretty; max-width: 60ch; }

.wd-case-title {
	max-width: 16ch;
	text-wrap: balance;
}
.wd-case-desc { text-wrap: pretty; max-width: 60ch; }

/* Showcase visual: aspect-ratio fisso per non spostare i mockup */
.wd-show__visual {
	aspect-ratio: 16/10;
	min-height: 400px;
}

/* Battle columns: min-height uguale per le 2 colonne */
.wd-battle__col {
	min-height: 480px;
}
.wd-battle__title {
	min-height: 2.4em;
	text-wrap: balance;
}
.wd-battle__metric-name {
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Stack cells: min-height uniforme */
.wd-stack__cell {
	min-height: 160px;
}
.wd-stack__cell-name { min-height: 1.2em; }
.wd-stack__cell-desc { min-height: 3em; }

/* Process steps: titoli e desc fissi per allineamento orizzontale */
.wd-process__step-title {
	min-height: 2.4em;
	text-wrap: balance;
}
.wd-process__step-desc {
	min-height: 5em;
}

/* CTA giant */
.wd-cta h2 {
	max-width: 16ch;
	text-wrap: balance;
	margin-left: auto;
	margin-right: auto;
}

/* Phone metric values: tabular-nums per allineamento numeri */
.wd-phone__metric .wd-val {
	font-variant-numeric: tabular-nums;
}

/* Bugfix 1.9.4: hero giant ridotto per traduzioni */
.wd-hero h1 {
	font-size: clamp(56px, 11vw, 160px) !important;
	overflow-wrap: break-word;
	hyphens: auto;
}
@media (max-width: 700px) {
	.wd-hero h1 { font-size: clamp(40px, 11vw, 80px) !important; }
}

.wd-case-title,
.wd-battle__h2,
.wd-process__head h2,
.wd-cta h2 {
	overflow-wrap: break-word;
	hyphens: auto;
}