/* ==========================================================================
   Tack System — Home (Figma 52:9563)
   Sezioni nell'ordine: Hero, FeaturesStrip, SectorsGrid, MaterialsSection,
   StatsBar, WhyUs, CTABanner.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO --
   Rifatto il 23/09/2026 sul Figma Make: testo centrato, carosello di foto a
   tutta pagina sotto una velatura scura, e la testata che ci galleggia sopra.
   La velatura non e' un vezzo: senza, il titolo bianco finisce su un cielo
   chiaro e sparisce.                                                       */

.tk-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* su iOS la barra del browser non deve tagliare */
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--tk-black);
  color: var(--tk-on-dark);
  text-align: center;
}

/* --- Carosello ----------------------------------------------------------
   Le diapositive sono impilate e si scambiano in dissolvenza. La prima e'
   marcata is-active gia' dal PHP: senza JS resta una foto ferma, che e' il
   comportamento giusto se lo script non arriva.                            */
.tk-hero__slides { position: absolute; inset: 0; z-index: 0; }
.tk-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.tk-hero__slide.is-active { opacity: 1; }
.tk-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tk-hero-scrim);
}
/* Sfumatura verso il colore della sezione seguente */
.tk-hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 112px;
  z-index: 1;
  background: linear-gradient(0deg, var(--tk-light) 0%, rgba(248, 249, 251, 0) 100%);
}

.tk-hero .tk-container { position: relative; z-index: 2; }
.tk-hero__inner { max-width: 768px; margin: 0 auto; padding-block: 112px; }

/* Sopratitolo con i quattro pallini di marca */
.tk-hero__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.tk-hero__pill { width: 8px; height: 8px; border-radius: var(--tk-r-pill); }
.tk-hero__pill--orange { background: var(--tk-orange); }
.tk-hero__pill--green  { background: var(--tk-green); }
.tk-hero__pill--purple { background: var(--tk-purple); }
.tk-hero__pill--yellow { background: var(--tk-yellow); }
.tk-hero__eyebrow { color: var(--tk-on-dark-70); margin-left: 8px; }

.tk-hero__title   { color: var(--tk-white); }
/* Sul fondo fotografico il 60% non basta: il testo lungo va al 70%. */
.tk-hero__text    { padding-top: 24px; max-width: 576px; margin-inline: auto; color: var(--tk-on-dark-70); }
.tk-hero__actions { display: flex; gap: 16px; padding-top: 40px; flex-wrap: wrap; justify-content: center; }

/* --- Comandi del carosello ---------------------------------------------- */
.tk-hero__slider {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
}
.tk-hero__dots { display: flex; align-items: center; gap: 8px; }
.tk-hero__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--tk-r-pill);
  background: var(--tk-on-dark-40);
  cursor: pointer;
  transition: width var(--tk-ease), background-color var(--tk-ease);
}
.tk-hero__dot.is-active { width: 28px; background: var(--tk-orange); }
.tk-hero__dot:focus-visible { outline: 2px solid var(--tk-white); outline-offset: 3px; }
.tk-hero__label { color: var(--tk-on-dark-50); }

@media (prefers-reduced-motion: reduce) {
  .tk-hero__slide { transition: none; }
}

@media (max-width: 1024px) {
  .tk-hero__inner { padding-block: 96px; }
}
@media (max-width: 640px) {
  .tk-hero { min-height: 0; }
  .tk-hero__inner { padding-block: 104px 96px; }
  .tk-hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .tk-hero__slider { bottom: 24px; gap: 12px; }
}

/* ------------------------------------------------------ FEATURES STRIP --
   Figma 52:9567. Sei colonne su fondo chiarissimo.                        */

.tk-features {
  background: var(--tk-light);
  border-top: 1px solid var(--tk-border-hair);
  border-bottom: 1px solid var(--tk-border-hair);
  padding-block: 80px;
}
/* auto-fit invece di repeat(6): da quando le card si aggiungono e si tolgono
   dal pannello, il numero non e' piu' garantito. Con sei il risultato e'
   identico a prima; con cinque o quattro le colonne vuote collassano e le
   card si allargano, invece di lasciare un buco in fondo alla riga.
   I 150px sono il minimo sotto cui un titolo di due parole andrebbe a capo
   male: servono a decidere quante colonne ci stanno, non a dare la larghezza,
   che resta 1fr. */
.tk-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
}
/* Dal 23/09/2026 ogni voce e' una scheda bianca con il bordo del proprio
   colore e l'icona a fondo pieno: mezza via fra la striscia di prima e il
   Make, come chiesto. L'impaginazione a sei colonne resta quella di prima. */
.tk-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--tk-white);
  border: 2px solid var(--tk-border-light);
  border-radius: var(--tk-r-card);
  padding: 24px 20px;
  transition: transform var(--tk-ease), box-shadow var(--tk-ease);
}
.tk-feature--orange { border-color: var(--tk-orange); }
.tk-feature--green  { border-color: var(--tk-green); }
.tk-feature--yellow { border-color: var(--tk-yellow); }
.tk-feature--purple { border-color: var(--tk-purple); }

/* Al passaggio del mouse la scheda si riempie del proprio colore e i testi
   vanno in bianco. Il riquadro dell'icona diventa un velo bianco: a fondo
   pieno sparirebbe dentro il suo stesso colore.
   La transizione e' su colore e ombra, non su "all": animare all fa lavorare
   il browser anche su proprieta' che non cambiano. */
.tk-feature,
.tk-feature .tk-iconbox,
.tk-feature__title,
.tk-feature__text {
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tk-feature:hover { transform: translateY(-4px); }
.tk-feature--orange:hover { background: var(--tk-orange); box-shadow: 0 12px 28px rgba(215, 74, 49, 0.28); }
.tk-feature--green:hover  { background: var(--tk-green);  box-shadow: 0 12px 28px rgba(23, 151, 101, 0.28); }
.tk-feature--yellow:hover { background: var(--tk-yellow); box-shadow: 0 12px 28px rgba(222, 167, 31, 0.28); }
.tk-feature--purple:hover { background: var(--tk-purple); box-shadow: 0 12px 28px rgba(131, 70, 142, 0.28); }

.tk-feature:hover .tk-feature__title,
.tk-feature:hover .tk-feature__text { color: var(--tk-white); }
.tk-feature:hover .tk-iconbox--piena { background: rgba(255, 255, 255, 0.22); }

/* Su schermo tattile l'hover resta appiccicato dopo il tocco, quindi va
   annullato TUTTO — riquadro dell'icona compreso.
   DIFETTO DEL 23/09, corretto il 24: la guardia annullava il fondo colorato
   ma non `.tk-iconbox--piena`, che restava a velo bianco. Su una scheda
   tornata bianca il velo bianco rende invisibile l'icona: al tocco le icone
   sparivano e non succedeva nient'altro. Una guardia parziale e' peggio di
   nessuna guardia. */
@media (hover: none) {
  .tk-feature:hover { transform: none; box-shadow: none; }
  .tk-feature:hover[class*="tk-feature--"] { background: var(--tk-white); }
  .tk-feature:hover .tk-feature__title { color: var(--tk-ink); }
  .tk-feature:hover .tk-feature__text  { color: var(--tk-ink-500); }
  .tk-feature--orange:hover .tk-iconbox--piena { background: var(--tk-orange); }
  .tk-feature--green:hover  .tk-iconbox--piena { background: var(--tk-green); }
  .tk-feature--yellow:hover .tk-iconbox--piena { background: var(--tk-yellow); }
  .tk-feature--purple:hover .tk-iconbox--piena { background: var(--tk-purple); }

  /* Al tocco l'hover non esiste, ma il dito premuto si': la scheda si
     riempie mentre si preme e torna bianca appena si stacca. E' lo stesso
     effetto del desktop, solo legato al gesto giusto.
     Perche' iOS faccia scattare :active serve un ascoltatore dei tocchi:
     lo registra header.js. */
  .tk-feature:active { transform: translateY(-2px); }
  .tk-feature--orange:active { background: var(--tk-orange); }
  .tk-feature--green:active  { background: var(--tk-green); }
  .tk-feature--yellow:active { background: var(--tk-yellow); }
  .tk-feature--purple:active { background: var(--tk-purple); }
  .tk-feature:active .tk-feature__title,
  .tk-feature:active .tk-feature__text { color: var(--tk-white); }
  .tk-feature:active .tk-iconbox--piena { background: rgba(255, 255, 255, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-feature, .tk-feature .tk-iconbox, .tk-feature__title, .tk-feature__text { transition: none; }
  .tk-feature:hover { transform: none; }
}
.tk-feature__title { font-size: 14px; line-height: 19.25px; font-weight: 700; color: var(--tk-ink); margin: 0; }
.tk-feature__text  { font-size: 12px; line-height: 19.5px; color: var(--tk-ink-500); margin: 4px 0 0; }

@media (max-width: 1024px) { .tk-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 640px)  { .tk-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
                             .tk-features { padding-block: 56px; } }

/* -------------------------------------------------------- SECTORS GRID --
   Figma 52:9631, rifatta il 23/09/2026 sul Make: fondo grigio chiaro e card
   bianche con una fascia del colore del settore in cima.                   */

.tk-sectors { background: var(--tk-grey); color: var(--tk-ink); padding-block: 112px; }

.tk-sectors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.tk-sectors__eyebrow { color: var(--tk-ink-300); }
.tk-sectors__title   { padding-top: 12px; color: var(--tk-ink); max-width: 487px; }
.tk-sectors__aside   { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.tk-sectors__claim   { color: var(--tk-ink-400); text-align: right; max-width: 320px; }
.tk-sectors__link    { color: var(--tk-orange); }
.tk-sectors__link:hover,
.tk-sectors__link:active { color: var(--tk-orange-deep); }

.tk-sectors__grid {
  display: grid;
  /* Al massimo 4 per riga, righe bilanciate (21/10/2026): con nove settori
     3 + 3 + 3. Le colonne le calcola il template (--tk-colonne). */
  grid-template-columns: repeat(var(--tk-colonne, 4), minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* nel Figma le due righe sono alte uguali */
  gap: 20px;
  margin-top: 56px;
}

/* Card settore */
.tk-card {
  display: flex;
  flex-direction: column;
  background: var(--tk-white);
  border: 1.5px solid var(--tk-border-hair);
  border-radius: var(--tk-r-card);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  min-height: 353px;
  height: 100%;
  transition: transform var(--tk-ease), box-shadow var(--tk-ease), border-color var(--tk-ease);
}
.tk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); }

/* Fascia del colore in cima alla card */
.tk-card__strip { display: block; height: 4px; flex: none; }
.tk-card__strip--orange { background: var(--tk-orange); }
.tk-card__strip--green  { background: var(--tk-green); }
.tk-card__strip--yellow { background: var(--tk-yellow); }
.tk-card__strip--purple { background: var(--tk-purple); }

.tk-card__media {
  position: relative;
  height: 160px;
  background: var(--tk-light-alt);
  flex: none;
  overflow: hidden;
}
.tk-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tk-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  width: 32px; height: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: var(--tk-r-icon-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tk-white);
}
.tk-card__badge--orange { background: var(--tk-orange); }
.tk-card__badge--green  { background: var(--tk-green); }
.tk-card__badge--yellow { background: var(--tk-yellow); }
.tk-card__badge--purple { background: var(--tk-purple); }

.tk-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 20px;
}
.tk-card__title { color: var(--tk-ink); }
.tk-card__text  { font-size: 12px; line-height: 19.5px; color: var(--tk-ink-400); margin: 8px 0 16px; }
.tk-card__link  { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; }
.tk-card__link .tk-i { transition: transform var(--tk-ease); }
.tk-card:hover .tk-card__link .tk-i { transform: translateX(3px); }

@media (max-width: 1024px) {
  .tk-sectors { padding-block: 80px; }
  .tk-sectors__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tk-sectors__aside { align-items: flex-start; }
  .tk-sectors__claim { text-align: left; }
  .tk-sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  /* Con un numero dispari di settori l'ultima card resta sola: la si
     centra, larga come le altre, invece di lasciarla a sinistra. */
  .tk-sectors__grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
  }
}
/* Sotto i 640 restano DUE card per riga, non una: otto card in colonna
   facevano della sezione un rullo infinito. A meta' larghezza la card va
   stretta di conseguenza — foto piu' bassa, padding e corpi ridotti — e la
   sintesi si ferma a tre righe, altrimenti le due card della stessa riga
   escono di altezze molto diverse. */
@media (max-width: 640px) {
  .tk-sectors { padding-block: 64px; }
  .tk-sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
  .tk-sectors__grid > :last-child:nth-child(odd) { width: calc(50% - 7px); }
  .tk-card { min-height: 0; border-radius: 14px; }
  .tk-card__media { height: 104px; }
  .tk-card__badge { width: 26px; height: 26px; top: 8px; left: 8px; }
  .tk-card__badge .tk-i { width: 15px; height: 15px; }
  .tk-card__body { padding: 12px; }
  .tk-card__title { font-size: 14px; line-height: 19px; }
  .tk-card__text {
    font-size: 11.5px;
    line-height: 17px;
    margin: 6px 0 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .tk-card__link { font-size: 11.5px; }
}

/* ---------------------------------------------------- MATERIALS SECTION --
   Figma 52:9810. Due colonne: testo + elenco a sinistra, foto con card
   sospesa a destra.                                                       */

.tk-materials {
  background: var(--tk-white);
  border-top: 1px solid var(--tk-border-hair);
  border-bottom: 1px solid var(--tk-border-hair);
  padding-block: 112px;
}
.tk-materials__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.tk-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--tk-r-pill);
  background: var(--tk-green-10);
  color: var(--tk-green);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tk-materials__title { margin-top: 24px; line-height: 56px; color: var(--tk-ink); }
.tk-materials__text  { margin-top: 24px; max-width: 512px; color: var(--tk-ink-600); }

.tk-checklist { list-style: none; margin: 32px 0 40px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tk-checklist li { display: flex; align-items: center; gap: 12px; }
.tk-checklist__mark {
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--tk-r-pill);
  background: var(--tk-green-09);
  color: var(--tk-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-checklist span:last-child { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tk-ink-800); }

.tk-materials__media {
  position: relative;
  border-radius: var(--tk-r-media);
  overflow: hidden;
  box-shadow: var(--tk-sh-media);
  min-height: 500px;
}
.tk-materials__media > img { width: 100%; height: 500px; object-fit: cover; }

.tk-floatcard {
  position: absolute;
  right: 32px;    /* Figma: card 240px a sinistra 304 di 576 */
  bottom: 51px;
  width: 240px;
  padding: 24px;
  border-radius: var(--tk-r-card);
  background: var(--tk-card-float);
  border: 1px solid var(--tk-border-dark-12);
  box-shadow: var(--tk-sh-float);
  color: var(--tk-white);
}
.tk-floatcard__icon {
  width: 40px; height: 40px;
  border-radius: var(--tk-r-icon-sm);
  background: var(--tk-purple-14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tk-floatcard__title { font-size: 14px; line-height: 17.5px; font-weight: 700; margin: 12px 0 0; }
.tk-floatcard__text  { font-size: 12px; line-height: 19.5px; color: var(--tk-on-dark-60); margin: 8px 0 0; }

@media (max-width: 1024px) {
  .tk-materials { padding-block: 80px; }
  .tk-materials__grid { grid-template-columns: 1fr; gap: 48px; }
  .tk-materials__title { line-height: 1.2; }
}
@media (max-width: 640px) {
  .tk-materials { padding-block: 64px; }
  .tk-materials__media { min-height: 0; }
  .tk-materials__media > img { height: 320px; }
  .tk-floatcard { position: static; width: auto; margin-top: -48px; margin-inline: 16px; }
}

/* ------------------------------------------------------------ STATS BAR --
   Figma 52:9870. Titolo a sinistra, tre numeri a destra. Dal 23/09/2026 il
   fondo e' il verde del logo e l'accento del titolo e' giallo, non rosso.  */

.tk-stats {
  background: var(--tk-stats-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--tk-on-dark);
  padding-block: 96px;
}
.tk-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
}
.tk-stats__title { color: var(--tk-white); }
/* Sul verde l'arancione di sistema vibra: qui l'accento e' il giallo. */
.tk-stats__title .tk-accent { color: var(--tk-yellow); }
.tk-stats__text  { margin-top: 20px; max-width: 384px; color: var(--tk-on-dark-60); }

.tk-stats__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tk-stat { display: flex; flex-direction: column; gap: 12px; }
.tk-stat__icon { color: var(--tk-on-dark-70); }
.tk-stat__value {
  font-size: var(--tk-fs-stat);
  line-height: var(--tk-lh-stat);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tk-stat__unit { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--tk-on-dark-70); }

/* Sul fondo verde i numeri vanno in bianco, come nel Make. Le classi
   .tk-accent* che il template mette su ogni numero qui perderebbero: il verde
   sparisce sul verde e l'arancione vibra. Restano nel markup perche' servono
   altrove, ma su questa sezione le sovrascriviamo. */
.tk-stats .tk-stat__value,
.tk-stats .tk-stat__value.tk-accent,
.tk-stats .tk-stat__value.tk-accent-green,
.tk-stats .tk-stat__value.tk-accent-yellow,
.tk-stats .tk-stat__value.tk-accent-purple { color: var(--tk-white); }
.tk-stat__label { margin-top: 8px; color: var(--tk-on-dark-50); }

@media (max-width: 1024px) {
  .tk-stats { padding-block: 72px; }
  .tk-stats__grid { grid-template-columns: 1fr; gap: 48px; }
}
/* I tre numeri sul telefono vanno a piramide rovesciata: due sopra, il
   terzo centrato sotto. In colonna occupavano mezzo schermo e si leggevano
   come un elenco; cosi' restano un blocco solo. */
@media (max-width: 640px) {
  .tk-stats { padding-block: 56px; }
  .tk-stats__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    text-align: center;
    justify-items: center;
  }
  .tk-stat { align-items: center; gap: 8px; }
  .tk-stat__value { justify-content: center; }
  .tk-stats__items > .tk-stat:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
  }
}

/* ---------------------------------------------------------------- WHY US --
   Figma 52:9914. Dal 23/09/2026 le cinque card sono piene del proprio
   colore, con il testo bianco, come nel Make.                             */

.tk-whyus {
  background: var(--tk-light-alt);
  border-top: 1px solid var(--tk-border-hair);
  border-bottom: 1px solid var(--tk-border-hair);
  padding-block: 112px;
}
.tk-whyus__eyebrow { color: var(--tk-purple); }
.tk-whyus__title   { padding-top: 12px; line-height: 48px; color: var(--tk-ink); }
.tk-whyus__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.tk-why {
  border-radius: var(--tk-r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--tk-white);
  transition: transform var(--tk-ease), box-shadow var(--tk-ease);
}
.tk-why:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.tk-why--orange { background: linear-gradient(145deg, var(--tk-orange) 0%, var(--tk-orange-deep) 100%); }
.tk-why--green  { background: linear-gradient(145deg, var(--tk-green) 0%, #128055 100%); }
.tk-why--yellow { background: linear-gradient(145deg, var(--tk-yellow) 0%, #c08f10 100%); }
.tk-why--purple { background: linear-gradient(145deg, var(--tk-purple) 0%, #6b3775 100%); }
.tk-why__title { font-size: 14px; line-height: 19.25px; font-weight: 700; color: var(--tk-white); margin: 0; }
.tk-why__text  { font-size: 12px; line-height: 19.5px; color: rgba(255, 255, 255, 0.78); margin: 6px 0 0; }
/* Sul fondo pieno il riquadro dell'icona e' un velo bianco, non la velatura
   colorata usata altrove: quella sparirebbe sul proprio stesso colore. */
.tk-why .tk-iconbox {
  border-radius: var(--tk-r-icon);
  background: rgba(255, 255, 255, 0.22);
  color: var(--tk-white);
  width: 44px; height: 44px;
}

@media (max-width: 1024px) {
  .tk-whyus { padding-block: 80px; }
  .tk-whyus__title { line-height: 1.2; }
  .tk-whyus__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
}
/* Qui si resta a UNA card per riga, per scelta: provata a due il 24/09 e
   riportata indietro. Le card di "Perche' noi" sono testo, non schede da
   sfogliare, e a meta' larghezza le righe andavano a capo troppo spesso. */
@media (max-width: 640px) {
  .tk-whyus { padding-block: 64px; }
  .tk-whyus__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* -------------------------------------------------------------- CTA BANNER --
   Figma 52:9979. Fascia arancione a tutta larghezza.                       */

.tk-cta {
  background: linear-gradient(171.67deg, #d74a31 0%, #b53a23 100%);
  border-top: 1px solid rgba(215, 74, 49, 0.5);
  color: var(--tk-white);
  padding-block: 80px;
}
.tk-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.tk-cta__kicker { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.8); }
.tk-cta__title  { font-size: 36px; line-height: 45px; font-weight: 700; margin: 12px 0 0; }
.tk-cta__actions { display: flex; gap: 16px; flex: none; }

@media (max-width: 1024px) {
  .tk-cta { padding-block: 64px; }
  .tk-cta__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .tk-cta__title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 640px) {
  .tk-cta__actions { flex-direction: column; align-items: flex-start; }
}