/* 云秀互动官网 3.0 · FDE 页
   页面人格（VI v1.0.2 §24）：工程蓝图 / 接口连接 / 模块对接与进入现场。
   共享层：assets/v3/core.css（Token、导航、按钮、页脚、弹窗、动效基础件）。
   本文件只写 FDE 的模块语言与动效语言；主副标冻结逐字（COPY-宣传口径-主标副标-v1）。
   动效纪律：只做「入场 + 微交互 + 局部循环」，不做留在半程的滚动变形。 */

/* ——— 段落节奏 ——— */
.fde-sec{padding:116px 0}
.fde-sec.is-soft{background:linear-gradient(180deg,#f7fbff,#f2f8ff)}
.fde-sec.is-dark{position:relative;overflow:clip;color:#fff;background:linear-gradient(165deg,#081828,#071525 55%,#0b1f38)}
.is-dark .kicker{color:#76aaff}
.is-dark h2,.is-dark h3{color:#fff}

/* ——— Hero：工程蓝图横向铺开（浅色网格底） ——— */
.fde-hero{padding:150px 0 0;background-color:#f8fbff;background-image:linear-gradient(rgba(18,104,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(18,104,255,.045) 1px,transparent 1px);background-size:32px 32px}
.fde-hero-copy{max-width:760px}
.fde-hero-copy .kicker{margin:0 0 22px}
.fde-lead{margin:22px 0 0;font-size:22px;line-height:1.5;font-weight:560;letter-spacing:-.015em;color:var(--ink2)}
.fde-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

.fde-bp{margin-top:48px;border-radius:28px 28px 0 0;border:1px solid #dbe7f5;border-bottom:0;background:rgba(255,255,255,.94);box-shadow:0 -10px 50px rgba(25,70,120,.06);overflow:hidden;padding:40px 36px 44px}
.fde-bp-grid{--igut:36px;display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:18px 0;align-items:center;max-width:960px;margin:0 auto}
.fde-bp-node{position:relative;padding:16px 18px;border-radius:15px;background:#fff;border:1px solid #dce7f5;font-size:13px;color:#425a72;line-height:1.5;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.fde-bp-node strong{display:block;color:var(--ink);font-size:11px;margin-bottom:6px;letter-spacing:.1em;font-weight:700}
.fde-bp-node::after{content:"";position:absolute;top:50%;width:var(--igut);border-top:1px dashed rgba(18,104,255,.3);pointer-events:none;transition:border-color .35s var(--ease)}
.bp-a{grid-area:1/1}
.bp-b{grid-area:2/1}
.bp-c{grid-area:1/3}
.bp-d{grid-area:2/3}
.bp-a::after,.bp-b::after{left:100%}
.bp-c::after,.bp-d::after{right:100%}
.fde-bp-node .bp-wire{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:2px;background:var(--blue);box-shadow:0 0 10px rgba(18,104,255,.5);opacity:0;pointer-events:none}
.bp-a .bp-wire,.bp-b .bp-wire{left:100%}
.bp-c .bp-wire,.bp-d .bp-wire{right:100%}
html.motion .fde-bp-node.is-flow .bp-wire{animation:bpWire 1.7s var(--ease) infinite}
html.motion .bp-c.is-flow .bp-wire,html.motion .bp-d.is-flow .bp-wire{animation-name:bpWireIn}
@keyframes bpWire{0%{opacity:0;transform:translateX(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(29px)}}
@keyframes bpWireIn{0%{opacity:0;transform:translateX(-29px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(0)}}
.fde-bp-node.is-flow{border-color:rgba(18,104,255,.45);background:#f7fbff;box-shadow:0 10px 26px rgba(18,104,255,.1)}
.bp-a.is-flow::after,.bp-b.is-flow::after{border-top-color:rgba(18,104,255,.6)}
.bp-c.is-flow::after,.bp-d.is-flow::after{border-top-color:rgba(18,104,255,.6)}
.fde-bp-core{grid-area:1/2/3/3;justify-self:center;align-self:stretch;width:100%;max-width:148px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px 14px;border-radius:18px;background:linear-gradient(172deg,#0f2542,#0a1a2e);border:1px solid #203e61;box-shadow:0 22px 54px rgba(2,10,20,.4);transition:box-shadow .5s var(--ease)}
.fde-bp-core::before{content:"";position:absolute;inset:6px;border-radius:13px;border:1px solid rgba(120,170,255,.14);pointer-events:none}
.fde-bp-core::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.4;box-shadow:0 0 0 1px rgba(90,169,255,.25),0 0 52px rgba(40,109,220,.2)}
html.motion .fde-bp-core::after{animation:bpCoreGlow 4.6s ease-in-out infinite}
@keyframes bpCoreGlow{0%,100%{opacity:.32}50%{opacity:1}}
.fde-bp-core strong{font-size:11px;letter-spacing:.18em;color:#7f9dc0;font-weight:700}
.fde-bp-core b{font-size:20px;font-weight:680;letter-spacing:-.01em;color:#fff}
.fde-bp-core span{font-size:11.5px;line-height:1.7;color:#9fb6d1}
.fde-bp-pulse{display:block;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(90,169,255,.16);margin:2px 0}
html.motion .fde-bp-pulse{animation:bpPulse 2.4s ease-in-out infinite}
@keyframes bpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.fde-bp.is-flowing .fde-bp-core{box-shadow:0 22px 54px rgba(2,10,20,.4),0 0 56px rgba(40,109,220,.3)}

/* ——— 四道关（联排卡片） ——— */
.fde-gates{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;margin-top:48px;box-shadow:0 14px 40px rgba(20,64,115,.06)}
.fde-gate{padding:26px 22px;border-right:1px solid var(--line);min-height:172px;transition:background .35s var(--ease)}
.fde-gate:last-child{border-right:0}
.fde-gate:hover{background:linear-gradient(180deg,#f8fbff,#fff)}
.fde-gate b{font-size:10.5px;letter-spacing:.14em;color:var(--blue);font-weight:700}
.fde-gate h3{margin:14px 0 8px;font-size:17px;font-weight:660;letter-spacing:-.01em;color:var(--ink)}
.fde-gate .body{font-size:12.5px}

/* ——— 落地交付物（含图纸预览） ——— */
.fde-artifacts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.fde-artifact{border:1px solid var(--line);border-radius:22px;background:#fff;padding:24px;box-shadow:0 12px 36px rgba(20,64,115,.05);transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.fde-artifact:hover{transform:translateY(-2px);border-color:#c8dcf5;box-shadow:0 16px 40px rgba(20,64,115,.08)}
.fde-artifact h3{margin:0;font-size:17px;font-weight:660;letter-spacing:-.01em;color:var(--ink)}
.fde-artifact .body{margin-top:9px;font-size:13px}
.doc-preview{margin-top:16px;border:1px solid #e2eaf4;border-radius:14px;background:#f8fbff;padding:14px;display:grid;gap:8px}
.doc-preview i{display:block;height:7px;border-radius:999px;background:#d9e4f2;transition:background .35s var(--ease)}
.doc-preview i.s{width:55%}
.doc-preview i.m{width:74%}
.doc-preview i.l{width:92%}
.fde-artifact:hover .doc-preview i{background:#c6d9f0}

/* ——— 责任分工（矩阵表） ——— */
.fde-table-wrap{margin-top:48px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(20,64,115,.06)}
.fde-table{width:100%;border-collapse:collapse}
.fde-table th,.fde-table td{padding:17px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:13px;line-height:1.7}
.fde-table th{background:#f7faff;color:#425970;font-weight:650;font-size:12px;letter-spacing:.04em}
.fde-table td:first-child{width:150px;font-weight:650;color:var(--ink)}
.fde-table tr:last-child td{border-bottom:0}
.fde-table tbody tr:hover td{background:#fbfdff}

/* ——— 落地流程（编号步骤 + 箭头） ——— */
.fde-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:48px}
.fde-step{position:relative;margin-right:26px;padding:22px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.fde-step:last-child{margin-right:0}
.fde-step::after{content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);color:#9db8d8;font-size:14px;pointer-events:none}
.fde-step:last-child::after{display:none}
.fde-step:hover{border-color:#c8dcf5;box-shadow:0 12px 30px rgba(20,64,115,.07);transform:translateY(-2px)}
.fde-step b{font-size:10.5px;letter-spacing:.14em;color:var(--blue);font-weight:700}
.fde-step h3{margin:12px 0 7px;font-size:16px;font-weight:660;letter-spacing:-.01em;color:var(--ink)}
.fde-step .body{font-size:12.5px}

/* ——— 当前边界（深色三联） ——— */
.fde-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.fde-note{border-radius:20px;padding:24px 22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-top:2px solid rgba(120,170,255,.4);transition:background .35s var(--ease),border-color .35s var(--ease)}
.fde-note:hover{background:rgba(255,255,255,.07)}
.fde-note h3{margin:0;font-size:16px;font-weight:660;color:#fff}
.fde-note p{margin:10px 0 0;font-size:12.5px;line-height:1.75;color:#9fb2c8}
.fde-boundary-meta{margin-top:20px;color:#91a4ba}

/* ——— 收尾：第一次沟通（浅色蓝图面板） ——— */
.fde-cta-band{padding:96px 0 110px}
.fde-cta{position:relative;overflow:hidden;border-radius:28px;padding:46px 44px;background-color:#f8fbff;background-image:linear-gradient(rgba(18,104,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(18,104,255,.04) 1px,transparent 1px);background-size:32px 32px;border:1px solid #dbe8f6;box-shadow:0 24px 60px rgba(20,64,115,.07)}
.fde-cta .h2{max-width:560px}
.fde-cta .lead{margin:14px 0 0;font-size:16px;max-width:560px;color:var(--muted)}
.fde-cta .btn{margin-top:26px}

/* ——— 断点 ——— */
@media(max-width:1080px){
  .fde-sec{padding:92px 0}
  .fde-hero{padding:128px 0 0}
  .fde-bp-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:14px}
  .fde-bp-core{grid-area:auto;grid-column:1/-1;max-width:none;flex-direction:row;text-align:left;justify-content:flex-start;gap:16px;padding:18px 20px;border-radius:16px}
  .fde-bp-core br{display:none}
  .bp-a,.bp-b,.bp-c,.bp-d{grid-area:auto}
  .fde-bp-node::after{display:none}
  .fde-bp-node .bp-wire{display:none}
  .fde-artifacts{grid-template-columns:1fr;gap:12px}
  .fde-notes{grid-template-columns:1fr;gap:12px}
  .fde-cta-band{padding:76px 0 86px}
  .menu-btn{min-height:44px}
}
@media(max-width:860px){
  .fde-sec{padding:48px 0}
  .fde-hero{padding:104px 0 0}
  .fde-lead{font-size:16px;margin-top:14px}
  .fde-btns{margin-top:22px}
  .fde-bp{margin-top:32px;padding:22px 16px 26px;border-radius:20px 20px 0 0}
  .fde-bp-grid{grid-template-columns:1fr 1fr;gap:10px}
  .fde-gates{grid-template-columns:1fr 1fr;margin-top:30px}
  .fde-gate{border-bottom:1px solid var(--line)}
  .fde-gate:nth-child(2n){border-right:0}
  .fde-gate:nth-child(n+3){border-bottom:0}
  /* WAP：交付物四卡 → 横滑卡组 */
  .fde-artifacts{display:flex;gap:12px;margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .fde-artifacts::-webkit-scrollbar{display:none}
  .fde-artifact{flex:none;width:80%;scroll-snap-align:start}
  .fde-table-wrap{margin-top:30px;overflow-x:auto;overscroll-behavior-x:contain}
  .fde-table{min-width:560px}
  /* WAP：五步链 → 横滑链（隐藏折行箭头） */
  .fde-steps{display:flex;gap:10px;margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .fde-steps::-webkit-scrollbar{display:none}
  .fde-step{flex:none;width:74%;margin:0;padding:18px 16px;scroll-snap-align:start}
  .fde-step::after{display:none}
  .fde-notes{margin-top:30px}
  .fde-cta-band{padding:56px 0 64px}
  .fde-cta{padding:30px 22px}
}
@media(max-width:560px){
  /* WAP：四道关 → 横滑卡组（卡自带边框圆角） */
  .fde-gates{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .fde-gates::-webkit-scrollbar{display:none}
  .fde-gate{flex:none;width:82%;min-height:0;padding:20px 18px;border:1px solid var(--line);border-radius:18px;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){
  html.motion .fde-bp-node.is-flow .bp-wire,html.motion .fde-bp-core::after,html.motion .fde-bp-pulse{animation:none}
  .fde-bp-node,.fde-bp-core,.fde-gate,.fde-artifact,.fde-step,.fde-note,.doc-preview i{transition:none}
}