/* ============================================================================
 * BTCC 合约跟单落地页 —— 1:1 还原 btccpuls.com/copytrading-af
 *
 * 关键约定（照搬原站，改动会立刻破坏 1:1）：
 *   1. 全站尺寸用 vw，没有一条媒体查询 —— 原站就是「按视口等比缩放」的
 *      移动端设计，桌面端（1440 宽下整页 9016px）只是被放大 3.6 倍。
 *   2. 原站同时挂了 Tailwind v2 的 preflight，所以这些重置必须补上：
 *      box-sizing:border-box / border-width:0 / a{color:inherit} /
 *      ul{list-style:none} / img{display:block;max-width:100%;height:auto}
 *      ⚠️ 但**不能**重置 h1~h6 的字号字重（v2 preflight 没重置，原站标题是粗体）。
 *   3. font-family 一律照抄原站写法（Helvetica / "Helvetica Neue"），
 *      连兜底字体都不补，保证回退路径与原站一致。
 * ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
  background: #000;
}

body {
  color: #000;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button {
  appearance: button;
  background-color: transparent;
  background-image: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ============================================================================
 * 1. 顶部固定栏    原站 .styles_mobile_header__8ejF6
 * 高 = 内容 12vw + 上下内边距各 1vw = 14vw（390 宽下 55px）
 * ⚠️ 它是 position:fixed，而首屏 .hero 从 y=0 开始 —— 原站「合约跟单」
 *    那行标题就是被这根条盖住的，别自作聪明去补 margin-top。
 * ========================================================================== */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  /* ⚠️ 原站是 space-around + 固定宽度 .hd-txt(53.6vw)，留给「下载」按钮的余量只有
     (1 - 0.24 - 3.08 - 12 - 4 - 53.6 - 2.8×2) vw ≈ 19vw，而下载按钮实宽 ≈ 24.5vw，
     本来就靠 flex 收缩（按钮内文字被压到 3.6 字号）勉强塞住。
     现在导航要放语言控件，再按原值排就溢出了 → 改成 flex-start + 显式间距，
     并让 .hd-txt 可收缩（min-width:0 + flex:1），文字换行而不是把按钮顶出去。 */
  justify-content: flex-start;
  width: 100%;
  padding: 1vw 0.667vw;
  background: #000;
}

.hd-x {
  flex: none;
  width: 2.4vw;
  height: 2.4vw;
}

.hd-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12vw;
  height: 12vw;
  margin-left: 1.6vw;
  background: #2e4a9d;
  border-radius: 1.333vw;
}

.hd-logo img {
  width: 8.667vw;
  height: 8.667vw;
}

.hd-txt {
  /* 可收缩：语言名变长（日本語/한국어）时让文字换行，别把按钮顶出视口 */
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 4vw;
  color: #fff;
}

.hd-txt > div {
  font-size: 4.8vw;
  font-weight: 700;
}

.hd-txt > div p {
  margin-top: -1vw;
  font-size: 3.2vw;
}

.hd-dl {
  flex: none;
  display: flex;
  align-items: center;
  padding: 1.567vw 2.8vw;
  background: #fff;
  border-radius: 4.867vw;
  white-space: nowrap;
}

.hd-dl span {
  font-size: 4.267vw;
}

.hd-dl img {
  width: 4.133vw;
  height: 3.333vw;
  margin-left: 0.667vw;
}

/* ---------------------------------------------------------------------------
 * 语言切换（导航内两段式小药丸 + 下拉菜单）
 * 原站没有这个控件，是按需求后加的：默认英文，可切 6 种语言。
 * 全站都是 vw 等比缩放，这里也一律 vw，保持和 390 宽一致的比例。
 * ⚠️ .hd 是 position:fixed 的 flex 行，下拉菜单必须 absolute 定位，
 *    否则会把「下载」按钮挤走。
 * ------------------------------------------------------------------------- */
.lang {
  position: relative;
  flex: none;
  margin-left: 2.4vw;
  margin-right: 2.4vw;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 1.2vw 2vw;
  color: #fff;
  font-size: 3.2vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 4.867vw;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lang-globe {
  width: 3.6vw;
  height: 3.6vw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.lang-cav {
  width: 2.8vw;
  height: 2.8vw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: transform 0.2s ease;
}

.lang.is-open .lang-cav {
  transform: rotate(180deg);
}

.lang-cur {
  min-width: 5.6vw;
  text-align: center;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 1.6vw);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 30vw;
  margin: 0;
  padding: 1.333vw;
  list-style: none;
  background: #16171c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2.667vw;
  box-shadow: 0 2vw 5vw rgba(0, 0, 0, 0.55);
}

.lang.is-open .lang-menu {
  display: block;
}

.lang-menu button {
  display: block;
  width: 100%;
  padding: 2vw 2.4vw;
  color: #d8dae0;
  font-size: 3.4vw;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 1.867vw;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lang-menu button.is-on {
  color: #fff;
  font-weight: 700;
  background: rgba(240, 185, 11, 0.16);
}

.lang-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 语言名本身可能有 2 个字符（EN）也可能 5 个字符（日本語），
   导航右侧据此微调 —— 英文下最挤，把药丸内边距收一点。 */
html[lang="en"] .lang-btn {
  padding: 1.2vw 1.6vw;
}

html[lang="en"] .lang-cur {
  min-width: 4vw;
}

/* ============================================================================
 * 2. 首屏（背景大图）    原站 .styles_top__YupVC / .top-content
 * ⚠️ 三张图都是 position:absolute；第一张（$100K）不给 top/left，
 *    走「静态位置」= 排在 <p> 之后，所以 DOM 顺序不能调。
 * ========================================================================== */
.hero {
  width: 100%;
  height: 92.533vw;
  padding: 5.333vw 6.933vw;
  background: url(../assets/img/bg.png) no-repeat 50%/cover;
}

.hero-in {
  position: relative;
  color: #fff;
}

.hero-in > h2 { font-size: 7.333vw; }
.hero-in > p { margin: 2vw 0; font-size: 5.6vw; }
.hero-in img { position: absolute; }

.hero-100k {
  width: 38.667vw;
  height: 9.067vw;
}

.hero-coin {
  top: 35vw;
  left: -3vw;
  width: 9.467vw;
  height: 9.467vw;
}

.hero-btn {
  position: absolute;
  top: 56vw;
  width: 30.933vw;
  height: 12.133vw;
  background: url(../assets/img/button.png) no-repeat 50%/cover;
  color: #00152c;
  font-size: 5.6vw;
  line-height: 10.133vw;
  text-align: center;
}

.hero-coin2 {
  top: 75vw;
  right: 8vw;
  width: 17.867vw;
  height: 17.867vw;
}

/* ============================================================================
 * 3. 区块小标题    原站 .styles_title__TXq54
 * 是 div（不是 h2），flex 里左对齐 —— 原站那行 text-align:center 是无效声明
 * ========================================================================== */
.sec-t {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 8vw auto 0;
  color: #fff;
  font-size: 4.8vw;
}

.sec-t img {
  width: 4vw;
  height: 5.467vw;
}

/* ============================================================================
 * 4. 通用横向轮播    原站 .styles_carousel__NagdK
 * ========================================================================== */
.car {
  position: relative;
  width: 76.4vw;
  margin: 0 auto;
}

.car-vp {
  position: relative;
  overflow: hidden;
}

.car-track {
  display: flex;
  transition: transform 0.4s ease;
}

.car-track.no-anim { transition: none; }

.car-item {
  flex: 0 0 100%;
  width: 100%;
}

.car-item img { width: 100%; }

/* 数字轮播（15,000+ / 600,000+ / 420,000,000+） */
.car-nums img {
  width: 100%;
  height: 24.8vw;
  margin-top: 6.533vw;
}

/* 交易员整卡轮播 */
.car-traders { margin-bottom: 10vw; }

.car-traders .car-item img {
  width: 100%;
  height: 83.867vw;
  margin-top: 2.533vw;
}

/* 圆点：原站是 antd carousel + 站内覆盖的叠加效果
   （未选中 opacity .3 / 选中 1，选中项 16px→24px，圆点靠 ::after 画） */
.car-dots {
  position: absolute;
  bottom: -5vw;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 3px;
}

.car-dots li {
  position: relative;
  display: block;
  width: 16px;
  height: 3px;
  margin: 0 4px;
  transition: width 0.5s;
}

.car-dots li.is-on { width: 24px; }

.car-dots li button {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
  border-radius: 1px;
  background: none;
  opacity: 0.3;
  transition: all 0.5s;
}

.car-dots li.is-on button { opacity: 1; }

.car-dots li button::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 1.6vw;
  height: 1.6vw;
  background: #00ff4e;
  border-radius: 50%;
}

/* ============================================================================
 * 5. 金色主按钮    原站 .styles_button__LG1WA（背景是整张 button2.png）
 * ========================================================================== */
.btn-gold {
  display: block;
  width: 76.267vw;
  height: 12vw;
  margin: 0 auto;
  background: url(../assets/img/button2.png) no-repeat 50%/cover;
  font-size: 5.6vw;
  line-height: 12vw;
  text-align: center;
}

/* ============================================================================
 * 6. 三步跟单教程    原站 .styles_choose__QB-si
 * ========================================================================== */
.steps { padding-top: 2.4vw; }

.step {
  position: relative;
  width: 80vw;
  height: auto;
  margin: 6.133vw auto;
  padding: 5.067vw;
  background: #00152c;
  border: 1px solid #275d97;
}

.step-no {
  position: absolute;
  top: -4vw;
  left: 50%;
  width: 7.067vw;
  height: 7.067vw;
  transform: translateX(-50%);
  background: #0eff58;
  border-radius: 50%;
  font-size: 4.667vw;
  line-height: 7.067vw;
  text-align: center;
}

.step-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 3.467vw;
}

.step-b img {
  width: 12.267vw;
  height: 12.133vw;
}

.step-tx { width: 53.467vw; }
.step-tx h3 { margin-bottom: 3px; font-size: 3.733vw; }

.step:nth-of-type(2) .step-b img { width: 10.667vw; height: 12.133vw; }
.step:nth-of-type(3) .step-b img { width: 10.933vw; height: 12.8vw; }

/* ============================================================================
 * 7. 适合人群    原站 .styles_suitable__c+94a（外层同 .car，卡片是 .audience）
 * ========================================================================== */
.crowd {
  position: relative;
  width: 76.4vw;
  margin: 0 auto 13vw;
}

.crowd-card {
  width: 100%;
  height: 37.2vw;
  margin-top: 8vw;
  background: #00152c;
  border: 1px solid #3699ff;
  border-radius: 2.6667vw;
}

.crowd-h {
  width: 100%;
  height: 11.7333vw;
  background: linear-gradient(0deg, #064036, #35ac5d);
  border: 1px solid #3699ff;
  border-radius: 2.6667vw 2.6667vw 0 0;
  color: #fff;
  font-family: "Helvetica Neue";
  font-size: 5.2vw;
  font-weight: 700;
  line-height: 11.7333vw;
  text-align: center;
}

.crowd-d {
  width: 52.6667vw;
  margin: 0 auto;
  padding-top: 6.9333vw;
  color: #fff;
  font-family: "Helvetica Neue";
  font-size: 3.7333vw;
  font-weight: 500;
  line-height: 6vw;
  text-align: center;
}

/* ============================================================================
 * 8. 用户评价（纵向轮播，一屏 56vw）    原站 .styles_feedback__sRd2F
 * ========================================================================== */
.reviews {
  width: 93.6vw;
  height: 58vw;
  margin: 4.8vw auto 0;
  padding: 0 2.533vw;
  overflow: hidden;
  background: #00152c;
  border-radius: 1.6vw;
}

.rv-vp {
  position: relative;
  height: 56vw;
  overflow: hidden;
}

.rv-track { transition: transform 0.6s ease; }
.rv-track.no-anim { transition: none; }

.rv {
  display: flex;
  align-items: center;
  padding: 3.067vw 0;
  border-bottom: 1px solid #c0c1c0;
  /* ⚠️ 原站纵向轮播用 react-slick，每个 .slick-slide 比里面的 .feedback-text
     高 2px（实测 slideH 78.55 / innerH 76.55），所以行节距是「行高 + 2」。
     这里用 margin-bottom 复刻同一间距（offsetOf() 会把这个外边距算进位移）。
     注意：原站的位移是按固定 98.75px/slide 推进的，与行高不一致，
     轮播停下时首行会被卡片裁掉一截；那是源站 bug，不复刻。 */
  margin-bottom: 2px;
}

.rv-av {
  width: 6.4vw;
  height: 6.4vw;
  margin-right: 15px;
}

.rv-b {
  width: 73.867vw;
  color: #fff;
  font-size: 2.933vw;
  /* 原站行高来自 antd 的 1.5715（跟随字号），不是 normal：
     少了它 h3 只有 15px 高（应为 21.03px）、正文每行少 5.84px，整行矮 3px。 */
  line-height: 1.5715;
}

.rv-b h3 { font-size: 3.432vw; }

.rv-stars {
  display: flex;
  margin-top: -4px;
}

.rv-stars img {
  width: 2.533vw;
  height: 2.533vw;
}

.rv-tx {
  margin-top: 1vw;
  font-size: 3.4vw;
}

/* ============================================================================
 * 9. 常见问题    原站 .styles_fqa__9Z9XU
 * ⚠️ 原站外层还有个 .problem{margin-top:6.667vw}，与父级 margin 折叠后
 *    实际生效的是 6.667vw，这里直接写在 .faq 上。
 * ========================================================================== */
.faq {
  width: 93.6vw;
  height: auto;
  margin: 6.667vw auto 0;
  color: #fff;
  border-radius: 1.6vw;
}

.faq-item {
  width: 100%;
  height: auto;
  margin: 0.667vw 0;
  padding: 2vw 2.8vw;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-q > div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-size: 3.333vw;
}

.faq-q > div > p {
  display: flex;
  align-items: center;
  color: #0eff58;
}

.faq-q > div > p img {
  width: 4.133vw;
  height: 2.933vw;
  margin-right: 2vw;
}

.faq-q > p {
  padding: 1.333vw 6.667vw;
  cursor: pointer;
}

.faq-q > p span {
  display: block;
  width: 18px;
  height: 18px;
  background-color: #826944;
  border-radius: 50%;
  font-size: 4.667vw;
  line-height: 16px;
  text-align: center;
}

.faq-a {
  display: none;
  margin-top: 4vw;
  font-size: 3.2vw;
  white-space: pre-line;
  outline: none;
}

.faq-a.is-on { display: block; }

/* ============================================================================
 * 10. 结尾 CTA    原站 .styles_footer__PQ1Nt
 * ========================================================================== */
.end {
  margin-top: 4.667vw;
  padding-bottom: 5vw;
  color: #fff;
  text-align: center;
}

.end h2 { font-size: 3.867vw; }
/* ⚠️ 必须用 `>`：按钮内部也有一个 <span>（文案钩子），
   写成后代选择器会把 5.6vw 的按钮文字压成 2.933vw。 */
.end > span { font-size: 2.933vw; }

/* 原站 .styles_footer__PQ1Nt>div{color:#00152c;margin:3vw auto} 覆盖了按钮本身的外边距 */
.end .btn-gold {
  margin: 3vw auto;
  color: #00152c;
}