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

.hero {
  position: relative;
  border-radius: 1rem;
  padding: clamp(2rem, 4vw, 4rem);
  color: #fff;
  overflow: hidden;

  /* Use relative path so it resolves to /public/css/hero.jpg */
  background:
    linear-gradient(180deg, rgba(18,18,18,.55), rgba(18,18,18,.55)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;

  min-height: 42vh;
  display: grid;
  align-items: end;
}


/* Optional subtle texture layer (if you have one) */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    url("/css/pattern.svg") repeat;
  opacity: .08;
  pointer-events: none;
}

.hero h1 {
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.hero p.lead {
  max-width: 60ch;
  text-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.features .card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
}

.pricing .card {
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.08);
}

.badge-best {
  position: relative;
  top: -2px;
}

.price {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.subtle {
  color: #6c757d;
}

@media (prefers-color-scheme: dark) {
  .features .card,
  .pricing .card {
    border-color: rgba(255,255,255,.08);
  }
}