/* =========================
   CARDS / SERVICES / STEPS / TESTIMONIALS / FAQ (FORCE LIGHT)
========================= */

/* Cards grid */
.cards{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .cards{ grid-template-columns: 1fr; } }

/* Card */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}

.card p{ color: var(--muted); margin:0; }

.card-icon{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;

  /* light-friendly */
  background: rgba(3,7,18,0.03);
  border: 1px solid rgba(3,7,18,0.08);

  margin-bottom: 10px;
}

/* Callout */
.callout{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(94,234,212,0.28);
  background: rgba(94,234,212,0.08);
  color: var(--text);
}

/* Services */
.services{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .services{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .services{ grid-template-columns: 1fr; } }

.service{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.service p{ color: var(--muted); margin:0; }

.service-link{
  margin-top: auto;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: var(--primary);
  font-weight: 600;
}

.service-link::after{ content:"→"; opacity: 0.9; }

.service-highlight{
  background: linear-gradient(135deg, rgba(94,234,212,0.10), rgba(59,130,246,0.08));
  border-color: rgba(94,234,212,0.28);
}

/* Steps */
.steps{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 12px;
}

.step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}

.step-num{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(94,234,212,0.12);
  border: 1px solid rgba(94,234,212,0.28);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
}

/* Checklist */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
  color: var(--muted);
}

.checklist li{
  display:flex;
  gap: 10px;
}

.checklist li::before{
  content:"✓";
  display:inline-flex;
  width: 20px;
  height: 20px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(94,234,212,0.12);
  border: 1px solid rgba(94,234,212,0.28);
  color: var(--text);
  flex: 0 0 auto;
}

/* Testimonials (basic/fallback) */
.testimonials{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .testimonials{ grid-template-columns: 1fr; } }

.quote{
  margin:0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}

.quote blockquote{
  margin:0 0 10px;
  font-size: 16px;
  color: var(--text);
}

.quote figcaption{ color: var(--muted); font-size: 14px; }

.trust-strip{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);

  /* light-friendly */
  background: rgba(3,7,18,0.02);

  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}

/* FAQ (basic/fallback) - старый дизайн, можно удалить если не нужен */
.faq{ display:grid; gap: 10px; }

.faq-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.faq-q{
  width:100%;
  text-align:left;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  cursor:pointer;
}

.faq-a{ padding: 0 16px 14px; color: var(--muted); }

.chev{
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  opacity: 0.8;
}

.faq-q[aria-expanded="true"] .chev{ transform: rotate(-135deg); }