/* ==========================================================================
   Taimei Contact Us (联系我们) — 1440px 设计稿 1:1 还原
   布局策略：文档流为主（hero 800px → 白色面板 273~873 → 卡片区 → 页脚），
   各区块间距由设计稿 y 坐标差值精确推算，避免整页散落绝对定位。
   纵向坐标链（页面累计）：
     hero 800 → panel(273,600 高) → 网格(879,两行 482) → US(1464) → SG(1915)
     → KR(2366) → 卡底 2717 → footer 2855
   ========================================================================== */

:root {
  --blue: #0A47ED;
  --text-dark: #3E3E3E;
  --white: #FFFFFF;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-cn: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text-dark);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

.page {
  position: relative;
  width: 1440px;
  margin: 0 auto;
}

/* ==========================================================================
   Hero（y:0-800）：装饰层 + 居中标题
   白色圆角面板不在此处，由下方 .ct-panel 以负 margin 上提至 y:273
   ========================================================================== */

.ct-hero {
  position: relative;
  height: 800px;
}

/* 装饰裁剪容器：100vw 全宽、超出即裁剪，光晕不产生横向溢出；
   子元素以视口中线为基准（50% ± 设计稿相对页面中线 720px 的偏移） */
.ct-decor {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 800px;
  overflow: hidden;
  pointer-events: none;
}

.ct-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 800px;
  background: linear-gradient(180deg, rgba(4, 24, 132, 1) 63%, rgba(4, 24, 132, 0) 100%);
}

/* 底部白色辉光：必须显式指定椭圆尺寸，否则浏览器按 farthest-corner 取半径，
   不透明的蓝色会一直铺到两侧与底部，在宽屏下露出蓝带 */
.ct-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(300% 100% at 50% 100%, rgba(255, 255, 255, 1) 14%, rgba(20, 64, 242, 1) 55%, rgba(0, 15, 96, 1) 94%);
}

.ct-glow {
  position: absolute;
  display: block;
}

.ct-glow--1 {
  top: -321px;
  left: calc(50% + 226px);
  width: 683px;
  height: 642px;
  background: var(--blue);
  filter: blur(112px);
}

.ct-block {
  position: absolute;
  top: -294px;
  left: calc(50% - 468px);
  width: 1185px;
  height: 673px;
}

.ct-glow--2 {
  top: 78px;
  left: calc(50% - 455px);
  width: 910px;
  height: 570px;
  background: rgba(140, 69, 255, 0.4);
  filter: blur(150px);
}

.ct-glow--3 {
  top: 250px;
  left: calc(50% - 591px);
  width: 1183px;
  height: 169px;
  background: #6756ff;
  filter: blur(25px);
}

/* 标题 (563,136) 314x70 居中 */
.ct-hero__title {
  position: absolute;
  top: 136px;
  left: 0;
  width: 100%;
  font-size: 64px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--white);
}

/* ==========================================================================
   白色圆角面板（y:273-873, 1280x600, r40）
   hero 高 800，负 margin -527 上提至 273；内部文档流：
     padding-top 76 → "Purchase & Inquiries"(349) → 联系块(462,高232)
     → margin 75 → "China Offices"(769) → padding-bottom 34 → 面板底 873
   ========================================================================== */

.ct-panel {
  position: relative;
  width: 1280px;
  height: 600px;
  margin: -527px auto 0;
  background: var(--white);
  border-radius: 40px;
  padding: 76px 0 34px;
}

/* 区块大标题：64px/70px 居中深灰 */
.ct-h2 {
  height: 70px;
  font-size: 64px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--text-dark);
}

.ct-h2--china {
  margin-top: 75px;
}

/* ==========================================================================
   联系块（页面 y:462-694，面板内相对坐标 = 页面 - 80(x) - 462(y)）
   ========================================================================== */

.ct-contact {
  position: relative;
  height: 232px;
  margin-top: 43px;
}

/* 蓝色小标签 18px/30px */
.ct-label {
  position: absolute;
  font-size: 18px;
  line-height: 30px;
  color: var(--blue);
}

.ct-label--media    { top: 0;   left: 84px; }
.ct-label--business { top: 118px; left: 84px; }
.ct-label--social   { top: 0;   left: 892px; }

/* 邮箱行（组 460x82）：图标(0,13) + 邮箱(55,0) + 按钮(311,30) */
.ct-mail {
  position: absolute;
  left: 84px;
  top: 22px;
  width: 460px;
  height: 82px;
}

.ct-mail--business {
  top: 140px;
}

.ct-mail__icon {
  position: absolute;
  top: 13px;
  left: 0;
  width: 40px;
  height: 40px;
}

.ct-mail__addr {
  position: absolute;
  top: 0;
  left: 55px;
  font-size: 32px;
  line-height: 60px;
  color: var(--text-dark);
  white-space: nowrap;
}

.ct-mail__btn {
  position: absolute;
  top: 30px;
  left: 311px;
  padding: 10px 32px 10.5px;
  background: var(--blue);
  color: var(--white);
  border-radius: 9999px;
  font-size: 16px;
  line-height: 28px;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* 二维码 140x140 + 下方说明文字 */
.ct-qr {
  position: absolute;
  top: 43px;
  width: 140px;
  height: 140px;
}

.ct-qr--linkedin { left: 772px; }
.ct-qr--wechat   { left: 979px; }

.ct-qr img {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

.ct-qr figcaption {
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--text-dark);
}

.ct-qr--linkedin figcaption { width: 183px; }
.ct-qr--wechat figcaption   { width: 168px; }

/* ==========================================================================
   办公室卡片（420x241，设计稿纯白无描边）
   内部：标题(35,20) | 楼宇图标(35,61)+联系方式(75,46) | 定位图标(35,110)+地址(75,110)
   ========================================================================== */

.ct-card {
  position: relative;
  width: 420px;
  height: 241px;
  background: var(--white);
}

.ct-card__title {
  position: absolute;
  top: 20px;
  left: 35px;
  font-size: 18px;
  line-height: 30px;
  color: var(--blue);
}

.ct-card__icon {
  position: absolute;
  left: 35px;
  width: 30px;
  height: 30px;
}

.ct-card__icon--building { top: 61px; }
.ct-card__icon--pin      { top: 110px; }

.ct-card__contact {
  position: absolute;
  top: 46px;
  left: 75px;
  font-size: 24px;
  line-height: 60px;
  color: var(--text-dark);
  white-space: nowrap;
}

.ct-card__addr {
  position: absolute;
  top: 110px;
  left: 75px;
  width: 337px;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-dark);
}

/* ==========================================================================
   China Offices 网格（页面 y:879 起）：3x2 无缝平铺，1260 宽居中
   ========================================================================== */

.ct-grid {
  display: grid;
  grid-template-columns: repeat(3, 420px);
  width: 1260px;
  margin: 6px auto 0;
}

/* ==========================================================================
   海外办公室（居中标题 + 居中单卡）
   间距链：网格底 1361 → +103 → US 标题 1464 → +40 → 卡 1574 → 底 1815
          → +100 → SG 标题 1915 → … → KR 卡底 2717
   ========================================================================== */

.ct-abroad__item {
  text-align: center;
}

.ct-abroad__item .ct-h2 {
  height: auto;
}

.ct-abroad__item:first-child {
  margin-top: 103px;
}

.ct-abroad__item + .ct-abroad__item {
  margin-top: 100px;
}

.ct-abroad__item .ct-card {
  margin: 40px auto 0;
}

/* 页脚（设计稿 y:2855，最后一张卡底 2717 → 间距 138px） */
.page .footer {
  position: relative;
  z-index: 1;
  margin-top: 138px;
}

/* ==========================================================================
   窄屏 PC（980px–1439px）：修正 .ct-decor 全屏出血层的对齐
   该层用「left: 50% + translateX(-50%)」把 100vw 铺满视口，这个写法同样以
   「.page(1440px) 居中」为前提。视口窄于 1440px 时 CSS 会把 .page 的
   margin:auto 解析为 0（不产生负边距），.page 左边缘落在 0 而非居中，
   该层因此整体右移 G = 720 - 视口宽/2，左侧露出缺口。
   这里直接钉在左边缘，并清掉 translateX(-50%)——否则会被推左半个视口出屏；
   ≥1440px 不命中本规则，PC 效果不变。
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1439px) {
  .ct-decor {
    left: 0;
    transform: none;
  }
}