/* ============================================================
   AI Reputation — Reputation Manager
   Design tokens lifted from the source deck
   ============================================================ */
:root{
  --bg:        #ededed;
  --bg-alt:    #f2f6ff;
  --panel:     #dbe5fe;       /* light tinted boxes */
  --panel-2:   #f2f6ff;
  --navy:      #1e1b50;       /* primary dark */
  --navy-deep: #1e1b50;
  --blue:      #0037b8;       /* accent */
  --blue-2:    #0037b8;
  --ink:       #1e1b50;
  --muted:     #5a6079;
  --line:      #d9dde7;
  --white:     #ffffff;
  --bg-foot-prod: #1f1f1f;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 2px rgba(20,25,60,.06), 0 8px 24px -12px rgba(20,25,60,.08);
  --shadow-md: 0 24px 60px -28px rgba(20,25,60,.30);
}

.material-symbols-rounded{
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:32px;
  line-height:1; display:inline-block; vertical-align:middle;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
html{ scroll-behavior:smooth; }
img.border-img-radius, .border-img-radius{ border-radius: var(--radius-lg); overflow: hidden;}
.brand-logo img, .foot-logo{ border-radius: 0; }
html, body{ overflow-x:hidden;}
body{
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--panel);
  color: var(--ink);
  font-size:18px;
  line-height:1.55;
  font-weight:400;
  
}

/* ---------- type system ---------- */
.bagde{
  display: inline-block;
  background: #A0031B;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.kicker{
  font-family:'Inter',sans-serif;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--blue);
  font-size:14px;
  margin-bottom:1.1rem;
  display:inline-block;
}
h1,h2,h3,h4{ font-family:'Inter',sans-serif; color:var(--navy); font-weight:800; letter-spacing:-.01em;}
h1{ font-size: clamp(35px, 4vw, 60px); line-height:1.02; letter-spacing:-.02em;}
h2{ font-size: clamp(28px, 3.4vw, 44px); line-height:1.12; margin-bottom:1.25rem;}
h3{ font-size: 24px; line-height:1.25;}
p{ font-size:18px; color:var(--navy); font-weight:400; }
p.lead{ font-size:18px; color:var(--navy); font-weight:400; }
.text-muted-soft{ color: var(--muted); }
strong{  font-weight:800;}
.highlight-text strong{ color: var(--navy); }

/* ---------- top brand bar (logo + hamburger) ---------- */
.topbar{
  position: fixed; top:0; left:0; right:0;
  height: 78px;
  z-index: 60;
  transition: background .2s ease, box-shadow .2s ease;
}
.topbar .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar.is-scrolled{
  background: #fff;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
@media (max-width: 991.98px){
  .topbar.is-scrolled{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
}
.topbar.on-dark:not(.is-scrolled){ color:#fff; }
.topbar.on-dark:not(.is-scrolled) .brand-text{ color:#fff;}
.topbar.on-dark:not(.is-scrolled) .brand-dots .dot{ background:#fff;}
.topbar.on-dark:not(.is-scrolled) .brand-dots .dot.b{ background:#5b8def;}
.topbar.on-dark:not(.is-scrolled) .hamburger span{ background:#fff;}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none;}
.brand-logo{
  display:block;
  height: 38px;
  width: auto;
}
.brand-logo .neg{ display:none; }
.topbar.on-dark:not(.is-scrolled) .brand-logo .pos{ display:none; }
.topbar.on-dark:not(.is-scrolled) .brand-logo .neg{ display:block; }
/* legacy placeholder dots — kept for hero */
.brand-dots{
  position:relative; width:46px; height:32px;
}
.brand-dots .dot{
  position:absolute; width:14px; height:14px; border-radius:50%; background:var(--navy);
}
.brand-dots .d1{ left:0;  top:9px; width:16px; height:16px; border-radius:50%/40%; }
.brand-dots .d2{ left:14px; top:9px; width:16px; height:16px; border-radius:50%/40%; }
.brand-dots .d3{ left:28px; top:9px; width:16px; height:16px; border-radius:50%/40%; }
.brand-dots .dot.b{ background: #4f7ce3; width:11px; height:11px; left:34px; top:1px; border-radius:50%;}
.brand-text{
  font-family:'Inter',sans-serif; font-weight:800; line-height:1; color:var(--navy);
  font-size:.92rem; letter-spacing:.01em;
}
.brand-text small{ display:block; font-weight:700; opacity:.95; font-size:.92rem;}

/* ---------- nav CTA ---------- */
.nav-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 12px 28px; border-radius:999px;
  font-weight:700;  text-decoration:none;
  background:var(--blue); color: #fff;
  border: 1.5px solid transparent;
  transition: transform .2s, box-shadow .2s, background .25s, color .25s, border-color .25s;
}
/*
.topbar.is-scrolled .nav-cta{
  background:var(--navy); color: #fff;
}*/

.nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
  /*color: var(--navy);*/
}

/*
.topbar.on-dark:not(.is-scrolled) .nav-cta{
  background: transparent; color:#fff;
  border-color: rgba(255,255,255,.5);
}
.topbar.on-dark:not(.is-scrolled) .nav-cta:hover{
  background: rgba(255,255,255,.12); border-color:#fff;
}*/

/* ---------- sections ---------- */
section{
  padding: clamp(30px, 11vh, 60px) 0;
  position: relative;
}
section.dark{ background: var(--navy); color:#fff;}
section.dark h1,
section.dark h2,
section.dark h3{ color:var(--navy);}
section#protection h2 { color:#fff;}
section.dark p{ color:var(--navy);}
section.dark .kicker{ color:#8fa3ff;}
section.alt{ background: var(--bg-alt);}


.bg-panel {background:var(--panel)}
.bg-navy {background: var(--navy);}
.bg-foot-prod {background: var(--bg-foot-prod);}

.container, .container-xl{ max-width: 1240px;}

/* ---------- hero (slide 1) ---------- */
.hero{
  background: var(--bg-alt);
  color: var(--ink);
  min-height: 100vh;
  display:flex; align-items:center;
  padding-top: 130px; padding-bottom: 80px;
  overflow:hidden;
  position:relative;
}
.hero h2{ font-size: clamp(18px, 3.4vw, 24px); line-height:1.12; margin-bottom:1.25rem; color: var(--navy);}
.hero .container{ position:relative; z-index:2;}
.hero h1{
  color: var(--navy); font-weight:800; letter-spacing:-.02em;
}
.hero p.tagline{ color: var(--navy); font-size:1.2rem; max-width: 460px;}

.hero-cta{
  display:inline-flex; align-items:center; gap:.8rem;
  margin-top: 1rem;
  background: var(--navy); color:#fff;
  padding: 12px 28px; border-radius: 999px;
  font-weight:800; text-decoration:none; font-size:1rem;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.hero-cta:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(6,32,101,.4);}
.hero-cta .arr{
  width:34px; height:34px; border-radius:50%; background:#fff; color: var(--navy);
  display:inline-flex; align-items:center; justify-content:center; transition: transform .25s;
}
.hero-cta:hover .arr{ transform: translateX(4px);}

.hero-img-placeholder{
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--line);
}
.hero-img-placeholder .material-symbols-rounded{
  font-size: 72px;
}

/* ---------- hero tiles grid ---------- */
.tiles-box{
  background: #f2f6ff;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.hero-tiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tiles-row{
  display: flex;
  gap: 10px;
}
.tile{
  flex: 1;
  aspect-ratio: 3/2;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}
.tile img{
  width: 48px;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}


.scroll-hint{
  position:absolute; left:50%; bottom: 30px; transform: translateX(-50%);
  color: #9aa5d8; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:3;
}
.scroll-hint .line{
  width:1px; height: 40px;
  background: linear-gradient(to bottom, transparent, #9aa5d8);
  animation: hintLine 2s infinite ease-in-out;
}
@keyframes hintLine{
  0%,100%{ opacity:.3; transform: scaleY(.6); transform-origin: top;}
  50%{ opacity:1; transform: scaleY(1);}
}

/* ---------- info-card (light tinted box, slide 2/3) ---------- */
.info-box{
  background: #f2f6ff;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display:flex; gap:18px;
  color: #0037b8;
}
.info-box.panel { background: var(--panel);}
.info-box .ico{
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display:inline-flex; align-items:center; justify-content:center;
  color: #0037b8; flex-shrink:0;
}
.info-box .body p{ color: #0037b8; margin-bottom:1rem;}
.info-box .body p:last-child{ margin-bottom:0;}
.info-box .body strong{ color: #0037b8;}

/* ---------- photo card ---------- */
.photo-card{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  background: #ddd;
}
.photo-card img{ width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- objective grid (slide 5) ---------- */
#obiettivi{ background: #fff; }
.obj-card{
  background: #f2f6ff;
  border-radius: var(--radius-lg);
  padding: 32px;
  min-height: 250px;
}
.obj-card .ico{
  width:46px; height:46px; color: var(--blue); margin-bottom:14px;
}
.obj-card h3{
  color: var(--blue); font-size:24px; font-weight:800; margin-bottom:.6rem;
}
.obj-card p{ font-size:18px; color:var(--navy); margin:0;}

/* ---------- pillar cards (slide 7) ---------- */
.pillars{ position:relative; padding-top: 40px;}
.pillar{
 background: #fff;
  border-radius: var(--radius-lg);
  padding: 64px 64px 36px;
  position: relative;
  text-align: center;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pillar .tag{
  position: absolute; top:-20px; left: 50%; transform: translateX(-50%);
  background: var(--blue);
  color:#fff;
  border-radius: 12px;
  padding: 14px 30px;
  font-weight:800; letter-spacing:.2em; font-size:14px;
  white-space: nowrap;
}
.pillar h3{ font-size:24px; margin-bottom:1rem;}
.pillar p{ color: var(--navy);}
.pillar p em{ font-style: italic; }

/* ---------- bullet list (slide 8) ---------- */
.bullet-list{ list-style:none; padding:0; margin: 0;}
.bullet-list li{
  padding: 14px 0;
  
  color: var(--navy);
}
.bullet-list li:last-child{ border-bottom:0;}
.bullet-list li strong{ color: var(--navy);}

/* ---------- mock dashboard tile (built CSS, not screenshot) ---------- */
.mock{
  /*background:#fff;*/
  border-radius: var(--radius-lg);
  /*padding: 22px;*/
}
.mock-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.mock-head .ttl{ font-weight:800; color: var(--navy); font-size:1.05rem;}
.mock-head .sub{ font-size:.78rem; color: var(--muted);}
.gauge{
  width: 100%; max-width: 240px; aspect-ratio: 2/1; margin: 0 auto;
  position: relative;
}
.gauge svg{ width:100%; height:100%; display:block;}
.gauge .gnum{
  position:absolute; left:50%; bottom: 4px;
  transform: translateX(-50%);
  font-size: 2.3rem; font-weight:800; color: var(--navy);
}
.gauge .glabel{
  position:absolute; left:50%; top: 100%; transform: translateX(-50%) translateY(2px);
  color: var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.15em;
}

.bar-row{ display:flex; align-items:center; gap:12px; padding: 9px 0; font-size:.9rem;}
.bar-row .lbl{ flex: 0 0 110px; color: var(--ink); font-weight:700;}
.bar-row .track{ flex:1; height:10px; background:#eef0f7; border-radius:99px; overflow:hidden; position:relative;}
.bar-row .fill{ height:100%; border-radius:99px;}
.bar-row .val{ flex: 0 0 36px; text-align:right; font-weight:700; color:var(--muted); font-size:.85rem;}
.fill.green{ background:#22c562;}
.fill.blue{ background: var(--blue);}
.fill.purple{ background:#6750cc;}
.fill.gold{ background:#e2a92e;}
.fill.dark{ background:#11141c;}
.fill.teal{ background:#0c6680;}

.split-strip{
  display:flex; height:14px; border-radius:99px; overflow:hidden;
  background:#eef0f7;
}
.split-strip > span{ display:block;}

/* ---------- tool stat tiles (slide 9) ---------- */
.stat-card{
  border-radius: var(--radius-lg);
  padding: 38px 28px 36px;
  text-align:center;
  height:100%;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  min-height: 230px;
}
.stat-card .ico{ color:#fff; margin-bottom:6px;}
.stat-card .big{ font-family:'Inter',sans-serif; font-weight:800; font-size:2.5rem; line-height:1; letter-spacing:-.02em;}
.stat-card .lab{ font-size:1rem; line-height:1.3; opacity:.9;}
.stat-card.dark{ background: var(--navy); color:#fff;}
.stat-card.dark .big{ color:#fff;}
.stat-card.light{ background: #fff; color: var(--navy);}
.stat-card.light .ico{ color: var(--blue);}
.stat-card.light .big{ color: var(--navy);}

/* ---------- segnali list rows (slide 12) ---------- */
.segnali-row{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 22px;
}
.segnali-row p{ color:var(--navy); margin:0;}

/* ---------- eng swiper controls (slide 11) ---------- */
.eng-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}
.eng-btn{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.eng-btn:hover{ background: var(--navy); color:#fff;}
.eng-btn.active{ background: var(--navy); color:#fff; }
.eng-btn.active:hover{ background: var(--navy); }
.eng-btn .material-symbols-rounded{ font-size: 20px; }

/* ---------- platform screenshot (slide 9) ---------- */
.platform-screenshot{
  width:100%; height:100%; object-fit:cover;
  border-radius: var(--radius-lg);
  display:block;
}

/* ---------- protection cards (slide 13, on dark) ---------- */
.prot-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 38px 28px 34px;
  text-align: center;
  height: 100%;
  color: var(--ink);
  transition: transform .35s;
}
.prot-card .ico{ color: var(--navy); margin-bottom: 14px;}
.prot-card h3{ color: var(--navy); font-size:24px; margin-bottom:.8rem;}
.prot-card p{ color: var(--navy); margin: 0;}
.prot-card .material-symbols-rounded {font-size: 40px;}
/* dotted bg for dark sections (the deck's signature pattern) */
.dotted-bg{
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  position:relative;
}

/* ---------- framework (slide 14) ---------- */
.fw-step{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  height: 100%;
}
.fw-step .num{
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .05em;
  margin-bottom: 18px;
}
.fw-step h4{
  font-size: 24px; font-weight: 800; color: var(--navy); margin: 0 0 8px 0;
}
.fw-step p{ color: var(--navy); margin: 0; font-size: 18px; }
.fw-step.s1 .num{ background: #5dbdd3; }
.fw-step.s2 .num{ background: #1775d5; }
.fw-step.s3 .num{ background: #038fc4; }
.fw-step.s4 .num{ background: #145389; }
.fw-step.s5 .num{ background: #4e67a9; }

/* ---------- contact ---------- */
.contact-card{
  background: linear-gradient(180deg, #1e1b50 0%, var(--navy) 100%);
  border-radius: 32px;
  padding: clamp(36px,5vw,72px) clamp(28px,5vw,72px);
  color:#fff;
  position:relative; overflow:hidden;
  box-shadow: 0 40px 100px -40px rgba(20,25,60,.6);
}
.contact-card::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  pointer-events:none;
}
.contact-card h2{ color:#fff;}
.contact-card .kicker{ color:#fff;}
.contact-card p{ color:#c5cbed;}

.contact-form .form-control,
.contact-form .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-family:'Inter',sans-serif;
  font-size:.98rem;
  transition: border-color .2s, background .2s;
}
.contact-form .form-control::placeholder{ color: rgba(255,255,255,.45);}
.contact-form .form-control:focus,
.contact-form .form-select:focus{
  background: rgba(255,255,255,.10);
  border-color: #8fa3ff;
  box-shadow: 0 0 0 4px rgba(143,163,255,.15);
  color:#fff;
  outline:0;
}

.contact-form .form-check {
    display: flex;
    min-height: 1.5rem;
    padding-left: 0;
    margin-bottom: .125rem;
    align-items: center;
    gap: 10px;
}

.contact-form label{
  font-size:14px; letter-spacing:.18em; text-transform: uppercase;
  font-weight:800; color: #a9b1d6; margin-bottom: 8px; display:block;
}
.contact-form .req{ color: #fff; font-weight:800; }
.contact-form .form-check-input{
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2);
  margin: 0; flex-shrink: 0;
}
.contact-form .form-check-input:checked{
  background: var(--blue-2); border-color: var(--blue-2); background-image: none;
}
/* check-wrap: griglia a cella singola — input e icona si sovrappongono */
.contact-form .check-wrap{
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-form .check-wrap .form-check-input,
.contact-form .check-wrap .check-icon{
  grid-column: 1;
  grid-row: 1;
}
.contact-form .check-icon{
  font-size: .75rem; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
  color: #fff; pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 1;
}
.contact-form .form-check-input:checked + .check-icon{ opacity: 1; }
.contact-form .form-check-label{ color:#c5cbed; font-size:14px;}
#contatti .privacy-link,
.contact-form .privacy-link{ color:#fff; text-decoration:none; }
#contatti .privacy-link:hover,
.contact-form .privacy-link:hover{ text-decoration:underline; }
.contact-form .btn-submit{
  background:#fff; color: var(--navy);
  border:0; border-radius: 999px; padding: 12px 28px;
  font-weight:800; font-family:'Inter',sans-serif;
  display: inline-flex; align-items:center; gap:.7rem;
  transition: transform .2s, box-shadow .2s;
}
.contact-form .btn-submit:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);}
.contact-form .btn-submit .arr{
  width:30px; height:30px; border-radius:50%; background: var(--navy); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.contact-success{
  display:none;
  background: rgba(34,197,98,.12);
  border:1px solid rgba(34,197,98,.4);
  color: #b5f5cd; padding: 14px 18px; border-radius: 12px;
  margin-top: 16px;
}

/* ---------- back to top ---------- */
.back-to-top{
  border:3px solid #f2f6ff;
  position:fixed; bottom:32px; right:32px; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background: var(--navy); color:#fff;  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px -8px rgba(6,32,101,.45);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s;
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; transform: translateY(0);
}
.back-to-top:hover{ background: var(--blue); transform: translateY(-2px);}

/* ---------- footer ---------- */
.box-black{
  background: #0d1120;
  color: #a9b1d6;
}
.row-wide{
  width:100%; margin:0; padding:0;
}
.foot-main{
  max-width: 1240px;
  margin: 0 auto;
}
.foot-logo{ display:block; margin-bottom:.5rem;}
.txt-small{
  font-size:.8rem; line-height:1.6; margin:0 0 .25rem;
  color: #a9b1d6;
}
.txt-small strong{ color:#fff; font-weight:700;}
.grey{ color:#a9b1d6}
.foot-heading{
  font-family:'Inter',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:1rem;
}
.foot-links{
  list-style:none; padding:0; margin:0;
}
.foot-links li{ margin-bottom:.5rem;}
.foot-links a{
  color:#a9b1d6; text-decoration:none; font-size:.88rem;
  transition: color .2s;
}
.foot-links a:hover{ color:#fff;}
.foot-social{
  display:flex; gap:12px; flex-wrap:wrap;
}
.foot-social a{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#a9b1d6;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s, color .2s;
  text-decoration:none;
}
.foot-social a:hover{ background: var(--blue); color:#fff;}
.foot-copy{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 20px var(--bs-gutter-x, 1.5rem);
  max-width:1240px; margin:0 auto;
  font-size:.8rem; color:#a9b1d6;
}
.foot-copy a{ color:#a9b1d6; text-decoration:none;}
.foot-copy a:hover{ color:#fff; text-decoration:underline;}

/* footer link generici su bg-navy */
.foot-main p, .foot-main .txt-small {color:#fff}
.foot-main .txt-small.grey{
  color: #999;
}
.bg-navy .txt-small a{ color:#a9b1d6; text-decoration:none;}
.bg-foot-prod .txt-small a{ color:#fff; text-decoration:none;}
.bg-navy .txt-small a:hover,.bg-foot-prod .txt-small a:hover{ color:#fff; text-decoration:underline;}
.bg-navy h2{ font-size:.8rem; color:#a9b1d6; display:inline; font-weight:400; letter-spacing:0; text-transform:none;}
.bg-foot-prod h2 { font-size:.8rem; color:#fff; display:inline; font-weight:400; letter-spacing:0; text-transform:none;}
.bg-navy h2 a{ color:#a9b1d6; text-decoration:none;}
 .bg-foot-prod h2 a{ color:#fff; text-decoration:none;}
.bg-navy h2 a:hover, .bg-foot-prod h2 a:hover{ color:#fff;}
.payoff{ display:block; margin-top:.3rem; }
.socialfooter ul{ list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap;}
.socialfooter a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.08); color:#a9b1d6;
  text-decoration:none; transition: background .2s, color .2s;
}
.socialfooter a:hover{ background:var(--blue); color:#fff;}
.foot-main{ padding: clamp(36px,6vh,64px) clamp(16px,3vw,48px); }

/* ---------- chi siamo contact tiles ---------- */
.contact-tile{
  display:flex; align-items:center; gap:14px;
  margin-bottom: 16px;
}
.contact-tile .ic{
  width:48px; height:48px; flex-shrink:0;
  border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--panel);
  color: var(--navy);
}
.contact-tile.primary .ic{ background: var(--navy); color:#fff;}
.contact-tile .val{
  min-width:0;
  background: var(--panel);
  padding: 12px 18px; border-radius: 14px;
  color: var(--navy); font-weight:700; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contact-tile.primary .val{ background: var(--navy); color:#fff;}
.contact-tile .val a{ color: inherit; text-decoration: none;}
.contact-tile .val a:is(:hover, :focus){ color: inherit; text-decoration: underline; text-underline-offset: 3px;}

/* ---------- LLM keyboard collage placeholder ---------- */
.llm-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--navy); padding:14px; border-radius: 20px;
}
.llm-grid > div{
  aspect-ratio: 1;
  background: #fff; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.4rem; color: var(--navy);
}
.llm-grid > div.tinted{ background: #d6f3e8; color: #228a64;}
.llm-grid > div.dark{ background: #1a1a1a; color:#fff;}
.llm-grid > div.orange{ background: #ff5b22; color:#fff;}
.llm-grid > div.grad{ background: linear-gradient(135deg, #5b8def, #d24bff, #ff8c66);}

/* swiper-specific overrides */
.swiper{ padding: 20px 4px 20px;}
.swiper-wrapper{ align-items: stretch; }
.swiper-slide{ height: auto; display: flex; flex-direction: column; }
.swiper-slide > *{ flex: 1; }
.swiper-pagination-bullet{ background: var(--blue); opacity:.3;}
.swiper-pagination-bullet-active{ opacity:1;}
.swiper-button-next, .swiper-button-prev{
  color: var(--navy); width: 44px; height:44px; background: #fff; border-radius:50%;
  box-shadow: var(--shadow-sm);
}
.swiper-button-next::after, .swiper-button-prev::after{ font-size:1.1rem; font-weight:800;}

/* frecce nav centrate sotto — solo mobile */
.swiper-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px 0 4px;
}
.swiper-nav .swiper-button-prev,
.swiper-nav .swiper-button-next{
  position: static !important;
  margin-top: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex-shrink: 0;
}

/* responsive niceties */
@media (max-width: 991.98px){
  .hero-collage{ height: 380px; margin-top: 40px;}
  section{ padding: 72px 0;}
  .hero{ padding-top: 90px; padding-bottom: 72px; min-height: unset; }
  .pillar{ margin-bottom: 36px; padding: 48px 28px 28px; height: auto; }
  .pillars{ padding-top: 30px;}
  /* swiper: tolgo padding orizzontale così le card si allineano al container 
  .swiper{ padding-left: 0; padding-right: 0; } */
  /* stat-card: riduco padding su tablet/mobile */
  .stat-card{ padding: 28px 20px 24px; }
  /* fw-step: riduco padding laterale */
  .fw-step{ padding: 24px 20px; }
  
}
@media (max-width: 575.98px){
  body{ font-size:16px;}
  .topbar{ height:64px;}
  .brand-text{ font-size:.85rem;}
  .topbar .topbar-inner{ padding-right: 12px; }
  .nav-cta{ padding: 10px 18px; font-size: 1rem; }
  /* elementi che rischiano overflow orizzontale */
  .hero p.tagline{ max-width: 100%; }
  .pillar{ padding: 40px 20px 24px; }
  .stat-card{ padding: 24px 16px 20px; }
  .fw-step{ padding: 20px 16px; }
  section{ padding: 44px 0; }
  .hero{ padding-top: 60px; padding-bottom: 44px; }
}

@media (min-width: 992px){
  .tel-link {
    pointer-events: none;
  }
  .foot-main{
    padding: clamp(48px,7vh,80px) var(--bs-gutter-x, 1.5rem) clamp(36px,5vh,60px);
  }  
}
@media (max-width:767px) {
.contact-tile .val {flex: 1;}
}
@media (min-width:768px) {
  .contact-tile .val {width: 77%;}
}

/* ---- WOW.js: prevent layout shift before animation triggers ---- */
.wow { visibility: hidden; }

/* ---- Bootstrap 4 compatibility polyfills ----
   gap-* e g-* non esistono in BS4; li reimplementiamo qui */
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* gutter verticale per .row.g-* */
.row.g-3 > [class*="col"] { padding-top: .5rem;  padding-bottom: .5rem; }
.row.g-4 > [class*="col"] { padding-top: .75rem; padding-bottom: .75rem; }
.row.g-5 > [class*="col"] { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ---------- pillar nav tabs (landing-3) ---------- */
.pillar-tabs {
  display: flex;
  gap: 16px;
  border-bottom: none;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.pillar-tabs .nav-item { flex: 1; max-width: 380px; }
.pillar-tabs .nav-link {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: none;
  text-align: center;
  cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .2s;
}
.pillar-tabs .nav-link:hover {
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.pillar-tabs .nav-link.active {
  background: var(--navy);
  box-shadow: var(--shadow-md);
}
.ptab-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue);
  transition: color .25s;
}
.pillar-tabs .nav-link.active .ptab-tag { color: var(--panel); }
.ptab-title {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  transition: color .25s;
}
.pillar-tabs .nav-link.active .ptab-title { color: #fff; }

.pillar-tab-content { min-height: 420px; }
.pillar-tab-content .tab-pane { padding-top: 12px; }

/* ---------- prot-item (tab protezione) ---------- */
.prot-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.prot-item-ico {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.prot-item-ico .material-symbols-rounded { font-size: 24px; }
.prot-item-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.prot-item-text {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 767.98px) {
  /* dropdown-style: solo il tab attivo è visibile, click → apre tutti */
  .pillar-tabs {
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 20;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .pillar-tabs .nav-item { max-width: 100%; }

  /* item nascosti (gestiti via JS) */
  .pillar-tabs .nav-item.ptab-hidden { display: none; }

  /* quando aperto mostra tutti e aggiunge divisori */
  .pillar-tabs.is-open { box-shadow: var(--shadow-md); }
  .pillar-tabs.is-open .nav-item.ptab-hidden { display: block; }
  .pillar-tabs.is-open .nav-item + .nav-item { border-top: 1px solid var(--line); }
  .pillar-tabs.is-open .nav-link { border-radius: 0 !important; }

  /* layout orizzontale + testo allineato a sinistra */
  .pillar-tabs .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    padding: 16px 44px 16px 20px;
    position: relative;
  }

  /* freccia chevron solo sull'attivo */
  .pillar-tabs .nav-link.active::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 22px;
    line-height: 1;
    color: rgba(255,255,255,.75);
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .25s;
  }
  .pillar-tabs.is-open .nav-link.active::after {
    transform: translateY(-50%) rotate(180deg);
  }

  .ptab-title { font-size: 15px; }
}


/* ============================================================
   AI Reputation — Contact Form 7 styles
   Adattamento del contact-form statico per WordPress CF7.
   Da includere all'interno di un wrapper .contact-card.
   ============================================================ */

/* ---------- variabili locali (replicano il design token) ---------- */
.contact-card {
  --navy:    #1e1b50;
  --blue-2:  #0037b8;
  --radius-md: 14px;
}

/* ---------- reset CF7 defaults ---------- */
.contact-card .wpcf7 *,
.contact-card .wpcf7 *::before,
.contact-card .wpcf7 *::after {
  box-sizing: border-box;
}

/* ---------- griglia campi (sostituisce .row.g-3) ---------- */
.contact-card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- wrapper span generato da CF7 ---------- */
.contact-card .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ---------- label ---------- */
.contact-card .wpcf7-form label {
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #a9b1d6;
  margin-bottom: 8px;
  display: block;
}

/* asterisco campo obbligatorio */
.contact-card .wpcf7-form .req,
.contact-card .wpcf7-form abbr[title] {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

/* ---------- input, select, textarea ---------- */
.contact-card .wpcf7-form-control-wrap .wpcf7-text,
.contact-card .wpcf7-form-control-wrap .wpcf7-email,
.contact-card .wpcf7-form-control-wrap .wpcf7-tel,
.contact-card .wpcf7-form-control-wrap .wpcf7-textarea,
.contact-card .wpcf7-form-control-wrap .wpcf7-select {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}

.contact-card .wpcf7-form-control-wrap .wpcf7-text::placeholder,
.contact-card .wpcf7-form-control-wrap .wpcf7-email::placeholder,
.contact-card .wpcf7-form-control-wrap .wpcf7-tel::placeholder,
.contact-card .wpcf7-form-control-wrap .wpcf7-textarea::placeholder {
  color: rgba(255, 255, 255, .45);
}

.contact-card .wpcf7-form-control-wrap .wpcf7-text:focus,
.contact-card .wpcf7-form-control-wrap .wpcf7-email:focus,
.contact-card .wpcf7-form-control-wrap .wpcf7-tel:focus,
.contact-card .wpcf7-form-control-wrap .wpcf7-textarea:focus,
.contact-card .wpcf7-form-control-wrap .wpcf7-select:focus {
  background: rgba(255, 255, 255, .10);
  border-color: #8fa3ff;
  box-shadow: 0 0 0 4px rgba(143, 163, 255, .15);
  color: #fff;
  outline: 0;
}

.contact-card .wpcf7-form-control-wrap .wpcf7-textarea {
  resize: vertical;
  min-height: 110px;
}

/* ---------- checkbox privacy (acceptance CF7) ---------- */
.contact-card .wpcf7-acceptance {
  display: block;
}

.contact-card .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.contact-card .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  color: #c5cbed;
  margin-bottom: 0;
  cursor: pointer;
}

/* checkbox input */
.contact-card .wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background .15s, border-color .15s;
  margin: 0;
}

.contact-card .wpcf7-acceptance input[type="checkbox"]:checked {
  background: var(--blue-2);
  border-color: var(--blue-2);
}

/* checkmark via ::after */
.contact-card .wpcf7-acceptance input[type="checkbox"]::after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .15s;
}

.contact-card .wpcf7-acceptance input[type="checkbox"]:checked::after {
  opacity: 1;
}

/* link privacy policy */
.contact-card .wpcf7-acceptance a,
.contact-card .wpcf7-form .privacy-link {
  color: #fff;
  text-decoration: none;
}

.contact-card .wpcf7-acceptance a:hover,
.contact-card .wpcf7-form .privacy-link:hover {
  text-decoration: underline;
}

/* ---------- submit button ---------- */
.contact-card .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 800;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}

.contact-card .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .4);
}

.contact-card .wpcf7-submit:disabled,
.contact-card .wpcf7-submit[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- spinner CF7 (vicino al submit) ---------- */
.contact-card .wpcf7-spinner {
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- validazione: messaggio di errore campo ---------- */
.contact-card .wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #ff8a8a;
  margin-top: 5px;
  font-weight: 600;
}

/* bordo rosso sul campo non valido */
.contact-card .wpcf7-not-valid {
  border-color: rgba(255, 100, 100, .5) !important;
}

/* ---------- response output (messaggio globale CF7) ---------- */
.contact-card .wpcf7-response-output {
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.4;
  border-width: 1px;
  border-style: solid;
}

  /* cookies */
  .privacypolicy---palette-light.privacypolicy---nb {
    background-color: rgba(47, 64,87, 1) !important;
  }
  
  .privacypolicy---palette-light .cc-nb-okagree {
    color: #262b40 !important;
    background-color: white !important;
    border: 1px solid white !important;
  }
  
  .privacypolicy---palette-light .cc-nb-changep {
    color: white !important;
    background-color: #262b40 !important;
    border: 1px solid white !important;
  }
  
  .privacypolicy---palette-light .cc-nb-reject {
    color: #262b40 !important;
    background-color: white !important;
    border: 1px solid white !important;
  }
  
  .privacypolicy---palette-light .cc-nb-text{
    color:white !important;
  }
  
  .cc-nb-text a {
    color: white !important;
  }
  
  .privacypolicy---palette-light .cc-cp-foot-save {
    background: #262b40 !important;
  }
  
  div#privacypolicy---nb:not(.privacypolicy---is-hidden) {
    padding: 0 50px;
    display: flex;
    justify-content: center
}

p#cc-nb-text {
    display: block!important;
    line-height: 105%!important;
    margin: 0!important;
}
  


  .privacypolicy---palette-light .cc-pc-head-title-text {
    display: none;
  }
  
  .privacypolicy---palette-light .cc-cp-body-tabs-item-link:focus {
    box-shadow: none !important;
  }

  .privacypolicy---palette-light .cc-nb-reject:focus {
    box-shadow: none !important;
    } 
     /* end cookies */


/* errore / spam / aborted */
.contact-card .wpcf7-form.failed .wpcf7-response-output,
.contact-card .wpcf7-form.spam .wpcf7-response-output,
.contact-card .wpcf7-form.aborted .wpcf7-response-output {
  background: rgba(255, 80, 80, .12);
  border-color: rgba(255, 80, 80, .4);
  color: #ffb3b3;
}

/* validazione (invalid) */
.contact-card .wpcf7-form.invalid .wpcf7-response-output {
  background: rgba(255, 200, 50, .10);
  border-color: rgba(255, 200, 50, .35);
  color: #ffe699;
}

.contact-card .wpcf7-acceptance a, .contact-card .wpcf7-form .privacy-link {
    color: #fff!important;
    text-decoration: none;
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
  .contact-card .wpcf7-form-control-wrap .wpcf7-text,
  .contact-card .wpcf7-form-control-wrap .wpcf7-email,
  .contact-card .wpcf7-form-control-wrap .wpcf7-tel,
  .contact-card .wpcf7-form-control-wrap .wpcf7-textarea,
  .contact-card .wpcf7-form-control-wrap .wpcf7-select {
    font-size: .95rem;
    padding: 12px 14px;
  }

  .contact-card .wpcf7-submit {
    width: 100%;
    justify-content: center;
  }
}