/* =====================================================================
   INFINITHINK-SITO, tema-ponte.css v1.1 (19/10/2026)

   Ponte tra il CSS compilato del tema Marketing Bot (landing-page-*.css,
   caricato prima) e le nostre pagine. Ordine nel layout: tema, sito.css,
   consent.css, QUESTO FILE, motion.css. Contiene solo ciò che il CSS del
   tema non ha e che header, footer, CTA, FAQ e card a markup del tema
   richiedono (DESIGN-MARKETING-BOT.md punti 3.3, 14, 15.2, 16, 17):
     1. token del tema rimessi in :root (vince anche su un sito.css v1 che
        li ridefiniva in blu) + token ift-* della 15.2, rosso del gradiente
        sostituito (rosso del tema -> #FF7A3D, stesso valore scelto per la home);
     2. base pagina (fondo #FAFAFA, overflow-x clip, selezione, focus);
     3. header: fisso (= pin ScrollTrigger del tema), contrasto voci e
        Sign in al 70%, hover senza scale (±1 px), pannello mobile non
        focalizzabile da chiuso, tendina lingua da tastiera;
     4. footer; 7. FAQ details/summary (5, 6 e 8 tolte il 19/10: stilavano
        solo i parziali *-tema, cancellati, le pagine usano i blocchi ift-*);
     9. outline glow fermo (gira solo al passaggio, 6 s), reduced-motion
        con stato finale esplicito.
   Nessun rosso. Contrasti (WCAG 2.2, compositi calcolati su #FAFAFA, bande
   #090508/#080407): testo #2B2B2B 13,57; rgb(0 0 0/.7) = #4B4B4B 8,67;
   #545454 7,26; #696969 5,26; white/.7 su #090508 11,1; white/.6 su
   #1C1C1C 6,84; testo su bottone #2B2B2B/#FAFAFA 13,57.
   ===================================================================== */

/* ---------- 1. Token ---------- */
:root {
  color-scheme: light;
  /* variabili del tema (landing-page.scss di marketing-bot), con il rosso tolto */
  --background: 0 0% 98%;
  --foreground: 0 0% 17%;
  --heading-foreground: 0 0% 17%;
  --primary: 0 0% 0%;
  --primary-foreground: 0 0% 100%;
  --font-body: "Inter", "Inter Fallback";
  --font-heading: "Spline Sans", "Inter";
  --gradient-1: #5AAAF6;
  --gradient-2: #D52FCA;
  --gradient-3: #FF7A3D;
  --gradient-4: #FFB33B;
  --gradient-5: #43CC3E;
  --gradient-stops: var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4), var(--gradient-5);

  /* token nostri (15.2), per sito.css v2 e per questo file */
  --ift-bg: #FAFAFA;
  --ift-bg-alt: #FFFFFF;
  --ift-dark: #090508;
  --ift-dark-2: #070508;
  --ift-dark-3: #080407;
  --ift-dark-card: #1C1C1C;
  --ift-text: #2B2B2B;
  --ift-text-2: #545454;
  --ift-text-3: #696969;
  --ift-text-on-dark: #E6E6E6;
  --ift-text-on-dark-2: rgb(255 255 255 / .7);
  --ift-border: rgb(0 0 0 / .05);
  --ift-border-on-dark: rgb(255 255 255 / .10);
  --ift-border-control: #8A8A8A;
  --ift-g1: #5AAAF6; --ift-g2: #D52FCA; --ift-g3: #FF7A3D; --ift-g4: #FFB33B; --ift-g5: #43CC3E;
  --ift-gradient: linear-gradient(90deg, var(--ift-g1) 21.72%, var(--ift-g2) 36.08%, var(--ift-g3) 52.07%, var(--ift-g4) 66.16%, var(--ift-g5) 78.08%);
  --ift-gradient-btn: linear-gradient(to right, var(--ift-g1), var(--ift-g2), var(--ift-g3), var(--ift-g4), var(--ift-g5));
  --ift-alert: #EA580C;
  --ift-alert-text: #C2410C;
  --ift-success: #15803D;
  --ift-warning-text: #92400E;
  --ift-focus: #2B2B2B;
  --ift-font: "Inter", "Inter Fallback", system-ui, sans-serif;
  --ift-font-heading: "Spline Sans", "Inter", system-ui, sans-serif;
  --ift-container: 1170px;
  --ift-radius-btn: 12px; --ift-radius-card: 24px; --ift-radius-card-lg: 36px; --ift-radius-box: 34px; --ift-radius-faq: 8px;
  --ift-shadow-xs: 0 1px 11px rgb(0 0 0 / 6%);
  --ift-shadow-lg: 0 15px 33px rgb(0 0 0 / 5%);
  --ift-shadow-xl: 0 20px 50px rgb(0 0 0 / 20%);
  --ift-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Inter self-hosted (stessi URL del preload, senza versione) */
@font-face { font-family: "Inter"; src: url("/sito/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/sito/fonts/inter-latinext-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }

/* ---------- 2. Base pagina ---------- */
html.ift-html { overflow-x: clip; background: #FAFAFA; }          /* mai overflow-x su body: rompe sticky (trappola Kit Motion) */
body.ift-body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
.ift-body ::selection { background: rgb(90 170 246 / .3); color: inherit; }
.ift-body :focus-visible { outline: 2px solid var(--ift-focus); outline-offset: 3px; }
.ift-body [data-color-scheme="dark"].ift-band :focus-visible,
.ift-body .site-header.is-dark :focus-visible { outline-color: #FFFFFF; }
.ift-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ift-skip { position: absolute; top: 8px; left: 8px; z-index: 9100; padding: 10px 16px; border-radius: 12px; background: #2B2B2B; color: #FAFAFA;
  font: 600 .875rem/1 var(--ift-font); text-decoration: none; transform: translateY(-200%); transition: transform .2s var(--ift-ease); }
.ift-skip:focus-visible { transform: none; outline: 2px solid #2B2B2B; outline-offset: 2px; }

/* Utility di visibilità del tema su svg e img: sito.css ha `.ift-body svg, .ift-body img { display:block }`
   (0,1,1) che batte .hidden, md:block e max-md:hidden del tema (0,1,0). Qui si rimettono. */
.ift-body svg.hidden, .ift-body img.hidden { display: none; }
@media (min-width: 768px) { .ift-body svg.md\:block, .ift-body img.md\:block { display: block; } }
@media (max-width: 767.98px) { .ift-body svg.max-md\:hidden, .ift-body img.max-md\:hidden, .ift-body div.max-md\:hidden { display: none; } }
.ift-body .site-header svg, .ift-body .site-footer svg { display: inline-block; }

/* ---------- 3. Header del tema sulle nostre pagine ---------- */
/* Il tema lo tiene in cima con ScrollTrigger pin (start top top, pinSpacing false): qui fisso, stesso risultato */
.ift-body .site-header { position: fixed; }
.ift-body .ift-hdr-pill { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .2s; }
.ift-body .ift-hdr-pill:hover,
.ift-body .ift-hdr-lang__btn:hover { transform: translateY(-1px); }

/* Sotto 576 px logo (160 px) + "Inizia gratis" + hamburger non stanno nei 311 px utili della barra:
   il logo può stringersi (proporzioni intatte), il resto resta del tema. Serve anche in home ora che
   il pill dice "Start free"/"Inizia gratis" invece di "Join" (stessa regola in additional_custom_css). */
@media (max-width: 575.98px) {
  .site-header .site-logo { flex-shrink: 1; min-width: 0; }
  .site-header .site-logo img { max-width: 100%; height: auto; }
}

/* Contrasto: voci al 40% (2,83:1) e Sign in al 40% (2,31:1) non passano, al 70% sì (8,67:1 / 11,1:1) */
.ift-body .site-header .ift-hdr-link:not(:hover):not(.active),
.ift-body .site-header .ift-hdr-signin:not(:hover) { color: rgb(0 0 0 / .7); }
.ift-body .site-header.is-dark .ift-hdr-link:not(:hover):not(.active),
.ift-body .site-header.is-dark .ift-hdr-signin:not(:hover) { color: rgb(255 255 255 / .7); }
.ift-body .site-header .ift-hdr-lang__btn { color: rgb(0 0 0 / .7); }
.ift-body .site-header.is-dark .ift-hdr-lang__btn { color: rgb(255 255 255 / .7); }
.ift-body .site-header .ift-hdr-lang__btn:hover { color: hsl(var(--foreground)); }

/* Pannello mobile del tema (max-h-0 -> .lqd-is-active): da chiuso non deve prendere il focus */
@media (max-width: 991.98px) {
  .ift-body .site-header .ift-hdr-panel { visibility: hidden; transition: max-height .3s var(--ift-ease), visibility 0s linear .3s; }
  .ift-body .site-header .ift-hdr-panel.lqd-is-active { visibility: visible; transition-delay: 0s; }
}
/* Fondo leggibile del pannello aperto: il bianco al 5% del tema sopra testo di pagina non basta */
@media (max-width: 991.98px) {
  .ift-body .site-header .ift-hdr-panel.lqd-is-active { background: rgb(255 255 255 / .92); box-shadow: var(--ift-shadow-lg); }
  .ift-body .site-header.is-dark .ift-hdr-panel.lqd-is-active { background: rgb(9 5 8 / .92); }
}
/* Senza JavaScript (no-JS = stato finale): il bottone hamburger non farebbe nulla e il pannello
   resterebbe chiuso, quindi le voci si mostrano in colonna sotto la barra e l'hamburger sparisce.
   La classe .js su <html> la mette motion/motion-boot.js (o js/js-flag.js a motion spenta) nel <head>. */
@media (max-width: 991.98px) {
  html:not(.js) .ift-body .site-header .ift-hdr-panel { visibility: visible; max-height: none; position: static; background: rgb(255 255 255 / .92); }
  html:not(.js) .ift-body .site-header .mobile-nav-trigger { display: none; }
}

/* Tendine lingua (header e footer): aperte anche a tastiera e da js/header.js, oltre al group-hover del tema */
/* Con JS: si apre col bottone (.is-open) o quando il focus entra fra le voci (Tab). Senza JS: al focus del gruppo. */
html:not(.ift-js) .ift-hdr-lang:focus-within .ift-hdr-lang__menu,
.ift-hdr-lang .ift-hdr-lang__menu:focus-within,
.ift-hdr-lang.is-open .ift-hdr-lang__menu { pointer-events: auto; opacity: 1; transform: translateY(0); }
.ift-hdr-lang__menu--up { transform: translate(-50%, .5rem); }
.ift-hdr-lang:hover .ift-hdr-lang__menu--up,
html:not(.ift-js) .ift-hdr-lang:focus-within .ift-hdr-lang__menu--up,
.ift-hdr-lang .ift-hdr-lang__menu--up:focus-within,
.ift-hdr-lang.is-open .ift-hdr-lang__menu--up { transform: translate(-50%, 0); }
.ift-hdr-lang__menu a[aria-current="true"] { font-weight: 600; }
.ift-hdr-lang__menu { z-index: 60; text-align: start; }

/* ---------- 4. Footer ---------- */
.ift-ftr__tagline { max-width: 260px; }
.ift-ftr a:hover, .ift-ftr button:hover { text-decoration-thickness: 2px; }
.ift-ftr a[aria-current="page"] { font-weight: 600; }
.ift-ftr button[data-ift-consent-open] { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }

/* ---------- 7. FAQ (details/summary con la pelle del tema) ---------- */
.ift-faq__item > summary { list-style: none; }
.ift-faq__item > summary::-webkit-details-marker { display: none; }
.ift-faq__item .ift-faq__minus { display: none; }
.ift-faq__item[open] .ift-faq__minus { display: block; }
.ift-faq__item[open] .ift-faq__plus { display: none; }
.ift-faq__a > p + p { margin-top: 1rem; }
.ift-faq__a a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ift-faq__q:focus-visible { outline-offset: -3px; border-radius: 8px; }
@supports (interpolate-size: allow-keywords) {
  .ift-faq__item { interpolate-size: allow-keywords; }
  .ift-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ift-ease), content-visibility .3s allow-discrete; }
  .ift-faq__item[open]::details-content { block-size: auto; }
}

/* ---------- 9. Outline glow e movimento ridotto ---------- */
/* Sulle nostre pagine il glow è fermo e gira solo al passaggio, lento (6 s). In home resta quello del tema. */
.ift-body .lqd-outline-glow { --outline-glow-duration: 6s; }
.ift-body .lqd-outline-glow-inner { animation-play-state: paused; }
.ift-body .group:hover > .lqd-outline-glow .lqd-outline-glow-inner { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .ift-body .lqd-outline-glow-inner,
  .ift-body .lqd-text-rotator-item,
  .ift-body [class*="motion-preset-"] { animation: none !important; }
  .ift-body .site-header *,
  .ift-body .ift-hdr-pill { transition: none !important; }
  .ift-body .ift-hdr-pill:hover,
  .ift-body .ift-hdr-lang__btn:hover { transform: none; }
  .ift-faq__item::details-content { transition: none; }
}

/* Stampa: niente header fisso, niente decorazioni */
@media print {
  .ift-body .site-header { position: static; }
  .ift-body .lqd-outline-glow, .ift-body .lqd-progressive-blur-container { display: none; }
}

/* Collaudo corsia 6 (23/10/2026), home: il carosello "templates" ha 40-160 puntini in riga, che allargavano la
   pagina a 768 e 1024 px (scroll orizzontale fino a 1314 px) e spingevano fuori schermo le frecce Prev/Next.
   Restano solo le due frecce, centrate. */
#templates .flickity-page-dots { flex-wrap: nowrap; justify-content: center; gap: 12px; max-width: 100%; }
#templates .flickity-page-dots .dot { display: none; }

/* Collaudo corsia 6 (23/10/2026), contrasti della home misurati: "Explore the tools" (#2B2B2B al 50% su #FAFAFA, 3,2:1)
   e le etichette 12 px al 50% della sezione funzionalita su fondo scuro sotto 4,5:1. Portate al 75%, hover invariato. */
.site-section a[href="#features"][class~="opacity-50"]:not(:hover) { opacity: .75; }
/* schede non attive: testo gia al 60% di bianco, la riga piccola sotto resta leggibile (circa 5:1) */
.site-section [class~="text-[12px]"][class~="opacity-50"] { opacity: .9; }

/* ---------- 10. Mega menu Funzionalità (28/10/2026, ift::partials.megamenu) ----------
   Da 992 px pannello a 4 colonne sotto l'header, si apre al passaggio, al focus (tastiera) e col bottone,
   Esc chiude (.ift-mega-off finché il puntatore o il focus non escono). Sotto 992 px fisarmonica nel
   pannello mobile, solo col bottone. Movimento minimo (opacità e 4 px), fermo con reduced-motion. */
.ift-mega__toggle { display: inline-grid; place-content: center; width: 28px; height: 28px; margin-inline-start: -4px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgba(15, 15, 45, .6); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.ift-mega__toggle:hover { color: #0F0F2D; background: rgba(15, 15, 45, .05); }
.is-dark .ift-mega__toggle { color: rgba(255, 255, 255, .75); }
.is-dark .ift-mega__toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ift-mega__toggle:focus-visible, .ift-mega__link:focus-visible, .ift-mega__all:focus-visible { outline: 2px solid #5147EB; outline-offset: 2px; }
.ift-mega__toggle svg { transition: transform .2s ease; }
.ift-has-mega.is-open > .ift-mega__toggle svg { transform: rotate(180deg); }
.ift-mega { white-space: normal; text-align: start; }
.ift-mega__inner { background: #fff; color: #0F0F2D; border: 1px solid rgba(15, 15, 45, .06); border-radius: 16px; }
.ift-mega__grid { display: grid; gap: 12px 20px; }
.ift-mega__title { margin: 0 0 6px; padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: rgba(15, 15, 45, .62); }
.ift-mega__list { margin: 0; padding: 0; list-style: none; }
.ift-mega__link { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 10px; color: #0F0F2D; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.ift-mega__link:hover { background: rgba(81, 71, 235, .06); transform: translateY(-1px); }
.ift-mega__icon { flex: none; width: 32px; height: 32px; }
.ift-mega__text { display: block; min-width: 0; }
.ift-mega__label { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ift-mega__desc { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: rgba(15, 15, 45, .7); }
.ift-mega__all { display: inline-flex; gap: 6px; margin-top: 10px; padding: 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4338CA; text-decoration: none; }
.ift-mega__all:hover { background: rgba(81, 71, 235, .06); }

@media (min-width: 992px) {
  .site-header .ift-has-mega { position: static; }
  .ift-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 40; margin-top: -18px; padding-top: 26px; visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .ift-has-mega:hover > .ift-mega, .ift-has-mega:focus-within > .ift-mega, .ift-has-mega.is-open > .ift-mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .ift-has-mega.ift-mega-off > .ift-mega, .ift-has-mega.ift-mega-off:hover > .ift-mega, .ift-has-mega.ift-mega-off:focus-within > .ift-mega { visibility: hidden; opacity: 0; transform: translateY(4px); }
  .ift-has-mega:hover > .ift-mega__toggle svg, .ift-has-mega:focus-within > .ift-mega__toggle svg { transform: rotate(180deg); }
  .ift-has-mega.ift-mega-off > .ift-mega__toggle svg { transform: none; }
  .ift-mega__inner { max-width: 1040px; margin: 0 auto; padding: 22px 20px 16px; box-shadow: 0 24px 48px rgba(15, 15, 45, .12); }
  .ift-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .ift-mega__toggle { width: 40px; height: 40px; margin-inline-start: 0; }
  .ift-mega { display: none; flex-basis: 100%; width: 100%; padding-top: 8px; }
  .ift-has-mega.is-open > .ift-mega { display: block; }
  .ift-mega__inner { padding: 12px 8px; }
  .ift-mega__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ift-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ift-mega, .ift-mega__link, .ift-mega__toggle, .ift-mega__toggle svg { transition: none !important; }
  .ift-mega__link:hover { transform: none; }
  .ift-mega { transform: none !important; }
}

/* ---------- 11. Pannello di navigazione mobile aperto (28/10/2026 v2, home del tema e nostre pagine) ----------
   Opaco (bianco pieno, nero del tema sulle bande scure), alto fino in fondo allo schermo con scorrimento interno
   (--ift-nav-top lo calcola lo script del mega menu), pagina dietro bloccata. La fisarmonica resta dentro. */
@media (max-width: 991.98px) {
  .site-header .site-nav-container.lqd-is-active {
    background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    max-height: none !important; height: calc(100dvh - var(--ift-nav-top, 140px) - 12px);
    box-shadow: 0 24px 48px rgba(15, 15, 45, .16); border: 1px solid rgba(15, 15, 45, .06);
  }
  .site-header.is-dark .site-nav-container.lqd-is-active { background: rgb(9 5 8) !important; border-color: rgba(255, 255, 255, .08); }
  .site-header .site-nav-container.lqd-is-active > div { height: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html:has(.site-header .site-nav-container.lqd-is-active), html.ift-nav-open { overflow: hidden; }
  html:has(.site-header .site-nav-container.lqd-is-active) body, html.ift-nav-open body { overflow: hidden; touch-action: none; }
  .site-header .site-nav-container.lqd-is-active > div { touch-action: pan-y; }
  .ift-mega__inner { box-shadow: none; }
}
/* v2: con il pannello aperto anche la barra è piena e il chatbot del sito (bolla, suggerimenti, pulsante) si nasconde */
@media (max-width: 991.98px) {
  .site-header:has(.site-nav-container.lqd-is-active) #frontend-local-navbar .container > div { background: #fff !important; }
  .site-header.is-dark:has(.site-nav-container.lqd-is-active) #frontend-local-navbar .container > div { background: rgb(9 5 8) !important; }
  html:has(.site-header .site-nav-container.lqd-is-active) #lqd-ext-chatbot-wrap,
  html.ift-nav-open #lqd-ext-chatbot-wrap { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
}