/* ============================================================
   home.css · test3 · 仅首页
   ============================================================ */

/* ---------- 区块 ----------
   特斯拉与大疆都给区块留很大的上下留白，内部反而紧凑。
   现版是 68/120，这里拉到 120 并统一。 */
/* 区块留白：120 → 140。卡片之间的呼吸也一并放宽（20 → 24）。 */
.section{padding:140px 0}
.section-head{margin-bottom:76px;max-width:900px}
/* 标题下的渐变短线：整页的色彩节奏点。四个区块都有，
   间隔出现，比把大色块铺满更克制。 */
.section-head.center::after{content:"";display:block;width:56px;height:3px;border-radius:2px;
 background:var(--grad);margin:26px auto 0}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* 小标签：用在内页 page-hero 里，小字、宽字距、淡色 */
.kicker{font-size:12px;letter-spacing:.18em;color:var(--ink-3);font-weight:500;
 margin-bottom:14px;text-transform:uppercase}
/* 首页三个区块的大标题已移除，kicker 实际承担了区块标题的角色，
   所以在 section-head 里把它还原成标题的样子：大字号、零字距、主文字色。 */
.section-head .kicker{font-size:clamp(26px,3.3vw,44px);letter-spacing:-.02em;
 color:var(--ink);font-weight:400;text-transform:none;margin-bottom:0;line-height:1.3}
h2{font-size:clamp(26px,3.2vw,44px);line-height:1.25;letter-spacing:-.02em;margin:0;
 font-weight:400;color:var(--ink)}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* ---------- 首屏 ----------
   没有产品大图可用，所以走纯排版路线：一行大标题、一行说明、两个按钮。
   这正是特斯拉首屏去掉图之后剩下的骨架。
   原版的粒子画布已移除——在纯白首屏上它看起来像雪花，这两家都不会
   用这类装饰。日后有产品大图，直接作为 .hero 的背景即可。 */
/* 负 margin 把首屏拉到导航背后、并占满整屏。只把导航涂透明是不够的——
   首屏若仍从导航下方开始，顶上会留一条 64px 的白带，画面等于被装在盒子里。
   导航是 sticky + z-index 60，首屏不设 z-index，层叠顺序天然成立。 */
.hero{min-height:100vh;margin-top:calc(-1 * var(--nav-h));
 display:flex;align-items:center;justify-content:center;
 position:relative;overflow:hidden;text-align:center;
 background:
   radial-gradient(900px 520px at 50% -4%, #ebf1fe 0%, transparent 62%),
   radial-gradient(720px 440px at 88% 12%, #edfafd 0%, transparent 58%),
   radial-gradient(640px 430px at 6% 92%, #ebf1fe 0%, transparent 60%),
   #fff}
/* 细网格：科技感的基础肌理，中心可辨、边缘散掉 */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background-image:
   linear-gradient(rgba(3,72,222,.10) 1px, transparent 1px),
   linear-gradient(90deg, rgba(3,72,222,.10) 1px, transparent 1px);
 background-size:56px 56px;
 -webkit-mask-image:radial-gradient(780px 540px at 50% 46%, #000 12%, transparent 78%);
 mask-image:radial-gradient(780px 540px at 50% 46%, #000 12%, transparent 78%)}
/* 三团游走的光。不用散点——test3 那版粒子渲出来像雪花；
   大面积低频的光更稳，也更像「后面有东西在运转」。

   初版几乎看不出在动，原因有三：ease-in-out + alternate 让它大部分
   时间停在端点附近；位移只有 70px，而光团直径 440px；80px 模糊把
   渐变摊得很平，这点位移改变不了任何像素。
   改为多路径点的环形游走（不用 alternate，避免原路折返的机械感）。
   但只加大位移仍然看不出来：实测每秒只变 2.7 个色阶（约 1%），
   低于人眼在大面积平滑渐变上的察觉阈值；而且 80px 模糊抹平了所有
   边缘，人感知运动恰恰靠追踪边缘。
   所以三个量一起改：周期由 17/22/28s 缩到 7/9.5/12s（位移速度翻倍有余）、
   模糊由 ~78px 降到 ~43px（让边缘可辨）、透明度上调一档。
   实测每秒变化率因此从 2.7 级升到 8 级上下，约为原来的三倍。静态渐变底同时调淡——它不动，占的颜色越多，
   运动部分的相对变化就越小。

   will-change 把每团提升为独立合成层，模糊只栅格化一次，
   之后每帧只做 transform，否则动画会非常吃性能。 */
.hero-orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none;
 will-change:transform,opacity}
.hero-orb.a{width:440px;height:440px;background:#0f5afa;left:4%;top:10%;filter:blur(46px);
 animation:orbA 7s ease-in-out infinite}
.hero-orb.b{width:380px;height:380px;background:#14ceeb;right:6%;bottom:8%;filter:blur(44px);
 animation:orbB 9.5s ease-in-out infinite}
.hero-orb.c{width:310px;height:310px;background:#6a98fb;right:26%;top:6%;filter:blur(40px);
 animation:orbC 12s ease-in-out infinite}
/* 三个周期互不成整数倍，画面因此长时间不重复 */
@keyframes orbA{
  0%{transform:translate(0,0) scale(1);opacity:.23}
  25%{transform:translate(315px,165px) scale(1.12);opacity:.30}
  50%{transform:translate(180px,375px) scale(.94);opacity:.21}
  75%{transform:translate(-195px,210px) scale(1.07);opacity:.27}
  100%{transform:translate(0,0) scale(1);opacity:.23}}
@keyframes orbB{
  0%{transform:translate(0,0) scale(1);opacity:.21}
  30%{transform:translate(-285px,-180px) scale(1.14);opacity:.27}
  60%{transform:translate(-90px,-390px) scale(.96);opacity:.17}
  100%{transform:translate(0,0) scale(1);opacity:.21}}
@keyframes orbC{
  0%{transform:translate(0,0) scale(1);opacity:.15}
  35%{transform:translate(-225px,270px) scale(1.18);opacity:.22}
  70%{transform:translate(210px,135px) scale(.9);opacity:.13}
  100%{transform:translate(0,0) scale(1);opacity:.15}}
/* 首屏不在 .container 内，左右内边距必须自己带，否则窄屏上文字会顶到边 */
/* 导航区护色：顶部一条渐隐的白，保证导航文字压在干净背景上。
   做成渐变而不是色块，光团与网格仍能从导航后面隐约透出，不切断整屏连续感。 */
.hero::after{content:"";position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
 height:calc(var(--nav-h) + 56px);
 background:linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,0))}
.hero-content{position:relative;z-index:3;max-width:1000px;padding:72px 24px 96px}
/* 下限 24px 而非 38px：390px 窄屏下首行有 12 个汉字，38px 会溢出。
   用 7vw 让它在中等宽度上快速长到上限。 */
.hero h1{font-size:clamp(24px,5.8vw,62px);line-height:1.12;letter-spacing:-.03em;margin:0;
 font-weight:400;color:var(--ink)}
.hero-sub{margin:30px auto 0;max-width:700px;font-size:clamp(17px,1.75vw,23px);line-height:1.7;
 color:var(--ink-2);letter-spacing:-.01em}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.hero-actions .btn{min-width:168px}
.hero-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
 font-size:11px;letter-spacing:.2em;color:var(--ink-3);display:flex;flex-direction:column;
 align-items:center;gap:10px}
.hero-scroll::after{content:"";width:1px;height:30px;
 background:linear-gradient(var(--ink-3),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.3);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(.3);transform-origin:bottom}}

/* ---------- 卡片 ----------
   这一段是两派审美的交界，逐项说明取舍：

   投影    原版是带蓝色的大投影，test3/4 完全不用。这里给一层极淡的——
           卡片需要一点层次才像卡片，但不该喧哗。
   位移    原版 hover 抬 6px，test3/4 完全不动。取 3px：有反馈，不跳。
   圆角    原版 20px 偏圆润，test3 的 2px 偏硬。6px。
   图标底  原版是填充的品牌蓝方块，test3/4 是白底细描边。这里用填充——
           它是整页为数不多的彩色面，卡片派在意的「有生气」主要来自它。
   展开符  原版是带边框的方块（有可点击的暗示），test3/4 是裸十字。
           取带边框的——它要告诉用户这张卡能点开，这是功能不是装饰。 */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
 padding:30px 28px;overflow:hidden;outline:none;-webkit-tap-highlight-color:transparent;
 box-shadow:var(--sh-card);
 transition:border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease)}
.card[data-card]{cursor:pointer}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:linear-gradient(160deg,rgba(3,72,222,.055),transparent 58%);
 transition:opacity .26s var(--ease)}
.card:hover{border-color:#bfd1f8;box-shadow:var(--sh-card-h);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(3,72,222,.16)}
.card.pressed{transform:translateY(-1px) scale(.996)}
.card>*{position:relative;z-index:1}

.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;
 stroke-linecap:round;stroke-linejoin:round}
.ico-wrap{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;
 color:var(--accent);background:var(--accent-soft);border:1px solid transparent;
 transition:background .26s var(--ease),color .26s var(--ease),transform .26s var(--ease);
 margin-bottom:20px}
.card:hover .ico-wrap{background:var(--grad);color:#fff;transform:translateY(-2px)}
.card.open .ico-wrap{background:var(--grad);color:#fff}
.card h3{font-size:17px;margin:0 0 9px;letter-spacing:-.02em;line-height:1.4;font-weight:500;color:var(--ink)}
.card>p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.75}

.more{display:grid;grid-template-rows:0fr;opacity:0;
 transition:grid-template-rows .36s var(--ease),opacity .26s .05s,margin-top .36s var(--ease)}
.more>div{overflow:hidden}
.card.open .more{grid-template-rows:1fr;opacity:1;margin-top:18px}
.detail{border-top:1px solid var(--line-2);padding-top:16px;color:var(--ink-2);font-size:13px}
.detail p{margin:0 0 9px;line-height:1.75}
.detail p:last-child{margin-bottom:0}

.mini{display:flex;flex-wrap:wrap;gap:7px}
.mini span,.mini a{background:var(--accent-soft);color:var(--accent-deep);border-radius:var(--r);
 padding:6px 11px;font-size:11.5px;font-weight:500;letter-spacing:0;
 transition:background .2s,color .2s}
.mini a:hover{background:var(--grad);color:#fff}

/* 展开指示：带边框的方块，明确提示「这张卡可以点开」 */
.plus{position:absolute;right:22px;bottom:22px;width:24px;height:24px;z-index:1;
 border:1px solid var(--line);border-radius:7px;background:#fff;
 transition:border-color .26s var(--ease),background .26s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-3);
 border-radius:1px;transform:translate(-50%,-50%);
 transition:transform .28s var(--ease),background .24s,opacity .24s}
.plus::before{width:11px;height:1.4px}
.plus::after{width:1.4px;height:11px}
.card:hover .plus{border-color:#bfd1f8;background:var(--accent-soft)}
.card:hover .plus::before,.card:hover .plus::after{background:var(--accent)}
.card.open .plus{border-color:#bfd1f8;background:var(--accent-soft)}
.card.open .plus::before{background:var(--accent);transform:translate(-50%,-50%) rotate(180deg)}
.card.open .plus::after{background:var(--accent);transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.ripple{position:absolute;border-radius:50%;transform:scale(0);
 background:radial-gradient(circle,rgba(3,72,222,.16),rgba(3,72,222,0) 70%);
 animation:rip .55s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- 技术链路 ----------
   形态是卡片，但序列信息必须保住：靠序号 01~05 和卡片之间的连接器。
   光点在四个连接器上依次点亮（相位依次错开四分之一周期），读起来是
   「一个信号沿链路传下去」，而不是四个各自闪烁的点。

   每个 li 是单元格、卡片在其内部：连接器画在单元格上，
   否则会被卡片的 overflow:hidden 裁掉。 */
.flow-cards{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);
 gap:32px;margin:0;padding:0;list-style:none}
.step-cell{counter-increment:step;position:relative}
.step-card{text-align:center;padding:40px 18px 34px}

/* 连接器：一条颜色不断流动的线。
   旧版是一个沿线平移的光点，终点 translateX(38px) 超出了 32px 的间隙，
   光点有 9px 宽，末段会压在下一张卡片上。现在动的是线自身的渐变填充，
   元素尺寸恒为 32px，不存在越界的可能。 */
.step-cell:not(:last-child)::before{content:"";position:absolute;z-index:0;
 top:50%;right:-32px;width:32px;height:2px;margin-top:-1px;border-radius:2px;
 /* 周期 160px，而线只有 32px 宽——只截取周期的五分之一，所以是整条线
    在蓝青之间整体变色，而不是一条双色线内部滑动。
    用 px 而不是百分比：百分比下平移量恒为「图宽减元素宽」，可证明可见
    窗口只能是整数个周期，整体色调就不会变。 */
 background-image:linear-gradient(90deg,
   var(--accent) 0%, var(--cyan) 50%, var(--accent) 100%);
 background-size:160px 100%;
 animation:wire 3.2s linear infinite}
/* 四张卡片之间三条线，依次滞后三分之一周期（3.2 / 3 ≈ 1.067s），
   颜色波沿整条链路向右推进，任一时刻三条线的颜色都不相同。 */
.step-cell:nth-child(2)::before{animation-delay:-2.133s}
.step-cell:nth-child(3)::before{animation-delay:-1.067s}
/* 平移整整一个周期（160px），首尾完全同相，循环时没有跳变；
   正向平移让颜色向右流。负延迟是静态相位偏移，立即生效，不需要 backwards。 */
@keyframes wire{
  from{background-position:0 0}
  to{background-position:160px 0}}

.step-mark{position:relative;z-index:1;width:62px;height:62px;margin:0 auto 20px;
 display:flex;align-items:center;justify-content:center;color:var(--accent);
 border:2px solid transparent;border-radius:50%;
 background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
 box-shadow:0 0 0 6px rgba(3,72,222,.05), 0 6px 18px -8px rgba(3,72,222,.40);
 transition:background .26s var(--ease),color .26s var(--ease),
            box-shadow .26s var(--ease),transform .26s var(--ease)}
.step-mark .ico{width:28px;height:28px;stroke-width:1.5}
.step-card:hover .step-mark{background:var(--grad) border-box;color:#fff;
 box-shadow:0 0 0 8px rgba(3,72,222,.10), var(--glow)}
.step-no{display:block;font-size:11px;letter-spacing:.2em;color:var(--accent);font-weight:500}
.step-no::before{content:counter(step,decimal-leading-zero)}
.step-card h3{margin:10px 0 7px;font-size:16px;font-weight:500;letter-spacing:-.02em;
 line-height:1.4;color:var(--ink);transition:color .24s var(--ease)}
.step-card:hover h3{color:var(--accent)}
.step-card p{margin:0;font-size:13px;line-height:1.75;color:var(--ink-2)}

/* ---------- 核心能力 / 应用范例 / 合作模式 ----------
   这三块回到卡片。test4 把它们改成了编号横条、密集列表和竖线条带，
   整页节奏确实更好，但卡片有两个无可替代的优点：边界清楚、可扫读。
   对要在三十秒内判断「这家公司能不能干我这活」的客户来说，这比节奏重要。

   只有技术链路保持流程线——那不是审美选择：它本身是一条序列
   （感知→理解→智能→技能→作业），排成五个并列卡片会丢掉这层信息。 */
.cap{padding:40px 34px 34px}
.cap .ico-wrap{width:56px;height:56px;border-radius:12px}
.cap .ico{width:26px;height:26px}
.cap h3{font-size:19px;line-height:1.35;letter-spacing:-.02em}
.cap>p{font-size:13.5px;line-height:1.78}
.cap .mini{margin-top:18px}

/* 行业标签。这条规则在重写区块时被连带删过两次（test4 一次、test5 一次），
   每次表现都是「标签变成灰色裸文字」。改区块时记得单独确认它还在。 */
.tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.06em;
 color:var(--accent);background:var(--accent-soft);border-radius:var(--r);
 padding:5px 10px;margin-bottom:12px}

.app{padding:34px}
.app .detail b{color:var(--ink);font-weight:500}
.app .detail .val{color:var(--accent-deep);font-weight:500}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.app-top h3{font-size:18px;margin:0;line-height:1.35;letter-spacing:-.02em}
.app p{color:var(--ink-2);font-size:13.5px;line-height:1.75;margin:0}
.app .more{transition:grid-template-rows .36s var(--ease),opacity .26s,margin-top .36s}

.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:56px}
.mode{padding:40px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
 text-align:center;box-shadow:var(--sh-card);
 transition:border-color .24s var(--ease),box-shadow .24s var(--ease),transform .24s var(--ease)}
.mode:hover{border-color:#bfd1f8;box-shadow:var(--sh-card-h);transform:translateY(-3px)}
.mode .ico-wrap{margin:0 auto 16px}
.mode:hover .ico-wrap{background:var(--grad);color:#fff}
.mode h4{margin:0 0 8px;font-size:16px;letter-spacing:-.02em;line-height:1.4;font-weight:500;color:var(--ink)}
.mode p{color:var(--ink-2);margin:0;font-size:13.5px;line-height:1.75}

/* ---------- 留言板 ---------- */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:48px}
.form-wrap h3{font-size:26px;margin:0 0 10px;line-height:1.3;letter-spacing:-.02em;font-weight:400;color:var(--ink)}
.form-wrap .lead{color:var(--ink-2);margin:0 0 32px;font-size:14px;line-height:1.75}
.form-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label{font-size:12.5px;color:var(--ink-2);font-weight:400;letter-spacing:0}
.form-field input,.form-field textarea{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
 background:#fff;font:inherit;font-size:14px;color:var(--ink);transition:border-color .2s;outline:none}
.form-field input::placeholder,.form-field textarea::placeholder{color:#b6b8ba}
/* 焦点态必须和全站一致。原来是近黑边框，而 base.css 里的 :focus-visible
   轮廓是蓝色——同一个表单里鼠标点击和键盘聚焦呈现两种颜色，对键盘用户
   尤其困扰。改为品牌蓝边框加一圈浅蓝，和卡片的 :focus-visible 对齐。 */
.form-field input:focus,.form-field textarea:focus{
 border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-field textarea{min-height:124px;resize:vertical;line-height:1.7}
.form-field.full{margin-top:16px}
.form-actions{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.form-note{color:var(--ink-3);font-size:12.5px;line-height:1.75}
.form-note a{color:var(--accent);font-weight:400}
.form-note a:hover{text-decoration:underline}

/* ---------- 响应式 ---------- */
@media(max-width:1100px){
  .form-row{grid-template-columns:1fr}
  .grid-4,.grid-3,.modes{grid-template-columns:repeat(2,1fr)}
  /* 技术链路换成 2 列（2+2）。换行之后连接器会指向空处，直接隐藏；
     序列信息仍由 01~04 的编号承担。 */
  .flow-cards{grid-template-columns:repeat(2,1fr);gap:24px}
  .step-cell::before{display:none}
  .section{padding:96px 0}
}
@media(max-width:768px){
  .section{padding:64px 0}
  .section-head{margin-bottom:40px}
  .grid-3,.grid-4,.modes,.flow-cards{grid-template-columns:1fr}
  .form-wrap{padding:28px 22px}
  .hero-actions .btn{min-width:0;flex:1 1 140px}
  .hero-orb.c{display:none}   /* 窄屏少一团，省一个合成层 */
}