/* ============================================================
   ECOBA €” Pagina Servizi Tecnici
   ============================================================ */

/* ---- Hero: stati iniziali ---- */
.sv-eyebrow,
.sv-heading,
.sv-sub,
.sv-cta,
.sv-scroll { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sv-eyebrow,.sv-heading,.sv-sub,.sv-cta,.sv-scroll { opacity: 1 !important; transform: none !important; }
}

/* ---- HERO ---- */
.sv-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--white);
  position: relative;
  overflow: hidden;
  padding: 120px var(--pad) 80px;
}

.sv-hero__glow {
  position: absolute;
  bottom: -20%; right: 0;
  width: clamp(200px, 40vw, 520px);
  height: clamp(200px, 40vw, 520px);
  background: radial-gradient(circle at 100% 100%, var(--gray-100) 0%, transparent 70%);
  pointer-events: none;
}

.sv-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--s5);
  max-width: 900px;
  width: 100%;
}

.sv-eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.sv-back {
  color: var(--green-accent);
  display: flex; align-items: center; gap: 6px;
  transition: color .25s;
}
.sv-back:hover { color: var(--green-dark); }
.sv-sep { opacity: 0.3; }

.sv-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.sv-sub {
  font-size: var(--t-lg); font-weight: 300;
  color: var(--text-secondary);
  max-width: 56ch; line-height: 1.65;
}

.sv-cta {
  display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center;
  margin-top: var(--s2);
}

.sv-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); z-index: 1;
}
.sv-scroll .mono { font-size: 0.62rem; letter-spacing: 0.22em; }

/* ---- SERVICES LIST ---- */
.sv-list-section { background: var(--white); }

.sv-list-intro {
  font-size: var(--t-lg); font-weight: 300;
  margin-top: var(--s4);
  max-width: 52ch;
}

.sv-list-wrap { margin-top: clamp(40px, 6vw, 72px); }

.sv-list {
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.sv-item {
  background: var(--white);
  display: grid;
  grid-template-columns: 36px 40px 1fr auto;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-left: 3px solid transparent;
  transition: border-left-color .25s, background .25s;
  text-decoration: none;
}
.sv-item:hover {
  border-left-color: var(--green-accent);
  background: var(--green-light);
}

@media (max-width: 900px) {
  .sv-item { grid-template-columns: 36px 40px 1fr; }
  .sv-item__cta { display: none; }
}
@media (max-width: 600px) {
  .sv-item {
    grid-template-columns: 1fr;
    gap: var(--s3);
    padding: var(--s5);
  }
  .sv-item__num { display: none; }
}

.sv-item__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs); letter-spacing: 0.18em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sv-item__icon {
  width: 40px; height: 40px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--green-dark);
  flex-shrink: 0;
  transition: background .25s, color .25s;
}
.sv-item:hover .sv-item__icon { background: var(--green-dark); color: var(--white); }

.sv-item__body { min-width: 0; }

.sv-item__title {
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.sv-item__desc {
  font-size: var(--t-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 60ch;
}

.sv-item__cta {
  font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--green-accent);
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s, transform .25s, color .25s;
  flex-shrink: 0;
}
.sv-item:hover .sv-item__cta { opacity: 1; transform: translateX(0); }
.sv-item__cta:hover { color: var(--green-dark); }

/* ---- FEATURE: INSTALLAZIONE ---- */
.sv-feature-section { background: var(--gray-100); }

.sv-feature-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}
@media (max-width: 768px) { .sv-feature-grid { grid-template-columns: 1fr; } }

.sv-feature-section p {
  font-size: var(--t-lg); font-weight: 300;
  margin: var(--s4) 0 var(--s6);
  max-width: 44ch;
}

.sv-values {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.sv-value {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--text-primary);
}
.sv-value i { color: var(--green-accent); font-size: 0.9rem; flex-shrink: 0; }

/* Feature visual block */
.sv-stat-block {
  background: var(--green-dark);
  padding: clamp(var(--s5), 6vw, var(--s8)) clamp(var(--s4), 5vw, var(--s6));
  position: relative; overflow: hidden;
}
.sv-stat-block::before {
  content: 'HVAC';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem); font-weight: 800;
  color: rgba(45,122,74,0.1);
  letter-spacing: -0.05em;
  pointer-events: none; user-select: none;
  white-space: nowrap;
}
.sv-stat-block__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; position: relative; z-index: 1;
}
@media (max-width: 768px) {
  .sv-feature-grid { gap: var(--s8); }
  .sv-stat-block__grid { grid-template-columns: 1fr 1fr; }
  .sv-stat-item__num { font-size: var(--t-xl); }
  .sv-stat-block{
    padding:0;
  }
}
.sv-stat-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  padding: var(--s5);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s2);
  transition: background .3s;
}
.sv-stat-item:hover { background: rgba(45,122,74,0.18); }
.sv-stat-item i       { font-size: 1.6rem; color: var(--green-accent); }
.sv-stat-item__num    { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; color: var(--white); line-height: 1; }
.sv-stat-item__label  { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); line-height: 1.4; }

/* ---- FEATURE: ALTA QUOTA ---- */
.sv-quota-section {
  background: var(--gray-100);
  padding: var(--section) 0;
  position: relative; overflow: hidden;
}
.sv-quota-section::before { display: none; }

.sv-quota-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 768px) { .sv-quota-inner { grid-template-columns: 1fr; } }

.sv-quota-label  { color: var(--green-accent) !important; }
.sv-quota-heading { color: var(--green-dark) !important; }
.sv-quota-body {
  color: var(--text-secondary);
  font-size: var(--t-lg); font-weight: 300;
  line-height: 1.7;
  margin: var(--s4) 0 var(--s6);
  max-width: 44ch;
}

.sv-quota-section .section-eyebrow::before { background: var(--green-accent); }

.sv-quota-icons {
  display: flex; flex-direction: column; gap: var(--s3);
}
.sv-quota-icon-wrap {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background .25s, border-left-color .25s, box-shadow .25s;
}
.sv-quota-icon-wrap:hover {
  background: var(--green-light);
  border-left-color: var(--green-accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.sv-quota-icon-wrap i {
  font-size: 1.5rem; color: var(--green-dark); flex-shrink: 0;
}
.sv-quota-icon-wrap .mono {
  color: var(--text-secondary);
  font-size: var(--t-xs);
}

/* ---- FINANZIAMENTI ---- */
.sv-finance-section { background: var(--white); }

.sv-finance-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: start;
}
@media (max-width: 768px) { .sv-finance-grid { grid-template-columns: 1fr; } }

.sv-finance-section p {
  font-size: var(--t-lg); font-weight: 300;
  margin: var(--s4) 0;
  max-width: 42ch;
}

.sv-finance-steps {
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s6);
}
@media (min-width: 769px) { .sv-finance-steps { margin-top: 0; } }

.sv-finance-step {
  background: var(--white);
  display: flex; align-items: flex-start; gap: var(--s5);
  padding: var(--s5) var(--s5);
  border-left: 3px solid transparent;
  transition: border-left-color .25s, background .25s;
}
.sv-finance-step:hover {
  border-left-color: var(--green-accent);
  background: var(--green-light);
}
.sv-finance-step__num {
  font-size: var(--t-xs); letter-spacing: 0.18em;
  color: var(--green-accent);
  flex-shrink: 0; margin-top: 3px;
  min-width: 24px;
}
.sv-finance-step h4 { font-size: var(--t-base); font-weight: 600; margin-bottom: 4px; }
.sv-finance-step p  { font-size: var(--t-sm); line-height: 1.55; margin: 0; }