/* ============================================================
   BigFive Landing — RESTYLE (foglio di stile comune ufficiale)
   Carica DOPO style.css. Le regole specifiche di pagina stanno
   in un <style> inline DOPO questo file.
   Sistema: Bricolage Grotesque (titoli) + Instrument Sans (corpo)
            + Instrument Serif (accenti) + shader grain-gradient.
   ============================================================ */

html,body{ overflow-x:clip }

/* ── Font di base ── */
*{ font-family:'Instrument Sans',system-ui,sans-serif !important }

/* Titoli ed etichette in Bricolage Grotesque
   (NB: .proc-title resta Instrument Sans — non incluso qui) */
h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
.stat-num,.number-val,.number-lbl,.stat-lbl,.cat-title,.comp-item-title,.comp-title,.pain-title,
.footer-col-title,.quote-text,.vs-circle,.perk-ttl,.service-card-badge,
.service-price,.service-price span,.service-price strong,
.clients-label,.awards-label,.hero-badge,.chip,.faq-q,
.btn-gold,.btn-outline-white,.btn-outline-purple,
.service-card-cta,.service-call,.form-submit,.svc-pill,.services-band-title,
.manifesto-eyebrow,.manifesto-small,.scroll-hint,.price-amount,.price-name,
.img-section-h,.fa-why-h3{
  font-family:'Bricolage Grotesque',sans-serif !important
}

/* ── Accenti dei titoli in Instrument Serif (corsivo) ── */
.ff-serif,.ff-serif *{ font-family:'Instrument Serif',Georgia,serif !important; font-style:italic; font-weight:400 }
.section-title .gld,.section-title .gld *,.section-title .hl,.section-title .hl *,
.manifesto-title .gld,.manifesto-title .gld *,.manifesto-title .hl,.manifesto-title .hl *{
  font-family:'Instrument Serif',Georgia,serif !important; font-style:italic; font-weight:400; letter-spacing:0
}
/* Instrument Serif è solo 400: simulo ~500 con un leggero stroke */
.ff-serif,.section-title .gld,.section-title .hl,.manifesto-title .gld,.manifesto-title .hl,.comp-caption-ai{
  -webkit-text-stroke:.4px currentColor; text-stroke:.4px currentColor
}
/* niente taglio degli ascender/baseline nei titoli split */
.section-title .split-word, .manifesto-title .split-word{ overflow:visible !important }

/* ── Dimensioni e peso titoli ── */
#heroHeadline .hero-line-inner{ font-size:clamp(28px,4.6vw,50px) !important }
.section-title{ font-size:clamp(28px,3.6vw,48px) !important }
.manifesto-title{ font-size:clamp(30px,4.4vw,52px) !important }
.hero-headline, #heroHeadline .hero-line-inner, .section-title, .manifesto-title{ font-weight:600 !important }

/* ── Interlinea testi sotto i titoli (più stretta) + wrap ── */
[style*="line-height:1.75"]{ line-height:1.55 !important }
.feat-desc,.cat-desc,.pain-desc,.comp-desc,.proc-desc,.service-desc,
.fa-deliv-d,.fa-where-use,.fa-pack-who{ line-height:1.5 !important }
h1,h2,h3,.hero-headline,.section-title,.manifesto-title,
.feat-title,.cat-title,.proc-title,.pain-title,.comp-item-title{ text-wrap:balance }
p,.feat-desc,.cat-desc,.pain-desc,.comp-desc,.manifesto-p,.fa-deliv-d,.fa-where-use{ text-wrap:pretty }

/* mobile: i paragrafi intro dei titoli (22px) scendono a 18px */
@media(max-width:767px){
  [style*="font-size:22px"], .cats-header p, .manifesto-p, .fa-why-lead{ font-size:18px !important }
}

/* ── Shader backgrounds (Paper grain-gradient) ── */
.has-shader-sec{ position:relative }
.has-shader-sec>.shbg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.has-shader-sec>.shbg canvas{ position:absolute!important; inset:0; width:100%!important; height:100%!important; display:block }
.has-shader-sec>:not(.shbg){ position:relative; z-index:1 }
#servizi .cats-noise,#servizi .cats-orbs{ display:none }

/* Hero: solo sfumatura shader (niente mesh/glow/particelle) */
#hero{ background:#240c2d !important }
#hero>.shbg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#240c2d }
#hero>.shbg canvas{ position:absolute!important; inset:0; width:100%!important; height:100%!important; display:block }
#hero>:not(.shbg):not(.scroll-hint){ position:relative; z-index:1 }
#hero #heroCanvas,#hero .hero-glow-1,#hero .hero-glow-2{ display:none!important }
#hero::before,#hero::after{ display:none!important }
@media(max-width:768px){ #hero{ min-height:100svh } }
/* accento serif dentro il gold-stroke dell'hero: oro pieno */
#hl2 .ff-serif{ color:var(--gold) !important; -webkit-text-fill-color:var(--gold) !important; -webkit-text-stroke:0 !important }

/* Manifesto: griglia animata lenta */
#manifesto .manifesto-grid-lines{ animation-duration:7s !important }

/* Processo "Come lavoriamo": gradiente + griglia + dot, titoli step in Instrument Sans */
#processo{ background:linear-gradient(160deg, rgb(26,10,46) 0%, rgb(99,63,152) 100%) !important }
#processo .proc-bg-lines{
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size:60px 60px !important; animation-duration:7s !important
}
#processo .proc-dots{
  background-image:radial-gradient(circle at 20% 50%, rgba(234,190,30,.06) 0, transparent 50%),
                   radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0, transparent 50%) !important;
  background-size:auto !important; animation:none !important
}