/* assets/marketing/pagine/soluzioni.css — stili della sola pagina soluzioni.html
   TF-SOLUZIONI-B-2026-11-02 — restyling leggero "B · Indice" (mockup approvato dal
   proprietario il 02/11/2026). Stesso template delle pagine del menu:
   - hero come /funzionalita e /come-funziona (sopratitolo ambra, parola .tf-grad,
     due CTA, tre garanzie) + indice dei 6 settori a pillole;
   - intestazioni di settore monocrome ("01 · Settore" + titolo + conteggio);
   - card hairline con icona tenue, freccia e etichetta della regola chiave.
   CSS scritto a mano: il Tailwind statico (main-*.css) non ha sm:/md:/lg: ne' JIT.
   Il sollevamento delle card sta SOLO dentro @media (hover: hover): su iPhone il
   primo tocco accende :hover (vedi tests/js/test_card_hover_solo_mouse.cjs, #1761). */

/* ---------- Hero ---------- */
.slz-hero { position: relative; overflow: hidden; }
.slz-hero::before {
content: "";
position: absolute;
inset: -120px 0 auto;
height: 520px;
pointer-events: none;
background: radial-gradient(50% 60% at 50% 0%, rgba(245,158,11,.10) 0%, rgba(245,158,11,0) 70%);
}
.slz-hero-in { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.slz-eyebrow {
margin: 0 0 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #d97706;
}
.slz-h1 {
margin: 0 auto 24px;
max-width: 21ch;
font-size: clamp(40px, 4.6vw, 54px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 700;
color: #0f172a;
}
/* Parola accento: ambra pieno se .tf-grad (tf-marketing.css) non arriva */
.slz-accent { color: #d97706; }
.slz-sub {
margin: 0 auto 34px;
max-width: 56ch;
font-size: 17.5px;
line-height: 1.6;
color: rgba(15,23,42,.62);
}

/* CTA: stesse misure di .fvB-cta-* / .kvC-cta-* */
.slz-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.slz-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background-color .15s ease, box-shadow .15s ease;
}
.slz-cta-primary { color: #fff; background-color: #f59e0b; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.slz-cta-primary:hover { background-color: #d97706; }
.slz-cta-ghost { color: #0f172a; border: 1px solid rgba(15,23,42,.16); background-color: transparent; }
.slz-cta-ghost:hover { background-color: rgba(15,23,42,.04); }
.slz-cta:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.slz-cta-bolt { flex: none; display: block; width: 15px; height: 15px; }

.slz-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
margin: 22px 0 0;
padding: 0;
list-style: none;
font-size: 13px;
color: rgba(15,23,42,.55);
}
.slz-trust li { display: inline-flex; align-items: center; gap: 6px; }
.slz-trust svg { flex: none; width: 14px; height: 14px; color: #d97706; }

/* ---------- Indice dei settori ---------- */
.slz-jump {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
max-width: 980px;
margin: 40px auto 0;
padding: 0;
list-style: none;
}
.slz-jump a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 14px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.10);
background: #fff;
font-size: 13.5px;
font-weight: 500;
color: #0f172a;
text-decoration: none;
white-space: nowrap;
transition: border-color .15s ease, box-shadow .15s ease;
}
.slz-jump a:hover { border-color: rgba(245,158,11,.5); box-shadow: 0 4px 14px -6px rgba(245,158,11,.35); }
.slz-jump a:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.slz-jump-n { font-size: 11px; font-weight: 600; color: #d97706; font-variant-numeric: tabular-nums; }
.slz-jump-c {
min-width: 22px;
padding: 1px 7px;
border-radius: 999px;
background: rgba(15,23,42,.05);
font-size: 11.5px;
font-weight: 600;
color: rgba(15,23,42,.6);
text-align: center;
}

/* ---------- Settori ---------- */
.slz-sez { scroll-margin-top: 120px; }
.slz-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
}
.slz-kicker {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #d97706;
}
.slz-h2 {
margin: 0 0 8px;
font-size: clamp(26px, 2.6vw, 32px);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 700;
color: #0f172a;
}
.slz-desc { margin: 0; max-width: 60ch; color: rgba(15,23,42,.6); }
.slz-desc a { color: #b45309; }
.slz-desc a:hover { text-decoration: underline; }
.slz-count { flex: none; font-size: 13px; font-weight: 500; color: rgba(15,23,42,.45); white-space: nowrap; }

.slz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ---------- Card ---------- */
.slz-card {
position: relative;
display: flex;
flex-direction: column;
padding: 24px;
border-radius: 16px;
border: 1px solid rgba(15,23,42,.08);
background: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.slz-card:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.slz-ic {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 18px;
border-radius: 12px;
background: linear-gradient(135deg, #fffbeb, #fef3c7);
box-shadow: inset 0 0 0 1px rgba(245,158,11,.22);
color: #d97706;
}
.slz-ic svg { width: 22px; height: 22px; }
.slz-arr {
position: absolute;
top: 22px;
right: 22px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.08);
color: rgba(15,23,42,.35);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.slz-arr svg { width: 15px; height: 15px; }
.slz-card-t { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; }
.slz-card-d { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgba(15,23,42,.6); }
.slz-tag {
align-self: flex-start;
margin-top: auto;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15,23,42,.04);
font-size: 12px;
font-weight: 600;
color: rgba(15,23,42,.65);
font-variant-numeric: tabular-nums;
transition: background-color .2s ease, color .2s ease;
}
/* Colore e ombra per tutti; il sollevamento solo con un hover vero */
.slz-card:hover { border-color: rgba(245,158,11,.40); box-shadow: 0 14px 36px -14px rgba(180,83,9,.28); }
.slz-card:hover .slz-arr { background-color: #f59e0b; border-color: #f59e0b; color: #fff; }
.slz-card:hover .slz-tag { background-color: #fffbeb; color: #b45309; }
@media (hover: hover) {
.slz-card:hover { transform: translateY(-2px); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
.slz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
.slz-hero-in { padding-top: 36px; }
.slz-h1 { font-size: clamp(34px, 9.4vw, 40px); }
.slz-sub { font-size: 16.5px; margin-bottom: 28px; }
.slz-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; margin: 0 auto; }
.slz-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.slz-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
/* l'indice scorre in orizzontale dentro la sua riga, la pagina no */
.slz-jump {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 32px -20px 0;
padding: 0 20px 4px;
}
.slz-jump::-webkit-scrollbar { display: none; }
.slz-jump li { flex: none; }
.slz-card { padding: 20px; }
}