/* =====================================================================
   Webing Design System 1.2 applicato alla homepage v5.
   Si carica DOPO webing-homepage.css e non modifica quel file.
   Tutto è sotto html.ds12: togliendo la classe torna la homepage originale.
   ===================================================================== */

@property --w-sweep{syntax:'<angle>';inherits:false;initial-value:0deg;}

:root{
  --w-ink:#0B0B0D;
  --w-pink:#FD24BF;
  --w-blue:#98C4FF;
  --w-radiant-light:linear-gradient(135deg,#EDF5FF 0%,#FFEFF9 100%);
  --w-radiant:linear-gradient(135deg,#F501CA 0%,#1447BF 100%);
  --w-stroke:linear-gradient(100deg,#F501CA 0%,#1447BF 100%);
  --w-stroke-ring:conic-gradient(from 225deg,#F501CA,#1447BF 50%,#F501CA);
  --w-serif:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --w-tail:8px;
  --w-tail-s:4px;
  --w-ease:cubic-bezier(.16,1,.3,1);
}

/* Strutture sempre attive, innocue anche con DS spento */
.ds-step{display:none;}
/* Contatore a rulli. Le stesse regole stanno in webing-ui-1-2.css: qui
   servono perche' la homepage non carica quel file. Se si cambia una copia
   si cambia anche l'altra.
   La finestra di ogni cifra e' piu' alta di 1em: le cifre tonde (0, 3, 5, 6, 8)
   sfondano di poco la linea di base e con la finestra esatta venivano tagliate
   sotto. L'altezza sta in --odo-h, che serve anche allo scorrimento. */
.w-odo{display:inline-flex;align-items:flex-start;--odo-h:1.16em;}
.w-odo__col{display:inline-block;height:var(--odo-h);overflow:hidden;}
/* La finestra taglia solo in verticale. In orizzontale no: la colonna e'
   larga quanto la cifra misurata CON il letter-spacing, che qui e' negativo
   (-0,06em), quindi piu' stretta dell'ingombro reale del glifo. Con
   overflow:hidden le cifre tonde come 5 e 8 perdevano un filo sul lato
   destro. Il clip-path con inset negativo lascia respirare i fianchi e
   taglia solo sopra e sotto, che e' l'unica cosa che serve ai rulli. */
@supports (clip-path:inset(0 -1px)){
  .w-odo__col{overflow:visible;clip-path:inset(0 -0.5em);}
}
.w-odo__strip{display:flex;flex-direction:column;transition:transform 1.8s var(--w-ease);}
.w-odo__strip span,.w-odo > span{display:block;height:var(--odo-h);line-height:var(--odo-h);text-align:left;}
.is-in .w-odo__strip,html:not(.ds12) .w-odo__strip{transform:translateY(calc(var(--d) * -1 * var(--odo-h)));}
.ds12-toggle{position:fixed;z-index:9999;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 16px;border:1px solid rgba(11,11,13,.12);border-radius:21px 21px 21px 4px;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(3,5,16,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#0B0B0D;cursor:pointer;}
.ds12-toggle span{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:15px 15px 15px 4px;background:#0B0B0D;color:#fff;font-size:11px;letter-spacing:.06em;}
html:not(.ds12) .ds12-toggle span{background:#EEF0F6;color:#0B0B0D;}

/* ---------------- Colore e tipografia ---------------- */
html.ds12{--ink:#0B0B0D;--dark:#0B0B0D;--ds-ink:#0B0B0D;}
html.ds12 .home-card-system .kicker{font-size:13px;letter-spacing:.14em;}
html.ds12 .home-card-system .h2{font-size:clamp(30px,3.6vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
html.ds12 .home-card-system .brand-positioning .h2{letter-spacing:-.02em;}
html.ds12 .home-card-system .lead{font-size:clamp(19px,1.55vw,22px);line-height:1.4;}
html.ds12 .home-card-system .hero h1{font-size:clamp(40px,4.8vw,68px);line-height:1;letter-spacing:-.025em;}
html.ds12 .home-card-system .hero .sub{font-size:clamp(18px,1.4vw,20px);line-height:1.45;}
html.ds12 .home-card-system .final h2{font-size:clamp(40px,4.8vw,68px);line-height:1;letter-spacing:-.025em;}
html.ds12 .home-card-system .logos p{font-size:12px;font-weight:700;letter-spacing:.08em;}

/* ---------------- Firma: la coda ---------------- */
html.ds12 .home-card-system .tabs{border-radius:16px 16px 16px 5px;}
html.ds12 .home-card-system .mega-menu,
html.ds12 .home-card-system .mega-menu a{border-bottom-left-radius:5px!important;}
html.ds12 .home-card-system .fan-card{border-radius:26px 26px 26px var(--w-tail);}
html.ds12 .home-card-system .expert-avatar{border-radius:50% 50% 50% 14%;}
html.ds12 .home-card-system .data-story-copy,
html.ds12 .home-card-system .data-story-stage,
html.ds12 .home-card-system .dashboard-full-reveal,
html.ds12 .home-card-system .why-integrated-card,
html.ds12 .home-card-system .kpi-cell,
html.ds12 .home-card-system .phase,
html.ds12 .home-card-system .format-browser,
html.ds12 .home-card-system .industry-browser,
html.ds12 .home-card-system .partnership-panel{border-bottom-left-radius:var(--w-tail);}
html.ds12 .home-card-system .final-creative-frame,
html.ds12 .home-card-system .final-creative-card{border-bottom-left-radius:var(--w-tail);}
html.ds12 .home-card-system .industry-media-card{border-bottom-left-radius:var(--w-tail-s);}
html.ds12 .home-card-system .format-item i{border-radius:21px 21px 21px var(--w-tail-s);}
html.ds12 .home-card-system .industry-item-arrow,
html.ds12 .home-card-system .industry-item-icon{border-radius:14px 14px 14px 3px;}
html.ds12 .home-card-system .success-card-kpi-label{border-radius:17px 17px 17px var(--w-tail-s);background:var(--w-pink);box-shadow:0 8px 22px rgba(253,36,191,.28);}
html.ds12 .home-card-system .success-card-copy{border-radius:24px 24px 0 var(--w-tail-s);}

/* ---------------- Bottoni: il colore sale dal basso ---------------- */
html.ds12 .home-card-system .btn,
html.ds12 .home-card-system .use-cases-cta,
html.ds12 .home-card-system .security-link,
html.ds12 .home-card-system .format-creative-link,
html.ds12 .home-card-system .industry-creative-link{position:relative;isolation:isolate;overflow:hidden;border-radius:14px 14px 14px var(--w-tail-s);transform:none!important;transition:color .35s var(--w-ease),background-color .35s var(--w-ease),box-shadow .35s var(--w-ease);}
html.ds12 .home-card-system .btn::before,
html.ds12 .home-card-system .use-cases-cta::before,
html.ds12 .home-card-system .security-link::before,
html.ds12 .home-card-system .format-creative-link::before,
html.ds12 .home-card-system .industry-creative-link::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--w-ink);transform:translateY(101%);transition:transform .55s var(--w-ease);}
html.ds12 .home-card-system :is(.btn,.use-cases-cta,.security-link,.format-creative-link,.industry-creative-link):is(:hover,:focus-visible)::before{transform:translateY(0);}
html.ds12 .home-card-system :is(.btn,.use-cases-cta,.security-link,.format-creative-link,.industry-creative-link,.nav-cta,.final-email-link,.format-demo-link,.industry-demo-link,.demo-email-link) > span[aria-hidden="true"],
html.ds12 .home-card-system .nav-cta > i{display:inline-block;text-decoration:none;transition:transform .45s var(--w-ease);}
html.ds12 .home-card-system :is(.btn,.use-cases-cta,.security-link,.format-creative-link,.industry-creative-link,.nav-cta,.final-email-link,.format-demo-link,.industry-demo-link,.demo-email-link):hover > span[aria-hidden="true"],
html.ds12 .home-card-system .nav-cta:hover > i{transform:translate(3px,-3px);}

/* Primario Pink: resta Pink, al passaggio sale l'Ink */
html.ds12 .home-card-system .btn:hover{background:var(--w-pink);color:#fff;}
html.ds12 .home-card-system .hero .hero-cta .btn:is(:hover,:focus-visible){background:var(--w-pink);color:#fff;}
/* CTA finale su Radiant: bianco con testo Ink, al passaggio sale l'Ink */
html.ds12 .home-card-system .final .btn{background:#fff;color:var(--w-ink);}
html.ds12 .home-card-system .final .btn:hover{background:#fff;color:#fff;}
/* Su Activation Blue e su nero: bianco, al passaggio sale il gradiente Webing */
html.ds12 .home-card-system .use-cases-cta,
html.ds12 .home-card-system .security-link{border:0;background:#fff;color:var(--w-ink);min-height:50px;padding:15px 22px;}
html.ds12 .home-card-system .use-cases-cta::before,
html.ds12 .home-card-system .security-link::before{background:var(--w-stroke);}
/* La sicurezza tiene lo scostamento originale verso il basso, lontano dalle etichette dei badge */
html.ds12 .home-card-system .security-link{margin-top:28px;transform:translateY(18px)!important;}
html.ds12 .home-card-system .use-cases-cta:hover,
html.ds12 .home-card-system .security-link:hover{background:#fff;color:#fff;border:0;}
/* Nei browser di format e industry */
html.ds12 .home-card-system .format-creative-link:hover{background:#fff;color:#fff;}
html.ds12 .home-card-system .industry-creative-link::before{background:var(--w-stroke);}
html.ds12 .home-card-system .industry-creative-link:is(:hover,:focus-visible){background:var(--w-ink);color:#fff;}
html.ds12 .home-card-system .industry-creative:is([data-theme="energy"],[data-theme="finance"]) .industry-creative-link::before{background:var(--w-ink);}
html.ds12 .home-card-system .industry-creative:is([data-theme="energy"],[data-theme="finance"]) .industry-creative-link:is(:hover,:focus-visible){background:#fff;color:#fff;}

/* ---------------- Link: sottolineatura solo sotto il testo ---------------- */
html.ds12 .home-card-system :is(.final-email-link,.format-demo-link,.industry-demo-link,.demo-email-link),
html.ds12 .home-card-system :is(.final-email-link,.format-demo-link,.industry-demo-link,.demo-email-link):hover{border-color:transparent!important;box-shadow:none!important;background:transparent!important;}
html.ds12 .home-card-system .w-link__text{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat;transition:background-size .5s var(--w-ease);}
html.ds12 .home-card-system :is(.final-email-link,.format-demo-link,.industry-demo-link,.demo-email-link):hover .w-link__text{background-size:100% 1.5px;}

/* ---------------- Richiedi Demo in header: come la homepage, bordo che appare al passaggio, con la coda ---------------- */
html.ds12 .home-card-system .nav-cta{border:1px solid transparent;border-radius:14px 14px 14px 4px;background:transparent;box-shadow:none;color:var(--w-pink,#FD24BF);transition:border-color .35s var(--w-ease),color .35s var(--w-ease),background-color .35s var(--w-ease);}
html.ds12 .home-card-system .nav-cta:is(:hover,:focus-visible){border-color:currentColor;background:transparent;outline:0;}

/* ---------------- Card: testi e titoli ---------------- */
html.ds12 .home-card-system .why-integrated-copy h3{letter-spacing:-.03em;}
html.ds12 .home-card-system .why-integrated-copy p{font-family:var(--w-serif);font-size:16px;font-weight:400;line-height:1.45;}
html.ds12 .home-card-system .kpi-cell .num{font-size:clamp(64px,7vw,112px);line-height:.92;letter-spacing:-.06em;}
html.ds12 .home-card-system .kpi-cell :is(h3,h4){font-size:clamp(20px,1.6vw,24px);font-weight:700;line-height:1.18;letter-spacing:-.01em;}
html.ds12 .home-card-system .kpi-cell p{font-size:16px;font-weight:400;line-height:1.45;max-width:34ch;}
html.ds12 .home-card-system .partnership-item p{font-size:16px;font-weight:400;line-height:1.45;}

/* Team: niente pill, il numero diventa un fumetto */
html.ds12 .home-card-system .ds-step{display:grid;place-items:center;width:46px;height:46px;margin-bottom:clamp(36px,4vw,60px);border-radius:23px 23px 23px var(--w-tail-s);background:var(--w-ink);color:#fff;font:800 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;}
html.ds12 .home-card-system .phase .tag{padding:0;border:0;border-radius:0;background:none;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,13,.62);}
html.ds12 .home-card-system .phase :is(h3,h4){margin-top:14px;font-size:clamp(20px,1.6vw,24px);font-weight:700;line-height:1.18;letter-spacing:-.01em;}
html.ds12 .home-card-system .phase p{margin-top:12px;font-size:16px;font-weight:400;line-height:1.45;}

/* ---------------- Anello: solo card cliccabili su fondo chiaro ---------------- */
html.ds12 .home-card-system .success-card > a::after{content:"";position:absolute;z-index:6;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:var(--w-stroke-ring);
  -webkit-mask:conic-gradient(from 225deg,#000 var(--w-sweep),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor,source-over;
  mask:conic-gradient(from 225deg,#000 var(--w-sweep),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:intersect,exclude,add;
  transition:--w-sweep 1s var(--w-ease);}
html.ds12 .home-card-system .success-card > a:is(:hover,:focus-visible)::after{--w-sweep:360deg;}

/* ---------------- CTA finale sul Radiant ---------------- */
html.ds12 .home-card-system .footer-reveal-stage > .final{background-color:#8a24c4;background-image:var(--w-radiant);background-size:cover;}

/* ---------------- Ingresso ---------------- */
html.ds12.js-ds12 [data-reveal] > *{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--w-ease) calc(var(--i,0) * 90ms),transform 1.2s var(--w-ease) calc(var(--i,0) * 90ms),filter .9s var(--w-ease) calc(var(--i,0) * 90ms);}
html.ds12.js-ds12 [data-reveal].is-in > *{opacity:1;transform:none;filter:none;}

@media (prefers-reduced-motion:reduce){
  html.ds12 *,html.ds12 *::before,html.ds12 *::after{transition-duration:.01ms!important;}
}


/* ---------------- Footer: social ---------------- */
html.ds12 .home-card-system .foot-social{display:flex;gap:10px;margin:26px 0 0;padding:0;list-style:none;}
html.ds12 .home-card-system .foot-social a{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:14px 14px 14px 4px;color:#fff;transition:border-color .45s var(--w-ease),color .45s var(--w-ease);}
html.ds12 .home-card-system .foot-social a::before{content:"";position:absolute;z-index:-1;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--w-ease);}
html.ds12 .home-card-system .foot-social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--w-ease);}
html.ds12 .home-card-system .foot-social a:is(:hover,:focus-visible){border-color:#fff;color:var(--w-ink,#0B0B0D);outline:0;}
html.ds12 .home-card-system .foot-social a:is(:hover,:focus-visible)::before{transform:none;}
html.ds12 .home-card-system .foot-social a:is(:hover,:focus-visible) svg{transform:translateY(-1px) scale(1.04);}
@media (prefers-reduced-motion:reduce){ html.ds12 .home-card-system .foot-social a,html.ds12 .home-card-system .foot-social a::before,html.ds12 .home-card-system .foot-social svg{transition:none;} }


/* Tra 1081 e 1240 px i tab si stringono, così Richiedi Demo non esce dalla gabbia */
@media (min-width:1081px) and (max-width:1240px){
  html.ds12 .home-card-system .tabs a,
  html.ds12 .home-card-system .tabs .menu-trigger{padding:12px 15px;font-size:14px;}
  html.ds12 .home-card-system .nav-in{gap:16px;}
}