:root {

  --bg: #f7f8fb;

  --surface: #ffffff;

  --surface-alt: #f4f6fb;

  --text: #21242f;

  --muted: #7a8194;

  --line: #ebeef5;

  --line-strong: #ffd2c2;

  --orange: #ff6a2a;

  --orange-deep: #ff5a17;

  --green: #86b94e;

  --shadow: 0 18px 45px rgba(38, 42, 71, 0.08);

  --radius-lg: 24px;

  --radius-md: 16px;

  --radius-sm: 12px;

  --container: 1200px;

}





.container {

  width: min(calc(100% - 48px), var(--container));

  margin: 0 auto;

}



.hero {

  position: relative;

  overflow: hidden;

  padding: 94px 0 74px;

}



.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(71, 132, 255, 0.12), transparent 32%),
    radial-gradient(circle at 84% 22%, rgba(130, 94, 255, 0.10), transparent 30%),
    linear-gradient(180deg, #f3f7ff 0%, #ffffff 78%);
  opacity: 1;
}



.hero-inner {

  position: relative;

  z-index: 1;

  text-align: center;

}



.eyebrow {

  display: inline-flex;

  margin: 12px 0 18px;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  color: #8c755f;

  font-size: 13px;

}



.hero h1 {
  margin: 0;
  color: #17213b;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: 1px;
}

.hero h1 span {
  display: inline-block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.35;
  background: linear-gradient(90deg, #e66a24, #d83a3a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}



.hero-points {

  list-style: none;

  margin: 28px 0 42px;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 14px 22px;

}



.hero-points li {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #516078;
  font-size: 15px;

  position: relative;

}



.hero-points li::before {

  content: "";

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 1px solid #77CC21;

  

}



.hero-points li::after {

  content: "\2714";

  position: absolute;

  color: #77cc21;    

  top: 1px;

  left: 5px;

  font-size: 12px;

}

.hero-panel {
  width: min(100%, 1080px);

  margin: 0 auto;

  padding: 12px;

  border: 1px solid #d8e3f5;
  border-radius: 16px;

  background: #ffffff;
  box-shadow: 0 22px 55px rgba(45, 72, 120, 0.16);
}



.hero-panel img {

  width: 100%;

  border-radius: 10px;

}



.section {

  padding: 120px 0;

}



.section-heading {

  margin: 0 auto 42px;

  text-align: center;

}



.section-heading h2 {

  margin: 0;

  font-size: 42px

}



.section-heading h2 span {

  color: var(--orange-deep);

}



.section-heading p {

  color: #7B7B7B;

  font-size: 15px;

  text-align: center;

  margin-top: 16px;

}



.architecture {

  padding-top: 92px;

  padding-bottom: 96px;

  background: #ffffff;

}



.architecture-shell {

  max-width: 1320px;

}



.architecture-heading {

  max-width: 1080px;

  margin: 0 auto 88px;

  text-align: center;

}



.architecture-heading h2 {

  margin: 0;

  font-size: 42px;

  line-height: 1.22;

}



.architecture-heading h2 span {

  color: var(--orange-deep);

}



.architecture-heading p {

  margin: 20px auto 0;

  color: #7B7B7B;

  font-size: 15px;

  line-height: 1.2;

}



.architecture-heading strong {

  color: #404040;

}



.feature-grid {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 18px;

}



.feature-card {

  min-height: 170px;

  padding: 20px 18px 18px;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius-sm);

  box-shadow: 0 8px 24px rgba(35, 41, 68, 0.03);

}





.feature-head {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  position: relative;

}



.feature-icon {

  width: 32px;

  height: 32px;

  border-radius: 6px;

  background: #8e79f7;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.feature-no {

  color: #b6b6b9;

  font-size: 12px;

  line-height: 1;

  font-weight: 600;

  position: absolute;

  top: -5px;

  left: 42px;

}



.feature-card h3 {

  margin: -20px 0 0 42px;

  font-size: 16px;

  line-height: 1.2;

  font-weight: 700;

  color: #333;

}



.feature-divider {

  margin: 24px 0 18px;

  height: 1px;

  background: #dcdde2;

}



.feature-card p {

  margin: 0;

  color: #5C5758;

  font-size: 12px;

  line-height: 1.2;

}



.creation {

  background: linear-gradient(180deg, #fffdfb 0, #fff9f5 100%);

}



.creation-showcase {

  display: grid;

  grid-template-columns: 320px minmax(0, 1fr);

  gap: 0;

  border: 2px solid #ff9b77;

  border-radius: 18px;

  background: #fff;

  overflow: hidden;

  box-shadow: var(--shadow);

  background: linear-gradient(108deg, #ffffff 0%, #f9faff 42%, #ffffff 100%);

}



.creation-steps {

  margin: 0;

  list-style: none;

  padding:0 24px;

}



.creation-steps li {

  padding: 24px 0 24px 0;

  border-bottom: 1px solid #ffe6dd;

}



.creation-steps li:last-child {

  border-bottom: 0;

}



.creation-steps strong {

  display: block;

  margin-bottom: 12px;

  color: #6f63ff;

  font-size: 30px;

  line-height: 1;

}



.creation-steps p {

  margin: 0;

  font-size: 15px;

  color: #585f73;

  line-height: 1.2;

}



.showcase-panel {

  padding: 22px;

}



.showcase-panel img {

  width: 100%;

  border-radius: 10px;

}



.network {

  background: #f6f8fc;

}



.network-board {

  padding: 36px;

  background: var(--surface);

  border: 1px solid #edf0f6;

  border-radius: 24px;

  box-shadow: var(--shadow);

}



.board-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 28px;

}



.board-head h3 {

  margin: 0;

  font-size: 24px;

}



.board-tabs {

  padding: 6px;

  background: #f3f5f9;

  border-radius: 999px;

  display: inline-flex;

  gap: 6px;

}



.board-tabs span {

  padding: 10px 16px;

  border-radius: 999px;

  color: #7B7B7B;

  font-size: 13px;

}



.board-tabs .active {

  background: #fff;

  color: var(--text);

  box-shadow: 0 4px 12px rgba(35, 42, 68, 0.08);

}



.platform-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px 18px;

}



.platform-item {

  display: flex;

  align-items: center;

  gap: 14px;

  min-height: 86px;

  padding: 16px 18px;

  border-radius: 14px;

  background: #fcfdff;

  border: 1px solid #eef1f7;

}



.platform-item img {

  width: 48px;

  height: 48px;

  flex-shrink: 0;

}



.platform-item strong {

  display: block;

  font-size: 16px;

}



.platform-item span {

  display: block;

  margin-top: 6px;

  color: var(--orange);

  font-size: 12px;

}



.insight {

  background: linear-gradient(180deg, #ffffff 0, #fffaf6 100%);

}



.switches {

  display: flex;

  margin-bottom: 32px;

  background: #edf0f3;

  border: 1px solid #e2e2e2;

  border-radius: 50px;

  width: max-content;

  align-items: center;

  justify-content: center;

  margin: auto;

  margin-bottom: 32px;

  padding: 4px;

}



.switches span {

  color: #7b7b7b;

  font-size: 15px;

  width: 154px;

  text-align: center;

  border-radius: 50px;

}



.switches .active {

  border: none;

  background: #fff;

  padding: 4px;

  color:#FF4D21



}



.insight-visual,.spider-visual {

  width: min(100%, 1124px);

  margin: 0 auto;

  padding: 16px;

  border-radius: 22px;

}



.insight-visual img,.spider-visual img{

  width: 100%;

  border-radius: 12px;

}



/* Keep the GEO module isolated from the legacy site shell. */

.geo-page { color: var(--text); font-family: "Microsoft YaHei", Arial, sans-serif; }

.geo-page, .geo-page * { box-sizing: border-box; }

.geo-page img { display: block; max-width: 100%; }

.geo-page .hero { padding-top: 76px; }

.geo-page .switches span { cursor: pointer; line-height: 32px; }



@media (max-width: 900px) {

  .geo-page .container { width: min(calc(100% - 30px), var(--container)); }

  .geo-page .hero { padding: 58px 0 50px; }

  .geo-page .hero h1 { font-size: 34px; }
  .geo-page .hero h1 span { font-size: 25px; }
  .geo-page .section { padding: 72px 0; }

  .geo-page .architecture-heading { margin-bottom: 48px; }

  .geo-page .architecture-heading h2,

  .geo-page .section-heading h2 { font-size: 32px; }

  .geo-page .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .geo-page .creation-showcase { grid-template-columns: 1fr; }

  .geo-page .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .geo-page .board-head { align-items: flex-start; flex-direction: column; }

}



@media (max-width: 560px) {

  .geo-page .container { width: calc(100% - 24px); }

  .geo-page .hero { padding: 42px 0 38px; }

  .geo-page .hero h1 { font-size: 27px; }
  .geo-page .hero h1 span { margin-top: 6px; font-size: 20px; }
  .geo-page .hero-points { margin: 22px 0 28px; gap: 10px 16px; }

  .geo-page .section { padding: 52px 0; }

  .geo-page .architecture-heading h2,

  .geo-page .section-heading h2 { font-size: 26px; line-height: 1.35; }

  .geo-page .architecture-heading p,

  .geo-page .section-heading p { line-height: 1.7; }

  .geo-page .feature-grid,

  .geo-page .platform-grid { grid-template-columns: 1fr; }

  .geo-page .network-board { padding: 20px 14px; }

  .geo-page .board-tabs { width: 100%; overflow-x: auto; }

  .geo-page .board-tabs span { flex: 0 0 auto; padding: 8px 10px; }

  .geo-page .switches { max-width: 100%; }

  .geo-page .switches span { width: 135px; }

  .geo-page .insight-visual,

  .geo-page .spider-visual { padding: 0; }

}