/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* 锁定视口，防止出现滚动条 */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  font-family: "Inter", -apple-system, sans-serif;
}

/* 布局容器：强制占据 100% 物理屏幕宽高 */
.container {
  position: relative;
  width: 100vw;
  /* 使用 dvh 确保在移动端浏览器弹出地址栏时依然全屏 */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* 背景图片容器 */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero img {
  /* 强制图片宽高 100% 填满容器 */
  width: 100%;
  height: 100%;
  /* 核心修改：使用 fill 确保图片像右图那样 100% 还原并全屏，不留任何黑边 */
  object-fit: fill;
  /* 移除缩放动画，因为全屏锁定下缩放会产生黑边或裁切 */
  animation: none;
  filter: brightness(0.8);
}

/* 底部内容卡片区 */
.card {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 增加底部安全区距离，确保按钮在 iPhone 底部横条上方 */
  padding: 40px 24px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  /* 阴影遮罩，确保文字在复杂的背景图上依然清晰 */
  background: linear-gradient(to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.4) 60%,
    transparent 100%);
}

/* 文字排版 */
.title {
  font-size: clamp(1.6rem, 8vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 8px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.subtitle {
  font-size: clamp(0.9rem, 4vw, 1.1rem);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

/* 按钮样式 */
.cta {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 100%;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

#primary-cta {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* 扫光动画 */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: sweep 4s infinite linear;
}

@keyframes sweep {
  0% { left: -150%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

.btn:active {
  transform: scale(0.96);
}