/* ============================================================
   FILE: 09-hero-redesign.css
   Hero 区重设计 — Premium Brand-First Hero
   Project: Gentlwish.com
   ============================================================ */

/* ========================================
   1. HERO 外层容器 — 留白 & 背景
   ======================================== */

/* 外容器：增加上下留白，确保宽敞感 */
.elementor-element-527017ed > .e-con-inner {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  min-height: 70vh !important;
  align-items: center !important;
}

/* ========================================
   2. HERO 内容容器 — 左对齐 + 650px 限制
   ======================================== */

.elementor-element-34c419dc {
  max-width: 650px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-items: center !important;
}

/* ========================================
   3. 标题 — 左对齐 + 新尺寸
   ======================================== */

/* Headline "Ancient Taoist Blessings for Modern Life" */
.elementor-element-28c070c2,
.elementor-element-28c070c2 .elementor-heading-title {
  text-align: center !important;
}

.elementor-element-28c070c2 .elementor-heading-title {
  font-family: var(--font-heading) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Subheadline */
.elementor-element-27c8fd68,
.elementor-element-27c8fd68 .elementor-heading-title {
  text-align: center !important;
  margin-top: 16px !important;
}

.elementor-element-27c8fd68 .elementor-heading-title {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--color-text-light) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  max-width: 520px !important;
}

/* ========================================
   4. Trust Line — 社交证明
   ======================================== */

/* 利用现有的容器插入信任行 */
.elementor-element-34c419dc > .elementor-element-3e55c431,
.elementor-element-3e55c431 .elementor-button-wrapper,
.elementor-element-3e55c431 .elementor-button {
  margin-top: 8px !important;
}

/* 在所有按钮之上插入信任文案 */
.elementor-element-3e55c431 .elementor-button::before {
  display: none;
}

/* 在两个按钮之间插入信任行 */
.gentlwish-hero-trust {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
  margin: 24px auto 8px !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

.gentlwish-hero-trust strong {
  color: var(--color-text) !important;
  font-weight: 500 !important;
}

/* ========================================
   5. 按钮容器 — 左对齐 + 并排
   ======================================== */

/* 主按钮容器 */
.elementor-element-3e55c431,
.elementor-element-3e55c431 .elementor-button-wrapper,
.elementor-element-3e55c431 .elementor-button {
  text-align: center !important;
  margin-top: 32px !important;
}

/* 次要按钮容器 */
.elementor-element-5f13109,
.elementor-element-5f13109 .elementor-button-wrapper,
.elementor-element-5f13109 .elementor-button {
  text-align: center !important;
  margin-top: 0 !important;
  margin-left: 16px !important;
}

/* 主按钮 + 次要按钮放在同一行 */
.elementor-element-527017ed .elementor-element-34c419dc {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.elementor-element-527017ed .elementor-element-34c419dc > .elementor-element {
  width: 100% !important;
}

/* 按钮行容器 */
.elementor-element-3e55c431,
.elementor-element-5f13109,
.elementor-element-5f13109 .elementor-button-wrapper,
.elementor-element-5f13109 .elementor-button {
  width: auto !important;
  display: inline-block !important;
}

/* ========================================
   6. 主按钮样式 — "Find Your Talisman"
   ======================================== */

.elementor-element-3e55c431 .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 36px !important;
  background: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  min-width: 180px !important;
  text-align: center !important;
}

.elementor-element-3e55c431 .elementor-button:hover {
  background: var(--color-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(158, 42, 43, 0.25) !important;
}

/* ========================================
   7. 次要按钮样式 — "Learn Our Story"
   ======================================== */

.elementor-element-5f13109 .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 36px !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  min-width: 180px !important;
  text-align: center !important;
}

.elementor-element-5f13109 .elementor-button:hover {
  background: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
  transform: translateY(-2px) !important;
}

/* ========================================
   8. 背景装饰 — 微妙的径向渐变
   ======================================== */

.elementor-element-527017ed {
  position: relative !important;
  overflow: hidden !important;
}

.elementor-element-527017ed::before {
  content: "" !important;
  position: absolute !important;
  top: -20% !important;
  right: -10% !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(200, 169, 107, 0.06) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.elementor-element-527017ed::after {
  content: "" !important;
  position: absolute !important;
  bottom: -30% !important;
  left: -5% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(158, 42, 43, 0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ========================================
   9. 金色装饰线 (在标题下方)
   ======================================== */

.gentlwish-hero-divider {
  width: 50px !important;
  height: 2px !important;
  background: var(--color-secondary) !important;
  margin: 20px 0 24px !important;
}

/* ========================================
   10. 手机响应式
   ======================================== */

@media screen and (max-width: 767px) {
  .elementor-element-527017ed > .e-con-inner {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .elementor-element-34c419dc {
    max-width: 100% !important;
  }

  .elementor-element-28c070c2 .elementor-heading-title {
    font-size: 34px !important;
  }

  .elementor-element-27c8fd68 .elementor-heading-title {
    font-size: 16px !important;
  }

  /* 按钮堆叠 */
  .elementor-element-3e55c431,
  .elementor-element-5f13109,
.elementor-element-5f13109 .elementor-button-wrapper,
.elementor-element-5f13109 .elementor-button {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .elementor-element-3e55c431 .elementor-button,
  .elementor-element-5f13109 .elementor-button {
    width: 100% !important;
    min-width: auto !important;
  }

  .elementor-element-5f13109,
.elementor-element-5f13109 .elementor-button-wrapper,
.elementor-element-5f13109 .elementor-button {
    margin-top: 12px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-28c070c2 .elementor-heading-title {
    font-size: 42px !important;
  }

  .elementor-element-527017ed > .e-con-inner {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}