* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  color: #222;
  background: #f7f4ed;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.container { width: min(960px, calc(100% - 40px)); margin: 0 auto; }
.header { border-bottom: 1px solid #e8e8e8; }

.brand {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand div { display: flex; flex-direction: column; gap: 5px; }
.brand strong { font-size: 18px; font-weight: 600; }
.brand span { color: #888; font-size: 10px; letter-spacing: .12em; }

main {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 184px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #fbfaf7 0%, #f1ede3 100%);
}

.ambient-shape { position: absolute; pointer-events: none; }

.shape-one {
  width: 470px;
  height: 470px;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(24,61,49,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 58px rgba(24,61,49,.04), inset 0 0 0 110px rgba(184,152,86,.05);
}

.shape-two {
  width: 150px;
  height: 280px;
  right: 17%;
  top: 27%;
  border-radius: 100% 0 100% 0;
  background: rgba(24,61,49,.08);
  transform: rotate(25deg);
}

.ambient-line {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 58px;
  height: 1px;
  background: rgba(24,61,49,.08);
  transform: rotate(-4deg);
}

.company {
  padding: 70px 0 90px;
  position: relative;
  z-index: 1;
}

.company::after {
  content: "YUTANG";
  position: absolute;
  left: -10px;
  bottom: 2px;
  color: rgba(31, 65, 51, .06);
  font: 700 clamp(90px, 15vw, 180px)/.8 Georgia, serif;
  letter-spacing: .04em;
  z-index: -1;
}
.label { margin: 0 0 18px; color: #777; font-size: 14px; }

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 600;
  letter-spacing: .04em;
}

.intro {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 28px 0 42px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.scope { padding-top: 28px; border-top: 1px solid #e8e8e8; }
.scope h2 { margin: 0 0 13px; font-size: 17px; }
.scope p, .notice { margin: 0; color: #666; font-size: 14px; line-height: 1.8; }
.notice { margin-top: 36px; color: #999; font-size: 12px; }

.footer { border-top: 1px solid #e8e8e8; color: #777; font-size: 12px; }

.footer-content {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-content p { margin: 0; }
.footer a { color: #555; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .brand { min-height: 76px; }
  .brand img { width: 48px; height: 48px; }
  .brand strong { font-size: 16px; }
  main { min-height: auto; }
  .company { padding: 72px 0 90px; }
  .shape-one { width: 300px; height: 300px; right: -130px; top: 39%; }
  .shape-two { width: 95px; height: 190px; right: 8%; top: 28%; }
  .ambient-line { bottom: 76px; }
  .intro { margin-top: 24px; font-size: 15px; }
  .footer-content { padding: 24px 0; flex-direction: column; gap: 10px; }
}