.elementor-2256 .elementor-element.elementor-element-4d890b9{--display:flex;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2256 .elementor-element.elementor-element-3c9ec17 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-3d97741 *//* =====================================================================
   TempyTag Landing - style.css
   Sistema visivo derivato dal Brand Toolkit ufficiale (DRIMZ 05.2026).
   Tutto lo stile e' confinato in .tt-landing per non interferire con
   il tema WordPress / Elementor. Classi con prefisso tt-.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABILI (palette ufficiale + derivati coerenti)
   --------------------------------------------------------------------- */
.tt-landing{
  --tt-navy:#072754;
  --tt-navy-deep:#051B39;
  --tt-navy-700:#0B3D83;
  --tt-blue:#327CFD;
  --tt-blue-strong:#035AF2;
  --tt-blue-soft:#5D98FD;
  --tt-ink:#050B14;
  --tt-bg:#F5F8FF;
  --tt-surface:#FFFFFF;
  --tt-surface-2:#EEF3FC;
  --tt-line:#E2E9F5;
  --tt-muted:#5B6B82;

  --tt-h1:clamp(2.1rem, 5vw, 3.6rem);
  --tt-h2:clamp(1.6rem, 3.4vw, 2.5rem);
  --tt-h3:clamp(1.2rem, 2vw, 1.5rem);
  --tt-body:clamp(1rem, 1.1vw, 1.125rem);

  --tt-radius:16px;
  --tt-radius-lg:22px;
  --tt-shadow:0 1px 2px rgba(7,39,84,.04), 0 10px 30px rgba(7,39,84,.06);
  --tt-shadow-hover:0 6px 14px rgba(7,39,84,.08), 0 22px 50px rgba(7,39,84,.12);
  --tt-shadow-blue:0 10px 26px rgba(50,124,253,.30);

  --tt-maxw:1160px;
  --tt-gutter:24px;
  --tt-pad-y:clamp(64px, 9vw, 120px);

  --tt-font-head:"Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   2. RESET MINIMO (limitato a .tt-landing, niente selettori globali)
   --------------------------------------------------------------------- */
.tt-landing *,
.tt-landing *::before,
.tt-landing *::after{ box-sizing:border-box; }

/* Azzera il margine di default del documento: header e sezioni a filo dei bordi */
body:has(.tt-landing){ margin:0; }
.tt-landing{
  margin:0;
  font-family:var(--tt-font-body);
  font-size:var(--tt-body);
  line-height:1.6;
  color:var(--tt-navy);
  background:var(--tt-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip (non hidden) per non creare un contenitore di scroll: cosi' position:sticky dell'header resta agganciato al viewport */
  overflow-x:clip;
}
.tt-landing h1,.tt-landing h2,.tt-landing h3,.tt-landing h4{
  font-family:var(--tt-font-head);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--tt-navy);
}
.tt-landing p{ margin:0; text-wrap:pretty; }
.tt-landing a{ text-decoration:none; }
.tt-landing a:not(.tt-btn){ color:inherit; }
.tt-landing img,.tt-landing svg,.tt-landing video{ display:block; max-width:100%; }
/* A-capo manuali attivi solo da desktop: su tablet/mobile il testo scorre naturale */
@media (max-width:1023px){ .tt-landing .tt-brk{ display:none; } }
.tt-landing ul,.tt-landing ol{ margin:0; padding:0; list-style:none; }
.tt-landing dl,.tt-landing dt,.tt-landing dd{ margin:0; }
.tt-landing button{ font-family:inherit; cursor:pointer; }

/* ---------------------------------------------------------------------
   3. LAYOUT GLOBALE
   --------------------------------------------------------------------- */
.tt-container{
  width:100%;
  max-width:var(--tt-maxw);
  margin-inline:auto;
  padding-inline:var(--tt-gutter);
}
.tt-section{ padding-block:var(--tt-pad-y); }

.tt-section__head{ max-width:720px; margin-bottom:clamp(44px,5vw,64px); }
.tt-section__head--light .tt-section__title{ color:#fff; }
.tt-section__title{ font-size:var(--tt-h2); font-weight:700; }
.tt-section__lead{ margin-top:20px; color:var(--tt-muted); font-size:1.075rem; }
.tt-section__lead--light{ color:rgba(255,255,255,.78); }

.tt-eyebrow{
  display:inline-block;
  font-family:var(--tt-font-head);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tt-blue);
  margin-bottom:14px;
}
.tt-eyebrow--light{ color:var(--tt-blue-soft); }

.tt-claim{
  font-family:var(--tt-font-head);
  font-weight:600;
  font-size:1.25rem;
  color:var(--tt-blue);
  margin-top:8px;
}

/* Icone lineari */
.tt-ico{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.tt-ico--lg{ width:30px; height:30px; }

/* ---------------------------------------------------------------------
   4. BOTTONI
   --------------------------------------------------------------------- */
.tt-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px;
  border-radius:12px;
  font-family:var(--tt-font-head);
  font-weight:600; font-size:1rem; line-height:1;
  border:1.5px solid transparent;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
  white-space:nowrap;
}
.tt-btn--lg{ padding:17px 32px; font-size:1.05rem; }
.tt-btn--primary{ background:var(--tt-blue); color:#fff; box-shadow:var(--tt-shadow-blue); }
.tt-btn--primary:hover{ background:var(--tt-blue-strong); transform:translateY(-2px); }
.tt-btn--ghost{ color:var(--tt-navy); border-color:var(--tt-line); background:var(--tt-surface); }
.tt-btn--ghost:hover{ background:var(--tt-surface-2); transform:translateY(-2px); }
.tt-btn--light{ background:#fff; color:var(--tt-navy); }
.tt-btn--light:hover{ background:var(--tt-surface-2); transform:translateY(-2px); }
/* Bianco con testo blu chiaro (header, hero secondario, CTA) */
.tt-btn--white{ background:#fff; color:var(--tt-blue); border-color:#fff; }
.tt-btn--white:hover{ background:#fff; color:var(--tt-blue-strong); transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,12,30,.18); }
.tt-btn:focus-visible{ outline:3px solid var(--tt-blue-soft); outline-offset:2px; }

/* ---------------------------------------------------------------------
   5. HEADER / NAV
   --------------------------------------------------------------------- */
.tt-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg, rgba(5,20,44,.92), rgba(5,27,57,.88));
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(93,152,253,.16);
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.tt-header.tt-header--scrolled{
  background:linear-gradient(180deg, rgba(4,16,38,.96), rgba(5,27,57,.94));
  border-bottom-color:rgba(50,124,253,.4);
  box-shadow:0 10px 30px rgba(2,12,30,.4);
}
.tt-header__inner{ display:flex; align-items:center; justify-content:space-between; height:96px; }
.tt-header__logo img{ height:46px; width:auto; transform:translateY(-8px); }

.tt-nav{ display:flex; align-items:center; gap:30px; }
.tt-header .tt-nav .tt-nav__link{
  font-weight:500; font-size:.97rem; color:rgba(255,255,255,.86);
  position:relative; transition:color .15s ease;
}
.tt-nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--tt-blue-soft);
  transition:width .2s ease;
}
.tt-header .tt-nav .tt-nav__link:hover{ color:#fff; }
.tt-nav__link:hover::after{ width:100%; }
.tt-nav__cta{ margin-left:6px; }

.tt-burger{
  display:none;
  width:46px; height:46px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  padding:0; position:relative;
}
.tt-burger span{
  position:absolute; left:12px; right:12px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.tt-burger span:nth-child(1){ top:16px; }
.tt-burger span:nth-child(2){ top:22px; }
.tt-burger span:nth-child(3){ top:28px; }
.tt-burger[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.tt-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.tt-burger[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.tt-hero{ padding-block:clamp(48px, 7vw, 96px); position:relative; }
.tt-hero__inner{
  display:grid; grid-template-columns:1.22fr .78fr;
  gap:clamp(32px, 4vw, 64px); align-items:center;
}
.tt-hero__title{ font-size:clamp(2.1rem, 4.4vw, 3.15rem); font-weight:700; margin-bottom:22px; line-height:1.12; }
.tt-hero__lead{ font-size:1.16rem; color:var(--tt-muted); max-width:540px; }
.tt-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; margin-bottom:0; }
.tt-hero__copy .tt-hero__trust{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;
  max-width:560px;
}
.tt-hero__trust li{
  display:flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  background:rgba(50,124,253,.10);
  border:1px solid rgba(50,124,253,.20);
  color:var(--tt-navy); font-size:.85rem; font-weight:500;
  white-space:nowrap;
}
.tt-hero__trust li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--tt-blue); flex:none;
}

.tt-hero__visual{ position:relative; display:flex; justify-content:center; }
.tt-hero__glow{
  position:absolute; inset:auto; width:78%; aspect-ratio:1; z-index:0;
  background:radial-gradient(circle, rgba(93,152,253,.40), rgba(93,152,253,0) 68%);
  filter:blur(6px);
}

/* ---------------------------------------------------------------------
   7. DEVICE (cornice telefono in CSS + screenshot ad alta risoluzione)
   --------------------------------------------------------------------- */
.tt-device{
  position:relative; width:clamp(250px,20vw,315px); flex:none;
}
.tt-device__hardware{
  position:relative; width:100%;
  padding:38px 11px 26px;
  border-radius:36px;
  background:linear-gradient(150deg, #05070B, #131c2e);
  box-shadow:0 28px 70px rgba(2,12,30,.45), inset 0 0 0 1px rgba(255,255,255,.08);
}
.tt-device__screen{
  position:relative; width:100%; aspect-ratio:9 / 16;
  border-radius:22px; overflow:hidden; background:#F5F8FF;
}
.tt-device__shot{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.tt-device__speaker{
  position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:60px; height:6px; border-radius:999px; background:rgba(255,255,255,.18); z-index:2;
}
.tt-device__camera{
  position:absolute; top:13px; left:calc(50% - 50px);
  width:9px; height:9px; border-radius:50%; background:#0b1220;
  box-shadow:inset 0 0 0 2px rgba(93,152,253,.28); z-index:2;
}
.tt-device--hero{ width:clamp(250px,20vw,315px); }
.tt-device--carousel{ width:clamp(230px,18vw,295px); }

/* ---------------------------------------------------------------------
   8. PROBLEMA (sezione scura con immagine NFC)
   --------------------------------------------------------------------- */
.tt-problem{
  position:relative; overflow:hidden;
  background:
    linear-gradient(105deg, var(--tt-navy-deep) 26%, rgba(5,27,57,.72) 52%, rgba(7,39,84,.30) 100%),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_24-3.png");
  background-size:cover; background-position:center;
  color:#fff;
}
.tt-problem .tt-container{ position:relative; z-index:1; }
.tt-problem__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.tt-problem__main .tt-section__title{ color:#fff; margin-block:14px 22px; }
.tt-problem__main p{ color:rgba(255,255,255,.78); }
.tt-problem__main p + p{ margin-top:18px; }
.tt-problem__list{ display:grid; gap:14px; }
.tt-problem__list li{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--tt-radius); padding:18px 20px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-weight:500;
  transition:background-color .2s ease, transform .2s ease;
}
.tt-problem__list li:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
.tt-problem__list .tt-ico{ flex:none; color:var(--tt-blue-soft); margin-top:1px; }

/* ---------------------------------------------------------------------
   9. SOLUZIONE
   --------------------------------------------------------------------- */
.tt-solution__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; }
.tt-solution__copy p + p{ margin-top:16px; }
.tt-solution__copy .tt-section__title{ margin-block:14px 22px; font-size:clamp(1.4rem,2.4vw,1.85rem); }
.tt-solution__copy p{ color:var(--tt-muted); }
/* Claim "Smart. Flessibile. Connesso." con parole colorate */
.tt-solution__copy .tt-claim{ color:var(--tt-blue); }
.tt-claim__w{ font-family:var(--tt-font-head); font-weight:600; }
.tt-claim__w--1{ color:var(--tt-blue-soft); }
.tt-claim__w--2{ color:var(--tt-blue); }
.tt-claim__w--3{ color:var(--tt-blue-strong); }

/* Immagine prodotto libera su stage morbido grande, niente card */
.tt-solution__media{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.tt-solution__stage{
  position:relative; width:100%; max-width:640px;
  aspect-ratio:1/1;
  display:grid; place-items:center;
}
.tt-solution__halo{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(50,124,253,.34), rgba(93,152,253,.14) 42%, rgba(93,152,253,0) 70%),
    conic-gradient(from 210deg at 50% 50%, rgba(93,152,253,.10), rgba(50,124,253,.16), rgba(93,152,253,.10));
  filter:blur(6px);
}
.tt-solution__product{
  position:relative; z-index:1;
  width:100%; height:auto;
  filter:drop-shadow(0 34px 50px rgba(7,39,84,.30));
  transition:transform .4s ease;
}
.tt-solution__media:hover .tt-solution__product{ transform:translateY(-6px) scale(1.02); }
/* Variante etichetta adesiva: card grande, ombra azzurra solo sotto e sul lato */
.tt-solution__stage--card{
  aspect-ratio:auto;
  max-width:760px;
  transform:translateY(-130px);
}
.tt-solution__stage--card .tt-solution__product{
  border-radius:20px;
  width:min(128%, 760px);
  max-width:none;
  filter:
    drop-shadow(18px 28px 18px rgba(50,124,253,.22))
    drop-shadow(0 34px 14px rgba(2,90,242,.18))
    drop-shadow(0 8px 6px rgba(7,39,84,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.tt-solution__stage--card .tt-solution__halo{
  display:none;
}
.tt-solution__caption{
  font-size:.86rem; color:var(--tt-muted); text-align:center; max-width:360px;
}
.tt-solution__label{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  align-self:center;
  margin-left:0;
  /* Chip alla quota del claim, con aria sotto l'etichetta. */
  margin-top:clamp(-292px, calc(-7vw - 160px), -246px);
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(50,124,253,.18);
  box-shadow:none;
  color:var(--tt-muted);
  font-size:.92rem;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tt-solution__label strong{
  color:var(--tt-blue);
  font-family:var(--tt-font-head);
  font-weight:700;
  white-space:nowrap;
}
/* Chip accento brand, fluttuanti sullo stage */
.tt-chip{
  position:absolute; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--tt-font-head); font-weight:600; font-size:.82rem;
  padding:8px 14px; border-radius:999px;
  background:#fff; color:var(--tt-navy);
  box-shadow:0 8px 20px rgba(7,39,84,.12);
}
.tt-chip--thin{ top:12%; left:2%; }
.tt-chip--temp{ bottom:14%; right:2%; background:var(--tt-blue); color:#fff; box-shadow:var(--tt-shadow-blue); }
.tt-chip--temp svg{ stroke:#fff; }

/* ---------------------------------------------------------------------
   10. COME FUNZIONA (steps)
   --------------------------------------------------------------------- */
.tt-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:step; }
.tt-step{
  position:relative;
  background:var(--tt-surface); border:1px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:26px 22px 24px;
  box-shadow:var(--tt-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tt-step:hover{ transform:translateY(-4px); box-shadow:var(--tt-shadow-hover); }
.tt-step__ico-wrap{
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background:var(--tt-surface-2); color:var(--tt-blue); margin-bottom:16px;
}
.tt-step .tt-ico{ color:var(--tt-blue); margin:0; }
.tt-step__title{ font-size:1.06rem; font-weight:600; margin-bottom:8px; }
.tt-step p{ color:var(--tt-muted); font-size:.95rem; }

.tt-how .tt-how__note{
  display:flex; align-items:center; gap:12px; justify-content:center;
  margin-top:clamp(56px,6vw,80px); padding:18px 26px;
  background:var(--tt-surface-2); border:1px solid rgba(50,124,253,.16); border-radius:999px;
  color:var(--tt-navy); font-weight:500; width:fit-content; margin-inline:auto;
  max-width:100%;
}
.tt-how__note .tt-ico{ color:var(--tt-blue); flex:none; }

/* ---------------------------------------------------------------------
   11. APP / FUNZIONALITA
   --------------------------------------------------------------------- */
/* App: sezione scura; banda telefoni con immagine glows, card chiare sotto */
/* App: un solo background per tutta la sezione (telefoni + card) */
.tt-app{
  padding-block:0; overflow:hidden; position:relative;
  background:
    linear-gradient(180deg, rgba(4,16,38,.82), rgba(7,39,84,.82)),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_25-5.png");
  background-size:cover; background-position:center;
}
/* Card piu' vicine ai telefoni: poco spazio sopra, respiro sotto */
.tt-app > .tt-container{ padding-top:clamp(10px,2vw,28px); padding-bottom:clamp(56px,7vw,96px); }

/* Banda telefoni: nessun background proprio (eredita quello della sezione) */
.tt-scroll-showcase{
  --tt-title-y:0px;
  position:relative; z-index:1;
  padding-top:clamp(56px,7vw,96px);
  padding-bottom:clamp(8px,1.5vw,20px);
  background:none;
}
.tt-scroll-title .tt-eyebrow{ color:var(--tt-blue-soft); }
.tt-scroll-title{
  text-align:center; max-width:680px; margin:0 auto clamp(14px,2.5vw,28px);
  transform:translateY(var(--tt-title-y));
  will-change:transform;
}
.tt-scroll-title .tt-section__title{ color:#fff; }
.tt-scroll-title .tt-section__lead{ margin-inline:auto; color:rgba(255,255,255,.82); }

/* App: carosello rotante (centro grande e nitido, niente scale che sgrana) */
.tt-carousel{
  position:relative; min-height:clamp(520px,42vw,600px);
}
.tt-carousel::before{
  content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:52%; aspect-ratio:1/.92; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(50,124,253,.5), rgba(50,124,253,0) 72%);
  filter:blur(22px);
}
/* Coverflow continuo: la posizione/scala e' guidata da requestAnimationFrame in JS */
.tt-carousel__item{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.tt-carousel__item .tt-device{ width:clamp(238px,21vw,292px); }
/* Fallback statico se il JS non gira o reduced-motion: 3 telefoni affiancati */
.tt-carousel--static .tt-carousel__item:nth-child(1){ transform:translate(-50%,-50%); z-index:4; }
.tt-carousel--static .tt-carousel__item:nth-child(2){ transform:translate(calc(-50% + 232px),-50%) scale(.9); z-index:3; opacity:.9; }
.tt-carousel--static .tt-carousel__item:nth-child(5){ transform:translate(calc(-50% - 232px),-50%) scale(.9); z-index:3; opacity:.9; }
.tt-carousel--static .tt-carousel__item:nth-child(3),
.tt-carousel--static .tt-carousel__item:nth-child(4){ opacity:0; }

.tt-features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.tt-feature{
  background:var(--tt-surface); border:1px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:24px;
  box-shadow:var(--tt-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.tt-feature:hover{ transform:translateY(-4px); box-shadow:var(--tt-shadow-hover); }
.tt-feature__ico{
  display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:12px;
  background:var(--tt-surface-2); color:var(--tt-blue); margin-bottom:16px;
}
.tt-feature h3{ font-size:1.04rem; font-weight:600; margin-bottom:8px; }
.tt-feature p{ color:var(--tt-muted); font-size:.94rem; }

/* Card funzionalita' chiare su sezione scura, niente icone */
.tt-gcard{
  position:relative; overflow:hidden;
  border-radius:var(--tt-radius-lg); padding:26px 26px 28px;
  min-height:178px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 40px rgba(2,12,30,.4);
  transition:transform .25s ease, box-shadow .25s ease;
  color:var(--tt-navy);
  background:linear-gradient(150deg, #fff, #E6EEFF);
}
.tt-gcard--a{ background:linear-gradient(150deg, #FFFFFF, #DCE8FF); }
.tt-gcard--b{ background:linear-gradient(150deg, #F4F8FF, #E6EEFF); }
.tt-gcard--c{ background:linear-gradient(150deg, #EEF4FF, #D8E6FF); }
.tt-gcard:hover{ transform:translateY(-6px); box-shadow:0 28px 58px rgba(2,12,30,.55); }
.tt-gcard__badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; align-self:flex-start;
  background:rgba(50,124,253,.12); border:1px solid rgba(50,124,253,.22);
  padding:6px 13px; border-radius:999px;
  font-family:var(--tt-font-head); font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tt-navy);
}
.tt-gcard__badge i{ width:8px; height:8px; border-radius:50%; background:var(--tt-blue); flex:none; }
.tt-gcard--b .tt-gcard__badge i{ background:var(--tt-blue-strong); }
.tt-gcard--c .tt-gcard__badge i{ background:var(--tt-blue-soft); }
.tt-gcard h3{ font-size:1.1rem; font-weight:600; color:var(--tt-navy); margin-bottom:8px; }
.tt-gcard p{ color:#41566f; font-size:.95rem; }

/* Carosello orizzontale delle funzionalita' (auto-scroll + frecce) */
.tt-fcar{ display:flex; align-items:center; gap:clamp(8px,1.4vw,16px); }
.tt-fcar__viewport{
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Dissolvenza morbida ai bordi: le card entrano ed escono senza taglio netto */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.tt-fcar__viewport::-webkit-scrollbar{ display:none; }
.tt-fcar__viewport:focus-visible{ outline:3px solid var(--tt-blue-soft); outline-offset:4px; border-radius:var(--tt-radius-lg); }
.tt-fcar__track{ display:flex; gap:20px; padding:6px 0; width:max-content; }
/* Tre card piene visibili; lo scorrimento e' un nastro continuo */
.tt-fcar__track > .tt-gcard{
  flex:0 0 auto; width:clamp(248px,27vw,310px); min-height:188px;
}
.tt-fcar__nav{
  flex:none; display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:#fff; color:var(--tt-navy);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 28px rgba(2,12,30,.35);
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
}
.tt-fcar__nav:hover{ background:var(--tt-blue); color:#fff; transform:translateY(-2px); }
.tt-fcar__nav:focus-visible{ outline:3px solid var(--tt-blue-soft); outline-offset:3px; }
.tt-fcar__nav svg{ stroke:currentColor; }

/* ---------------------------------------------------------------------
   12. TECNOLOGIA (sezione scura)
   --------------------------------------------------------------------- */
.tt-tech{ background:radial-gradient(90% 70% at 90% 0%, rgba(50,124,253,.10), transparent 55%), linear-gradient(180deg, #fff, #EAF1FF); }
/* Tecnologia: testo a piena larghezza (occupa piu' spazio orizzontale) */
.tt-tech .tt-section__head{ max-width:1000px; }
.tt-tech .tt-section__lead{ max-width:880px; }
.tt-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tt-pillar{
  background:var(--tt-surface); border:1px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:26px 24px;
  box-shadow:var(--tt-shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tt-pillar:hover{ transform:translateY(-4px); box-shadow:var(--tt-shadow-hover); border-color:rgba(50,124,253,.4); }
.tt-pillar__ico{
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, rgba(93,152,253,.18), rgba(50,124,253,.12)); color:var(--tt-blue); margin-bottom:18px;
}
.tt-pillar h3{ color:var(--tt-navy); font-size:1.08rem; font-weight:600; margin-bottom:8px; }
.tt-pillar p{ color:var(--tt-muted); font-size:.95rem; }

/* ---------------------------------------------------------------------
   13. SPECIFICHE
   --------------------------------------------------------------------- */
.tt-specs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tt-specgroup{
  position:relative; overflow:hidden;
  background:var(--tt-surface); border:1px solid var(--tt-line);
  border-radius:var(--tt-radius-lg); padding:26px;
  box-shadow:var(--tt-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tt-specgroup::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--tt-blue-soft), var(--tt-blue-strong));
}
.tt-specgroup:hover{ transform:translateY(-5px); box-shadow:var(--tt-shadow-hover); border-color:rgba(50,124,253,.35); }
.tt-specgroup__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.tt-specgroup__ico{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg, rgba(93,152,253,.18), rgba(50,124,253,.12));
  color:var(--tt-blue);
}
.tt-specgroup__head h3{ font-size:1.02rem; font-weight:600; }
.tt-specgroup__hero{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:16px; border-radius:14px;
  background:linear-gradient(135deg, #0b3d83, var(--tt-navy));
  color:#fff;
}
.tt-specgroup__hero strong{ font-family:var(--tt-font-head); font-weight:700; font-size:1.55rem; line-height:1; }
.tt-specgroup__hero span{ color:rgba(255,255,255,.72); font-size:.85rem; }
.tt-specgroup__list{ display:grid; gap:0; }
.tt-specgroup__list li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 0; border-top:1px solid var(--tt-line); font-size:.9rem;
}
.tt-specgroup__list li:first-child{ border-top:0; }
.tt-specgroup__list span{ color:var(--tt-muted); }
.tt-specgroup__list b{ font-family:var(--tt-font-head); font-weight:600; color:var(--tt-navy); text-align:right; }

/* ---------------------------------------------------------------------
   14. SETTORI
   --------------------------------------------------------------------- */
/* Settori: split editoriale + lista a righe (niente card) */
.tt-sectors__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.tt-sectors__intro{ position:sticky; top:120px; }
/* Lista settori leggermente piu' in basso per bilanciare la colonna sinistra */
.tt-sectors__list{ margin-top:clamp(6px,2.4vw,30px); }
.tt-sectors__intro .tt-section__title{ margin-block:14px 22px; }
.tt-sectors__intro p{ color:var(--tt-muted); }
.tt-sectors__list{ display:grid; }
.tt-sectors__list li{
  display:flex; gap:18px; align-items:flex-start;
  padding:22px 6px; border-top:1px solid var(--tt-line);
  transition:padding-left .2s ease;
}
.tt-sectors__list li:first-child{ border-top:0; }
.tt-sectors__list li:hover{ padding-left:14px; }
.tt-sectors__ico{
  flex:none; display:inline-grid; place-items:center;
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg, rgba(93,152,253,.18), rgba(50,124,253,.10));
  color:var(--tt-blue);
  transition:background-color .2s ease, color .2s ease;
}
.tt-sectors__list li:hover .tt-sectors__ico{ background:linear-gradient(135deg, var(--tt-blue), var(--tt-blue-strong)); color:#fff; }
.tt-sectors__list h3{ font-size:1.14rem; font-weight:600; margin-bottom:5px; }
.tt-sectors__list p{ color:var(--tt-muted); font-size:.96rem; }

/* ---------------------------------------------------------------------
   15. VANTAGGI
   --------------------------------------------------------------------- */
.tt-adv__head{ max-width:720px; margin-bottom:clamp(40px,5vw,56px); }
.tt-adv__head p{ margin-top:16px; color:var(--tt-muted); }
.tt-adv__head .tt-section__title{ margin-top:14px; }
/* Vantaggi come lista (niente card) */
.tt-adv__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(36px,5vw,72px); }
.tt-adv__list li{
  display:flex; gap:14px; align-items:center;
  padding:18px 4px; border-bottom:1px solid var(--tt-line);
  font-weight:500; font-size:1.02rem;
}
.tt-check{
  flex:none; width:26px; height:26px; margin-top:0;
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  background:linear-gradient(135deg, var(--tt-blue), var(--tt-blue-strong)); border-radius:8px; padding:4px;
  box-shadow:0 6px 14px rgba(50,124,253,.30);
}

/* ---------------------------------------------------------------------
   16. VIDEO
   --------------------------------------------------------------------- */
.tt-video__inner{
  display:grid; grid-template-columns:1.2fr auto; gap:clamp(36px,5vw,72px); align-items:center;
  max-width:1140px; margin-inline:auto;
  background:
    linear-gradient(135deg, rgba(5,27,57,.88), rgba(7,39,84,.82)),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_25-4.png");
  background-size:cover; background-position:center;
  border-radius:var(--tt-radius-lg);
  padding:clamp(32px,5vw,60px);
}
.tt-video__inner .tt-section__title{ color:#fff; }
.tt-video__copy p{ margin-top:16px; color:rgba(255,255,255,.80); }
.tt-video__note{ font-size:.9rem; color:rgba(255,255,255,.58); }
.tt-video__player{ display:flex; justify-content:center; }
.tt-video__player video{
  width:300px; max-width:100%; aspect-ratio:9/16;
  border-radius:var(--tt-radius-lg); background:#000;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------------
   17. CTA FINALE
   --------------------------------------------------------------------- */
.tt-cta{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(7,39,84,.86), rgba(3,90,242,.78)),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_24-1.png");
  background-size:cover; background-position:center;
  color:#fff; text-align:center;
}
.tt-cta__inner{ max-width:960px; display:flex; flex-direction:column; align-items:center; }
.tt-cta__mark{ height:42px; width:auto; margin-bottom:22px; opacity:.96; }
.tt-cta .tt-cta__title{
  color:#fff; font-size:clamp(1.5rem,3.3vw,2.3rem); font-weight:700;
  margin-bottom:30px; white-space:nowrap;
  text-shadow:0 2px 18px rgba(2,12,30,.5), 0 1px 2px rgba(2,12,30,.35);
}
.tt-cta__lead{ color:rgba(255,255,255,.82); font-size:1.1rem; max-width:680px; }
.tt-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

/* ---------------------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------------------- */
.tt-footer{ background:var(--tt-navy-deep); color:rgba(255,255,255,.72); padding-top:64px; }
.tt-footer__inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:40px; padding-bottom:40px; }
.tt-footer__brand img{ height:118px; width:auto; margin-bottom:18px; }
.tt-footer__brand p{ max-width:300px; font-size:.95rem; }
.tt-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tt-footer__col h4{ color:#fff; font-size:.95rem; font-weight:600; margin-bottom:14px; }
.tt-footer__col a{ display:block; font-size:.92rem; padding:5px 0; color:rgba(255,255,255,.72); transition:color .15s ease; }
.tt-footer__col a:hover{ color:var(--tt-blue-soft); }
.tt-footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
  padding-block:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem; color:rgba(255,255,255,.55);
}
.tt-footer__legal{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.tt-footer__legal a{ color:rgba(255,255,255,.66); transition:color .15s ease; }
.tt-footer__legal a:hover{ color:var(--tt-blue-soft); }

/* ---------------------------------------------------------------------
   18b. SEZIONE MOCKUP SCURA (SectionWithMockup, resa vanilla)
   --------------------------------------------------------------------- */
.tt-mockup-section{
  position:relative; overflow:hidden;
  background:
    linear-gradient(120deg, rgba(4,18,42,.92) 30%, rgba(7,39,84,.78) 70%, rgba(11,61,131,.5)),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_24-1.png");
  background-size:cover; background-position:center;
  color:#fff;
}
.tt-mockup-glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(50,124,253,.40), rgba(50,124,253,0) 72%);
  filter:blur(10px); z-index:0; pointer-events:none;
}
.tt-mockup-glow{ top:-160px; right:-120px; }
.tt-mockup-glow--2{ top:auto; bottom:-200px; left:-160px; right:auto;
  background:radial-gradient(closest-side, rgba(93,152,253,.30), rgba(93,152,253,0) 72%); }
.tt-mockup-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.tt-mockup-copy .tt-section__title{ color:#fff; }
.tt-mockup-copy p{ margin-top:18px; color:rgba(255,255,255,.80); }
/* Una sola immagine, a sinistra */
.tt-mockup-visual{ position:relative; display:flex; justify-content:center; align-items:center; }
.tt-mockup-single{ width:clamp(244px,21vw,300px); transform:rotate(-3deg); }
.tt-mockup-single .tt-device__hardware{ box-shadow:0 36px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.tt-mockup-visual::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:78%; aspect-ratio:1; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(50,124,253,.4), rgba(50,124,253,0) 70%); filter:blur(20px);
}

/* ---------------------------------------------------------------------
   18c. PIU' AZZURRO (sfondi, glow, CTA, onde NFC)
   --------------------------------------------------------------------- */
/* Sfondi di sezione alternati e piu' decisi */
.tt-hero{ background:radial-gradient(110% 70% at 88% 0%, rgba(50,124,253,.12), transparent 60%), var(--tt-bg); }
.tt-solution{ background:radial-gradient(90% 70% at 88% 12%, rgba(50,124,253,.14), transparent 60%), linear-gradient(180deg, #EEF4FF, var(--tt-bg)); }
.tt-how{ background:linear-gradient(180deg, #E2ECFF, var(--tt-bg)); }
.tt-how .tt-section__head{ max-width:960px; }
.tt-specs{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(5,20,44,.9), rgba(7,39,84,.84)),
    url("https://www.hscholding.com/wp-content/uploads/2026/06/ChatGPT-Image-4-giu-2026-15_25_24-2.png");
  background-size:cover; background-position:center;
}
.tt-specs .tt-section__title{ color:#fff; }
.tt-sectors{ background:radial-gradient(80% 60% at 15% 0%, rgba(50,124,253,.10), transparent 55%), linear-gradient(180deg, var(--tt-bg), #E6EEFF); }

/* CTA primaria piu' luminosa */
.tt-btn--primary{
  background:linear-gradient(135deg, var(--tt-blue-soft), var(--tt-blue) 42%, var(--tt-blue-strong));
  box-shadow:0 12px 28px rgba(50,124,253,.34);
}
.tt-btn--primary:hover{ background:linear-gradient(135deg, var(--tt-blue), var(--tt-blue-strong)); box-shadow:0 16px 34px rgba(50,124,253,.45); }

/* Hover card piu' percepibili: bordo azzurro + sollevamento */
.tt-feature:hover,
.tt-sector:hover,
.tt-step:hover,
.tt-problem__list li:hover,
.tt-adv__list li:hover{ border-color:rgba(50,124,253,.40); }
.tt-feature:hover .tt-feature__ico,
.tt-sector:hover .tt-sector__ico,
.tt-step:hover .tt-step__ico-wrap{ background:linear-gradient(135deg, var(--tt-blue), var(--tt-blue-strong)); color:#fff; }

/* ---------------------------------------------------------------------
   18d. DETTAGLI DI BRAND NEI BACKGROUND (monogramma TP + trama esagonale)
   Inseriti come accenti morbidi: dissolvenza radiale + mix-blend per fondersi
   nel background di sezione, sotto i contenuti.
   --------------------------------------------------------------------- */
/* Dettagli di brand SPARSI (monogramma TP + trama esagonale): pochi, di misure
   diverse, su fondo chiaro e scuro, alcuni a cavallo del bordo tra due sezioni.
   Resi come maschera tinta: il colore si adatta al fondo, sopra il background e
   sotto i contenuti (z-index:-1 + isolation sul contenitore). */
.tt-hero, .tt-how, .tt-sectors, .tt-adv{ position:relative; isolation:isolate; }
.tt-mark{
  position:absolute; z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
.tt-mark--mono{ background-image:url("https://www.hscholding.com/wp-content/uploads/2026/06/Tempy-Tag13-1.png"); }
.tt-mark--hex{  background-image:url("https://www.hscholding.com/wp-content/uploads/2026/06/Tempy-Tag14-1.png"); }

/* 1. Monogramma nella Hero, dietro al titolo, schiarito */
.tt-mark--hero{ width:390px; height:390px; top:5%; left:80px; opacity:.20; }
/* 2. Esagoni in Come funziona, dietro l'ultima card a destra */
.tt-mark--how{ width:360px; height:360px; top:44%; right:-60px; opacity:.40; }
/* 3. Monogramma in Settori, piu' grande e piu' vicino alle voci dell'elenco */
.tt-mark--3{ width:330px; height:330px; top:24%; right:13%; opacity:.4; }
/* 4. Esagoni a cavallo tra Dati chiari (scuro) e Vantaggi (chiaro): piu' grandi
   e ben visibili su entrambe le sezioni */
.tt-mark--4{ width:400px; height:400px; top:-185px; left:5%; opacity:.5; }

/* ---------------------------------------------------------------------
   19. ANIMAZIONI (reveal on scroll)
   --------------------------------------------------------------------- */
.tt-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.tt-reveal.tt-is-visible{ opacity:1; transform:none; }
/* Transizione morbida per i mockup della sezione scura */

/* ---------------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1023px){
  .tt-features{ grid-template-columns:repeat(2,1fr); }
  .tt-pillars{ grid-template-columns:repeat(2,1fr); }
  .tt-steps{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .tt-specs__grid{ grid-template-columns:repeat(2,1fr); }
  .tt-sectors__inner{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px); }
  .tt-sectors__intro{ position:static; }
  .tt-hero__inner{ grid-template-columns:1fr; text-align:center; }
  .tt-hero__copy{ order:1; }
  .tt-hero__visual{ order:0; margin-bottom:8px; display:flex; justify-content:center; }
  .tt-device--hero{ width:clamp(245px,34vw,300px); }
  .tt-hero__lead{ margin-inline:auto; }
  .tt-hero__actions,.tt-hero__trust{ justify-content:center; }
  .tt-hero__copy .tt-hero__trust{ margin-inline:auto; }
  .tt-problem__grid,
  .tt-solution__inner,
  .tt-mockup-grid,
  .tt-video__inner{ grid-template-columns:1fr; }
  .tt-problem__list{ max-width:560px; }
  .tt-video__inner{ justify-items:center; text-align:center; }
  .tt-solution__media{ order:1; }
  .tt-solution__stage--card{ max-width:min(760px, 88vw); transform:translateY(-78px); }
  .tt-solution__stage--card .tt-solution__product{ width:116%; }
  .tt-footer__inner{ grid-template-columns:1fr; }
  /* Sezione mockup scura: testo sopra, mockup sotto */
  .tt-mockup-copy{ text-align:center; }
  .tt-mockup-copy .tt-section__lead{ margin-inline:auto; }
  .tt-mockup-visual{ margin-top:18px; order:1; }
  .tt-mockup-single{ width:clamp(230px,40vw,290px); }
}

@media (max-width:760px){
  /* Nav mobile */
  .tt-header{
    position:relative;
    top:auto;
  }
  .tt-nav{
    position:absolute; inset:96px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:6px;
    background:linear-gradient(180deg, #051b39, #072754);
    padding:18px var(--tt-gutter) 26px;
    border-bottom:1px solid rgba(93,152,253,.2);
    box-shadow:0 24px 50px rgba(2,12,30,.4);
    transform:translateY(-130%);
    transition:transform .3s ease;
    z-index:40;
  }
  .tt-nav.tt-nav--open{ transform:translateY(0); }
  .tt-nav__link{ padding:12px 4px; border-bottom:1px solid rgba(255,255,255,.1); }
  .tt-nav__link::after{ display:none; }
  .tt-nav__cta{ margin-top:10px; justify-content:center; }
  .tt-landing section[id]{ scroll-margin-top:16px; }
  .tt-burger{
    display:block;
    width:38px !important;
    height:38px !important;
    min-width:38px;
    flex:0 0 38px;
    border-radius:9px !important;
    background:rgba(255,255,255,.10) !important;
    border-color:rgba(93,152,253,.72) !important;
    box-shadow:none !important;
    color:#fff !important;
  }
  .tt-burger:hover,
  .tt-burger:focus{
    background:rgba(50,124,253,.22) !important;
    border-color:var(--tt-blue-soft) !important;
    color:#fff !important;
  }
  .tt-burger[aria-expanded="true"]{
    background:var(--tt-blue) !important;
    border-color:var(--tt-blue-soft) !important;
    color:#fff !important;
  }
  .tt-burger span{
    left:10px;
    right:10px;
    height:1.5px;
    background:#fff !important;
  }
  .tt-burger span:nth-child(1){ top:13px; }
  .tt-burger span:nth-child(2){ top:18px; }
  .tt-burger span:nth-child(3){ top:23px; }
  .tt-burger[aria-expanded="true"] span:nth-child(1),
  .tt-burger[aria-expanded="true"] span:nth-child(3){ top:18px; }
  .tt-sectors__intro{
    position:static;
    top:auto;
  }

  .tt-features,
  .tt-pillars,
  .tt-steps,
  .tt-adv__list,
  .tt-specs__grid{ grid-template-columns:1fr; }
  /* Carosello funzionalita': su mobile niente frecce, si scorre con swipe */
  .tt-fcar__nav{ display:none; }
  .tt-fcar__track > .tt-gcard{ width:min(78vw,300px); }
  /* CTA: su mobile il titolo puo' andare a capo per non sforare */
  .tt-cta .tt-cta__title{
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
  }
  /* Dettagli brand piu' piccoli su mobile */
  .tt-mark--hero{ width:240px; height:240px; left:-30px; }
  .tt-mark--how{ width:230px; height:230px; }
  .tt-mark--3{ width:200px; height:200px; }
  .tt-mark--4{ width:190px; height:190px; top:-70px; }
  .tt-solution{ padding-block:18px 22px; }
  .tt-solution__inner{ gap:0; }
  .tt-solution__media{
    width:100%;
    gap:0;
    /* Spazio tra il copy sopra e l'immagine (1o valore). Era -54px per la
       vecchia immagine non ritagliata; ora che il trasparente sopra e' tagliato
       serve un margine positivo. Aumenta i 24px per piu' spazio. */
    margin-block:24px 10px;
    align-items:center;
    overflow:visible;
  }
  .tt-solution__stage--card{
    width:100%;
    max-width:100%;
    transform:none;
    display:flex;
    justify-content:flex-start;
  }
  .tt-solution__stage--card .tt-solution__product{
    /* Il PNG (600x600) ha la card al centro con molto trasparente intorno:
       la card occupa ~61% in larghezza (~19% vuoto a sx, ~20% a dx) e ~40%
       in altezza (~31% sopra, ~30% sotto). Per allinearla a sinistra come il
       testo e ingrandirla, scelgo la larghezza VISIBILE della card (--cardw),
       ricavo la dimensione dell'immagine (--e) e annullo il bordo trasparente
       con margini negativi. Aumenta il cap 420px per una card piu' grande. */
    --cardw: min(calc(100vw - 2 * var(--tt-gutter)), 420px);
    --e: calc(var(--cardw) / 0.607);
    width: var(--e);
    max-width: none;
    left: auto;
    translate: 0;
    transform: none;
    margin-left:   calc(var(--e) * -0.190);
    margin-right:  calc(var(--e) * -0.203);
    margin-top:    calc(var(--e) * -0.307);
    margin-bottom: calc(var(--e) * -0.297);
  }
  .tt-solution__media:hover .tt-solution__product{ transform:none; }
  .tt-solution__label{
    flex-wrap:wrap;
    justify-content:flex-start;
    align-self:flex-start;
    margin-left:0;
    /* Un po' di spazio tra immagine e chip. Aumenta i 12px per piu' spazio. */
    margin-top:12px;
  }

  .tt-phone--up{ transform:none; }
  .tt-chip--thin{ left:0; }
  .tt-chip--temp{ right:0; }
  .tt-cta__actions .tt-btn,
  .tt-hero__actions .tt-btn{ width:100%; justify-content:center; }
  .tt-footer__cols{ grid-template-columns:repeat(2,1fr); }
  .tt-footer__bottom{ justify-content:flex-start; }
  /* Carosello piu' raccolto su mobile */
  .tt-device--hero{ width:min(72vw,285px); }
  .tt-carousel{ min-height:min(150vw,540px); }
  .tt-carousel__item .tt-device{ width:min(62vw,262px); }
  /* Mockup scuro piu' contenuto su mobile */
  .tt-mockup-secondary{ width:148px; transform:translate(calc(-50% + 58px), calc(-50% - 30px)) rotate(4deg); }
  .tt-mockup-main{ width:166px; transform:translate(calc(-50% - 46px), calc(-50% + 30px)) rotate(-4deg); }
  .tt-mockup-visual{ min-height:380px; }
}

@media (max-width:360px){
  .tt-section__title{
    font-size:clamp(1.9rem, 9.5vw, 2.35rem);
    overflow-wrap:anywhere;
  }
}

/* ---------------------------------------------------------------------
   21. ACCESSIBILITA / MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tt-landing *{ animation:none !important; transition:none !important; }
  .tt-reveal{ opacity:1; transform:none; }
  .tt-scroll-title{ transform:none !important; }
}
.tt-landing :focus-visible{ outline:3px solid var(--tt-blue-soft); outline-offset:2px; border-radius:4px; }


/* ---------------------------------------------------------------------
   22. HARDENING ANTI-TEMA (WordPress/Elementor)
   Forza colori/dimensioni che il tema del sito tende a sovrascrivere.
   --------------------------------------------------------------------- */
/* Testo dei bottoni sempre del colore corretto (il tema forzava il verde) */
.tt-landing a.tt-btn--primary,
.tt-landing a.tt-btn--primary:link,
.tt-landing a.tt-btn--primary:visited,
.tt-landing a.tt-btn--primary:hover,
.tt-landing a.tt-btn--primary:focus{ color:#fff !important; }
.tt-landing a.tt-btn--white,
.tt-landing a.tt-btn--white:link,
.tt-landing a.tt-btn--white:visited{ color:var(--tt-blue) !important; }
.tt-landing a.tt-btn--white:hover,
.tt-landing a.tt-btn--white:focus{ color:var(--tt-blue-strong) !important; }
.tt-landing a.tt-btn--light,
.tt-landing a.tt-btn--light:visited{ color:var(--tt-navy) !important; }

/* Logo header piu' grande e un po' piu' in alto (l'immagine ha ~24% di padding sopra/sotto) */
.tt-landing .tt-header__logo img{ height:84px !important; width:auto !important; transform:translateY(-7px) !important; }
/* Logo CTA: presenza giusta, non gigante e non minuscolo */
.tt-landing .tt-cta__mark{ height:92px !important; width:auto !important; }

/* L'esagono "a cavallo" deve poter uscire dalla sezione e vedersi anche sul fondo
   scuro sopra: alcuni temi mettono overflow:hidden sulle sezioni e lo tagliavano. */
.tt-landing .tt-adv{ overflow:visible !important; }

/* Voci del menu e bottone leggermente piu' in basso (logo invariato).
   Solo da desktop: su mobile il .tt-nav usa transform per l'apertura del menu. */
@media (min-width:761px){
  .tt-landing .tt-header .tt-nav{ transform:translateY(6px) !important; }
}

/* Frecce del carosello funzionalita': cerchio bianco + freccia navy, blindato dal tema */
.tt-landing .tt-fcar__nav.tt-fcar__nav{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:50px !important; height:50px !important;
  min-width:50px !important; max-width:50px !important; min-height:50px !important;
  padding:0 !important; flex:0 0 auto !important;
  background:#fff !important; color:var(--tt-navy) !important;
  border:1px solid rgba(7,39,84,.14) !important; border-radius:50% !important;
  opacity:1 !important; visibility:visible !important;
  box-shadow:0 12px 26px rgba(2,12,30,.22) !important;
}
.tt-landing .tt-fcar__nav.tt-fcar__nav:hover{ background:var(--tt-blue) !important; color:#fff !important; }
.tt-landing .tt-fcar__nav svg{ width:22px !important; height:22px !important; display:block !important; opacity:1 !important; visibility:visible !important; fill:none !important; }
.tt-landing .tt-fcar__nav svg,
.tt-landing .tt-fcar__nav svg *{ stroke:var(--tt-navy) !important; fill:none !important; }
.tt-landing .tt-fcar__nav:hover svg,
.tt-landing .tt-fcar__nav:hover svg *{ stroke:#fff !important; }
@media (max-width:760px){
  .tt-landing .tt-fcar__nav.tt-fcar__nav{ display:none !important; }
}

/* Hero: piu' spazio tra titolo e testo */
.tt-landing .tt-hero__title{ margin-bottom:36px !important; }

/* Come funziona: titoli delle card piu' piccoli e piu' staccati dal testo */
.tt-landing .tt-step__title{ font-size:1rem !important; line-height:1.3 !important; margin-bottom:13px !important; }

/* Tecnologia: piu' spazio tra titolo e testo */
.tt-landing .tt-tech .tt-section__lead{ margin-top:34px !important; }

/* Meno vuoto tra "Perche' TempyTag" (Vantaggi) e la sezione Video */
.tt-landing .tt-adv{ padding-bottom:clamp(34px,4vw,54px) !important; }

/* =====================================================================
   23. CORREZIONI CLIENTE (giugno 2026) - aggiunte non distruttive
   Tutto sotto .tt-landing (+!important dove serve) per vincere sul tema WP.
   ===================================================================== */

/* Eyebrow azzurri piu' grandi/leggibili, anche contro il tema */
.tt-landing .tt-eyebrow{ font-size:.98rem !important; }

/* COME FUNZIONA - contrasto icona su hover/evidenziazione:
   il quadratino diventa blu e l'icona bianca, sempre leggibile in entrambi gli stati. */
.tt-landing .tt-step:hover .tt-step__ico-wrap{ background:var(--tt-blue) !important; }
.tt-landing .tt-step:hover .tt-step__ico-wrap .tt-ico{ stroke:#fff !important; color:#fff !important; }

/* COME FUNZIONA - callout "Ogni TempyTag e' serializzato...": piu' grande e piu' importante */
.tt-landing .tt-how__note--strong{
  font-size:clamp(1.02rem,1.25vw,1.18rem) !important;
  font-weight:600 !important;
  padding:22px 30px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(50,124,253,.12), rgba(50,124,253,.05)) !important;
  border:1.5px solid rgba(50,124,253,.32) !important;
  color:var(--tt-navy) !important;
  box-shadow:0 14px 34px rgba(2,12,30,.10) !important;
  max-width:780px !important; line-height:1.45 !important;
}
.tt-landing .tt-how__note--strong .tt-ico{ width:28px !important; height:28px !important; }

/* TECNOLOGIA - titoli card lunghi (NFC/UHF) senza rompere il layout */
.tt-landing .tt-pillar__title--sm{ font-size:.98rem !important; line-height:1.25 !important; word-break:break-word; }

/* APP - blocco Web app / dashboard (sezione scura): testo centrato sopra, screenshot landscape full-width sotto */
.tt-landing .tt-webapp{
  padding-top:clamp(12px,3vw,40px); padding-bottom:clamp(48px,6vw,88px);
}
.tt-landing .tt-webapp__copy{
  max-width:880px; margin:0 auto clamp(26px,3vw,40px); text-align:center;
  color:rgba(255,255,255,.85);
}
.tt-landing .tt-webapp__copy p{ margin-top:14px; font-size:1.05rem; line-height:1.6; }
.tt-landing .tt-webapp__copy p:first-of-type{ margin-top:0; }
.tt-landing .tt-webapp__media{
  border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px rgba(2,12,30,.45);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}
.tt-landing .tt-webapp__shot{ display:block; width:100%; height:auto; }

/* SETTORI - simbolo di sfondo piu' grande (resta decorativo, opacita' invariata) */
.tt-landing .tt-mark--3{ width:480px !important; height:480px !important; }
@media (max-width:760px){ .tt-landing .tt-mark--3{ width:260px !important; height:260px !important; } }

/* CTA - blocco "TempyTag e' un prodotto HSC" + contatti */
.tt-landing .tt-cta__hsc{ margin-top:30px; width:100%; }
.tt-landing .tt-cta__hsc-lead{ color:rgba(255,255,255,.92); font-size:1.02rem; margin-bottom:16px; }
.tt-landing .tt-cta__hsc-lead strong{ color:#fff; }
.tt-landing .tt-cta__contacts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px;
  font-size:.98rem;
}
.tt-landing .tt-cta__contacts li{ display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.82); }
.tt-landing .tt-cta__contacts .tt-ico{ width:19px; height:19px; color:var(--tt-blue-soft); flex:none; }
.tt-landing .tt-cta__contacts a{ color:#fff; text-decoration:none; }
.tt-landing .tt-cta__contacts a:hover{ text-decoration:underline; }

/* Footer - indirizzo nella colonna Contatti + riga legale finale */
.tt-landing .tt-footer__addr{ display:block; margin-top:8px; font-size:.9rem; color:rgba(255,255,255,.6); line-height:1.5; }
.tt-landing .tt-footer__legalinfo{
  padding-bottom:26px; font-size:.8rem; color:rgba(255,255,255,.45);
}
@media (max-width:760px){ .tt-landing .tt-cta__contacts{ gap:10px 18px; } }

/* Freccia "torna su": fissa in basso a destra, compare dopo lo scroll */
.tt-landing .tt-totop{
  position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px);
  z-index:90;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--tt-blue) !important; color:#fff !important;
  box-shadow:0 12px 30px rgba(2,12,30,.34);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease, visibility .25s;
}
.tt-landing .tt-totop.is-visible{ opacity:1; visibility:visible; transform:none; }
.tt-landing .tt-totop:hover{ background:var(--tt-blue-strong) !important; transform:translateY(-3px); }
.tt-landing .tt-totop:focus-visible{ outline:3px solid var(--tt-blue-soft); outline-offset:3px; }
.tt-landing a.tt-totop, .tt-landing a.tt-totop:link, .tt-landing a.tt-totop:visited{ color:#fff !important; }
.tt-landing .tt-totop svg, .tt-landing .tt-totop svg *{ stroke:#fff !important; fill:none !important; }
@media print{ .tt-landing .tt-totop{ display:none !important; } }

/* Niente striscia bianca sotto il footer.
   1) lo sfondo pagina segue il navy del footer (l'hero copre il top col suo bg chiaro, quindi in cima non si vede navy);
   2) il footer estende il proprio navy verso il basso, coprendo eventuali wrapper/margini del tema. */
html:has(.tt-landing){ background:#051B39; }
body:has(.tt-landing){ background:#051B39 !important; margin:0 !important; }
.tt-landing .tt-footer{ position:relative; }
.tt-landing .tt-footer::after{
  content:""; position:absolute; left:0; right:0; top:100%;
  height:120px; background:var(--tt-navy-deep); pointer-events:none;
}

/* Mobile menu: neutralizza il verde ereditato da Elementor/tema sui button. */
@media (max-width:760px){
  .tt-landing .tt-header button.tt-burger,
  .tt-landing .tt-header button.tt-burger:hover,
  .tt-landing .tt-header button.tt-burger:focus,
  .tt-landing .tt-header button.tt-burger:active{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
    padding:0 !important;
    background:rgba(255,255,255,.10) !important;
    background-color:rgba(255,255,255,.10) !important;
    border:1px solid rgba(93,152,253,.72) !important;
    border-radius:9px !important;
    box-shadow:none !important;
    outline-color:var(--tt-blue-soft) !important;
    color:#fff !important;
  }
  .tt-landing .tt-header button.tt-burger[aria-expanded="true"],
  .tt-landing .tt-header button.tt-burger[aria-expanded="true"]:hover,
  .tt-landing .tt-header button.tt-burger[aria-expanded="true"]:focus,
  .tt-landing .tt-header button.tt-burger[aria-expanded="true"]:active{
    background:var(--tt-blue) !important;
    background-color:var(--tt-blue) !important;
    border-color:var(--tt-blue-soft) !important;
    color:#fff !important;
  }
  .tt-landing .tt-header button.tt-burger span{
    left:10px !important;
    right:10px !important;
    height:1.5px !important;
    background:#fff !important;
  }
}

/* Il verde del pulsante cookie arriva dal plugin/tema WordPress, non dalla landing.
   Dentro questa pagina lo riportiamo al blu TempyTag. */
body:has(.tt-landing) .cky-btn-revisit-wrapper,
body:has(.tt-landing) .cky-revisit-bottom-left,
body:has(.tt-landing) .cky-revisit-bottom-right,
body:has(.tt-landing) .cmplz-manage-consent,
body:has(.tt-landing) #cmplz-manage-consent .cmplz-manage-consent,
body:has(.tt-landing) .cli_settings_button,
body:has(.tt-landing) #ot-sdk-btn-floating,
body:has(.tt-landing) #BorlabsCookieWidget{
  background:var(--tt-blue) !important;
  border-color:var(--tt-blue) !important;
  color:#fff !important;
}
body:has(.tt-landing) .cky-btn-revisit-wrapper svg,
body:has(.tt-landing) .cky-revisit-bottom-left svg,
body:has(.tt-landing) .cky-revisit-bottom-right svg,
body:has(.tt-landing) .cmplz-manage-consent svg,
body:has(.tt-landing) #cmplz-manage-consent .cmplz-manage-consent svg,
body:has(.tt-landing) .cli_settings_button svg,
body:has(.tt-landing) #ot-sdk-btn-floating svg,
body:has(.tt-landing) #BorlabsCookieWidget svg{
  fill:#fff !important;
  stroke:#fff !important;
}

/* Giustificazione dei soli paragrafi lunghi e a flusso libero, solo desktop.
   Su mobile/tablet restano allineati a sinistra (default). */
@media (min-width:1024px){
  .tt-landing .tt-sectors__intro p,
  .tt-landing .tt-mockup-copy p,
  .tt-landing .tt-video__copy p{
    text-align:justify; text-justify:inter-word; hyphens:none;
  }
}
.tt-landing .tt-video{ padding-top:clamp(40px,4.5vw,64px) !important; }

/* Settori: l'occhiello "Dove si usa" allineato a sinistra come il resto del copy */
.tt-landing .tt-eyebrow{ margin-left:0 !important; padding-left:0 !important; text-indent:0 !important; }

/* Spaziatura uniforme tra pretitolo e titolo in tutta la landing */
.tt-landing .tt-eyebrow{ margin-bottom:14px !important; }
.tt-landing .tt-eyebrow + .tt-section__title,
.tt-landing .tt-eyebrow + .tt-hero__title,
.tt-landing .tt-eyebrow + .tt-cta__title{ margin-top:0 !important; }/* End custom CSS */