/* ═══════════════════════════════════════════════════════════
   JASPIT SRL — Pages Stylesheet
   Override e stili specifici per landing page e pagine interne
   ═══════════════════════════════════════════════════════════ */

/* ══ PAGE HERO (landing e pagine interne) ═══════════════════ */
.page-hero {
  background: var(--bg-1);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero .container { position: relative; }

.page-hero h1 {
  color: var(--t1);
  max-width: 700px;
  margin-bottom: 20px;
}

.page-hero-sub {
  font-size: 1.12rem;
  color: var(--t3);
  line-height: 1.72;
  /*max-width: 580px;*/
  margin-bottom: 36px;
}

.page-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t4);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--t4); transition: color .18s; }
.breadcrumb a:hover { color: var(--t2); }
.breadcrumb-sep { color: var(--t4); font-size: 10px; }
.breadcrumb-current { color: var(--t3); }

/* ══ FEATURE LIST (problema/soluzione) ══════════════════════ */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .22s, transform .22s;
}
.feature-item:hover {
  border-color: var(--red-border);
  transform: translateX(4px);
}

.feature-num {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--red);
  opacity: .5;
  line-height: 1;
  flex-shrink: 0;
  min-width: 28px;
}
.feature-item:hover .feature-num { opacity: 1; }

.feature-text h4 { color: var(--t1); margin-bottom: 6px; font-size: 1rem; }
.feature-text p  { color: var(--t4); font-size: 0.9rem; line-height: 1.6; }

/* ══ TWO-COL SPLIT ══════════════════════════════════════════ */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.split-grid.reverse { direction: rtl; }
.split-grid.reverse > * { direction: ltr; }

.split-visual {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.split-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--red-subtle) 0%, transparent 65%);
}

.split-visual-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.split-visual-icon svg {
  width: 72px;
  height: 72px;
  color: var(--red-light);
  opacity: .7;
}

/* ══ VANTAGGI GRID ══════════════════════════════════════════ */
.vantaggi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vantaggio-card {
  padding: 28px 24px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all .25s;
}
.vantaggio-card:hover {
  border-color: var(--red-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vantaggio-icon {
  width: 44px;
  height: 44px;
  background: var(--red-subtle);
  border: 1px solid var(--red-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-light);
  margin-bottom: 16px;
}
.vantaggio-icon svg { width: 20px; height: 20px; }

.vantaggio-card h3 { color: var(--t1); font-size: 1rem; margin-bottom: 8px; }
.vantaggio-card p  { color: var(--t4); font-size: 0.9rem; line-height: 1.65; }

/* Light section overrides */
.section--light .vantaggio-card {
  background: var(--light-1);
  border-color: var(--border-light);
}
.section--light .vantaggio-card h3 { color: var(--t-dark); }
.section--light .vantaggio-card p  { color: var(--t-dark-3); }
.section--light .vantaggio-card:hover { border-color: var(--red-border); }

/* ══ SERVICE DETAIL GRID ════════════════════════════════════ */
.servizio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.servizio-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px 20px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s;
}
.servizio-item:hover { border-color: var(--red-border); }

.servizio-ico {
  width: 40px;
  height: 40px;
  background: var(--red-subtle);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-light);
  flex-shrink: 0;
}
.servizio-ico svg { width: 18px; height: 18px; }

.servizio-item h4 { color: var(--t1); margin-bottom: 5px; font-size: 0.95rem; }
.servizio-item p  { color: var(--t4); font-size: 0.87rem; line-height: 1.6; }

/* ══ PROCESS LANDING (2-col list) ═══════════════════════════ */
.proc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: proc-count;
}

.proc-list-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.proc-list-item:last-child { border-bottom: none; }

.proc-list-num {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--red);
  opacity: .4;
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  transition: opacity .2s;
}
.proc-list-item:hover .proc-list-num { opacity: 1; }

.proc-list-body h3 { color: var(--t1); font-size: 1.1rem; margin-bottom: 8px; }
.proc-list-body p  { color: var(--t3); font-size: 0.95rem; line-height: 1.7; }

/* ══ CORRELATI (altri servizi) ══════════════════════════════ */
.correlati-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.correlato-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 28px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all .25s;
}
.correlato-card:hover {
  border-color: var(--red-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.correlato-card h3 { color: var(--t1); font-size: 1.1rem; margin-bottom: 8px; }
.correlato-card p  { color: var(--t4); font-size: 0.9rem; line-height: 1.65; flex: 1; }

/* ══ CHI SIAMO — TEAM / VALUES ══════════════════════════════ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.value-card {
  padding: 28px 24px;
  border-left: 3px solid var(--red);
  background: var(--bg-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: transform .22s;
}
.value-card:hover { transform: translateX(4px); }

.value-card h4 { color: var(--t1); font-size: 1rem; margin-bottom: 8px; }
.value-card p  { color: var(--t4); font-size: 0.9rem; line-height: 1.65; }

/* ══ CONTATTI PAGE ══════════════════════════════════════════ */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}

.contatti-info h2 { color: var(--t1); margin-bottom: 16px; }
.contatti-info > p { color: var(--t3); line-height: 1.72; margin-bottom: 36px; }

.page-hero-bg--red {
  background: radial-gradient(ellipse 55% 45% at 20% 0%, rgba(200,41,58,.12), transparent);
}

.cdet--top { margin-top: 32px; }
.cdet--sm  { margin-top: 8px; }

.cform h3 {
  color: var(--t1);
  font-size: 1.25rem;
  margin-bottom: 24px;
}

.cform .fi-ta { min-height: 140px; }

.btn--full {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  justify-content: center;
}

.form-disclaimer {
  font-size: 12px;
  color: var(--t4);
  margin-top: 14px;
  text-align: center;
}

.form-disclaimer a { color: var(--red-light); }

.hp-trap {
  display: none;
  position: absolute;
  left: -9999px;
}

/* ══ LEGAL PAGES (privacy / cookie) ════════════════════════ */
.legal-content {
  max-width: 800px;
  margin-inline: auto;
}

.legal-content h1 {
  font-size: 1.8rem;
  color: var(--t1);
  margin-bottom: 24px;
}

.legal-content h2 {
  font-size: 1.25rem;
  color: var(--t1);
  margin-top: 48px;
  margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-content h2:first-of-type { border-top: none; margin-top: 0; }

.legal-content h3 {
  font-size: 1.05rem;
  color: var(--t2);
  margin-top: 24px;
  margin-bottom: 10px;
}

.legal-content p {
  color: var(--t3);
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: 0.97rem;
}

.legal-content ul,
.legal-content ol {
  list-style: disc;
  padding-left: 20px;
  color: var(--t3);
  font-size: 0.97rem;
  line-height: 1.75;
  margin-bottom: 14px;
}

.legal-content ol { list-style: decimal; }

.legal-content ul li,
.legal-content ol li { margin-bottom: 6px; }

.legal-content strong { color: var(--t2); font-weight: 600; }

.legal-content a { color: var(--red-light); transition: color .18s; }
.legal-content a:hover { color: var(--t1); }

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--t4);
  padding: 10px 18px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 40px;
}

/* ══ INDEX PAGE ═════════════════════════════════════════════ */
.slide-bg--1 {
  background: radial-gradient(ellipse 65% 55% at 15% -5%,rgba(200,41,58,.14),transparent),
              radial-gradient(ellipse 45% 45% at 90% 85%,rgba(200,41,58,.06),transparent);
}

.slide-bg--2 {
  background: radial-gradient(ellipse 65% 55% at 82% -5%,rgba(200,41,58,.12),transparent),
              radial-gradient(ellipse 45% 45% at 8% 88%,rgba(200,41,58,.07),transparent);
}

.slide-bg--3 {
  background: radial-gradient(ellipse 65% 55% at 50% -5%,rgba(200,41,58,.13),transparent),
              radial-gradient(ellipse 45% 45% at 88% 72%,rgba(200,41,58,.06),transparent);
}

.cta-row {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ══ CHI SIAMO PAGE ══════════════════════════════════════════ */
.page-hero-bg--chi-siamo {
  background: radial-gradient(ellipse 55% 45% at 30% 0%,rgba(200,41,58,.12),transparent);
}

.section--light .split-grid > div > p {
  color: var(--t-dark-2);
  line-height: 1.75;
  margin-bottom: 18px;
}

.stats-row--chi-siamo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  padding: 28px 24px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stat-num {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-lbl {
  font-size: 13px;
  color: var(--t3);
}

.hl-red { color: var(--red); }

/* ══ SERVICE PAGES ═══════════════════════════════════════════ */
.page-hero-bg--sviluppo {
  background: radial-gradient(ellipse 60% 50% at 10% 0%,rgba(200,41,58,.14),transparent),
              radial-gradient(ellipse 40% 40% at 90% 80%,rgba(200,41,58,.07),transparent);
}

.page-hero-bg--integration {
  background: radial-gradient(ellipse 60% 50% at 88% 0%,rgba(200,41,58,.14),transparent),
              radial-gradient(ellipse 40% 40% at 10% 80%,rgba(200,41,58,.07),transparent);
}

.page-hero-bg--outsourcing {
  background: radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,41,58,.14),transparent),
              radial-gradient(ellipse 40% 40% at 85% 75%,rgba(200,41,58,.07),transparent);
}

/* ══ LEGAL PAGES (privacy / cookie) ════════════════════════ */
.page-hero--legal { padding: 80px 0 60px; }

.page-hero-desc {
  color: var(--t3);
  margin-top: 12px;
  font-size: 1rem;
}

.legal-content a { color: var(--red-light); }

/* ══ 404 PAGE ════════════════════════════════════════════════ */
.page-hero-bg--404 {
  background: radial-gradient(ellipse 55% 45% at 30% 0%,rgba(200,41,58,.14),transparent),
              radial-gradient(ellipse 40% 40% at 90% 80%,rgba(200,41,58,.07),transparent);
}

/* ══ RESPONSIVE PAGES ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .split-grid { grid-template-columns: 1fr; gap: 48px; }
  .split-grid.reverse { direction: ltr; }
  .split-visual { display: none; }

  .vantaggi-grid { grid-template-columns: 1fr 1fr; }
  .contatti-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .page-hero { padding: 80px 0 60px; }

  .vantaggi-grid  { grid-template-columns: 1fr; }
  .servizio-grid  { grid-template-columns: 1fr; }
  .correlati-grid { grid-template-columns: 1fr; }
  .value-grid     { grid-template-columns: 1fr; }

  .page-hero-cta { flex-direction: column; }
  .page-hero-cta .btn { justify-content: center; }
}