/* E · 安全态势感知平台：只有这一页用的模块。公共版式在 ../../case-kit.css。
   方案见 docs/PLAN-E页安全态势落站-2026-10-21.md。
   首屏视频照 F 页 brand.css 的 bd-hero 重写一份（sa- 前缀），不改 F 页；
   图示、录屏墙、解剖标注照 D 页 agent.css，交互脚本直接用 ../case-agent/agent.js。
   大屏语义色取自原型 proto/index.html：高危 #FF4D5E、中危 #FF9A3C、低危 #FFBE00、进行中 #3490E4、已阻断 #2BAE7C、已确认 #7797B5 */
:where(.cx-sec) figure{margin:0}
.sa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ 封面：宣传片铺满首屏，静音循环 ============
   视频层固定在视口上，本节只占一屏；往下滚时 case-kit 整屏换色（黑混到白），sa.js 让视频按同一进度淡出。
   片子全程是深色画面，导航在首屏固定用白字，不用 F 页的亮度表。 */
.sa-hero{padding:0;height:100vh;height:100svh}
.sa-hero-m{position:fixed;inset:0;overflow:hidden;background:#050b16}
.sa-hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-aspect-ratio:16/10){.sa-hero-v{object-fit:contain}}
.sa-hero-ctl{position:absolute;z-index:2;right:max(var(--g),calc((100% - var(--w)) / 2));bottom:40px;display:flex;gap:10px}
.sa-hero-ctl button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(18,18,20,.64);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s var(--ease)}
.sa-hero-ctl button:hover{background:rgba(18,18,20,.82)}
.sa-hero-ctl button:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px rgba(18,18,20,.7)}
.sa-hero-ctl .i-play,.sa-hero-ctl .i-on,.sa-hero-play.is-paused .i-pause,.sa-hero-snd.is-on .i-off{display:none}
.sa-hero-play.is-paused .i-play,.sa-hero-snd.is-on .i-on{display:block}
body.sa-on-hero .nav{--t3:rgba(244,242,238,.86)}
body.sa-on-hero .nav .brand,body.sa-on-hero .nav .tab{text-shadow:0 0 3px rgba(0,0,0,.45),0 0 14px rgba(0,0,0,.55)}
.toc{transition:opacity .35s var(--ease)}
body.sa-on-hero .toc:not(:focus-within){opacity:0;pointer-events:none}

/* ============ 概况：标题从封面挪下来 ============ */
/* 顶部留 38vh：标题在转场后半段才滚进画面，不压在还没淡掉的片内字幕上；透明度由 sa.js 跟转场进度走 */
.sa-intro{padding:38vh 0 120px}
.sa-k{display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-weight:200;font-size:var(--fs-kicker);line-height:1;color:var(--c2)}
.sa-k span{color:var(--red)}
.sa-hero-t{display:flex;flex-direction:column}
.sa-hero-t h1{margin-top:20px;font-size:var(--fs-display);line-height:1.05;font-weight:700;letter-spacing:-.02em}
.sa-hero-s{margin-top:16px;font-size:var(--fs-lead);color:var(--c2)}
.sa-say{margin-top:96px;font-size:clamp(24px,2.9vw,40px);line-height:1.6;font-weight:500;letter-spacing:-.005em}
.sa-intro .statr{margin-top:96px}
.sa-intro .meta{margin-top:72px}
.proto-note{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:#8b8f95}
.proto-note::before{content:"";width:6px;height:6px;border-radius:50%;background:#8b8f95}

/* ============ 窗口：截图和录屏共用 ============ */
.win{position:relative;border-radius:12px;overflow:hidden;background:#050b16;
  box-shadow:0 0 0 1px rgba(17,18,20,.08),0 24px 48px rgba(20,24,40,.16),0 8px 18px rgba(20,24,40,.1)}
.win img,.win video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#050b16}

/* ============ 图示（自画 SVG），文字类照 D 页 ============ */
.dg{max-width:1080px;margin-top:56px}
.dg svg{display:block;width:100%;height:auto;overflow:visible}
.dg .t-name{font:600 16px var(--sans);fill:var(--c1)}
.dg .t-node{font:600 13.5px var(--sans);fill:var(--c1)}
.dg .t-sub{font:400 12.5px var(--sans);fill:var(--c3)}
.dg .t-ask{font:500 14px var(--sans);fill:var(--c1)}
.dg .t-me{font:600 13.5px var(--sans);fill:var(--red)}
.dg .t-mono{font:500 10px var(--mono);letter-spacing:.14em;fill:var(--c3)}
.dg .t-note{font:500 12px var(--sans);fill:var(--c3)}
.dg .t-bad{font:500 12px var(--sans);fill:var(--red)}
.dg .t-inv{font:600 13px var(--sans);fill:#fff}
.dg .t-invs{font:400 11.5px var(--sans);fill:rgba(255,255,255,.62)}
.dg figcaption{margin-top:16px;text-align:center;font-size:var(--fs-cap);line-height:1.6;color:var(--c3)}
.dg-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}

/* 03 流程下的四张局部：等高一排，按原比例 */
/* 四张局部：总量条是宽条，单独通栏；其余三张同高深色底框，图片等比居中 */
.sa-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px;margin-top:48px}
.sa-steps figure{min-width:0}
.sa-steps figure:first-child{grid-column:1/-1}
.sa-steps .sa-crop{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:clamp(220px,19vw,280px);padding:20px;border-radius:14px;background:#050b16;box-shadow:0 0 0 1px rgba(17,18,20,.08),0 10px 20px rgba(20,24,40,.1)}
.sa-steps figure:first-child .sa-crop{height:auto;padding:28px 32px}
.sa-steps img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:4px}
.sa-steps figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.sa-steps figcaption b{display:block;margin-bottom:2px;font:600 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--red)}

/* ============ 04 颜色即状态（深色段） ============ */
.sa-sw{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:1080px;margin-top:56px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08)}
.sa-sw li{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;background:#141516}
.sa-sw i{width:36px;height:6px;border-radius:3px;background:var(--sc)}
.sa-sw b{font-size:17px;font-weight:700;color:#F4F2EE}
.sa-sw b small{margin-left:8px;font:500 11px var(--mono);letter-spacing:.06em;color:rgba(244,242,238,.5)}
.sa-sw span{font-size:var(--fs-cap);line-height:1.6;color:rgba(244,242,238,.66)}
.sa-q{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:1080px;margin-top:40px}
.sa-q div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.sa-q dt{font:500 12.5px/1.6 var(--mono);color:rgba(244,242,238,.56)}
.sa-q dd{font-size:15px;line-height:1.6;color:#F4F2EE}
.sa-q .act dd{color:#FF8D9D}

/* ============ 05 解剖标注（交互照 D 页，截图改 16:9） ============ */
.anat{--ac:var(--red);--ac-30:color-mix(in oklab,var(--ac) 34%,transparent);--ac-15:color-mix(in oklab,var(--ac) 16%,transparent);--ac-06:color-mix(in oklab,var(--ac) 7%,transparent);
  --an-line:rgba(17,18,20,.09);
  position:relative;max-width:1200px;margin-top:56px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1px var(--an-line),0 24px 48px -24px rgba(40,20,16,.18)}
.an-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--an-line)}
.an-t{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--c3)}
.an-r{display:flex;align-items:center;gap:10px}
.an-hint{font-size:12px;color:var(--c3);white-space:nowrap;opacity:0;transition:opacity .2s}
.anat.on .an-hint{opacity:1}
.an-ghost,.an-sw{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;font-size:12.5px;color:var(--c2);
  box-shadow:inset 0 0 0 1px var(--an-line);transition:color .2s,box-shadow .2s}
.an-ghost:hover,.an-sw:hover{color:var(--c1);box-shadow:inset 0 0 0 1px rgba(17,18,20,.2)}
.an-ghost:focus-visible,.an-sw:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.an-ghost svg{width:10px;height:10px;fill:currentColor}
.an-sw{padding:0 4px 0 10px}
.an-sw i{position:relative;width:30px;height:18px;border-radius:99px;background:#d9d6d1;transition:background .25s}
.an-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.34,1.5,.64,1)}
.an-sw[aria-checked=true] i{background:var(--ac)}
.an-sw[aria-checked=true] i::after{transform:translateX(12px)}
.an-stage{position:relative}
.an-stage img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#050b16}
.an-layer{position:absolute;inset:0;pointer-events:none}
.an-box{position:absolute;left:calc(var(--x) + 3px);top:calc(var(--y) + 3px);width:calc(var(--w) - 6px);height:calc(var(--h) - 6px);border-radius:8px;
  border:1px dashed rgba(255,255,255,.4);opacity:0;transition:opacity .18s var(--ease),border-color .18s,background-color .18s,box-shadow .18s}
.an-badge{position:absolute;left:calc(var(--x) + 3px);top:calc(var(--y) + 3px);min-width:20px;height:20px;padding:0 5px;border-radius:6px;
  font:600 11px/20px var(--mono);text-align:center;color:#fff;background:color-mix(in oklab,var(--ac) 70%,transparent);opacity:0;transform:translate(-30%,-30%) scale(.3);
  transition:background .18s,opacity .18s,box-shadow .18s;will-change:transform}
.anat.on .an-box{opacity:1;pointer-events:auto;cursor:pointer}
.anat.on .an-badge{opacity:1;transform:translate(-30%,-30%) scale(1)}
.anat.focus .an-box{opacity:.25}
.anat.focus .an-badge{opacity:.35}
.an-box.act{opacity:1!important;border:1.5px solid #FF8D9D;background:rgba(255,141,157,.08);box-shadow:0 0 0 3px rgba(255,141,157,.22)}
.an-badge.act{opacity:1!important;background:var(--ac)}
.an-box.pin{border:1.5px solid #FF8D9D}
.anat.focus .an-box.pin:not(.act){opacity:.55!important}
.an-badge.pin{opacity:1!important;background:var(--ac);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ac)}
.an-legend{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--an-line)}
.an-legend > li{display:flex;gap:12px;padding:16px 18px;cursor:pointer;outline:none;transition:background .16s,box-shadow .16s}
.an-legend > li:not(:nth-child(3n+1)){border-left:1px solid var(--an-line)}
.an-legend > li:nth-child(n+4){border-top:1px solid var(--an-line)}
.an-legend > li.act,.an-legend > li:focus-visible{background:#faf7f4}
.an-legend > li.pin{background:#faf7f4;box-shadow:inset 2px 0 0 var(--ac)}
.an-legend .no{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font:600 11px/1 var(--mono);color:#fff;background:var(--ac);margin-top:2px}
.an-legend b{display:block;margin-bottom:4px;font:500 12.5px/1.4 var(--mono);color:var(--c1)}
.an-legend p{font-size:var(--fs-card);line-height:1.65;color:var(--c2)}
/* 细节栏：固定在图例下方，高度按最长一条预留，切换时页面不跳 */
.an-more{display:none}
.an-detail{display:flex;align-items:center;min-height:206px;padding:24px 28px;border-top:1px solid var(--an-line);border-radius:0 0 16px 16px;background:#faf7f4}
.an-d-hint{width:100%;text-align:center;font-size:var(--fs-cap);color:var(--c3)}
.an-detail.has{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;align-items:start}
.an-d-h .no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font:600 11px/1 var(--mono);color:#fff;background:var(--ac);vertical-align:2px;margin-right:8px}
.an-d-h b{font:500 13px/1.4 var(--mono);color:var(--c1)}
.an-d-h span:last-child{display:block;margin-top:8px;font-size:var(--fs-cap);line-height:1.65;color:var(--c2)}
.an-detail ul{list-style:none;display:grid;gap:10px}
.an-detail ul li{position:relative;padding-left:16px;font-size:var(--fs-card);line-height:1.7;color:var(--c1)}
.an-detail ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ac)}
@media (prefers-reduced-motion:no-preference){.an-detail.has ul li{animation:anIn .32s cubic-bezier(.2,.8,.2,1) both}.an-detail.has ul li:nth-child(2){animation-delay:.04s}.an-detail.has ul li:nth-child(3){animation-delay:.08s}}
@keyframes anIn{from{opacity:0;transform:translateY(4px)}}
.an-cursor{position:fixed;left:0;top:0;z-index:60;width:20px;height:20px;pointer-events:none;opacity:0;transition:opacity .2s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* 三档屏宽：宽度按真实像素比例排，1920 最宽 */
.sa-res{display:grid;grid-template-columns:1920fr 1366fr 1024fr;gap:20px;align-items:end;max-width:1200px;margin-top:72px}
.sa-res figure{min-width:0}
.sa-res .win img{aspect-ratio:auto}
.sa-res figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.sa-res figcaption b{display:block;font:600 12.5px/1.4 var(--mono);color:var(--c1)}

/* ============ 06 录屏墙（照 D 页） ============ */
.wall{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);margin-top:48px;max-width:1200px}
.wall figure{min-width:0}
.wall .win{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 14px 28px rgba(20,24,40,.12)}
.wall figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.wall figcaption b{color:var(--c1);font-weight:700;margin-right:6px}
.wall + .wall{margin-top:clamp(20px,2.4vw,36px)}
.open-proto{display:inline-flex;align-items:center;gap:10px;margin-top:48px;padding:12px 20px;border-radius:99px;background:var(--c1);color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.open-proto svg{width:14px;height:14px}
.cx-sec[data-tone="dark"] .open-proto{background:#F4F2EE;color:#111214}
.lightbox video{display:block;flex:none;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);border-radius:10px;background:#050b16;box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* ============ 07 组件库（深色段）：Figma 导出图，图本身是深色底 ============ */
.ds-num{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1080px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.ds-num strong{display:block;font-size:clamp(36px,3.6vw,52px);line-height:1;font-weight:700;letter-spacing:-.02em;color:#F4F2EE;font-variant-numeric:tabular-nums}
.ds-num span{display:block;margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:rgba(244,242,238,.62)}
.ds-fig{max-width:1200px;margin-top:40px}
.ds-fig + .ds-fig{margin-top:20px}
.ds-fig .ds-img,.ds-two .ds-img{border-radius:12px;overflow:hidden;background:#040b16;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.ds-fig img,.ds-two img{display:block;width:100%;height:auto}
.ds-fig figcaption,.ds-two figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:rgba(244,242,238,.66)}
.ds-fig figcaption b,.ds-two figcaption b{font:600 12.5px/1.4 var(--mono);color:#F4F2EE;margin-right:8px}
.ds-two{display:grid;grid-template-columns:1.09fr 1fr;gap:20px;align-items:start;max-width:1200px;margin-top:20px}
.ds-two figure{min-width:0}

/* ============ 09 同类项目：城脉宣传片，点了才播 ============ */
.sa-cp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;max-width:1200px;margin-top:56px}
.sa-cp video{aspect-ratio:16/9}
.sa-cp-t h3{font-size:22px;font-weight:700;line-height:1.4}
.sa-cp-t h3 small{display:block;margin-top:4px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--c3)}
.sa-cp-t p{margin-top:16px;font-size:var(--fs-body);line-height:1.9;color:var(--c2)}
.sa-cp-t .open-proto{margin-top:28px}
.sa-cp figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}

.c-out .quote{margin-top:120px}

/* 新旧对照：照 A 页 console.css 的 tn 行（旧图灰阶，悬停回色） */
.tn{display:grid;gap:20px;margin-top:56px}
.tn-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"h h" "o n";gap:14px 20px;padding:24px 28px 22px;border-radius:28px;background:var(--card)}
.tn-row h3{grid-area:h;font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.tn-old{grid-area:o}
.tn-new{grid-area:n}
.tn figure{margin:0;min-width:0}
.tn .image-zoom{height:clamp(220px,21vw,320px);border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--card-line)}
.tn .image-zoom img{width:100%;height:100%;object-fit:contain}
.tn-old .image-zoom img{filter:grayscale(1);opacity:.85;transition:filter .5s,opacity .5s}
.tn-old .image-zoom:hover img{filter:grayscale(.3);opacity:1}
.tn figcaption{margin-top:10px;text-align:center;font-size:14px;line-height:1.6;color:var(--c2)}
.tn figcaption span{display:block;margin-bottom:2px;font-size:12.5px;font-weight:600;color:var(--c3)}
.tn-new figcaption span{color:var(--red)}

@media (max-width:820px){
  .sa-hero-ctl{bottom:96px}
  .sa-hero-t h1{font-size:44px}
  .sa-steps,.sa-res,.ds-two,.sa-cp{grid-template-columns:minmax(0,1fr)}
  .sa-sw{grid-template-columns:minmax(0,1fr)}
  .sa-q{grid-template-columns:minmax(0,1fr)}
  .ds-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an-hint{display:none}
  .an-legend{grid-template-columns:minmax(0,1fr)}
  .an-legend > li:not(:nth-child(3n+1)){border-left:0}
  .an-legend > li+li{border-top:1px solid var(--an-line)}
  .an-detail.has{grid-template-columns:minmax(0,1fr);gap:16px}
  .wall{--cols:1}
  .dg-scroll svg{width:820px;max-width:none}
  .open-proto{display:none}
  .lightbox{padding:72px 12px 40px}
  .lightbox video{box-shadow:0 4px 8px rgba(0,0,0,.4)}
}