:root {
  --infra-cyan: #47c4dc;
  --infra-green: #63cfa0;
  --infra-amber: #e9b45b;
  --infra-rose: #e97c88;
  --infra-ink: #091b25;
  --infra-line: rgba(145, 198, 214, .2);
}

.infrastructure-feature-page { background: #071922; }
.infrastructure-feature-page .feature-header { background: rgba(7, 25, 34, .94); }
.infrastructure-page-nav { position: sticky; top: 72px; z-index: 24; color: #dbecef; background: rgba(7,25,34,.96); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(128,191,209,.2); backdrop-filter: blur(16px); }
.infrastructure-page-nav-inner { display: flex; align-items: center; width: min(1460px,100%); min-height: 54px; margin: 0 auto; padding: 0 32px; }
.infrastructure-page-nav-title { flex: 0 0 auto; margin-right: 28px; color: var(--infra-green); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.infrastructure-page-nav-links { display: flex; align-items: stretch; gap: 28px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.infrastructure-page-nav-links::-webkit-scrollbar { display: none; }
.infrastructure-page-nav-links a { position: relative; display: flex; align-items: center; min-height: 54px; color: #98afb8; font-size: 13px; font-weight: 650; white-space: nowrap; transition: color .2s; }
.infrastructure-page-nav-links a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--infra-green); opacity: 0; transform: scaleX(.3); transition: opacity .2s, transform .2s; }
.infrastructure-page-nav-links a:hover, .infrastructure-page-nav-links a:focus-visible, .infrastructure-page-nav-links a.is-current { color: #fff; }
.infrastructure-page-nav-links a.is-current::after { opacity: 1; transform: scaleX(1); }

.infrastructure-feature-page .product-hero { min-height: 715px; background: radial-gradient(circle at 76% 44%, rgba(99,207,160,.09), transparent 31%), linear-gradient(145deg,#071922,#0b2631 65%,#071922); }
.infrastructure-feature-page .product-hero::before { background-image: linear-gradient(rgba(87,173,198,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(87,173,198,.055) 1px,transparent 1px); background-size: 46px 46px; }
.infrastructure-feature-page .product-hero-copy { max-width: 650px; }
.infrastructure-feature-page .product-hero-copy h1 span { color: #8fdfbd; }
.infrastructure-feature-page .product-hero-lead { max-width: 680px; }
.infrastructure-feature-page .product-stats b { color: var(--infra-green); }
.infrastructure-hero-visual { position: absolute; top: 132px; right: clamp(26px,5.6vw,92px); width: min(42vw,610px); min-height: 410px; color: #edf8fa; }
.infrastructure-window { overflow: hidden; border: 1px solid rgba(149,205,220,.27); background: rgba(8,27,37,.9); box-shadow: 0 32px 80px rgba(0,0,0,.34); }
.infrastructure-window-bar { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 18px; border-bottom: 1px solid rgba(149,205,220,.16); color: #87a4ae; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.infrastructure-window-bar b { color: var(--infra-green); }

.infrastructure-section { position: relative; padding: 108px clamp(26px,6vw,96px); }
.infrastructure-section-light { color: #102b35; background: #f3f7f7; }
.infrastructure-section-white { color: #102b35; background: #fff; }
.infrastructure-section-dark { color: #eff9fa; background: #0a222d; }
.infrastructure-heading { max-width: 790px; margin-bottom: 52px; }
.infrastructure-heading h2, .infrastructure-split-copy h2, .infrastructure-related h2 { max-width: 800px; margin: 14px 0 20px; font-size: clamp(34px,4vw,62px); line-height: 1.03; letter-spacing: 0; }
.infrastructure-heading > p:last-child, .infrastructure-split-copy > p, .infrastructure-related > div > p { max-width: 720px; margin: 0; color: #526a73; font-size: 17px; line-height: 1.75; }
.infrastructure-section-dark .infrastructure-split-copy > p, .infrastructure-related > div > p { color: #a7bbc2; }
.infrastructure-intro-grid, .infrastructure-split { display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); gap: clamp(48px,8vw,120px); align-items: center; }
.infrastructure-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #ccd9dc; border-left: 1px solid #ccd9dc; }
.infrastructure-card-grid article { min-height: 250px; padding: 30px; border-right: 1px solid #ccd9dc; border-bottom: 1px solid #ccd9dc; }
.infrastructure-card-grid small, .infrastructure-label { color: #4d8491; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.infrastructure-card-grid h3 { margin: 34px 0 12px; font-size: 22px; line-height: 1.15; }
.infrastructure-card-grid p { margin: 0; color: #5a6f77; font-size: 14px; line-height: 1.65; }
.infrastructure-detail-list { margin: 30px 0 0; padding: 0; list-style: none; }
.infrastructure-detail-list li { position: relative; margin: 0; padding: 14px 0 14px 30px; border-bottom: 1px solid rgba(151,197,211,.17); color: #c4d5da; line-height: 1.55; }
.infrastructure-detail-list li::before { position: absolute; top: 19px; left: 0; width: 9px; height: 9px; content: ""; border: 2px solid var(--infra-green); transform: rotate(45deg); }
.infrastructure-detail-list a { color: #8edbea; text-decoration: underline; text-underline-offset: 4px; }
.infrastructure-flow { display: grid; gap: 10px; }
.infrastructure-flow-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; min-height: 74px; padding: 12px 18px; border: 1px solid rgba(142,195,211,.2); background: rgba(255,255,255,.035); }
.infrastructure-flow-row > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(71,196,220,.48); color: var(--infra-cyan); font-size: 12px; font-weight: 800; }
.infrastructure-flow-row strong, .infrastructure-flow-row small { display: block; }
.infrastructure-flow-row small { margin-top: 5px; color: #94abb3; }
.infrastructure-flow-row > b { color: var(--infra-green); font-size: 10px; text-transform: uppercase; }
.infrastructure-callout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: center; padding: 48px; border-left: 4px solid var(--infra-green); background: #e7eeef; }
.infrastructure-callout h3 { margin: 12px 0 16px; font-size: clamp(28px,3vw,44px); line-height: 1.08; }
.infrastructure-callout p { margin: 0; color: #536b74; line-height: 1.7; }
.infrastructure-callout-aside { padding-left: 34px; border-left: 1px solid #bdcccf; }
.infrastructure-callout-aside strong, .infrastructure-callout-aside span { display: block; }
.infrastructure-callout-aside span { margin-top: 10px; color: #60757d; font-size: 14px; line-height: 1.6; }
.infrastructure-related { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; color: #eef8fa; background: #071922; }
.infrastructure-related-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(145,197,214,.2); border-left: 1px solid rgba(145,197,214,.2); }
.infrastructure-related-links a { display: flex; justify-content: space-between; align-items: center; min-height: 76px; padding: 18px 22px; border-right: 1px solid rgba(145,197,214,.2); border-bottom: 1px solid rgba(145,197,214,.2); color: #d7e9ed; font-weight: 700; transition: color .2s,background .2s; }
.infrastructure-related-links a:hover, .infrastructure-related-links a:focus-visible { color: #fff; background: rgba(99,207,160,.07); }
.infrastructure-related-links a span { color: var(--infra-green); }

.infrastructure-page-pager { display: grid; grid-template-columns: 1fr 270px 1fr; color: #e8f5f7; background: #0b2530; border-top: 1px solid rgba(145,197,214,.2); }
.infrastructure-page-pager a { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; align-items: center; min-height: 118px; padding: 24px clamp(24px,5vw,76px); transition: background .2s; }
.infrastructure-page-pager a > span { grid-row: 1 / 3; color: var(--infra-green); font-size: 24px; }
.infrastructure-page-pager a small, .infrastructure-page-pager a strong { display: block; }
.infrastructure-page-pager a small { color: #7f9aa4; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.infrastructure-page-pager a strong { font-size: 16px; }
.infrastructure-page-pager a:hover, .infrastructure-page-pager a:focus-visible { background: rgba(99,207,160,.07); }
.infrastructure-pager-next { text-align: right; }
.infrastructure-pager-next > span { grid-column: 2; justify-self: end; }
.infrastructure-page-pager > p { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 20px; border-right: 1px solid rgba(145,197,214,.17); border-left: 1px solid rgba(145,197,214,.17); text-align: center; }
.infrastructure-page-pager > p span { color: var(--infra-green); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.infrastructure-page-pager > p strong { margin-top: 7px; font-size: 13px; }

/* IIP knowledge map */
.iip-map { position: relative; min-height: 400px; background: radial-gradient(circle at center,rgba(99,207,160,.12),transparent 45%); }
.iip-map::before, .iip-map::after { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; border: 1px solid rgba(71,196,220,.15); border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.iip-map::after { width: 200px; height: 200px; border-style: dashed; }
.iip-core { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 108px; height: 108px; border: 1px solid var(--infra-green); background: #0b2c36; box-shadow: 0 0 45px rgba(99,207,160,.2); transform: translate(-50%,-50%) rotate(45deg); }
.iip-core div { text-align: center; transform: rotate(-45deg); }
.iip-core strong, .iip-core small { display: block; }
.iip-core strong { font-size: 19px; }
.iip-core small { margin-top: 5px; color: #87aab3; font-size: 8px; text-transform: uppercase; }
.iip-node { position: absolute; z-index: 3; min-width: 145px; padding: 13px 15px; border: 1px solid rgba(145,201,216,.24); background: rgba(7,25,34,.95); }
.iip-node::before { position: absolute; width: 38px; height: 1px; content: ""; background: rgba(99,207,160,.55); }
.iip-node strong, .iip-node small { display: block; }
.iip-node strong { font-size: 11px; }
.iip-node small { margin-top: 5px; color: #819ca5; font-size: 9px; }
.iip-node.asset { top: 58px; left: 28px; }
.iip-node.asset::before { right: -32px; bottom: -13px; transform: rotate(31deg); }
.iip-node.network { top: 58px; right: 28px; text-align: right; }
.iip-node.network::before { bottom: -13px; left: -32px; transform: rotate(-31deg); }
.iip-node.state { bottom: 48px; left: 34px; }
.iip-node.state::before { top: -13px; right: -32px; transform: rotate(-31deg); }
.iip-node.timeline { right: 34px; bottom: 48px; text-align: right; }
.iip-node.timeline::before { top: -13px; left: -32px; transform: rotate(31deg); }

/* Asset inventory */
.inventory-body { padding: 20px; }
.inventory-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.inventory-summary div { padding: 14px; border: 1px solid rgba(145,201,216,.18); background: rgba(255,255,255,.025); }
.inventory-summary strong, .inventory-summary small { display: block; }
.inventory-summary strong { color: #edf8fa; font-size: 22px; }
.inventory-summary small { margin-top: 5px; color: #7f9aa4; font-size: 9px; text-transform: uppercase; }
.inventory-table { margin-top: 12px; border: 1px solid rgba(145,201,216,.18); }
.inventory-row { display: grid; grid-template-columns: 36px 1.25fr 1fr 72px; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid rgba(145,201,216,.12); }
.inventory-row:last-child { border-bottom: 0; }
.inventory-row > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(71,196,220,.35); color: var(--infra-cyan); font-size: 9px; }
.inventory-row strong, .inventory-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-row strong { font-size: 10px; }
.inventory-row small { color: #809aa3; font-size: 9px; }
.inventory-row b { color: var(--infra-green); font-size: 9px; text-align: right; }
.inventory-diff { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-left: 2px solid var(--infra-amber); background: rgba(233,180,91,.07); font-size: 10px; }
.inventory-diff b { color: var(--infra-amber); }

/* Network discovery */
.network-map { position: relative; min-height: 400px; }
.network-line { position: absolute; height: 1px; background: rgba(71,196,220,.38); transform-origin: left center; }
.network-line.dashed { background: repeating-linear-gradient(90deg,rgba(233,180,91,.7) 0 5px,transparent 5px 10px); }
.network-node { position: absolute; z-index: 2; min-width: 106px; padding: 12px; border: 1px solid rgba(144,200,215,.25); background: #0a2632; text-align: center; }
.network-node i { display: block; width: 9px; height: 9px; margin: 0 auto 8px; border-radius: 50%; background: var(--node); box-shadow: 0 0 13px var(--node); }
.network-node strong, .network-node small { display: block; }
.network-node strong { font-size: 10px; }
.network-node small { margin-top: 4px; color: #78939d; font-size: 8px; }
.network-node.scanner { top: 164px; left: 32px; --node:var(--infra-green); }
.network-node.gateway { top: 164px; left: 43%; --node:var(--infra-amber); }
.network-node.server { top: 52px; right: 38px; --node:var(--infra-cyan); }
.network-node.nas { right: 38px; bottom: 54px; --node:var(--infra-rose); }
.network-node.internet { top: 164px; right: 35px; --node:#8ea6ff; }
.network-line.l1 { top: 191px; left: 135px; width: 31%; }
.network-line.l2 { top: 175px; left: 56%; width: 31%; transform: rotate(-23deg); }
.network-line.l3 { top: 205px; left: 56%; width: 31%; transform: rotate(23deg); }
.network-line.l4 { top: 191px; left: 56%; width: 26%; }
.network-status { position: absolute; right: 16px; bottom: 14px; color: #78949d; font-size: 9px; }

/* System State */
.system-state-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.system-state-column { border: 1px solid rgba(145,201,216,.18); }
.system-state-column header { display: flex; justify-content: space-between; padding: 13px; border-bottom: 1px solid rgba(145,201,216,.14); }
.system-state-column header span { font-size: 10px; font-weight: 800; }
.system-state-column header b { color: var(--infra-green); font-size: 9px; }
.system-state-item { display: grid; grid-template-columns: 27px 1fr; gap: 9px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(145,201,216,.1); }
.system-state-item:last-child { border-bottom: 0; }
.system-state-item > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(71,196,220,.33); color: var(--infra-cyan); font-size: 8px; }
.system-state-item strong, .system-state-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-state-item strong { font-size: 9px; }
.system-state-item small { margin-top: 3px; color: #78939d; font-size: 8px; }
.system-state-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-left: 2px solid var(--infra-green); background: rgba(99,207,160,.06); font-size: 9px; }
.system-state-footer b { color: var(--infra-green); text-transform: uppercase; }

@media (max-width:1120px) {
  .infrastructure-feature-page .product-hero { min-height: 690px; }
  .infrastructure-hero-visual { right: 28px; width: 43vw; }
  .infrastructure-intro-grid, .infrastructure-split { grid-template-columns: 1fr; gap: 52px; }
  .infrastructure-card-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:900px) {
  .infrastructure-page-nav { top: 64px; }
  .infrastructure-page-nav-inner { padding: 0 20px; }
  .infrastructure-feature-page .product-hero { min-height: 0; padding: 70px 24px 0; }
  .infrastructure-hero-visual { position: relative; top: auto; right: auto; width: 100%; min-height: 410px; margin-top: 48px; }
  .infrastructure-feature-page .product-stats { position: relative; margin: 0 -24px; }
  .infrastructure-section { padding: 82px 28px; }
  .infrastructure-related { grid-template-columns: 1fr; gap: 48px; }
  .infrastructure-page-pager { grid-template-columns: 1fr 1fr; }
  .infrastructure-page-pager > p { display: none; }
}
@media (max-width:620px) {
  .infrastructure-page-nav-inner { padding: 0 16px; }
  .infrastructure-page-nav-title { display: none; }
  .infrastructure-page-nav-links { gap: 22px; }
  .infrastructure-feature-page .product-hero { padding-right: 18px; padding-left: 18px; }
  .infrastructure-feature-page .product-stats { margin: 0 -18px; }
  .infrastructure-section { padding: 70px 18px; }
  .infrastructure-heading h2, .infrastructure-split-copy h2, .infrastructure-related h2 { font-size: 36px; }
  .infrastructure-card-grid { grid-template-columns: 1fr; }
  .infrastructure-card-grid article { min-height: 210px; }
  .infrastructure-callout { grid-template-columns: 1fr; gap: 34px; padding: 34px 26px; }
  .infrastructure-callout-aside { padding: 28px 0 0; border-top: 1px solid #bdcccf; border-left: 0; }
  .infrastructure-related-links { grid-template-columns: 1fr; }
  .infrastructure-page-pager a { min-height: 108px; padding: 20px 18px; }
  .infrastructure-page-pager a strong { font-size: 13px; }
  .iip-node { min-width: 116px; padding: 10px; }
  .iip-node.asset, .iip-node.state { left: 12px; }
  .iip-node.network, .iip-node.timeline { right: 12px; }
  .inventory-body, .system-state-body { padding: 12px; }
  .inventory-summary div { padding: 11px 8px; }
  .inventory-summary strong { font-size: 18px; }
  .inventory-row { grid-template-columns: 30px 1fr 62px; }
  .inventory-row small { display: none; }
  .network-node { min-width: 88px; padding: 10px 6px; }
  .network-node.scanner { left: 13px; }
  .network-node.gateway { left: 38%; }
  .network-node.server, .network-node.nas { right: 13px; }
  .network-node.internet { right: 9px; }
  .system-state-body { grid-template-columns: 1fr 1fr; gap: 8px; }
  .system-state-item { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
  .system-state-item > span { display: none; }
}
@media (prefers-reduced-motion:reduce) { .infrastructure-page-nav-links { scroll-behavior:auto; } }