/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Noto Serif SC", serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
  /* padding-top: 7.66vw; */
}

/* Hero Section */
.hero {
  position: relative;
  width: 100vw;
  height: 42.81vw;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #465a27 0%, rgba(70, 90, 39, 0) 100%);
  opacity: 0.2;
}

/* Navigation */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.66vw; /* 147/1920*100 */
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(54, 60, 36, 0.95);
  backdrop-filter: blur(0.21vw); /* 4/1920*100 */
  transition: background-color 0.3s ease;
}

/* 滚动时导航栏样式 */
.navigation.scrolled .nav-background {
  background: rgba(54, 60, 36, 0.98);
  box-shadow: 0 0.26vw 1.04vw rgba(0, 0, 0, 0.1);
}

.nav-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10.42vw; /* 200/1920*100 */
  z-index: 2;
  gap: 4.69vw;
}

.nav-logo img {
  width: 4.17vw; /* 80/1920*100 */
  height: 4.17vw; /* 80/1920*100 */
  object-fit: contain;
}

.nav-menu {
  display: flex;
  gap: 7.81vw; /* 150/1920*100 */
  align-items: center;
}

.nav-item {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.25vw; /* 24/1920*100 */
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  padding-bottom: 0.3vw;
}

.nav-item:hover {
  opacity: 0.8;
}

/* Navigation Active State */
.nav-item.active {
  opacity: 1;
  font-weight: 900;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1vw; /* 2px */
  background: #ffffff;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Hero Content */
.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  z-index: 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;
  padding-top: 7.66vw;
}

.company-name {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.85vw; /* 74/1920*100 */
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 4.9vw; /* 94/1920*100 */
}

.about-hero {
  height: 18.82vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  text-align: center;
}
.hero-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.5vw; /* 48/1920*100 */
  line-height: 1.5;
  color: #21271d;
  margin: 0 auto;
}

/* About Section */
.about {
  position: relative;
  width: 100%;
  height: 47.03vw; /* 903/1920*100 */
  overflow: hidden;
}

.about-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.about-image {
  width: 100%;
  height: 100%;
  object-fit: stretch;
}

.about-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.about-content {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  z-index: 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about-text {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.67vw; /* 32/1920*100 */
  line-height: 1.5;
  color: #ffffff;
}

/* Section Backgrounds */
.section-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.white-bg {
  background: #ffffff;
}

.green-bg {
  background: #80985b;
}

.dark-green-bg {
  background: #505f37;
}

/* Golf Plus Section */
.golf-plus {
  position: relative;
  width: 100%;
  height: 39.32vw; /* 755/1920*100 */
  overflow: hidden;
  background: url(./images/Slice\ 1.png) no-repeat center center;
  background-size: cover;
}

.golf-plus-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.golf-plus-visual {
  position: absolute;
  right: 0;
  top: 2.81vw; /* 54/1920*100 */
  width: 50.42vw; /* 968/1920*100 */
  height: 36.51vw; /* 701/1920*100 */
}

.golf-plus-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ce8080;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

.golf-course-image {
  position: absolute;
  top: -2.81vw; /* -54/1920*100 */
  left: -0.47vw; /* -9/1920*100 */
  width: 65.36vw; /* 1255/1920*100 */
  height: 43.59vw; /* 837/1920*100 */
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}

.golf-plus-logo {
  position: absolute;
  right: -0.73vw; /* -14/1920*100 */
  top: 0;
  width: 50.89vw; /* 977/1920*100 */
  height: 39.32vw; /* 755/1920*100 */
  object-fit: stretch;
}

.golf-plus-title {
  position: absolute;
  left: 12.6vw; /* 242/1920*100 */
  top: 15.05vw; /* 289/1920*100 */
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.85vw; /* 74/1920*100 */
  line-height: 1.35;
  color: #21271d;
  max-width: 53.8vw; /* 1033/1920*100 */
}

/* Service Content Layout */
.service-content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 3.91vw 9.38vw; /* 75/1920*100, 180/1920*100 */
  gap: 3.54vw; /* 68/1920*100 */
}

.service-content.reverse {
  flex-direction: row-reverse;
}

.service-image {
  position: relative;
  width: 31.04vw; /* 596/1920*100 */
  height: 39.17vw; /* 752/1920*100 */
  flex-shrink: 0;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.42vw; /* 8/1920*100 */
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: stretch;
}

.service-text {
  flex: 1;
  max-width: 53.8vw; /* 1033/1920*100 */
}

.service-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.5vw; /* 48/1920*100 */
  line-height: 2.08;
  color: #ffffff;
  margin-bottom: 1.56vw; /* 30/1920*100 */
}

.service-description {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  font-size: 1.46vw; /* 28/1920*100 */
  line-height: 1.79;
  color: #ffffff;
  margin-bottom: 1.56vw; /* 30/1920*100 */
}

.service-detail {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  font-size: 1.46vw; /* 28/1920*100 */
  line-height: 1.79;
  color: #ffffff;
}

/* Golf Network Section */
.golf-network {
  position: relative;
  width: 100%;
  height: 48.28vw;
  background: linear-gradient(to bottom, #80985b 83%, #ffffff 83%);
}

.golf-network .service-title {
  font-size: 2.5vw;
}
.golf-network .service-image {
  width: 31vw;
  height: 39.17vw;
}
.golf-network .service-content {
  padding: 3.91vw 0 0 0;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}
/* Pro Golf Section */
.pro-golf {
  position: relative;
  width: 100%;
  height: 48.28vw;
  background: linear-gradient(to bottom, #505f37 83%, #ffffff 83%);
}
.pro-golf .service-title {
  font-size: 2.5vw;
}
.pro-golf .service-image {
  width: 31vw;
  height: 39.17vw;
}
.pro-golf .service-content {
  padding: 3.91vw 0 0 0;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Custom Plan Section */
.custom-plan {
  position: relative;
  width: 100%;
  height: 48.28vw;
  background: linear-gradient(to bottom, #80985b 83%, #ffffff 83%);
}
.custom-plan .service-title {
  font-size: 2.5vw;
}
.custom-plan .service-image {
  width: 31vw;
  height: 39.17vw;
}
.custom-plan .service-content {
  padding: 3.91vw 0 0 0;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}
.custom-plan .service-image {
  position: relative;
}

.custom-plan .overlay-image {
  position: absolute;
  top: -0.73vw; /* -14/1920*100 */
  left: 0.05vw; /* 1/1920*100 */
  width: 30.99vw; /* 595/1920*100 */
  height: 39.9vw; /* 766/1920*100 */
}

/* Golf Health Section */
.golf-health {
  position: relative;
  width: 100%;
  height: 36.51vw; /* 701/1920*100 */
  overflow: hidden;
  background: url(./images/Group3.png) no-repeat center center;
  background-size: cover;
}

.golf-health-content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.golf-health-visual {
  position: absolute;
  left: 0.08vw; /* 1.5/1920*100 */
  top: 0;
  width: 43.88vw; /* 842.5/1920*100 */
  height: 36.51vw; /* 701/1920*100 */
}

.golf-health-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ce8080;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
}

.golf-health-image {
  position: absolute;
  top: -1.3vw; /* -25/1920*100 */
  left: -13.2vw; /* -253.5/1920*100 */
  width: 59.48vw; /* 1142/1920*100 */
  height: 46.01vw; /* 883/1920*100 */
  object-fit: cover;
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
}

.wellness-image {
  position: absolute;
  top: 0.05vw; /* 1/1920*100 */
  left: -4.45vw; /* -85.5/1920*100 */
  width: 49.32vw; /* 947/1920*100 */
  height: 36.46vw; /* 700/1920*100 */
  object-fit: cover;
}

.golf-health-title {
  position: absolute;
  right: 9.79vw; /* 188/1920*100 */
  top: 12.24vw; /* 235/1920*100 */
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.85vw; /* 74/1920*100 */
  line-height: 1.35;
  text-align: right;
  color: #21271d;
  max-width: 53.8vw; /* 1033/1920*100 */
}

/* Clinic Section */
.clinic {
  position: relative;
  width: 100%;
  height: 46.25vw; /* 888/1920*100 */
}
.clinic .service-content {
  padding: 3.91vw 9.38vw 0;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 0.8vw;
}
.clinic .service-image {
  height: 32.45vw; /* 623/1920*100 */
  margin-top: 3.02vw; /* 58/1920*100 */
}

.clinic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

.clinic-interior {
  position: absolute;
  top: 11.09vw; /* 213/1920*100 */
  left: 1.82vw; /* 35/1920*100 */
  width: 27.45vw; /* 527/1920*100 */
  height: 10.26vw; /* 197/1920*100 */
  object-fit: cover;
}

.clinic-title {
  font-size: 2.08vw; /* 40/1920*100 */
  line-height: 2.5;
}

/* Health Investment Section */
.health-investment {
  position: relative;
  width: 100%;
  height: 51.46vw; /* 988/1920*100 */
}
.health-investment .service-content {
  padding: 7vw 0 0 9.38vw;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 3.54vw;
}
.health-investment .service-image {
  height: 37.5vw; /* 720/1920*100 */
}

.health-investment .service-title {
  line-height: 1;
}

/* VIP Club Section */
.vip-club {
  position: relative;
  width: 100%;
  height: 30.42vw; /* 584/1920*100 */
  overflow: hidden;
  background: url(./images/Group\ 32.png) no-repeat center center;
  background-size: cover;
}

.vip-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.vip-bg-image {
  position: absolute;
  top: -8.7vw; /* -167/1920*100 */
  left: 23.07vw; /* 443/1920*100 */
  width: 77.92vw; /* 1496/1920*100 */
  height: 43.8vw; /* 841/1920*100 */
  object-fit: cover;
}

.vip-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.vip-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #efefef 0%, rgba(239, 239, 239, 0) 100%);
}

.vip-content {
  position: relative;
  z-index: 5;
  padding: 7.03vw 6.5vw 0; /* 135/1920*100, 126/1920*100 */
}

.vip-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.33vw; /* 64/1920*100 */
  line-height: 1.56;
  color: #21271d;
  max-width: 86.82vw; /* 1667/1920*100 */
  margin-bottom: 3.54vw; /* 68/1920*100 */
}

.vip-link {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.5vw;
  line-height: 2.08;
  color: #000000;
  text-decoration: none;
  display: inline-block;
  margin-left: 61.2vw;
  white-space: nowrap;
}

.vip-link:hover {
  opacity: 0.8;
}

/* Footer */
.footer {
  position: relative;
  width: 100%;
  height: 13.02vw; /* 250/1920*100 */
}

.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cbd9e4;
  z-index: 1;
}

.footer-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 10.42vw; /* 200/1920*100 */
  z-index: 5;
}

.footer-logo img {
  width: 7.14vw; /* 137/1920*100 */
  height: 7.14vw; /* 137/1920*100 */
  object-fit: contain;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.04vw; /* 20/1920*100 */
  font-family: "Noto Serif SC", serif;
}

.phone {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  font-size: 1.67vw;
  font-weight: 600;
  text-align: right;
  line-height: 1.2;
}

.contact-text {
  font-weight: normal;
  font-size: 1.04vw; /* 32/1920*100 */
  line-height: 1.2;
  color: #000000;
  text-align: right;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Loading animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1.56vw); /* 30/1920*100 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 只对首屏内容应用初始动画 */
.hero-content,
.about-content {
  animation: fadeIn 1s ease-out;
}

/* 其他内容由JavaScript控制滚动动画，初始状态由JS设置 */

/* Hover effects */
.service-image img {
  transition: transform 0.3s ease;
}

.service-image:hover img {
  transform: scale(1.05);
}

.nav-logo img,
.footer-logo img {
  transition: transform 0.3s ease;
}

.nav-logo:hover img,
.footer-logo:hover img {
  transform: scale(1.1);
}

/* Page Content Containers */
.page-content {
  width: 100%;
}

/* ==================== MAIN PAGE STYLES ==================== */
/* Main page specific styles to avoid conflicts with VIP page */

/* Main page sections that need independent styling */
.main-page .section-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.33vw;
  line-height: 1.2;
  color: #27371f;
  margin-bottom: 1vw;
}

.main-page .service-content {
  padding: 0 10.42vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5.21vw;
  min-height: 50vw;
}

.main-page .service-content.reverse {
  flex-direction: row-reverse;
}

.main-page .service-image {
  flex: 1;
  position: relative;
}

.main-page .service-text {
  flex: 1;
  color: #27371f;
}

.main-page .service-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.6vw;
  line-height: 1.5;
  margin-bottom: 2.6vw;
}

.main-page .service-description {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.67vw;
  line-height: 1.8;
}

/* ==================== VIP PAGE STYLES ==================== */
/* 完全基于Figma设计稿重新设计VIP页面样式 */

/* VIP Hero Section */
#vip-page .vip-hero {
  position: relative;
  width: 100vw;
  height: 42.81vw; /* 822/1920*100 */
  overflow: hidden;
}

#vip-page .vip-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#vip-page .vip-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#vip-page .vip-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    #465a27 -10.83%,
    rgba(70, 90, 39, 0) 59.85%
  );
  z-index: 2;
}

/* Shared Navigation - Enhanced for both pages */
/* VIP页面时的导航背景 */
body.vip-active .nav-background {
  background: #363c24 !important;
}

/* VIP Card Content */
#vip-page .vip-card-content {
  position: absolute;
  top: 19.74vw; /* 379/1920*100 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: 57.81vw; /* 1110/1920*100 */
}

#vip-page .vip-decorations {
  position: relative;
  width: 100%;
  height: 5.57vw;
  margin-bottom: 8vw;
  padding-top: 2vw;
}

#vip-page .decoration-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 8.125vw;
  height: 5.57vw;
  transform: rotateY(180deg);
}

#vip-page .decoration-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 8.125vw;
  height: 5.57vw;
}

#vip-page .vip-card-main {
  position: relative;
  /* margin-bottom: 5.73vw; */
}

#vip-page .vip-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.85vw;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  background: url(./images/vip-card-bg.png) no-repeat center bottom;
  background-size: 31.82vw 4.43vw;
  padding-bottom: 5vw;
}

#vip-page .vip-buttons {
  display: flex;
  gap: 5.1vw; /* 98/1920*100 根据设计稿调整 */
  justify-content: center;
}

#vip-page .vip-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 1.04vw; /* 20/1920*100 */
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.67vw; /* 32/1920*100 */
  color: #27371f;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 18.23vw; /* 350/1920*100 */
  height: 4.17vw; /* 80/1920*100 */
  display: flex;
  align-items: center;
  justify-content: center;
}

#vip-page .vip-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-0.2vw);
}

/* Our Club Section */
#vip-page .our-club {
  background: #ffffff;
  padding-top: 4.17vw;
  text-align: center;
}

#vip-page .section-header {
  width: 66.77vw; /* 1282/1920*100 根据设计稿调整 */
  margin: 0 auto;
  position: relative;
}

#vip-page .section-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.33vw; /* 64/1920*100 */
  line-height: 1.2;
  color: #27371f;
  margin-bottom: 1.35vw; /* 根据设计稿调整 */
}

#vip-page .section-subtitle {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.67vw;
  line-height: 1.2;
  color: #27371f;
  margin-bottom: 2.6vw 26.078px;
}

#vip-page .section-decorations {
  position: relative;
  width: 100%;
}

#vip-page .divider-top {
  width: 10.42vw;
  height: 2.97vw;
  margin-bottom: 2.6vw;
}

#vip-page .divider-bottom {
  width: 36.46vw; /* 700/1920*100 */
  height: 0.68vw; /* 13/1920*100 */
  margin: 0 auto;
}

/* VIP Benefits */
#vip-page .vip-benefits {
  background: #ffffff;
}

#vip-page .benefit-item {
  height: 61.15vw; /* 1174/1920*100 */
  position: relative;
}

#vip-page .benefit-title {
  position: relative;
  height: 17.08vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(./images/Group\ 40.png) no-repeat center bottom;
  background-size: 20vw 17vw;
  padding-bottom: 4vw;
  margin-top: 2vw;
}

#vip-page .benefit-heading {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.08vw; /* 40/1920*100 */
  line-height: 1.2;
  color: #27371f;
  z-index: 2;
  position: relative;
}

#vip-page .benefit-number {
  display: block;
  font-family: "Vast Shadow", cursive;
  font-weight: 400;
  font-size: 6.67vw; /* 128/1920*100 */
  color: #27371f;
  line-height: 1;
}

#vip-page .benefit-content {
  position: relative;
  height: 44.27vw; /* 850/1920*100 */
  background: #d9d9d9;
  overflow: hidden;
}

#vip-page .benefit-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#vip-page .benefit-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#vip-page .benefit-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(70, 90, 38, 0.2) 22.96%,
    rgba(39, 55, 31, 0.8) 100%
  );
  z-index: 1;
}

#vip-page .benefit-text {
  position: absolute;
  bottom: 10.08vw; /* 232/1920*100 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  color: #ffffff;
  width: 61.61vw; /* 1183/1920*100 */
}
#vip-page .benefit-1 .benefit-main-title {
  width: 41.6vw;
  margin: auto;
}
#vip-page .benefit-2 .benefit-main-title {
  width: 46.9vw;
  margin: auto;
}
#vip-page .benefit-2 .benefit-text {
  bottom: 6.08vw;
}
#vip-page .benefit-3 .benefit-main-title {
  width: 41.6vw;
  margin: auto;
}
#vip-page .benefit-3 .benefit-text {
  bottom: 12.08vw;
}
#vip-page .benefit-4 .benefit-main-title {
  width: 41.6vw;
  margin: auto;
}
#vip-page .benefit-4 .benefit-text {
  bottom: 8.08vw;
}
#vip-page .benefit-5 .benefit-main-title {
  width: 41.6vw;
  margin: auto;
}

#vip-page .benefit-main-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.33vw; /* 64/1920*100 */
  line-height: 1.5;
  border-bottom: 0.31vw solid #ffffff; /* 6/1920*100 */
  border-top: 0.31vw solid #ffffff;
  padding: 1.41vw 0;
}

#vip-page .benefit-description {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.88vw; /* 36/1920*100 */
  line-height: 1.5;
  margin: 0;
  margin-top: 2.8vw;
}

/* Application Flow Section */
#vip-page .application-flow {
  padding: 5.21vw 0 0; /* 100/1920*100 */
  position: relative;
}

#vip-page .application-flow .section-header {
  text-align: center;
  margin-bottom: 5.21vw;
}

#vip-page .application-flow .section-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 3.33vw; /* 64/1920*100 */
  line-height: 1.2;
  color: #27371f;
}

#vip-page .application-flow .section-decorations {
  width: 66.77vw; /* 1282/1920*100 */
  margin: 0 auto;
}

#vip-page .application-flow .divider-top {
  width: 10.42vw; /* 200/1920*100 */
  height: 2.97vw; /* 57/1920*100 */
  margin-bottom: 2.6vw;
}

#vip-page .application-flow .divider-bottom {
  width: 36.46vw; /* 700/1920*100 */
  height: 0.68vw; /* 13/1920*100 */
  margin: 0 auto;
}

#vip-page .flow-content {
  position: relative;
  height: 62.5vw;
  background: #282d1b;
  box-sizing: border-box;
  padding-top: 5.21vw;
}

#vip-page .flow-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 5.21vw; /* 100/1920*100 */
  position: relative;
}

#vip-page .flow-step {
  width: 18.75vw;
  position: relative;
  background: #fff;
}

/* 流程步骤的绿色背景 */

/* 箭头 */
#vip-page .flow-step:not(:last-child) .step-number::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.56vw; /* -30/1920*100 */
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 1.56vw solid #80985b; /* 30/1920*100 */
  border-top: 1.04vw solid transparent; /* 20/1920*100 */
  border-bottom: 1.04vw solid transparent;
  z-index: 2;
}

#vip-page .step-number {
  position: relative;
  background: #80985b;
  color: #ffffff;
  height: 13vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

#vip-page .step-number span {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.88vw; /* 36/1920*100 */
  line-height: 1;
  margin: 0;
}

#vip-page .step-number h4 {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 1.88vw; /* 36/1920*100 */
  line-height: 1;
  margin: 0.26vw 0 0 0; /* 5/1920*100 */
}

#vip-page .step-description {
  height: 23.44vw;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.46vw; /* 28/1920*100 */
  line-height: 1.71;
  color: #000000;
  text-align: center;
  z-index: 3;
  box-sizing: border-box;
  padding: 0 0.73vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#vip-page .contact-button {
  text-align: center;
  margin-top: 5.21vw;
}

#vip-page .contact-btn {
  width: 31.04vw;
  height: 11.46vw;
  background: #eed233;
  border-radius: 1.04vw;
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.81vw;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

#vip-page .contact-btn:hover {
  background: #d4bd2e;
  transform: translateY(-0.2vw);
}

/* ==================== CONTACT MODAL STYLES ==================== */
/* 独立的弹窗样式，不影响页面现有内容 */

.contact-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  animation: modalFadeIn 0.3s ease-out;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #282d1b;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vw;
  box-sizing: border-box;
}

.modal-container {
  position: relative;
  width: 52.08vw; /* 1000/1920*100 */
  max-width: 1000px;
  height: 34.01vw; /* 653/1920*100 */
  max-height: 653px;
  background: #ffffff;
  border-radius: 1.04vw; /* 20/1920*100 */
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

.modal-header {
  position: relative;
  padding: 4.17vw 0 2.5vw 0; /* 80/1920*100, 48/1920*100 */
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-family: "Noto Serif SC", serif;
  font-weight: 900;
  font-size: 2.08vw; /* 40/1920*100 */
  line-height: 1.2;
  color: #27371f;
  margin: 0;
}

.modal-close {
  position: absolute;
  top: 1.04vw; /* 20/1920*100 */
  right: 1.56vw; /* 30/1920*100 */
  width: 2.08vw; /* 40/1920*100 */
  height: 2.08vw;
  background: none;
  border: none;
  font-size: 1.56vw; /* 30/1920*100 */
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f0f0f0;
  color: #000;
}

.contact-form {
  padding: 1.56vw 8.65vw 2.08vw; /* 30/1920*100, 166/1920*100, 40/1920*100 */
  height: calc(100% - 6.67vw); /* 减去header高度 */
  overflow-y: auto;
  box-sizing: border-box;
}

.form-note {
  margin-bottom: 1.56vw; /* 30/1920*100 */
}

.required-note {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  line-height: 1.57;
  color: #000000;
}

.form-group {
  margin-bottom: 1.67vw; /* 32/1920*100 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 1.04vw; /* 20/1920*100 */
}

/* 邮箱字段改为水平布局 */
.form-group.email-group {
  margin-bottom: 1.04vw; /* 减少下边距，因为下面还有确认行 */
}

/* 邮箱确认行 */
.form-group.email-confirm-group {
  margin-bottom: 1.67vw; /* 32/1920*100 */
}

.empty-label {
  min-width: 7.29vw; /* 140/1920*100 与其他标签宽度一致 */
  flex-shrink: 0;
}

.form-label {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  line-height: 1.57;
  color: #000000;
  min-width: 7.29vw; /* 140/1920*100 固定标签宽度 */
  white-space: nowrap;
  flex-shrink: 0; /* 防止标签被压缩 */
}

/* 移除邮箱字段标签特殊样式，使用通用样式 */

.form-label.required {
  color: #000000;
}

.form-label.required::before {
  content: "* ";
  color: #e30000;
  font-weight: bold;
}

/* 移除HTML中的*号，改为CSS生成 */
.required-note {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  line-height: 1.57;
  color: #000000;
}

.required-note::before {
  content: "* ";
  color: #e30000;
  font-weight: bold;
}

.form-input {
  height: 1.67vw; /* 32/1920*100 */
  padding: 0.26vw 0.52vw; /* 5/1920*100, 10/1920*100 */
  border: 1px solid #dddddd;
  border-radius: 0.16vw; /* 3/1920*100 */
  font-family: "PingFang SC", sans-serif;
  font-size: 0.73vw; /* 14/1920*100 */
  color: #000;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  flex: 1; /* 让输入框撑满剩余空间 */
  width: auto; /* 让flex控制宽度 */
}

.form-input:focus {
  outline: none;
  border-color: #0052d9;
}

.form-input::placeholder {
  color: #999;
}

/* Email confirm wrapper layout */
.email-confirm-wrapper {
  display: flex;
  align-items: center;
  gap: 0.73vw; /* 14/1920*100 */
  flex: 1; /* 撑满剩余空间 */
}

.email-confirm-wrapper .form-input {
  flex: 1; /* 撑满剩余空间 */
}

.confirm-label {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  color: #000000;
  white-space: nowrap;
}

/* Name inputs layout */
.name-inputs {
  display: flex;
  gap: 2.19vw; /* 42/1920*100 */
  align-items: center;
  flex: 1; /* 撑满剩余空间 */
}

.name-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.52vw; /* 10/1920*100 */
  flex: 1; /* 让每个name-field平分可用空间 */
}

.name-label {
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0; /* 防止标签被压缩 */
}

.name-input {
  /* 继承.form-input的flex: 1样式，撑满剩余空间 */
}

/* Phone input layout - 继承flex: 1从.form-input */

/* Contact method layout */

.radio-group {
  display: flex;
  gap: 1.25vw; /* 24/1920*100 */
  flex: 1; /* 撑满剩余空间 */
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.52vw; /* 10/1920*100 */
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.radio-label input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 0.94vw; /* 18/1920*100 */
  height: 0.94vw;
  border: 1px solid #dddddd;
  border-radius: 50%;
  background: #ffffff;
  position: relative;
  transition: all 0.2s ease;
}

.radio-label input[type="radio"]:checked + .radio-custom {
  border-color: #0052d9;
  background: #0052d9;
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.42vw; /* 8/1920*100 */
  height: 0.42vw;
  background: #ffffff;
  border-radius: 50%;
}

/* Submit button */
.submit-btn {
  width: 13.7vw; /* 263/1920*100 */
  height: 1.67vw; /* 32/1920*100 */
  background: #eed233;
  border: 1px solid #0052d9;
  border-radius: 0.16vw; /* 3/1920*100 */
  font-family: "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 0.73vw; /* 14/1920*100 */
  line-height: 1.57;
  color: #000000;
  cursor: pointer;
  margin: 1.56vw auto 0; /* 30/1920*100 */
  display: block;
  transition: all 0.2s ease;
}

.submit-btn:hover {
  background: #d4bd2e;
  transform: translateY(-0.1vw);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-2vw);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* 确保弹窗在所有元素上方 */
.contact-modal.show {
  display: block;
}