:root {
    --bg: #050912;
    --bg-soft: #09111d;
    --panel: #0c1624;
    --panel-2: #101d2d;
    --line: #20354a;
    --line-bright: #315b7e;
    --text: #eef6ff;
    --muted: #91a4b8;
    --cyan: #32c7f4;
    --blue: #397eff;
    --green: #40d59b;
    --amber: #f2b84b;
    --coral: #ff766b;
    --purple: #a687ff;
    --font: "Noto Sans SC", sans-serif;
    --display: "Space Grotesk", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none!important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
.shell { width: min(1460px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 68px; padding: 0 28px; position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: 240px 1fr 240px; align-items: center; border-bottom: 1px solid rgba(76, 120, 158, .3); background: rgba(5, 9, 18, .92); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand-logo { display: block; width: 164px; height: auto; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font: 700 14px var(--display); clip-path: polygon(25% 0, 75% 0, 100% 22%, 100% 78%, 75% 100%, 25% 100%, 0 78%, 0 22%); background: #0b1d2d; }
.brand b { display: block; font: 700 18px var(--display); }
.brand small { display: block; color: var(--muted); font-size: 10px; margin-top: 1px; }
.main-tabs { height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 4px; scrollbar-width: none; }
.main-tabs::-webkit-scrollbar { display: none; }
.main-tabs .app-nav-link { display: flex; align-items: center; padding: 0 18px; color: var(--muted); text-decoration: none; white-space: nowrap; font: inherit; }
.main-tabs .app-nav-link:hover { color: var(--text); }
@media (min-width: 1101px) { .site-header:has(.app-nav-link) { grid-template-columns: 175px minmax(0, 1fr) 140px; padding-inline: 20px; } .site-header:has(.app-nav-link) .main-tabs button { padding-inline: 10px; } }
@media (max-width: 1100px) { .site-header:has(.app-nav-link) { height: auto; min-height: 68px; grid-template-columns: 1fr auto; padding-top: 12px; } .site-header:has(.app-nav-link) .main-tabs { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; justify-content: flex-start; height: 48px; } .site-header:has(.app-nav-link) .header-status { grid-column: 2; grid-row: 1; } }
.main-tabs button { border: 0; color: var(--muted); background: transparent; padding: 0 18px; position: relative; white-space: nowrap; }
.main-tabs button:hover, .main-tabs button.active { color: var(--text); }
.main-tabs button.active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.header-status { justify-self: end; font: 600 11px var(--display); color: var(--muted); }
.header-status span, .live-dot, .online-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); margin-right: 8px; }
.tab-panel { display: none; min-height: 80vh; }
.tab-panel.active { display: block; animation: reveal .35s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.hero { height: calc(100vh - 68px); min-height: 650px; max-height: 900px; position: relative; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(3, 8, 15, .98) 0%, rgba(3, 8, 15, .81) 38%, rgba(3, 8, 15, .18) 72%), linear-gradient(0deg, var(--bg) 0%, transparent 30%), url("img/disxera-device-2.jpg"); background-size: cover; background-position: center; transform: scale(1.015); animation: hero-in 1.2s ease-out; }
@keyframes hero-in { from { transform: scale(1.07); opacity: .5; } }
.hero-media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(66, 143, 196, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(66, 143, 196, .07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 68%); }
.hero-content { width: min(700px, 50vw); margin-left: max(6vw, calc((100vw - 1460px) / 2)); position: relative; z-index: 1; }
.eyebrow { color: var(--cyan); font: 600 11px var(--display); letter-spacing: 2.4px; margin: 0 0 16px; }
.hero h1 { margin: 0; font: 700 clamp(52px, 6vw, 92px)/.95 var(--display); letter-spacing: 0; }
.hero h1 span { color: var(--cyan); display: block; margin-top: 9px; }
.hero h1 .brand-name-zh { color: var(--text); margin-top: 0; }
html[lang="en"] .hero h1 .brand-name-zh { display: none; }
.hero-lead { max-width: 650px; font-size: 19px; line-height: 1.85; color: #b9c9d7; margin: 28px 0 32px; }
.hero-actions, .chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.primary-button, .ghost-button, .text-button, .icon-button { border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); min-height: 40px; padding: 0 17px; border-radius: 3px; }
.primary-button { background: var(--cyan); color: #03131b; font-weight: 700; border-color: var(--cyan); }
.primary-button:hover { background: #75dcfb; }
.ghost-button { background: rgba(11, 28, 44, .72); border-color: var(--line-bright); }
.ghost-button:hover { border-color: var(--cyan); color: var(--cyan); }
.compact { min-height: 34px; padding: 0 12px; font-size: 12px; }
.icon-button { width: 36px; height: 36px; min-height: 0; padding: 0; background: transparent; border-color: var(--line); }
.text-button { padding: 0; background: transparent; color: var(--cyan); }
.hero-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(100, 153, 191, .28); margin-top: 52px; padding-top: 22px; }
.hero-metrics div { padding-right: 20px; }
.hero-metrics dt { font: 600 19px var(--display); }
.hero-metrics dd { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.scroll-cue { position: absolute; left: 30px; bottom: 28px; color: #6e8296; font: 500 9px var(--display); writing-mode: vertical-rl; letter-spacing: 2px; }
.scroll-cue span { display: inline-block; height: 44px; width: 1px; background: var(--cyan); margin-top: 10px; }

.section { padding-top: 104px; }
.section-heading { display: flex; justify-content: space-between; gap: 60px; align-items: flex-end; margin-bottom: 34px; }
.section-heading h2 { font: 600 clamp(30px, 3vw, 46px)/1.15 var(--display); margin: 0; }
.section-heading > p { width: min(560px, 46%); margin: 0; color: var(--muted); line-height: 1.9; }
.product-grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 18px; }
.product-card { position: relative; border: 1px solid var(--line); background: var(--panel); min-height: 520px; overflow: hidden; border-radius: 6px; }
.suite-card { padding: 42px; display: flex; flex-direction: column; }
.product-index { color: #5f7d96; font: 600 10px var(--display); letter-spacing: 1.7px; }
.product-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-bright); color: var(--cyan); background: #0b1b2a; margin: 62px 0 20px; }
.product-icon svg { width: 23px; height: 23px; }
.product-card h3 { font: 600 38px var(--display); margin: 0 0 14px; }
.product-card p { color: var(--muted); line-height: 1.85; }
.spec-list { padding: 18px 0 24px; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.spec-list li { color: #b0bfcb; padding: 6px 0; }
.spec-list span { display: inline-block; color: var(--text); width: 110px; font-family: var(--display); }
.suite-card .text-button { margin-top: auto; align-self: flex-start; }
.mic-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.mic-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 10, 17, .97), rgba(4, 10, 17, .65) 55%, transparent); }
.mic-card .product-copy { width: 52%; padding: 42px; position: relative; z-index: 1; }
.mic-card .product-icon { margin-top: 66px; }
.chip-row span { padding: 6px 9px; border: 1px solid var(--line); color: #a8c0d2; font-size: 11px; background: rgba(5, 13, 22, .65); }

.plc-replacement { padding-bottom: 104px; border-bottom: 1px solid rgba(49,91,126,.35); }
.replacement-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 18px; align-items: stretch; }
.replacement-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.replacement-card { --replacement-accent: var(--cyan); min-width: 0; min-height: 265px; padding: 24px; display: flex; flex-direction: column; background: linear-gradient(145deg, color-mix(in srgb, var(--replacement-accent), transparent 94%), var(--panel) 55%); box-shadow: inset 0 2px var(--replacement-accent); }
.replacement-card.safety-value { --replacement-accent: var(--green); }
.replacement-card.redundancy-value { --replacement-accent: var(--amber); }
.replacement-card.motion-value { --replacement-accent: var(--coral); }
.replacement-card header { display: flex; align-items: center; justify-content: space-between; color: var(--replacement-accent); font: 600 9px var(--display); letter-spacing: 1.2px; }
.replacement-card header svg { width: 23px; height: 23px; }
.replacement-card h3 { margin: 28px 0 10px; font: 600 18px/1.35 var(--display); }
.replacement-card p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.replacement-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.replacement-tags span { padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--replacement-accent), transparent 58%); color: var(--replacement-accent); font-size: 9px; }
.replacement-economics { min-width: 0; padding: 27px; border: 1px solid var(--line-bright); background: #081522; }
.replacement-economics > header h3 { margin: 0 0 10px; font: 600 24px/1.3 var(--display); }
.replacement-economics > header > span { display: block; color: var(--muted); font-size: 10px; line-height: 1.75; }
.economics-table { margin-top: 24px; border: 1px solid var(--line); }
.economics-table > div { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 12px; padding: 13px 12px; border-top: 1px solid var(--line); }
.economics-table > div:first-child { border-top: 0; }
.economics-table .economics-head { background: #0d2030; color: #6f8ca2; font: 600 8px var(--display); }
.economics-table strong { color: var(--text); font-size: 10px; }
.economics-table span { color: var(--muted); font-size: 9px; line-height: 1.55; }
.economics-table span:last-child { color: #aee9d2; }
.ai-native-note { display: grid; grid-template-columns: 34px 1fr; gap: 13px; margin-top: 20px; padding: 16px; border-left: 2px solid var(--purple); background: rgba(166,135,255,.07); }
.ai-native-note > svg { color: var(--purple); }
.ai-native-note b { font-size: 12px; }
.ai-native-note p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }

.standard-foundation { display: grid; grid-template-columns: 150px 1.4fr 1fr; gap: 28px; align-items: stretch; }
.standard-copy, .standard-model { min-width: 0; }
.standard-code { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--cyan); background: #081827; color: var(--cyan); font: 700 29px/1.15 var(--display); text-align: center; }
.standard-code small { display: block; margin-top: 11px; color: var(--text); font-size: 14px; }
.standard-copy { padding: 24px 0; }
.standard-copy h2 { margin: 0 0 17px; font: 600 30px/1.25 var(--display); }
.standard-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.9; margin: 10px 0; }
.standard-actions { display: flex; align-items: center; gap: 16px; margin-top: 21px; }
.standard-actions a { text-decoration: none; }
.standard-actions > span { color: #688298; font-size: 9px; }
.standard-model { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--line); padding-left: 28px; }
.standard-model > div { width: 100%; padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.standard-model b, .standard-model span { display: block; }
.standard-model b { color: var(--cyan); font-size: 12px; }
.standard-model span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.standard-model > svg { margin: 8px; color: #4d6f87; transform: rotate(90deg); }

.overview-model-flow, .overview-boundary, .overview-rollout { border-top: 1px solid rgba(49,91,126,.35); }
.overview-rollout { padding-bottom: 104px; }
.model-flow-track { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; align-items: stretch; gap: 10px; }
.model-flow-track article { min-width: 0; min-height: 282px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); background: linear-gradient(155deg, #0d1b2a, #09131f); position: relative; }
.model-flow-track article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--flow-accent); }
.model-flow-track article:nth-of-type(1) { --flow-accent: var(--cyan); }.model-flow-track article:nth-of-type(2) { --flow-accent: var(--purple); }.model-flow-track article:nth-of-type(3) { --flow-accent: var(--amber); }.model-flow-track article.flow-core { --flow-accent: var(--green); background: linear-gradient(155deg, rgba(64,213,155,.12), #091a1d); border-color: rgba(64,213,155,.5); }
.flow-number { color: var(--flow-accent); font: 600 11px var(--display); letter-spacing: 1.5px; }
.model-flow-track article > svg:not(.flow-arrow) { width: 25px; height: 25px; margin: 26px 0 17px; color: var(--flow-accent); }
.model-flow-track article small { color: #6e899d; font: 600 8px var(--display); letter-spacing: 1.5px; }
.model-flow-track article h3 { margin: 7px 0 9px; font: 600 17px var(--display); }
.model-flow-track article p { min-height: 70px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.75; }
.model-flow-track article .text-button { align-self: flex-start; margin-top: auto; font-size: 10px; }
.model-flow-track .flow-arrow { align-self: center; width: 16px; color: #4c6b80; }
.boundary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: stretch; }
.boundary-panel { min-height: 315px; padding: 24px 26px; border: 1px solid var(--line); background: var(--panel); }
.boundary-panel.ot-boundary { border-top: 2px solid var(--cyan); }.boundary-panel.data-boundary { border-top: 2px solid var(--green); }
.boundary-panel header { display: flex; justify-content: space-between; align-items: center; }.boundary-panel header > svg { width: 24px; color: var(--boundary-color); }.ot-boundary { --boundary-color: var(--cyan); }.data-boundary { --boundary-color: var(--green); }
.boundary-kicker { color: var(--boundary-color); font: 600 9px var(--display); letter-spacing: 1.2px; }
.boundary-panel h3 { margin: 28px 0 9px; font: 600 18px var(--display); }.boundary-panel p { min-height: 50px; max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.boundary-list { display: grid; gap: 9px; margin: 20px 0 22px; padding-top: 15px; border-top: 1px solid var(--line); }.boundary-list span { display: flex; align-items: center; gap: 8px; color: #b7c7d4; font-size: 10px; }.boundary-list svg { width: 14px; color: var(--boundary-color); }
.boundary-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--cyan); text-align: center; font: 600 8px/1.6 var(--display); }.boundary-bridge::before, .boundary-bridge::after { content: ""; width: 1px; flex: 1; background: linear-gradient(var(--line), var(--cyan), var(--line)); }.boundary-bridge svg { width: 24px; height: 24px; }
.rollout-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .65fr); gap: 18px; }
.rollout-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); background: #08131f; padding: 28px 20px 23px; }.route-line { position: absolute; top: 54px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--purple), var(--green)); opacity: .65; }.rollout-route article { min-width: 0; position: relative; padding: 0 14px; }.rollout-route article + article { border-left: 1px solid var(--line); }.rollout-route article::before { content: ""; position: relative; z-index: 1; display: block; width: 9px; height: 9px; margin: 21px 0 25px; border: 2px solid var(--cyan); border-radius: 50%; background: #08131f; }.rollout-route article:nth-of-type(2)::before { border-color: var(--purple); }.rollout-route article:nth-of-type(3)::before { border-color: var(--green); }.rollout-route article:nth-of-type(4)::before { border-color: var(--amber); }
.rollout-route article span, .rollout-route article b, .rollout-route article p, .rollout-route article strong { display: block; }.rollout-route article span { color: #718da1; font: 600 8px var(--display); letter-spacing: 1px; }.rollout-route article b { margin-top: 7px; font: 600 14px var(--display); }.rollout-route article p { min-height: 56px; margin: 10px 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.rollout-route article strong { color: var(--cyan); font: 600 10px var(--display); }
.rollout-signal { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; align-content: start; border: 1px solid var(--line); background: var(--line); }.rollout-signal div { min-height: 112px; padding: 17px; background: var(--panel); }.rollout-signal small, .rollout-signal span { display: block; color: var(--muted); font-size: 9px; }.rollout-signal b { display: block; margin: 11px 0 4px; color: var(--cyan); font: 600 25px var(--display); }.rollout-signal button { grid-column: 1 / -1; margin: 1px; border-radius: 0; }

.architecture-layout { display: grid; grid-template-columns: 150px 1fr 180px; gap: 14px; padding: 18px; border: 1px solid var(--line); background: #07101b; }
.architecture-original { margin: 0 0 18px; border: 1px solid var(--line); background: #02050a; }
.architecture-original img { display: block; width: 100%; height: auto; }
.architecture-original figcaption { min-height: 58px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--line); }
.architecture-original figcaption span { color: var(--cyan); font: 600 9px var(--display); letter-spacing: 1.4px; }
.architecture-original figcaption b { font-size: 12px; }
.architecture-original figcaption small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.source-rail, .protocol-rail { border: 1px solid var(--line); padding: 17px 12px; display: flex; flex-direction: column; gap: 10px; background: #091522; }
.source-rail > span, .protocol-rail > span { color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.source-rail div { flex: 1; min-height: 58px; border: 1px solid #1d354b; display: flex; align-items: center; gap: 8px; padding: 9px; color: #acc0d1; font-size: 12px; }
.protocol-rail code { border-left: 2px solid var(--cyan); background: #0b1c2c; padding: 10px 8px; font-size: 11px; color: #b4ccdc; }
.layer-stack { display: flex; flex-direction: column; gap: 7px; }
.layer { min-height: 78px; display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; border: 1px solid color-mix(in srgb, var(--accent), transparent 45%); background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 83%), rgba(9, 21, 35, .92)); box-shadow: inset 3px 0 var(--accent); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.layer:hover, .layer:focus-visible, .layer.active { border-color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent), transparent 73%), rgba(11, 25, 40, .95)); outline: 0; }
.layer:hover { transform: translateX(3px); }
.layer > svg { width: 15px; color: var(--accent); opacity: .5; }
.layer.active > svg { opacity: 1; }
.layer > b { font: 600 31px var(--display); color: var(--accent); text-align: center; }
.layer h3 { margin: 0 0 5px; font-size: 16px; }
.layer p { margin: 0; color: var(--muted); font-size: 11px; }
.layer em { font-style: normal; font-size: 10px; padding: 3px 5px; border: 1px solid currentColor; color: var(--muted); }
.l1, .l2 { --accent: var(--cyan); }.l3 { --accent: var(--green); }.l4 { --accent: var(--purple); }.l5 { --accent: #8075e9; }.l6 { --accent: var(--amber); }
.layer-stack footer { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); min-height: 48px; }
.layer-stack footer span { display: grid; place-items: center; color: var(--muted); font-size: 10px; border-right: 1px solid var(--line); text-align: center; }
.layer-detail-panel { margin-top: 12px; min-height: 190px; display: grid; grid-template-columns: 100px 1.25fr 1fr; gap: 26px; align-items: center; padding: 25px; border: 1px solid var(--line-bright); background: linear-gradient(110deg, #0c1d2c, #09131f); }
.layer-detail-index { color: var(--cyan); font: 600 52px var(--display); text-align: center; }
.layer-detail-copy small { color: var(--cyan); font: 600 9px var(--display); }
.layer-detail-copy h3 { margin: 5px 0 9px; font-size: 19px; }
.layer-detail-copy p { margin: 0; color: var(--muted); line-height: 1.75; }
.layer-detail-panel dl { margin: 0; display: grid; gap: 9px; }
.layer-detail-panel dl div { padding: 9px 11px; border-left: 2px solid var(--cyan); background: rgba(6, 14, 23, .65); }
.layer-detail-panel dt { color: #66839a; font-size: 8px; }
.layer-detail-panel dd { margin: 2px 0 0; color: #bdcad5; font-size: 10px; }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 110px; }
.detail-card { border-top: 2px solid var(--accent, var(--cyan)); background: var(--panel); padding: 28px; min-height: 240px; }
.detail-card:nth-child(2) { --accent: var(--green); }.detail-card:nth-child(3) { --accent: var(--amber); }.detail-card:nth-child(4) { --accent: var(--purple); }
.detail-card > svg { color: var(--accent, var(--cyan)); width: 29px; height: 29px; }
.detail-card h3 { font: 600 21px var(--display); margin: 28px 0 10px; }
.detail-card p { color: var(--muted); line-height: 1.8; min-height: 75px; }
.detail-card strong { color: var(--accent, var(--cyan)); font-size: 10px; }

.page-hero { padding: 92px 0 50px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 0 0 20px; max-width: 980px; font: 600 clamp(40px, 5vw, 68px)/1.14 var(--display); }
.page-hero > p:last-child { max-width: 870px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.applications-page-hero { padding-block: 48px 28px; }
.applications-page-hero-media { position: relative; margin: 0; border: 1px solid #37444a; background: #0d1318; overflow: hidden; }
.applications-page-hero-media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; filter: saturate(.82) contrast(1.04); }
.applications-page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 9, 13, .86) 0%, rgba(4, 9, 13, .52) 38%, transparent 74%); pointer-events: none; }
.applications-page-hero-copy { position: absolute; z-index: 1; left: 38px; bottom: 38px; width: min(720px, calc(100% - 76px)); }
.applications-page-hero-copy h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }
.applications-page-hero-copy > p:last-child { color: #d3e0e4; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.trusted-intro { scroll-margin-top: 125px; }
.trusted-intro h2 { margin: 0 0 20px; font: 600 32px/1.3 var(--display); }
.suite-workbench { padding-block: 50px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.suite-feature { border: 1px solid var(--line); background: var(--panel); padding: 30px; border-radius: 6px; }
.suite-feature > header { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.module-letter { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 700 22px var(--display); background: color-mix(in srgb, var(--accent), transparent 90%); }
.suite-feature small { font: 600 9px var(--display); color: var(--accent); letter-spacing: 1.4px; }
.suite-feature h2 { font: 600 24px var(--display); margin: 3px 0; }
.suite-feature header p { margin: 0; color: var(--muted); }
.engineering { --accent: var(--cyan); }.designer { --accent: var(--green); }.ai-module { --accent: var(--purple); }.manager-module { --accent: var(--amber); }
.mock-editor { height: 285px; display: grid; grid-template-columns: 145px 1fr; border: 1px solid #223a50; background: #060b12; overflow: hidden; }
.mock-editor aside { border-right: 1px solid #223a50; display: flex; flex-direction: column; padding: 15px; gap: 6px; }
.mock-editor aside b { font: 600 9px var(--display); color: #62819a; margin-bottom: 8px; }
.mock-editor aside span { border: 1px solid #1c3042; padding: 8px; color: #9eb2c3; font-size: 10px; }
.tree-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; position: relative; }
.tree-row { display: flex; gap: 28px; }.tree-row.narrow { gap: 9px; margin-top: -29px; }
.tree-node { padding: 9px 15px; min-width: 90px; border: 1px solid #36546b; background: #0d1a27; text-align: center; font-size: 10px; position: relative; }
.tree-node.root { border-color: var(--purple); }.tree-node.cyan { border-color: var(--cyan); }.tree-node.green { border-color: var(--green); }.tree-node.amber { border-color: var(--amber); }
.ui-editor { grid-template-columns: 160px 1fr; }
.mini-dashboard { padding: 18px; display: grid; grid-template-columns: 1fr 1.7fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.mini-kpi, .mini-chart, .mini-map { border: 1px solid #1f394d; background: #0a1420; padding: 15px; }
.mini-kpi { font-size: 11px; color: var(--muted); }.mini-kpi b { display: block; font: 600 30px var(--display); color: var(--green); margin-top: 20px; }
.mini-chart { display: flex; align-items: end; gap: 6px; }.mini-chart i { width: 12%; height: var(--h, 50%); background: var(--cyan); opacity: .8; }.mini-chart i:nth-child(2) { --h: 64%; }.mini-chart i:nth-child(3) { --h: 38%; }.mini-chart i:nth-child(4) { --h: 76%; }.mini-chart i:nth-child(5) { --h: 57%; }.mini-chart i:nth-child(6) { --h: 82%; }.mini-chart i:nth-child(7) { --h: 70%; }.mini-chart i:nth-child(8) { --h: 88%; }
.mini-map { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-around; }.mini-map span { border: 1px solid var(--green); padding: 8px 15px; font-size: 9px; }
.feature-points { list-style: none; padding: 15px 0 0; margin: 0; display: grid; gap: 9px; color: var(--muted); }
.feature-points li::before { content: "+"; color: var(--accent); margin-right: 9px; }
.agent-flow { min-height: 150px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 12px; background: #080e18; }
.agent-flow span, .agent-flow b { border: 1px solid var(--line-bright); padding: 12px; font-size: 11px; }.agent-flow b { border-color: var(--purple); color: var(--purple); }
.fleet-preview { min-height: 150px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; background: #080e18; }
.fleet-preview div { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.fleet-preview b { font: 600 25px var(--display); color: var(--amber); display: block; }.fleet-preview span { color: var(--muted); font-size: 10px; }
.manager-module .primary-button { margin-top: 16px; }
.delivery-pipeline, .rollout { padding-block: 60px 100px; }
.pipeline { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.pipeline div { padding: 22px; min-height: 160px; border-right: 1px solid var(--line); position: relative; background: var(--panel); }.pipeline b { color: #5a758c; font: 600 10px var(--display); }.pipeline svg { display: block; color: var(--cyan); width: 25px; height: 25px; margin: 28px 0 12px; }.pipeline strong { display: block; }.pipeline span { color: var(--muted); font-size: 10px; display: block; margin-top: 5px; }

.manager-app { height: 890px; min-height: 0; margin-block: 24px 64px; display: grid; grid-template-columns: 210px 1fr; overflow: hidden; border: 1px solid var(--line); background: #08111c; box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.manager-nav { background: #070c14; border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; }
.manager-logo { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: 20px 18px; column-gap: 10px; padding: 7px 8px 30px; }.manager-logo > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); font: 700 11px var(--display); }.manager-logo b { font-family: var(--display); }.manager-logo small { color: var(--muted); font-size: 8px; }
.manager-logo { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 3px; }
.manager-logo img { width: 132px; height: auto; margin-bottom: 4px; }
.manager-logo b { color: var(--cyan); font-size: 14px; }
.manager-nav > button { border: 0; background: transparent; color: var(--muted); display: flex; gap: 11px; align-items: center; text-align: left; min-height: 44px; padding: 0 11px; border-radius: 3px; }.manager-nav > button:hover, .manager-nav > button.active { background: #0e2131; color: var(--text); }.manager-nav > button.active { box-shadow: inset 2px 0 var(--cyan); }.manager-nav button em { margin-left: auto; font-style: normal; width: 19px; height: 19px; display: grid; place-items: center; background: var(--coral); color: #fff; border-radius: 50%; font-size: 9px; }
.manager-tenant { margin-top: auto; padding: 15px 10px; border-top: 1px solid var(--line); }.manager-tenant span, .manager-tenant small { display: block; color: var(--muted); font-size: 9px; }.manager-tenant b { font-size: 11px; }
.manager-main { min-width: 0; padding: 26px; overflow: auto; }
.manager-toolbar, .lab-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }.manager-toolbar small, .lab-toolbar small { color: var(--muted); }.manager-toolbar h2, .lab-toolbar h2 { margin: 4px 0 0; font: 600 24px var(--display); }.manager-toolbar > div:last-child, .lab-toolbar > div:last-child { display: flex; gap: 8px; align-items: center; }
.search { height: 36px; min-width: 240px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 0 10px; background: #070e17; }.search input, .node-palette input { border: 0; outline: 0; color: var(--text); background: transparent; width: 100%; }.search svg { color: var(--muted); }
.manager-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }.manager-kpis article { border: 1px solid var(--line); background: var(--panel); padding: 16px; display: flex; gap: 13px; align-items: center; }.kpi-icon { width: 39px; height: 39px; display: grid; place-items: center; background: color-mix(in srgb, currentColor, transparent 88%); }.kpi-icon.cyan { color: var(--cyan); }.kpi-icon.green { color: var(--green); }.kpi-icon.amber { color: var(--amber); }.kpi-icon.coral { color: var(--coral); }.manager-kpis small, .manager-kpis em { color: var(--muted); display: block; font-style: normal; font-size: 9px; }.manager-kpis b { font: 600 22px var(--display); display: inline-block; margin-right: 8px; }
.manager-content-grid { display: grid; grid-template-columns: 1fr 290px; gap: 14px; }.fleet-card, .device-detail, .manager-chart, .deployment-card { border: 1px solid var(--line); background: var(--panel); }.fleet-card > header, .manager-chart > header, .deployment-card > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); }.fleet-card h3, .manager-chart h3, .deployment-card h3 { margin: 0; font-size: 13px; }.fleet-card header span, .manager-chart header span { color: var(--muted); font-size: 9px; }
.segment { display: flex; border: 1px solid var(--line); padding: 2px; }.segment button { border: 0; background: transparent; color: var(--muted); font-size: 9px; padding: 5px 9px; }.segment button.active { background: #17334a; color: var(--cyan); }
.device-table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; } th { color: #6f879b; text-align: left; font-size: 9px; font-weight: 500; padding: 11px 12px; background: #09131f; } td { border-top: 1px solid #172a3b; padding: 12px; font-size: 10px; color: #aebdcc; } tbody tr { cursor: pointer; } tbody tr:hover, tbody tr.selected { background: #0d2030; } td b { color: var(--text); } td small { color: var(--muted); }.device-name { display: flex; align-items: center; gap: 8px; }.device-symbol { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-bright); color: var(--cyan); }.state { font-size: 9px; }.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--state); margin-right: 5px; }.state.online { --state: var(--green); }.state.warning { --state: var(--amber); }.state.offline { --state: #647586; }
.device-detail { padding: 18px; }.device-detail header { display: flex; justify-content: space-between; align-items: start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.device-detail h3 { margin: 0 0 4px; font: 600 15px var(--display); }.device-detail header span { color: var(--muted); font-size: 9px; }.detail-gauge { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; padding: 18px 0; }.ring { --value: 72%; width: 78px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cyan) var(--value), #172a3a 0); position: relative; }.ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }.ring b { z-index: 1; font: 600 16px var(--display); }.detail-gauge div:last-child b, .detail-gauge div:last-child span { display: block; }.detail-gauge div:last-child span { color: var(--muted); font-size: 9px; }.detail-section { border-top: 1px solid var(--line); padding: 14px 0; }.detail-section > b { font-size: 10px; }.detail-section dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.detail-section dt { color: var(--muted); font-size: 8px; }.detail-section dd { margin: 2px 0 0; font-size: 10px; }.detail-section .chip-row { margin-top: 10px; }.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.manager-bottom-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }.manager-chart { padding-bottom: 12px; }.chart-legend { display: flex; gap: 14px; }.chart-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--legend); margin-right: 5px; }.chart-legend .cpu { --legend: var(--cyan); }.chart-legend .memory { --legend: var(--green); }.chart-legend .inference { --legend: var(--purple); }.deployment-card { padding-bottom: 10px; }.deployment-row { display: grid; grid-template-columns: 26px 1fr 32px; gap: 10px; align-items: center; padding: 14px 16px; }.deployment-row svg { color: var(--cyan); }.deployment-row b, .deployment-row span { display: block; font-size: 9px; }.deployment-row span { color: var(--muted); margin: 3px 0 6px; }.deployment-row strong { font: 600 10px var(--display); } progress { width: 100%; height: 3px; accent-color: var(--cyan); display: block; }
.manager-chart { height: 242px; min-height: 0; overflow: hidden; }
.manager-chart canvas { display: block; width: 100%!important; height: 170px!important; }
.manager-view-content { min-width: 0; animation: reveal .2s ease; }
.manager-region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.region-card, .manager-view-card-grid article, .manager-view-summary article, .manager-wide-card, .manager-activity-card { border: 1px solid var(--line); background: var(--panel); }
.region-card { min-height: 190px; padding: 16px; border-top: 2px solid #335166; }
.region-card.core { border-top-color: var(--cyan); background: linear-gradient(145deg, rgba(50,199,244,.08), var(--panel) 55%); }
.region-card header { display: flex; align-items: center; gap: 8px; color: #6f879b; font: 600 8px var(--display); }
.region-card header svg { width: 16px; height: 16px; color: var(--cyan); }
.region-card h3 { min-height: 35px; margin: 18px 0 6px; font: 600 13px var(--display); }
.region-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.region-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.region-card dl div + div { padding-left: 8px; border-left: 1px solid var(--line); }
.region-card dt { color: var(--muted); font-size: 8px; }
.region-card dd { margin: 3px 0 0; font: 600 11px var(--display); }
.manager-activity-card { height: 242px; overflow: hidden; }
.manager-activity-card > header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); }
.manager-activity-card h3 { margin: 0; font-size: 13px; }
.live-dot { color: var(--green); font: 600 8px var(--display); }
.live-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.manager-activity-card > div { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; min-height: 57px; padding: 8px 14px; border-top: 1px solid #142737; }
.manager-activity-card > div > svg { width: 15px; color: var(--cyan); }
.manager-activity-card p { margin: 0; }
.manager-activity-card p b, .manager-activity-card p span { display: block; font-size: 9px; }
.manager-activity-card p span, .manager-activity-card time { margin-top: 2px; color: var(--muted); font-size: 8px; }
.manager-view-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.manager-view-summary article { height: 76px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; }
.manager-view-summary svg { width: 24px; color: var(--cyan); }
.manager-view-summary span { color: var(--muted); font-size: 9px; }
.manager-view-summary b { display: block; margin-top: 4px; color: var(--text); font: 600 18px var(--display); }
.manager-view-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.manager-view-card-grid article { min-height: 214px; padding: 17px; position: relative; border-top: 2px solid #335166; }
.manager-view-card-grid article > svg { width: 24px; color: var(--cyan); }
.manager-view-card-grid article > span { display: block; margin-top: 17px; color: #6f879b; font: 600 8px var(--display); }
.manager-view-card-grid h3 { margin: 7px 0; font: 600 14px var(--display); }
.manager-view-card-grid p { min-height: 34px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.manager-view-card-grid article > b { display: block; margin-top: 15px; color: var(--green); font: 600 10px var(--display); }
.manager-view-card-grid article > button { position: absolute; right: 14px; bottom: 13px; border: 0; background: transparent; color: var(--cyan); font-size: 9px; }
.connector-grid article, .policy-grid article { min-height: 198px; }
.healthy { color: var(--green)!important; }
.warning-text { color: var(--amber)!important; }
.manager-wide-card { min-width: 0; overflow: hidden; }
.manager-wide-card > header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid var(--line); }
.manager-wide-card > header > div { display: flex; align-items: center; gap: 9px; }
.manager-wide-card header svg { width: 17px; color: var(--cyan); }
.manager-wide-card h3 { margin: 0; font-size: 13px; }
.compact { min-height: 29px; padding: 0 10px; font-size: 9px; }
.release-lanes { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr; align-items: center; padding: 24px 18px; }
.release-lanes > div { min-width: 0; padding-left: 13px; border-left: 2px solid var(--cyan); }
.release-lanes > div:nth-of-type(2) { border-color: var(--amber); }
.release-lanes > div:nth-of-type(3) { border-color: var(--green); }
.release-lanes > div:nth-of-type(4) { border-color: var(--purple); }
.release-lanes b, .release-lanes span, .release-lanes em { display: block; font-size: 9px; }
.release-lanes span { margin: 5px 0; color: var(--muted); }
.release-lanes em { color: var(--cyan); font-style: normal; }
.release-lanes > svg { width: 14px; color: #4f687c; }
.link-health { display: grid; grid-template-columns: repeat(4, 1fr); }
.link-health > div { min-height: 112px; padding: 20px; border-right: 1px solid var(--line); border-top: 2px solid var(--green); }
.link-health > div:last-child { border-right: 0; }
.link-health > div.warning { border-top-color: var(--amber); }
.link-health span, .link-health b, .link-health em { display: block; font-size: 9px; }
.link-health span { color: var(--muted); }
.link-health b { margin: 12px 0 6px; }
.link-health em { color: var(--green); font-style: normal; }
.link-health .warning em { color: var(--amber); }
.manager-alert-row { display: grid; grid-template-columns: 34px 1fr 100px 55px; align-items: center; gap: 12px; padding: 14px 17px; border-top: 1px solid #172a3b; }
.manager-alert-row > svg { width: 18px; color: var(--cyan); }
.manager-alert-row.warning > svg { color: var(--amber); }
.manager-alert-row p { margin: 0; }
.manager-alert-row p b, .manager-alert-row p span { display: block; font-size: 9px; }
.manager-alert-row p span, .manager-alert-row time { margin-top: 4px; color: var(--muted); font-size: 8px; }
.manager-alert-row button { border: 1px solid var(--line-bright); background: transparent; color: var(--cyan); min-height: 27px; font-size: 9px; }
.manager-data-table td { height: 51px; }
.manager-data-table tbody tr { cursor: default; }

.usecase-selector { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin-block: 36px 14px; }.usecase-selector button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); min-height: 72px; padding: 12px 17px; display: flex; gap: 15px; align-items: center; text-align: left; }.usecase-selector button.active { border-color: var(--cyan); background: #0d2030; color: var(--text); }.usecase-selector button > span { font: 600 20px var(--display); color: var(--cyan); }.usecase-selector b, .usecase-selector small { display: block; }.usecase-selector small { color: var(--muted); margin-top: 3px; }
.lab-app { height: 900px; display: grid; grid-template-columns: 205px 1fr; background: #080f19; border: 1px solid var(--line); box-shadow: 0 30px 100px rgba(0,0,0,.3); }
.lab-sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: #060b12; }.lab-brand { display: flex; gap: 10px; align-items: center; padding: 19px 15px; border-bottom: 1px solid var(--line); }.lab-brand > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green); font: 700 10px var(--display); }.lab-brand b, .lab-brand small { display: block; }.lab-brand b { font: 600 12px var(--display); }.lab-brand small { color: var(--muted); font-size: 8px; }.lab-sidebar nav { display: grid; padding: 15px 9px; gap: 4px; }.lab-sidebar nav button { border: 0; min-height: 41px; display: flex; align-items: center; gap: 10px; background: transparent; color: var(--muted); padding: 0 12px; text-align: left; }.lab-sidebar nav button:hover, .lab-sidebar nav button.active { background: #102334; color: var(--text); box-shadow: inset 2px 0 var(--green); }.lab-runtime { margin: auto 12px 15px; padding: 13px; border: 1px solid var(--line); }.lab-runtime span, .lab-runtime b, .lab-runtime small { display: block; font-size: 8px; }.lab-runtime span { color: var(--green); }.lab-runtime span i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; }.lab-runtime b { margin: 8px 0 3px; }.lab-runtime small { color: var(--muted); }
.lab-brand img { display: block; width: 45px; height: auto; flex: 0 0 auto; }
.lab-main { min-width: 0; padding: 20px; overflow: hidden; }.lab-toolbar { height: 48px; }.active-design { border-color: var(--green); color: var(--green); }.lab-view { display: none; height: calc(100% - 72px); }.lab-view.active { display: block; animation: reveal .25s ease; }
.lab-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.lab-kpis article { border: 1px solid var(--line); background: var(--panel); padding: 14px; height: 94px; }.lab-kpis small, .lab-kpis span { display: block; color: var(--muted); font-size: 9px; }.lab-kpis b { display: block; margin: 7px 0 4px; font: 600 22px var(--display); }.lab-kpis b em { font: 500 10px var(--font); color: var(--muted); }.lab-kpis .up { color: var(--green); }.lab-kpis .down { color: var(--cyan); }.lab-kpis span svg { width: 10px; height: 10px; }
.dashboard-grid { display: grid; height: calc(100% - 106px); grid-template-columns: 1.55fr .75fr; grid-template-rows: 1fr 1fr; gap: 10px; margin-top: 10px; }.dashboard-grid > section { border: 1px solid var(--line); background: var(--panel); min-height: 0; }.dashboard-grid section > header { height: 54px; padding: 0 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.dashboard-grid h3 { margin: 0; font-size: 12px; }.dashboard-grid header span { color: var(--muted); font-size: 8px; }.oee-panel canvas { padding: 12px; }.chart-legend .availability { --legend: var(--cyan); }.chart-legend .performance { --legend: var(--amber); }.chart-legend .quality { --legend: var(--green); }.chart-legend .oee { --legend: var(--purple); }
.status-running, .status-planned, .status-done { color: var(--green)!important; background: rgba(64,213,155,.1); border: 1px solid rgba(64,213,155,.4); padding: 4px 6px; font-size: 9px; }.status-planned { color: var(--amber)!important; border-color: rgba(242,184,75,.4); background: rgba(242,184,75,.1); }.status-done { color: var(--cyan)!important; border-color: rgba(50,199,244,.4); background: rgba(50,199,244,.1); }
.order-panel dl { padding: 8px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }.order-panel dt { color: var(--muted); font-size: 8px; }.order-panel dd { margin: 1px 0 0; font-size: 10px; }.order-progress { height: 5px; background: #192b3a; margin: 5px 15px; }.order-progress span { display: block; height: 100%; background: var(--green); }.order-panel footer { padding: 5px 15px; color: var(--muted); font-size: 9px; }.order-panel footer b { color: var(--text); }.order-panel footer span { float: right; }
.station-panel, .event-panel { overflow: hidden; }.station-panel #station-list { padding: 8px 15px; display: grid; gap: 6px; }.station { display: grid; grid-template-columns: 1fr 60px 70px; align-items: center; font-size: 9px; }.station span { color: var(--muted); }.station i { height: 3px; background: #1b2f40; margin-right: 9px; }.station i::after { content: ""; display: block; width: var(--load); height: 100%; background: var(--color); }.station em { font-style: normal; color: var(--color); }
.event-list { padding: 7px 15px; display: grid; gap: 10px; }.event-list div { display: grid; grid-template-columns: 75px 8px 1fr; gap: 8px; align-items: start; font-size: 9px; }.event-list time { color: #62788b; }.event-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-top: 3px; }.event-list i.ok { background: var(--green); }.event-list i.warn { background: var(--amber); }.event-list span { color: var(--muted); }.event-list b { color: var(--text); }

.topology-layout { height: 100%; display: grid; grid-template-columns: 180px 1fr 265px; border: 1px solid var(--line); }.node-palette, .config-panel { background: #07101a; overflow-y: auto; }.node-palette { border-right: 1px solid var(--line); padding: 13px; }.node-palette header { display: flex; align-items: end; justify-content: space-between; }.node-palette h3 { margin: 0; font-size: 11px; }.node-palette header span { color: var(--muted); font-size: 8px; }.node-palette label { height: 31px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); margin: 12px 0; padding: 0 8px; }.node-palette label svg { width: 13px; }.palette-group { display: grid; gap: 6px; margin-top: 13px; }.palette-group > b { color: #627c91; font-size: 8px; }.palette-group button { border: 1px solid var(--line); background: #0c1825; color: var(--text); display: flex; align-items: center; gap: 8px; text-align: left; min-height: 48px; padding: 7px; }.palette-group button:hover { border-color: var(--cyan); }.palette-group button > svg { color: var(--cyan); }.palette-group span, .palette-group small { display: block; font-size: 9px; }.palette-group small { color: var(--muted); font-size: 7px; margin-top: 2px; }.topology-stage { min-width: 0; position: relative; background: #050b12; }.topology-toolbar { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid var(--line); }.topology-toolbar > div { display: flex; }.topology-toolbar .icon-button { width: 31px; height: 31px; border-radius: 0; }.topology-toolbar > span { color: var(--muted); font-size: 8px; }.topology-toolbar .online-dot { width: 6px; height: 6px; margin-right: 5px; }.topology-stage #reactflow-root { height: calc(100% - 43px); }.config-panel { border-left: 1px solid var(--line); }.config-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }.config-empty svg { width: 28px; height: 28px; margin-bottom: 12px; }.config-empty b { color: var(--text); }.config-empty span { font-size: 9px; margin-top: 4px; }
.config-header { padding: 16px; border-bottom: 1px solid var(--line); }.config-header small, .config-header b, .config-header span { display: block; }.config-header small { color: var(--cyan); font: 600 8px var(--display); }.config-header b { margin: 4px 0; }.config-header span { color: var(--muted); font-size: 8px; }.config-form { padding: 14px; }.config-form h4 { font-size: 9px; color: #718ba0; margin: 5px 0 11px; }.config-form label { display: block; color: var(--muted); font-size: 8px; margin: 9px 0; }.config-form input, .config-form select { width: 100%; height: 31px; border: 1px solid var(--line); background: #0b1723; color: var(--text); padding: 0 8px; margin-top: 4px; font-size: 9px; }.config-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.config-form footer { display: flex; gap: 7px; margin-top: 16px; }
.device-node { min-width: 135px; border: 1px solid var(--node-color, var(--cyan)); background: #0b1722; color: var(--text); box-shadow: 0 8px 26px rgba(0,0,0,.3); }.device-node.selected-node { box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color), transparent 70%), 0 8px 26px rgba(0,0,0,.3); }.device-node header { display: flex; align-items: center; gap: 7px; padding: 8px; border-bottom: 1px solid #203546; }.device-node header svg { width: 14px; color: var(--node-color); }.device-node header b { font-size: 9px; }.device-node header span { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.device-node div { padding: 7px 8px; }.device-node small { display: block; color: var(--muted); font-size: 7px; }.device-node code { font-size: 7px; color: var(--node-color); }.react-flow__handle { width: 7px!important; height: 7px!important; border: 1px solid #06101a!important; background: var(--node-color, var(--cyan))!important; }.react-flow__controls { box-shadow: none!important; }.react-flow__controls-button { background: #0c1925!important; border-color: var(--line)!important; fill: var(--muted)!important; }.react-flow__minimap { background: #08121c!important; border: 1px solid var(--line); }.react-flow__attribution { display: none; }

.workflow-view { height: 100%; display: grid; grid-template-columns: 190px 1fr 220px; border: 1px solid var(--line); }.workflow-view > aside { background: #07101a; padding: 12px; }.workflow-view > aside:first-child { border-right: 1px solid var(--line); }.workflow-view > aside header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.workflow-view h3 { margin: 0; font-size: 11px; }.workflow-view > aside:first-child > button { width: 100%; display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; color: var(--text); padding: 9px; }.workflow-view > aside:first-child > button.active { border-color: var(--cyan); background: #0d1f2d; }.workflow-view > aside:first-child > button > i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.workflow-view button b, .workflow-view button small { display: block; font-size: 9px; }.workflow-view button small { color: var(--muted); }.workflow-canvas { padding: 28px; display: flex; flex-direction: column; align-items: center; background-image: radial-gradient(#1b3041 1px, transparent 1px); background-size: 18px 18px; overflow: auto; }.flow-start { border-radius: 20px; border: 1px solid var(--green); padding: 7px 25px; font-size: 9px; background: #0d241e; }.flow-line { width: 1px; height: 22px; background: #4d6c82; }.flow-step { min-width: 240px; padding: 10px 14px; border: 1px solid var(--flow-color); background: #0c1824; }.flow-step small, .flow-step b, .flow-step span { display: block; }.flow-step small { color: var(--flow-color); font: 600 8px var(--display); }.flow-step b { font-size: 10px; }.flow-step span { color: var(--muted); font-size: 8px; }.flow-step.cyan { --flow-color: var(--cyan); }.flow-step.green { --flow-color: var(--green); }.flow-step.purple { --flow-color: var(--purple); }.flow-step.amber { --flow-color: var(--amber); }.parallel-flow { display: flex; gap: 20px; position: relative; }.parallel-flow .flow-step { min-width: 180px; }.workflow-inspector { border-left: 1px solid var(--line); }.workflow-inspector label { display: block; color: var(--muted); font-size: 8px; margin: 14px 0; }.workflow-inspector input, .workflow-inspector select { display: block; width: 100%; height: 32px; border: 1px solid var(--line); background: #0b1723; color: var(--text); margin-top: 4px; padding: 0 7px; font-size: 9px; }.policy-box { display: flex; gap: 8px; padding: 10px; border: 1px solid rgba(64,213,155,.4); background: rgba(64,213,155,.07); color: var(--green); }.policy-box span, .policy-box b { display: block; font-size: 8px; }
.mes-view { height: 100%; overflow: auto; border: 1px solid var(--line); background: var(--panel); }.mes-tabs { display: flex; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); }.mes-tabs button { border: 0; border-right: 1px solid var(--line); background: #08121d; color: var(--muted); padding: 13px 17px; }.mes-tabs button.active { color: var(--cyan); box-shadow: inset 0 -2px var(--cyan); }.mes-tabs span { color: #57738a; margin-left: 4px; }.mes-toolbar { display: flex; justify-content: space-between; padding: 14px; }.mes-toolbar > div { display: flex; gap: 7px; }.mes-table th, .mes-table td { padding: 15px; }.table-progress { width: 75px; height: 3px; display: inline-block; background: #203344; margin-right: 6px; }.table-progress span { height: 100%; display: block; background: var(--green); }.semantic-map { margin: 16px; border: 1px solid var(--line); }.semantic-map header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 12px; }.semantic-map h3 { margin: 0; font-size: 11px; }.semantic-map header span { color: var(--muted); font-size: 8px; }.semantic-map > div { padding: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; }.semantic-map > div span, .semantic-map > div b { border: 1px solid var(--line-bright); padding: 9px; font-size: 9px; }.semantic-map > div b { border-color: var(--green); color: var(--green); }
.alert-center { height: 100%; border: 1px solid var(--line); background: var(--panel); }.alert-center > header { height: 70px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.alert-center h3 { margin: 0; }.alert-center header span { color: var(--muted); font-size: 9px; }.alert-row { margin: 12px; border: 1px solid var(--line); border-left: 3px solid var(--severity); padding: 15px; display: grid; grid-template-columns: 30px 1fr 90px 65px; gap: 12px; align-items: center; }.alert-row.warning { --severity: var(--amber); }.alert-row.info { --severity: var(--cyan); }.severity { width: 27px; height: 27px; display: grid; place-items: center; background: color-mix(in srgb, var(--severity), transparent 87%); color: var(--severity); }.alert-row b, .alert-row p, .alert-row small { display: block; margin: 0; }.alert-row p { color: var(--muted); margin: 3px 0; }.alert-row small, .alert-row time { color: #687f92; font-size: 8px; }
.certification-view { height: 100%; overflow: auto; border: 1px solid var(--line); background: #07101a; }
.certification-head { min-height: 88px; padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(90deg, #0c1b28, #09131f); }
.certification-head small, .certification-head h3, .certification-head p { display: block; margin: 0; }.certification-head small { color: var(--cyan); font: 600 8px var(--display); letter-spacing: 1px; }.certification-head h3 { margin-top: 4px; font: 600 17px var(--display); }.certification-head p { margin-top: 5px; color: var(--muted); font-size: 9px; }
.certification-status { flex: 0 0 165px; padding: 9px 11px; border: 1px solid var(--line-bright); background: #0a1723; }.certification-status span, .certification-status b, .certification-status small { display: block; }.certification-status span, .certification-status small { color: var(--muted); font-size: 8px; }.certification-status b { margin: 3px 0; color: var(--amber); font-size: 10px; }
.certification-workspace { display: grid; grid-template-columns: minmax(210px, .78fr) minmax(260px, 1fr) minmax(250px, .9fr); gap: 10px; padding: 10px; }
.certification-workspace > section { min-width: 0; border: 1px solid var(--line); background: var(--panel); }.certification-workspace > section > header { min-height: 52px; padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }.certification-workspace header small, .certification-workspace header h4 { display: block; margin: 0; }.certification-workspace header small { color: #668196; font: 600 7px var(--display); letter-spacing: 1px; }.certification-workspace header h4 { margin-top: 3px; font-size: 11px; }.certification-workspace header > svg { color: var(--cyan); width: 18px; }.certification-workspace header > span { color: var(--cyan); font: 600 10px var(--display); }
.assessment-config { padding-bottom: 12px; }.assessment-config > label { display: block; margin: 10px 12px; color: var(--muted); font-size: 8px; }.assessment-config input, .assessment-config select { width: 100%; height: 31px; margin-top: 4px; padding: 0 8px; border: 1px solid var(--line); background: #08131e; color: var(--text); font-size: 8px; }.assessment-config fieldset { margin: 10px 12px; padding: 8px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.assessment-config legend { padding: 0 5px; color: var(--muted); font-size: 8px; }.assessment-config fieldset label { display: flex; align-items: center; gap: 5px; font-size: 8px; }.assessment-config fieldset input { width: 12px; height: 12px; margin: 0; accent-color: var(--green); }.assessment-config > button { margin: 2px 12px 0; width: calc(100% - 24px); justify-content: center; }
.assessment-progress { height: 4px; margin: 12px; background: #1b2f40; }.assessment-progress span { display: block; width: 0; height: 100%; background: var(--green); transition: width .35s ease; }.clause-list { display: grid; gap: 6px; padding: 0 12px 12px; }.clause-list article { min-height: 46px; padding: 7px 9px; border: 1px solid var(--line); display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; }.clause-list article > svg { width: 15px; color: #61798c; }.clause-list b, .clause-list span { display: block; }.clause-list b { font-size: 9px; }.clause-list span { color: var(--muted); font-size: 7px; margin-top: 2px; }.clause-list em { color: var(--muted); font-size: 8px; font-style: normal; }.clause-list article[data-cert-clause="pass"] { border-color: rgba(64,213,155,.45); background: rgba(64,213,155,.04); }.clause-list article[data-cert-clause="pass"] > svg, .clause-list article[data-cert-clause="pass"] em { color: var(--green); }.clause-list article[data-cert-clause="review"] { border-color: rgba(242,184,75,.5); }.clause-list article[data-cert-clause="review"] > svg, .clause-list article[data-cert-clause="review"] em { color: var(--amber); }
.evidence-chain { grid-column: 1 / 3; }.evidence-chain > div { min-height: 47px; padding: 7px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; }.evidence-chain > div:last-child { border-bottom: 0; }.evidence-chain svg { width: 15px; color: var(--cyan); }.evidence-chain p { margin: 0; }.evidence-chain b, .evidence-chain span { display: block; }.evidence-chain b { font-size: 9px; }.evidence-chain span { margin-top: 2px; color: var(--muted); font-size: 7px; }.evidence-chain code { color: #6d879b; font-size: 7px; }
.certification-report { grid-column: 3; grid-row: 1 / 3; }.report-state { padding: 3px 6px; border: 1px solid var(--amber); color: var(--amber)!important; }.report-state.issued { border-color: var(--green); color: var(--green)!important; }.report-sheet { margin: 12px; padding: 14px; border: 1px solid #526e81; background: #0b1824; }.report-mark { display: flex; justify-content: space-between; align-items: center; color: var(--cyan); }.report-mark svg { width: 23px; }.report-mark span { font: 600 8px var(--display); letter-spacing: 1px; }.report-sheet > p { margin: 20px 0 2px; color: var(--muted); font-size: 8px; }.report-sheet h5 { margin: 0 0 17px; font: 600 17px var(--display); }.report-sheet dl { margin: 0; }.report-sheet dl div { padding: 7px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 58px 1fr; gap: 7px; }.report-sheet dt, .report-sheet dd { margin: 0; font-size: 8px; }.report-sheet dt { color: var(--muted); }.report-sheet dd { overflow-wrap: anywhere; }.report-sheet footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }.report-sheet footer span, .report-sheet footer b { display: block; }.report-sheet footer span { color: var(--muted); font-size: 7px; line-height: 1.5; }.report-sheet footer b { margin-top: 9px; color: var(--amber); font-size: 9px; }.report-actions { display: flex; gap: 7px; padding: 0 12px 12px; }.report-actions button { flex: 1; justify-content: center; }.report-actions button:disabled { cursor: not-allowed; opacity: .38; }
.certification-flow { margin: 0 10px 10px; min-height: 58px; border: 1px solid var(--line); background: #08131e; display: flex; align-items: center; justify-content: space-around; padding: 9px 13px; }.certification-flow div { flex: 1; }.certification-flow b, .certification-flow span { display: block; }.certification-flow b { color: #617a8e; font: 600 8px var(--display); }.certification-flow span { margin-top: 3px; color: var(--muted); font-size: 8px; }.certification-flow div.active b, .certification-flow div.active span { color: var(--green); }.certification-flow > svg { width: 14px; color: #40596d; }
.app-context-strip { margin-block: 14px 100px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; padding: 19px; }.app-context-strip div { flex: 1; }.app-context-strip b, .app-context-strip span { display: block; }.app-context-strip b { color: var(--cyan); }.app-context-strip span { color: var(--muted); font-size: 9px; }.app-context-strip > svg { color: #466177; }
.domain-applications { padding-bottom: 100px; }.domain-applications .section-heading { margin-bottom: 22px; }.domain-application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.domain-application-card { --domain-accent: var(--cyan); min-width: 0; min-height: 276px; padding: 22px; background: #09131f; border-top: 2px solid var(--domain-accent); display: flex; flex-direction: column; }.domain-application-card:nth-child(2) { --domain-accent: var(--green); }.domain-application-card:nth-child(3) { --domain-accent: var(--amber); }.domain-application-card:nth-child(4) { --domain-accent: var(--purple); }.domain-application-card:nth-child(5) { --domain-accent: var(--coral); }.domain-application-card:nth-child(6) { --domain-accent: #78b6a5; }.domain-application-card:nth-child(7) { --domain-accent: #55c6c2; }.domain-application-card:nth-child(8) { --domain-accent: #dc8f55; }.domain-application-card:nth-child(9) { --domain-accent: #d3b85b; }.domain-application-card:nth-child(10) { --domain-accent: #6eb6d8; }.domain-application-card header { display: flex; align-items: center; justify-content: space-between; color: #6b8499; font: 600 8px var(--display); letter-spacing: 1px; }.domain-application-card header svg { width: 22px; height: 22px; color: var(--domain-accent); }.domain-application-card h3 { margin: 28px 0 9px; font: 600 18px var(--display); }.domain-application-card p { min-height: 54px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.75; }.domain-signal { display: flex; align-items: baseline; gap: 8px; margin-top: 23px; padding-top: 13px; border-top: 1px solid var(--line); }.domain-signal b { color: var(--domain-accent); font: 600 21px var(--display); }.domain-signal span { color: #70879a; font-size: 9px; }.domain-application-card footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 20px; color: #6f8799; font-size: 9px; }.domain-application-card footer span { max-width: 58%; line-height: 1.5; }.domain-application-card footer strong { color: var(--text); font-size: 9px; font-weight: 500; text-align: right; }
.usecase-scene { min-height: 720px; margin-bottom: 100px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 430px auto auto; border: 1px solid var(--line); background: #080f19; }
.scene-media { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.scene-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,9,18,.74), transparent 58%); }
.scene-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-media span { position: absolute; z-index: 1; left: 24px; bottom: 22px; color: var(--cyan); font: 600 10px var(--display); letter-spacing: 1.4px; }
.scene-intro { padding: 52px 44px; }
.scene-intro h2 { margin: 0; max-width: 520px; font: 600 34px/1.18 var(--display); }
.scene-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.9; margin: 22px 0 32px; }
.scene-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.scene-metrics div { padding: 18px 12px 0 0; }
.scene-metrics b, .scene-metrics span { display: block; }
.scene-metrics b { color: var(--green); font: 600 20px var(--display); }
.scene-metrics span { color: var(--muted); margin-top: 4px; font-size: 9px; }
.scene-flow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.scene-flow article { min-height: 180px; padding: 28px; border-right: 1px solid var(--line); }
.scene-flow article:last-child { border-right: 0; }
.scene-flow svg { color: var(--cyan); width: 24px; height: 24px; margin-bottom: 24px; }
.scene-flow span, .scene-flow b { display: block; }
.scene-flow span { color: #678196; font: 600 8px var(--display); }
.scene-flow b { margin: 5px 0 8px; }
.scene-flow p { color: var(--muted); line-height: 1.65; margin: 0; font-size: 10px; }
.scene-boundary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: #060b12; }
.scene-boundary div { padding: 18px 28px; border-right: 1px solid var(--line); }
.scene-boundary div:last-child { border-right: 0; }
.scene-boundary small, .scene-boundary b { display: block; }
.scene-boundary small { color: var(--cyan); font-size: 8px; }
.scene-boundary b { margin-top: 5px; font-size: 10px; }
.flexible-scene .scene-metrics b, .flexible-scene .scene-flow svg { color: var(--amber); }

.trusted-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-block: 32px 58px; }.trusted-overview article { border: 1px solid var(--line); border-top: 2px solid var(--accent); background: var(--panel); padding: 24px; min-height: 270px; display: flex; flex-direction: column; }.trusted-overview article:nth-child(1) { --accent: var(--cyan); }.trusted-overview article:nth-child(2) { --accent: var(--coral); }.trusted-overview article:nth-child(3) { --accent: var(--green); }.trusted-overview article > span { color: #587289; font: 600 10px var(--display); }.trusted-overview article > svg { display: block; width: 30px; height: 30px; color: var(--accent); margin: 25px 0 16px; }.trusted-overview h3 { font-size: 19px; }.trusted-overview p { color: var(--muted); line-height: 1.8; margin-bottom: 20px; }.trusted-overview .chip-row { margin-top: auto; }
.trusted-products, .trusted-governance { padding-bottom: 72px; }.trusted-products .section-heading, .trusted-governance .section-heading { margin-bottom: 22px; }.data-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.data-product-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--product-accent); background: linear-gradient(145deg, #0c1826, #09121e); }.data-product-card.product-oee { --product-accent: var(--cyan); }.data-product-card.product-energy { --product-accent: var(--amber); }.data-product-card.product-maintenance { --product-accent: var(--green); }.data-product-card header { display: flex; align-items: center; justify-content: space-between; color: #698399; font: 600 8px var(--display); letter-spacing: 1px; }.data-product-card header svg { color: var(--product-accent); width: 22px; }.data-product-card h3 { margin: 25px 0 8px; font: 600 17px var(--display); }.data-product-card p { min-height: 48px; margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.7; }.data-product-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding-top: 13px; border-top: 1px solid var(--line); }.data-product-card dt, .data-product-card dd { margin: 0; }.data-product-card dt { color: #648097; font-size: 8px; }.data-product-card dd { margin-top: 4px; color: #b9c9d6; font: 600 9px var(--display); }.data-product-card footer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 20px; }.data-product-card footer b { color: var(--product-accent); font: 600 17px var(--display); }.data-product-card footer span { color: #70879a; font-size: 9px; text-align: right; }
.sovereign-architecture { padding-bottom: 64px; }.trust-diagram { display: grid; grid-template-columns: 1fr 150px 1fr; gap: 12px; align-items: stretch; }.trust-zone { border: 1px solid var(--line); background: var(--panel); }.trust-zone header { border-bottom: 1px solid var(--line); padding: 15px; }.trust-zone header span, .trust-zone header b { display: block; }.trust-zone header span { color: var(--cyan); font: 600 8px var(--display); }.zone-items { padding: 22px; display: flex; align-items: center; justify-content: space-around; gap: 10px; }.zone-items > div { text-align: center; flex: 1; min-height: 115px; padding: 13px 8px; border: 1px solid var(--line); }.zone-items > div.highlight { border-color: var(--cyan); background: rgba(50,199,244,.05); }.zone-items svg { color: var(--cyan); }.zone-items b, .zone-items small { display: block; }.zone-items b { font-size: 10px; margin: 10px 0 3px; }.zone-items small { color: var(--muted); font-size: 8px; }.policy-gate { border: 1px solid var(--coral); background: rgba(255,118,107,.05); padding: 18px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }.policy-gate > svg { color: var(--coral); width: 30px; height: 30px; }.policy-gate b { font-size: 11px; }.policy-gate span { color: var(--muted); font-size: 8px; }
.governance-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }.trust-role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.trust-role-grid article { display: grid; grid-template-columns: 28px 1fr; gap: 13px; min-height: 130px; padding: 18px; background: var(--panel); }.trust-role-grid article > svg { color: var(--cyan); margin-top: 2px; }.trust-role-grid small { color: #688197; font: 600 8px var(--display); letter-spacing: 1px; }.trust-role-grid h3 { margin: 6px 0 7px; font: 600 14px var(--display); }.trust-role-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }.trust-flow-panel { padding: 19px; border: 1px solid var(--line-bright); background: #0a1724; }.trust-flow-panel > header { display: flex; justify-content: space-between; color: var(--cyan); font: 600 9px var(--display); letter-spacing: 1px; }.trust-flow-panel > header svg { width: 19px; }.trust-flow { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 22px; border-top: 1px solid var(--line-bright); }.trust-flow article { position: relative; min-height: 104px; padding: 17px 18px; border-left: 1px solid var(--line); }.trust-flow article:first-child { border-left: 0; }.trust-flow article::after { content: ""; position: absolute; top: 24px; right: -5px; width: 8px; height: 8px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); transform: rotate(45deg); background: #0a1724; }.trust-flow article:last-child::after { display: none; }.trust-flow article b { display: block; color: var(--cyan); font: 600 10px var(--display); }.trust-flow strong, .trust-flow span { display: block; }.trust-flow strong { margin-top: 12px; font-size: 12px; }.trust-flow span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.compliance-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; padding-bottom: 60px; }.compliance-main { min-width: 0; }.compliance-main .section-heading { margin-bottom: 20px; }.compliance-main table { border: 1px solid var(--line); background: var(--panel); }.compliance-main td { font-size: 11px; line-height: 1.6; }.standards-card { margin-top: 20px; border: 1px solid var(--line); background: var(--panel); padding: 20px; }.standards-card h3 { margin: 0 0 16px; }.standards-card div { border-top: 1px solid var(--line); padding: 12px 0; }.standards-card b, .standards-card span { display: block; }.standards-card b { color: var(--cyan); font: 600 10px var(--display); }.standards-card span { color: var(--muted); font-size: 9px; margin-top: 3px; }.pipeline.four { grid-template-columns: repeat(4, 1fr); }.pipeline.four div { min-height: 145px; }.pipeline.four strong { margin-top: 35px; }

.site-footer { min-height: 112px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 18px 4vw; color: var(--muted); }.site-footer .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }.footer-logo { width: 105px; height: auto; }.site-footer .footer-center { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }.site-footer p, .site-footer > span, .site-footer a { margin: 0; font-size: 10px; }.site-footer a { color: #8da7ba; text-decoration: none; }.site-footer a:hover, .site-footer a:focus-visible { color: var(--cyan); text-decoration: underline; }.site-footer > span { justify-self: end; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 300; display: flex; align-items: center; gap: 9px; padding: 13px 17px; background: #10251f; color: var(--green); border: 1px solid var(--green); transform: translateY(100px); opacity: 0; transition: .3s; }.toast.show { transform: translateY(0); opacity: 1; }

.is-spinning svg { animation: spin .55s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chart-legend button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 8px; }
.chart-legend button::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--legend); }
.chart-legend button.muted { opacity: .32; text-decoration: line-through; }
.lab-kpis article { cursor: pointer; transition: border-color .2s, background .2s; }
.lab-kpis article:hover, .lab-kpis article:focus-visible, .lab-kpis article.active { border-color: var(--cyan); background: #0e2030; outline: 0; }
.topology-toolbar .icon-button.active { color: var(--cyan); border-color: var(--cyan); background: rgba(50,199,244,.08); }
.config-hint { color: #61788b; font-size: 8px; line-height: 1.6; }
.react-flow__node-device { width: 154px; color: var(--text); }
.device-node { width: 154px; height: 76px; min-width: 0; overflow: visible; border: 1px solid #294554; border-top: 2px solid var(--node-color); border-radius: 4px; background: linear-gradient(145deg, color-mix(in srgb, var(--node-color), transparent 94%), #0a1722 58%); box-shadow: 0 10px 24px rgba(0,0,0,.34); }
.device-node.selected-node { border-color: var(--node-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-color), transparent 25%), 0 12px 28px rgba(0,0,0,.42); }
.device-node-mic { border: 1px solid #46d7ea; border-top: 3px solid #7cf5ef; background: linear-gradient(145deg, rgba(50,199,244,.18), #0a1d29 52%, #10232c); box-shadow: 0 0 0 1px rgba(50,199,244,.28), 0 0 22px rgba(50,199,244,.16), inset 0 0 24px rgba(50,199,244,.08); }
.device-node-mic::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(124,245,239,.22); border-radius: 2px; pointer-events: none; }
.device-node-mic.selected-node { border-color: #9cfff7; box-shadow: 0 0 0 2px rgba(50,199,244,.5), 0 0 28px rgba(50,199,244,.28), inset 0 0 24px rgba(50,199,244,.1); }
.device-node header { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid #1b3342; }
.device-node header > span { width: auto; height: auto; max-width: 120px; margin-left: 0; overflow: hidden; border-radius: 0; background: transparent; color: #7690a3; font: 600 7px var(--display); letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.device-node .node-status { width: 6px; height: 6px; flex: 0 0 auto; border: 1px solid #07101a; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(64,213,155,.45); }
.device-node-mic header { border-bottom-color: rgba(124,245,239,.3); }
.device-node-mic header > span { color: #8ce9e8; }
.core-badge { margin-left: auto; padding: 2px 4px; border: 1px solid rgba(124,245,239,.5); color: #9cfff7; font: 700 6px var(--display); letter-spacing: .08em; }
.device-node-mic .node-status { background: #7cf5ef; box-shadow: 0 0 8px rgba(124,245,239,.9); }
.device-node > .device-node-body { height: 50px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0 9px; }
.device-node-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--node-color), transparent 55%); background: color-mix(in srgb, var(--node-color), transparent 89%); color: var(--node-color); }
.device-node-icon > svg { width: 15px; height: 15px; }
.device-node-mic .device-node-icon { width: 30px; height: 30px; border-color: rgba(124,245,239,.7); background: rgba(50,199,244,.18); box-shadow: inset 0 0 12px rgba(124,245,239,.2), 0 0 10px rgba(50,199,244,.15); }
.device-node-mic .device-node-icon > svg { width: 16px; height: 16px; }
.device-node-icon.core-icon { position: relative; }
.device-node-icon.core-icon small { position: absolute; right: -4px; bottom: -4px; padding: 1px 2px; border: 1px solid #07101a; background: #7cf5ef; color: #06202a; font: 700 5px var(--display); }
.device-node-copy { min-width: 0; }
.device-node-copy b, .device-node-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-node-copy b { font: 600 9px var(--display); }
.device-node-copy small { margin-top: 4px; color: #668094; font-size: 7px; }
.device-node-mic .device-node-copy b { color: #d9ffff; }
.device-node-mic .device-node-copy small { color: #83c8d0; }
.device-node div.react-flow__handle { width: 4px!important; height: 4px!important; min-width: 4px!important; min-height: 4px!important; padding: 0!important; border: 1px solid #06101a!important; border-radius: 50%; background: var(--node-color)!important; opacity: .82; transition: box-shadow .15s, opacity .15s; }
.device-node div.react-flow__handle:hover { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-color), transparent 72%); }
.react-flow__edge-path { stroke-width: 1.2; }
.react-flow__edge.selected .react-flow__edge-path { stroke-width: 2; }
.topology-stage #reactflow-root { position: relative; }
.topology-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.topology-lines path { fill: none; stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.topology-lines marker path { fill: #7890a5; stroke: none; }
.topology-stage .react-flow__edges { opacity: 0; pointer-events: none; }
.react-flow__nodes, .react-flow__controls, .react-flow__minimap { z-index: 2!important; }
.alert-empty { margin: 60px auto; color: var(--muted); text-align: center; font-size: 11px; }

@media (max-width: 1100px) {
    .site-header { grid-template-columns: 190px 1fr; }.header-status { display: none; }.main-tabs { justify-content: flex-end; overflow-x: auto; }.main-tabs button, .main-tabs .app-nav-link { padding-inline: 10px; font-size: 12px; }
    .product-grid, .suite-workbench { grid-template-columns: 1fr; }.replacement-layout { grid-template-columns: 1fr; }.detail-grid { grid-template-columns: 1fr 1fr; }.standard-foundation { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }.standard-model { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; padding: 20px 0 0; }.model-flow-track { grid-template-columns: 1fr 1fr; }.model-flow-track .flow-arrow { display: none; }.boundary-layout { grid-template-columns: 1fr; gap: 12px; }.boundary-bridge { flex-direction: row; min-height: 55px; }.boundary-bridge::before, .boundary-bridge::after { width: auto; height: 1px; }.rollout-layout { grid-template-columns: 1fr; }.architecture-layout { grid-template-columns: 120px 1fr; }.protocol-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }.protocol-rail > span { grid-column: 1 / -1; }
    .manager-app, .lab-app { width: calc(100% - 28px); }.manager-content-grid { grid-template-columns: 1fr; }.manager-region-grid, .manager-view-card-grid { grid-template-columns: 1fr 1fr; }.device-detail { display: none; }.lab-app { grid-template-columns: 175px 1fr; }.topology-layout { grid-template-columns: 150px minmax(0, 1fr); }.config-panel { display: block; grid-column: 1 / -1; max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }.workflow-view { grid-template-columns: 150px 1fr; }.workflow-inspector { display: none; }.trusted-overview { grid-template-columns: 1fr; }.trust-diagram { grid-template-columns: 1fr; }.policy-gate { flex-direction: row; }.compliance-grid { grid-template-columns: 1fr; }.standards-card { margin-top: 0; }
    .device-detail { display: block; min-height: 260px; }
    .usecase-scene { grid-template-columns: 1fr; grid-template-rows: 360px auto auto auto; }
    .scene-media { border-right: 0; border-bottom: 1px solid var(--line); }
    .scene-flow, .scene-boundary { grid-column: auto; }
    .domain-application-grid { grid-template-columns: 1fr 1fr; }
    .certification-workspace { grid-template-columns: 1fr 1fr; }.certification-report { grid-column: 1 / -1; grid-row: auto; }.evidence-chain { grid-column: 1 / -1; }
    .trusted-overview { grid-template-columns: repeat(2, 1fr); }.trusted-overview article:nth-child(3) { grid-column: 1 / -1; }.data-product-grid { grid-template-columns: repeat(2, 1fr); }.data-product-card:last-child { grid-column: 1 / -1; }.governance-layout { grid-template-columns: 1fr; }.trust-role-grid { grid-template-columns: 1fr 1fr; }.trust-flow { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 0; }.trust-flow article { display: block; min-height: 100px; padding: 0 12px; border-bottom: 0; border-left: 1px solid var(--line); }.trust-flow article:first-child { border-left: 0; }.trust-flow strong { margin-top: 8px; }
}

@media (max-width: 760px) {
    .shell { width: calc(100% - 28px); }.site-header { height: auto; min-height: 64px; padding: 10px 14px; display: block; }.brand { margin-bottom: 8px; }.brand small { display: none; }.main-tabs { justify-content: flex-start; height: 38px; }.main-tabs button { flex: 0 0 auto; }.main-tabs button.active::after { left: 8px; right: 8px; }
    .hero { height: 740px; min-height: 0; }.hero-media { background-position: 62% center; opacity: .58; }.hero-content { width: auto; margin: 0 22px; }.hero h1 { font-size: 46px; }.hero-lead { font-size: 16px; }.hero-metrics { grid-template-columns: 1fr 1fr; gap: 20px; }.scroll-cue { display: none; }
    .section { padding-top: 70px; }.section-heading { display: block; }.section-heading > p { width: auto; margin-top: 15px; }.suite-card, .mic-card .product-copy { padding: 25px; }.mic-card .product-copy { width: 83%; }.plc-replacement { padding-bottom: 70px; }.replacement-capabilities { grid-template-columns: 1fr; }.replacement-card { min-height: 0; padding: 21px; }.replacement-card h3 { margin-top: 22px; }.replacement-economics { padding: 21px; }.economics-table .economics-head { display: none; }.economics-table > div:not(.economics-head) { grid-template-columns: 1fr; gap: 5px; }.economics-table span::before { display: inline-block; width: 64px; color: #678196; font-size: 8px; }.economics-table span:nth-child(2)::before { content: "传统组合"; }.economics-table span:nth-child(3)::before { content: "MIC 路径"; }.standard-foundation { display: block; }.standard-code { min-height: 140px; }.standard-copy { padding: 25px 0 0; }.standard-copy h2 { font-size: 27px; overflow-wrap: anywhere; }.standard-actions { flex-direction: column; align-items: flex-start; gap: 10px; }.standard-actions > span { line-height: 1.5; }.standard-model { margin-top: 22px; padding: 18px 0 0; }.standard-model > div { width: auto; }.model-flow-track { grid-template-columns: 1fr; gap: 10px; }.model-flow-track article { min-height: 235px; padding: 20px; }.model-flow-track article > svg:not(.flow-arrow) { margin: 18px 0 13px; }.model-flow-track article p { min-height: 0; margin-bottom: 20px; }.boundary-panel { padding: 20px; }.boundary-panel h3 { font-size: 16px; }.rollout-route { grid-template-columns: 1fr; gap: 0; padding: 20px 17px; }.overview-rollout { padding-bottom: 70px; }.route-line { top: 8%; bottom: 8%; left: 21px; right: auto; width: 1px; height: auto; background: linear-gradient(var(--cyan), var(--purple), var(--green)); }.rollout-route article { padding: 0 0 24px 28px; }.rollout-route article + article { padding-top: 4px; border-left: 0; }.rollout-route article::before { position: absolute; left: 0; top: 3px; margin: 0; }.rollout-route article p { min-height: 0; }.rollout-signal { grid-template-columns: 1fr 1fr; }.architecture-layout { display: block; }.source-rail, .protocol-rail { display: none; }.layer { grid-template-columns: 58px 1fr; padding: 8px 5px; }.layer p { line-height: 1.5; }.layer-stack footer { display: none; }.detail-grid { grid-template-columns: 1fr; }.page-hero { padding-top: 60px; }.page-hero h1 { font-size: 38px; }
    .suite-feature { padding: 17px; }.mock-editor { grid-template-columns: 105px 1fr; }.tree-row { gap: 5px; }.tree-node { min-width: 0; padding: 7px; }.pipeline { grid-template-columns: 1fr 1fr; }
    .manager-app, .lab-app { width: calc(100% - 14px); margin-inline: auto; grid-template-columns: 1fr; height: auto; min-height: 0; min-width: 0; }.manager-nav { display: flex; flex-direction: row; gap: 4px; padding: 7px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }.manager-logo, .manager-tenant { display: none; }.manager-nav > button { flex: 0 0 auto; min-height: 36px; padding-inline: 10px; }.manager-nav > button.active { box-shadow: inset 0 -2px var(--cyan); }.manager-main, .lab-main { padding: 10px; overflow: visible; }.manager-sidebar, .lab-sidebar { min-width: 0; overflow: hidden; }.manager-toolbar, .lab-toolbar { height: auto; align-items: flex-start; }.manager-toolbar > div:last-child .search, .manager-toolbar .icon-button, .lab-toolbar .ghost-button { display: none; }.manager-kpis, .lab-kpis, .manager-view-summary { grid-template-columns: 1fr 1fr; }.manager-content-grid, .manager-bottom-grid, .manager-region-grid, .manager-view-card-grid { grid-template-columns: 1fr; }.device-table-wrap, .manager-wide-card { overflow-x: auto; }.fleet-card { min-width: 0; overflow: hidden; }.device-table-wrap table { min-width: 680px; }.manager-main { overflow-x: hidden; }.manager-bottom-grid { min-width: 0; }.release-lanes, .link-health, .manager-data-table { min-width: 680px; }.manager-alert-row { min-width: 620px; }
    .usecase-selector { display: flex; overflow-x: auto; }.usecase-selector button, .usecase-selector button:not(.active) { display: flex; flex: 0 0 270px; }.lab-app { height: 1040px; }.lab-sidebar { display: block; border-right: 0; border-bottom: 1px solid var(--line); }.lab-brand, .lab-runtime { display: none; }.lab-sidebar nav { display: flex; overflow-x: auto; padding: 7px; }.lab-sidebar nav button { flex: 0 0 auto; min-height: 38px; padding-inline: 10px; }.lab-main { overflow: hidden; }.lab-toolbar h2 { font-size: 19px; }.dashboard-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 270px); overflow-y: auto; }.topology-layout { grid-template-columns: 1fr; overflow-y: auto; }.node-palette { display: block; max-height: 170px; overflow: auto; }.topology-stage { min-height: 480px; }.config-panel { display: block; grid-column: auto; max-height: 330px; }.workflow-view { grid-template-columns: 1fr; overflow-y: auto; }.workflow-view > aside:first-child { display: block; max-height: 180px; overflow: auto; }.mes-view { overflow: auto; }.mes-table { min-width: 850px; }.semantic-map > div { flex-wrap: wrap; }.alert-row { grid-template-columns: 30px 1fr; }.alert-row time, .alert-row button { display: none; }.app-context-strip { display: grid; gap: 12px; }.app-context-strip > svg { display: none; }
    .usecase-scene { width: calc(100% - 28px); grid-template-rows: 260px auto auto auto; margin-bottom: 60px; }
    .scene-intro { padding: 30px 22px; }
    .scene-intro h2 { font-size: 26px; }
    .scene-metrics { gap: 8px; }
    .scene-metrics b { font-size: 16px; }
    .scene-flow, .scene-boundary { grid-template-columns: 1fr; }
    .scene-flow article, .scene-boundary div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .scene-flow article { padding: 24px 22px; }
    .scene-boundary div { padding: 16px 22px; }
    .domain-applications { padding-bottom: 60px; }.domain-application-grid { grid-template-columns: 1fr; }.domain-application-card { min-height: 0; padding: 20px; }.domain-application-card p { min-height: 0; }.domain-application-card h3 { margin-top: 22px; }
    .certification-head { align-items: flex-start; }.certification-status { flex-basis: 125px; }.certification-workspace { grid-template-columns: 1fr; }.certification-report, .evidence-chain { grid-column: 1; }.certification-flow { align-items: stretch; flex-direction: column; gap: 8px; }.certification-flow > svg { display: none; }.certification-flow div { padding: 5px 0; }.evidence-chain > div { grid-template-columns: 20px 1fr; }.evidence-chain code { grid-column: 2; }.report-actions { flex-direction: column; }
    .trusted-overview { grid-template-columns: 1fr; padding-block: 28px 42px; }.trusted-overview article:nth-child(3) { grid-column: auto; }.trusted-overview article { min-height: 0; padding: 22px; }.trusted-overview article > svg { margin: 20px 0 14px; }.trusted-products, .trusted-governance { padding-bottom: 55px; }.data-product-grid { grid-template-columns: 1fr; }.data-product-card:last-child { grid-column: auto; }.data-product-card p { min-height: 0; }.trust-role-grid { grid-template-columns: 1fr; }.trust-flow { display: block; border-top: 1px solid var(--line-bright); }.trust-flow article, .trust-flow article:first-child { display: grid; grid-template-columns: 28px 1fr; min-height: 0; padding: 14px 0; border-left: 0; }.trust-flow article + article { border-top: 1px solid var(--line); }.trust-flow strong { margin-top: 0; }.zone-items { flex-direction: column; }.zone-items > svg { transform: rotate(90deg); }.zone-items > div { width: 100%; }.compliance-main { overflow-x: auto; }.compliance-main table { min-width: 700px; }.pipeline.four { grid-template-columns: 1fr; }.site-footer { grid-template-columns: 1fr; padding: 25px 18px; gap: 12px; text-align: center; }.site-footer .footer-brand, .site-footer > span { justify-self: center; }.site-footer .footer-center { grid-row: 2; }
    .applications-page-hero-media img { aspect-ratio: 16 / 10; }.applications-page-hero-media::after { background: linear-gradient(0deg, rgba(4, 9, 13, .88) 0%, rgba(4, 9, 13, .3) 72%, transparent 100%); }.applications-page-hero-copy { left: 18px; bottom: 20px; width: calc(100% - 36px); }.applications-page-hero-copy h1 { font-size: 30px; margin-bottom: 12px; }.applications-page-hero-copy > p:last-child { font-size: 13px; line-height: 1.7; }
}