.hx-hero {
  --hx-sky-top: #1f7ae0;
  --hx-sky-mid: #4fa3f0;
  --hx-sky-low: #a9d6fb;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, var(--hx-sky-top) 0%, var(--hx-sky-mid) 55%, var(--hx-sky-low) 100%);
  isolation: isolate;
}

/* ---------- Clouds ---------- */
.hx-clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-cloud {
  position: absolute;
  left: -30%;
  width: var(--w, 260px);
  height: calc(var(--w, 260px) * 0.32);
  background: #fff;
  border-radius: 999px;
  opacity: var(--o, 0.9);
  filter: blur(1px);
  animation: hx-drift var(--d, 90s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.hx-cloud::before, .hx-cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.hx-cloud::before { width: 48%; height: 150%; left: 14%; bottom: 28%; }
.hx-cloud::after  { width: 36%; height: 120%; right: 14%; bottom: 30%; }
@keyframes hx-drift { to { transform: translateX(160vw); } }

/* ---------- Intro ---------- */
.hx-intro {
  width: min(920px, 92%);
  text-align: center;
  padding: clamp(56px, 10vh, 120px) 0 0;
}
.hx-title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
}
.hx-lead {
  margin: 1.4rem auto 0;
  max-width: 56ch;
  font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}
.hx-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 2rem;
}
.hx-btn {
  display: inline-block;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  border: 1.5px solid #fff;
  transition: background-color .2s, color .2s, transform .2s;
}
.hx-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hx-btn--solid { background: #fff; color: #1760b8; }
.hx-btn--solid:hover { background: #eaf4ff; transform: translateY(-2px); }
.hx-btn--ghost { background: transparent; color: #fff; }
.hx-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }

/* ---------- Spiral carousel ---------- */
.hx-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 420px;
  margin-top: 2rem;
  perspective: 1100px;
  perspective-origin: 50% 40%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hx-stage.is-dragging { cursor: grabbing; }

.hx-card {
  position: absolute;
  left: 50%;
  bottom: 56px;
  width: 320px;
  margin-left: -160px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  color: #12324f;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(10, 50, 110, 0.28);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-user-drag: none;
}
.hx-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hx-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--c1, #7cc0ff), var(--c2, #2f7fe0));
  display: block;
}
.hx-media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hx-info { padding: 20px 10px; text-align: left; padding-left: 10px; }
.hx-name { display: block; font-size: 1.15rem; font-weight: 500; line-height: 1.25;  padding: 1px 0;  padding-left: 10px;}
.hx-price { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 300; color: #4d6a85; text-align: left;  padding-left: 10px;}

/* Rating: revealed only as the card reaches the middle */
.hx-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  max-height: 0;
  padding: 10px 0;
  text-align: center;
  opacity: 0;
  overflow: hidden;
  font-size: 0.85rem;
  color: #4d6a85;
  padding-left: 10px;
}
.hx-stars {
  --r: 5;
  font-size: 1.15rem;
  letter-spacing: 2px;
  line-height: 1;
  text-align: center;
  background: linear-gradient(90deg, #f5a623 calc(var(--r) / 5 * 100%), #d3dfec calc(var(--r) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 600px) {
  .hx-card { width: 240px; margin-left: -120px; bottom: 40px; }
  .hx-stage { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cloud { animation: none; left: 10%; }
}