/* ============================================================
       RESET & BASE
       ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img,
svg {
	max-width: 100%;
	display: block;
}
button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}
a {
	color: inherit;
	text-decoration: none;
}
ul {
	list-style: none;
}

/* ============================================================
       TYPOGRAPHY UTILITIES
       ============================================================ */
.font-serif {
	font-family: "Source Serif 4", Georgia, serif;
	font-optical-sizing: auto;
}
.font-mono {
	font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
       COLOR PALETTE (CSS variables)
       ============================================================ */
:root {
	/* === Token Web Trust (da main.css) === */
	--wt-blue: #4285c4;
	--wt-blue-dark: #3670a8;
	--wt-blue-deeper: #2c5a8a;
	--wt-blue-light: #5a9bd5;
	--wt-blue-pale: #ebf2fa;
	--wt-blue-ghost: #f5f8fc;
	--wt-blue-tint: rgba(66, 133, 196, 0.08);
	--wt-blue-tint-md: rgba(66, 133, 196, 0.15);
	--wt-navy: #1a2b42;
	--wt-navy-light: #2a3f5c;
	--border: #dae2ec;
	--border-light: #e8eef4;
	--text: #2d3748;
	--text-light: #5a6577;
	--text-muted: #8694a7;
	--white: #ffffff;
	--bg: #fafbfd;
	--safe: #2ea66f;
	--safe-bg: #f0faf5;
	--safe-border: rgba(46, 166, 111, 0.15);
	--danger: #d94452;
	--danger-bg: #fdf2f3;
	--danger-border: rgba(217, 68, 82, 0.15);
	--radius: 10px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 3px rgba(26, 43, 66, 0.06);
	--shadow-md: 0 4px 16px rgba(26, 43, 66, 0.08);
	--shadow-lg: 0 8px 40px rgba(26, 43, 66, 0.1);
	--mono: "JetBrains Mono", monospace;
	--transition: all 0.3s ease;

	/* === Neutri rimappati su palette WT (text/border/bg) === */
	--slate-50: #f5f8fc;
	--slate-100: #e8eef4;
	--slate-200: #dae2ec;
	--slate-300: #c4d0de;
	--slate-400: #8694a7;
	--slate-500: #5a6577;
	--slate-600: #2d3748;
	--slate-700: #2a3f5c;
	--slate-800: #1a2b42;
	--slate-900: #1a2b42;
	--stone-50: #fafbfd;

	/* === Blu rimappati sui blu WT === */
	--blue-200: #c5dbf0;
	--blue-300: #9cc3e5;
	--blue-400: #5a9bd5;
	--blue-500: #4285c4;
	--blue-600: #4285c4;
	--blue-700: #3670a8;

	/* === Verde "safe" WT === */
	--emerald-300: #8fd4b2;
	--emerald-400: #4fbf8b;
	--emerald-500: #2ea66f;
	--emerald-600: #25895c;

	--amber-200: #fde68a;

	/* === Rosso "danger" WT === */
	--red-400: #e06875;
	--red-500: #d94452;
	--red-700: #b5303d;

	--navy-deep: #1a2b42;
	--navy-mid: #2a3f5c;
}

/* ============================================================
       ANIMATIONS
       ============================================================ */
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
@keyframes ping {
	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.animate-scroll {
	animation: scroll 60s linear infinite;
}
.animate-scroll-slow {
	animation: scroll 45s linear infinite;
}
.animate-ping {
	animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.fade-up {
	animation: fadeUp 0.8s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.animate-scroll,
	.animate-scroll-slow,
	.animate-ping,
	.fade-up {
		animation: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
       LAYOUT
       ============================================================ */
.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}
.max-w-3xl {
	max-width: 48rem;
}
.max-w-4xl {
	max-width: 56rem;
}
.max-w-5xl {
	max-width: 64rem;
}
.max-w-6xl {
	max-width: 72rem;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.text-center {
	text-align: center;
}

/* ============================================================
       BUTTONS
       ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 13px 26px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 8px;
	transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	cursor: pointer;
}
.btn-primary {
	background: var(--wt-blue);
	color: white;
	box-shadow: 0 2px 8px rgba(66, 133, 196, 0.3);
}
.btn-primary:hover {
	background: var(--wt-blue-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(66, 133, 196, 0.35);
}
.btn-primary:disabled {
	background: var(--slate-300);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}
.btn-secondary {
	background: white;
	color: var(--wt-blue);
	border: 1.5px solid var(--border);
}
.btn-secondary:hover {
	border-color: var(--wt-blue);
	background: var(--wt-blue-tint);
}
.btn-dark {
	background: var(--wt-navy);
	color: white;
}
.btn-dark:hover {
	background: var(--wt-navy-light);
}
.btn-dark:disabled {
	background: var(--slate-400);
	cursor: not-allowed;
}
.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}
.btn-lg {
	padding: 1rem 2rem;
	font-size: 1rem;
}
.btn-outline {
	background: transparent;
	color: var(--blue-600);
	border: 1px solid var(--blue-600);
}
.btn-outline:hover {
	background: var(--blue-600);
	color: white;
}
.btn-outline-light {
	background: transparent;
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.6);
}

/* CTA band (intermediate inline CTAs, WT-style) */
.cta-band {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
@media (min-width: 640px) {
	.cta-band {
		flex-direction: row;
		justify-content: center;
		gap: 1.25rem;
	}
}
.cta-band-text {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.25rem;
	color: var(--slate-800);
	font-weight: 500;
}
.cta-band-text-light {
	color: white;
}
.cta-band-sub {
	font-size: 0.9375rem;
	color: var(--slate-500);
	margin-top: 0.25rem;
}

/* ============================================================
       HEADER
       ============================================================ */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: all 0.3s;
	background: transparent;
}
.header.scrolled {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-light);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}
.header-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.header-logo-mark {
	display: block;
	width: auto;
	height: 2rem;
	max-width: 14rem;
}
.header-logo .divider {
	height: 1.25rem;
	width: 1px;
	background: var(--slate-300);
}
.header-logo .product {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.header-logo .product-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--slate-500);
}
.header-logo .product-name {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--slate-900);
}
@media (max-width: 640px) {
	.header-logo .divider,
	.header-logo .product {
		display: none;
	}
}
.nav {
	display: none;
	align-items: center;
	gap: 2rem;
}
@media (min-width: 768px) {
	.nav {
		display: flex;
	}
}
.nav a {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--text-light);
	transition: color 0.2s;
}
.nav a:hover {
	color: var(--wt-navy);
}
@media (max-width: 1023px) {
	.nav {
		display: none !important;
	}
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.lang-switch {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	overflow: hidden;
}
.lang-switch button {
	padding: 0.25rem 0.5rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.6875rem;
	background: white;
	color: var(--text);
	transition: all 0.2s;
}
.lang-switch button:hover {
	background: var(--slate-50);
}
.lang-switch button.active {
	background: var(--slate-900);
	color: white;
}
.header-cta {
	display: none;
}
@media (min-width: 640px) {
	.header-cta {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		background: var(--slate-900);
		color: white;
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: 0.25rem;
		transition: background 0.2s;
	}
}
.header-cta:hover {
	background: var(--wt-blue);
}

/* ============================================================
       HERO
       ============================================================ */
.hero {
	position: relative;
	padding: 8rem 0 5rem;
	overflow: hidden;
}
@media (min-width: 1024px) {
	.hero {
		padding: 10rem 0 7rem;
	}
}
.hero-content {
	position: relative;
	max-width: 64rem;
}
/* Hero a due colonne (testo sx, animazione dx) */
.hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}
.hero-grid .hero-content {
	max-width: none;
}
.hero-grid .hero-ctas {
	margin-bottom: 2.5rem;
}
.hero-animation {
	position: relative;
	width: 100%;
	margin: 0;
}
.hero-stats {
	margin-top: 0;
}
@media (max-width: 1023px) {
	.hero-grid {
		justify-items: center;
	}
	.hero-grid .hero-content {
		width: 100%;
		max-width: 42rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.hero-sub {
		max-width: 100%;
	}
	.hero-ctas,
	.hero-stats {
		width: 100%;
		max-width: 42rem;
	}
	.hero-ctas {
		align-items: stretch;
	}
	.hero-ctas .btn,
	.hero-ctas a {
		width: 100%;
	}
	.hero-stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.hero-stat {
		text-align: center;
	}
	.hero-animation {
		max-width: 42rem;
	}
	#contact .hero-ctas {
		width: 100%;
		max-width: 100%;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	#contact .hero-ctas .btn,
	#contact .hero-ctas a {
		width: auto;
		min-width: 14rem;
	}
}
.scene-caption-center {
	text-align: left;
	margin-top: 0.75rem;
}
.scene-caption-center {
	text-align: center;
	margin-top: 1rem;
}
.hero h1 {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 2.5rem;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wt-navy);
	margin-bottom: 1.5rem;
	font-weight: 700;
}
@media (min-width: 640px) {
	.hero h1 {
		font-size: 3rem;
	}
}
@media (min-width: 1024px) {
	.hero h1 {
		font-size: 2.7rem;
	}
}
@media (min-width: 1280px) {
	.hero h1 {
		font-size: 2.9rem;
	}
}
.hero-highlight {
	display: inline-block;
	color: var(--blue-600);
	font-style: italic;
}
.hero-sub {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--text-light);
	margin-bottom: 2.5rem;
	max-width: 31.25rem;
}
@media (min-width: 1024px) {
	.hero-sub {
		font-size: 1.1rem;
	}
}
.hero-ctas {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 4rem;
}
@media (min-width: 640px) {
	.hero-ctas {
		flex-direction: row;
	}
}
.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 42rem;
}
@media (min-width: 1024px) {
	.hero-stats {
		gap: 3rem;
	}
}
.hero-stat {
	border-top: 1px solid var(--slate-300);
	padding-top: 1rem;
}
.hero-stat-value {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1;
	color: var(--wt-navy);
	margin-bottom: 0.375rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.hero-stat-value {
		font-size: 2.25rem;
	}
}
.hero-stat-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--slate-500);
}

/* ============================================================
       MONITORED CHANNELS TICKER
       ============================================================ */
/* Canali monitorati — slider a 2 righe (categoria principale + secondarie) */
.channels-slider-wrap {
	position: relative;
	overflow: hidden;
	margin-top: 1rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.channels-slider {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	white-space: nowrap;
	width: max-content;
}
.channels-slide {
	flex-shrink: 0;
	min-width: 16rem;
	padding: 1.25rem 1.5rem;
	background: var(--wt-blue-ghost);
	border: 1px solid var(--slate-200);
	border-radius: var(--radius);
	text-align: center;
}
.channels-main-cat {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wt-blue);
	margin-bottom: 0.875rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--slate-200);
}
.channels-sub-row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.channels-sub-item {
	font-size: 0.8rem;
	color: var(--slate-500);
}
.channels-fade-l,
.channels-fade-r {
	display: none;
}

/* ============================================================
       TRUST BAR
       ============================================================ */
.trust-section {
	padding: 4rem 0;
	background: white;
	border-bottom: 1px solid var(--border-light);
}
@media (min-width: 1024px) {
	.trust-section {
		padding: 5rem 0;
	}
}
.trust-label {
	text-align: center;
	font-size: 0.875rem;
	color: var(--slate-500);
	margin-bottom: 3rem;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}
.trust-track-wrap {
	position: relative;
	overflow: hidden;
}
.trust-track {
	display: flex;
	gap: 3rem;
	align-items: center;
}
@media (min-width: 1024px) {
	.trust-track {
		gap: 4rem;
	}
}
.trust-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	height: 75px;
	padding: 0;
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.25rem;
	color: var(--slate-400);
	white-space: nowrap;
	letter-spacing: 0.025em;
	transition: color 0.2s;
	overflow: visible;
}
.trust-logo:hover {
	color: var(--slate-700);
}
.trust-logo img {
	display: block;
	width: 75px;
	height: 75px;
	max-width: none;
	object-fit: contain;
	opacity: 0.8;
	filter: brightness(0.4) saturate(0.9);
	transition:
		opacity 0.2s,
		transform 0.2s,
		filter 0.2s;
}
.trust-logo:hover img {
	opacity: 1;
	transform: translateY(-1px);
	filter: brightness(0.55) saturate(1);
}
.trust-fade-l,
.trust-fade-r {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 5rem;
	pointer-events: none;
}
.trust-fade-l {
	left: 0;
	background: linear-gradient(to right, white, transparent);
}
.trust-fade-r {
	right: 0;
	background: linear-gradient(to left, white, transparent);
}

/* ============================================================
       PROBLEM SECTION
       ============================================================ */
.section {
	padding: 5rem 0;
}
@media (min-width: 1024px) {
	.section {
		padding: 7rem 0;
	}
}
.section-light {
	background: var(--bg);
}
.section-white {
	background: white;
}
.section-dark {
	background: var(--slate-900);
	color: white;
	position: relative;
	overflow: hidden;
}
.section-navy {
	background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-deep) 50%, var(--navy-mid) 100%);
	color: white;
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(30, 58, 138, 0.4);
	border-bottom: 1px solid rgba(30, 58, 138, 0.4);
}
.section-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--blue-600);
	margin-bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.section-eyebrow-red {
	color: var(--red-700);
}
.section-eyebrow-light {
	color: var(--blue-400);
}
.section-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wt-navy);
	margin-bottom: 1.5rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.section-title {
		font-size: 3rem;
	}
}
.section-title-light {
	color: white;
}
.section-sub {
	font-size: 1.125rem;
	color: var(--text-light);
	line-height: 1.6;
}
.section-sub-light {
	color: var(--slate-300);
}
.section-header {
	max-width: 48rem;
	margin-bottom: 4rem;
}
.section-header-center {
	max-width: 56rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.section-header-center {
		margin-bottom: 4rem;
	}
}
/* Case studies fusi nel Problema */
.cases-block {
	margin-top: 4rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--border);
}
.section-subheader {
	max-width: 48rem;
	margin-bottom: 2.5rem;
}
.section-subheader .section-eyebrow {
	color: var(--blue-600);
}
.section-subtitle {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--wt-navy);
	margin-bottom: 0.75rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.section-subtitle {
		font-size: 2rem;
	}
}

/* ============================================================
       VIOLATION CARDS
       ============================================================ */
.violation-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.violation-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.violation-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.violation-card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: all 0.5s;
}
.violation-card:hover {
	border-color: var(--slate-300);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}
.violation-icon-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.25rem 0;
}
.violation-fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius);
	background: var(--wt-blue-pale);
	color: var(--wt-blue);
	font-size: 1.125rem;
}
.violation-body {
	padding: 1rem 1.25rem 1.25rem;
}
.violation-tag {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wt-blue);
	font-weight: 600;
}
.violation-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--slate-900);
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.violation-desc {
	font-size: 0.84rem;
	color: var(--slate-500);
	line-height: 1.55;
}
.violation-metric {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.875rem;
	margin-top: 0.875rem;
	border-top: 1px solid var(--slate-100);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--slate-900);
}

/* ============================================================
       HOW IT WORKS SCENE (animated SVG)
       ============================================================ */
.scene-wrap {
	position: relative;
}
.scene-container {
	position: relative;
	background: linear-gradient(180deg, var(--slate-900) 0%, var(--navy-mid) 100%);
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--slate-800);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.scene-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
	flex-wrap: wrap;
	gap: 1rem;
}
.scene-caption {
	font-size: 0.75rem;
	color: var(--slate-500);
	font-style: italic;
	flex: 1;
	min-width: 200px;
}
.scene-buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ============================================================
       FRAMEWORK (horizontal flow)
       ============================================================ */
.framework-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.framework-badge {
	padding: 0.375rem 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.25rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--slate-300);
}
.framework-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 768px) {
	.framework-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.framework-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 0.75rem;
	}
}
.framework-card {
	position: relative;
	height: 100%;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	transition: all 0.5s;
}
@media (min-width: 1024px) {
	.framework-card {
		padding: 1.75rem;
	}
}
.framework-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(96, 165, 250, 0.4);
	transform: translateY(-4px);
}
.framework-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 1rem;
}
.framework-card-num {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--blue-400);
	letter-spacing: 0.15em;
}
.framework-card-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.framework-card-logo {
	display: block;
	width: auto;
	height: 3.25rem;
	max-width: 4.2rem;
	margin: 0 0 1rem;
	object-fit: contain;
}
.framework-card-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.2;
	color: white;
	margin-bottom: 0.75rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.framework-card-title {
		font-size: 1.5rem;
	}
}
.framework-card-desc {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--slate-400);
}
@media (min-width: 1024px) {
	.framework-card-desc {
		font-size: 0.875rem;
	}
}
/* ============================================================
   TRUSTED FLAGGER
   ============================================================ */
.tf-bg-radial {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background-image: radial-gradient(circle at 20% 50%, rgba(96, 165, 250, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
}
.tf-glow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56.25rem;
	height: 18.75rem;
	border-radius: 9999px;
	background: rgba(59, 130, 246, 0.08);
	filter: blur(80px);
}
.tf-top-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(96, 165, 250, 0.4), transparent);
}
.tf-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: 9999px;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--blue-300);
	margin-bottom: 1.5rem;
}
.tf-cards-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 72rem;
	margin: 0 auto 3rem;
}
@media (min-width: 1024px) {
	.tf-cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		margin-bottom: 3.5rem;
	}
}
.tf-card {
	position: relative;
	border-radius: 0.5rem;
	border: 1px solid;
	overflow: hidden;
	transition: all 0.5s;
}
.tf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.tf-card-primary {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(29, 78, 216, 0.1) 50%, rgba(15, 23, 42, 0.4) 100%);
	border-color: rgba(96, 165, 250, 0.4);
	box-shadow: 0 10px 30px -10px rgba(30, 58, 138, 0.3);
}
.tf-card-primary:hover {
	border-color: rgba(147, 197, 253, 0.6);
}
.tf-card-secondary {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(30, 41, 59, 0.3) 50%, rgba(15, 23, 42, 0.4) 100%);
	border-color: rgba(100, 116, 139, 0.5);
	box-shadow: 0 10px 30px -10px rgba(2, 6, 23, 0.3);
}
.tf-card-secondary:hover {
	border-color: rgba(148, 163, 184, 0.6);
}
.tf-card-strip {
	height: 0.25rem;
	width: 100%;
}
.tf-card-strip-primary {
	background: linear-gradient(to right, var(--blue-400), var(--blue-500));
}
.tf-card-strip-secondary {
	background: linear-gradient(to right, var(--slate-400), var(--slate-300));
}
.tf-card-body {
	padding: 1.75rem;
}
@media (min-width: 1024px) {
	.tf-card-body {
		padding: 2rem;
	}
}
.tf-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.tf-card-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 0.25rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}
.tf-card-badge-primary {
	background: rgba(59, 130, 246, 0.2);
	color: var(--blue-200);
	border: 1px solid rgba(96, 165, 250, 0.3);
}
.tf-card-badge-secondary {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.tf-card-sublabel {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	color: var(--slate-400);
	margin-top: 0.5rem;
	letter-spacing: 0.05em;
}
.tf-new-pill {
	padding: 0.25rem 0.5rem;
	background: var(--emerald-500);
	color: white;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	border-radius: 0.25rem;
}
.tf-card-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.2;
	color: white;
	margin-bottom: 0.5rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.tf-card-title {
		font-size: 1.625rem;
	}
}
.tf-card-subtitle {
	font-size: 0.875rem;
	color: var(--slate-300);
	line-height: 1.6;
	margin-bottom: 1.25rem;
}
.tf-card-authority {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.75rem;
	color: var(--slate-400);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1.5rem;
}
.tf-card-benefits {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.tf-card-benefit {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: #e2e8f0;
	line-height: 1.6;
}
.tf-benefit-dot {
	position: relative;
	display: inline-flex;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: 0.375rem;
	flex-shrink: 0;
}
.tf-benefit-dot-ping {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: var(--emerald-400);
	opacity: 0.4;
}
.tf-benefit-dot-core {
	position: relative;
	display: inline-flex;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--emerald-400);
}
.tf-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	transition: all 0.2s;
}
.tf-card-link:hover {
	gap: 0.75rem;
}
.tf-card-link-primary {
	color: var(--blue-300);
}
.tf-card-link-primary:hover {
	color: var(--blue-200);
}
.tf-card-link-secondary {
	color: var(--slate-300);
}
.tf-card-link-secondary:hover {
	color: white;
}
/* Spine connector lines (desktop only) */
.tf-converge {
	position: relative;
	max-width: 64rem;
	margin: 4rem auto 0;
}
.tf-spine-line {
	display: none;
	position: absolute;
	top: -3rem;
	width: 1px;
	height: 3rem;
	background: linear-gradient(to bottom, transparent, rgba(96, 165, 250, 0.4));
}
@media (min-width: 1024px) {
	.tf-spine-line {
		display: block;
	}
}
.tf-spine-line.left {
	left: 25%;
}
.tf-spine-line.right {
	right: 25%;
}
.tf-spine-bar {
	background: linear-gradient(to right, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
	border: 1px solid rgba(96, 165, 250, 0.3);
	border-radius: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	backdrop-filter: blur(8px);
}
@media (min-width: 1024px) {
	.tf-spine-bar {
		padding: 2rem;
	}
}
.tf-spine-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--blue-300);
	margin-bottom: 0.75rem;
}
.tf-spine-eyebrow-line {
	display: inline-block;
	height: 1px;
	width: 1.5rem;
	background: rgba(96, 165, 250, 0.6);
}
.tf-spine-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.2;
	color: white;
	margin-bottom: 0.75rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.tf-spine-title {
		font-size: 1.875rem;
	}
}
.tf-spine-sub {
	font-size: 0.875rem;
	color: var(--slate-300);
	line-height: 1.6;
	max-width: 36rem;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.tf-spine-sub {
		font-size: 1rem;
	}
}
.tf-final-proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 1024px) {
	.tf-final-proof {
		gap: 3rem;
		margin-top: 3rem;
	}
}
.tf-proof-item {
	text-align: center;
	border-top: 1px solid rgba(96, 165, 250, 0.3);
	padding-top: 1.25rem;
}
.tf-proof-value {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1;
	color: white;
	margin-bottom: 0.5rem;
	font-weight: 500;
}
@media (min-width: 1024px) {
	.tf-proof-value {
		font-size: 2.25rem;
	}
}
.tf-proof-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--slate-400);
	line-height: 1.2;
}

/* ============================================================
       DIFFERENTIATORS
       ============================================================ */
.diff-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.diff-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.diff-card {
	position: relative;
	padding: 2rem;
	border-radius: 0.5rem;
	border: 1px solid;
	transition: all 0.5s;
}
.diff-card-default {
	background: white;
	border-color: var(--slate-200);
}
.diff-card-default:hover {
	border-color: var(--slate-300);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}
.diff-card-featured {
	background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 100%);
	border-color: var(--slate-700);
	color: white;
}
.diff-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.diff-card-icon {
	padding: 0.625rem;
	border-radius: 0.5rem;
}
.diff-card-icon-default {
	background: rgba(59, 130, 246, 0.08);
	color: var(--blue-600);
}
.diff-card-icon-featured {
	background: rgba(59, 130, 246, 0.2);
	color: var(--blue-300);
}
.diff-card-tag {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
}
.diff-card-tag-default {
	background: var(--slate-100);
	color: var(--slate-500);
}
.diff-card-tag-featured {
	background: rgba(59, 130, 246, 0.2);
	color: var(--blue-300);
}
.diff-card-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.2;
	margin-bottom: 0.75rem;
	font-weight: 500;
}
.diff-card-title-default {
	color: var(--slate-900);
}
.diff-card-title-featured {
	color: white;
}
.diff-card-desc {
	font-size: 0.875rem;
	line-height: 1.6;
}
.diff-card-desc-default {
	color: var(--slate-600);
}
.diff-card-desc-featured {
	color: var(--slate-300);
}

/* ============================================================
       CASE STUDIES
       ============================================================ */
.cs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 1024px) {
	.cs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.cs-card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: all 0.5s;
	cursor: pointer;
}
.cs-card:hover {
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}
.cs-card-body {
	padding: 2rem;
}
@media (min-width: 1024px) {
	.cs-card-body {
		padding: 2.5rem;
	}
}
.cs-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.cs-card-sector {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--blue-600);
	font-weight: 600;
}
.cs-card-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1.1;
	color: var(--slate-900);
	margin-bottom: 0.25rem;
	font-weight: 500;
}
.cs-card-subtitle {
	font-size: 0.875rem;
	color: var(--slate-500);
	font-style: italic;
	margin-bottom: 1.5rem;
}
.cs-card-challenge {
	font-size: 0.875rem;
	color: var(--slate-700);
	line-height: 1.6;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--slate-100);
}
.cs-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}
.cs-result-value {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1;
	color: var(--slate-900);
	margin-bottom: 0.375rem;
	font-weight: 500;
}
.cs-result-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--slate-500);
	line-height: 1.2;
}
.cs-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--blue-600);
	transition: gap 0.2s;
}
.cs-card:hover .cs-card-cta {
	gap: 0.75rem;
}

/* ============================================================
       PRESS
       ============================================================ */
.press-bg-quote {
	position: absolute;
	top: -2.5rem;
	left: -2.5rem;
	width: 24rem;
	height: 24rem;
	color: var(--blue-400);
	opacity: 0.05;
}
.press-content {
	position: relative;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}
@media (min-width: 1024px) {
	.press-content {
		padding: 0 2.5rem;
	}
}
.press-quote {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.5rem;
	line-height: 1.3;
	color: white;
	font-style: italic;
	margin: 0 auto 2.5rem;
	max-width: 64rem;
	font-weight: 400;
}
@media (min-width: 1024px) {
	.press-quote {
		font-size: 2.25rem;
	}
}
.press-author {
	font-size: 0.875rem;
	font-weight: 600;
	color: white;
	letter-spacing: 0.025em;
	margin-bottom: 0.25rem;
}
.press-meta {
	font-size: 0.75rem;
	color: var(--slate-400);
	font-family: "JetBrains Mono", monospace;
}

/* ============================================================
       CTA / FORM
       ============================================================ */
.cta-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 1024px) {
	.cta-grid {
		grid-template-columns: 2fr 3fr;
		gap: 4rem;
	}
}
.cta-left h2 {
	margin-bottom: 1.5rem;
}
.cta-left-sub {
	font-size: 1rem;
	color: var(--slate-600);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}
.cta-download-box {
	padding: 1.5rem;
	background: white;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	margin-bottom: 2rem;
}
.cta-download-box p {
	font-size: 0.875rem;
	color: var(--slate-600);
	margin-bottom: 1rem;
}
.cta-download-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--blue-600);
	transition: gap 0.2s;
}
.cta-download-link:hover {
	gap: 0.75rem;
}
.cta-contact-info {
	padding-top: 2rem;
	border-top: 1px solid var(--slate-200);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.cta-contact-info a,
.cta-contact-info-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--slate-600);
	transition: color 0.2s;
}
.cta-contact-info a:hover {
	color: var(--blue-600);
}
.form-card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	padding: 2rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1024px) {
	.form-card {
		padding: 2.5rem;
	}
}
.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
	.form-row.two-cols {
		grid-template-columns: 1fr 1fr;
	}
}
.form-field label {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--slate-500);
	margin-bottom: 0.375rem;
}
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	background: white;
	border: 1px solid var(--slate-300);
	border-radius: 0.25rem;
	font-family: inherit;
	font-size: 0.875rem;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}
.form-field textarea {
	resize: none;
	min-height: 4.5rem;
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--blue-500);
	box-shadow: 0 0 0 1px var(--blue-500);
}
.form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	margin-bottom: 1.25rem;
}
.form-checkbox input {
	margin-top: 0.25rem;
	width: 1rem;
	height: 1rem;
	accent-color: var(--blue-600);
}
.form-checkbox span {
	font-size: 0.75rem;
	color: var(--slate-600);
	line-height: 1.6;
}
.form-submit-btn {
	width: 100%;
}
.form-success {
	text-align: center;
	padding: 3rem 0;
}
.form-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	margin-bottom: 1.5rem;
	color: var(--emerald-600);
}
.form-success-title {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.5rem;
	color: var(--slate-900);
	font-weight: 500;
}

/* ============================================================
       FOOTER
       ============================================================ */
.footer {
	background: var(--slate-900);
	color: var(--slate-400);
	padding: 4rem 0;
}
/* Footer centrato (stile Web Trust) */
.footer-centered {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.footer-address {
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--slate-400);
}
.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}
.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	border: 1px solid var(--slate-700);
	color: var(--slate-400);
	transition: all 0.2s;
}
.footer-social-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}
.footer-social-icon:hover {
	color: white;
	border-color: var(--slate-500);
	background: var(--slate-800);
}
.footer-iso-badge {
	margin-top: 0.5rem;
}
.footer-iso-badge a {
	display: inline-flex;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.footer-iso-badge a:hover {
	opacity: 1;
}
.footer-iso-badge img {
	display: block;
	width: auto;
	height: 5rem;
	max-width: 100%;
}
.footer-iso-text a {
	font-size: 0.75rem;
	color: var(--slate-400);
	transition: color 0.2s;
}
.footer-iso-text a:hover {
	color: var(--slate-200);
}
.footer-legal-links {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--slate-600);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.footer-legal-links a {
	color: var(--blue-400);
	transition: color 0.2s;
}
.footer-legal-links a:hover {
	color: var(--blue-300);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 768px) {
	.footer-grid {
		grid-template-columns: 5fr 4fr 3fr;
		gap: 2.5rem;
	}
}
.footer-logo {
	color: white;
	margin-bottom: 1.5rem;
}
.footer-tagline {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--slate-400);
	max-width: 28rem;
}
.footer-block-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--slate-500);
	margin-bottom: 0.75rem;
}
.footer-block-content {
	font-size: 0.875rem;
	color: var(--slate-300);
	line-height: 1.6;
}
.footer-email {
	color: var(--blue-400);
	margin-top: 0.75rem;
	display: inline-block;
	font-size: 0.875rem;
}
.footer-email:hover {
	color: var(--blue-300);
}
.footer-cert {
	font-size: 0.75rem;
	color: var(--slate-300);
	line-height: 1.6;
}
.footer-bottom {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--slate-800);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (min-width: 640px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
.footer-copyright {
	font-size: 0.75rem;
	color: var(--slate-500);
}
.footer-links {
	display: flex;
	gap: 1.5rem;
	font-size: 0.75rem;
}
.footer-links a {
	color: var(--slate-500);
	transition: color 0.2s;
}
.footer-links a:hover {
	color: white;
}

/* ============================================================
       UTILITY (icons, decorations)
       ============================================================ */
.icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}
.icon-sm {
	width: 0.875rem;
	height: 0.875rem;
}
.icon-lg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Hide on mobile, show on desktop */
.hide-mobile {
	display: none;
}
@media (min-width: 1024px) {
	.hide-mobile {
		display: block;
	}
}
.hide-desktop {
	display: block;
}
@media (min-width: 1024px) {
	.hide-desktop {
		display: none;
	}
}

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