/* ============================================================
   XEROUR — SERVICE PAGE ADDITIONS
============================================================ */

/* Feature grid (What's included) */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  transition: transform .25s ease, border-color .25s ease;
}
.feature-card:hover{ transform: translateY(-4px); border-color: var(--accent); }
.feature-card__icon{
  width: 42px; height:42px;
  border-radius: 12px;
  background: rgba(124,92,255,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.feature-card h3{ font-family: var(--font-display); font-size:1.05rem; margin-bottom:8px; }
.feature-card p{ color: var(--text-soft); font-size:0.9rem; line-height:1.55; }

/* FAQ accordion */
.faq-list{ max-width: 780px; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow:hidden;
}
.faq-item__q{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 24px;
  cursor:pointer;
  font-weight:600;
  font-size:0.98rem;
}
.faq-item__q::after{
  content:'+';
  font-size:1.3rem;
  color: var(--accent);
  transition: transform .25s ease;
  flex-shrink:0;
  margin-left: 16px;
}
.faq-item.is-open .faq-item__q::after{ transform: rotate(45deg); }
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease, padding .35s ease;
  color: var(--text-soft);
  font-size:0.9rem;
  line-height:1.6;
  padding: 0 24px;
}
.faq-item.is-open .faq-item__a{
  max-height: 300px;
  padding: 0 24px 22px;
}

/* Small breadcrumb-style label above a service hero heading */
.service-breadcrumb{
  color: var(--text-soft);
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.service-breadcrumb a{ color: var(--text-soft); }
.service-breadcrumb a:hover{ color: var(--accent); }

@media (max-width: 900px){
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .feature-grid{ grid-template-columns: 1fr; }
}