/* ==========================================================================
   JoomlaHelpNow — Homepage
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-24) var(--space-20);
  overflow: hidden;
  background:
    radial-gradient(680px 420px at 88% -10%, var(--purple-100) 0%, rgba(247,242,252,0) 70%),
    var(--white);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  /* align-items: center; */
}
.hero__eyebrow-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.hero__title {
  font-size: var(--fs-5xl);
  margin-bottom: var(--space-6);
}
.hero__title .text-accent { position: relative; }
.hero__lede {
  font-size: var(--fs-md);
  color: var(--slate-500);
  max-width: 540px;
  margin-bottom: var(--space-8);
  line-height: var(--lh-snug);
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }
.hero__proof { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.hero__proof-avatars { display: flex; }
.hero__proof-avatars span {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-100);
  border: 2px solid var(--white);
  margin-left: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: var(--purple-600);
}
.hero__proof-avatars span:first-child { margin-left: 0; }
.hero__proof-text { font-size: var(--fs-xs); color: var(--slate-500); }
.hero__proof-text strong { color: var(--navy-800); }

.hero__visual { position: relative; }
.hero__visual .lead-form { position: relative; max-width: 460px; margin-inline: auto; }
.hero__visual-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, rgba(109,58,174,0.16) 0%, rgba(109,58,174,0) 65%);
  z-index: -1;
}
.diagnostic-panel { max-width: 460px; margin-inline: auto; }

.trust-strip { padding-block: var(--space-10); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-strip__label { text-align: center; font-size: var(--fs-xs); color: var(--slate-400); margin-bottom: var(--space-6); text-transform: uppercase; letter-spacing: 0.08em; }
.trust-strip__logos { display: flex; align-items: center; justify-content: center; gap: var(--space-10); flex-wrap: wrap; opacity: 0.7; }
.trust-strip__logos span { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--slate-500); }

.problem-list { display: flex; flex-direction: column; gap: var(--space-5); }
.problem-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.problem-item__mark {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--amber-100); color: var(--amber-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.problem-item__text strong { color: var(--navy-800); display: block; margin-bottom: 2px; }
.problem-item__text span { font-size: var(--fs-sm); color: var(--slate-500); }

.proof-grid { align-items: stretch; }
.proof-card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.proof-card__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--purple-600); background: var(--purple-50); }
.proof-card__icon .icon { width: 21px; height: 21px; }
.proof-card h3,
.proof-card__title { margin-block: var(--space-5) var(--space-2); font-size: var(--fs-lg); }
.proof-card p { color: var(--slate-500); font-size: var(--fs-sm); }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .diagnostic-panel { max-width: 420px; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero__title { font-size: var(--fs-3xl); }
  .cta-band { padding: var(--space-10) var(--space-6); }
}