/* 设计变量：方便快速换色 */
:root {
    --primary: #0066ff;
    --primary-light: #eaf1ff;
    --secondary: #ff7c00;
    --dark: #222;
    --light: #fafafa;
    --max-width: 1080px;
    --radius: 6px;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --transition: all .3s ease;
    font-size: 16px; /* 基准字体 */
  }
  
  /* 重置与公共样式 */
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: "Segoe UI", "PingFang SC", Arial, sans-serif; color: var(--dark); line-height: 1.6; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .container { width: 90%; max-width: var(--max-width); margin: 0 auto; }
  .section { padding: 4rem 0; }
  .section-title { margin-bottom: 2rem; font-size: clamp(1.5rem, 4vw, 2rem); position: relative; }
  .section-title::after {
    content: ""; display: block; width: 3rem; height: .25rem;
    background: var(--primary); margin-top: .5rem;
  }
  .bg-light { background: var(--light); }
  .bg-dark { background: var(--dark); color: #fff; }
  .light { color: #fff; }
  .small { font-size: .875rem; }
  .flex-between { display: flex; justify-content: space-between; align-items: center; }
  
  /* 顶部导航 */
  .header { position: sticky; top: 0; background: #fff; box-shadow: var(--shadow); z-index: 1000; }
  .logo { font-size: 1.25rem; color: var(--primary); font-weight: 700; }
  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
  .nav a { position: relative; padding: .5rem 0; }
  .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); }
  .nav a:hover::after { width: 100%; }
  
  /* 手机端导航按钮 */
  .nav-toggle { display: none; background: none; border: none; cursor: pointer; }
  .nav-toggle .bar { display: block; width: 24px; height: 3px; margin: 5px auto; background: var(--dark); transition: var(--transition); }
  
  /* 主视觉 */
  .hero { background: url("images/hero-banner.jpg") center/cover fixed; color: #fff; text-align: center; padding: 6rem 1rem; }
  .hero-content { max-width: 600px; margin: 0 auto; }
  .hero h2 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 1rem; text-shadow: 0 2px 6px rgba(0,0,0,.3); }
  .hero p { margin-bottom: 2rem; }
  .btn-primary, .btn-secondary {
    display: inline-block; padding: .75rem 2rem; border-radius: var(--radius);
    font-weight: 600; transition: var(--transition);
  }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--dark); }
  .btn-secondary { background: var(--secondary); color: #fff; }
  .btn-secondary:hover { opacity: .85; }
  
  /* 网格+卡片 */
  .grid-2 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
  .grid-3 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
  .cards { display: grid; gap: 2rem; grid-template-columns: 1fr; }
  .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: var(--transition); }
  .card img { aspect-ratio: 4/3; object-fit: cover; }
  .card h4 { margin: 1rem; }
  .card p { margin: 0 1rem 1.5rem; color: #555; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
  
  /* 产品图 */
  .product { text-align: center; }
  .product img { border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; margin-bottom: .5rem; }
  
  /* 联系表单 */
  .contact-form { display: grid; gap: 1rem; max-width: 480px; margin: 0 auto 2rem; }
  .contact-form label { display: grid; gap: .5rem; font-weight: 500; }
  .contact-form input, .contact-form textarea {
    padding: .75rem 1rem; border: none; border-radius: var(--radius); font: inherit;
  }
  .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--primary); }
  
  /* 页脚 */
  .footer { background: var(--dark); color: #ccc; padding: 1.5rem 0; font-size: .875rem; }
  .footer a { color: inherit; }
  
  /* 响应式断点 */
  @media (min-width: 600px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .cards { grid-template-columns: repeat(3, 1fr); }
    /* 桌面导航 */
    .nav-toggle { display: none; }
  }
  @media (max-width: 899px) {
    /* 手机/平板：侧边栏下拉 */
    .nav { position: absolute; top: 64px; right: 0; background: #fff; width: 200px; transform: translateX(110%); box-shadow: var(--shadow); transition: var(--transition); }
    .nav.open { transform: translateX(0); }
    .nav ul { flex-direction: column; gap: 0; }
    .nav li { border-bottom: 1px solid #eee; }
    .nav a { display: block; padding: 1rem; }
    .nav-toggle { display: block; }
  }