/* ============================================
   解决方案首页 - jjfa.css (v3 大气版)
   ============================================ */

/* ---- Banner ---- */
.page-banner {
  position: relative;
  margin-top: 0;
  padding-top: calc(var(--header-h) + var(--topbar-h));
  height: 360px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #1a3a6e 40%, #1a5cff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.page-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E") repeat;
  background-size: 60px 60px;
  pointer-events: none;
}
.page-banner .banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  width: 100%;
}
.page-banner .banner-content h1 {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 3px;
  margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(26,92,255,.4);
}
.page-banner .banner-content p {
  font-size: 1rem;
  opacity: .8;
  letter-spacing: 2px;
  margin-bottom: 0;
}


.jjfa-banner {
  position: relative;
  overflow: hidden;
  min-height: calc(320px + var(--header-h) + var(--topbar-h));
  background: linear-gradient(135deg, #0a1628 0%, #0d2847 25%, #0a3a8a 50%, #0052cc 75%, #1a5cff 100%);
}
.banner-deco { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.deco-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.deco-circle { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.deco-circle-1 { width:400px; height:400px; right:-100px; top:-120px; animation:float-slow 12s ease-in-out infinite; }
.deco-circle-2 { width:250px; height:250px; left:5%; bottom:-60px; border-color:rgba(26,92,255,.15); animation:float-med 10s ease-in-out infinite reverse; }
.deco-circle-3 { width:150px; height:150px; right:20%; top:40%; border-color:rgba(0,174,243,.12); animation:float-fast 8s ease-in-out infinite 2s; }
.deco-line { position:absolute; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); }
.deco-line-1 { width:1px; height:200px; left:15%; top:10%; transform:rotate(25deg); animation:line-grow 4s ease-in-out infinite; }
.deco-line-2 { width:1px; height:160px; right:25%; top:20%; transform:rotate(-15deg); animation:line-grow 5s ease-in-out infinite 1s; }
.deco-line-3 { width:200px; height:1px; left:10%; bottom:30%; transform:rotate(-5deg); animation:line-grow-h 6s ease-in-out infinite .5s; }
.deco-dot { position:absolute; border-radius:50%; background:rgba(255,255,255,.5); box-shadow:0 0 8px rgba(26,92,255,.4); }
.deco-dot-1 { left:10%; top:25%; width:6px; height:6px; animation:twinkle 3s ease-in-out infinite; }
.deco-dot-2 { right:18%; top:15%; width:4px; height:4px; animation:twinkle 2.5s ease-in-out infinite .8s; }
.deco-dot-3 { left:35%; top:55%; width:8px; height:8px; animation:twinkle 4s ease-in-out infinite 1.5s; opacity:.4; }
.deco-dot-4 { right:10%; bottom:35%; width:5px; height:5px; animation:twinkle 3.5s ease-in-out infinite 2s; }
.deco-diamond { position:absolute; width:20px; height:20px; border:1px solid rgba(255,255,255,.1); transform:rotate(45deg); animation:diamond-spin 16s linear infinite; }
.deco-diamond-1 { left:8%; top:45%; border-color:rgba(0,174,243,.15); }
.deco-diamond-2 { right:12%; top:50%; width:14px; height:14px; border-color:rgba(255,255,255,.08); animation-duration:22s; animation-direction:reverse; }
.deco-glow { position:absolute; border-radius:50%; filter:blur(60px); opacity:.25; }
.deco-glow-1 { width:300px; height:300px; right:5%; top:10%; background:radial-gradient(circle, rgba(26,92,255,.6), transparent 70%); animation:pulse-glow 6s ease-in-out infinite; }
.deco-glow-2 { width:200px; height:200px; left:15%; bottom:10%; background:radial-gradient(circle, rgba(0,174,243,.5), transparent 70%); animation:pulse-glow 8s ease-in-out infinite 3s; }

.jjfa-banner .banner-content { position:relative; z-index:2; text-align:center; padding-top:calc(var(--header-h) + var(--topbar-h) + 40px); padding-bottom:55px; }
.banner-badge { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:3px; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:6px 24px; margin-bottom:18px; backdrop-filter:blur(4px); background:rgba(255,255,255,.05); }
.jjfa-banner .banner-content h1 { font-size:clamp(2rem,5vw,3rem); font-weight:900; color:#fff; margin-bottom:14px; letter-spacing:2px; text-shadow:0 2px 20px rgba(0,0,0,.2); }
.jjfa-banner .banner-content p { font-size:clamp(.9rem,1.8vw,1.1rem); color:rgba(255,255,255,.8); margin-bottom:16px; letter-spacing:1px; }
.banner-path { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.5); }
.banner-path i { font-style:normal; font-size:.75rem; }
.jjfa-banner .banner-overlay { position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%, rgba(0,106,255,.15) 0%, transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(0,174,243,.12) 0%, transparent 50%), linear-gradient(180deg, rgba(10,22,40,.2) 0%, transparent 30%, transparent 70%, rgba(10,22,40,.3) 100%); z-index:1; }

/* ---- 动画 ---- */
@keyframes float-slow{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.03)}}
@keyframes float-med{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes float-fast{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-12px) translateX(8px)}}
@keyframes line-grow{0%,100%{transform:rotate(25deg) scaleY(0); opacity:0}50%{transform:rotate(25deg) scaleY(1); opacity:1}}
@keyframes line-grow-h{0%,100%{transform:rotate(-5deg) scaleX(0); opacity:0}50%{transform:rotate(-5deg) scaleX(1); opacity:1}}
@keyframes twinkle{0%,100%{opacity:.3; transform:scale(1)}50%{opacity:1; transform:scale(1.5)}}
@keyframes diamond-spin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
@keyframes pulse-glow{0%,100%{opacity:.2; transform:scale(1)}50%{opacity:.4; transform:scale(1.15)}}

/* ============================================
   解决方案概览 — 大气版卡片
   ============================================ */
.jjfa-section { padding:90px 0; background:#fff; }

.section-header { text-align:center; margin-bottom:56px; }
.section-tag { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:3px; color:var(--c-primary); text-transform:uppercase; margin-bottom:12px; }
.section-header h2 { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900; color:var(--c-dark); margin-bottom:18px; letter-spacing:1px; }
.section-header p { font-size:1.05rem; color:var(--c-text-light); max-width:720px; margin:0 auto; line-height:1.8; }

/* ——— 大气版卡片网格 ——— */
.jjfa-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:8px; }

.jjfa-card {
  background:#fff;
  border-radius:20px;
  padding:44px 36px 38px;
  box-shadow:0 4px 30px rgba(26,92,255,.06);
  border:1px solid rgba(26,92,255,.07);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.jjfa-card::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s;
}
.jjfa-card:hover {
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(26,92,255,.14);
  border-color:rgba(26,92,255,.15);
}
.jjfa-card:hover::before { transform:scaleX(1); }

/* 图标 — 更大 */
.jjfa-card-icon {
  width:72px; height:72px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(26,92,255,.07), rgba(0,174,243,.06));
  color:var(--c-primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px;
  transition:all .4s;
}
.jjfa-card-icon svg { width:38px; height:38px; }
.jjfa-card:hover .jjfa-card-icon {
  background:linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color:#fff;
  transform:scale(1.08) rotate(-3deg);
  box-shadow:0 8px 24px rgba(26,92,255,.3);
}

/* 标题 — 更大 */
.jjfa-card h3 {
  font-size:1.35rem;
  font-weight:800;
  color:var(--c-dark);
  margin-bottom:14px;
  letter-spacing:.5px;
}

/* 描述 — 更大行高 */
.jjfa-card p {
  font-size:.98rem;
  color:var(--c-text-light);
  line-height:1.85;
  margin-bottom:20px;
}

/* 标签 */
.jjfa-card-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.jjfa-tag {
  display:inline-block;
  font-size:.78rem;
  font-weight:500;
  color:var(--c-primary);
  background:rgba(26,92,255,.06);
  border:1px solid rgba(26,92,255,.1);
  border-radius:999px;
  padding:4px 14px;
  transition:all .3s;
}
.jjfa-card:hover .jjfa-tag {
  background:rgba(26,92,255,.1);
  border-color:rgba(26,92,255,.18);
}

/* 链接 */
.jjfa-card-link {
  font-size:.95rem;
  font-weight:700;
  color:var(--c-primary);
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .3s, color .3s;
  letter-spacing:.3px;
}
.jjfa-card:hover .jjfa-card-link { gap:12px; color:var(--c-primary-dark); }

/* —— 优势区域 —— */
.jjfa-advantage { padding:90px 0; background:var(--c-gray-50); }
.advantage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:36px; }
.advantage-item {
  text-align:center;
  padding:42px 24px 36px;
  background:#fff;
  border-radius:18px;
  transition:all .35s;
  border:1px solid rgba(0,0,0,.04);
}
.advantage-item:hover { transform:translateY(-6px); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.advantage-icon { 
  width:68px; height:68px; 
  margin:0 auto 20px;
  background:linear-gradient(135deg, rgba(26,92,255,.07), rgba(0,174,243,.05));
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-primary);
  transition:all .35s;
}
.advantage-item:hover .advantage-icon {
  background:linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color:#fff;
}
.advantage-icon svg { width:32px; height:32px; }
.advantage-item h4 { font-size:1.12rem; font-weight:800; color:var(--c-dark); margin-bottom:10px; }
.advantage-item p { font-size:.9rem; color:var(--c-text-light); line-height:1.7; }

/* —— CTA —— */
.jjfa-cta {
  padding:90px 0;
  background:linear-gradient(135deg, var(--c-dark) 0%, #0d2847 100%);
  text-align:center; color:#fff;
}
.jjfa-cta h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; margin-bottom:16px; }
.jjfa-cta p { font-size:1.05rem; opacity:.8; margin-bottom:36px; }
.cta-row {
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.cta-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:14px 36px;
  border-radius:999px;
  border:2px solid transparent;
  background:#fff;
  color:var(--c-primary);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 8px 28px rgba(0,106,255,.18);
  transition:all .3s ease;
}
.cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,106,255,.26);
}
.cta-btn.outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.35);
  box-shadow:none;
}
.cta-btn.outline:hover {
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

/* —— 响应式 —— */
@media (max-width:992px) {
  .jjfa-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .advantage-grid { grid-template-columns:repeat(2,1fr); }
  .deco-circle-1 { width:280px; height:280px; }
  .deco-glow-1 { width:200px; height:200px; }
}
@media (max-width:600px) {
  .jjfa-grid { grid-template-columns:1fr; }
  .advantage-grid { grid-template-columns:1fr; }
  .deco-circle-1,.deco-circle-2,.deco-circle-3,
  .deco-line,.deco-diamond,.deco-glow { display:none; }
  .jjfa-card { padding:32px 24px 28px; }
  .jjfa-card-icon { width:60px; height:60px; }
  .jjfa-card-icon svg { width:30px; height:30px; }
  .cta-row { gap:12px; }
  .cta-btn { width:100%; max-width:280px; }
}