/* Home — asymmetric layout, breathing room, scroll reveal (Obys-inspired) */

/* ----- Section padding: consistent left/right breath ----- */
.home-section {
  padding-left: 8vw;
  padding-right: 8vw;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* data-block、ipo-block 单独外边距；site-footer 保持默认 */
.data-block.home-section,
.ipo-block.home-section {
  margin-left: 33%;
  margin-right: 5%;
}

/* Hero 桌面端保持原样，背景图铺满一屏、底部对齐（裁顶部不裁底部） */
.hero {
  padding: 12vw 8vw 10vw;
  min-height: 100vh;
  background-image: url('../img/hero@1x.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Hero CTA：金色粗体+下划线，电脑端与手机端一致，无按钮 */
.hero-cta {
  display: inline-block;
  padding: 0;
  background: none;
  color: var(--brand-gold);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  transition: opacity 0.2s var(--ease-out);
}
.hero-cta:hover { opacity: 0.85; }

/* Hero intro：按语言用对应字体（中文 Noto Serif SC，避免移动端显示为 Lora/系统字体） */
.hero__intro {
  font-family: var(--font-body);
}
html[data-lang="cn"] .hero__intro,
body[data-lang="cn"] .hero__intro {
  font-family: var(--font-cn);
}
html[data-lang="jp"] .hero__intro,
body[data-lang="jp"] .hero__intro {
  font-family: var(--font-jp);
}

/* ----- Data block: 参考图布局 — 左侧 100+/80%，竖线，右侧 60%+/1/3/60%+ ----- */
.data-block {
  padding: 6rem 0 5rem;
  border-bottom: 1px solid var(--hairline);
}

.data-grid-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  position: relative;
}

/* 左侧：100+ 左上，80% 下方略向右错落 */
.data-grid-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-right: 3rem;
}

.data-stat[data-order="1"] { transition-delay: 0ms; }
.data-stat.data-stat--stagger { margin-left: 2.5rem; transition-delay: 100ms; }

/* 竖线：1px 细分隔，贯穿区域右侧 */
.data-grid-line {
  width: 1px;
  min-height: 100%;
  background: var(--hairline);
  flex-shrink: 0;
  align-self: stretch;
}

/* 右侧：60%+、1/3、60%+ 竖排，间距为原 1.5 倍 */
.data-grid-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  padding-left: 3rem;
  min-width: 12rem;
}

.data-stat[data-order="3"] { transition-delay: 180ms; }
.data-stat[data-order="4"] { transition-delay: 260ms; }
.data-stat[data-order="5"] { transition-delay: 340ms; }

.data-stat {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transition-reveal) var(--ease-out),
              transform var(--transition-reveal) var(--ease-out);
}

.data-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.data-stat__number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
  color: var(--brand-gold);
  letter-spacing: 0.02em;
}

.data-stat__label {
  margin-top: 0.5rem;
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
  color: var(--text-on-light);
  opacity: 0.85;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .data-stat[data-order="1"] .data-stat__number { font-size: clamp(3rem, 7vw, 5rem); }
}

@media (max-width: 767px) {
  .data-grid-wrap { flex-direction: column; }
  .data-grid-left { padding-right: 0; }
  .data-stat.data-stat--stagger { margin-left: 0; }
  .data-grid-line { display: none; }
  .data-grid-right { padding-left: 0; min-width: 0; padding-top: 2rem; }
  /* data-block 移动端加重：更多留白 + 略大字号，避免「太轻」 */
  .data-block.home-section { padding: 5rem 0; }
  .data-block .data-stat__number { font-size: clamp(2.75rem, 10vw, 3.5rem); }
  .data-block .data-stat__label { font-size: 1rem; }
}

/* ----- Hero：仅移动端拉高、增加留白（桌面不改） ----- */
@media (max-width: 767px) {
  .hero {
    padding: 22vw 15% 24vw !important;
    min-height: 72vh;
    display: flex;
    align-items: center;
  }
  .hero .page-main { width: 100%; }
  .hero .hero__title { font-size: clamp(1.375rem, 5vw, 1.75rem); }
  .hero .hero__intro { font-size: 1rem; line-height: 1.75; margin-bottom: 2.5rem; }
}

/* ----- IPO block: asymmetric, larger type ----- */
.ipo-block {
  padding: 6rem 0 5rem;
}

.ipo-block .ipo-head {
  margin-bottom: 2.5rem;
  max-width: 42rem;
}

.ipo-block .ipo-title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.ipo-block .ipo-desc {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  opacity: 0.9;
}

.ipo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  margin-bottom: 3rem;
}

.ipo-item {
  border-left: 1px solid var(--hairline);
  padding-left: 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-reveal) var(--ease-out), transform var(--transition-reveal) var(--ease-out);
}

.ipo-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ipo-item:nth-child(1) { transition-delay: 0ms; }
.ipo-item:nth-child(2) { transition-delay: 60ms; }
.ipo-item:nth-child(3) { transition-delay: 120ms; }
.ipo-item:nth-child(4) { transition-delay: 180ms; }
.ipo-item:nth-child(5) { transition-delay: 240ms; }

.ipo-item .ticker { color: var(--brand-gold); font-family: var(--font-display); }

.ipo-pipeline {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-reveal) var(--ease-out), transform var(--transition-reveal) var(--ease-out);
}

.ipo-pipeline.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 15+ 右对齐，与右边保留 5% 空隙 */
.ipo-pipeline {
  margin-left: auto;
  margin-right: 5%;
  text-align: right;
  max-width: 20em;
}

.ipo-pipeline .big-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--brand-gold);
  letter-spacing: 0.02em;
}

.ipo-pipeline .big-num-label { margin-top: 0.35rem; font-size: 1rem; opacity: 0.9; }

@media (min-width: 768px) {
  .ipo-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .data-stat,
  .ipo-item,
  .ipo-pipeline {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .data-stat.is-visible,
  .ipo-item.is-visible,
  .ipo-pipeline.is-visible { transform: none; }
}