/* S22 exclusive presentation. Dark hardware editorial; 12px media corners, 6px controls.
 * Chinese HPC and shared brand infrastructure are not modified.
 * User density/readability constraints override generic skill whitespace/eyebrow defaults. */
.s22-firewall {
 --s22-bg:#080e13; --s22-surface:#101b24; --s22-ink:#e6edf0;
 --s22-muted:#adbec6; --s22-accent:#79b5b7; --s22-cta:#17464d;
 background:var(--s22-bg); color:var(--s22-ink); overflow:clip;
 font-family:"PingFang SC","Microsoft YaHei",sans-serif;
}
.s22-firewall * {box-sizing:border-box}
.s22-firewall h1,.s22-firewall h2,.s22-firewall h3,.s22-firewall p,.s22-firewall figure,
.s22-firewall ul,.s22-firewall ol,.s22-firewall dl,.s22-firewall dd {margin:0}
.s22-firewall ul,.s22-firewall ol {padding:0;list-style:none}
.s22-firewall a {color:inherit;text-decoration:none}
.s22-firewall img {display:block;max-width:100%}
.s22-wrap {width:min(1280px,calc(100% - 96px));margin-inline:auto}
.s22-section {padding:76px 0;scroll-margin-top:88px}
.s22-firewall h2 {font-size:clamp(34px,3.45vw,50px);line-height:1.25;letter-spacing:-.035em;text-wrap:balance}
.s22-firewall p {font-size:17px;line-height:1.85;color:var(--s22-muted)}
.s22-firewall h3 {font-size:23px;line-height:1.5;letter-spacing:-.02em}
.s22-eyebrow,.s22-overline {font-size:14px!important;font-weight:600;line-height:1.6!important;letter-spacing:.055em;color:var(--s22-accent)!important}
.s22-hero {position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;font-family:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif}
.s22-hero-media,.s22-hero-shade {position:absolute;inset:0;z-index:-1}
.s22-hero-media img {height:100%;width:100%;object-fit:cover;object-position:62% 52%;filter:saturate(.78)}
.s22-hero-shade {background:linear-gradient(90deg,rgba(8,14,19,.97),rgba(8,14,19,.75) 36%,rgba(8,14,19,.12) 75%),linear-gradient(0deg,#080e13,transparent 25%)}
.s22-hero-content {width:100%;max-width:1360px;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:160px 40px clamp(96px,19svh,172px)}
.s22-hero h1 {font-size:clamp(58px,6.4vw,92px);line-height:1.06;font-weight:700;letter-spacing:-.02em;margin:22px 0 28px;max-width:760px;color:#f4f8fc;text-shadow:0 2px 40px rgba(0,0,0,.5);white-space:normal}
.s22-hero .s22-lead {max-width:640px;font-size:20px;color:#bccad9;line-height:1.9}
.s22-actions {display:flex;flex-wrap:wrap;gap:18px;margin-top:38px}
.s22-button {display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;min-height:54px;border:1px solid transparent;border-radius:8px;white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:.02em;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}

.s22-button--primary {background:#5fd3e6;color:#04141c!important;box-shadow:0 8px 30px rgba(95,211,230,.22)}
.s22-button--primary:hover {background:#77e0f0;box-shadow:0 12px 36px rgba(95,211,230,.30)}
.s22-button--outline {background:transparent;border-color:rgba(140,170,200,.30);color:#e9eff7!important}
.s22-button--outline:hover {border-color:#5fd3e6;color:#5fd3e6!important}
.s22-button:hover {transform:translateY(-2px)}

.s22-button:active {transform:scale(.98)}
.s22-firewall a:focus-visible,.s22-motion-toggle:focus-visible {outline:2px solid var(--s22-accent);outline-offset:5px}
.s22-products {padding-top:58px}
.s22-product-heading {max-width:820px}
.s22-product-heading p {margin-top:20px;max-width:730px}
.s22-product-layout {display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:38px}
.s22-equipment-photo {min-width:0}
.s22-device-mat {overflow:hidden;border-radius:12px;background:#e5e9e9;padding:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.s22-device-mat img {width:100%;height:auto;aspect-ratio:760/460;object-fit:contain;mix-blend-mode:multiply}
.s22-equipment-photo figcaption {display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px}
.s22-equipment-photo strong {font-size:17px;font-weight:500}
.s22-equipment-photo a {font-size:14px;color:var(--s22-accent)}
.s22-selection-notes {display:grid;gap:24px}
.s22-selection-notes h3 {font-size:22px;margin-bottom:7px}
.s22-selection-notes p {font-size:16px}
.s22-selection-notes>div {padding-left:22px;border-left:2px solid rgba(121,181,183,.25)}
.s22-product-note {max-width:1010px;font-size:14px!important;margin-top:30px!important;line-height:1.8!important}
.s22-network {position:relative;isolation:isolate;background:var(--s22-surface)}
.s22-network-backdrop {position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#101b24 5%,rgba(16,27,36,.9) 45%,rgba(16,27,36,.82)),url("../images/about-temp/data-center-server-racks.jpg") center 35%/cover no-repeat}
.s22-network-heading {max-width:840px}
.s22-network-heading h2 {margin-top:14px}
.s22-network-heading>p:last-child {margin-top:20px;max-width:790px}
.s22-motion-toggle {margin-top:28px;accent-color:var(--s22-accent);width:15px;height:15px;vertical-align:middle}
.s22-motion-label {font-size:14px;color:var(--s22-muted);margin-left:6px;vertical-align:middle;cursor:pointer}
.s22-signature {margin-top:14px;border-radius:12px;overflow:hidden;background:rgba(8,14,19,.5);box-shadow:inset 0 1px 0 rgba(173,190,198,.12)}
.s22-flow-diagram {display:block;width:100%;height:auto}
.s22-flow-diagram--mobile {display:none}
.s22-flow-heading text,.s22-route-label text {fill:var(--s22-muted);font:500 13px/1 "PingFang SC",sans-serif;letter-spacing:.06em}
.s22-flow-panel rect {fill:rgba(8,14,19,.62);stroke:rgba(173,190,198,.25)}
.s22-flow-panel rect:nth-child(2) {fill:#172e37;stroke:var(--s22-accent);stroke-width:1.25}
.s22-flow-art {fill:none;stroke:#91b9bd;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.s22-flow-art circle {fill:var(--s22-accent);stroke:none}
.s22-flow-copy text {fill:var(--s22-ink);font:500 17px/1.3 "PingFang SC","Microsoft YaHei",sans-serif}
.s22-flow-copy text.s22-flow-copy--muted {fill:var(--s22-muted);font-size:14px}
.s22-flow-routes .s22-route {stroke:#648d94;stroke-width:1.35}
.s22-flow-routes .s22-route--deny {stroke:#b8a08e}
.s22-deny-stop {fill:none;stroke:#cfac99;stroke-width:2;opacity:.5}
.s22-packet {fill:#b5e4df;offset-rotate:0deg;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}
.s22-packet--allow-in {offset-path:path("M260 160H370Q390 160 390 180V190Q390 210 410 210H465");animation-name:s22-allow-in}
.s22-packet--allow-out {offset-path:path("M735 190H820Q840 190 840 170V150Q840 130 860 130H940");animation-name:s22-allow-out}
.s22-packet--allow-cloud {offset-path:path("M735 210H820Q840 210 840 230V275Q840 295 860 295H940");animation-name:s22-allow-cloud}
.s22-packet--deny {offset-path:path("M260 280H370Q390 280 390 260V250H465");animation-name:s22-deny;fill:#cfac99}
.s22-packet--audit {offset-path:path("M600 310V410");animation-name:s22-audit}
@keyframes s22-allow-in {0%,7%{offset-distance:0%;opacity:0}8%,29%{opacity:1}30%,100%{offset-distance:100%;opacity:0}}
@keyframes s22-allow-out {0%,30%{offset-distance:0%;opacity:0}31%,48%{opacity:1}49%,100%{offset-distance:100%;opacity:0}}
@keyframes s22-allow-cloud {0%,33%{offset-distance:0%;opacity:0}34%,54%{opacity:1}55%,100%{offset-distance:100%;opacity:0}}
@keyframes s22-deny {0%,52%{offset-distance:0%;opacity:0}53%{opacity:1}69%,77%{offset-distance:100%;opacity:1}79%,100%{opacity:0}}
@keyframes s22-audit {0%,79%{offset-distance:0%;opacity:0}80%{opacity:1}95%{offset-distance:100%;opacity:1}97%,100%{opacity:0}}
.s22-motion-toggle:checked~.s22-signature * {animation-play-state:paused}
.s22-capabilities {display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;margin-top:38px}
.s22-capabilities h3 {font-size:32px;line-height:1.4}
.s22-capabilities dl {display:grid;gap:22px}
.s22-capabilities dl>div {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.s22-capabilities dt {font-size:17px;font-weight:600;line-height:1.6}
.s22-capabilities dd {font-size:16px;color:var(--s22-muted);line-height:1.75}
.s22-context-note {margin-top:30px;padding-left:20px;border-left:2px solid rgba(121,181,183,.38)}
.s22-context-note strong {font-size:15px;font-weight:500;color:var(--s22-ink)}
.s22-context-note p {font-size:15px!important;margin-top:6px!important;line-height:1.8!important}
.s22-network .s22-context-note {max-width:950px}
.s22-migration-layout {display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.s22-migration-copy>p {margin-top:22px}
.s22-migration-image {overflow:hidden;border-radius:12px}
.s22-migration-image img {width:100%;height:440px;object-fit:cover;object-position:54% center;filter:saturate(.72)}
.s22-timeline {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin-top:40px!important;padding-top:23px!important;border-top:1px solid rgba(173,190,198,.3)}
.s22-timeline strong {font-size:23px;font-weight:500}
.s22-timeline p {font-size:15px;margin-top:9px}
.s22-handover {background:var(--s22-surface)}
.s22-handover-layout {display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.s22-handover-layout>div>p {margin-top:22px}
.s22-text-link {display:inline-block;margin-top:25px;font-size:15px;color:var(--s22-accent)!important}
.s22-handover-record {padding:30px 34px;border-radius:12px;background:#172731;box-shadow:inset 0 1px 0 rgba(173,190,198,.13)}
.s22-handover-record h3 {font-size:21px}
.s22-handover-record p {font-size:16px!important}
.s22-handover-record ul {display:grid;gap:13px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(173,190,198,.22);font-size:16px;color:var(--s22-ink)}
.s22-final {padding:68px 0 72px;background:linear-gradient(90deg,#0c171d,rgba(8,14,19,.94)),url("../images/about-temp/network-server-enclosure.jpg") center/cover}
.s22-final .s22-wrap {display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:40px}
.s22-final h2 {font-size:clamp(32px,3.1vw,44px)}
.s22-final p {margin-top:16px;max-width:650px}
.s22-final .s22-button {grid-column:2;grid-row:1/3}
.s22-firewall .s22-reveal-pending {opacity:0;transform:translateY(22px)}
.s22-firewall [data-s22-reveal] {transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.s22-firewall .s22-reveal-visible {opacity:1;transform:none}
@media(min-width:801px) and (prefers-reduced-motion:no-preference) {
 .s22-migration-image img {transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
 .s22-migration-image:hover img {transform:scale(1.025)}
}
@media(max-width:1100px) {
 .s22-product-layout,.s22-migration-layout {gap:36px}
 .s22-capabilities {grid-template-columns:.7fr 1.3fr;gap:30px}
 .s22-capabilities dl>div {grid-template-columns:1fr;gap:5px}
 .s22-equipment-photo figcaption {align-items:start;flex-direction:column;gap:7px}
 .s22-handover-layout {gap:48px}
}
@media(max-width:800px) {
 .s22-wrap {width:calc(100% - 40px)}
 .s22-section {padding:46px 0}
 .s22-firewall h2 {font-size:32px;line-height:1.3}
 .s22-firewall p {font-size:16px;line-height:1.8}
 .s22-hero {min-height:0;height:auto;max-height:none}
 .s22-hero-content.s22-wrap {width:100%;padding:48px 20px;justify-content:flex-start}
 .s22-hero-media img {object-position:68% center}
 .s22-hero-shade {background:linear-gradient(90deg,rgba(8,14,19,.92),rgba(8,14,19,.43)),linear-gradient(0deg,#080e13,transparent 55%)}
 .s22-hero h1 {font-size:clamp(40px,12vw,72px);line-height:1.06;font-weight:700;margin:22px 0 28px;letter-spacing:-.02em;white-space:normal;max-width:100%}
 .s22-hero .s22-lead {font-size:18px;line-height:1.8}
 .s22-eyebrow,.s22-overline {font-size:13px!important;letter-spacing:.045em}
 .s22-actions {flex-direction:column;width:100%;gap:12px;margin-top:28px}
 .s22-button {justify-content:center;min-height:50px;width:100%;padding:13px 20px;font-size:15px}
 .s22-product-heading p {margin-top:16px}
 .s22-product-layout {grid-template-columns:1fr;gap:30px;margin-top:28px}
 .s22-device-mat {padding:12px}
 .s22-equipment-photo strong {font-size:16px}
 .s22-selection-notes {gap:22px}
 .s22-selection-notes h3 {font-size:21px}
 .s22-selection-notes>div {padding-left:16px}
 .s22-product-note {font-size:14px!important;margin-top:26px!important}
 .s22-network-heading h2 {margin-top:12px}
 .s22-network-heading>p:last-child {margin-top:17px}
 .s22-signature {margin-inline:-5px}
 .s22-flow-diagram--desktop {display:none}
 .s22-flow-diagram--mobile {display:block}
 .s22-flow-heading text,.s22-route-label text {font-size:12px}
 .s22-flow-copy text {font-size:15px}
 .s22-flow-copy text.s22-flow-copy--muted {font-size:13px}
 .s22-flow-diagram--mobile .s22-packet--allow-in {offset-path:path("M180 120V170Q180 185 165 185H145Q130 185 130 200V215")}
 .s22-flow-diagram--mobile .s22-packet--allow-out {offset-path:path("M145 335V370Q145 385 125 385H95Q75 385 75 410")}
 .s22-flow-diagram--mobile .s22-packet--allow-cloud {offset-path:path("M215 335V370Q215 385 235 385H265Q285 385 285 410")}
 .s22-flow-diagram--mobile .s22-packet--deny {offset-path:path("M300 120V160Q300 175 315 175Q330 175 330 190V260Q330 275 315 275H295")}
 .s22-flow-diagram--mobile .s22-packet--audit {offset-path:path("M180 335V555")}
 .s22-capabilities {grid-template-columns:1fr;gap:24px;margin-top:30px}
 .s22-capabilities h3 {font-size:27px}
 .s22-capabilities dl {gap:22px}
 .s22-capabilities dt {font-size:17px}
 .s22-capabilities dd {font-size:16px}
 .s22-context-note {padding-left:15px;margin-top:25px}
 .s22-migration-layout {grid-template-columns:1fr;gap:28px}
 .s22-migration-copy h2 br {display:none}
 .s22-migration-image img {height:auto;aspect-ratio:1.32}
 .s22-timeline {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px!important}
 .s22-timeline strong {font-size:21px}
 .s22-timeline p {font-size:15px}
 .s22-handover-layout {grid-template-columns:1fr;gap:28px}
 .s22-handover-record {padding:24px}
 .s22-handover-record h3 {font-size:20px}
 .s22-final {padding:46px 0}
 .s22-final .s22-wrap {display:block}
 .s22-final h2 {font-size:31px}
 .s22-final .s22-button {margin-top:26px}
}
@media(prefers-reduced-motion:reduce) {
 .s22-firewall * {animation:none!important;transition:none!important}
 .s22-firewall .s22-reveal-pending {opacity:1;transform:none}
 .s22-packet {display:none}
 .s22-motion-toggle,.s22-motion-label {display:none}
 .s22-button:hover,.s22-migration-image:hover img {transform:none}
}

.s22-firewall .flow-batch-diagram[data-flow-diagram] { width: 100%; margin: 32px 0 0; border-radius: 16px; overflow: hidden; }
.s22-firewall .flow-batch-diagram__link { display: block; border-radius: inherit; }
.s22-firewall .flow-batch-diagram img { display: block; width: 100%; height: auto; max-width: 100%; }