/* ==========================================================================
   Digit-Ale.com - design system 2026
   Palette derivata dal logo aziendale: blu petrolio + rosso su neutri scuri.
   Nessun font o risorsa esterna (no Google Fonts, no CDN): niente richieste a
   terzi, quindi nessun banner cookie necessario.
   ========================================================================== */

:root {
	/* Blu petrolio (dal logo) */
	--blue-900: #08283a;
	--blue-800: #0d3a52;
	--blue-700: #14567a;
	--blue-600: #1a6d97;
	--blue-500: #2189b8;

	/* Rosso (dal logo) */
	--red-700: #9d040f;
	--red-600: #c00512;
	--red-500: #e30613;
	--red-400: #f4353f;

	/* Neutri scuri (coerenti con le demo React su demo.digit-ale.com) */
	--ink-900: #0f1115;
	--ink-800: #15181e;
	--ink-700: #1c212a;
	--ink-600: #262c37;

	/* Neutri chiari */
	--paper: #f5f7f9;
	--paper-2: #ffffff;

	--text: #e9ecef;
	--text-dim: #98a2ad;
	--text-ink: #16191d;
	--text-ink-dim: #58626f;

	--line-dark: rgba(255, 255, 255, 0.10);
	--line-light: rgba(16, 24, 32, 0.12);

	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
		"Liberation Mono", Menlo, monospace;

	--maxw: 1180px;
	--radius: 10px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
	--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.18);
	--shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* --------------------------------------------------------------- reset/base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--text-ink);
	background: var(--paper-2);
}

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

a {
	color: var(--blue-700);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	line-height: 1.18;
	letter-spacing: -0.015em;
	font-weight: 700;
}

h1 {
	font-size: clamp(2rem, 4.6vw, 3.15rem);
}

h2 {
	font-size: clamp(1.55rem, 3vw, 2.1rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1em;
}

ul {
	margin: 0 0 1em;
	padding-left: 1.15em;
}

hr {
	border: 0;
	border-top: 1px solid var(--line-light);
	margin: 2.5rem 0;
}

code,
kbd,
.mono {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

:focus-visible {
	outline: 2px solid var(--blue-500);
	outline-offset: 2px;
}

.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;
}

/* ---------------------------------------------------------------- container */

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.wrap-narrow {
	max-width: 780px;
}

/* --------------------------------------------------------------------- nav */

.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(15, 17, 21, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line-dark);
	color: var(--text);
}

.nav-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 66px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--text);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	flex: 0 0 auto;
}

.brand:hover {
	text-decoration: none;
}

.brand img {
	width: 30px;
	height: 30px;
}

.brand span em {
	font-style: normal;
	color: var(--red-400);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.nav-links a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 7px;
	color: var(--text-dim);
	font-size: 0.94rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s, background-color 0.15s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
	color: var(--text);
	background: rgba(255, 255, 255, 0.07);
	text-decoration: none;
}

.nav-cta {
	background: var(--red-500) !important;
	color: #fff !important;
}

.nav-cta:hover {
	background: var(--red-600) !important;
}

.lang {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	border: 1px solid var(--line-dark);
	border-radius: 7px;
	overflow: hidden;
	flex: 0 0 auto;
}

.lang a {
	padding: 0.3rem 0.55rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-dim);
	text-decoration: none;
}

.lang a[aria-current="true"] {
	background: var(--blue-700);
	color: #fff;
}

.nav-toggle {
	display: none;
	margin-left: auto;
	padding: 0.45rem 0.6rem;
	background: transparent;
	border: 1px solid var(--line-dark);
	border-radius: 7px;
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: inline-block;
	}

	.nav-links {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
		padding: 0.5rem 0 1rem;
		border-top: 1px solid var(--line-dark);
	}

	.nav-inner.open {
		flex-wrap: wrap;
	}

	.nav-inner.open .nav-links {
		display: flex;
	}

	.nav-links a {
		padding: 0.7rem 0.5rem;
	}

	/* In alto: logo a sinistra, lingua e Menu raggruppati a destra. */
	.brand {
		order: 0;
	}

	.lang {
		order: 1;
		margin-left: auto;
	}

	.nav-toggle {
		order: 2;
		margin-left: 0.5rem;
	}

	.nav-links {
		order: 3;
	}
}

/* -------------------------------------------------------------------- hero */

.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 520px at 78% -10%, rgba(33, 137, 184, 0.30), transparent 60%),
		radial-gradient(760px 420px at 8% 106%, rgba(227, 6, 19, 0.16), transparent 62%),
		linear-gradient(180deg, var(--ink-900), var(--blue-900));
	color: var(--text);
	border-bottom: 1px solid var(--line-dark);
}

.hero-inner {
	padding: clamp(3.2rem, 8vw, 6rem) 1.25rem clamp(2.8rem, 6vw, 4.5rem);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.1rem;
	padding: 0.32rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.eyebrow .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #35d07f;
	box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.2);
}

.hero h1 {
	max-width: 20ch;
	color: #fff;
}

.hero h1 em {
	font-style: normal;
	color: var(--red-400);
}

.hero-lead {
	max-width: 62ch;
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	color: var(--text-dim);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 1.8rem 0 0;
}

/* ----------------------------------------------------------------- buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.72rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 0.96rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, transform 0.15s,
		color 0.15s;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

/* Il rosso dei pulsanti e' un tono piu' scuro di quello del logo: col bianco da
   6,4 di contrasto invece di 4,9, e resta leggibile anche su un proiettore. Il
   --red-500 continua a fare l'accento nei titoli e nei bordi. */
.btn-primary {
	background: var(--red-600);
	color: #fff;
}

.btn-primary:hover {
	background: var(--red-700);
	color: #fff;
}

.btn-outline {
	border-color: rgba(255, 255, 255, 0.26);
	color: var(--text);
	background: transparent;
}

.btn-outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.btn-ink {
	background: var(--blue-700);
	color: #fff;
}

.btn-ink:hover {
	background: var(--blue-800);
	color: #fff;
}

.btn-quiet {
	border-color: var(--line-light);
	color: var(--text-ink);
	background: #fff;
}

.btn-quiet:hover {
	border-color: var(--blue-700);
	color: var(--blue-700);
}

.btn-block {
	width: 100%;
}

.btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}

/* ------------------------------------------------------------------- chips */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2.2rem 0 0;
	padding: 0;
	list-style: none;
}

.chips li {
	padding: 0.34rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.02em;
	color: var(--text-dim);
}

/* ---------------------------------------------------------------- sections */

.section {
	padding: clamp(3rem, 6.5vw, 5rem) 0;
}

.section-dark {
	background: var(--ink-900);
	color: var(--text);
}

.section-ink {
	background: linear-gradient(180deg, var(--blue-900), var(--ink-900));
	color: var(--text);
}

.section-paper {
	background: var(--paper);
}

.section-dark h2,
.section-ink h2 {
	color: #fff;
}

/* Vale per i link di testo, non per i pulsanti: un selettore con discendente
   batte per specificita' il colore dichiarato in .btn-primary, e il rosso si
   ritroverebbe con la scritta azzurra invece che bianca. */
.section-dark a:not(.btn),
.section-ink a:not(.btn) {
	color: var(--blue-500);
}

.section-head {
	max-width: 68ch;
	margin-bottom: 2.4rem;
}

.section-head .kicker {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--blue-600);
}

.section-dark .section-head .kicker,
.section-ink .section-head .kicker {
	color: var(--blue-500);
}

.section-head p {
	margin-bottom: 0;
	color: var(--text-ink-dim);
	font-size: 1.03rem;
}

.section-dark .section-head p,
.section-ink .section-head p {
	color: var(--text-dim);
}

/* -------------------------------------------------------------------- grid */

.grid {
	display: grid;
	gap: 1.15rem;
}

.grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.grid-4 {
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

/* ------------------------------------------------------------------- cards */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--paper-2);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.card:hover {
	border-color: rgba(20, 86, 122, 0.42);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card-head {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

/* Il badge di stato vive nell'angolo della card, non in linea col titolo:
   evita che si accavallino quando il nome del prodotto va su due righe. */
.card > .card-head > .badge,
.card > .badge {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
}

.card:has(.badge) .card-head {
	padding-right: 6.5rem;
}

.card-head img {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	object-fit: contain;
}

.card h3 {
	margin: 0;
	font-size: 1.12rem;
}

.card .sub {
	margin: 0.15rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--text-ink-dim);
}

.card p {
	color: var(--text-ink-dim);
	font-size: 0.96rem;
}

.card-foot {
	margin-top: auto;
	padding-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.card-dark {
	background: var(--ink-800);
	border-color: var(--line-dark);
	color: var(--text);
}

.card-dark h3 {
	color: #fff;
}

.card-dark p,
.card-dark .sub {
	color: var(--text-dim);
}

.card-dark:hover {
	border-color: rgba(33, 137, 184, 0.5);
}

/* ------------------------------------------------------------------ badges */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge-live {
	background: rgba(53, 208, 127, 0.14);
	border-color: rgba(53, 208, 127, 0.42);
	color: #1d9c5d;
}

.section-dark .badge-live,
.section-ink .badge-live,
.card-dark .badge-live {
	color: #4ade9a;
}

.badge-live .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #35d07f;
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

.badge-preview {
	background: rgba(33, 137, 184, 0.14);
	border-color: rgba(33, 137, 184, 0.42);
	color: var(--blue-600);
}

.section-dark .badge-preview,
.card-dark .badge-preview {
	color: var(--blue-500);
}

/* L'ambra scura, non quella del bordo: sul proprio fondo chiaro il tono piu' vivo
   dava circa 3,3 di contrasto, sotto la soglia di 4,5. Nelle card scure c'e' la
   regola dedicata piu' sotto, che usa il tono vivo perche' li' il fondo e' nero. */
.badge-wip {
	background: rgba(227, 165, 6, 0.16);
	border-color: rgba(227, 165, 6, 0.45);
	color: #845e04;
}

.card-dark .badge-wip {
	color: #e3a506;
}

/* --------------------------------------------------------- W.I.P. markers */

/* Blocco visibile che segnala contenuto ancora da completare: preferiamo un
   segnaposto onesto a un testo inventato (direttiva 10/09/2026). */
.wip {
	position: relative;
	padding: 1.1rem 1.25rem;
	border: 1px dashed rgba(227, 165, 6, 0.55);
	border-radius: var(--radius);
	background: rgba(227, 165, 6, 0.07);
	color: var(--text-ink-dim);
	font-size: 0.95rem;
}

.wip strong {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Scurito: sul fondo del blocco W.I.P. il tono precedente dava 3,5. Ora 5,2. */
	color: #845e04;
}

.wip p:last-child {
	margin-bottom: 0;
}

.section-dark .wip,
.section-ink .wip {
	color: var(--text-dim);
}

.section-dark .wip strong,
.section-ink .wip strong {
	color: #e3a506;
}

/* ---------------------------------------------------------------- pipeline */

.pipeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.pipeline li {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.03);
}

.pipeline li::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--red-400);
}

.pipeline h3 {
	margin: 0 0 0.35rem;
	font-size: 1.02rem;
	color: #fff;
}

.pipeline p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--text-dim);
}

.pipeline .tag {
	display: inline-block;
	margin-top: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--blue-500);
}

/* ------------------------------------------------------------------- stats */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stats li {
	padding: 1.15rem 1.25rem;
	border-left: 3px solid var(--red-500);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.stats .n {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
}

.stats .t {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.88rem;
	color: var(--text-dim);
}

/* --------------------------------------------------------------- spec list */

.specs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-light);
}

.specs li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line-light);
	font-size: 0.95rem;
}

.specs .k {
	flex: 0 0 200px;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-ink-dim);
	padding-top: 0.1rem;
}

.specs .v {
	flex: 1 1 260px;
	color: var(--text-ink);
}

/* --------------------------------------------------------------- downloads */

.dl {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.dl li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.15rem;
	background: var(--paper-2);
	border: 1px solid var(--line-light);
	border-radius: var(--radius);
}

.dl .name {
	flex: 1 1 240px;
	font-weight: 600;
}

.dl .meta {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--text-ink-dim);
}

/* ------------------------------------------------------------------ figure */

.shot {
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink-800);
	box-shadow: var(--shadow-lg);
}

figure {
	margin: 0;
}

figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--text-ink-dim);
}

.section-dark figcaption,
.section-ink figcaption {
	color: var(--text-dim);
}

/* ------------------------------------------------------------------ footer */

.footer {
	padding: 3rem 0 2rem;
	background: var(--ink-900);
	border-top: 1px solid var(--line-dark);
	color: var(--text-dim);
	font-size: 0.92rem;
}

.footer h4 {
	margin: 0 0 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
}

.footer a {
	color: var(--text-dim);
}

.footer a:hover {
	color: #fff;
}

.footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer li {
	margin-bottom: 0.35rem;
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--line-dark);
}

.footer-legal {
	padding-top: 1.5rem;
	font-size: 0.85rem;
	/* Schiarito: il grigio precedente dava 4,22 sul fondo del piede, sotto la soglia
	   di 4,5. Ora 4,98, e resta piu' spento del testo normale del piede (7,29). */
	color: #7b848f;
}

.footer-legal .mono {
	color: var(--text-dim);
}

/* ------------------------------------------------------------------ motion */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.btn:hover,
	.card:hover {
		transform: none;
	}
}