/* ==========================================================================
   首页：Hero、AI 工作流、主营业务、交付流程、精选产品、项目案例
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.9; }
.hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding-block: clamp(64px, 8vw, 104px) clamp(56px, 7vw, 88px);
}
@media (max-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; } }

.hero__copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.eyebrow {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-2); background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-body); font-size: 13px; color: var(--c-text-2);
}
.eyebrow__en { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-lemon); }
.eyebrow__sep { color: #4a4f57; }


.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__caps { display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--font-body); font-size: 14px; color: var(--c-muted); }
.hero__caps li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- AI 工作流面板 ---------- */
.viz-wrap { position: relative; width: 100%; max-width: 620px; justify-self: center; perspective: 1400px; }
/* 面板整体做 3D 倾斜，但内部保持平面渲染（flat），否则 3D 深度排序会打乱节点与连线的层级、遮挡提示框 */
.viz { position: relative; transform-style: flat; will-change: transform; }

.panel {
  position: relative; overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, rgba(22, 25, 30, 0.92), rgba(12, 14, 17, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--sh-panel);
}
.panel::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 249, 74, 0.7), rgba(94, 230, 240, 0.6), transparent);
}
.panel__top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.panel__dot { width: 10px; height: 10px; border-radius: 50%; background: #2b2f36; }
.panel__name { margin-left: 8px; font-family: var(--font-mono); color: var(--c-text-2); }
.panel__status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgba(215, 249, 74, 0.1); color: var(--c-lemon);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
}
@media (max-width: 640px) { .panel__crumb { display: none; } }

.flow { position: relative; aspect-ratio: 560 / 380; }
.flow > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow__base path { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.4; }
.flow__dash { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.2; stroke-dasharray: 4 6; }

/* 流光：沿连线移动的短线段（pathLength=1） */
@keyframes comet { 0% { stroke-dashoffset: 1; opacity: 0; } 10%, 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.comet { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.12 0.88; stroke-dashoffset: 1; opacity: 0; animation: comet 2.4s linear infinite; animation-delay: var(--d, 0s); }

.node-pos { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
/* 悬浮 / 聚焦的节点整体提到最上层，避免提示框被后面的节点遮挡 */
.node-pos:hover, .node-pos:focus-within { z-index: 10; }
.node {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 8px; border-radius: var(--r-sm);
  background: rgba(20, 23, 27, 0.95); border: 1px solid var(--c-line-2);
  color: var(--c-text); text-align: left; white-space: nowrap; cursor: default;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.node:hover, .node:focus-visible {
  border-color: rgba(215, 249, 74, 0.6); background: rgba(26, 30, 35, 0.98);
  box-shadow: 0 0 0 4px rgba(215, 249, 74, 0.08), 0 10px 30px -10px rgba(215, 249, 74, 0.4);
}
.node--human { border-style: dashed; }
.node__ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(215, 249, 74, 0.12); color: var(--c-lemon); }
.node__ic--c { background: rgba(94, 230, 240, 0.12); color: var(--c-cyan); }
.node b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.node small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--c-dim); }

.tip {
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 5; width: 210px; margin-left: -105px;
  padding: 10px 12px; border-radius: 10px; background: var(--c-text); color: #14171b;
  font-family: var(--font-body); font-size: 12px; line-height: 1.6; white-space: normal; text-align: left;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity var(--dur-fast), transform 0.35s var(--ease-out);
}
.tip--up { top: auto; bottom: calc(100% + 10px); transform: translateY(4px); }
.tip--start { left: 0; margin-left: 0; }
.node:hover .tip, .node:focus-visible .tip, .core:hover .tip, .core:focus-visible .tip { opacity: 1; transform: none; }

.core {
  position: relative; width: 96px; height: 96px; border: 0; border-radius: 50%; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--c-on-lemon); background: radial-gradient(circle at 35% 30%, #f1ffb8, #d7f94a 45%, #a8c82a 100%);
  box-shadow: 0 0 0 8px rgba(215, 249, 74, 0.06), 0 0 60px rgba(215, 249, 74, 0.35);
}
.core b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.core__ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(215, 249, 74, 0.45); animation: spin 18s linear infinite; }
.core__pulse { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(215, 249, 74, 0.6); animation: pulse-ring 2.6s ease-out infinite; }
.core__pulse--b { animation-delay: 1.3s; }
.core .tip { width: 230px; margin-left: -115px; top: calc(100% + 18px); }

/* 执行日志：进度条与对勾由 GSAP 循环驱动；无 JS / 减少动效时显示完成态 */
.log { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.log__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 88px 18px; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; color: var(--c-text-2); }
.log__n { font-family: var(--font-mono); font-size: 11px; color: var(--c-dim); }
.log__track { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.log__fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); transform-origin: left; }
.log__ok { display: inline-flex; color: var(--c-lemon); }

/* 悬浮信息卡：跟随鼠标视差（GSAP） */
.float-card { position: absolute; z-index: 3; }
.float-card__in {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(20, 23, 27, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--c-line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8);
  font-family: var(--font-body); font-size: 12px; color: var(--c-text-2); white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
}
.float-card__in b { color: var(--c-text); font-weight: 500; }
.float-card--a { left: -36px; top: 64px; }
.float-card--b { right: 28px; top: -30px; }
.float-card--b .float-card__in { animation-duration: 7s; animation-delay: 1s; }
@media (max-width: 1180px) { .float-card { display: none; } }

/* 手机端：竖向简化工作流，替代桌面节点图 */
.flow-m { display: none; position: relative; flex-direction: column; gap: 10px; padding: 18px; }
.flow-m::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 1px; background: rgba(255, 255, 255, 0.12); }
.flow-m::after {
  content: ""; position: absolute; left: 32px; top: 30px; width: 3px; height: 40px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--c-lemon), transparent);
  animation: flow-m-run 2.8s linear infinite;
}
@keyframes flow-m-run { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(190px); opacity: 0; } }
.flow-m .node { z-index: 1; }
.flow-m .node--core { border-color: rgba(215, 249, 74, 0.5); }
.flow-m .node--core .node__ic { background: var(--c-lemon); color: var(--c-on-lemon); }
@media (max-width: 640px) {
  .flow { display: none; }
  .flow-m { display: flex; }
  .log__row { grid-template-columns: 22px minmax(0, 1fr) 56px 16px; }
}

/* ---------- 主营业务 Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento__agent { grid-column: span 4; padding: clamp(28px, 3.4vw, 44px); }
.bento__auto { grid-column: span 2; }
.bento__sm { grid-column: span 2; }
@media (max-width: 1080px) { .bento__agent, .bento__auto { grid-column: span 6; } }
@media (max-width: 820px) { .bento__sm { grid-column: span 6; } }

.svc { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.svc__head { display: flex; justify-content: space-between; align-items: center; }
.svc__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.svc__title--lg { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.02em; }
.svc__code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--c-dim); }
.svc__ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-lemon); color: var(--c-on-lemon); }
.svc__ic--ghost { background: rgba(215, 249, 74, 0.1); color: var(--c-lemon); border: 1px solid rgba(215, 249, 74, 0.25); }
.svc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.svc .link-arrow { margin-top: auto; }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; align-items: center; }
.agent-copy { display: flex; flex-direction: column; gap: 18px; }
.subcaps { list-style: none; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.subcap { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); transition: padding-left var(--dur) var(--ease-out); }
.subcap:hover { padding-left: 6px; }
.subcap__n { font-family: var(--font-mono); font-size: 12px; color: var(--c-lemon); padding-top: 3px; }
.subcap b { font-size: 15px; font-weight: 600; }
.subcap span:last-child { grid-column: 2; font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--c-muted); }

/* Agent 微型工作流 */
.mini-flow { position: relative; width: 100%; max-width: 420px; aspect-ratio: 320 / 230; justify-self: center; }
.mini-flow > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mini-flow__node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px;
  background: #15181d; border: 1px solid var(--c-line-2); font-size: 12px; color: var(--c-text-2); white-space: nowrap;
  transition: border-color 0.4s, color 0.4s, transform var(--dur) var(--ease-out);
}
.mini-flow__node i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan); }
.mini-flow__node--out { color: var(--c-lemon); }
.bento__agent:hover .mini-flow__node { border-color: rgba(215, 249, 74, 0.45); color: var(--c-text); }
.bento__agent:hover .mini-flow__node--top { transform: translate(-50%, -62%); }
.bento__agent:hover .mini-flow__node--bottom { transform: translate(-50%, -38%); }
.mini-flow__core {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center; border-radius: 18px;
  background: var(--c-lemon); color: var(--c-on-lemon); box-shadow: 0 0 40px rgba(215, 249, 74, 0.3);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mini-flow__core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--c-lemon); animation: pulse-ring 2.4s ease-out infinite; }
.bento__agent:hover .mini-flow__core { transform: rotate(-8deg) scale(1.06); }

/* 电商订单流转 */
.bento__auto { background: linear-gradient(180deg, rgba(215, 249, 74, 0.07), #0c0e11 55%); border-color: rgba(215, 249, 74, 0.22); }
.bento__auto .svc__code { color: var(--c-lemon); }
.pipeline { position: relative; display: flex; flex-direction: column; gap: 8px; }
.pipeline__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; height: 40px; font-family: var(--font-body); font-size: 13px; color: var(--c-muted); }
.pipeline__bar { position: relative; height: 30px; overflow: hidden; border-radius: 9px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
@keyframes pipe-fill { 0% { transform: scaleX(0); opacity: 1; } 18% { transform: scaleX(1); } 88% { transform: scaleX(1); opacity: 1; } 98%, 100% { transform: scaleX(1); opacity: 0; } }
.pipeline__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(215, 249, 74, 0.28), rgba(94, 230, 240, 0.14)); transform-origin: left; animation: pipe-fill 4.8s var(--ease-out) infinite backwards; animation-delay: var(--d, 0s); }
@keyframes pipe-order { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(48px); } 50%, 68% { transform: translateY(96px); } 75%, 92% { transform: translateY(144px); opacity: 1; } 98%, 100% { transform: translateY(144px); opacity: 0; } }
.pipeline__order {
  position: absolute; right: 10px; top: 5px; height: 30px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: 8px; background: var(--c-lemon); color: var(--c-on-lemon);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; animation: pipe-order 4.8s var(--ease-out) infinite;
}

/* 设备轮廓：APP / 小程序 / Web */
.device { position: relative; height: 190px; margin: -8px -8px 8px; overflow: hidden; border-radius: 16px; background: radial-gradient(100% 90% at 50% 0%, rgba(215, 249, 74, 0.07), transparent 65%); }
.phone {
  position: absolute; width: 86px; height: 170px; padding: 16px 8px 8px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, 0.22); background: #101318;
  transition: transform var(--dur-slow) var(--ease-out);
}
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 22px; height: 4px; margin-left: -11px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
.ui-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.ui-row { display: flex; align-items: center; gap: 5px; }
.ui-avatar { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #1f242b; }
.ui-block { display: block; border-radius: 8px; background: #1b1f25; }
.phone--back { left: 50%; top: 26px; margin-left: -74px; transform: rotate(-10deg); }
.phone--front { left: 50%; top: 14px; margin-left: -16px; transform: rotate(5deg); border-color: rgba(215, 249, 74, 0.5); }
.svc:hover .phone--back { transform: translate(-22px, 4px) rotate(-17deg); }
.svc:hover .phone--front { transform: translate(14px, -6px) rotate(9deg); }
.phone--mini { left: 50%; top: 12px; margin-left: -43px; padding-top: 28px; }
.mini-capsule { position: absolute; top: 13px; right: 8px; width: 28px; height: 11px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.3); }
.mini-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.mini-tile { height: 30px; border-radius: 7px; background: #1b1f25; transition: transform var(--dur) var(--ease-out), background var(--dur); }
.svc:hover .mini-tile { transform: translateY(-3px); background: rgba(215, 249, 74, 0.22); }
.svc:hover .mini-tile:nth-child(2) { transition-delay: 0.08s; }
.svc:hover .mini-tile:nth-child(3) { transition-delay: 0.16s; }
.svc:hover .mini-tile:nth-child(4) { transition-delay: 0.24s; }
.coupon {
  position: absolute; right: 16px; top: 70px; padding: 6px 10px; border-radius: 8px;
  background: var(--c-lemon); color: var(--c-on-lemon); font-family: var(--font-body); font-size: 11px; font-weight: 600;
  opacity: 0; transform: translateX(30px); transition: transform var(--dur-slow) var(--ease-out), opacity 0.4s;
}
.svc:hover .coupon { opacity: 1; transform: none; }
.win {
  position: absolute; left: 50%; width: 170px; height: 110px; margin-left: -85px; padding: 22px 10px 10px;
  display: flex; flex-direction: column; gap: 6px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16); background: #111419;
  transition: transform var(--dur-slow) var(--ease-out);
}
.win::before { content: ""; position: absolute; left: 10px; top: 9px; width: 26px; height: 5px; background: radial-gradient(circle at 2.5px 2.5px, rgba(255, 255, 255, 0.35) 2.5px, transparent 3px) 0 0 / 9px 5px repeat-x; }
.win--1 { top: 20px; transform: translate(-26px, -4px) scale(0.9); opacity: 0.5; }
.win--2 { top: 34px; transform: translate(-12px, 0) scale(0.95); opacity: 0.75; }
.win--3 { top: 48px; border-color: rgba(215, 249, 74, 0.45); }
.svc:hover .win--1 { transform: translate(-56px, -14px) scale(0.9) rotate(-4deg); }
.svc:hover .win--2 { transform: translate(-26px, -6px) scale(0.95) rotate(-2deg); }
.svc:hover .win--3 { transform: translate(18px, 6px); }
.win__dash { display: flex; gap: 6px; height: 100%; }
.win__side { width: 30px; border-radius: 5px; background: #1b1f25; }
.win__main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.win__chart { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.win__chart span { flex: 1; border-radius: 3px; background: #2b3037; }


/* 背景数据流画布：主要出现在右侧，不干扰左侧文字阅读 */
.hero__canvas {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 40%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 40%, #000 70%);
}