.hardware-showcase { padding-top: 92px; }
.hardware-heading { margin-bottom: 34px; }
.front-view { height: 338px; margin-bottom: 14px; }
.front-view > img { top: 39%; width: 96%; left: 2%; }
.front-port-map { bottom: 26px; left: 28%; right: 14%; }
.front-port-map span,
.rear-port-map span { padding-top: 12px; }
.front-port-map i,
.rear-port-map i { height: 8px; }
.detail-grid { gap: 16px; }
.rear-view,
.interior-view { min-height: 350px; padding: 62px 18px 16px; }
.rear-view > img { margin-top: 14px; }
.rear-port-map { margin-top: 12px; }
.interior-view > img { margin-top: 0; }
.interior-notes { margin-top: 8px; }

.product-stage:has(.family-hero-image) { min-height: 650px; }
.family-hero-image {
  top: auto;
  bottom: 8px;
  left: 2%;
  width: 96%;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: normal;
}

.custom-build {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 48px;
  align-items: center;
  margin-top: 50px;
  padding: clamp(34px, 4.2vw, 58px);
  border: 1px solid rgba(93, 214, 255, .28);
  border-radius: 28px;
  background: radial-gradient(circle at 12% 20%, rgba(74, 218, 255, .13), transparent 36%), linear-gradient(135deg, #0c1e35, #111735 62%, #151541);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .05);
}
.custom-intro h2 { margin: 20px 0; color: #fff; font-size: clamp(38px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -.045em; }
.custom-intro > p { max-width: 570px; color: #9fb1cc; line-height: 1.7; }
.custom-intro,
.custom-configurator { min-width: 0; }
.custom-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.custom-presets button { padding: 10px 13px; border: 1px solid rgba(114, 221, 255, .25); border-radius: 999px; background: rgba(12, 30, 54, .7); color: #bfeeff; font: inherit; font-size: 11px; cursor: pointer; }
.custom-presets button:hover { border-color: #71dfff; background: rgba(43, 127, 177, .18); }
.custom-configurator { padding: 22px; border: 1px solid rgba(123, 177, 230, .22); border-radius: 20px; background: rgba(5, 14, 28, .62); }
.config-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.config-fields label { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(106, 144, 194, .2); border-radius: 12px; color: #aabbd2; font-size: 11px; }
.config-fields label span { display: flex; justify-content: space-between; }
.config-fields b { color: #7de5ff; font-size: 14px; }
.config-fields input { width: 100%; accent-color: #64dfff; }
.config-fields select { width: 100%; padding: 9px; border: 1px solid #2a4264; border-radius: 8px; background: #0d1b31; color: #eef5ff; }
.custom-appliance-preview { position: relative; display: flex; align-items: center; gap: 16px; min-height: 112px; margin: 17px 0; padding: 19px 18px 16px; border: 1px solid rgba(104, 198, 239, .34); border-radius: 12px; background: linear-gradient(180deg, #27374d, #111b2a); box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 18px 34px rgba(0, 0, 0, .22); transition: min-height .28s, max-width .28s, border-radius .28s, transform .28s; }
.custom-appliance-preview::before,
.custom-appliance-preview::after { content: ""; position: absolute; top: 20%; bottom: 20%; width: 10px; border: 1px solid #42617e; background: #111b2a; transition: .28s; }
.custom-appliance-preview::before { left: -11px; border-radius: 5px 0 0 5px; }
.custom-appliance-preview::after { right: -11px; border-radius: 0 5px 5px 0; }
.preview-chassis-badge { position: absolute; top: 7px; right: 10px; color: #73e4ff; font-size: 7px; font-weight: 750; letter-spacing: .14em; }
.custom-appliance-preview[data-chassis="tabletop"] { max-width: 82%; min-height: 92px; margin-inline: auto; border-radius: 22px; background: linear-gradient(155deg, #30465d, #121c2b); }
.custom-appliance-preview[data-chassis="tabletop"]::before,
.custom-appliance-preview[data-chassis="tabletop"]::after { display: none; }
.custom-appliance-preview[data-chassis="2u"] { min-height: 158px; padding-block: 28px 20px; background: linear-gradient(180deg, #31445b, #111a29 48%, #0a111c); }
.custom-appliance-preview[data-chassis="2u"]::before,
.custom-appliance-preview[data-chassis="2u"]::after { top: 10%; bottom: 10%; width: 15px; }
.custom-appliance-preview[data-chassis="2u"]::before { left: -16px; }
.custom-appliance-preview[data-chassis="2u"]::after { right: -16px; }
.custom-appliance-preview[data-chassis="2u"] .preview-ports { max-width: 280px; }
.preview-brand { display: flex; align-items: center; gap: 8px; min-width: 112px; color: #f4f8ff; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.preview-brand svg { width: 38px; height: 38px; }
.preview-brand small { color: #70dbff; font-size: 7px; }
.preview-vent { flex: 1; min-width: 54px; height: 54px; border-radius: 6px; opacity: .7; background-color: #0a111c; background-image: radial-gradient(circle, #32485f 2px, transparent 2.4px); background-size: 9px 9px; }
.preview-ports { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 240px; }
.preview-ports i { display: block; width: 22px; height: 24px; border: 2px solid #9aabc0; border-radius: 2px; background: #060a10; box-shadow: inset 0 3px #28394e; }
.preview-ports i.sfp { width: 25px; height: 17px; border-color: #b9c7d7; box-shadow: inset 0 2px #453d22; }
.config-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.config-summary div { display: grid; gap: 5px; }
.config-summary small { color: #6ddfff; font-size: 8px; letter-spacing: .13em; }
.config-summary strong { color: #f2f7ff; font-size: 12px; }
.engineering-note { margin: 13px 0 0; color: #7185a3; font-size: 9px; line-height: 1.5; }

.build-dialog { width: min(880px, calc(100% - 28px)); max-height: 90vh; padding: 0; border: 1px solid rgba(102, 218, 255, .38); border-radius: 22px; color: #eaf4ff; background: radial-gradient(circle at 12% 0, rgba(49, 167, 219, .18), transparent 34%), linear-gradient(145deg, #112740, #0a1326 68%, #151735); box-shadow: 0 35px 110px rgba(0, 0, 0, .62); }
.build-dialog::backdrop { background: rgba(2, 7, 15, .78); backdrop-filter: blur(8px); }
.build-dialog form { padding: 28px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.dialog-heading small { color: #72e2ff; font-size: 9px; letter-spacing: .14em; }
.dialog-heading h2 { margin: 9px 0 0; color: #fff; font-size: clamp(27px, 4vw, 42px); letter-spacing: -.035em; }
.dialog-close { width: 38px; height: 38px; border: 1px solid #35516f; border-radius: 50%; background: rgba(8, 20, 37, .7); color: #d9e8f8; font-size: 25px; cursor: pointer; }
.dialog-config { margin: 19px 0; padding: 11px 13px; border: 1px solid rgba(103, 221, 255, .23); border-radius: 9px; background: rgba(31, 91, 126, .12); color: #aeeeff; font-size: 11px; }
.dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dialog-fields label { display: grid; gap: 7px; color: #9fb2ca; font-size: 10px; }
.dialog-fields input,
.dialog-fields select,
.dialog-fields textarea { width: 100%; padding: 11px 12px; border: 1px solid #2c4665; border-radius: 9px; outline: 0; background: #0a172a; color: #f1f6fd; font: inherit; }
.dialog-fields input:focus,
.dialog-fields select:focus,
.dialog-fields textarea:focus { border-color: #68dcff; box-shadow: 0 0 0 3px rgba(83, 207, 249, .1); }
.dialog-fields .field-wide { grid-column: 1 / -1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialog-actions .button { cursor: pointer; }
.dialog-note { margin: 11px 0 0; color: #71839d; text-align: right; font-size: 9px; }

.deployment { color: #0b1930; background: radial-gradient(circle at 15% 8%, rgba(93, 225, 255, .34), transparent 31%), radial-gradient(circle at 90% 18%, rgba(113, 105, 255, .22), transparent 34%), linear-gradient(145deg, #d7eff7, #cbd7f6 58%, #d9d4f7); }
.deployment .section-heading h2 { color: #0a1830; }
.deployment .section-heading p { color: #526986; }
.deployment .eyebrow { color: #234d79; }
.deployment-tabs { border-color: rgba(39, 78, 121, .2); background: rgba(92, 121, 165, .14); }
.deployment-tabs button { color: #3d5572; }
.deployment-tabs button.active { color: #0a2441; background: rgba(239, 249, 255, .72); box-shadow: 0 8px 24px rgba(29, 57, 91, .1); }
.deployment-panel { color: #eff7ff; border-color: rgba(76, 206, 255, .28); background: radial-gradient(circle at 85% 30%, rgba(64, 180, 227, .14), transparent 32%), linear-gradient(145deg, #102a46, #11182f); box-shadow: 0 28px 60px rgba(28, 56, 91, .18); }
.deployment-panel h3 { color: #fff; }
.deployment-panel p,
.deployment-panel li { color: #b5c7dd; }
.deployment-panel .panel-label { color: #72e2ff; }
.topology-node,
.topology-branches span { color: #cbd9ea; border-color: #3b5878; background: #172942; }
.topology-device { color: #fff; border-color: rgba(107, 224, 255, .45); background: linear-gradient(145deg, #1e3654, #121d34); box-shadow: 0 18px 40px rgba(0, 0, 0, .23); }

@media (max-width: 900px) {
  .custom-build { grid-template-columns: 1fr; gap: 34px; }
  .front-view { height: 350px; }
  .product-stage:has(.family-hero-image) { min-height: 560px; }
}
@media (max-width: 720px) {
  .hero-copy h1 { font-size: clamp(46px, 15vw, 66px); }
  .hero-copy { padding-inline: 3px; }
  .product-stage:has(.family-hero-image) { min-height: 430px; }
  .family-hero-image { left: 0; bottom: 6px; width: 100%; }
  .front-view { height: 330px; }
  .front-view > img { width: 120%; left: -10%; top: 38%; }
  .front-port-map { left: 5%; right: 5%; }
  .rear-view, .interior-view { min-height: 350px; }
  .custom-build { margin-top: 24px; padding: 28px 18px; gap: 28px; border-radius: 22px; }
  .custom-intro h2 { margin-block: 16px; font-size: clamp(34px, 11vw, 46px); }
  .custom-intro > p { font-size: 15px; line-height: 1.65; }
  .custom-presets { margin-top: 22px; }
  .custom-configurator { padding: 14px; border-radius: 16px; }
  .config-fields { grid-template-columns: 1fr; gap: 10px; }
  .custom-appliance-preview { align-items: flex-start; flex-wrap: wrap; }
  .preview-brand { min-width: auto; }
  .preview-vent { order: 3; flex-basis: 100%; height: 38px; }
  .preview-ports { max-width: 58%; margin-left: auto; }
  .config-summary { align-items: stretch; flex-direction: column; }
  .config-summary .button { width: 100%; }
  .dialog-fields { grid-template-columns: 1fr; }
  .dialog-fields .field-wide { grid-column: auto; }
  .build-dialog { width: calc(100% - 16px); max-height: 94vh; border-radius: 16px; }
  .build-dialog form { padding: 18px 16px; }
  .dialog-heading { gap: 10px; }
  .dialog-heading h2 { font-size: clamp(25px, 8vw, 34px); line-height: 1.08; }
  .dialog-close { flex: 0 0 auto; width: 36px; height: 36px; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions .button { width: 100%; }
  .dialog-note { text-align: left; }
}
@media (max-width: 480px) {
  .product-stage:has(.family-hero-image) { min-height: 390px; }
  .product-label { left: 20px; }
  .status-pill { right: 14px; }
  .custom-appliance-preview { padding-inline: 14px; }
  .preview-brand svg { width: 32px; height: 32px; }
  .preview-brand { font-size: 8px; }
  .preview-brand small { font-size: 6px; }
  .preview-ports i { width: 18px; height: 20px; }
  .preview-ports i.sfp { width: 21px; height: 15px; }
}