/* cases.css - 修复版 */

:root {
 --ac: #4f7df9; --ac-bg: rgba(79,125,249,0.08); --ac-glow: rgba(79,125,249,0.25);
 --pu: #7c3aed; --gn: #22c55e; --or: #f97316; --pk: #ec4899; --cy: #06b6d4;
 --dark: #0f172a; --text: #334155; --text-light: #64748b;
 --white: #fff; --bg: #f8fafc; --border: #e2e8f0;
 --gradient: linear-gradient(135deg, #4f7df9, #7c3aed);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans SC', sans-serif; color: var(--text); background: var(--white); line-height: 1.7; }

@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.anim { opacity:0; }
.anim.visible { animation: fadeUp 0.5s ease forwards; }
.delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.1s; } .delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; } .delay-5 { animation-delay: 0.25s; } .delay-6 { animation-delay: 0.3s; }

/* 导航 */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 48px; height:72px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); box-shadow:0 2px 20px rgba(0,0,0,0.06); }
.nav-logo img { height:32px; }
.nav-links { display:flex; gap:28px; }
.nav-links a { text-decoration:none; color:var(--text); font-weight:500; font-size:14px; transition:color 0.3s; }
.nav-links a:hover, .nav-links a.active { color:var(--ac); }
.nav-cta { padding:8px 20px; background:var(--gradient); color:var(--white)!important; border-radius:6px; font-weight:500; text-decoration:none; font-size:13px; transition:all 0.3s; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--ac-glow); }
@media(max-width:768px){ .nav{padding:0 16px} }

/* Banner */
/*.banner { padding:100px 48px 60px; background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); position:relative; overflow:hidden; }*/
.banner {
  padding: 100px 48px 60px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.2) 0%, rgba(30, 41, 59, 0.3) 100%), url(/static/images/case.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.banner-glow { position:absolute; width:500px; height:500px; border-radius:50%; filter:blur(100px); opacity:0.3; }
.banner-glow.g1 { top:-150px; right:-100px; background:var(--ac); }
.banner-glow.g2 { bottom:-150px; left:-100px; background:var(--pu); }
.banner-cnt { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.banner-title { font-size:42px; font-weight:900; color:var(--white); margin-bottom:12px; }
.banner-title span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.banner-desc { font-size:16px; color:rgba(255,255,255,0.6); margin-bottom:40px; }
.banner-stats { display:flex; gap:48px; }
.banner-stat-num { font-size:36px; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.banner-stat-label { font-size:13px; color:rgba(255,255,255,0.5); margin-top:4px; }
@media(max-width:768px){ .banner{padding:80px 20px 40px} .banner-title{font-size:28px} .banner-stats{flex-wrap:wrap; gap:24px} }

/* 筛选 */
.filter { padding:24px 48px; background:var(--white); border-bottom:1px solid var(--border); top:72px; z-index:100; }
.filter-cnt { max-width:1200px; margin:0 auto; display:flex; gap:12px; flex-wrap:wrap; }
.filter-btn { padding:8px 20px; background:var(--bg); border:none; border-radius:20px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:all 0.3s; }
.filter-btn:hover { background:var(--ac-bg); color:var(--ac); }
.filter-btn.active { background:var(--gradient); color:var(--white); }
@media(max-width:768px){ .filter{padding:16px} .filter-cnt{overflow-x:auto; flex-wrap:nowrap} }

/* 案例网格 */
.section { max-width:1200px; margin:0 auto; padding:48px 24px; }
.cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* 案例卡片 */
.case-card { background:var(--white); border-radius:16px; overflow:hidden; border:1px solid var(--border); transition:all 0.4s; cursor:pointer; text-decoration:none; display:block; }
.case-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,0.12); border-color:transparent; text-decoration:none; }
.case-img { height:220px; overflow:hidden; position:relative; }
.case-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.case-card:hover .case-img img { transform:scale(1.08); }
.case-tags { position:absolute; top:12px; left:12px; display:flex; gap:6px; }
.case-tag { padding:4px 10px; border-radius:4px; font-size:11px; font-weight:600; color:var(--white); }
.case-body { padding:20px; }
.case-title { font-size:16px; font-weight:700; color:var(--dark); margin-bottom:8px; transition:color 0.3s; }
.case-card:hover .case-title { color:var(--ac); }
.case-desc { font-size:13px; color:var(--text-light); line-height:1.6; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.case-meta { display:flex; gap:16px; font-size:12px; color:var(--text-light); }
.case-meta span { display:flex; align-items:center; gap:4px; }
.case-meta i { font-size:14px; color:var(--ac); }

/* 大卡片 */
.case-card.featured { grid-column:span 2; }
.case-card.featured .case-img { height:300px; }
.case-card.featured .case-title { font-size:20px; }

@media(max-width:1024px){ .cases-grid{grid-template-columns:repeat(2,1fr)} .case-card.featured{grid-column:span 2} }
@media(max-width:768px){ .section{padding:24px 16px} .cases-grid{grid-template-columns:1fr} .case-card.featured{grid-column:span 1} .case-card.featured .case-img{height:200px} }

/* 加载更多 */
.load-more { text-align:center; padding:40px 0 60px; }
.load-btn { padding:14px 48px; background:var(--white); border:2px solid var(--ac); color:var(--ac); border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.3s; }
.load-btn:hover { background:var(--ac); color:var(--white); transform:translateY(-2px); }

/* CTA */
.cta { background:var(--gradient); padding:60px 48px; text-align:center; }
.cta h2 { font-size:32px; font-weight:900; color:var(--white); margin-bottom:12px; }
.cta p { font-size:15px; color:rgba(255,255,255,0.85); margin-bottom:24px; }
.cta-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:var(--white); color:var(--ac); border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; transition:all 0.3s; }
.cta-btn:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }

/* Footer */
.footer { background:#0f172a; padding:48px; text-align:center; }
.footer p { font-size:13px; color:#64748b; }
.footer img { height:28px; margin-bottom:12px; filter:brightness(0) invert(1); }