/* ============================================================
   sections.css — 各内容区块
   ============================================================ */

/* ===================== 1. HERO ===================== */
.hero {
  position: relative;
  background: var(--blue-900);
  color: var(--white);
  overflow: hidden;
}

/* 放射光束背景图：SVG slice 裁切（右对齐 + 垂直居中）
   揭示动画：放大到 400% 的斜向渐变遮罩整体平移（0% → 100%），
   起始时整个元素落在黑色（隐藏）区，结束时落在透明（显示）区。 */
.hero__art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--page-max) - 2 * var(--gutter)));
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(
    135deg,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, 0.92) 38%,
    transparent 56%,
    transparent 100%
  );
  mask-image: linear-gradient(
    135deg,
    #000 0%,
    #000 26%,
    rgba(0, 0, 0, 0.92) 38%,
    transparent 56%,
    transparent 100%
  );
  -webkit-mask-size: 400% 400%;
  mask-size: 400% 400%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  transition: opacity 600ms var(--ease-out), -webkit-mask-position 1200ms var(--ease-out),
    mask-position 1200ms var(--ease-out);
}
.hero__art.is-revealed {
  opacity: 1;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
}
.hero__art img {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: auto;
  height: 100%;
  max-width: none;
}
.hero__art.is-done {
  -webkit-mask-image: none;
  mask-image: none;
}

.hero__inner {
  position: relative;
  z-index: 10;
  padding-top: 32px;
}
@media (min-width: 640px) {
  .hero__inner { padding-top: 40px; }
}
@media (min-width: 768px) {
  .hero__inner { padding-top: 56px; }
}
@media (min-width: 1024px) {
  .hero__inner { padding-top: 96px; }
}
@media (min-width: 1280px) {
  .hero__inner { padding-top: 112px; }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  color: var(--white);
}

.hero__title {
  font-size: 32px;
  line-height: 1.375;
  font-weight: 700;
  color: var(--white);
  opacity: 0;
}
@media (min-width: 640px) {
  .hero__title { line-height: 1.5; }
}
@media (min-width: 768px) {
  .hero__title {
    font-size: 48px;
    line-height: 1.5;
    max-width: 672px;
  }
}
@media (min-width: 1024px) {
  .hero__title {
    font-size: 60px;
    line-height: 1.375;
    max-width: 832px;
  }
}
@media (min-width: 1280px) {
  .hero__title {
    font-size: 72px;
    line-height: 1.25;
    max-width: 960px;
  }
}

.hero__subtitle {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
  color: var(--gray-400);
  opacity: 0;
}
@media (min-width: 640px) {
  .hero__subtitle {
    font-size: 20px;
    line-height: 1.6;
  }
}
@media (min-width: 768px) {
  .hero__subtitle { max-width: 576px; }
}
@media (min-width: 1024px) {
  .hero__subtitle {
    font-size: 24px;
    line-height: 1.5;
    max-width: 720px;
  }
}
@media (min-width: 1280px) {
  .hero__subtitle { line-height: 1.6667; }
}

.hero__stats-wrap {
  margin-top: 0;
  padding-block: 64px;
  opacity: 0;
}
@media (min-width: 640px) {
  .hero__stats-wrap { padding-top: 80px; }
}
@media (min-width: 768px) {
  .hero__stats-wrap {
    margin-top: 8px;
    padding-top: 96px;
  }
}
@media (min-width: 1024px) {
  .hero__stats-wrap {
    margin-top: 24px;
    padding-block: 112px;
  }
}
@media (min-width: 1280px) {
  .hero__stats-wrap { margin-top: 24px; }
}

.hero__stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .hero__stats { flex-direction: row; }
}

.hero__stat {
  display: flex;
  flex-direction: column;
  padding-block: 16px;
  opacity: 0;
}
.hero__stat-value {
  font-size: 32px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--white);
}
@media (min-width: 1024px) {
  .hero__stat-value {
    font-size: 36px;
    line-height: 1.5;
  }
}
@media (min-width: 1280px) {
  .hero__stat-value {
    font-size: 44px;
    line-height: 1.5;
  }
}
.hero__stat-label {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--white);
}
@media (min-width: 1024px) {
  .hero__stat-label {
    font-size: 20px;
    line-height: 1.5;
  }
}
@media (min-width: 1280px) {
  .hero__stat-label {
    font-size: 24px;
    line-height: 1.3333;
  }
}

/* 入场结束态 */
.hero__title.is-in,
.hero__subtitle.is-in,
.hero__stats-wrap.is-in,
.hero__stat.is-in {
  opacity: 1;
  transition: opacity 700ms var(--ease-out);
}

/* ===================== 2. INTRO 标题 ===================== */
.intro {
  background: var(--blue-900);
  color: var(--white);
}
.intro__inner {
  padding-block: 48px;
}
@media (min-width: 640px) {
  .intro__inner { padding-block: 64px; }
}
@media (min-width: 768px) {
  .intro__inner { padding-block: 72px; }
}
@media (min-width: 1024px) {
  .intro__inner { padding-block: 80px; }
}
.intro__title {
  font-size: 32px;
  line-height: 48px;
  font-weight: 600;
  color: var(--white);
  max-width: 768px;
}
@media (min-width: 768px) {
  .intro__title { max-width: 768px; }
}
@media (min-width: 1024px) {
  .intro__title {
    font-size: 64px;
    line-height: 96px;
    max-width: 1024px;
  }
}

/* ===================== 3. CAPABILITIES（Tab + 圆环） ===================== */
.capabilities {
  background: var(--blue-900);
  color: var(--white);
}
.capabilities__inner {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .capabilities__inner { padding-block: 72px; }
}
@media (min-width: 1024px) {
  .capabilities__inner { padding-block: 80px; }
}

/* Tab 行（仅桌面） */
.capabilities__tabs {
  display: none;
}
@media (min-width: 1024px) {
  .capabilities__tabs {
    display: flex;
    justify-content: space-between;
  }
}
.cap-tab {
  padding-block: 8px;
  font-size: 24px;
  line-height: 39px;
  font-weight: 600;
  color: var(--white);
  transition: color var(--t-fast) var(--ease-out);
}
@media (min-width: 1024px) {
  .cap-tab {
    font-size: 30px;
    line-height: 39px;
  }
}
@media (min-width: 1280px) {
  .cap-tab {
    font-size: 36px;
    line-height: 40px;
  }
}
.cap-tab:hover {
  color: var(--blue-400);
}
.cap-tab.is-active {
  color: var(--blue-400);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 12px;
}

/* 面板布局 */
.capabilities__panels {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .capabilities__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 80px;
    padding-bottom: 8px;
  }
}

.capabilities__chart {
  position: relative;
  order: -1;
  width: 100%;
  height: 290px;
}
@media (min-width: 640px) {
  .capabilities__chart { height: 480px; }
}
@media (min-width: 768px) {
  .capabilities__chart { height: 652px; }
}
@media (min-width: 1024px) {
  .capabilities__chart {
    order: 0;
    height: 473px;
  }
}
@media (min-width: 1280px) {
  .capabilities__chart { height: 524px; }
}
@media (min-width: 1440px) {
  .capabilities__chart { height: 604px; }
}
.capabilities__chart canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.capabilities__text {
  display: block;
}
@media (min-width: 1024px) {
  .capabilities__text {
    padding: 32px 64px 32px 0;
  }
}
@media (min-width: 1280px) {
  .capabilities__text {
    padding: 64px 64px 64px 0;
  }
}

.cap-panel {
  display: block;
}
@media (min-width: 1024px) {
  .cap-panel {
    display: none;
  }
  .cap-panel.is-active {
    display: block;
  }
}
.cap-panel + .cap-panel {
  margin-top: 44px;
}
@media (min-width: 640px) {
  .cap-panel + .cap-panel { margin-top: 48px; }
}
@media (min-width: 768px) {
  .cap-panel + .cap-panel { margin-top: 52px; }
}
.cap-panel__title {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
  color: var(--white);
}
@media (min-width: 640px) {
  .cap-panel__title {
    font-size: 20px;
    line-height: 1.6;
  }
}
@media (min-width: 1024px) {
  .cap-panel__title {
    font-size: 24px;
    line-height: 1.5;
  }
}
@media (min-width: 1280px) {
  .cap-panel__title { line-height: 1.6667; }
}
.cap-panel__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
  color: var(--gray-400);
}
@media (min-width: 640px) {
  .cap-panel__text {
    font-size: 20px;
    line-height: 1.6;
  }
}
@media (min-width: 768px) {
  .cap-panel__text { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .cap-panel__text {
    margin-top: 24px;
    font-size: 24px;
    line-height: 1.5;
  }
}
@media (min-width: 1280px) {
  .cap-panel__text { line-height: 1.6667; }
}
.cap-panel__cta {
  display: block;
  margin-top: 32px;
  padding: 12px;
  border: 2px solid var(--white);
  border-radius: var(--radius-btn);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (min-width: 640px) {
  .cap-panel__cta {
    display: inline-block;
    margin-top: 36px;
    padding: 16px 24px;
  }
}
@media (min-width: 768px) {
  .cap-panel__cta { margin-top: 40px; }
}
.cap-panel__cta:hover {
  background: var(--white);
  color: var(--balyasny-blue);
}

/* 移动端：圆环与文案之间的间距（对应原站 mt-2 / mt-11~13） */
@media (max-width: 1023px) {
  .capabilities__text {
    margin-top: 8px;
  }
  .cap-panel:first-child {
    margin-top: 44px;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .cap-panel:first-child {
    margin-top: 48px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cap-panel:first-child {
    margin-top: 52px;
  }
}
/* ===================== 4. PILLARS（三行卡片） ===================== */
.pillars {
  background: var(--blue-100);
  color: var(--blue-900);
}
.pillars__inner {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .pillars__inner { padding-block: 72px; }
}
@media (min-width: 1024px) {
  .pillars__inner { padding-block: 80px; }
}

.pillar {
  display: block;
  padding-block: 8px;
}
@media (min-width: 1024px) {
  .pillar { padding-block: 40px; }
}
.pillar__label {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--blue-900);
}
.pillar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.pillar__title {
  flex: 1;
  margin-right: 4px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease-out);
}
@media (min-width: 1024px) {
  .pillar__title {
    font-size: 64px;
    line-height: 96px;
  }
}
.pillar:hover .pillar__title {
  color: var(--balyasny-blue);
}
.pillar__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 4px solid var(--balyasny-blue);
  border-radius: var(--radius-pill);
  background: var(--balyasny-blue);
  color: var(--white);
}
.pillar__arrow svg {
  width: 12px;
  height: 12px;
}
@media (min-width: 640px) {
  .pillar__arrow {
    width: 36px;
    height: 36px;
  }
  .pillar__arrow svg {
    width: 16px;
    height: 16px;
  }
}
@media (min-width: 1024px) {
  .pillar__arrow {
    width: 56px;
    height: 56px;
    border: 2px solid var(--ink);
    background: transparent;
    color: var(--ink);
  }
  .pillar__arrow svg {
    width: 20px;
    height: 20px;
  }
}
.pillar__desc {
  display: block;
  padding-block: 14px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--blue-900);
}
@media (min-width: 1024px) {
  .pillar__desc { display: none; }
}

@media (max-width: 1023px) {
  .pillar__desc {
    padding-block: 26px 22px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pillar__desc {
    padding-block: 34px 30px;
  }
}
/* ===================== 5. NEWS ===================== */
.news {
  background: var(--white);
  color: var(--ink);
}
.news__inner {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .news__inner { padding-block: 72px; }
}
@media (min-width: 1024px) {
  .news__inner { padding-block: 80px; }
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.news__label {
  flex: 1;
  padding: 0;
  margin-bottom: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink);
}


.news__track {
  display: flex;
  gap: 0 20px;
  padding: 10px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .news__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 0;
    overflow: visible;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 285px;
  background: var(--gray-150);
  scroll-snap-align: center;
  transform-origin: center;
  transition: transform 300ms var(--ease-out);
}
@media (min-width: 1024px) {
  .news-card { flex: auto; }
}
.news-card:hover {
  transform: scale(1.025);
}
.news-card__media {
  position: relative;
  width: 100%;
  height: 288px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .news-card__media { height: 256px; }
}
@media (min-width: 1024px) {
  .news-card__media { height: 224px; }
}
@media (min-width: 1280px) {
  .news-card__media { height: 288px; }
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}
.news-card__title {
  font-size: 20px;
  line-height: 1.625;
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .news-card__title {
    font-size: 28px;
    line-height: 1.625;
  }
}
.news-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin-top: 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  color: var(--ink);
}
.news-card__arrow svg {
  width: 18px;
  height: 18px;
}

/* ===================== 6. CTA ===================== */
.cta {
  display: block;
  background: var(--balyasny-blue);
  color: var(--white);
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
}
@media (min-width: 768px) {
  .cta__inner { padding-block: 44px; }
}
.cta__title {
  font-size: 32px;
  line-height: 48px;
  font-weight: 600;
  color: var(--white);
}
@media (min-width: 1024px) {
  .cta__title {
    font-size: 64px;
    line-height: 96px;
  }
}
.cta__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 3px solid var(--white);
  border-radius: var(--radius-pill);
  color: var(--white);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
@media (min-width: 768px) {
  .cta__arrow {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 1024px) {
  .cta__arrow {
    width: 72px;
    height: 72px;
    border-width: 4px;
  }
}
.cta__arrow svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 768px) {
  .cta__arrow svg {
    width: 18px;
    height: 18px;
  }
}
@media (min-width: 1024px) {
  .cta__arrow svg {
    width: 24px;
    height: 24px;
  }
}
.cta:hover .cta__arrow {
  background: var(--white);
  color: var(--balyasny-blue);
}

/* ===================== 7. DISCLOSURE ===================== */
.disclosure {
  background: var(--header-blue);
  color: var(--gray-300);
}
.disclosure__inner {
  padding-block: 40px;
}
@media (min-width: 640px) {
  .disclosure__inner { padding-block: 48px; }
}
@media (min-width: 768px) {
  .disclosure__inner { padding-block: 40px; }
}
@media (min-width: 1280px) {
  .disclosure__inner { padding-block: 48px; }
}
.disclosure p {
  font-size: 12px;
  line-height: 16px;
  color: var(--gray-300);
}
@media (min-width: 1024px) {
  .disclosure p {
    font-size: 14px;
    line-height: 22.75px;
  }
}




















/* 窄屏 canvas 尺寸与原站一致（768: 704×644，1024: 472×412），在容器内垂直居中 */
@media (min-width: 768px) and (max-width: 1023px) {
  .capabilities__chart canvas {
    height: 644px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .capabilities__chart canvas {
    height: 412px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}



/* 1024–1279：能力区左列文字整体下移，对齐基线排版起点 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .capabilities__text {
    padding-top: 42px;
  }
}



/* 超宽视口：hero 光束图整体下移（基线光束在 1920 下比垂直居中低约 24px） */
@media (min-width: 1536px) {
  .hero__art img {
    transform: translateY(calc(-50% + 52px));
  }
}







/* 1280–1439：能力区按钮距上一段更远（基线实测比 1440 多 24px） */
@media (min-width: 1280px) and (max-width: 1439px) {
  .cap-panel__cta {
    margin-top: 56px;
  }
}