/* style.css - DesIgn-Expert 落地页样式 */
:root{
  --primary:#2b6ef6;
  --muted:#6b7280;
  --bg:#f7f9fc;
  --card:#ffffff;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.navbar{background:#fff;box-shadow:0 2px 8px rgba(15,23,42,0.06);position:fixed;top:0;left:0;right:0;z-index:100}
/* 给页面主体留出导航高度，避免固定导航遮挡内容（如需调整，请修改此值） */
body{padding-top:64px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.1rem}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav li a{color:#111;text-decoration:none;padding:8px 6px;border-radius:6px}
.nav li a:hover{background:rgba(43,110,246,0.08)}
.nav-toggle{display:none;background:transparent;border:0;font-size:20px;cursor:pointer;padding:8px;border-radius:4px}
.nav-toggle:hover{background:rgba(43,110,246,0.08)}

.hero{padding:80px 0;background:linear-gradient(135deg, #f0f6ff 0%, #ffffff 100%)}
.hero-inner{text-align:center;padding:40px 0}
.hero h1{margin:0;font-size:2.25rem}
.hero p{color:var(--muted);margin:12px 0 20px}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid rgba(43,110,246,0.12)}

.section{padding:56px 0}
.section.alt{background:#fff}
.lede{color:var(--muted);margin-bottom:18px}

/* 区块标题与副标题居中（features / resources / pricing） */
#features h2,
#features .lede,
#resources h2,
#resources .lede,
#pricing h2,
#pricing .lede{
  text-align:center;
}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(15,23,42,0.05)}
.feature-card h3{margin-top:0}

.resources-list{padding-left:1.1rem}
.resources-list li{margin:8px 0}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.price-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(11,21,35,0.04);text-align:center}
.price{font-size:1.4rem;color:var(--primary);margin:8px 0}
.price-card ul{list-style:none;padding:0;margin:12px 0}
.price-card li{color:var(--muted);margin:6px 0}

.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.contact-form{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.contact-form label{display:block;margin-bottom:10px;color:#111}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #e6ecf8;border-radius:8px;background:#fff}
.form-actions{display:flex;gap:8px;margin-top:8px}
.contact-right{background:var(--card);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.03)}

/* 提示消息样式（成功 / 错误） */
.status-message{display:none;margin-bottom:12px;padding:12px;border-radius:8px;font-size:0.95rem}
.status-success{background:#ecfdf5;color:#065f46;border:1px solid #10b981}
.status-error{background:#fff5f5;color:#7f1d1d;border:1px solid #f43f5e}

/* 表单内状态（按钮下方）样式 — 与右侧提示相似但占满表单宽度 */
.form-status{display:none;margin-top:12px;padding:10px;border-radius:8px;font-size:0.95rem}
.form-status.status-success{background:#ecfdf5;color:#065f46;border:1px solid #10b981}
.form-status.status-error{background:#fff5f5;color:#7f1d1d;border:1px solid #f43f5e}

.site-footer{padding:18px 0;background:#0f1724;color:#fff}
.site-footer p{margin:0;color:rgba(255,255,255,0.85)}

/* 面包屑导航样式 */
.breadcrumb {
  display: none;
  background: #D4EBF8; /* 更新背景色为 #D4EBF8 */
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 0;
  font-size: 0.9rem;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 98;
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .separator {
  color: var(--muted);
}

.breadcrumb .current {
  color: var(--muted);
  font-weight: 500;
}

/* 响应式 */
@media (max-width:900px){
  .breadcrumb {
    display: block;
  }
  
  /* 调整主体内容的上边距，为面包屑导航留出空间 */
  body {
    padding-top: 104px; /* 64px (导航栏) + 40px (面包屑) */
  }
  
  .contact-grid{grid-template-columns:1fr}
  .nav{
    display:none;
    position:fixed;
    top:104px; /* 调整菜单位置，考虑面包屑导航高度 */
    left:0;
    right:0;
    background:#D4EBF8; /* 更新背景色为 #D4EBF8 */
    padding:20px;
    border-radius:0 0 12px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    flex-direction:column;
    gap:12px;
    z-index:99
  }
  .nav.open{
    display:flex;
    animation:slideDown 0.3s ease-out
  }
  .nav li a{
    display:block;
    padding:12px 16px;
    border-radius:8px;
    text-align:center;
    font-weight:500
  }
  .nav li a:hover{
    background:rgba(43,110,246,0.1)
  }
  .nav-toggle{
    display:block;
    position:relative;
    z-index:101
  }
}

@media (max-width:520px){
  .hero h1{font-size:1.6rem}
  .brand{font-size:1rem}
  .nav{
    top:100px; /* 在小屏幕上调整菜单位置 */
    padding:16px
  }
  
  .breadcrumb {
    padding: 10px 0;
    font-size: 0.85rem;
  }
  
  body {
    padding-top: 100px; /* 调整小屏幕上的上边距 */
  }
}

/* 菜单动画 */
@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}