/* Smart Finance su tolgdev.it: layout Bento (skill "Modern Finance Designer"). Generato insieme alle pagine. */
:root {
  --sfa-gold: #C4A478;
  --sfa-tan: #D2B48C;
  --sfa-bronze: #8B653B;
  --sfa-coral: #FF5A47;
  --sfa-text: #f3ece0;
  --sfa-muted: #bfb29b;
  --sfa-tile: rgb(36 33 28 / 0.55);
  --sfa-line: rgb(210 180 140 / 0.14);
  /* Molla: stiffness 300, damping 20, mass 0.8 */
  --spring: linear(0, 0.0242, 0.0873, 0.1761, 0.2801, 0.3904, 0.5004, 0.605, 0.7008, 0.7856, 0.8584, 0.919, 0.9676, 1.0052, 1.0328, 1.0517, 1.0634, 1.0691, 1.0702, 1.0677, 1.0628, 1.0562, 1.0487, 1.041, 1.0333, 1.0261, 1.0195, 1.0137, 1.0088, 1.0048, 1.0016, 0.9991, 0.9973, 0.9961, 0.9954, 0.9951, 0.9951, 0.9953, 0.9957, 0.9962, 0.9967, 0.9973, 0.9978, 0.9983, 0.9987, 0.9991, 0.9995, 0.9997, 1);
  --spring-duration: 574ms;
}
.sfa { color: var(--sfa-text); font-family: "Inter", system-ui, -apple-system, sans-serif; }
.sfa-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.sfa-wrap--narrow { max-width: 820px; }
@media (min-width: 640px) { .sfa-wrap { padding: 0 24px; } }
.sfa-section { padding: 64px 0; }
.sfa-section--alt { background: rgb(0 0 0 / 0.18); }
@media (min-width: 768px) { .sfa-section { padding: 88px 0; } }

.sfa-head { max-width: 760px; margin: 0 0 32px; }
.sfa-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sfa-tan); background: rgb(210 180 140 / 0.08); border: 1px solid rgb(210 180 140 / 0.2); }
.sfa-h1 { margin: 18px 0; font-family: "Playfair Display", "Cinzel", serif; font-style: italic; font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.1; color: #fff; }
.sfa-grad { background: linear-gradient(90deg, var(--sfa-tan), var(--sfa-gold) 55%, var(--sfa-bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sfa-h2 { margin: 14px 0 12px; font-family: "Playfair Display", "Cinzel", serif; font-style: italic; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.18; color: #fff; }
.sfa-h3 { margin: 14px 0 8px; font-family: "Space Grotesk", "Inter", sans-serif; font-style: normal; font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: #fff; }
.sfa-lead { margin: 0; color: var(--sfa-tan); font-size: 1.05rem; line-height: 1.7; }
.sfa p { line-height: 1.6; }

/* Tessere di vetro: angoli ampi, sfondo semitrasparente, bordo da 1px con un filo di luce */
.sfa-tile { position: relative; border-radius: 24px; padding: 24px; background: var(--sfa-tile); border: 1px solid var(--sfa-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 12px 32px rgb(0 0 0 / 0.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform var(--spring-duration) var(--spring), border-color 0.3s ease; }
.sfa-tile p { margin: 0; color: var(--sfa-muted); font-size: 0.95rem; }
article.sfa-tile:hover, .sfa-shot:hover { transform: translateY(-4px); border-color: rgb(210 180 140 / 0.3); }
.sfa-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px; color: var(--sfa-tan); background: rgb(210 180 140 / 0.08); border: 1px solid rgb(210 180 140 / 0.16); }

/* Griglia Bento asimmetrica */
.sfa-bento { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
  .sfa-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; grid-auto-flow: dense; }
  .sfa-span-2 { grid-column: span 2; }
  .sfa-span-3 { grid-column: span 3; }
  .sfa-row-2 { grid-row: span 2; }
}

/* Pulsanti con la stessa molla */
.sfa-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sfa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 16px; font-weight: 700; font-size: 0.95rem; text-decoration: none; color: #1a1814; background: linear-gradient(90deg, var(--sfa-tan), var(--sfa-gold)); box-shadow: 0 10px 24px rgb(196 164 120 / 0.2); transition: transform var(--spring-duration) var(--spring); }
.sfa-btn--ghost { color: var(--sfa-text); background: rgb(36 33 28 / 0.6); border: 1px solid rgb(210 180 140 / 0.25); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); }
.sfa-btn:hover { transform: scale(1.03); }
.sfa-btn:active { transform: scale(0.97); }
.sfa-textlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-weight: 700; font-size: 0.9rem; color: var(--sfa-gold); text-decoration: none; }
.sfa-textlink:hover { color: var(--sfa-tan); }

/* Hero con la scena 3D */
/* Su telefono il menu del sito va su due righe: piu' spazio sopra la hero */
.sfa-hero { padding: 156px 0 56px; }
@media (min-width: 768px) { .sfa-hero { padding: 128px 0 64px; } }
.sfa-hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .sfa-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.sfa-visual { height: 320px; padding: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgb(196 164 120 / 0.24), transparent 65%), var(--sfa-tile); }
@media (min-width: 640px) { .sfa-visual { height: 420px; } }
@media (min-width: 960px) { .sfa-visual { height: 480px; } }
/* La scena (piano chiaro, buste) compare in dissolvenza al primo fotogramma; senza WebGL resta il bagliore */
.sfa-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.sfa-canvas.is-ready { opacity: 1; }
/* Etichetta scura sopra la scena chiara, per restare leggibile */
.sfa-visual .sfa-visual__label { position: absolute; left: 20px; bottom: 20px; color: #f3ece0; background: rgb(26 24 20 / 0.62); border-color: rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 639px) { .sfa-visual .sfa-visual__label { left: 12px; bottom: 12px; padding: 4px 9px; font-size: 0.62rem; } }
.sfa-qr { display: none; align-items: center; gap: 16px; margin-top: 28px; max-width: 440px; padding: 16px 20px; }
@media (min-width: 768px) { .sfa-qr { display: flex; } }
.sfa-qr img { background: #fff; border-radius: 10px; padding: 6px; flex-shrink: 0; }
.sfa-qr strong { display: block; margin: 6px 0 2px; color: #fff; font-size: 0.95rem; }
.sfa-qr p { font-size: 0.85rem; }

/* Esempio vocale */
.sfa-example { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sfa-bubble { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-radius: 20px 20px 20px 6px; color: #fff !important; font-weight: 600; font-size: 1rem !important; background: rgb(196 164 120 / 0.14); border: 1px solid rgb(196 164 120 / 0.32); }
.sfa-result { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding: 14px 18px; border-radius: 16px; background: rgb(0 0 0 / 0.25); border: 1px solid var(--sfa-line); }
.sfa-result dt { color: var(--sfa-muted); font-size: 0.85rem; }
.sfa-result dd { margin: 0; color: #fff; font-weight: 700; font-size: 0.92rem; }
.sfa-note { margin: 24px 0 0; color: var(--sfa-muted); font-size: 0.9rem; text-align: center; }

/* Busta dimostrativa: oltre il budget la barra rimbalza e vira al rosso corallo */
.sfa-demo { display: flex; flex-direction: column; justify-content: center; }
.sfa-demo .sfa-icon { align-self: flex-start; }
.sfa-demo__budget { margin-top: 4px !important; font-size: 0.9rem; }
.sfa-demo__budget span { font-family: "JetBrains Mono", monospace; color: var(--sfa-text); }
.sfa-bar { height: 12px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / 0.08); }
.sfa-bar__fill { height: 100%; width: 100%; transform-origin: left center; background: var(--sfa-gold); will-change: transform; transition: transform var(--spring-duration) var(--spring), background-color 0.45s ease; }
.sfa-demo.is-over .sfa-bar__fill { background: var(--sfa-coral); }
.sfa-demo__left { margin-top: 12px !important; font-weight: 700; font-size: 1.05rem; color: var(--sfa-text) !important; transition: color 0.45s ease; }
.sfa-demo.is-over .sfa-demo__left { color: var(--sfa-coral) !important; }
.sfa-demo__label { display: flex; justify-content: space-between; margin-top: 20px; color: var(--sfa-muted); font-size: 0.85rem; }
.sfa-demo__label span:last-child { font-family: "JetBrains Mono", monospace; color: var(--sfa-text); }
.sfa-demo input[type="range"] { width: 100%; margin-top: 6px; accent-color: var(--sfa-gold); cursor: pointer; }
.sfa-demo__hint { margin-top: 6px !important; font-size: 0.8rem !important; }
.sfa-bounce { animation: sfa-bounce var(--spring-duration) var(--spring); }
@keyframes sfa-bounce { from { transform: translateY(-7px); } to { transform: translateY(0); } }
.sfa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Sezioni extra in fila */
@media (min-width: 768px) { .sfa-bento--extras { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.sfa-bento--extras .sfa-h3 { margin-top: 0; }
.sfa-bento--extras p + p { margin-top: 10px; }

/* Screenshot in fila scorrevole */
.sfa-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 20px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; }
.sfa-shot { margin: 0; scroll-snap-align: start; padding: 10px; border-radius: 22px; background: var(--sfa-tile); border: 1px solid var(--sfa-line); transition: transform var(--spring-duration) var(--spring), border-color 0.3s ease; }
.sfa-shot img { width: 100%; height: auto; border-radius: 14px; display: block; }
.sfa-shot figcaption { margin-top: 10px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--sfa-gold); }

/* FAQ */
.sfa-faq { display: flex; flex-direction: column; gap: 14px; }
.sfa-faq details { padding: 20px 22px; }
.sfa-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-weight: 700; color: #fff; font-size: 1.02rem; }
.sfa-faq summary::-webkit-details-marker { display: none; }
.sfa-faq summary svg { flex-shrink: 0; color: var(--sfa-gold); transition: transform var(--spring-duration) var(--spring); }
.sfa-faq details[open] summary svg { transform: rotate(180deg); }
.sfa-faq details p { margin-top: 12px; }
.sfa-faq details strong { color: var(--sfa-text); }

.sfa-cta { text-align: center; padding: 40px 24px; }
.sfa-cta .sfa-ctas { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .sfa-tile, .sfa-shot, .sfa-btn, .sfa-bar__fill, .sfa-faq summary svg { transition: none; }
  article.sfa-tile:hover, .sfa-shot:hover, .sfa-btn:hover, .sfa-btn:active { transform: none; }
  .sfa-bounce { animation: none; }
}

/* Giorno: data-daypart="day" lo mette /js/daypart.js dall'ora del dispositivo. Pergamena e inchiostro. */
html[data-daypart="day"] {
  --sfa-gold: #A8875D;
  --sfa-tan: #8B653B;
  --sfa-bronze: #6e5136;
  --sfa-text: #2a1f16;
  --sfa-muted: #5f4e3b;
  --sfa-tile: rgb(255 252 245 / 0.78);
  --sfa-line: rgb(139 101 59 / 0.18);
}
html[data-daypart="day"] .sfa-section--alt { background: rgb(139 101 59 / 0.06); }
html[data-daypart="day"] .sfa-h1,
html[data-daypart="day"] .sfa-h2,
html[data-daypart="day"] .sfa-h3,
html[data-daypart="day"] .sfa-qr strong,
html[data-daypart="day"] .sfa-result dd,
html[data-daypart="day"] .sfa-faq summary { color: #2a1f16; }
html[data-daypart="day"] .sfa-tile { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 12px 32px rgb(42 31 22 / 0.1); }
html[data-daypart="day"] .sfa-btn { color: #fffaf1; }
html[data-daypart="day"] .sfa-btn--ghost { color: var(--sfa-text); background: rgb(255 252 245 / 0.8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); }
html[data-daypart="day"] .sfa-result { background: rgb(139 101 59 / 0.06); }
html[data-daypart="day"] .sfa-bar { background: rgb(139 101 59 / 0.12); }
html[data-daypart="day"] .sfa-bubble { color: #2a1f16 !important; }