﻿/* ===== CSS 变量 & Reset ===== */
:root {
  --primary:       #e8640a;
  --primary-dark:  #c4520a;
  --primary-light: #f07b25;
  --accent:        #fbbf24;
  --accent-dark:   #d97706;
  --dark:          #1a0f06;
  --dark-2:        #2b1a0d;
  --dark-3:        #3d2510;
  --text:          #2c1e10;
  --text-muted:    #7a6355;
  --text-light:    #b09a88;
  --border:        #fde8d3;
  --bg-light:      #fdf6f0;
  --bg-section:    #fef3ea;
  --white:         #ffffff;

  --font-main:  'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-num:   'Rajdhani', 'Source Han Sans CN', sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 2px 10px rgba(232,100,10,.08);
  --shadow-md:  0 6px 28px rgba(232,100,10,.14);
  --shadow-lg:  0 16px 56px rgba(232,100,10,.20);
  --shadow-card:0 4px 20px rgba(26,15,6,.10);

  --trans:      all 0.32s cubic-bezier(.4,0,.2,1);
  --trans-fast: all 0.18s ease;

  --nav-h:      72px;
  --section-py: 96px;
  --container:  1240px;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--trans-fast);
}

ul, ol { list-style: none; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-main);
}

/* ===== 通用布局 ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-py) 0;
}

.section--gray  { background: var(--bg-light); }
.section--dark  { background: var(--dark); color: var(--white); }
.section--dark2 { background: var(--dark-2); color: var(--white); }

/* ===== 通用标题 ===== */
.sec-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(232,100,10,.08);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.sec-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--dark);
  margin-bottom: 16px;
}

.sec-title--white { color: var(--white); }

.sec-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.8;
}

.sec-subtitle--white { color: rgba(255,255,255,.7); }

.sec-head {
  margin-bottom: 60px;
}

.sec-head--center {
  text-align: center;
}

.sec-head--center .sec-subtitle {
  margin: 0 auto;
}

/* ===== 通用按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: var(--radius-xl);
  font-size: 1rem;
  font-weight: 600;
  transition: var(--trans);
  white-space: nowrap;
}

.btn--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(232,100,10,.35);
}

.btn--primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 6px 28px rgba(232,100,10,.5);
  transform: translateY(-2px);
}

.btn--outline {
  border: 2px solid var(--white);
  color: var(--white);
}

.btn--outline:hover {
  background: var(--white);
  color: var(--primary);
}

.btn--accent {
  background: var(--accent);
  color: var(--dark);
  box-shadow: 0 4px 20px rgba(251,191,36,.35);
}

.btn--accent:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--primary);
  border: 2px solid var(--border);
}

.btn--ghost:hover {
  border-color: var(--primary);
  background: rgba(232,100,10,.05);
}

/* ===== 标签图标徽章 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
}

.tag--blue  { background: rgba(232,100,10,.1);  color: var(--primary); }
.tag--green { background: rgba(251,191,36,.15); color: var(--accent-dark); }
.tag--dark  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }

/* ===== 分隔线装饰 ===== */
.divider-line {
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  margin-bottom: 24px;
}

.divider-line--center { margin: 0 auto 24px; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 3px;
}
