/* =========================
   SATORI HERO
========================= */

.satori-hero {
  position: relative;
  height: 100vh;                /* lock to full screen */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* truly center content vertically */
  align-items: center;
  padding-top: 100px;
  padding: 0 20px;              /* remove top/bottom padding */
  background: #000;
  overflow: hidden;
  text-align: center;
}


.satori-hero::after {
  content: "";
  position: absolute;
  bottom: 0; /* stay locked to the bottom */
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 100%;

  /* Move gradient center UP by shifting "at center X%" */
  background: radial-gradient(
    ellipse 100% 50% at center 80%,  /* <-- 80% pushes the glow up */
    rgba(60, 60, 60, 0.55) 0%,
    rgba(30, 30, 30, 0.25) 60%,
    rgba(0, 0, 0, 0) 100%
  );

  z-index: 1;
  pointer-events: none;
}


/* make sure chair/text stay on top */
.hero-product,
.hero-heading,
.hero-tagline,
.button-container {
  position: relative;
  z-index: 2;
  margin-top: 80px;
}


/* Shared headline */
.hero-heading {
  font-family: "Poppins", sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1.1;
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: normal;
  text-align: center;
}
#hero .hero-content {
  padding-top: 120px; /* adjust depending on nav height */
}


/* BACK headline (solid colors) */
.hero-heading.back {
  z-index: 1;
  color: #ffffff;
}
.hero-heading.back span {
  color: #d4af37;
}

p.tag {
  font-size: clamp(1.5rem, 2vw, 2rem); /* larger than default */
  color: #fff;                         /* white text */
  font-weight: 400;                    /* optional: bolder */
  margin-top: 15px;                    /* optional spacing */
}


/* FRONT outline headline (always above chair) */
.hero-heading.front {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.9);
  overflow: hidden;
  display: inline-block;
}

.hero-heading.front span {
  -webkit-text-stroke: 1px #d4af37;
}

/* Chair */
.hero-product {
  position: relative;
  z-index: 2;
}

.hero-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);

  mix-blend-mode: screen;
  filter: blur(2px) brightness(1.2); /* 👈 subtle blur locked in */

  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}



.hero-chair {
  max-height: 55vh;   /* chair won’t exceed 65% of screen height */
  max-width: 90%;     /* keep it responsive */
  height: auto;
  object-fit: contain;
}

/* Tagline + buttons */
.hero-tagline {
  font-family: "Lato", sans-serif;
  color: var(--muted);
  margin: 0 auto 50px;
  max-width: 700px;
  z-index: 4;
  position: relative;
  font-size: clamp(1.25rem, 2vw, 1.5rem); /* ~20–24px */
  line-height: 1.6;
  max-width: 720px;
}
.hero-tagline {
  margin-bottom: 0;
  transform: translateY(-30px); /* move tagline and buttons upward */
}

/* Move hero buttons slightly upward */
.button-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 4;
  position: relative;
  margin-top: -30px; /* 👈 moves buttons upward */
}

.hero-btn {
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: #111;
  text-decoration: none !important; /* remove underline */
  display: inline-block;
  transition: all 0.35s ease-out; /* smoother animation */
}

/* Buy Now button */
.buy-now {
  background: var(--gold);
  color: #111 !important;
}

/* Book Demo button */
.book-demo {
  background: transparent;
  border: 2px solid var(--gold);
  color: #d4af37 !important;
}

/* Hover states */
.hero-btn:hover {
  transform: translateY(-2px);
}

.buy-now:hover {
  background: #b9972e;
  color: #111;
}

.book-demo:hover {
  background: var(--gold);
  color: #111 !important;
}

.hero-chair,
.hero-heading.back,
.hero-heading.front {
  will-change: transform;
}