/* Base styles */
:root {
  --container-max: 1200px;
  --gap: 24px;
}

* { box-sizing: border-box; }
body { margin:0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; color:#111; background:#fff; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }



/* header */
.site-header { border-bottom:1px solid #eee;background: #fff; }

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* 默认固定顶部 */
#siteHeader {
  transition: transform 0.3s ease;
}

/* 向下滚动时隐藏 */
#siteHeader.hide {
  transform: translateY(-100%);
}

/* hero */
.hero { 
  padding:15rem 0 12rem; 
  text-align:center; 
  background-attachment: fixed;
  max-width: 100%;
  background-size: cover;
}

.hero-bg-tech{
  background-image: url(/static/mrdoc-home/bg/tech.svg);
}
.hreo-bg-business{
  background-image: url(/static/mrdoc-home/bg/business.svg);
}
.hreo-bg-green{
  background-image: url(/static/mrdoc-home/bg/green.svg);
}
.hreo-bg-minimal{
  background-image: url(/static/mrdoc-home/bg/minimal.svg);
}
.hreo-bg-sunset{
  background-image: url(/static/mrdoc-home/bg/sunset.svg);
}

.hero-title { font-size:40px; margin:0 0 14px; line-height:1.1; font-weight: 700;}
.hero-subtitle { color:#666; font-size:18px; max-width:760px; margin:0 auto 26px; }

/* buttons */
.btn { display:inline-block; padding:12px 26px; border-radius:10px; text-decoration:none; font-weight:600;margin-bottom: 5px; }
.btn:hover { opacity:0.9;cursor:pointer; }
.btn-primary { background:#111; color:white; }
.btn-ghost { background:transparent; color:#111; border:1px solid #ddd; }

/* features */
.features {max-width: 100%;}
.features-inner{
  margin: 0 auto;
  max-width: var(--container-max);
  padding:60px 0; text-align:center;
}
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:24px; }
.feature-item { padding:20px; border-radius:12px; background:#fafafa; border:1px solid #f0f0f0; }
.feature-title { margin:8px 0 8px; font-size:18px; font-weight:700; }
.feature-subtitle {font-size: 16px;}
.feature-desc { margin:0; color:#666;padding-bottom: 10px; }
.feature-desc ul{ 
  padding-left: 24px;
  padding-top: 10px;
}
.feature-desc li{
  list-style: disc !important;
  text-align: left;
  padding-bottom: 5px;
}

/* content section */
/* 背景色示例 */
.bg-light {
  background-color: #f9fafb;  /* 浅灰蓝色，适合明亮风 */
}

.bg-dark {
  background-color: #f0f4ff;  /* 浅蓝色，稍微深一点 */
}

.bg-alt {
  background-color: #e8f0fe;  /* 另一种浅蓝 */
}

.bg-light-gradient {
  background: radial-gradient(
      90% 70% at 20% 30%,
      #f9fafc 0%,
      #f3f6fb 40%,
      #eef2f7 100%
    );
}
.bg-dark-gradient {
  background: radial-gradient(
      85% 75% at 18% 35%,
      #f0f4ff 0%,
      #e8f0fe 45%,
      #e6eaf7 100%
    );
}
.bg-alt-gradient {
  background:
    radial-gradient(
      88% 71% at 25% 32%,
      #eef4ff 0%,
      #f7f9ff 60%,
      #ffffff 100%
    ),
    radial-gradient(
      70% 60% at 80% 70%,
      #e6f7ff 0%,
      #ffffff 65%
    );
}
.bg-muted-gradient {
  background: radial-gradient(
      100% 85% at 50% 0%,
      #ffffff 0%,
      #f8fafc 70%,
      #f4f6f9 100%
    );
}
.bg-soft-mesh {
  background:
    radial-gradient(
      90% 70% at 20% 30%,
      #eef6ff 0%,
      #ffffff 70%
    ),
    radial-gradient(
      80% 60% at 80% 70%,
      #f0fff9 0%,
      #ffffff 70%
    );
}
.bg-deep-gradient {
  background: radial-gradient(
      110% 85% at 15% 20%,
      #1e2537 0%,
      #0f172a 100%
    );
  color: #fff;
}


/* 你还可以根据需要扩展更多颜色类 */


.md-home-section {
  padding: 80px 20px;
}

.md-home-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  flex-wrap: wrap;
}


.md-home-image img {
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.md-home-content {
  flex: 1;
  min-width: 300px;
}

.md-home-title,.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.md-home-text {
  line-height: 1.7;
  font-size: 18px;
  margin-bottom: 28px;
}

.md-home-button {
  display: inline-block;
  padding: 12px 32px;
  background: #0052ff;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}

.md-home-button:hover {
  background: #003ddb;
}

@media (max-width: 768px) {
  .md-home-container {
    flex-direction: column;
    text-align: center;
  }

  .md-home-content {
    order: 2; /* 图片在前、文字在后 */
  }

  .md-home-image {
    order: 1;
  }
}

/* CTA */
.cta{
  padding-top: 2rem;
  text-align: center;
}