:root {
  --color-primary: #886737;
  --color-primary-dark: #6b522b;
  --color-text: #020202;
  --color-title: #000000;
  --color-link: #333333;
  --color-link-hover: #242424;
  --color-bg: #ffffff;
  --color-bg-gray: #f7f7f7;
  --color-border: #e8e8e8;
  --color-footer-bg: #1a1a1a;
  --color-footer-text: #cccccc;
  --font-title: 'Poppins', Arial, sans-serif;
  --font-body: Arial, Helvetica, 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --container-max: 1200px;
  --section-padding: 80px;
  --gap: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-title); color: var(--color-title); line-height: 1.3; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 15px; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.section-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  color: var(--color-title);
}
.section-title span { color: var(--color-primary); }
.section { padding: var(--section-padding) 0; }
@media (max-width: 768px) {
  .section { padding: 50px 0; }
}