/*
  设计哲学：工业产品摄影式企业官网美学。
  本样式文件复刻“公司文化”参考图：白色企业导航、深色油液横幅、居中理念标题、四栏图标理念、浅灰大卡片图文分栏。
  用户此前要求不生成图片，因此横幅油液与团队照片均以 CSS 占位纹理和轮廓模拟。
*/



/* 页面 Banner：与 factory 页面保持一致 */
/* ===========================
   Banner 区域
   =========================== */
.banner {
  position: relative;
  background: #2d2d3d;
  overflow: hidden;
  margin-top: var(--site-header-height);
}

.banner-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a3a4a;
}

.banner-bg .placeholder-icon {
  opacity: 0.15;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.banner-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgb(0, 0, 0), rgba(18, 18, 20, 0.9), rgba(26, 26, 46, 0));
}

.banner-content {
  position: relative;
  z-index: 2;
  width: min(100% - 64px, 1480px);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px 0 60px;
}

.banner-content h1 {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}

.banner-content p {
  font-size: 17px;
  color: #c0c0c8;
  margin-bottom: 28px;
  font-weight: 300;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #999;
}

.breadcrumb a {
  color: #999;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb .sep {
  display: flex;
  align-items: center;
}

.breadcrumb .sep svg {
  width: 14px;
  height: 14px;
  color: #666;
}

.breadcrumb .current {
  color: #ddd;
}

.belief-section {
  padding: 48px 0 58px;
  background: #fff;
}

.about-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.section-heading {
  text-align: center;
  margin-bottom: 38px;
}

.section-heading h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -0.045em;
  color: #151515;
}

.section-heading span {
  display: block;
  width: 42px;
  height: 4px;
  margin: 15px auto 0;
  border-radius: 99px;
  background: #e2ad22;
}

.belief-grid {
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.belief-item {
  position: relative;
  min-height: 142px;
  padding: 0 46px;
  text-align: center;
  animation: riseIn 560ms ease both;
}

.belief-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 21px;
  width: 1px;
  height: 112px;
  background: #dedede;
}

.belief-item h3 {
  margin: 0 0 13px;
  font-size: 18px;
  font-weight: 800;
  color: #141414;
}

.belief-item p {
  margin: 0 auto;
  max-width: 186px;
  font-size: 14px;
  line-height: 1.78;
  color: #5c5c5c;
}

.future-card {
  width: min(1320px, calc(100% - 80px));
  margin: 0 auto 58px;
  display: grid;
  grid-template-columns: 0.66fr 1fr;
  overflow: hidden;
  border-radius: 4px;
  background: #f7f7f7;
  box-shadow: 0 13px 32px rgba(30,30,30,0.06);
}

.future-card.about-container {
  padding-left: 0;
  padding-right: 0;
}

.future-copy {
  padding: 38px 48px 30px;
  background: #f7f7f7;
}

.future-copy h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.05em;
  color: #0f0f0f;
}

.title-line {
  display: block;
  width: 36px;
  height: 3px;
  margin: 15px 0 24px;
  background: #e2ad22;
  border-radius: 99px;
}

.future-copy p {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.86;
  color: #4c4c4c;
}

.team-photo-placeholder {
  position: relative;
  min-height: 252px;
  overflow: hidden;
  background:
    radial-gradient(circle at 33% 66%, rgba(255,184,43,0.75), transparent 9%),
    linear-gradient(180deg, #d9ebf3 0%, #f6e4bf 56%, #c89b48 100%);
}

.team-photo-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 252px;
  object-fit: cover;
}

.team-photo-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.15), transparent 42%);
  opacity: 0.4;
}

.sun-glow {
  position: absolute;
  left: 29%;
  bottom: 41px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,178,0.98) 0 5px, rgba(255,184,34,0.58) 6px 22px, transparent 62%);
  box-shadow: 0 0 60px rgba(238,159,19,0.68);
}

.mountain-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #151514;
}

.layer-back {
  height: 84px;
  opacity: 0.28;
  clip-path: polygon(0 74%, 13% 44%, 25% 65%, 39% 31%, 55% 68%, 67% 37%, 82% 55%, 100% 22%, 100% 100%, 0 100%);
}

.layer-front {
  height: 118px;
  opacity: 0.96;
  clip-path: polygon(0 100%, 26% 100%, 39% 61%, 52% 42%, 67% 25%, 81% 11%, 100% 18%, 100% 100%);
}

.climber {
  position: absolute;
  width: 12px;
  height: 39px;
  background: #111;
  border-radius: 9px 9px 3px 3px;
  transform-origin: bottom center;
}
.climber::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #111;
}
.climber::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 9px;
  width: 44px;
  height: 4px;
  background: #111;
  border-radius: 99px;
  transform: rotate(-21deg);
}
.c1 { right: 39%; bottom: 70px; transform: rotate(17deg) scale(1.18); }
.c2 { right: 31%; bottom: 94px; transform: rotate(-18deg) scale(0.92); }
.c3 { right: 22%; bottom: 111px; transform: rotate(-10deg) scale(0.98); }
.c4 { right: 13%; bottom: 119px; transform: rotate(8deg) scale(1.05); }
.c5 { right: 5%; bottom: 127px; transform: rotate(-6deg) scale(0.98); }

/* 移除旧的 footer 样式，使用 main.css 中的 site-footer */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .about-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .future-card {
    width: calc(100% - 48px);
  }
}

@media (max-width: 900px) {
  .belief-item { padding: 0 26px; }
}

@media (max-width: 768px) {
  .about-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .future-card {
    width: calc(100% - 32px);
  }

  .banner-content h1 {
    font-size: 28px;
  }

  .banner-content p {
    font-size: 15px;
  }
}

@media (max-width: 620px) {
  .belief-grid { grid-template-columns: 1fr; }
  .belief-item::after { display: none !important; }
  .future-copy { padding: 30px 24px; }
}

@media (max-width: 480px) {
  .banner-overlay {
    background-size: auto;
  }

  .banner-content {
    width: calc(100% - 32px);
    padding: 40px 0;
  }

  .banner-content h1 {
    font-size: 24px;
  }
}

/* CSS 绘制的理念图标 */
.belief-icon {
  position: relative;
  width: 100px;
  height: 95px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

.target-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px solid #111;
  border-radius: 50%;
  box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 12px #111;
}
.target-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
  transform: translate(-50%, -50%);
}
.eye-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 16px;
  height: 28px;
  border: 3px solid #111;
  border-radius: 50% / 60%;
  transform: rotate(-2deg);
}
.eye-icon::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 24px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #111;
}
.diamond-icon::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  width: 35px;
  height: 35px;
  border: 3px solid #111;
  transform: rotate(45deg);
}
.diamond-icon::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 8px;
  width: 3px;
  height: 48px;
  background: #111;
  transform: rotate(45deg);
  opacity: 0.9;
}
.people-icon::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 6px;
  width: 17px;
  height: 17px;
  border: 3px solid #111;
  border-radius: 50%;
  box-shadow: -20px 12px 0 -2px #fff, -20px 12px 0 1px #111, 20px 12px 0 -2px #fff, 20px 12px 0 1px #111;
}
.people-icon::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 31px;
  width: 36px;
  height: 20px;
  border: 3px solid #111;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}