/* Bitfix – miglioramenti grafici (prova sulla home, 13/11/2026). Palette invariata. */

/* ---------- 1. Tipografia: Inter variabile con pesi reali ---------- */
@font-face{font-family:Inter;src:url('assets/font/inter-var-latin.woff2') format('woff2');font-weight:400 800;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('assets/font/inter-var-frecce.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+2192,U+2197,U+21B6}
body{font-family:Inter,Arial,Helvetica,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.site-header .desktop-nav a,.site-header .header-contact,.site-header .mobile-menu nav>a{font-family:inherit;font-weight:500;letter-spacing:.07em;font-size:13px}
h1,h2{letter-spacing:-.035em}
h3{letter-spacing:-.02em}

/* ---------- 6. Header compatto e sempre visibile ---------- */
.concept-b header.site-header{position:sticky;top:0;z-index:50;transition:background-color .3s,box-shadow .3s}
.site-header .header-main{transition:min-height .3s cubic-bezier(.2,.7,.2,1)}
.site-header .brand-official img{transition:width .3s cubic-bezier(.2,.7,.2,1)}
.concept-b header.site-header.is-scrolled{background:rgba(27,33,30,.86);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(10,20,15,.18)}
.site-header.is-scrolled .header-main{min-height:70px}
.site-header.is-scrolled .brand-official img{width:140px}
@media(max-width:680px){.site-header.is-scrolled .header-main{min-height:64px}.site-header.is-scrolled .brand-official img{width:120px}}
html{scroll-padding-top:90px}

/* ---------- 3. Effetti al passaggio del mouse ---------- */
/* Menu: linea verde che si apre dal centro */
.site-header .desktop-nav a{position:relative;border-bottom:0!important}
.site-header .desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:#b2d18a;transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.site-header .desktop-nav a:hover::after,.site-header .desktop-nav a[aria-current=page]::after{transform:scaleX(1)}

/* Link testuali: la sottolineatura si disegna da sinistra */
.concept-b .textlink{border-bottom-color:transparent;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1),color .2s}
.concept-b .textlink:hover{text-decoration:none;animation:bf-underline .55s cubic-bezier(.2,.7,.2,1)}
@keyframes bf-underline{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}

/* Pulsanti e frecce */
.button span,.textlink span,.header-contact span,.service-number span,.partner-word span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.button:hover span,.header-contact:hover span{transform:translate(3px,-3px)}
.concept-b .button{transition:background .2s,color .2s,transform .2s}
.concept-b .button:active{transform:translateY(1px)}

/* Card servizi */
.concept-b .services article{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.concept-b .services article:hover{transform:translateY(-5px);border-color:#7f9f75;box-shadow:0 18px 40px rgba(24,44,24,.10)}
.services article:hover .service-number span{transform:translate(4px,-4px);color:#335b3e}

/* ---------- 5. Card partner con foto a tutto campo ---------- */
.partner-card{position:relative;overflow:hidden;isolation:isolate;justify-content:flex-end;min-height:780px}
.partner-card .partner-photo{position:absolute;inset:0;width:auto;height:auto;margin:0;aspect-ratio:auto;z-index:-2}
.partner-card .partner-photo img{transform:scale(1.02);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.partner-card:hover .partner-photo img{transform:scale(1.07)}
.partner-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.concept-b .nfon::before{background:linear-gradient(180deg,rgba(30,41,35,.05) 0%,rgba(30,41,35,.55) 28%,rgba(30,41,35,.94) 48%,#1e2923 60%)}
.concept-b .kross::before{background:linear-gradient(180deg,rgba(212,229,213,0) 0%,rgba(212,229,213,.6) 28%,rgba(208,226,210,.96) 48%,#cfe1d1 62%)}
.partner-card:hover .partner-word span{transform:translate(4px,-4px)}
.partner-word{margin-bottom:26px}
.partner-card .textlink{margin-top:26px}
@media(max-width:900px){.partner-card{min-height:640px}}

/* Striscia partner con loghi */
.identity-strip .partner-logo{display:inline-flex;align-items:center;gap:10px}
.identity-strip .partner-logo img{display:block;height:20px;width:auto;opacity:.95}
.identity-strip .partner-logo.kross-logo img{height:36px}
.identity-strip .partner-logo small{margin-left:0}

/* ---------- 2. Hero ---------- */
.hero h1 .line{display:block}
.hero h1 .cursor{display:inline-block;width:.42em;height:.085em;margin-left:.08em;background:currentColor;vertical-align:baseline;animation:bf-blink 1.1s steps(1) infinite}
@keyframes bf-blink{50%{opacity:0}}
.js .hero h1 .line,.js .hero .intro,.js .hero .actions,.js .hero .eyebrow{opacity:0;transform:translateY(.45em);animation:bf-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .eyebrow{animation-delay:.05s}
.js .hero h1 .line:nth-child(1){animation-delay:.12s}
.js .hero h1 .line:nth-child(2){animation-delay:.22s}
.js .hero h1 .line:nth-child(3){animation-delay:.32s}
.js .hero h1 .line:nth-child(4){animation-delay:.42s}
.js .hero .intro{transform:translateY(14px);animation-delay:.6s}
.js .hero .actions{transform:translateY(14px);animation-delay:.72s}
@keyframes bf-rise{to{opacity:1;transform:none}}
.js .hero-visual{clip-path:inset(0 0 100% 0);animation:bf-curtain 1.1s cubic-bezier(.7,0,.2,1) .25s forwards}
@keyframes bf-curtain{to{clip-path:inset(0 0 0 0)}}
.hero-visual>img{will-change:transform;transform:translate3d(0,var(--parallax,0px),0) scale(1.08)}

/* ---------- 4. Comparsa allo scorrimento ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .services article[data-reveal].is-in{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}

/* "Come lavoro": linee che si disegnano */
.js .method-steps li{border-top-color:transparent;position:relative}
.js .method-steps li::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:#b3b3b3;transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .method-number{position:relative;border-left-color:transparent!important}
.js .method-number::before{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:#7f9f75;transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .35s)}
.js .method-steps li.is-in::before{transform:scaleX(1)}
.js .method-steps li.is-in .method-number::before{transform:scaleY(1)}

/* ---------- 2b. Entrata delle intestazioni nelle pagine interne ---------- */
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) :is(.breadcrumbs,.phone-breadcrumbs,.eyebrow,h1,.it-lead,.lead,.phone-lead,.hotel-lead,.actions,.web-strip,.phone-partner){opacity:0;transform:translateY(16px);animation:bf-rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) :is(.breadcrumbs,.phone-breadcrumbs){animation-delay:.02s}
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) .eyebrow{animation-delay:.08s}
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) h1{transform:translateY(.35em);animation-delay:.16s}
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) :is(.it-lead,.lead,.phone-lead,.hotel-lead){animation-delay:.38s}
.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) :is(.actions,.web-strip,.phone-partner){animation-delay:.52s}
.js :is(.it-panorama-frame,.responsive-visual>img,.hotel-hero figure,.phone-intro figure){clip-path:inset(0 0 100% 0);animation:bf-curtain 1.1s cubic-bezier(.7,0,.2,1) .3s forwards}

/* Card delle pagine interne */
.concept-b :is(.it-extras article,.web-project){transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.concept-b :is(.it-extras article,.web-project):hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(24,44,24,.10)}

/* ---------- 7. Sfondi verdi in movimento (molto lenti, poco contrastati) ---------- */
.bg-host{position:relative;isolation:isolate;overflow:hidden}
.bg-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-glow i{position:absolute;border-radius:50%}
.bg-glow i:first-child{width:70vw;height:70vw;max-width:1000px;max-height:1000px;left:-12vw;top:-35vw;background:radial-gradient(closest-side,rgba(194,233,144,.11),rgba(194,233,144,.04) 55%,transparent);animation:bf-drift 26s ease-in-out infinite alternate}
.bg-glow i:last-child{width:55vw;height:55vw;max-width:800px;max-height:800px;right:-15vw;bottom:-30vw;background:radial-gradient(closest-side,rgba(60,140,100,.22),transparent);animation:bf-drift2 32s ease-in-out infinite alternate}
@keyframes bf-drift{to{transform:translate(38vw,22vw) scale(1.15)}}
@keyframes bf-drift2{to{transform:translate(-30vw,-12vw) scale(.9)}}
/* Codice che si scrive */
.bg-code{position:absolute;z-index:-1;right:4vw;bottom:34px;margin:0;font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c2e990;opacity:.17;white-space:pre;pointer-events:none;user-select:none}
.bg-code::after{content:'';display:inline-block;width:.6em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:currentColor;animation:bf-blink 1.1s steps(1) infinite}
@media(max-width:900px){.bg-code{right:auto;left:18px;bottom:18px;font-size:11px;opacity:.1}}
/* Onde */
.bg-waves{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:70%;pointer-events:none;opacity:.55}
.bg-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:bf-wave 38s linear infinite}
.bg-waves svg+svg{animation-duration:56s;animation-direction:reverse;opacity:.7}
@keyframes bf-wave{to{transform:translateX(-50%)}}
/* Fermi quando non sono sullo schermo */
.is-paused :is(.bg-glow i,.bg-waves svg),.is-paused .bg-code::after{animation-play-state:paused}

/* ---------- Chi preferisce meno movimento vede tutto fermo ---------- */
@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js .hero h1 .line,.js .hero .intro,.js .hero .actions,.js .hero .eyebrow,.js .hero-visual,.js :is(.it-intro,.web-hero,.phone-intro,.hotel-hero,.contact-intro) *,.js :is(.it-panorama-frame,.responsive-visual>img,.hotel-hero figure,.phone-intro figure){opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important;transition:none!important}
  .hero h1 .cursor,.bg-glow i,.bg-waves svg,.bg-code::after{animation:none}
  .hero-visual>img{transform:none!important}
  .js .method-steps li::before,.js .method-number::before{transform:none!important;transition:none!important}
  *,*::before,*::after{transition-duration:0s!important}
}

/* ---------- 8. Pagina Web: "Come lavoro" a linea del tempo + schede sito/social ---------- */
.web-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;position:relative;margin-top:55px;padding-top:0}
.web-steps::before,.web-steps::after{content:'';position:absolute;left:21px;right:0;top:21px;height:1px;background:#c9c4b5}
.web-steps::after{height:2px;top:20.5px;background:#7f9f75;transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .15s}
.web-steps:has(>article.is-in)::after,.web-steps.is-drawn::after{transform:scaleX(1)}
.web-steps>article{position:relative;border-top:0!important;padding:0 18px 22px 0!important;flex:none!important;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.web-steps .step-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:22px}
.web-steps .step-icon{position:relative;z-index:1;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#f4f1e9;border:1px solid #c9c4b5;color:#335b3e;transition:background .5s,border-color .5s,color .5s,transform .35s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0s) + .5s)}
.web-steps .step-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.web-steps>article.is-in .step-icon,.no-reveal .web-steps .step-icon{background:#233c30;border-color:#233c30;color:#c2e990}
.web-steps .step-num{display:flex;align-items:baseline;gap:10px;margin:0!important;font-size:11px;letter-spacing:.12em;font-weight:600;color:#5f6b60}
.web-steps .step-num b{font-size:46px;line-height:1;letter-spacing:-.05em;font-weight:300;color:#335b3e}
.web-steps h3{font-size:23px;margin-bottom:14px}
.web-steps>article:hover{transform:translateY(-4px)}
.web-steps>article:hover .step-icon{transform:scale(1.08);transition-delay:0s}
@media(max-width:900px){
  .web-steps{grid-template-columns:1fr;gap:34px;padding-left:0}
  .web-steps::before,.web-steps::after{left:21px;right:auto;top:21px;bottom:0;width:1px;height:auto}
  .web-steps::after{width:2px;left:20.5px;transform:scaleY(0);transform-origin:top}
  .web-steps:has(>article.is-in)::after,.web-steps.is-drawn::after{transform:scaleY(1)}
  .web-steps>article{padding:0 0 0 66px!important}
  .web-steps .step-head{flex-direction:row;align-items:center;gap:16px;margin-left:-66px;margin-bottom:14px}
  .web-steps .step-num b{font-size:34px}
}

.web-scope{margin-top:60px;padding-top:36px;border-top:1px solid #c9c9c9}
.web-scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.web-scope article{position:relative;padding:34px 34px 30px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.web-scope article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,44,24,.10)}
.web-scope .scope-yes{background:linear-gradient(145deg,#d4e5d5,#bdd5c5);color:#203e2e}
.web-scope .scope-no{background:linear-gradient(145deg,#ece7da,#e0dacb);color:#202923}
.web-scope h3{font-size:32px;letter-spacing:-.035em;margin:0 0 20px}
.web-scope ul{list-style:none;margin:0;padding:0}
.web-scope li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid rgba(32,62,46,.14);font-size:15px;line-height:1.5}
.web-scope li svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.web-scope .scope-yes li svg{color:#335b3e}
.web-scope .scope-no li{color:#4f5850}
.web-scope .scope-no li svg{color:#9a5b4a}
.web-scope .scope-no p{margin:18px 0 0;font-size:14px;color:#4f5850}
.scope-badge{position:absolute;right:-18px;top:-18px;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;opacity:.12}
.scope-badge svg{width:70px;height:70px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:translate(-8px,8px)}
.web-scope article:hover .scope-badge{opacity:.2;transition:opacity .35s}
@media(max-width:760px){.web-scope-grid{grid-template-columns:1fr}.web-scope article{padding:28px 24px}.web-scope h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.web-steps::after{transform:none!important;transition:none}.web-steps .step-icon{transition:none}}