/* Home-page element system for the 5 main booking pages (Tantric, Yoni, Ladies, Couples, Hotel).
   Mirrors the homepage's "Why Choose Me", "Guarantee", "Trust & Privacy", "Benefits" and stats-bar
   sections exactly in copy, colour and animation, without depending on the Tailwind build. */

.hp-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.hp-reveal.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hp-reveal-delay { transition-delay: 0.12s; }

.hp-section { padding: 3.7rem 0; }
.hp-section--soft { background: rgba(255, 255, 255, .48); border-block: 1px solid rgba(23, 17, 19, .07); }

.hp-eyebrow {
  margin: 0 0 .85rem;
  color: #FF0096;
  font-family: "Raleway", "Segoe UI", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.hp-title {
  max-width: 42ch;
  margin: 0 0 .9rem;
  color: #FF0096;
  font-family: "Raleway", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
}

.hp-subcopy {
  max-width: 62ch;
  margin: 0 0 1.6rem;
  color: #000000;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: .98rem;
  line-height: 1.55;
}

.hp-section--centered .hp-title,
.hp-section--centered .hp-subcopy { margin-left: auto; margin-right: auto; }

/* ---------- SEO intro lead (hero -> Why Choose Me) ---------- */

.hp-seo-lead { padding: 1.7rem 0 .3rem; }

.hp-seo-lead p {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #3f2f31;
}

@media (max-width: 720px) {
  .hp-seo-lead { padding: 1.1rem 0 .2rem; }
  .hp-seo-lead p { font-size: .92rem; text-align: center; }
}

/* ---------- Stats bar (hero trust strip) ---------- */

.hp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2.1rem;
}

.hp-stat-item { min-width: 0; padding: .4rem 1rem .55rem; border-right: 1px solid rgba(182, 102, 111, .4); text-align: center; }
.hp-stat-item:last-child { border-right: 0; }
.hp-stat-icon { width: 1.5rem; height: 1.5rem; margin: 0 auto; color: #B6666F; opacity: .95; }
.hp-stat-kicker { margin: .55rem 0 0; color: #B6666F; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.hp-stat-value { display: block; margin-top: .35rem; color: #000000; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-stat-copy { display: block; margin-top: .22rem; color: #000000; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 720px) {
  .hp-stats { margin-top: 1.55rem; }
  .hp-stat-item { padding: .35rem .15rem .45rem; }
  .hp-stat-icon { width: 1.2rem; height: 1.2rem; }
  .hp-stat-kicker { margin-top: .42rem; font-size: .51rem; letter-spacing: .11em; }
  .hp-stat-value { margin-top: .25rem; font-size: .78rem; }
  .hp-stat-copy { margin-top: .16rem; font-size: .46rem; letter-spacing: .07em; }
}

/* ---------- Why Choose Me (9-icon grid) ---------- */

.hp-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem .6rem;
  margin-top: 2rem;
}

.hp-why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 7.6rem;
  padding: .3rem .2rem;
  text-align: center;
}

.hp-why-item svg { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }

.hp-why-item h3 {
  margin: 0;
  color: #000000;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.28;
}

@media (max-width: 720px) {
  .hp-why-grid { gap: .9rem .35rem; margin-top: 1.4rem; }
  .hp-why-item { min-height: 6.4rem; gap: .4rem; }
  .hp-why-item svg { width: 2rem; height: 2rem; }
  .hp-why-item h3 { font-size: .68rem; }
}

/* ---------- Guarantee (progress bars) ---------- */

.hp-guarantee-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

.hp-guarantee-top { display: flex; align-items: center; justify-content: space-between; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: .92rem; }
.hp-guarantee-top span:first-child { color: #000000; }
.hp-guarantee-top span:last-child { color: #FF0096; font-weight: 700; }

.hp-guarantee-track { margin-top: .7rem; height: .5rem; border-radius: 999px; background: rgba(182, 102, 111, .16); overflow: hidden; }

.hp-guarantee-fill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #FF0096;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hp-guarantee-fill.is-filled { transform: scaleX(1); }

/* ---------- Trust & Privacy (6-card grid) ---------- */

.hp-privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 2rem;
}

.hp-privacy-card {
  position: relative;
  min-height: 10.5rem;
  border-radius: 1.15rem;
  padding: 1rem .9rem;
  background: #FFFFFF;
  border: 1px solid rgba(182, 102, 111, .18);
  box-shadow: 0 14px 30px rgba(182, 102, 111, .08);
  text-align: center;
}

.hp-privacy-icon {
  width: 2.3rem;
  height: 2.3rem;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #000000;
  background: rgba(255, 0, 150, .06);
  border: 1px solid rgba(182, 102, 111, .2);
}

.hp-privacy-title { margin: .65rem 0 0; color: #000000; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: .87rem; font-weight: 700; line-height: 1.25; }
.hp-privacy-copy { margin: .35rem 0 0; color: #000000; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: .74rem; line-height: 1.4; }

@media (max-width: 720px) {
  .hp-privacy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1.4rem; }
  .hp-privacy-card { min-height: 8.8rem; padding: .75rem .55rem; border-radius: .9rem; }
  .hp-privacy-icon { width: 1.9rem; height: 1.9rem; }
  .hp-privacy-title { margin-top: .5rem; font-size: .74rem; }
  .hp-privacy-copy { margin-top: .3rem; font-size: .64rem; }
}

/* ---------- Benefits (pink pill list) ---------- */

.hp-benefits-section { background: #FCE8E8; }
.hp-benefits-section .hp-eyebrow { color: #B6666F; }
.hp-benefits-section .hp-title { color: #FF0096; }
.hp-benefits-section .hp-subcopy { color: #000000; }

.hp-benefits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hp-benefits-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-radius: 1.35rem;
  padding: 1rem 1.1rem;
  background: #FFFFFF;
  border: 1px solid rgba(182, 102, 111, .16);
  box-shadow: 0 18px 40px rgba(182, 102, 111, .08);
  color: #000000;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
}

.hp-benefits-dot { margin-top: .42rem; width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 999px; background: #FF0096; }

@media (max-width: 720px) {
  .hp-benefits-list { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.4rem; }
  .hp-benefits-item { padding: .8rem .9rem; font-size: .86rem; border-radius: 1.05rem; }
}

/* ---------- How To Book (6-step grid, numbered) ---------- */

.hp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem .75rem;
  margin-top: 2rem;
}

.hp-step { text-align: center; }
.hp-step-label { margin: 0; color: #FF0096; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hp-step svg { width: 2.7rem; height: 2.7rem; margin: 1rem auto 0; }
.hp-step h3 { margin: 1rem 0 0; color: #000000; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: .85rem; font-weight: 400; line-height: 1.35; }

@media (max-width: 720px) {
  .hp-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem .6rem; margin-top: 1.4rem; }
  .hp-step-label { font-size: .62rem; letter-spacing: .12em; }
  .hp-step svg { width: 2.2rem; height: 2.2rem; margin-top: .8rem; }
  .hp-step h3 { margin-top: .8rem; font-size: .76rem; }
}

/* ---------- Related Articles (blog slider) ---------- */

.hp-blog-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.75rem, 86%);
  gap: 1rem;
  margin-top: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .35rem;
}

.hp-blog-slider::-webkit-scrollbar { display: none; }

.hp-blog-card {
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #FFFFFF;
  border: 1px solid rgba(182, 102, 111, .18);
  box-shadow: 0 14px 30px rgba(182, 102, 111, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hp-blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(182, 102, 111, .14); }

.hp-blog-card-image { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }

.hp-blog-card-body { padding: 1.1rem 1.15rem 1.3rem; }

.hp-blog-card-kicker { margin: 0 0 .5rem; color: #FF0096; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.hp-blog-card h3 { margin: 0 0 .5rem; color: #000000; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: 1.02rem; font-weight: 700; line-height: 1.28; }

.hp-blog-card p { margin: 0; color: #3f2f31; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-size: .82rem; line-height: 1.5; }

.hp-blog-card-link { display: inline-flex; margin-top: .8rem; color: #FF0096; font-family: "Raleway", "Segoe UI", Arial, sans-serif; font-size: .78rem; font-weight: 800; }

@media (max-width: 720px) {
  .hp-blog-slider { grid-auto-columns: minmax(14.5rem, 82%); gap: .7rem; margin-top: 1.4rem; }
  .hp-blog-card-body { padding: .9rem .95rem 1.1rem; }
  .hp-blog-card h3 { font-size: .92rem; }
  .hp-blog-card p { font-size: .76rem; }
}