/* ============================================================
   直快呼官网 - 首页样式
   ============================================================ */

/* ---------------- Hero 轮播 ---------------- */
.hero { position: relative; margin-top: var(--header-h); }
.hero .carousel-track { display: flex; }
.hero-slide {
  position: relative; flex: 0 0 100%; width: 100%; min-width: 0;
  min-height: 600px; display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
.hero-slide.slide-1 {
  background: radial-gradient(900px 500px at 85% 20%, rgba(147, 130, 246, .5), transparent 60%),
              radial-gradient(700px 500px at 10% 90%, rgba(90, 79, 232, .45), transparent 60%),
              linear-gradient(135deg, #17124a 0%, #2a1f7a 55%, #4a3ab8 100%);
}
.hero-slide.slide-2 {
  background: radial-gradient(900px 500px at 15% 25%, rgba(125, 211, 252, .35), transparent 60%),
              radial-gradient(800px 520px at 90% 85%, rgba(124, 108, 246, .5), transparent 60%),
              linear-gradient(120deg, #1b1650 0%, #32267e 55%, #5a48c4 100%);
}
.hero-slide.slide-3 {
  background: radial-gradient(900px 480px at 80% 15%, rgba(196, 181, 253, .3), transparent 60%),
              radial-gradient(760px 520px at 12% 88%, rgba(124, 58, 237, .38), transparent 62%),
              linear-gradient(125deg, #22124a 0%, #4a1d6e 50%, #7a2f8f 100%);
}
.hero-inner { display: grid; grid-template-columns: 1.06fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; margin-bottom: 22px;
}
.hero-tag .ico { color: #d6c9ff; font-size: 15px; }
.hero-title { font-size: 52px; font-weight: 800; line-height: 1.22; letter-spacing: 1px; }
.hero-title .grad {
  background: linear-gradient(90deg, #8db4ff, #ffffff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-slide.slide-3 .hero-title .grad { background: linear-gradient(90deg, #c4b5fd, #e9e2ff); -webkit-background-clip: text; background-clip: text; }
.hero-desc { margin-top: 20px; font-size: 17px; color: rgba(255, 255, 255, .8); max-width: 520px; }
.hero-cta { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero-meta { margin-top: 30px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .ico { color: #7ee2a8; font-size: 16px; }

/* Hero SVG 插画容器 */
.hero-figure { position: relative; }
.hero-figure svg { width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .28)); }
.float-chip {
  position: absolute; background: rgba(255, 255, 255, .96); color: var(--text);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px 14px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600;
  animation: floaty 4s ease-in-out infinite;
}
.float-chip .ico { font-size: 18px; color: var(--green); }
.float-chip small { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------------- 产品功能 Tab 区 ---------------- */
.feature-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-panel .figure {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow); background: linear-gradient(160deg, #f3f1ff, #eae8ff);
}
.feature-panel .figure svg { display: block; width: 100%; height: auto; }
.feature-panel .panel-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.feature-panel .panel-kicker .ico { font-size: 17px; }
.feature-panel h3 { font-size: 30px; font-weight: 800; margin-bottom: 14px; }
.feature-panel .panel-desc { color: var(--text-2); margin-bottom: 20px; }

/* ---------------- AI 能力 ---------------- */
.ai-hero { position: relative; overflow: hidden; }
.ai-hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 79, 232, .35), transparent 65%);
  top: -220px; right: -140px;
}
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ai-card {
  position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 30px 26px; transition: all .3s ease;
}
.ai-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .09); border-color: rgba(139, 133, 242, .55); }
.ai-card .card-icon {
  width: 54px; height: 54px; border-radius: 14px; font-size: 26px;
  background: linear-gradient(135deg, #5a4fe8, #8b85f2); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(90, 79, 232, .4);
}
.ai-card h3 { color: #fff; font-size: 19px; margin-bottom: 10px; }
.ai-card p { font-size: 14px; color: rgba(255, 255, 255, .66); }
.ai-card .ai-tag { position: absolute; top: 24px; right: 22px; font-size: 11px; color: #d6c9ff; border: 1px solid rgba(214, 201, 255, .4); border-radius: 999px; padding: 2px 10px; }

/* ---------------- 案例轮播 ---------------- */
.case-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
  background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
  padding: 28px 26px; display: flex; flex-direction: column; transition: all .25s;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.case-card .case-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.case-logo {
  width: 48px; height: 48px; border-radius: 12px; flex: none; font-size: 19px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
}
.case-card h3 { font-size: 17px; font-weight: 700; }
.case-card .case-ind { font-size: 12.5px; color: var(--text-3); }
.case-card .case-stat { display: flex; gap: 10px; margin: 14px 0; }
.case-card .case-stat .stat {
  flex: 1; background: var(--bg-2); border-radius: 10px; padding: 12px 8px; text-align: center;
}
.case-card .case-stat .stat b { display: block; font-size: 19px; color: var(--primary); font-weight: 800; }
.case-card .case-stat .stat span { font-size: 12px; color: var(--text-3); }
.case-card blockquote { font-size: 13.5px; color: var(--text-2); flex: 1; border-left: 3px solid var(--primary-light); padding-left: 12px; line-height: 1.8; }
.case-card .case-link { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }
.case-card .case-link .ico { font-size: 14px; transition: transform .2s; }
.case-card .case-link:hover .ico { transform: translateX(3px); }

/* ---------------- 解决方案卡片 ---------------- */
.solution-card {
  position: relative; border-radius: var(--radius); overflow: hidden; padding: 34px 28px;
  background: #fff; border: 1px solid var(--border); transition: all .3s; min-height: 250px;
  display: flex; flex-direction: column;
}
.solution-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.solution-card .sol-icon {
  width: 54px; height: 54px; border-radius: 14px; font-size: 26px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
  background: linear-gradient(135deg, #5a4fe8, #8b85f2);
}
.solution-card:nth-child(2) .sol-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.solution-card:nth-child(3) .sol-icon { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.solution-card:nth-child(4) .sol-icon { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.solution-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.solution-card p { font-size: 14px; color: var(--text-2); flex: 1; }
.solution-card .case-link { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }

/* ---------------- CTA 横幅 ---------------- */
.cta-banner {
  margin: 0 auto; max-width: 1200px; padding: 0 24px;
}
.cta-inner {
  border-radius: 24px; padding: 64px 48px; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(700px 300px at 85% 0%, rgba(147, 130, 246, .5), transparent 60%), linear-gradient(120deg, #1c1656 0%, #4038c7 55%, #5a4fe8 100%);
}
.cta-inner::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); left: -120px; bottom: -220px;
}
.cta-inner h2 { font-size: 34px; font-weight: 800; margin-bottom: 14px; }
.cta-inner p { color: rgba(255, 255, 255, .75); margin-bottom: 30px; }
.cta-inner .cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-phone { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; }
.cta-phone .ico { font-size: 24px; color: #d6c9ff; }

.hero .carousel-dots { position: absolute; bottom: 26px; left: 0; right: 0; margin: 0; z-index: 6; }
.hero .carousel-arrow { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(4px); }
.hero .carousel-arrow:hover { background: rgba(255, 255, 255, .34); color: #fff; }
.hero .carousel-dots button { background: rgba(255, 255, 255, .35); }
.hero .carousel-dots button.active { background: #fff; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero-slide { min-height: 520px; padding: 60px 0; }
  .hero-figure { max-width: 520px; margin: 0 auto; }
  .feature-panel { grid-template-columns: 1fr; gap: 32px; }
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
  .case-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-slide { min-height: 460px; padding: 44px 0; }
  .hero-title { font-size: 32px; }
  .hero-desc { font-size: 15px; }
  .hero-meta { gap: 14px; font-size: 12.5px; }
  .feature-panel h3 { font-size: 24px; }
  .ai-grid { grid-template-columns: 1fr; }
  .case-cards { grid-template-columns: 1fr; }
  .cta-inner { padding: 46px 22px; }
  .cta-inner h2 { font-size: 24px; }
}