/* === CSS 变量 — 对齐 kouhan.pages.dev 灰阶配色 === */
:root {
  --color-primary: #333333;
  --color-primary-hover: #1a1a1a;
  --color-primary-light: rgba(0,0,0,0.06);
  --color-dark: #1a1a1a;
  --color-dark-secondary: #2d2d2d;
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F5F5F5;
  --color-bg-muted: #FAFAFA;
  --color-border: #E5E7EB;
  --color-white: #FFFFFF;
  --max-width: 1152px;
  --nav-height: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --shadow: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.05);
  --transition: all 0.2s ease;
}

/* === 全局重置 === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Geist",sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font:inherit;border:none;outline:none}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 24px}

/* ========== 导航栏 ========== */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-height);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
  transition:var(--transition);
}
.navbar.scrolled{box-shadow:var(--shadow)}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.navbar .logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  color:var(--color-dark);
  flex-shrink:0;
}
.navbar .logo .icon{
  width:32px;height:32px;
  background:var(--color-primary);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  font-size:15px;
  color:var(--color-text-secondary);
  font-weight:500;
  transition:var(--transition);
}
.nav-links a:hover,.nav-links a.active{color:var(--color-text)}
/* 导航按钮 */
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  background:var(--color-primary);
  color:rgba(255,255,255,0.7);
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  transition:var(--transition);
  white-space:nowrap;
}
.nav-links .nav-cta:hover{
  background:var(--color-primary-hover);
  color:#fff;
}

/* 汉堡菜单 */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
  background:none;
}
.hamburger span{
  display:block;
  width:24px;height:2px;
  background:var(--color-dark);
  border-radius:2px;
  transition:var(--transition);
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ========== Hero / Banner — 对齐参考站居中浅色风格 ========== */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-muted) 100%);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.03) 0%, transparent 60%);
}
.hero .container{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:720px;
}
.hero .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 14px;
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:6px;
  font-size:13px;
  color:var(--color-text-secondary);
  font-weight:500;
  margin-bottom:20px;
}
.hero h1{
  font-size:clamp(36px, 5vw, 60px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-text-secondary) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero h1 span{
  -webkit-text-fill-color:var(--color-primary);
}
.hero .hero-desc{
  font-size:clamp(16px, 2vw, 20px);
  color:var(--color-text-secondary);
  line-height:1.7;
  margin-bottom:36px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.hero .hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ========== 按钮 ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 28px;
  border-radius:6px;
  font-size:16px;
  font-weight:500;
  transition:var(--transition);
  cursor:pointer;
  border:none;
  line-height:1;
}
.btn-primary{
  background:var(--color-primary);
  color:var(--color-white);
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.btn-primary:hover{
  background:var(--color-primary-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  color:var(--color-white);
}
.btn-outline{
  background:var(--color-bg);
  color:var(--color-text);
  border:1px solid var(--color-border);
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}
.btn-outline:hover{
  background:var(--color-bg-muted);
  border-color:var(--color-text-light);
}

/* ========== 通用区块 ========== */
.section{padding:80px 0}
.section-title{
  font-size:clamp(28px, 3.5vw, 36px);
  font-weight:700;
  color:var(--color-dark);
  margin-bottom:12px;
  text-align:center;
}
.section-subtitle{
  font-size:17px;
  color:var(--color-text-secondary);
  max-width:600px;
  margin:0 auto 56px;
  line-height:1.7;
  text-align:center;
}

/* 区块交替背景 */
#about{background:var(--color-bg-muted)}
#advantages{background:var(--color-bg-muted)}

/* ========== 服务卡片 ========== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.service-card{
  padding:32px 28px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  transition:var(--transition);
  cursor:default;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.service-card:hover{
  border-color:#d0d0d0;
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.service-card .card-icon{
  width:48px;height:48px;
  background:var(--color-primary-light);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex-shrink:0;
}
.service-card h3{
  font-size:18px;
  font-weight:600;
  color:var(--color-dark);
  line-height:1.3;
}
.service-card .card-desc{
  font-size:14px;
  color:var(--color-text-secondary);
  line-height:1.7;
}
.card-features{
  padding-top:12px;
  border-top:1px solid var(--color-border);
}
.card-features li{
  font-size:14px;
  color:var(--color-text-secondary);
  line-height:2.2;
}

/* ========== 核心优势 ========== */
.advantages-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.advantage-card{
  text-align:center;
  padding:40px 20px;
}
.advantage-card .advantage-icon{
  width:64px;height:64px;
  background:var(--color-primary-light);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 20px;
}
.advantage-card h3{
  font-size:18px;
  font-weight:600;
  color:var(--color-dark);
  margin-bottom:8px;
}
.advantage-card p{
  font-size:14px;
  color:var(--color-text-secondary);
  line-height:1.7;
}

/* ========== 统计条 ========== */
.stats-section{
  padding:64px 0;
  background:var(--color-bg);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  text-align:center;
}
.stat-item .stat-value{
  font-size:40px;
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:6px;
  line-height:1;
}
.stat-item .stat-label{
  font-size:14px;
  color:var(--color-text-secondary);
}

/* ========== 新闻预览 ========== */
#news-preview{background:var(--color-bg)}
.news-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-bottom:40px;
}
.news-card{
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:var(--transition);
  cursor:pointer;
  background:var(--color-bg);
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.news-card:hover{
  border-color:#d0d0d0;
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.news-card .news-thumb{
  width:100%;
  height:180px;
  background:var(--color-bg-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:40px;
  color:var(--color-text-light);
}
.news-card-body{padding:24px}
.news-card .news-date{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--color-text-light);
  margin-bottom:10px;
}
.news-card .news-date .tag{
  padding:2px 10px;
  background:var(--color-primary-light);
  color:var(--color-text-secondary);
  border-radius:4px;
  font-size:12px;
  font-weight:500;
}
.news-card h3{
  font-size:17px;
  font-weight:600;
  color:var(--color-dark);
  margin-bottom:8px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-card h3 a{color:var(--color-dark)}
.news-card h3 a:hover{color:var(--color-primary)}
.news-card .news-summary{
  font-size:14px;
  color:var(--color-text-secondary);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-card .news-meta{
  margin-top:14px;
  font-size:13px;
  color:var(--color-text-light);
}
.section-footer{text-align:center}

/* ========== 关于我们 ========== */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-content h2{
  font-size:30px;
  font-weight:700;
  color:var(--color-dark);
  margin-bottom:12px;
}
.about-content .about-lead{
  font-size:17px;
  color:var(--color-text-secondary);
  margin-bottom:28px;
  line-height:1.7;
}
.about-content p{
  font-size:15px;
  color:var(--color-text-secondary);
  line-height:1.8;
  margin-bottom:16px;
}
.about-stats-inline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--color-border);
}
.about-stat{
  text-align:center;
}
.about-stat .about-stat-value{
  display:block;
  font-size:32px;
  font-weight:700;
  color:var(--color-primary);
  line-height:1;
}
.about-stat .about-stat-label{
  display:block;
  font-size:13px;
  color:var(--color-text-light);
  margin-top:6px;
}
.about-image{
  width:100%;
  aspect-ratio:4/3;
  background:var(--color-border);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  color:var(--color-text-light);
  overflow:hidden;
}

/* 隐藏原 about-info */
.about-info{display:none}

/* ========== 页脚 ========== */
.site-footer{
  background:var(--color-dark);
  color:rgba(255,255,255,.65);
  padding:64px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}
.footer-brand .footer-logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:700;
  color:var(--color-white);
  margin-bottom:14px;
}
.footer-brand .footer-logo .fl-icon{
  width:32px;height:32px;
  background:rgba(255,255,255,0.15);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:16px;
  font-weight:700;
  flex-shrink:0;
}
.footer-brand p{
  font-size:14px;
  line-height:1.7;
  max-width:300px;
  color:rgba(255,255,255,.45);
}
.footer-col h4{
  color:var(--color-white);
  font-size:15px;
  font-weight:600;
  margin-bottom:18px;
}
.footer-col a,.footer-col p{
  display:block;
  font-size:14px;
  color:rgba(255,255,255,.45);
  margin-bottom:10px;
  transition:var(--transition);
}
.footer-col a:hover{color:rgba(255,255,255,.8)}
.footer-bottom{
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:13px;
  color:rgba(255,255,255,.35);
}

/* ========== 新闻列表页 ========== */
.page-header{
  padding:120px 0 64px;
  background:linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 100%);
  color:var(--color-white);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.04) 0%, transparent 60%);
}
.page-header h1{
  font-size:36px;
  font-weight:700;
  margin-bottom:12px;
  position:relative;
}
.page-header p{
  font-size:17px;
  color:rgba(255,255,255,.6);
  max-width:600px;
  margin:0 auto;
  position:relative;
}
.news-list-section{padding:48px 0 80px}
.news-list-item{
  display:flex;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--color-border);
  transition:var(--transition);
  cursor:pointer;
}
.news-list-item:first-child{border-top:1px solid var(--color-border)}
.news-list-item:hover{background:var(--color-bg-muted);margin:0 -24px;padding-left:24px;padding-right:24px;border-radius:var(--radius-sm)}
.news-list-item .news-thumb{
  flex-shrink:0;
  width:120px;height:80px;
  background:var(--color-bg-secondary);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:var(--color-text-light);
}
.news-list-item .news-info{flex:1;min-width:0}
.news-list-item .news-info h3{font-size:18px;font-weight:600;color:var(--color-dark);margin-bottom:6px}
.news-list-item .news-info h3 a{color:var(--color-dark)}
.news-list-item .news-info h3 a:hover{color:var(--color-primary)}
.news-list-item .news-info .summary{font-size:14px;color:var(--color-text-secondary);line-height:1.7;margin-bottom:8px}
.news-list-item .news-info .meta{font-size:13px;color:var(--color-text-light);display:flex;gap:16px}
.news-list-item .news-arrow{
  flex-shrink:0;
  display:flex;
  align-items:center;
  color:var(--color-text-light);
  font-size:20px;
}

/* 分页 */
.pagination{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:48px;
}
.pagination button,.pagination .page-num{
  min-width:36px;height:36px;
  padding:0 8px;
  border:1px solid var(--color-border);
  border-radius:6px;
  background:var(--color-bg);
  color:var(--color-text-secondary);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pagination button:hover:not(:disabled),.pagination .page-num:hover{
  background:var(--color-bg-secondary);
  border-color:var(--color-text-light);
}
.pagination .page-num.active{
  background:var(--color-primary);
  color:var(--color-white);
  border-color:var(--color-primary);
}
.pagination button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* ========== 新闻详情页 ========== */
.article-section{padding:120px 0 80px}
.article-container{max-width:800px;margin:0 auto}
.article-header{margin-bottom:36px}
.article-header h1{
  font-size:32px;
  font-weight:700;
  color:var(--color-dark);
  line-height:1.3;
  margin-bottom:16px;
}
.article-meta{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:14px;
  color:var(--color-text-light);
  flex-wrap:wrap;
}
.article-meta span{display:inline-flex;align-items:center;gap:4px}
.article-body{
  font-size:16px;
  line-height:1.9;
  color:var(--color-text);
}
.article-body p{margin-bottom:18px}
.article-back{margin-top:56px;padding-top:32px;border-top:1px solid var(--color-border)}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--color-text-secondary);
  font-weight:500;
  font-size:15px;
  transition:var(--transition);
}
.back-link:hover{color:var(--color-text)}

/* 加载 & 错误 */
.loading{
  text-align:center;
  padding:60px 20px;
  color:var(--color-text-light);
  font-size:16px;
}
.not-found{text-align:center;padding:80px 20px}
.not-found h2{font-size:3rem;color:var(--color-text-light);margin-bottom:8px}
.not-found p{color:var(--color-text-secondary);margin-bottom:24px}

/* ========== 响应式：1024px ========== */
@media (max-width:1024px){
  .services-grid{grid-template-columns:repeat(2, 1fr)}
  .news-grid{grid-template-columns:repeat(2, 1fr)}
  .advantages-grid{grid-template-columns:repeat(2, 1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .about-grid{gap:40px}
}

/* ========== 响应式：768px ========== */
@media (max-width:768px){
  :root{--nav-height:60px}

  .hamburger{display:flex}
  .nav-links{
    position:fixed;
    top:var(--nav-height);
    left:0;right:0;
    background:var(--color-white);
    flex-direction:column;
    padding:20px;
    gap:16px;
    border-bottom:1px solid var(--color-border);
    transform:translateY(-100%);
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
    box-shadow:var(--shadow-md);
  }
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  .nav-cta{display:none}

  .hero{min-height:70vh;padding:100px 0 80px}
  .hero h1{font-size:32px}

  .section{padding:56px 0}
  .section-title{font-size:26px}
  .section-subtitle{margin-bottom:40px}

  .page-header{padding:100px 0 48px}
  .page-header h1{font-size:28px}
  .page-header p{font-size:15px}

  .services-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .advantages-grid{grid-template-columns:repeat(2, 1fr)}
  .stats-grid{grid-template-columns:repeat(3, 1fr)}
  .stat-item .stat-value{font-size:30px}

  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-stats-inline{grid-template-columns:repeat(3, 1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}

  .article-section{padding:100px 0 48px}
  .article-header h1{font-size:24px}

  .news-list-item{padding:20px 0}
  .news-list-item:hover{margin:0 -16px;padding-left:16px;padding-right:16px}
  .news-list-item .news-thumb{width:100px;height:68px;font-size:24px}
  .news-list-item .news-arrow{display:none}
}

/* ========== 响应式：480px ========== */
@media (max-width:480px){
  .container{padding:0 16px}
  .hero h1{font-size:28px}
  .hero .hero-actions{flex-direction:column;align-items:center}
  .hero .hero-actions .btn{width:100%;justify-content:center}
  .advantages-grid{grid-template-columns:1fr}
  .about-stats-inline{grid-template-columns:repeat(3, 1fr);gap:8px}
  .about-stat .about-stat-value{font-size:26px}
  .stats-grid{grid-template-columns:repeat(3, 1fr);gap:16px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;text-align:center}
  .pagination button,.pagination .page-num{min-width:32px;height:32px;font-size:13px}
}