/* ===== Home page ===== */

.hero{
  padding: 84px 0 100px;
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(245,158,11,0.12), transparent 60%),
    var(--bg);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 56px;
  align-items:center;
}
.hero-copy h1{
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.01em;
}
.hero-sub{
  font-size: 1.08rem;
  max-width: 520px;
}
.hero-actions{
  display:flex;
  gap:14px;
  margin: 28px 0 40px;
  flex-wrap:wrap;
}
.hero-proof{
  display:flex;
  gap: 36px;
  flex-wrap: wrap;
}
.proof-item{ display:flex; flex-direction:column; gap:2px; }
.proof-item strong{
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1.5rem;
}
.proof-item span{ font-size: .82rem; color: var(--ink-faint); }

.hero-visual{ position:relative; }
.flow-card{
  padding: 26px;
  max-width: 380px;
  margin-left: auto;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}
.flow-card-head{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
  color: var(--navy);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}
.flow-line{ display:flex; flex-direction:column; gap: 12px; margin-bottom: 18px; }
.flow-row{
  display:flex;
  justify-content: space-between;
  font-size: .88rem;
}
.flow-row span:first-child{ color: var(--ink-faint); }
.flow-row span:last-child{ color: var(--ink); font-weight: 500; }
.flow-row .paid{ color: var(--teal); font-weight:700; }
.flow-connector{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: 22px;
}
.flow-connector .node-dot:nth-child(2){ background: var(--navy); opacity:.4; }
.flow-connector .node-dot:nth-child(3){ background: var(--teal); }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .flow-card{ margin: 0 auto; }
}

/* Problems & Solutions */
.problem-grid{ grid-template-columns: 1fr 1fr; }
.problem-card{ padding: 28px; }
.tag{
  display:inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.tag-problem{ background: #FEE2E2; color: var(--danger); }
.tag-solution{ background: var(--teal-100); color: var(--teal); }
@media (max-width: 700px){ .problem-grid{ grid-template-columns: 1fr; } }

/* Steps */
.steps{ background: var(--blue-100); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.steps-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.steps-row::before{
  content:'';
  position:absolute;
  top: 20px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--border) 0 8px, transparent 8px 14px);
}
.step{ position:relative; }
.step-num{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--amber-600);
  background: var(--bg);
  display:inline-block;
  padding-right: 12px;
  font-size: .95rem;
  margin-bottom: 14px;
  position:relative;
  z-index:1;
}
.step h3{ font-size: 1.15rem; }
@media (max-width: 800px){
  .steps-row{ grid-template-columns: 1fr 1fr; }
  .steps-row::before{ display:none; }
}
@media (max-width: 480px){ .steps-row{ grid-template-columns: 1fr; } }

/* Capabilities */
.cap-card{ padding: 30px; }
.cap-card h3{ font-size: 1.1rem; }
.cap-cta{ text-align:center; margin-top: 48px; }

/* Reviews */
.reviews{ background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.review-card{ padding: 28px; display:flex; flex-direction:column; }
.stars{ color: var(--amber); letter-spacing: 2px; margin-bottom: 14px; }
.review-card p{ flex:1; color: var(--ink); font-size: .96rem; }
.reviewer{ display:flex; align-items:center; gap: 12px; margin-top: 20px; }
.avatar{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size: .82rem;
  flex-shrink:0;
}
.reviewer div strong{ display:block; font-size: .92rem; color: var(--navy); }
.reviewer div span{ font-size: .8rem; color: var(--ink-faint); }

/* Estimator banner */
.estimator-banner{
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue-600) 100%);
  padding: 0;
}
.estimator-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 32px;
  padding: 64px 28px;
  flex-wrap:wrap;
}
.estimator-inner h2{ color:#fff; margin-bottom: 10px; }
.estimator-inner p{ color:#C9CEDD; max-width: 460px; margin:0; }