/* ============================================
   SMART PROJECT CONSULTING — Design System
   ============================================ */

:root {
	/* Brand Colors */
	--color-navy: #1B2A36;
	--color-navy-light: #243644;
	--color-navy-dark: #131f28;
	--color-gold: #FFC000;
	--color-gold-light: #FFD04A;
	--color-gold-dark: #E6AC00;

	/* Accent Colors */
	--color-coral: #DE7954;
	--color-sky: #74BBE8;
	--color-sage: #7ABE87;

	/* Service Colors */
	--color-immobiltour: #305BAD;
	--color-stardomus: #F08013;
	--color-superbonus: #1e8c51;
	--color-pdt: #703853;

	/* Neutrals — warm tones */
	--color-bg: #FAFAF8;
	--color-bg-alt: #F2F0EC;
	--color-bg-warm: #EDE9E3;
	--color-text: #2A2A2A;
	--color-text-light: #6B7280;
	--color-text-muted: #9CA3AF;
	--color-border: #E5E2DC;
	--color-white: #FFFFFF;

	/* Typography */
	--font-primary: 'Manrope', sans-serif;
	--font-accent: 'Be Vietnam Pro', sans-serif;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	/* Fluid type scale */
	--fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
	--fs-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
	--fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
	--fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
	--fs-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
	--fs-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
	--fs-3xl: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
	--fs-display: clamp(3rem, 2rem + 5vw, 5rem);

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;
	--space-section: clamp(60px, 5vw + 20px, 100px);

	/* Layout */
	--navbar-height: 70px;
	--container-max: 1200px;
	--border-radius: 8px;
	--border-radius-lg: 16px;
	--border-radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(27, 42, 54, 0.06);
	--shadow-md: 0 4px 12px rgba(27, 42, 54, 0.08);
	--shadow-lg: 0 8px 30px rgba(27, 42, 54, 0.12);
	--shadow-xl: 0 20px 60px rgba(27, 42, 54, 0.15);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;
	--transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   Base Reset & Typography
   ============================================ */

body {
	font-family: var(--font-primary);
	font-weight: var(--fw-regular);
	color: var(--color-text);
	background-color: var(--color-bg);
	letter-spacing: 0.01em;
	line-height: 1.7;
	padding-top: var(--navbar-height);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

b, strong {
	font-weight: var(--fw-extrabold);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: var(--fw-extrabold);
	line-height: 1.2;
	color: var(--color-text);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-base); }

p {
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--color-text);
}

.text-accent {
	font-family: var(--font-accent);
	font-weight: var(--fw-medium);
}

.text-muted {
	color: var(--color-text-light) !important;
}

main {
	height: auto;
	min-height: 100vh;
}

/* Accessibility — visible keyboard focus ring for all interactive elements */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
	border-radius: 2px;
}
/* On gold backgrounds the gold ring is invisible — use navy instead */
.gold-section :where(a, button, input, textarea, select, [tabindex]):focus-visible,
.gold-bg :where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline-color: var(--color-navy);
}

/* ============================================
   Section System
   ============================================ */

.section {
	position: relative;
	padding: var(--space-section) 0;
}

.section-sm {
	position: relative;
	padding: var(--space-2xl) 0;
}

.grey-section {
	background-color: var(--color-bg-alt);
}

.warm-section {
	background-color: var(--color-bg-warm);
}

.dark-section {
	background-color: var(--color-navy);
	color: var(--color-white);
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section p {
	color: var(--color-white);
}
.dark-section .text-muted {
	color: rgba(255, 255, 255, 0.6) !important;
}

.gold-section {
	background-color: var(--color-gold);
	color: var(--color-navy);
}
.gold-section h1,
.gold-section h2,
.gold-section h3,
.gold-section h4,
.gold-section p {
	color: var(--color-navy);
}

/* Section label (small tag above titles) */
.section-label {
	font-family: var(--font-accent);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-gold);
	margin-bottom: var(--space-sm);
	display: block;
}

.dark-section .section-label,
.gold-section .section-label {
	color: var(--color-white);
}

/* ============================================
   Buttons
   ============================================ */

.btn-primary-spc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: var(--transition-base);
	cursor: pointer;
	border: none;
	background-color: var(--color-gold);
	color: var(--color-navy);
}
.btn-primary-spc:hover {
	background-color: var(--color-gold-dark);
	color: var(--color-navy);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-outline-spc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: var(--transition-base);
	cursor: pointer;
	background: transparent;
	border: 1.5px solid var(--color-navy);
	color: var(--color-navy);
}
.btn-outline-spc:hover {
	background-color: var(--color-navy);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-outline-white {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: var(--transition-base);
	cursor: pointer;
	background: transparent;
	border: 1.5px solid var(--color-white);
	color: var(--color-white);
}
.btn-outline-white:hover {
	background-color: var(--color-white);
	color: var(--color-navy);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-link-spc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	color: var(--color-navy);
	transition: var(--transition-base);
	padding: 0;
	border: none;
	background: none;
}
.btn-link-spc::after {
	content: '\2192';
	transition: var(--transition-spring);
}
.btn-link-spc:hover {
	color: var(--color-gold-dark);
}
.btn-link-spc:hover::after {
	transform: translateX(4px);
}

.btn-link-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	color: var(--color-white);
	transition: var(--transition-base);
	padding: 0;
	border: none;
	background: none;
}
.btn-link-white::after {
	content: '\2192';
	transition: var(--transition-spring);
}
.btn-link-white:hover {
	color: var(--color-gold);
}
.btn-link-white:hover::after {
	transform: translateX(4px);
}

/* Standard button — navy bg, used in CTAs and forms */
.btn-standard {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	font-family: var(--font-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: var(--transition-base);
	cursor: pointer;
	background-color: var(--color-navy);
	border: 1.5px solid var(--color-navy);
	color: var(--color-white);
}
.btn-standard:hover {
	background-color: var(--color-navy-dark);
	border-color: var(--color-navy-dark);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* ============================================
   Cards
   ============================================ */

.card-spc {
	background: var(--color-white);
	border-radius: var(--border-radius-lg);
	padding: var(--space-xl);
	transition: var(--transition-base);
	border: 1px solid var(--color-border);
}
.card-spc:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.card-spc-dark {
	background: var(--color-navy-light);
	border-radius: var(--border-radius-lg);
	padding: var(--space-xl);
	transition: var(--transition-base);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}
.card-spc-dark:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(255, 192, 0, 0.3);
}

/* Card with colored left accent */
.card-accent {
	border-left: 3px solid var(--color-gold);
}
.card-accent.accent-coral { border-left-color: var(--color-coral); }
.card-accent.accent-sky { border-left-color: var(--color-sky); }
.card-accent.accent-sage { border-left-color: var(--color-sage); }
.card-accent.accent-immobiltour { border-left-color: var(--color-immobiltour); }
.card-accent.accent-stardomus { border-left-color: var(--color-stardomus); }
.card-accent.accent-superbonus { border-left-color: var(--color-superbonus); }
.card-accent.accent-pdt { border-left-color: var(--color-pdt); }

/* ============================================
   Stats / KPI
   ============================================ */

.stat-item {
	border-left: 3px solid var(--color-gold);
	padding-left: var(--space-lg);
	margin-bottom: var(--space-xl);
}
.stat-number {
	font-family: var(--font-accent);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-3xl);
	line-height: 1;
	color: var(--color-navy);
	display: block;
}
.stat-label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-light);
	margin-top: var(--space-xs);
	display: block;
}

.dark-section .stat-number {
	color: var(--color-white);
}
.dark-section .stat-label {
	color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   Service Icon Wrapper
   ============================================ */

.service-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-lg);
	background: var(--color-bg-alt);
}
.service-icon i {
	font-size: 1.5rem;
	color: var(--color-navy);
}

/* ============================================
   Timeline (approach steps)
   ============================================ */

.timeline-steps {
	display: flex;
	gap: var(--space-lg);
	overflow-x: auto;
	padding-bottom: var(--space-md);
	scroll-snap-type: x mandatory;
}

.timeline-step {
	flex: 0 0 200px;
	scroll-snap-align: start;
	position: relative;
	text-align: center;
}

.timeline-step-number {
	font-family: var(--font-accent);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-extrabold);
	color: var(--color-gold);
	opacity: 0.3;
	line-height: 1;
}

.timeline-step-title {
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	margin-top: var(--space-xs);
}

.timeline-step-desc {
	font-size: var(--fs-xs);
	color: var(--color-text-light);
	margin-top: var(--space-xs);
}

/* Connector line between steps */
.timeline-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 20px;
	right: -20px;
	width: 40px;
	height: 2px;
	background: var(--color-border);
}

@media (max-width: 768px) {
	.timeline-steps {
		flex-direction: column;
		gap: var(--space-md);
	}
	.timeline-step {
		flex: none;
		text-align: left;
		display: flex;
		gap: var(--space-md);
		align-items: center;
	}
	.timeline-step:not(:last-child)::after {
		display: none;
	}
	.timeline-step-number {
		flex-shrink: 0;
		width: 50px;
	}
}

/* ============================================
   Logo Wall
   ============================================ */

.logo-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xl);
}

.logo-wall img {
	max-height: 50px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(100%);
	transition: var(--transition-base);
}

.logo-wall img:hover {
	opacity: 1;
	filter: grayscale(0%);
}

/* Scroll progress bar lives in header.css (single definition). */

/* ============================================
   Legacy Support — left-line
   ============================================ */

.left-line {
	border-left: 3px solid var(--color-gold);
	padding-left: 20px;
	margin-bottom: 30px;
}
.left-line p {
	margin-bottom: 0;
}
.left-line span {
	font-family: var(--font-accent);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-2xl);
}
.left-line p {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	margin-bottom: 0;
}

/* ============================================
   Legacy Support — testata (page headers)
   ============================================ */

.div-testata {
	height: 500px;
	color: var(--color-white);
	background-color: var(--color-navy);
	position: relative;
}
.content-testata {
	height: 100%;
	position: relative;
	z-index: 50;
}
.titolo-testata {
	height: 60%;
	padding-left: 20px;
	border-left: 2px solid var(--color-gold);
}
.content-testata p {
	margin-bottom: 8px;
}
.img-testata {
	position: absolute;
	right: 20px;
	bottom: 20px;
	opacity: .5;
}

/* ============================================
   Legacy Support — buttons (CTA arrow)
   ============================================ */

.button-cta {
	display: inline-block;
	padding: 6px 12px 6px 34px;
	margin-top: 10px !important;
	text-decoration: none;
	position: relative;
	transition: var(--transition-base);
}
.button-cta:before {
	content: " ";
	height: 14px;
	width: 14px;
	display: block;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition-base);
}
.button-cta:after {
	transition: var(--transition-base);
}
.button-cta:hover {
	padding: 6px 34px 6px 12px;
}
.button-cta:hover:before {
	content: " ";
	height: 0;
	width: 0;
}
.button-cta:hover:after {
	content: " ";
	height: 14px;
	width: 14px;
	display: block;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.button-cta-pos {
	color: var(--color-navy);
	border: 1px solid var(--color-navy);
}
.button-cta-pos:before {
	background: url(../img/arrow-right-long-solid-pos.svg) no-repeat center center;
}
.button-cta-pos:hover { color: var(--color-navy); }
.button-cta-pos:hover:before { content: " "; height: 0; width: 0; }
.button-cta-pos:hover:after { background: url(../img/arrow-right-long-solid-pos.svg) no-repeat center center; }

.button-cta-neg {
	color: var(--color-white);
	border: 1px solid var(--color-white);
}
.button-cta-neg:before {
	background: url(../img/arrow-right-long-solid-neg.svg) no-repeat center center;
}
.button-cta-neg:hover { color: var(--color-white); }
.button-cta-neg:hover:before { content: " "; height: 0; width: 0; }
.button-cta-neg:hover:after { background: url(../img/arrow-right-long-solid-neg.svg) no-repeat center center; }

.link-cta {
	display: inline-block;
	padding: 6px 0px 6px 22px;
	margin-top: 10px !important;
	text-decoration: none;
	position: relative;
	transition: var(--transition-base);
}
.link-cta:before {
	content: " ";
	height: 14px;
	width: 14px;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transition-base);
}
.link-cta:after {
	transition: var(--transition-base);
}
.link-cta:hover {
	padding: 6px 22px 6px 0px;
}
.link-cta:hover:before { content: " "; height: 0; width: 0; }
.link-cta:hover:after {
	content: " ";
	height: 14px;
	width: 14px;
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.link-cta-pos { color: var(--color-navy); }
.link-cta-pos:before { background: url(../img/arrow-right-long-solid-pos.svg) no-repeat center center; }
.link-cta-pos:hover { color: var(--color-navy); }
.link-cta-pos:hover:before { content: " "; height: 0; width: 0; }
.link-cta-pos:hover:after { background: url(../img/arrow-right-long-solid-pos.svg) no-repeat center center; }

.link-cta-neg { color: var(--color-white); }
.link-cta-neg:before { background: url(../img/arrow-right-long-solid-neg.svg) no-repeat center center; }
.link-cta-neg:hover { color: var(--color-white); }
.link-cta-neg:hover:before { content: " "; height: 0; width: 0; }
.link-cta-neg:hover:after { background: url(../img/arrow-right-long-solid-neg.svg) no-repeat center center; }

/* ============================================
   Legacy Support — forms
   ============================================ */

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
input {
	display: block;
	width: 100%;
	height: 60px;
	padding: 16px 15px;
	margin: 10px 0;
	border: 0;
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 400;
	line-height: 50px;
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	outline: 0;
	appearance: none;
	transition: all 0.2s ease-in-out;
}

/* Checkboxes & radios must not inherit the full-width 60px text-input box */
input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	line-height: normal;
	appearance: auto;
	-webkit-appearance: auto;
	accent-color: var(--color-gold);
}

.form-label fieldset { position: relative; }
.form-label fieldset:first-child input { border-radius: var(--border-radius); }
.form-label fieldset:last-child input { border-radius: var(--border-radius); box-shadow: 0; }
.form-label fieldset + fieldset { border-top: 0px; }
.form-label label {
	position: absolute;
	top: 28px;
	left: 15px;
	color: var(--color-text-muted);
	transform: translateY(0);
	transition: all 0.2s ease-in-out;
}
.form-css-label input[data-empty="false"],
.form-css-label input:valid,
.form-css-label input:focus {
	padding: 25px 15px 10px;
}
.form-css-label input:focus {
	outline: 0;
	background: var(--color-bg-alt);
}
.form-css-label input[data-empty="false"] + label,
.form-css-label input:valid + label,
.form-css-label input:focus + label {
	color: var(--color-text);
	font-weight: 900;
	font-size: .85rem;
	top: 17px;
	transform: translateY(0);
}

textarea {
	display: block;
	width: 100%;
	min-height: 60px;
	padding: 16px 15px;
	margin: 10px 0;
	border: 0;
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 400;
	line-height: 50px;
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	outline: 0;
	appearance: none;
	transition: all 0.2s ease-in-out;
}
.form-css-label textarea[data-empty="false"],
.form-css-label textarea:valid,
.form-css-label textarea:focus {
	padding: 25px 15px 10px;
}
.form-css-label textarea:focus {
	outline: 0;
	background: var(--color-bg-alt);
}
.form-css-label textarea[data-empty="false"] + label,
.form-css-label textarea:valid + label,
.form-css-label textarea:focus + label {
	color: var(--color-text);
	font-weight: 900;
	font-size: .85rem;
	top: 17px;
}

.form-label .privacy {
	font-weight: var(--fw-light);
	font-size: var(--fs-xs);
}

/* ============================================
   Legacy Support — misc
   ============================================ */

.mockup-div { position: relative; }
.mockup-div .img-2 { position: absolute; top: 0; left: 0; }
.contatti-maps p { margin-bottom: 10px; }
.contatti-maps i { display: inline-block; width: 20px; }
.contatti-maps iframe { box-shadow: var(--shadow-lg); }

@media screen and (max-width: 500px) {
	.mockup-div { margin-bottom: 40px; }
	.contatti-maps iframe { margin-top: 40px; }
	.left-line { padding-left: 15px; margin-bottom: 25px; }
	.left-line span { font-size: var(--fs-xl); }
	.img-testata { position: absolute; right: 20px; bottom: 20px; opacity: .5; }
}

/* ============================================
   Utility Classes
   ============================================ */

.text-gold { color: var(--color-gold); }
.text-navy { color: var(--color-navy); }
.text-coral { color: var(--color-coral); }
.text-sky { color: var(--color-sky); }
.text-sage { color: var(--color-sage); }
.bg-navy { background-color: var(--color-navy); }
.bg-gold { background-color: var(--color-gold); }

.img-rounded { border-radius: var(--border-radius-lg); }
.img-cover { object-fit: cover; width: 100%; height: 100%; }