/* ══════════════════════════════════════════════════════════════════════
   Helpo con lo stile di new.kreita.com e i colori di Helpo (5/11/2026).
   Si carica DOPO style.css e cambia solo l'aspetto: Space Grotesk per i
   titoli al posto di Spectral (il testo resta in Hanken Grotesk, lo stesso
   carattere di new.kreita.com), la testata che galleggia coi numeretti, le
   pastiglie maiuscole, il filo colorato nel piede.
   I colori restano quelli di Helpo (style.css): blu notte #003049, crema
   #fdf0d5, rosso mattone #c1121f, azzurro acciaio #669bbc.
   Testi, struttura, schermate e script restano quelli di prima: per tornare
   indietro basta togliere il <link> a questo file. Le landing pubblicitarie
   (landing-italia, landing-toscana) e l'app (/app/) non lo caricano.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); }

:root {
	--h-display: "Space Grotesk", system-ui, sans-serif;
	/* il filo dei colori di Helpo, a segmenti come quello di new.kreita.com */
	--h-filo: linear-gradient(90deg, var(--brick) 0 33.33%, var(--cream) 0 66.66%, var(--steel) 0);
}

/* i titoli col carattere del sito Kreita */
h1, h2, h3, .nav-logo-text, .nav-mobile a, .chat-header-name, .step-num, .tl-num, .dash-head-t,
.faq-item summary, .prose blockquote, .fs-text h2, .fs-text h3, .btn,
.plan-price, .keyfact-val, .quote-card, .mail-subj, .booker-nav-title, .booker-success h3 {
	font-family: var(--h-display);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.028em; }
.prose blockquote, .quote-card { font-style: normal; }
/* Space Grotesk è più largo di Spectral: il titolo grande un po' più piccolo, così non va su cinque righe */
.hero h1 { font-weight: 700; letter-spacing: -.035em; font-size: clamp(38px, 4.4vw, 60px); }

/* ── testata: la barra blu notte che galleggia ─────────────────────────── */
#navbar, #navbar.scrolled, body.hero-dark #navbar, body.hero-dark #navbar.scrolled {
	padding: 14px 0; background: transparent;
	backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
#navbar .nav-inner {
	position: relative;
	padding: 10px 10px 10px 22px; border-radius: 20px;
	background: rgba(0, 37, 58, .97);
	box-shadow: 0 18px 40px -20px rgba(0, 17, 28, .6);
}
#navbar.scrolled .nav-inner { box-shadow: 0 18px 40px -16px rgba(0, 17, 28, .7); }
#navbar .nav-inner::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px; background: var(--h-filo); opacity: .9; }
body.menu-aperto #navbar .nav-inner { box-shadow: none; }
body.menu-aperto #navbar .nav-inner::after { display: none; }
.nav-logo-text { letter-spacing: -.02em; }
.nav-logo-text small { font-family: var(--h-display); }
.nav-links { counter-reset: voce; }
.nav-links li { counter-increment: voce; }
.nav-links a { font-family: var(--h-display); font-weight: 500; }
.nav-links a::before {
	content: counter(voce, decimal-leading-zero);
	position: absolute; top: -10px; right: -10px;
	font: 700 9px/1 var(--h-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
	color: var(--n, var(--steel));
}
.nav-links li:nth-child(1) { --n: #ff6b78; }
.nav-links li:nth-child(2) { --n: var(--steel); }
.nav-links li:nth-child(3) { --n: var(--cream); }
.nav-links li:nth-child(4) { --n: #ff6b78; }
.nav-links li:nth-child(5) { --n: var(--steel); }

/* ── bottoni: il carattere del sito Kreita ─────────────────────────────── */
.btn { font-weight: 700; letter-spacing: -.005em; }

/* ── pastiglie: maiuscole, a tinta piena ─────────────────────────────── */
.eyebrow, .sec-cream .eyebrow {
	padding: 7px 13px 6px; border-radius: 999px;
	background: var(--brick);
	font: 700 12px/1 var(--h-display); letter-spacing: .1em; text-transform: uppercase;
}
/* il testo crema vince anche sugli stili scritti nelle pagine (gli articoli hanno style="color:var(--brick)") */
.eyebrow { color: var(--cream) !important; }
.eyebrow::before { display: none; }
.hero-badge {
	width: max-content; max-width: 100%;
	padding: 7px 13px 6px; border: 0; border-radius: 999px;
	background: var(--brick); color: var(--cream);
	font: 700 12px/1 var(--h-display); letter-spacing: .1em; text-transform: uppercase;
}
.hero-badge .dot { background: var(--cream); box-shadow: none; animation: none; }

/* la testata galleggia anche sulle pagine senza foto: la prima fascia ci passa sotto */
body:not(.hero-dark) { padding-top: 0; }

/* su telefono la colonna di testo accanto alle schermate allargava la pagina
   (c'era già prima: il bottone del menu finiva fuori dallo schermo) */
.feature-split .fs-text { min-width: 0; }
.fs-text .btn { white-space: normal; text-align: center; }

/* ── piede: il blu notte di Helpo, col filo dei suoi colori in cima ──── */
footer { position: relative; border-top: 0; }
footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--h-filo); }
.footer-col h4 { font-family: var(--h-display); }

@media (max-width: 900px) {
	#navbar, #navbar.scrolled, body.hero-dark #navbar, body.hero-dark #navbar.scrolled { padding: 10px 0; }
	#navbar .container.nav-inner { margin-inline: 10px; padding: 8px 10px 8px 16px; border-radius: 18px; }
	.nav-links a::before { display: none; }
}