/* OKEANA · sito vetrina */
:root{--navy:#061422;--az:#4C8CD1;--az2:#8fc1ff;--chiaro:#f4f5f7;--testo:#0b1220;--grigio:#5b6575;--linea:#e3e6ec;--h:76px;--corallo:#ff6b4a}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--testo);background:#fff;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.salta{position:absolute;left:-999px}.salta:focus{left:16px;top:12px;z-index:200;background:#fff;padding:10px 14px;border-radius:10px}
:focus-visible{outline:3px solid var(--az);outline-offset:3px}
.largo{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px)}
.stretto{max-width:860px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px)}
h1,h2,h3{letter-spacing:-.04em;line-height:1.02;font-weight:800;text-wrap:balance}
h1{font-size:clamp(3rem,8vw,7.4rem)}
h2{font-size:clamp(2.2rem,5.2vw,4.4rem)}
h3{font-size:1.4rem;letter-spacing:-.025em;line-height:1.15}
h1 span,h2 span{color:var(--az)}
.occhiello{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--az);margin-bottom:20px}
/* tasti */
.tasto{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 28px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;font-size:.98rem;transition:transform .25s,background .25s;text-align:center}
.tasto:hover{transform:translateY(-2px);background:#0f2b4a}
.tasto-piccolo{min-height:42px;padding:10px 18px;font-size:.86rem}
.tasto-chiaro{background:#fff;color:var(--navy)}.tasto-chiaro:hover{background:#e9f1fc}
.tasto-vuoto{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}.tasto-vuoto:hover{background:rgba(255,255,255,.1)}
.tasto-vuoto-scuro{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--linea)}.tasto-vuoto-scuro:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--az)}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.freccia{display:inline-flex;align-items:center;gap:10px;font-weight:700;margin-top:auto;padding-top:22px}
.freccia::after{content:"→";transition:transform .25s}.freccia:hover::after{transform:translateX(5px)}
/* testata */
.testata{position:fixed;inset:0 0 auto;z-index:100;height:var(--h);transition:background .35s,box-shadow .35s}
.testata-in{max-width:1320px;margin:0 auto;height:100%;padding:0 clamp(20px,4.5vw,64px);display:flex;align-items:center;gap:32px}
.marchio svg{height:22px;width:auto;display:block}
.logo-b{display:none!important}
.testata-scura .testata:not(.scorsa) .logo-n{display:none!important}.testata-scura .testata:not(.scorsa) .logo-b{display:block!important}
.menu{display:flex;gap:30px;margin-left:auto;font-size:.92rem;font-weight:500}
.menu a{opacity:.85}.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a[aria-current]{box-shadow:inset 0 -2px 0 currentColor}
.testata-scura .testata:not(.scorsa){color:#fff}
.testata-scura .testata:not(.scorsa) .menu-cta{background:#fff;color:var(--navy)}
.testata.scorsa,body:not(.testata-scura) .testata{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--linea)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;color:inherit}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
.burger span:first-child{top:17px}.burger span:last-child{top:26px}
.menu-aperto .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}.menu-aperto .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-mobile{position:fixed;inset:var(--h) 0 0;background:var(--navy);color:#fff;padding:28px clamp(20px,4.5vw,64px);display:grid;align-content:start;gap:4px;overflow-y:auto}
.menu-mobile[hidden]{display:none}
.menu-mobile a:not(.tasto){font-size:1.9rem;font-weight:700;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu-mobile .tasto{margin-top:24px;background:#fff;color:var(--navy)}
.menu-aperto .testata{background:var(--navy)!important;color:#fff!important;box-shadow:none}
.menu-aperto .testata .logo-n{display:none!important}.menu-aperto .testata .logo-b{display:block!important}
/* aperture */
.apertura{position:relative;min-height:min(92vh,900px);display:flex;align-items:flex-end;color:#fff;background:var(--navy);overflow:hidden}
.apertura.piccola{min-height:min(62vh,600px)}
.apertura.home{min-height:100vh}
.apertura-foto{position:absolute;inset:0}
.apertura-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:respiro 18s ease-in-out infinite alternate}
.apertura-foto.abisso{background:url("img/abisso.webp") center/cover no-repeat;animation:respiro 22s ease-in-out infinite alternate}
@keyframes respiro{to{transform:scale(1.12)}}
.apertura-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,34,.35) 0%,rgba(6,20,34,.25) 35%,rgba(6,20,34,.92) 100%)}
.apertura-in{position:relative;width:100%;padding-top:calc(var(--h) + 60px);padding-bottom:clamp(64px,9vw,120px)}
.apertura .occhiello{color:var(--az2)}
.apertura h1 span{color:var(--az2)}
.apertura-sub{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.55;color:rgba(255,255,255,.82);max-width:36em;margin-top:28px}
.scorri{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);display:grid;justify-items:center;gap:8px}
.scorri::after{content:"";width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:scendi 2s infinite}
@keyframes scendi{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* sezioni */
.sezione{padding:clamp(80px,11vw,160px) 0}
.sezione.chiara{background:var(--chiaro)}
.sezione.scura{background:var(--navy);color:#fff}.sezione.scura h2 span{color:var(--az2)}.sezione.scura .grande-testo{color:rgba(255,255,255,.8)}
.intesta{max-width:900px;margin-bottom:clamp(44px,6vw,80px)}
.manifesto .grande{font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.18;letter-spacing:-.03em;font-weight:600;max-width:24em}
.manifesto .grande span{color:var(--grigio)}
.grande-testo{font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.6;color:var(--grigio)}
.due{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
/* competenze */
.pilastri{border-top:1px solid var(--linea)}
.pilastro{display:grid;grid-template-columns:90px minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);padding:clamp(32px,4vw,52px) 0;border-bottom:1px solid var(--linea);align-items:start}
.pil-n{font-size:1rem;font-weight:700;color:var(--az);padding-top:8px}
.pilastro h3{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.035em}
.pilastro p{color:var(--grigio);margin-top:12px;max-width:30em}
.pilastro ul{list-style:none;display:grid;gap:4px;padding-top:6px}
.pilastro li a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);font-weight:600}
.pilastro li a::after{content:"→";color:var(--az);transition:transform .25s}.pilastro li a:hover::after{transform:translateX(5px)}
/* settori e schede con foto */
.settori{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.settore,.scheda{position:relative;display:block;border-radius:24px;overflow:hidden;background:var(--navy);color:#fff;aspect-ratio:3/4}
.scheda{aspect-ratio:4/3}
.settore .foto,.scheda .foto{position:absolute;inset:0}
.settore img,.scheda img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.settore:hover img,.scheda:hover img{transform:scale(1.06)}
.settore::after,.scheda::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(6,20,34,.88))}
.settore-t,.scheda-t{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(20px,2.4vw,30px);display:grid;gap:6px}
.settore-t b,.scheda-t b{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.15}
.settore-t span,.scheda-t span{font-size:.92rem;color:rgba(255,255,255,.78)}
.schede{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.schede.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.schede.quattro .scheda{aspect-ratio:1}
.schede.tre-testo{grid-template-columns:repeat(3,minmax(0,1fr))}
.scheda-testo{display:grid;gap:8px;padding:28px;border-radius:22px;background:var(--chiaro);transition:background .3s}
.scheda-testo:hover{background:#e9f1fc}.scheda-testo b{font-size:1.2rem}.scheda-testo span{color:var(--grigio);font-size:.94rem}
/* gruppo */
.gruppo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gruppo-card{border-radius:32px;padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:18px;min-height:460px}
.gruppo-card.scura{background:var(--navy);color:#fff}
.gruppo-card.corallo{background:#1f2a44;color:#fff;background-image:radial-gradient(90% 120% at 100% 0%,rgba(255,107,74,.38),transparent 60%)}
.gruppo-card .occhiello{color:var(--az2);margin:0}.gruppo-card.corallo .occhiello{color:#ffb8a8}
.gruppo-logo{height:30px;width:auto}
.tbs-logo{font-size:1.9rem;letter-spacing:-.04em;font-weight:500}.tbs-logo b{font-weight:800}.tbs-logo i{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--corallo);margin-left:.1em}
.gruppo-card h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.gruppo-card p:not(.occhiello):not(.tbs-logo){color:rgba(255,255,255,.78)}
/* numeri, sfide, risultati, fasi, valori */
.numeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.numeri div{border-top:1px solid var(--linea);padding-top:24px}
.numeri b{display:block;font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.numeri span{display:block;margin-top:12px;color:var(--grigio)}
.sfide,.valori{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.valori.quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.sfide div,.valori div{border-top:2px solid var(--navy);padding-top:22px}
.sfide b,.valori b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.sfide p,.valori p{color:var(--grigio);margin-top:10px}
.risultati,.fasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.risultati div,.fasi div{background:var(--chiaro);border-radius:24px;padding:clamp(26px,3vw,36px);display:grid;gap:10px;align-content:start}
.sezione.chiara .risultati div{background:#fff}
.risultati span,.fasi span{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;color:var(--az);line-height:1}
.risultati b,.fasi b{font-size:1.25rem;letter-spacing:-.02em}.risultati p,.fasi p{color:var(--grigio)}
.logo-grande{background:var(--navy);border-radius:32px;padding:clamp(48px,8vw,110px) clamp(28px,6vw,90px);margin-bottom:clamp(40px,5vw,64px)}
.logo-grande svg{width:100%;height:auto}
.logo-grande .logo-vetrina g:first-of-type,.logo-grande .logo-vetrina path{fill:#fff}
.zone{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.zone li{padding:10px 18px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);font-weight:500;font-size:.92rem}
.sezione:not(.chiara) .zone li{background:var(--chiaro);box-shadow:none}
/* faq */
.faq details{border-bottom:1px solid var(--linea);padding:24px 0}
.faq summary{font-weight:700;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--az);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin-top:12px;color:var(--grigio)}
/* invito finale */
.fascia-cta{background:var(--navy);color:#fff;padding:clamp(80px,11vw,150px) 0}
.fascia-cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.fascia-cta h2 span{color:var(--az2)}
.fascia-cta p{font-size:1.15rem;color:rgba(255,255,255,.78)}
.fascia-cta .azioni{margin-top:28px}
/* contatti */
.contatti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.contatti h2{margin-bottom:20px}
.recapiti{display:grid;gap:20px;margin-top:40px}
.recapiti dt{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.recapiti dd{font-size:1.15rem;font-weight:600;margin-top:4px}.recapiti a{color:var(--az)}
.modulo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;background:var(--chiaro);border-radius:32px;padding:clamp(24px,3.4vw,44px)}
.modulo .pieno{grid-column:1/-1}
.modulo label{display:grid;gap:7px;font-size:.84rem;font-weight:600;color:var(--grigio)}
.modulo input:not([type=checkbox]),.modulo select,.modulo textarea{font:inherit;font-size:1rem;width:100%;min-width:0;padding:15px 16px;border-radius:14px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--linea);color:var(--testo)}
.modulo input:focus,.modulo select:focus,.modulo textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--az)}
.modulo .consenso{display:flex;gap:10px;align-items:flex-start;font-weight:400;line-height:1.5}
.modulo .consenso input{margin-top:4px;width:18px;height:18px;accent-color:var(--navy)}
.modulo .consenso a{text-decoration:underline}
.modulo .tasto{border:0;cursor:pointer;font:inherit;font-weight:600}
.esito{min-height:1.4em;font-weight:600}.esito.ok{color:#1a7f37}.esito.ko{color:#c62828}
.esca{position:absolute;left:-9999px}
/* testi legali */
.testo-legale{padding-top:calc(var(--h) + 80px)}
.testo-legale h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:24px}
.testo-legale h2{font-size:1.4rem;margin-top:36px}.testo-legale p{color:var(--grigio);margin-top:10px}.nota{font-size:.88rem;margin-top:40px!important}
/* piede */
.piede{background:#030b14;color:rgba(255,255,255,.7);padding:clamp(72px,9vw,120px) 0 calc(40px + env(safe-area-inset-bottom,0px))}
.piede-alto{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
.piede-alto>div{display:grid;gap:9px;align-content:start}
.logo-piede{height:24px;width:auto}
.piede-claim{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:#fff;margin-top:22px}
.piede h2{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.piede a{font-size:.92rem}.piede a:hover{color:#fff}
.piede-basso{margin-top:64px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
/* comparsa allo scorrimento */
.rivela{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rivela.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rivela{opacity:1;transform:none}.apertura-foto img,.apertura-foto.abisso{animation:none}*{scroll-behavior:auto!important}}
/* tablet */
@media (max-width:1080px){
  .menu,.menu-cta{display:none}.burger{display:block}
  .settori,.schede.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schede,.schede.tre-testo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numeri,.valori.quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .piede-alto{grid-template-columns:repeat(3,1fr)}.piede-marchio{grid-column:1/-1}
}
/* telefono */
@media (max-width:760px){
  body{font-size:16px}
  .pilastro{grid-template-columns:minmax(0,1fr);gap:14px}
  .due,.gruppo,.contatti,.fascia-cta-in,.sfide,.valori,.valori.quattro,.modulo{grid-template-columns:minmax(0,1fr)}
  .settori,.schede,.schede.quattro,.schede.tre-testo{grid-template-columns:minmax(0,1fr)}
  .settore{aspect-ratio:4/3}
  .gruppo-card{min-height:0}
  .azioni{flex-direction:column}.azioni .tasto{width:100%}
  .piede-alto{grid-template-columns:1fr 1fr}
  .apertura.home{min-height:92vh}
}
.gruppo-logo{align-self:flex-start;height:28px;width:auto}
@media (max-width:760px){.scorri{display:none}}
/* banco di pesci della home */
.apertura canvas[data-oceano]{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s;touch-action:pan-y}
.apertura canvas[data-oceano].pronto{opacity:1}
.apertura.home .apertura-velo{background:linear-gradient(180deg,rgba(6,20,34,.25) 0%,transparent 40%,rgba(6,20,34,.75) 100%);pointer-events:none}
.apertura.home .apertura-in{pointer-events:none}.apertura.home .apertura-in a{pointer-events:auto}
.apertura.intro .apertura-in,.apertura.nome .apertura-in{opacity:0;filter:blur(6px)}
.apertura-in{transition:opacity .9s,filter .9s}
.suggerimento{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.8rem;color:rgba(220,240,255,.6);pointer-events:none;z-index:2}
.suggerimento .tocco{display:none}
@media (hover:none){.suggerimento .mouse{display:none}.suggerimento .tocco{display:inline}}
/* check-up dentro il sito vetrina */
.cu-vetrina{padding-top:0;background:#061422}