/* Homepage styles - Gains Financial
   Extends /css/site.css (loads after it). */

/* ---------- Hero ---------- */
.home-hero { padding: 0; }
.home-hero .hero-bg { background-image: url('/images/Gains-Financial-0010.jpg'); }
.home-hero .hero-inner { padding: 120px 0 130px; max-width: 680px; }
.home-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.home-hero .lede { font-size: 1.22rem; max-width: 56ch; }
.home-hero .hero-actions { gap: 16px; }
.home-hero .trust-line {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c4d1dd;
  font-size: .92rem;
  font-weight: 600;
}
.home-hero .trust-line svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--green-400); }

/* ---------- Section heading helper ---------- */
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--ink-500); font-size: 1.06rem; margin: 0; }

/* ---------- Value pillars ---------- */
#how-it-works { background: var(--green-50); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: inherit;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--green-200); text-decoration: none; }
.pillar .pillar-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--green-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: var(--green-600);
}
.pillar .pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pillar p { color: var(--ink-500); font-size: 1rem; margin: 0 0 18px; flex: 1; }
.pillar .pillar-link { font-weight: 700; color: var(--navy-700); font-size: .95rem; }
.pillar:hover .pillar-link { color: var(--green-600); }

/* ---------- Explainers ---------- */
.explainers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .explainers { grid-template-columns: 1fr; } }
.explainer {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-500);
  border-radius: var(--radius);
  padding: 32px 34px;
  box-shadow: var(--shadow-1);
}
.explainer .eyebrow { margin-bottom: 10px; }
.explainer h3 { font-size: 1.32rem; margin-bottom: 12px; }
.explainer .answer { color: var(--ink-700); font-size: 1.06rem; margin-bottom: 16px; }
.explainer .read-more { font-weight: 700; color: var(--navy-700); }
.explainer .read-more:hover { color: var(--gold-500); }

/* ---------- Who this is for ---------- */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .audience { grid-template-columns: 1fr; gap: 36px; } }
.audience-img { border-radius: var(--radius); box-shadow: var(--shadow-2); width: 100%; height: 100%; object-fit: cover; }
.audience-copy h2 { margin-bottom: 18px; }
.audience-copy .lede { color: var(--ink-700); font-size: 1.1rem; margin-bottom: 24px; }
.audience-list { list-style: none; margin: 0; }
.audience-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 16px;
  color: var(--ink-700);
  font-size: 1.04rem;
  line-height: 1.5;
}
.audience-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-500) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/13px no-repeat;
}
.audience-list li strong { color: var(--navy-800); }

/* ---------- Blog preview ---------- */
.blog-preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.blog-preview-head .section-head { margin-bottom: 0; }
.blog-preview-head .view-all { white-space: nowrap; font-weight: 700; color: var(--navy-700); }
.blog-preview-head .view-all:hover { color: var(--gold-500); }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 980px) { .blog-preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-preview-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.home-cta .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.home-cta .cta-text { max-width: 620px; }
.home-cta h2 { color: #fff; margin-bottom: 10px; }
.home-cta p { color: #c4d1dd; margin: 0; font-size: 1.06rem; }
.home-cta .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Reveal on dark hero ---------- */
.home-hero .reveal { transition-delay: .05s; }
.home-hero .reveal:nth-child(2) { transition-delay: .15s; }
.home-hero .reveal:nth-child(3) { transition-delay: .25s; }