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

.hero {
  position: relative;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 60%, var(--surface) 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 50vw; height: 50vw;
  max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, var(--mint-050) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
}
.hero-copy h1 { margin-top: var(--sp-3); }

.hero-visual { max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
@media (max-width: 960px) { .hero-visual { margin-inline: 0; max-width: 480px; } }
.hero-photo { box-shadow: var(--shadow-lg); }
.hero-quote-card { border-top: 4px solid var(--mint); }

.how-step { text-align: left; }
.how-step-img { margin-bottom: var(--sp-5); }
.how-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}
.how-step p { margin-top: var(--sp-2); color: var(--ink-500); font-size: var(--fs-sm); }

.van-card { text-align: left; }
.van-card-img { margin-bottom: var(--sp-4); margin-inline: calc(var(--sp-6) * -1); margin-block-start: calc(var(--sp-6) * -1); width: calc(100% + var(--sp-6) * 2); border-radius: var(--r-lg) var(--r-lg) 0 0; }


.review-card { text-align: left; }

.helper-art {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--mint-050), var(--mint-100));
  display: flex; align-items: center; justify-content: center;
  color: var(--mint-700);
}

.coverage-photo { margin-bottom: var(--sp-7); }

.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1.5px solid var(--line);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--mint); background: var(--mint-050); }