/* ============================================
   suportti.me — Pessoa Física
   ============================================ */

/* Hero com tom diferente — roxo/índigo em vez de azul frio */
.pf-hero {
  background: linear-gradient(135deg, #0f172a 0%, #2d1b69 60%, #1a0f3c 100%);
}
.pf-hero__bg {
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(139,92,246,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(99,102,241,.12) 0%, transparent 70%);
}
.pf-badge {
  background: rgba(139,92,246,.15) !important;
  color: #c4b5fd !important;
  border-color: rgba(139,92,246,.3) !important;
}
.pf-hero .highlight { color: #a78bfa; }
.pf-orb--1 { background: rgba(99,102,241,.28) !important; }
.pf-orb--2 { background: rgba(139,92,246,.22) !important; }

/* Botão WhatsApp verde no hero */
.btn--wa {
  background: #25d366; color: #fff;
}
.btn--wa:hover {
  background: #1ebe5c; transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
}

/* CTA banner tom roxo */
.pf-cta {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #5b21b6 100%) !important;
}

/* ---- Cards de problemas ---- */
.pf-problemas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform .25s, box-shadow .25s;
}
.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pf-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: rgba(99,102,241,.08);
  color: #6366f1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pf-card__icon svg { width: 24px; height: 24px; }
.pf-card h3 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.pf-card p  { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* Card destaque — ocupa coluna extra no grid */
.pf-card--destaque {
  grid-column: span 1;
  border-color: rgba(99,102,241,.3);
  background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(139,92,246,.04));
}
.pf-card__icon--destaque {
  background: rgba(139,92,246,.12) !important;
  color: #7c3aed !important;
}

/* ---- Passos / Como funciona ---- */
.pf-steps {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.pf-step {
  flex: 1; min-width: 220px; max-width: 300px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform .25s, box-shadow .25s;
}
.pf-step:hover { transform: translateY(-4px); }
.pf-step__num {
  font-size: 40px; font-weight: 800; line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 14px; display: block;
}
.pf-step__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(139,92,246,.15);
  color: #a78bfa;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pf-step__icon svg { width: 22px; height: 22px; }
.pf-step h3 { font-size: 17px; font-weight: 700; color: var(--text-white); margin-bottom: 10px; }
.pf-step p  { font-size: 14px; color: var(--text-light); line-height: 1.65; }
.pf-step p strong { color: #c4b5fd; }
.pf-step__arrow { font-size: 28px; color: var(--text-light); padding-top: 50px; }

/* ---- Modalidades ---- */
.pf-modalidades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.pf-modalidade {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--bg-card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.pf-modalidade__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(139,92,246,.15);
  color: #a78bfa;
  display: flex; align-items: center; justify-content: center;
}
.pf-modalidade__icon svg { width: 24px; height: 24px; }
.pf-modalidade h4 { font-size: 15px; font-weight: 700; color: var(--text-white); margin-bottom: 6px; }
.pf-modalidade p  { font-size: 14px; color: var(--text-light); line-height: 1.65; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pf-problemas { grid-template-columns: repeat(2, 1fr); }
  .pf-modalidades { grid-template-columns: 1fr; }
  .pf-step__arrow { display: none; }
}

@media (max-width: 580px) {
  .pf-problemas { grid-template-columns: 1fr; }
  .pf-card--destaque { grid-column: span 1; }
  .pf-steps { flex-direction: column; align-items: center; }
  .pf-step { max-width: 100%; width: 100%; }
}