.membership-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(470px, 29vw, 560px);
  overflow: hidden;
  background: #302a2e;
  color: #fff;
}

.membership-hero-image,
.membership-hero-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.membership-hero-image {
  display: block;
  object-fit: cover;
  object-position: center 50%;
  animation: membership-image-enter 1s cubic-bezier(.2,.7,.25,1) both;
}

.membership-hero-shade {
  background: linear-gradient(90deg, rgb(20 21 25 / 43%) 0%, rgb(28 23 27 / 28%) 36%, rgb(25 21 24 / 5%) 72%);
}

.membership-hero-inner {
  display: flex;
  align-items: center;
  width: min(1550px, calc(100% - 48px));
  min-height: inherit;
  margin-inline: auto;
  padding-block: 34px;
}

.membership-hero-card {
  width: min(495px, 50%);
  padding: clamp(30px, 3vw, 44px);
  border: 1px solid rgb(255 255 255 / 27%);
  border-radius: 24px;
  background: rgb(44 38 42 / 45%);
  box-shadow: 0 22px 64px rgb(12 11 15 / 24%);
  backdrop-filter: blur(15px) saturate(115%);
  -webkit-backdrop-filter: blur(15px) saturate(115%);
  animation: membership-card-enter .75s .08s cubic-bezier(.2,.7,.25,1) both;
}

.membership-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 19px;
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
}

.membership-hero-eyebrow span {
  flex: 0 0 25px;
  height: 2px;
  background: #efbd42;
}

.membership-hero-card h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(3rem, 4vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}

.membership-hero-title-accent {
  background: linear-gradient(100deg, #f2c65f 4%, #bd91da 82%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.membership-hero-description {
  max-width: 39ch;
  margin: 24px 0 0;
  color: rgb(255 255 255 / 94%);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 500;
  line-height: 1.7;
  text-shadow: 0 1px 10px rgb(0 0 0 / 18%);
}

html[lang="th"] .membership-hero-eyebrow {
  letter-spacing: .025em;
}

html[lang="th"] .membership-hero-card h1 {
  font-family: Prompt, Inter, sans-serif;
  font-size: clamp(2.65rem, 6vw, 3.7rem);
  letter-spacing: 0;
  line-height: 1.35;
}

html[lang="th"] .membership-hero-description {
  line-height: 1.9;
}

@media (max-width: 900px) {
  .membership-hero { min-height: clamp(490px, 64vw, 620px); }
  .membership-hero-inner { width: min(760px, calc(100% - 40px)); }
  .membership-hero-card { width: min(490px, 66%); }
  .membership-hero-card h1 { font-size: clamp(2.8rem, 6vw, 3.8rem); }
}

@media (max-width: 640px) {
  .membership-hero { min-height: clamp(620px, 160vw, 760px); }
  .membership-hero-image { object-position: 64% center; }
  .membership-hero-shade {
    background: linear-gradient(180deg, rgb(20 21 25 / 6%) 0%, rgb(20 21 25 / 4%) 40%, rgb(20 21 25 / 45%) 100%);
  }
  .membership-hero-inner {
    align-items: flex-end;
    width: calc(100% - 32px);
    padding-block: 22px;
  }
  .membership-hero-card {
    width: 100%;
    padding: clamp(24px, 7vw, 34px);
    border-radius: 20px;
    background: rgb(39 34 40 / 58%);
  }
  .membership-hero-eyebrow { margin-bottom: 13px; font-size: .68rem; letter-spacing: .1em; }
  .membership-hero-card h1 { font-size: clamp(2.7rem, 12vw, 3.6rem); }
  .membership-hero-description { margin-top: 16px; font-size: .98rem; line-height: 1.65; }
  html[lang="th"] .membership-hero-card h1 { font-size: clamp(2.45rem, 10vw, 3.25rem); line-height: 1.38; }
  html[lang="th"] .membership-hero-description { line-height: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
  .membership-hero-image,
  .membership-hero-card { animation: none; }
}

@keyframes membership-image-enter {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

@keyframes membership-card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}