/* 数字人大 node_szrd1 页面："您是不是经常遇到以下问题" 区域科技风样式（作用域：.tech-problems） */
.tech-problems{ --tp-primary:#2563EB; --tp-cyan:#22D3EE; --tp-ink:#334155; --tp-muted:#64748B; --tp-bdr:#E5E7EB; /* 中国传统色调色板 */ --cn-red:#E60012; --cn-blue:#2563EB; --cn-cyan:#06B6D4; --cn-green:#16A34A; --cn-purple:#7C4DFF; position:relative; padding:48px 0 44px; background:#fff; }
/* 移除网格淡纹：删除 :before 装饰 */
.tech-problems:before{ content:none !important; }

/* 标题：加能量下划线 */
.tech-problems .web-title-1{ color:#0F172A; font-weight:800; letter-spacing:.5px; }
.tech-problems .web-title-1 span{ color:#94A3B8; font-weight:600; margin-left:8px; }
.tech-problems .web-title-1:after{ content:""; display:block; width:92px; height:4px; margin:12px auto 0; border-radius:3px; background:linear-gradient(90deg, var(--tp-primary), var(--tp-cyan)); box-shadow:0 2px 12px rgba(34,211,238,.28); }
/* 三列说明卡片 */
.tech-problems .web-content1-box{ background:rgba(255,255,255,.9); border:1px solid var(--tp-bdr); border-radius:14px; padding:18px 16px; box-shadow:0 10px 24px rgba(2,6,23,.06); min-height:100%; margin-top:0; position:relative; overflow:hidden; }
.tech-problems .web-content1-box h3{ font-size:16px; line-height:1.8; color:var(--tp-ink); margin:10px 0; padding-left:28px; position:relative; }
/* 基础图标（使用字符并绘制圆形背景），颜色可通过类设置 --ico-bg */
.tech-problems .web-content1-box h3:before{ content: attr(data-ico); position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#fff; background: var(--ico-bg, var(--tp-primary)); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* 不同语义的颜色 */
.tech-problems .web-content1-box h3.icon-warn{ --ico-bg:#F59E0B; }
.tech-problems .web-content1-box h3.icon-help{ --ico-bg:#3B82F6; }
.tech-problems .web-content1-box h3.icon-info{ --ico-bg:#06B6D4; }
.tech-problems .web-content1-box h3.icon-time{ --ico-bg:#8B5CF6; }
.tech-problems .web-content1-box h3.icon-chat{ --ico-bg:#10B981; }
.tech-problems .web-content1-box h3.icon-report{ --ico-bg:#EF4444; }
/* 卡片颜色装饰：左右两侧渐变竖条 + 悬停内描边 */
.tech-problems .web-content1-box:before,
.tech-problems .web-content1-box:after{ content:""; position:absolute; top:10px; bottom:10px; width:4px; border-radius:3px; opacity:.9 }
/* 左列卡片（第1列）改为中国红主题，并将竖条移到“内侧”（右边） */
.tech-problems .uk-grid > div:nth-child(1) .web-content1-box:after{ right:10px; background:linear-gradient(180deg, var(--cn-red), #FF6B6B); box-shadow:0 0 0 3px rgba(230,0,18,.12); }
/* 右列卡片（第3列）使用蓝→青主题 */
.tech-problems .uk-grid > div:nth-child(3) .web-content1-box:after{ right:10px; background:linear-gradient(180deg, var(--cn-blue), var(--cn-cyan)); box-shadow:0 0 0 3px rgba(37,99,235,.10); }
/* 悬停内描边：与竖条同色的轻微内发光 */
.tech-problems .uk-grid > div:nth-child(1) .web-content1-box:hover{ box-shadow:inset 0 0 0 1px rgba(34,211,238,.55), 0 14px 30px rgba(2,6,23,.10) }
.tech-problems .uk-grid > div:nth-child(3) .web-content1-box:hover{ box-shadow:inset 0 0 0 1px rgba(139,92,246,.45), 0 14px 30px rgba(2,6,23,.10) }
/* 为中国红主题增加悬停描边色 */
.tech-problems .uk-grid > div:nth-child(1) .web-content1-box:hover{ box-shadow: inset 0 0 0 1px rgba(230,0,18,.45), 0 14px 30px rgba(2,6,23,.10) }


/* 中间配图优化尺寸与阴影 */
.tech-problems .uk-text-center img{ max-width:88%; height:auto; filter:drop-shadow(0 10px 24px rgba(2,6,23,.12)); }
/* 交互：悬停微浮起 */
.tech-problems .web-content1-box:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(2,6,23,.10); }
/* 栅格间距微调：避免 Flex gap 导致列宽累计超过 100% 从而换行，这里禁用 gap */
.tech-problems .uk-grid{ gap:0 !important; }
/* 响应式 */
@media (max-width:1199px){ .tech-problems{ padding:36px 0 } .tech-problems .web-content1-box h3{ font-size:15px } }
@media (max-width:767px){ .tech-problems .uk-text-center img{ max-width:70% } .tech-problems .web-title-1{ text-align:center } }
/* 中间 SVG 插画：轻微漂浮动效 */
.tech-problems .sr-illustration{ display:inline-block; width:260px; max-width:88%; }
.tech-problems .sr-illustration svg{ width:100%; height:auto; animation: sr-float 4s ease-in-out infinite; }
@keyframes sr-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
/* SVG 跑马灯与旋转动效（仅限该插画） */
.tech-problems .sr-illustration svg .marquee{ stroke-dasharray: 12 14; stroke-linecap: round; animation: sr-marquee 2.2s linear infinite; }
.tech-problems .sr-illustration svg .rot{ transform-origin: 100px 100px; animation: sr-rot 12s linear infinite; }
@keyframes sr-marquee{ to { stroke-dashoffset: -52; } }
@keyframes sr-rot{ to { transform: rotate(360deg); } }
/* 尊重“减少动态”偏好 */
@media (prefers-reduced-motion: reduce){
  .tech-problems .sr-illustration svg{ animation: none !important; }
  .tech-problems .sr-illustration svg .marquee,
  .tech-problems .sr-illustration svg .rot{ animation: none !important; }
}