/* 首页专用区块:大图、About、四个卖点、Business 钉住背景、How It Works。 */

/* ---------- 大图 ---------- */
/* 大图区块从页面顶端算起(页头压在它上面),顶上留 --top-gap 白边,图从白边下面开始。
   顶端不再留白边:照片和渐变一直铺到页面顶端,页头压在渐变上。
   照片本身很亮:靠一层整幅的深蓝黑渐变托住文字(左深右透、底部略暗、顶部一条托住导航),
   文字直接落在照片上。右侧的 CES 立体大字是照片主体,遮罩到那里已经基本透明。
   左上角再加一片椭圆暗区托住两行大标题,到 CES 立体大字那里已经淡没了。 */
.hero {
  position: relative;
  height: calc(var(--top-gap) + var(--header-h) + clamp(480px, calc(55.56 * var(--vw)), 800px));
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 40% at 30% 25%, rgb(var(--night) / 0.85) 0%, rgb(var(--night) / 0.66) 55%, rgb(var(--night) / 0) 100%),
    linear-gradient(180deg, rgb(var(--night) / 0.6) 0, rgb(var(--night) / 0.45) 100px, rgb(var(--night) / 0) 220px),
    linear-gradient(90deg, rgb(var(--night) / 0.88) 0%, rgb(var(--night) / 0.62) 34%, rgb(var(--night) / 0.18) 58%, rgb(var(--night) / 0) 76%),
    linear-gradient(0deg, rgb(5 10 15 / 0.3) 0%, rgb(5 10 15 / 0) 40%);
}

.hero__body { position: relative; z-index: 1; padding-top: calc(var(--header-h) + 96px); }

.hero__intro { max-width: 720px; } /* 82px 的「Global Connect Show」约 700px 宽,要能放进一行 */

/* 标题两行一样大、同样重要:青色「Global Connect Show」+ 白色「CES 2027」(沿用原站的两行式),
   左边一条 3px 青色竖线。字号上限 82px:再大「Global Connect Show」一行就伸到 CES 立体大字那一列了 */
.hero__title {
  margin-left: -27px; /* 竖线和留白往左外扩,文字左边仍和下面各区块的正文对齐 */
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, calc(5.7 * var(--vw)), 82px); /* 下限 34px:360 宽的手机上两行也都不折行 */
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-shadow: var(--hero-text-shadow);
}
.hero__brand { display: block; color: var(--accent-bright); }
.hero__event { display: block; color: var(--paper); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 28px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.92);
}
.hero__place { display: inline-flex; align-items: center; gap: 6px; }
.hero__pin { flex: none; font-size: 15px; line-height: 1; letter-spacing: 0; }

/* ---------- About ---------- */
.about { padding-block: 109px 91px; }

.about__grid {
  display: grid;
  grid-template-columns: 345px 1px 1fr;
  align-items: start;
}

.about__title { max-width: 300px; margin-top: 71px; line-height: 1.175; }

.about__rule { width: 1px; height: 231px; background: var(--rule); }

.about__text { margin-left: 58px; padding-top: 5px; }
.about__text p { font-size: 16px; line-height: 28.8px; }
.about__text .lead { font-size: 22px; line-height: 30.8px; font-weight: 700; }
.about__text .lead + p { margin-top: 41.6px; }

/* ---------- 四个卖点 ---------- */
.pillars { background: var(--ink); color: var(--paper); }

.pillars__list {
  list-style: none;
  width: min(1040px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 77px 0 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pillars__item { display: flex; flex-direction: column; align-items: center; }
.pillars__item::after {
  content: "";
  width: 40px;
  height: 5px;
  margin-top: 24.8px;
  background: var(--accent);
}

.pillars__label {
  min-height: 79.2px;
  max-width: 190px;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 24px;
  line-height: 26.4px;
  font-weight: 700;
  text-wrap: balance;
}

/* ---------- How It Works ---------- */
.how { padding-block: 114px 79px; }

.how__intro {
  display: grid;
  grid-template-columns: 500px 419px;
  column-gap: 49px;
  align-items: start;
}
.how__intro img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.how__intro-text { padding-top: 16px; }
.how__intro-text p { font-size: 18px; line-height: 28.8px; }
.how__intro-text p + p { margin-top: 28.8px; }

.how__title { margin-top: 69px; font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1; }

.steps {
  list-style: none;
  padding: 0;
  margin-top: 41px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step {
  position: relative;
  min-height: 274px;
  padding: 46px 21px 25px 23px;
  border: 1px solid var(--line);
}

.step__no {
  position: absolute;
  top: -1px;
  right: 19px;
  width: 46px;
  height: 44px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-number);
  font-size: 28px;
  line-height: 44px;
  text-align: center;
}

.step__title { font-size: 24px; line-height: 24px; font-weight: 700; }
.step p { margin-top: 24px; font-size: 16px; line-height: 25.6px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
  /* 大图:手机上照片在上、文字接在下面(文字压在照片上会挡住 CES 立体大字)。
     照片底边渐隐成同色的深蓝黑,文字从渐隐处开始,不出现一条硬边 */
  .hero { height: auto; display: flex; flex-direction: column; background: rgb(var(--night)); }
  .hero__bg { position: relative; inset: auto; height: calc(var(--header-h) + 260px); object-position: 78% 100%; }
  .hero::after {
    background: linear-gradient(180deg,
      rgb(var(--night) / 0.62) 0, rgb(var(--night) / 0.48) 90px, rgb(var(--night) / 0) 190px,
      rgb(var(--night) / 0) calc(var(--header-h) + 200px), rgb(var(--night)) calc(var(--header-h) + 260px));
  }
  .hero__body { margin-top: -32px; padding-top: 0; padding-bottom: 48px; }
  .hero__title { margin-left: 0; padding-left: 16px; }
  .hero__meta { padding-left: 19px; }

  .about { padding-block: 72px; }
  .about__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .about__title { margin-top: 0; max-width: none; }
  .about__rule { width: 64px; height: 2px; }
  .about__text { margin-left: 0; }

  .pillars__list { grid-template-columns: repeat(2, 1fr); row-gap: 40px; padding-block: 56px; }

  .how { padding-block: 72px; }
  .how__intro { grid-template-columns: 1fr; row-gap: 32px; }
  .how__intro-text { padding-top: 0; }
  .how__title { margin-top: 56px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
}

@media (max-width: 640px) {
  .hero__meta { font-size: 14px; letter-spacing: 0.1em; }
  .pillars__label { font-size: 20px; line-height: 24px; min-height: 72px; }
}