/* ══════════════════════════════════════════════════════════════
   HOME PAGE — layout matches Figma; colors/buttons/logo/footer
   come from tokens.css + components.css per site-wide decisions.
   ══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.hero-section {
  min-height: 100vh;
  padding-top: var(--nav-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-10);
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-12);
}
.hero-h1 {
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 700; line-height: 1.08;
  color: var(--c-charcoal); margin-bottom: var(--space-3);
  letter-spacing: -.02em;
}
.hero-p {
  font-size: var(--fs-lg); color: var(--c-muted);
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: var(--space-5);
}
.hero-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hero-right {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: calc(-1 * var(--space-6));
  align-self: stretch;
}
.hero-illustration {
  width: 100%;
  max-width: 600px;
  display: block;
  object-fit: contain;
  object-position: bottom center;
}

/* ── PROBLEM SECTION (Figma: soft blob behind phone + centered copy) ── */
.problem-section {
  padding: var(--space-24) var(--space-6);
  background: linear-gradient(180deg, #fdfaff 0%, var(--c-white) 100%);
}
.problem-inner {
  max-width: var(--max-w); margin: 0 auto;
  position: relative;
  display: flex; align-items: center;
  min-height: 420px;
}
.problem-blob {
  position: absolute;
  left: 240px; right: 60px; top: 50%; transform: translateY(-50%);
  height: 300px;
  background: rgba(61,166,45,0.26);
  border-radius: var(--radius-xl);
  z-index: 0;
}
.phone-mockup-wrap {
  position: relative;
  z-index: 2;
  width: 340px;
  flex-shrink: 0;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18));
}
.phone-mockup-wrap img { width: 100%; display: block; }
.problem-copy {
  position: relative; z-index: 1;
  flex: 1;
  text-align: center;
  padding: 0 var(--space-10);
  margin-left: -40px;
}
.problem-copy h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800; line-height: 1.2;
  color: var(--c-charcoal); margin-bottom: var(--space-4);
  letter-spacing: -.01em;
}
.problem-copy p {
  font-size: var(--fs-lg); color: var(--c-muted);
  line-height: 1.7; font-style: italic; font-weight: 300;
  max-width: 460px;
  margin: 0 auto;
}

/* ── TESTIMONIALS ── */
.testimonials-section { padding: var(--space-24) var(--space-6); background: linear-gradient(180deg, var(--c-white) 0%, var(--c-off-white) 100%); }
.testimonials-inner { max-width: var(--max-w); margin: 0 auto; }
.testimonials-inner .section-title { margin-bottom: var(--space-12); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.t-card {
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  padding: var(--space-8); background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.t-quote-icon { width: 32px; height: 32px; margin-bottom: var(--space-4); color: var(--c-primary); }
.t-text { font-size: var(--fs-md); color: var(--c-body-text); line-height: 1.75; margin-bottom: var(--space-6); }
.t-author { display: flex; align-items: center; gap: var(--space-4); }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: var(--c-white); font-size: var(--fs-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.t-name { font-size: var(--fs-md); font-weight: 700; color: var(--c-charcoal); }
.t-role { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 2px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: var(--space-10) var(--space-6) 0; }
  .hero-left { padding-top: 0; }
  .hero-right { align-items: center; margin-bottom: 0; align-self: auto; }
  .hero-illustration { max-width: 320px; }
  .problem-inner { flex-direction: column; gap: var(--space-6); min-height: 0; padding: var(--space-10) 0; }
  .phone-mockup-wrap { width: 200px; }
  .problem-copy { margin-left: 0; padding: 0 var(--space-4); }
  .problem-blob { left: 0; width: 100%; height: 90%; }
  .testimonials-grid { grid-template-columns: 1fr; }
}