/* 矩阵异动雷达 · 软件详情页 */
.mr-page { background: #f4f8f6; }
.mr-header { background: rgba(7,24,23,.9); border-bottom-color: rgba(94,234,212,.1); box-shadow: 0 12px 35px rgba(3,16,15,.2); backdrop-filter: blur(18px); }
.nav-more.is-current .nav-more-toggle { color: #fff; }
.nav-more-menu a[aria-current="page"] { background: #eefbf7; }
.nav-more-menu a[aria-current="page"] .nav-more-copy strong { color: #0f766e; }
.mr-main { overflow: hidden; }
.mr-hero { position: relative; min-height: 760px; padding: 150px 0 108px; color: #fff; background: radial-gradient(760px 560px at 82% 18%,rgba(45,212,191,.16),transparent 65%),radial-gradient(620px 460px at 6% 86%,rgba(255,101,0,.08),transparent 68%),linear-gradient(135deg,#061412 0%,#0b201f 50%,#071817 100%); }
.mr-hero::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(94,234,212,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.055) 1px,transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom,#000,transparent 88%); }
.mr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(to top,#f4f8f6,transparent); pointer-events: none; }
.mr-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 72px; }
.mr-hero-copy { max-width: 610px; }
.mr-kicker,.mr-overline { display: inline-flex; align-items: center; gap: 9px; color: #8eeade; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.mr-kicker { padding: 8px 13px; margin-bottom: 25px; background: rgba(45,212,191,.08); border: 1px solid rgba(94,234,212,.22); border-radius: 999px; }
.mr-kicker span { width: 7px; height: 7px; background: #5eead4; border-radius: 50%; box-shadow: 0 0 0 5px rgba(94,234,212,.1); animation: mr-pulse 2s ease-out infinite; }
@keyframes mr-pulse { 0% { box-shadow: 0 0 0 0 rgba(94,234,212,.28); } 70%,100% { box-shadow: 0 0 0 9px rgba(94,234,212,0); } }
.mr-hero h1 { margin: 0; font-size: clamp(54px,6.5vw,86px); line-height: 1.02; letter-spacing: -.055em; }
.mr-hero h1 span { display: block; margin-top: 12px; color: #5eead4; font-size: .46em; letter-spacing: -.02em; line-height: 1.25; }
.mr-hero-copy > p { max-width: 600px; margin: 25px 0 0; color: rgba(255,255,255,.64); font-size: 16px; line-height: 1.9; }
.mr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.mr-button-ghost { color: rgba(255,255,255,.9); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); }
.mr-button-ghost:hover { background: rgba(255,255,255,.1); }
.mr-hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.mr-hero-tags span { padding: 7px 11px; color: rgba(255,255,255,.58); font-size: 11px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; }
.mr-rename-note { padding: 13px 15px; margin-top: 24px !important; color: rgba(255,255,255,.52) !important; font-size: 12px !important; line-height: 1.75 !important; background: rgba(255,101,0,.055); border-left: 2px solid rgba(255,138,61,.65); }
.mr-rename-note strong { color: #ffb27d; }
.mr-visual { position: relative; min-width: 0; padding: 30px 0; }
.mr-panel { position: relative; z-index: 2; padding: 17px; background: linear-gradient(145deg,rgba(11,41,38,.96),rgba(6,24,23,.97)); border: 1px solid rgba(94,234,212,.18); border-radius: 24px; box-shadow: 0 45px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04); }
.mr-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 4px 16px; color: rgba(255,255,255,.35); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.mr-panel-head b { display: inline-flex; align-items: center; gap: 7px; color: #68dfad; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.mr-panel-head b i { width: 6px; height: 6px; background: #38d994; border-radius: 50%; box-shadow: 0 0 11px rgba(56,217,148,.85); }
.mr-radar-wrap { display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; gap: 18px; padding: 10px 4px 18px; }
.mr-radar { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; overflow: hidden; background: repeating-radial-gradient(circle at 50% 50%,transparent 0 31px,rgba(94,234,212,.11) 32px 33px),linear-gradient(rgba(94,234,212,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.055) 1px,transparent 1px); background-size: auto,32px 32px,32px 32px; border: 1px solid rgba(94,234,212,.25); border-radius: 50%; box-shadow: inset 0 0 55px rgba(45,212,191,.08),0 0 45px rgba(45,212,191,.06); }
.mr-radar::before,.mr-radar::after { content: ""; position: absolute; background: rgba(94,234,212,.18); }
.mr-radar::before { left: 50%; top: 7%; bottom: 7%; width: 1px; }
.mr-radar::after { top: 50%; left: 7%; right: 7%; height: 1px; }
.mr-sweep { position: absolute; inset: 7%; background: conic-gradient(from 0deg,rgba(94,234,212,.38),transparent 19%,transparent 100%); border-radius: 50%; animation: mr-sweep 5.5s linear infinite; }
@keyframes mr-sweep { to { transform: rotate(360deg); } }
.mr-radar-center { position: absolute; left: 50%; top: 50%; display: grid; place-content: center; width: 82px; height: 82px; text-align: center; background: radial-gradient(circle,#123f3a,#08221f 70%); border: 1px solid rgba(94,234,212,.48); border-radius: 50%; box-shadow: 0 0 0 12px rgba(94,234,212,.035),0 0 34px rgba(45,212,191,.2); transform: translate(-50%,-50%); }
.mr-radar-center strong { color: #8cf3e4; font-size: 20px; line-height: 1; letter-spacing: .08em; }
.mr-radar-center small { margin-top: 5px; color: rgba(255,255,255,.3); font-size: 8px; letter-spacing: .18em; }
.mr-blip { position: absolute; width: 8px; height: 8px; background: #5eead4; border: 2px solid rgba(7,24,23,.8); border-radius: 50%; box-shadow: 0 0 0 5px rgba(94,234,212,.1),0 0 16px rgba(94,234,212,.8); }
.blip-a { top: 22%; right: 25%; }
.blip-b { top: 47%; right: 10%; width: 6px; height: 6px; }
.blip-c { left: 20%; bottom: 28%; background: #ff9a58; box-shadow: 0 0 0 5px rgba(255,154,88,.1),0 0 16px rgba(255,154,88,.75); }
.blip-d { left: 39%; top: 16%; width: 5px; height: 5px; opacity: .7; }
.mr-side-data { display: grid; gap: 9px; }
.mr-side-data > div { padding: 13px 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065); border-radius: 12px; }
.mr-side-data small { display: block; color: rgba(255,255,255,.35); font-size: 9px; }
.mr-side-data strong { display: block; margin-top: 2px; color: #fff; font-size: 24px; line-height: 1.2; }
.mr-side-data em { color: #68dfad; font-size: 9px; font-style: normal; }
.mr-side-data em.warn { color: #ff9a58; }
.mr-side-data em.good { color: #5eead4; }
.mr-panel-foot { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.06); }
.mr-panel-foot span { padding: 8px 4px; color: rgba(255,255,255,.38); font-size: 9px; text-align: center; background: rgba(255,255,255,.025); border-radius: 7px; }
.mr-floating-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; color: rgba(255,255,255,.75); font-size: 10px; background: rgba(9,33,31,.92); border: 1px solid rgba(94,234,212,.16); border-radius: 10px; box-shadow: 0 14px 35px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.mr-floating-tag i { width: 7px; height: 7px; background: #5eead4; border-radius: 50%; box-shadow: 0 0 10px rgba(94,234,212,.75); }
.tag-top { top: 16px; right: -18px; }
.tag-bottom { left: -34px; bottom: 16px; }
.mr-section { padding: 92px 0; }
.mr-features { background: #f4f8f6; }
.mr-section-head { max-width: 670px; margin: 0 auto 40px; text-align: center; }
.mr-section-head > span { color: #0f9f8f; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.mr-section-head h2,.mr-flow-copy h2 { margin: 10px 0 11px; color: #10201e; font-size: clamp(30px,4vw,46px); line-height: 1.2; letter-spacing: -.035em; }
.mr-section-head p,.mr-flow-copy p { margin: 0; color: #6a7c78; font-size: 14px; line-height: 1.9; }
.mr-feature-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 15px; }
.mr-card { padding: 27px 24px; background: #fff; border: 1px solid #e2ece9; border-radius: 19px; box-shadow: 0 10px 30px rgba(19,58,51,.04); transition: transform .24s ease,box-shadow .24s ease,border-color .24s ease; }
.mr-card:hover { transform: translateY(-5px); border-color: rgba(45,212,191,.3); box-shadow: 0 20px 40px rgba(19,58,51,.09); }
.mr-icon { display: grid; place-items: center; width: 48px; height: 48px; color: #0f9f8f; background: #e9faf5; border-radius: 13px; }
.mr-icon svg { width: 23px; height: 23px; }
.mr-card h3 { margin: 20px 0 8px; color: #142522; font-size: 17px; }
.mr-card p { margin: 0; color: #74837f; font-size: 12px; line-height: 1.8; }
.mr-highlights { padding: 0 0 92px; background: #f4f8f6; }
.mr-highlight-shell { padding: 38px 42px 42px; color: #fff; background: radial-gradient(620px 260px at 90% 0%,rgba(94,234,212,.13),transparent 72%),linear-gradient(125deg,#081c1a,#10342f); border: 1px solid rgba(94,234,212,.15); border-radius: 24px; box-shadow: 0 28px 64px rgba(8,49,43,.14); }
.mr-highlight-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mr-highlight-head span { color: #78e8d9; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.mr-highlight-head h2 { margin: 6px 0 0; font-size: 31px; letter-spacing: -.03em; }
.mr-highlight-head p { max-width: 520px; margin: 0; color: rgba(255,255,255,.48); font-size: 13px; line-height: 1.8; }
.mr-highlight-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding-top: 24px; }
.mr-highlight-grid > div { padding: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; }
.mr-highlight-grid strong { display: block; color: #fff; font-size: 14px; }
.mr-highlight-grid span { display: block; margin-top: 7px; color: rgba(255,255,255,.46); font-size: 11px; line-height: 1.7; }
.mr-screens-section { background: #fff; }
.mr-shot-group { margin-top: 38px; }
.mr-shot-group-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 16px; }
.mr-shot-group-head div { display: flex; align-items: baseline; gap: 12px; }
.mr-shot-group-head span { padding: 4px 8px; color: #0f8f82; font-size: 10px; font-weight: 800; background: #e9faf5; border-radius: 6px; }
.mr-shot-group-head strong { color: #172724; font-size: 17px; }
.mr-shot-group-head em { color: #87938f; font-size: 11px; font-style: normal; }
.mr-shot-grid { display: grid; gap: 18px; }
.software-shots { grid-template-columns: repeat(2,minmax(0,1fr)); }
.web-shots { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mr-shot-card { position: relative; display: block; overflow: hidden; background: #fff; border: 1px solid #e1ece8; border-radius: 18px; box-shadow: 0 12px 32px rgba(18,60,52,.06); transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.mr-shot-card:hover { transform: translateY(-4px); border-color: rgba(45,212,191,.32); box-shadow: 0 20px 42px rgba(18,60,52,.12); }
.mr-shot-card img { display: block; width: 100%; object-fit: cover; object-position: top center; background: #091512; }
.software-shots .mr-shot-card img { aspect-ratio: 2 / 1; }
.web-shots .mr-shot-card img { aspect-ratio: 16 / 10; }
.mr-shot-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 9px; color: #fff; font-size: 10px; font-weight: 700; background: rgba(7,24,23,.8); border: 1px solid rgba(94,234,212,.28); border-radius: 999px; backdrop-filter: blur(9px); }
.mr-shot-card > div { padding: 16px 17px 18px; }
.mr-shot-card strong { display: block; color: #152622; font-size: 14px; }
.mr-shot-card span:not(.mr-shot-badge) { display: block; margin-top: 5px; color: #778681; font-size: 11px; line-height: 1.65; }
.mr-shot-note { margin: 24px 0 0; padding: 12px 14px; color: #7c8b86; font-size: 11px; text-align: center; background: #f6faf8; border: 1px solid #e6efec; border-radius: 10px; }
.mr-flow-section { background: linear-gradient(180deg,#fff 0%,#f8fbfa 100%); }
.mr-flow-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: start; }
.mr-flow-copy { position: sticky; top: 112px; }
.mr-overline { color: #0f9f8f; }
.mr-flow-copy h2 { margin-top: 12px; }
.mr-text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: #0f8f82; font-size: 13px; font-weight: 700; }
.mr-text-link span { font-size: 18px; transition: transform .2s ease; }
.mr-text-link:hover span { transform: translateX(4px); }
.mr-flow-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.mr-flow-list li { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; background: #fff; border: 1px solid #e4eeeb; border-radius: 17px; }
.mr-flow-list b { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: #0f9f8f; font-size: 11px; background: #e9faf5; border-radius: 11px; }
.mr-flow-list h3 { margin: 1px 0 5px; color: #162724; font-size: 16px; }
.mr-flow-list p { margin: 0; color: #74837f; font-size: 12px; line-height: 1.75; }
.mr-access { padding: 0 0 90px; background: #f8fbfa; }
.mr-access-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 42px 48px; color: #fff; background: radial-gradient(600px 240px at 88% 0%,rgba(94,234,212,.16),transparent 70%),linear-gradient(120deg,#0a2522,#103a36); border-radius: 24px; box-shadow: 0 28px 60px rgba(8,49,43,.16); }
.mr-access-inner > div:first-child > span { color: #78e8d9; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.mr-access-inner h2 { margin: 8px 0 7px; font-size: clamp(24px,3vw,36px); }
.mr-access-inner p { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.mr-access-actions { display: flex; flex: 0 0 auto; gap: 11px; }
.mr-footer { background: #061311; }
@media (max-width: 1080px) {
  .mr-hero-grid { gap: 38px; }
  .mr-radar-wrap { grid-template-columns: 1fr; }
  .mr-side-data { grid-template-columns: repeat(3,1fr); }
  .mr-side-data > div { padding: 10px; }
  .mr-side-data strong { font-size: 18px; }
  .mr-feature-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .mr-hero { padding-top: 126px; }
  .mr-hero-grid,.mr-flow-grid { grid-template-columns: 1fr; }
  .mr-hero-copy { max-width: 720px; text-align: center; margin: 0 auto; }
  .mr-hero-actions,.mr-hero-tags { justify-content: center; }
  .mr-rename-note { text-align: left; }
  .mr-visual { width: min(680px,100%); margin: 0 auto; }
  .mr-feature-grid { grid-template-columns: 1fr 1fr; }
  .mr-flow-copy { position: static; text-align: center; }
  .mr-highlight-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .mr-highlight-grid { grid-template-columns: 1fr 1fr; }
  .web-shots { grid-template-columns: 1fr 1fr; }
  .mr-access-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .mr-hero { padding: 108px 0 78px; }
  .mr-hero h1 { font-size: 49px; }
  .mr-hero-actions .button { width: 100%; }
  .mr-radar-wrap { padding-inline: 0; }
  .tag-top { right: 5px; }
  .tag-bottom { left: 5px; }
  .mr-section { padding: 72px 0; }
  .mr-feature-grid { grid-template-columns: 1fr; }
  .mr-highlight-shell { padding: 28px 20px; }
  .mr-highlight-grid,.software-shots,.web-shots { grid-template-columns: 1fr; }
  .mr-shot-group-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .mr-access { padding-bottom: 70px; }
  .mr-access-inner { padding: 31px 24px; }
  .mr-access-actions { width: 100%; flex-direction: column; }
  .mr-access-actions .button { width: 100%; }
}
@media (max-width: 520px) {
  .mr-hero h1 { font-size: 42px; }
  .mr-hero-copy > p { font-size: 14px; }
  .mr-panel { padding: 12px; border-radius: 18px; }
  .mr-side-data { grid-template-columns: 1fr; }
  .mr-side-data > div { display: flex; align-items: baseline; justify-content: space-between; }
  .mr-side-data strong { margin-left: auto; }
  .mr-side-data em { margin-left: 8px; }
  .mr-floating-tag { display: none; }
  .mr-panel-foot { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-sweep,.mr-kicker span { animation: none; }
}