:root {
  --ink: #081321;
  --navy: #07172b;
  --navy-2: #0b223c;
  --panel: #102b49;
  --text: #233044;
  --muted: #68778b;
  --line: #dbe2e9;
  --soft: #f3f6f8;
  --white: #fff;
  --cyan: #28c9ee;
  --green: #54e7a2;
  --accent: #15a9d0;
  --max: 1200px;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(8, 19, 33, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--text); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 110px 0; }
.section-dark { position: relative; overflow: hidden; color: var(--white); background: var(--navy); }
.section-muted { background: var(--soft); }
.eyebrow { margin: 0 0 14px; color: #0789b0; font-size: .75rem; font-weight: 800; letter-spacing: .15em; }
.section-dark .eyebrow, .contact-band .eyebrow { color: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.08; letter-spacing: -.035em; }
.section-dark h1, .section-dark h2, .section-dark h3, .contact-band h2 { color: var(--white); }
h1 { max-width: 760px; margin-bottom: 24px; font-size: clamp(3.35rem, 8vw, 7.2rem); font-weight: 750; }
h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 720; }
h3 { font-size: 1.45rem; }

.skip-link { position: fixed; z-index: 2000; left: 16px; top: 12px; padding: 10px 14px; color: var(--white); background: var(--ink); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: rgba(7, 23, 43, .98);
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.at-top {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.site-header.scrolled {
  background: rgba(7, 23, 43, .98);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.nav-wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); }
.brand-cube-shell {
  --cube-size: 32px;
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  perspective: 180px;
  filter: drop-shadow(0 7px 7px rgba(0,0,0,.28));
}

.brand-cube {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation: brand-cube-spin 8s linear infinite;
  will-change: transform;
}

.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 2px;
  backface-visibility: visible;
  background:
    linear-gradient(#fff 0 0) 50% 0 / 100% 30% no-repeat,
    linear-gradient(#fff 0 0) 24% 50% / 18% 40% no-repeat,
    linear-gradient(#fff 0 0) 76% 50% / 18% 40% no-repeat,
    linear-gradient(145deg, #4447b6 0%, #252b86 58%, #171d69 100%);
  box-shadow:
    inset 0 0 9px rgba(255,255,255,.08),
    inset -5px -7px 10px rgba(0,0,0,.17);
}

.cube-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.cube-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.cube-right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); filter: brightness(.88); }
.cube-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); filter: brightness(.78); }
.cube-top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); filter: brightness(1.14); }
.cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); filter: brightness(.66); }

@keyframes brand-cube-spin {
  0% {
    transform: rotateX(-24deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(-18deg) rotateY(180deg) rotateZ(2deg);
  }
  100% {
    transform: rotateX(-24deg) rotateY(360deg) rotateZ(0deg);
  }
}
.brand span { display: grid; line-height: 1; }
.brand strong { font-size: 1.05rem; letter-spacing: .15em; }
.brand small { margin-top: 4px; font-size: .58rem; letter-spacing: .19em; opacity: .72; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); color: rgba(255,255,255,.78); font-size: .9rem; font-weight: 650; }
.primary-nav > a:not(.button) { position: relative; padding: 30px 0; }
.primary-nav > a:not(.button)::after { position: absolute; content: ""; left: 0; right: 100%; bottom: 22px; height: 2px; background: var(--cyan); transition: right .2s ease; }
.primary-nav > a:hover::after, .primary-nav > a.active::after { right: 0; }
.primary-nav a:hover { color: var(--white); }
.nav-toggle { display: none; width: 46px; height: 46px; padding: 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: var(--white); background: transparent; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }

.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 24px; border: 0; border-radius: 999px; color: #032a35; background: linear-gradient(100deg, var(--cyan), var(--green)); box-shadow: 0 10px 30px rgba(40,201,238,.18); font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 15px 36px rgba(40,201,238,.28); }
.button-small { min-height: 42px; padding: 0 18px; font-size: .84rem; }
.button-light { color: var(--navy); background: var(--white); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 750; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }
.dark-link { color: var(--ink); }

.hero { min-height: 830px; padding: 170px 0 85px; }
.hero::before { position: absolute; content: ""; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.hero-glow { position: absolute; border-radius: 999px; filter: blur(8px); }
.hero-glow-one { width: 480px; height: 480px; top: -200px; left: -120px; background: radial-gradient(circle, rgba(40,201,238,.18), transparent 68%); }
.hero-glow-two { width: 560px; height: 560px; right: -180px; bottom: -180px; background: radial-gradient(circle, rgba(84,231,162,.13), transparent 68%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(50px, 7vw, 100px); }
.hero-lead { max-width: 650px; margin-bottom: 34px; color: #c6d1de; font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.trust-row { display: flex; gap: 35px; margin-top: 70px; padding-top: 27px; border-top: 1px solid rgba(255,255,255,.13); }
.trust-row div { display: grid; }
.trust-row strong { font-size: .95rem; }
.trust-row span { color: #8193a9; font-size: .76rem; }
.visual-panel { position: relative; overflow: hidden; min-height: 590px; padding: 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 28px; background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 36px 100px rgba(0,0,0,.3); backdrop-filter: blur(10px); }
.visual-panel::before { position: absolute; content: ""; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 18px 18px; opacity: .22; }
.visual-topline, .visual-footer { position: relative; display: flex; justify-content: space-between; gap: 15px; color: #7790aa; font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.status-dot { color: var(--green); }
.status-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.harness-art { position: relative; width: 100%; margin: 30px auto 5px; }
.wire { stroke: #55728e; stroke-width: 13; }
.wire-glow { stroke: url(#wireGlow); stroke-width: 3; filter: url(#glow); stroke-dasharray: 8 13; animation: flow 5s linear infinite; }
.connector rect { fill: #132f4b; stroke: #6f91ae; stroke-width: 2; }
.connector path { fill: #081a2e; stroke: #456984; stroke-width: 1.5; }
.connector circle { fill: var(--cyan); filter: url(#glow); }
.measurement { fill: #7b98b2; stroke: #7b98b2; stroke-width: 1; font-size: 11px; letter-spacing: 2px; }
.node circle:first-child { fill: #132f4b; stroke: var(--green); stroke-width: 2; filter: url(#glow); }
.node circle:last-child { fill: var(--green); }
.visual-footer { padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.09); }
@keyframes flow { to { stroke-dashoffset: -84; } }

.section-heading { display: grid; grid-template-columns: 1.1fr .8fr; align-items: end; gap: 70px; margin-bottom: 55px; }
.section-heading h2 { max-width: 760px; margin-bottom: 0; }
.section-heading > p { max-width: 520px; margin: 0 0 5px; color: var(--muted); font-size: 1.05rem; }
.section-dark .section-heading > p { color: #9fb0c3; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-card { position: relative; display: flex; min-height: 380px; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover { transform: translateY(-7px); border-color: #b9d9e2; box-shadow: var(--shadow); }
.icon-shell { display: grid; width: 55px; height: 55px; margin-bottom: 48px; place-items: center; border-radius: 16px; color: #0a90b5; background: #e9f8fb; }
.icon-shell svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-number { position: absolute; top: 33px; right: 33px; color: #9ca9b8; font-size: .73rem; font-weight: 800; letter-spacing: .1em; }
.service-card h3 { max-width: 260px; margin-bottom: 15px; }
.service-card p { color: var(--muted); }
.service-card > a:last-child:not(.button) { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink); font-size: .88rem; font-weight: 800; }
.service-card > a span { font-size: 1.2rem; }
.service-card-cta { justify-content: center; color: var(--white); border: 0; background: linear-gradient(145deg, #0b8eb5, #086581); }
.service-card-cta:hover { border: 0; }
.service-card-cta h3 { color: var(--white); font-size: 2rem; }
.service-card-cta p { color: #d7f6fc; }
.service-card-cta .button { align-self: flex-start; margin-top: 12px; }

.split-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(70px, 10vw, 140px); }
.sticky-copy { align-self: start; position: sticky; top: 120px; }
.sticky-copy p:not(.eyebrow) { max-width: 480px; margin-bottom: 30px; color: var(--muted); font-size: 1.05rem; }
.industry-list { border-top: 1px solid #cdd6df; }
.industry-row { display: grid; grid-template-columns: 55px 1fr; gap: 22px; padding: 35px 0; border-bottom: 1px solid #cdd6df; }
.industry-row > span { color: #0b8eb5; font-size: .73rem; font-weight: 800; letter-spacing: .12em; }
.industry-row h3 { margin-bottom: 9px; font-size: 1.65rem; }
.industry-row p { max-width: 580px; margin: 0; color: var(--muted); }

.process-section { background: #061425; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 65px 0 0; padding: 0; list-style: none; counter-reset: process; }
.process-grid li { min-height: 300px; padding: 30px; border-top: 1px solid rgba(255,255,255,.15); border-left: 1px solid rgba(255,255,255,.15); }
.process-grid li:last-child { border-right: 1px solid rgba(255,255,255,.15); }
.process-grid span { display: inline-grid; width: 42px; height: 42px; margin-bottom: 70px; place-items: center; border: 1px solid #3b536d; border-radius: 50%; color: var(--cyan); font-size: .72rem; font-weight: 800; }
.process-grid h3 { font-size: 1.7rem; }
.process-grid p { color: #92a5ba; }

.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(65px, 9vw, 130px); }
.about-visual { position: relative; overflow: hidden; min-height: 590px; border-radius: 28px; background: var(--navy); box-shadow: var(--shadow); }
.grid-surface { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(500px) rotateX(55deg) scale(1.6) translateY(50px); }
.about-visual::after { position: absolute; content: ""; width: 350px; height: 350px; left: 50%; top: 50%; border: 1px solid rgba(40,201,238,.4); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 50px rgba(40,201,238,.03), 0 0 0 100px rgba(40,201,238,.02); }
.about-badge { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; width: 190px; height: 190px; place-content: center; border-radius: 50%; color: var(--white); background: linear-gradient(145deg, #0f3858, #07172b); box-shadow: 0 20px 70px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.15); transform: translate(-50%,-50%); text-align: center; }
.about-badge strong { color: var(--cyan); font-size: .75rem; letter-spacing: .18em; }
.about-badge span { font-size: 3.2rem; font-weight: 750; letter-spacing: -.05em; }
.signal-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #b9c9d7; background: rgba(12,40,64,.82); box-shadow: 0 12px 35px rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.signal-card span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.signal-card p { margin: 0; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.signal-one { left: 30px; top: 90px; }
.signal-two { right: 30px; bottom: 90px; }
.about-copy .large-copy { color: var(--ink); font-size: 1.24rem; }
.about-copy > p:not(.eyebrow):not(.large-copy) { color: var(--muted); }
.about-points { margin-top: 35px; border-top: 1px solid var(--line); }
.about-points div { display: grid; grid-template-columns: 170px 1fr; gap: 25px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.about-points strong { color: var(--ink); }
.about-points span { color: var(--muted); }

.quote-section { color: var(--white); background: linear-gradient(135deg, #0b6b8e, #0a4766 60%, #06334d); }
.quote-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 8vw, 110px); align-items: start; }
.quote-copy h2 { color: var(--white); }
.quote-copy > p:not(.eyebrow) { color: #d4e8ef; }
.contact-direct { display: grid; margin-top: 45px; border-top: 1px solid rgba(255,255,255,.19); }
.contact-direct a { display: grid; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.19); }
.contact-direct span { color: #a8cedd; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-direct strong { font-size: 1rem; }
.quote-form { padding: 34px; border-radius: 24px; color: var(--text); background: var(--white); box-shadow: 0 24px 70px rgba(0,0,0,.18); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form label { display: grid; gap: 7px; margin-bottom: 18px; color: var(--ink); font-size: .8rem; font-weight: 800; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; border: 1px solid #cdd7e0; border-radius: 10px; color: var(--ink); background: #fbfcfd; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.quote-form input, .quote-form select { height: 49px; padding: 0 13px; }
.quote-form textarea { min-height: 140px; padding: 13px; resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: #149fc3; box-shadow: 0 0 0 4px rgba(20,159,195,.12); }
.quote-form .invalid { border-color: #c43e48; box-shadow: 0 0 0 4px rgba(196,62,72,.09); }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; }
.form-status { margin: 0; color: #a52f38; font-size: .82rem; }


.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.captcha-fieldset {
  margin: 4px 0 20px;
  padding: 18px;
  border: 1px solid #cdd7e0;
  border-radius: 14px;
  background: #f7fafb;
}

.captcha-fieldset legend {
  padding: 0 7px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
}

.captcha-row {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) 86px auto;
  align-items: center;
  gap: 12px;
}

.captcha-question {
  display: flex;
  min-height: 49px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #d7e1e8;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
  letter-spacing: .02em;
}

.captcha-answer {
  display: block !important;
  margin: 0 !important;
}

.captcha-answer input {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
}

.captcha-refresh {
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid #b9cbd6;
  border-radius: 10px;
  color: #0b6281;
  background: var(--white);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.captcha-refresh:hover {
  border-color: #149fc3;
  background: #effafd;
}

.captcha-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

@media (max-width: 760px) {
  .captcha-row {
    grid-template-columns: 1fr 80px;
  }

  .captcha-refresh {
    grid-column: 1 / -1;
  }

  .pc-build-steps {
    gap: 70px;
    padding: 30px 0 90px;
  }

  .pc-build-step {
    min-height: 320px;
  }
}

.contact-band { padding: 72px 0; color: var(--white); background: #07101c; }
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 40px; }
.contact-grid h2 { margin: 0; font-size: 2.6rem; }
.contact-block { display: grid; align-content: start; }
.contact-block > span { margin-bottom: 12px; color: #7090aa; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-block a, .contact-block address { color: #d4e0ea; font-size: .9rem; }
.contact-block a:hover { color: var(--cyan); }

.site-footer { padding: 38px 0; color: #728499; background: #040b13; border-top: 1px solid rgba(255,255,255,.07); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; }
.footer-brand { justify-self: start; }
.site-footer p { margin: 0; font-size: .82rem; }
.footer-links { display: flex; gap: 22px; color: #a5b5c4; font-size: .82rem; }
.footer-links a:hover { color: var(--white); }
.copyright { grid-column: 1/-1; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }

.reveal {
  opacity: 1;
  transform: none;
}

.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.3,1);
  will-change: opacity, transform;
}

.reveal.reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}



.system-build-section {
  padding-top: 140px;
  padding-bottom: 150px;
  background:
    radial-gradient(circle at top left, rgba(40,201,238,.08), transparent 32%),
    linear-gradient(180deg, #f7fafc 0%, #eef4f8 100%);
}

.system-build-grid {
  display: grid;
  gap: 34px;
}

.system-build-copy {
  max-width: 780px;
}

.system-build-copy p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.05rem;
}

.system-build-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}

.pc-build-visual-wrap {
  position: sticky;
  top: 118px;
}

.pc-build-visual {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: 22px;
  border: 1px solid #d6e1ea;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,252,.96)),
    linear-gradient(145deg, #f5f9fb, #eef5f8);
  box-shadow: 0 28px 80px rgba(8, 19, 33, .12);
}

.pc-build-visual::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image:
    linear-gradient(rgba(12,55,88,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,55,88,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 95%);
}

.pc-build-stage-label,
.pc-build-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #7f95a8;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.pc-build-canvas {
  position: relative;
  height: 500px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 8%, rgba(40,201,238,.18), transparent 30%),
    linear-gradient(180deg, #0c1f36 0%, #0a1728 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 18px 45px rgba(255,255,255,.04);
}

.pc-build-scene {
  position: relative;
  width: 500px;
  height: 500px;
  margin-inline: auto;
  transform-origin: center top;
  transition: transform .35s ease;
}

.pc-build-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #d6e1ea;
}

.pc-part {
  position: absolute;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.65,.3,1), box-shadow .45s ease, filter .45s ease;
}

.case-shell {
  inset: 38px 58px 48px 58px;
  opacity: 1;
  transform: none;
  border: 2px solid rgba(116,159,188,.48);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(145deg, rgba(17,46,75,.92), rgba(7,21,40,.95));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 20px 40px rgba(255,255,255,.03),
    0 18px 42px rgba(0,0,0,.22);
}

.case-shell::before,
.case-shell::after {
  position: absolute;
  content: "";
  border-radius: 14px;
}

.case-shell::before {
  inset: 20px 18px 20px 18px;
  border: 1px solid rgba(140,186,214,.18);
}

.case-shell::after {
  top: 24px;
  bottom: 24px;
  left: 26px;
  width: 8px;
  background: linear-gradient(180deg, rgba(40,201,238,.45), rgba(84,231,162,.18));
  box-shadow: 0 0 20px rgba(40,201,238,.28);
}

.motherboard {
  top: 92px;
  left: 110px;
  width: 240px;
  height: 285px;
  overflow: hidden;
  border: 1px solid rgba(126, 175, 203, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 11px 11px, rgba(205,174,94,.85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 229px 11px, rgba(205,174,94,.85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 11px 274px, rgba(205,174,94,.85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 229px 274px, rgba(205,174,94,.85) 0 2px, transparent 2.5px),
    linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 24px),
    linear-gradient(rgba(255,255,255,.022) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 24%),
    linear-gradient(150deg, #143b5a 0%, #0b2238 100%);
  background-size: auto, auto, auto, auto, 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 30px rgba(0,0,0,.18);
}

.motherboard::before {
  position: absolute;
  content: "";
  top: 18px;
  left: 18px;
  width: 204px;
  height: 248px;
  border-radius: 12px;
  background:
    /* CPU socket surround */
    linear-gradient(145deg, rgba(182,199,212,.95), rgba(102,128,147,.95)) 6px 4px / 103px 103px no-repeat,
    linear-gradient(145deg, rgba(34,67,94,1), rgba(13,35,55,1)) 20px 20px / 80px 80px no-repeat,
    /* daughter chips / boards */
    linear-gradient(180deg, rgba(36,71,98,.98), rgba(13,39,59,.98)) 150px 196px / 34px 28px no-repeat,
    linear-gradient(180deg, rgba(36,71,98,.98), rgba(13,39,59,.98)) 188px 198px / 14px 18px no-repeat,
    linear-gradient(180deg, rgba(36,71,98,.98), rgba(13,39,59,.98)) 176px 164px / 24px 24px no-repeat,
    linear-gradient(180deg, rgba(36,71,98,.98), rgba(13,39,59,.98)) 142px 154px / 30px 16px no-repeat,
    /* gray board component centered directly beneath CPU */
    linear-gradient(180deg, rgba(128,145,159,.98), rgba(90,112,128,.98)) 38px 84px / 26px 26px no-repeat,
    linear-gradient(180deg, rgba(36,71,98,.98), rgba(13,39,59,.98)) 76px 120px / 18px 18px no-repeat,
    /* upper-half capacitor groups moved to right side only */
    radial-gradient(circle at 176px 24px, rgba(183,200,213,.96) 0 2px, rgba(92,115,133,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 194px 24px, rgba(183,200,213,.96) 0 2px, rgba(92,115,133,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 176px 42px, rgba(183,200,213,.96) 0 2px, rgba(92,115,133,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 194px 42px, rgba(183,200,213,.96) 0 2px, rgba(92,115,133,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 176px 74px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 194px 74px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 176px 92px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 194px 92px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 176px 110px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    /* lower-left capacitor cluster kept in lower half */
    radial-gradient(circle at 28px 188px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 46px 188px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    radial-gradient(circle at 28px 206px, rgba(183,200,213,.96) 0 2px, rgba(86,111,130,.98) 2.5px 6px, transparent 6.5px),
    /* small surface components */
    linear-gradient(180deg, rgba(187,209,221,.55), rgba(187,209,221,.55)) 138px 66px / 3px 18px no-repeat,
    linear-gradient(180deg, rgba(187,209,221,.55), rgba(187,209,221,.55)) 156px 66px / 3px 18px no-repeat,
    linear-gradient(180deg, rgba(187,209,221,.55), rgba(187,209,221,.55)) 174px 66px / 3px 18px no-repeat;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.motherboard::after {
  position: absolute;
  content: "";
  left: 18px;
  top: 18px;
  width: 204px;
  height: 248px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 138px 68px, rgba(103,195,220,.20) 0 3px, transparent 4px),
    radial-gradient(circle at 158px 68px, rgba(103,195,220,.20) 0 3px, transparent 4px),
    radial-gradient(circle at 178px 68px, rgba(103,195,220,.20) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.022) 78px 79px, transparent 79px 132px, rgba(255,255,255,.022) 132px 133px, transparent 133px),
    linear-gradient(180deg, transparent 0 126px, rgba(255,255,255,.022) 126px 127px, transparent 127px 156px, rgba(255,255,255,.022) 156px 157px, transparent 157px),
    linear-gradient(145deg, transparent 0 38%, rgba(255,255,255,.02) 38% 39%, transparent 39% 100%);
  pointer-events: none;
}

.cpu {
  top: 125px;
  left: 145px;
  width: 85px;
  height: 85px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 8px 8px, rgba(228,205,114,.82) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 58px 8px, rgba(228,205,114,.82) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 8px 58px, rgba(228,205,114,.82) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 58px 58px, rgba(228,205,114,.82) 0 1.5px, transparent 1.8px),
    linear-gradient(145deg, #38a8bb 0%, #236d88 100%);
  border: 1px solid rgba(177, 216, 228, .32);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 10px 18px rgba(0,0,0,.14);
}

.cpu::before {
  position: absolute;
  content: "";
  inset: 6px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10) 12%, rgba(255,255,255,0) 28%),
    linear-gradient(145deg, #f3f5f6 0%, #cbd4da 100%);
  box-shadow:
    inset 0 0 0 1px rgba(91,98,106,.4),
    inset 2px 2px 5px rgba(255,255,255,.25),
    inset -4px -4px 8px rgba(0,0,0,.08);
}

.cpu::after {
  position: absolute;
  content: "";
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border-radius: 8px;
  border: 1px dotted rgba(217,190,110,.66);
}

.ram {
  width: 17px;
  height: 142px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 12%),
    linear-gradient(180deg, #204a68 0%, #0f2d45 100%);
  border: 1px solid rgba(101,160,190,.36);
  box-shadow: 0 10px 16px rgba(0,0,0,.14);
}

.ram::before {
  position: absolute;
  content: "";
  left: 2px;
  right: 2px;
  top: 8px;
  bottom: 14px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, transparent 0 10px, rgba(127,219,237,.15) 10px 11px, transparent 11px),
    linear-gradient(180deg, transparent 0 22px, rgba(127,219,237,.15) 22px 23px, transparent 23px),
    linear-gradient(180deg, transparent 0 34px, rgba(127,219,237,.15) 34px 35px, transparent 35px),
    linear-gradient(180deg, transparent 0 46px, rgba(127,219,237,.15) 46px 47px, transparent 47px),
    linear-gradient(180deg, transparent 0 58px, rgba(127,219,237,.15) 58px 59px, transparent 59px),
    linear-gradient(180deg, transparent 0 70px, rgba(127,219,237,.15) 70px 71px, transparent 71px),
    linear-gradient(180deg, transparent 0 82px, rgba(127,219,237,.15) 82px 83px, transparent 83px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 4px 0 0 rgba(74, 203, 226, .28);
}

.ram::after {
  position: absolute;
  content: "";
  left: 2px;
  right: 2px;
  bottom: -3px;
  height: 7px;
  background: repeating-linear-gradient(90deg, #d7bb5f 0 2px, transparent 2px 4px);
}

.ram-a { top: 120px; left: 252px; }
.ram-b { top: 120px; left: 276px; }

.gpu {
  left: 96px;
  top: 262px;
  width: 236px;
  height: 54px;
  z-index: 6;
  overflow: visible;
  border-radius: 6px;
  background:
    /* larger exposed copper heat pipes in the heatsink gap */
    linear-gradient(180deg, #d29063, #965836) 100px -2px / 65px 7px no-repeat,
    linear-gradient(180deg, #d29063, #965836) 100px 7px / 46px 7px no-repeat,
    /* subtle top highlight + clean two-shade body */
    /*linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%),*/
    linear-gradient(145deg, #214764 0%, #12324a 100%);
  border: 1px solid rgba(112,162,191,.38);
  box-shadow: 0 16px 22px rgba(0,0,0,.18);
  transform: translateY(-38px) scale(.96);
  transform-origin: left center;
}

.gpu::before {
  position: absolute;
  content: "";
  left: -28px;
  top: -14px;
  width: 265px;
  height: 34px;
  border-radius: 5px 5px 0 0;
  background:
    /* subtle vent slots over solid gray heatsinks */
    repeating-linear-gradient(90deg, rgba(51,66,78,.48) 0 2px, transparent 2px 6px) 51px 14px / 76px 17px no-repeat,
    repeating-linear-gradient(90deg, rgba(51,66,78,.48) 0 2px, transparent 2px 6px) 154px 14px / 122px 16px no-repeat,
    /* solid gray heatsink blocks */
    linear-gradient(180deg, #9ba7b0 0%, #6f7d88 100%) 48px 11px / 80px 24px no-repeat,
    linear-gradient(180deg, #9ba7b0 0%, #6f7d88 100%) 150px 11px / 130px 24px no-repeat,
    /* top plates */
    linear-gradient(180deg, #d4dce2 0%, #aebbc5 100%) 28px 7px / 100px 10px no-repeat,
    linear-gradient(180deg, #d4dce2 0%, #aebbc5 100%) 150px 7px / 120px 12px no-repeat;

    /* power connector + bracket */
    /*linear-gradient(180deg, rgba(18,50,72,.98), rgba(18,50,72,.98)) 54px 22px / 22px 12px no-repeat,*/
    /*linear-gradient(180deg, rgba(190,201,210,.94), rgba(190,201,210,.94)) 10px 10px / 10px 26px no-repeat,*/
    /* blue PCB strip */
    /*linear-gradient(180deg, #143d5a, #143d5a) 14px 8px / 155px 6px no-repeat;*/
  pointer-events: none;
}

.gpu::after {
  position: absolute;
  content: "";
  left: -14px;
  top: -5px;
  width: 12px;
  height: 35px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, #d3dbe1 0%, #acb8c2 100%);
  box-shadow:
    10px 10px 0 -9px #c9aa55,
    238px 10px 0 -10px rgba(104,146,174,.08);
}

.cooler {
  top: 104px;
  left: 132px;
  width: 110px;
  height: 124px;
  z-index: 4;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 14%),
    repeating-linear-gradient(90deg, #8b98a3 0 2px, #405566 2px 6px),
    linear-gradient(180deg, #687985 0%, #30495d 100%);
  border: 1px solid rgba(146,174,192,.32);
  box-shadow: 0 14px 22px rgba(0,0,0,.16);
}

.cooler::before {
  position: absolute;
  content: "";
  left: 10px;
  right: 10px;
  top: -13px;
  height: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #b4c0c8, #83939f);
}

.cooler::after {
  position: absolute;
  content: "";
  left: 14px;
  right: 14px;
  bottom: -19px;
  height: 18px;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg, rgba(185,113,75,.88), rgba(142,82,51,.88)) 8px 0 / 18px 6px no-repeat,
    linear-gradient(180deg, rgba(185,113,75,.88), rgba(142,82,51,.88)) 28px 0 / 18px 6px no-repeat,
    linear-gradient(180deg, #8f9ba5, #667682);
}

.fan {
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(102,151,179,.46);
  background:
    radial-gradient(circle at 50% 50%, #27445b 0 11px, rgba(255,255,255,.12) 12px 13px, transparent 14px),
    conic-gradient(from 18deg,
      #17384f 0 20deg, transparent 20deg 52deg,
      #17384f 52deg 72deg, transparent 72deg 104deg,
      #17384f 104deg 124deg, transparent 124deg 156deg,
      #17384f 156deg 176deg, transparent 176deg 208deg,
      #17384f 208deg 228deg, transparent 228deg 260deg,
      #17384f 260deg 280deg, transparent 280deg 312deg,
      #17384f 312deg 332deg, transparent 332deg 360deg),
    linear-gradient(145deg, #335b75, #17364d);
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
}

.fan::before {
  position: absolute;
  content: "";
  inset: 5px;
  border-radius: 13px;
  border: 1px solid rgba(183,215,232,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.fan::after {
  position: absolute;
  content: "";
  inset: 10px;
  border-radius: 50%;
  border: 2px solid rgba(153,201,223,.18);
  box-shadow:
    0 0 0 12px rgba(8,27,41,.12),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.fan-a { top: 102px; right: 74px; }
.fan-b { top: 188px; right: 74px; }

.psu {
  right: 80px;
  bottom: 70px;
  width: 164px;
  height: 86px;
  overflow: visible;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0) 16%),
    linear-gradient(145deg, #315b75 0%, #18394f 58%, #224b64 100%);
  border: 1px solid rgba(113,163,190,.42);
  box-shadow: 0 14px 22px rgba(0,0,0,.16);
}

.psu::before {
  position: absolute;
  content: "";
  right: 10px;
  top: 8px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #718b9d 0 11px, transparent 12px 18px, #38556b 19px 22px, transparent 23px),
    conic-gradient(from 0deg,
      rgba(22,48,66,.95) 0 18deg, transparent 18deg 45deg,
      rgba(22,48,66,.95) 45deg 63deg, transparent 63deg 90deg,
      rgba(22,48,66,.95) 90deg 108deg, transparent 108deg 135deg,
      rgba(22,48,66,.95) 135deg 153deg, transparent 153deg 180deg,
      rgba(22,48,66,.95) 180deg 198deg, transparent 198deg 225deg,
      rgba(22,48,66,.95) 225deg 243deg, transparent 243deg 270deg,
      rgba(22,48,66,.95) 270deg 288deg, transparent 288deg 315deg,
      rgba(22,48,66,.95) 315deg 333deg, transparent 333deg 360deg);
  box-shadow:
    inset 0 0 0 2px rgba(134,166,187,.42),
    inset 0 0 0 5px rgba(255,255,255,.05);
}

.psu::after {
  position: absolute;
  content: "";
  left: 10px;
  top: 14px;
  width: 64px;
  height: 58px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(32,51,67,.95), rgba(19,36,48,.95)),
    radial-gradient(circle at 5px 5px, rgba(8,18,25,.95) 0 2px, transparent 2.5px),
    linear-gradient(180deg, #203746, #102634) 8px 25px / 28px 22px no-repeat,
    linear-gradient(180deg, rgba(205,220,231,.88), rgba(205,220,231,.88)) 18px 31px / 3px 8px no-repeat,
    linear-gradient(180deg, rgba(205,220,231,.88), rgba(205,220,231,.88)) 31px 31px / 3px 8px no-repeat,
    linear-gradient(180deg, rgba(205,220,231,.88), rgba(205,220,231,.88)) 24px 36px / 3px 7px no-repeat,
    linear-gradient(180deg, #91a6b4, #5f7889) 46px 26px / 10px 20px no-repeat;
  background-size: auto, 10px 10px, auto, auto, auto, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.drive-bay {
  left: 96px;
  top: 325px;
  width: 128px;
  height: 28px;
  z-index: 5;
  overflow: visible;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 18%),
    linear-gradient(145deg, #234d68 0%, #123349 100%);
  border: 1px solid rgba(108,159,188,.38);
  box-shadow: 0 14px 22px rgba(0,0,0,.16);
  transform: translateX(-30px) scale(.95);
  transform-origin: left center;
}

.drive-bay::before {
  position: absolute;
  content: "";
  left: 6px;
  top: -7px;
  width: 110px;
  height: 16px;
  border-radius: 4px 4px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(51,66,78,.46) 0 2px, transparent 2px 6px) 5px 6px / 46px 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(51,66,78,.46) 0 2px, transparent 2px 6px) 58px 4px / 52px 7px no-repeat,
    linear-gradient(180deg, #9daab4, #707f8b) 2px 5px / 50px 7px no-repeat,
    linear-gradient(180deg, #9daab4, #707f8b) 56px 2px / 60px 10px no-repeat,
    linear-gradient(180deg, #153d58, #153d58) 4px 4px / 60px 4px no-repeat;
}

.drive-bay::after {
  position: absolute;
  content: "";
  left: -12px;
  top: 0px;
  width: 12px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(180deg, #d7dfe5 0%, #a9b8c3 100%);
  box-shadow:
    10px 20px 0 -7px #c9a84d,
    88px 12px 0 -8px rgba(169,190,203,.14);
}

.case-lid {
  z-index: 30;
  inset: 38px 58px 48px 58px;
  overflow: hidden;
  border: 2px solid rgba(132,176,204,.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 18%, rgba(40,201,238,.12), transparent 26%),
    linear-gradient(145deg, rgba(22,57,88,.99), rgba(7,22,39,.995));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset -16px -20px 32px rgba(0,0,0,.22),
    0 22px 44px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateX(72%) rotateY(-72deg) scale(.96);
  transform-origin: right center;
  transition:
    opacity .35s ease,
    transform .9s cubic-bezier(.2,.72,.22,1),
    box-shadow .5s ease;
}

.case-lid::before {
  position: absolute;
  content: "";
  inset: 20px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: inset 0 0 28px rgba(0,0,0,.12);
}

.case-lid::after {
  position: absolute;
  content: "TRI TEC";
  left: 28px;
  bottom: 24px;
  color: rgba(211,239,248,.42);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.lid-vent {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(136,184,211,.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(40,201,238,.13) 0 9%, transparent 10% 20%, rgba(255,255,255,.05) 21% 23%, transparent 24%),
    repeating-conic-gradient(from 0deg, rgba(137,185,211,.18) 0deg 5deg, transparent 5deg 12deg),
    radial-gradient(circle, rgba(10,31,51,.82) 0 58%, rgba(39,82,110,.2) 59% 62%, transparent 63%);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 24px rgba(0,0,0,.28);
}


.front-io {
  position: absolute;
  right: 24px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.usb-panel {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(135,181,207,.22);
  border-radius: 999px;
  background: rgba(4,17,31,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.usb-port {
  position: relative;
  display: block;
  width: 20px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(200,226,239,.92), rgba(98,130,153,.88));
  box-shadow: inset 0 0 0 1px rgba(8,22,36,.42);
}

.usb-port::before {
  position: absolute;
  content: "";
  left: 4px;
  right: 4px;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0e1e2f, #07111d);
  box-shadow:
    inset 4px 0 0 rgba(115,155,180,.75),
    inset -4px 0 0 rgba(115,155,180,.75);
}

.power-panel {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(135,181,207,.22);
  border-radius: 999px;
  background: rgba(4,17,31,.62);
}

.power-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.45);
  transition: opacity .3s ease .82s, transform .3s ease .82s, box-shadow .3s ease .82s;
}

.power-light-main {
  background: #35d7f4;
}

.power-light-status {
  background: #55f2a8;
  transition-delay: 1.02s;
}

@keyframes system-power-glow {
  from { filter: brightness(.9); }
  to { filter: brightness(1.35); }
}


.pc-build-steps {
  display: grid;
  gap: 18vh;
  padding: 7vh 0 28vh;
}

.pc-build-step {
  display: grid;
  min-height: clamp(330px, 58vh, 540px);
  align-content: center;
  padding: 36px 30px;
  border: 1px solid #d7e0e7;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(8, 19, 33, .06);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.pc-build-step.active {
  transform: translateY(-3px);
  border-color: #9ed9e7;
  background: linear-gradient(145deg, #ffffff, #f4fbfd);
  box-shadow: 0 18px 42px rgba(8, 19, 33, .1);
}

.pc-build-step span {
  display: inline-flex;
  margin-bottom: 16px;
  color: #0b8eb5;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.pc-build-step h3 {
  margin-bottom: 10px;
  font-size: 1.55rem;
}

.pc-build-step p {
  margin: 0;
  color: var(--muted);
}

[data-build-stage="2"] .motherboard,
[data-build-stage="2"] .cpu,
[data-build-stage="2"] .ram,
[data-build-stage="3"] .motherboard,
[data-build-stage="3"] .cpu,
[data-build-stage="3"] .ram,
[data-build-stage="4"] .motherboard,
[data-build-stage="4"] .cpu,
[data-build-stage="4"] .ram,
[data-build-stage="5"] .motherboard,
[data-build-stage="5"] .cpu,
[data-build-stage="5"] .ram {
  opacity: 1;
  transform: none;
}

[data-build-stage="3"] .gpu,
[data-build-stage="3"] .drive-bay,
[data-build-stage="4"] .gpu,
[data-build-stage="4"] .drive-bay,
[data-build-stage="5"] .gpu,
[data-build-stage="5"] .drive-bay {
  opacity: 1;
  transform: none;
}

[data-build-stage="4"] .psu,
[data-build-stage="4"] .cooler,
[data-build-stage="4"] .fan,
[data-build-stage="5"] .psu,
[data-build-stage="5"] .cooler,
[data-build-stage="5"] .fan {
  opacity: 1;
  transform: none;
}

[data-build-stage="5"] .case-lid {
  opacity: 1;
  transform: translateX(0) rotateY(0deg) scale(1);
}

[data-build-stage="5"] .power-light {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
  animation: system-power-glow 1.4s ease-in-out 1.1s infinite alternate;
}

[data-build-stage="5"] .power-light-main { color: #35d7f4; }
[data-build-stage="5"] .power-light-status { color: #55f2a8; }



@media (min-width: 1400px) {
  :root {
    --max: 1500px;
  }

  .container {
    width: min(calc(100% - 72px), var(--max));
  }

  .nav-wrap {
    min-height: 96px;
  }

  .brand {
    gap: 14px;
  }

  .brand-cube-shell {
    --cube-size: 38px;
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    perspective: 215px;
  }

  .brand strong {
    font-size: 1.22rem;
  }

  .brand small {
    margin-top: 5px;
    font-size: .66rem;
  }

  .primary-nav {
    gap: clamp(26px, 2.2vw, 42px);
    font-size: 1rem;
  }

  .primary-nav > a:not(.button) {
    padding: 35px 0;
  }

  .primary-nav > a:not(.button)::after {
    bottom: 27px;
  }

  .button-small {
    min-height: 46px;
    padding-inline: 22px;
    font-size: .92rem;
  }

  .hero {
    min-height: 900px;
    padding-top: 194px;
  }

  .hero-grid {
    gap: clamp(80px, 7vw, 130px);
  }

  .hero-lead,
  .section-heading > p,
  .system-build-copy p:not(.eyebrow),
  .sticky-copy p:not(.eyebrow) {
    font-size: 1.16rem;
  }

  .trust-row strong {
    font-size: 1.04rem;
  }

  .trust-row span {
    font-size: .82rem;
  }

  .service-card h3 {
    font-size: 1.62rem;
  }

  .service-card p,
  .industry-row p,
  .process-grid p,
  .about-copy > p,
  .pc-build-step p {
    font-size: 1.02rem;
  }

  .industry-row h3,
  .process-grid h3,
  .pc-build-step h3 {
    font-size: 1.78rem;
  }

  .contact-grid h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1800px) {
  :root {
    --max: 1660px;
  }

  .container {
    width: min(calc(100% - 96px), var(--max));
  }

  .brand strong {
    font-size: 1.3rem;
  }

  .primary-nav {
    font-size: 1.04rem;
  }
}

@media (max-width: 1020px) {
  .system-build-layout {
    grid-template-columns: 1fr;
  }

  .pc-build-visual-wrap {
    position: static;
  }

  .pc-build-visual {
    min-height: 580px;
  }

  .pc-build-canvas {
    height: 460px;
  }
}

@media (max-width: 760px) {
  .pc-build-visual {
    min-height: auto;
    padding: 18px;
    border-radius: 22px;
  }

  .pc-build-canvas {
    height: 380px;
  }

  .case-shell {
    inset: 24px 22px 28px 22px;
  }

  .motherboard {
    top: 72px;
    left: 52px;
    width: 170px;
    height: 220px;
  }

  .cpu {
    top: 96px;
    left: 76px;
    width: 44px;
    height: 44px;
  }

  .ram {
    height: 98px;
  }

  .ram-a { top: 96px; left: 162px; }
  .ram-b { top: 96px; left: 184px; }

  .gpu {
    left: 42px;
    top: 174px;
    width: 178px;
    height: 54px;
  }

  .cooler {
    top: 86px;
    left: 68px;
    width: 74px;
    height: 88px;
  }

  .cooler::before {
    left: 8px;
    right: 8px;
    top: -6px;
    height: 8px;
  }

  .cooler::after {
    left: 12px;
    right: 12px;
    bottom: -9px;
    height: 10px;
  }

  .fan {
    width: 52px;
    height: 52px;
  }

  .fan-a { top: 82px; right: 22px; }
  .fan-b { top: 148px; right: 22px; }

  .psu {
    right: 30px;
    bottom: 64px;
    width: 116px;
    height: 60px;
  }

  .drive-bay {
    left: 50px;
    top: 230px;
    width: 84px;
    height: 28px;
  }

  .drive-bay::after {
    left: -12px;
    top: 10px;
    bottom: 10px;
    width: 8px;
  }

  .drive-bay::before {
    left: 7px;
    top: 5px;
    width: 48px;
    height: 10px;
    box-shadow:
      30px -2px 0 -1px rgba(126,152,170,.86);
  }


  .case-lid {
    inset: 24px 22px 28px 22px;
  }

  .lid-vent {
    width: 128px;
    height: 128px;
  }

  .front-io {
    right: 16px;
    top: 16px;
    gap: 8px;
  }

  .usb-panel {
    gap: 6px;
    padding: 6px 8px;
  }

  .usb-port {
    width: 16px;
    height: 7px;
  }


  .pc-build-step {
    padding: 22px 18px 20px;
    border-radius: 18px;
  }

  .pc-build-step h3 {
    font-size: 1.34rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal.reveal-pending { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .primary-nav { position: fixed; inset: 84px 0 auto; display: grid; max-height: 0; overflow: hidden; padding: 0 20px; gap: 0; color: var(--white); background: rgba(7,23,43,.98); transition: max-height .3s ease, padding .3s ease; }
  .primary-nav.open { max-height: calc(100vh - 84px); padding: 20px; border-top: 1px solid rgba(255,255,255,.1); }
  .primary-nav > a:not(.button) { padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .primary-nav > a:not(.button)::after { display: none; }
  .primary-nav .button { margin-top: 16px; }
  .hero { min-height: auto; padding-top: 150px; }
  .hero-grid, .about-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-visual { max-width: 720px; }
  .visual-panel { min-height: 500px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid li:nth-child(2) { border-right: 1px solid rgba(255,255,255,.15); }
  .process-grid li:nth-child(n+3) { border-top: 0; }
  .about-visual { min-height: 530px; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr auto; }
  .footer-grid > p:not(.copyright) { display: none; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 78px 0; }
  .hero { padding: 130px 0 70px; }
  h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  h2 { font-size: clamp(2.2rem, 11vw, 3.3rem); }
  .trust-row { gap: 18px; margin-top: 50px; }
  .trust-row div { flex: 1; }
  .visual-panel { min-height: auto; padding: 15px; border-radius: 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 38px; }
  .card-grid, .split-layout, .quote-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 345px; }
  .sticky-copy { position: static; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: 245px; border-right: 1px solid rgba(255,255,255,.15); border-top: 0; }
  .process-grid li:first-child { border-top: 1px solid rgba(255,255,255,.15); }
  .process-grid span { margin-bottom: 45px; }
  .about-visual { min-height: 450px; }
  .about-points div { grid-template-columns: 1fr; gap: 4px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .quote-form { padding: 25px 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .brand strong { font-size: .9rem; }
  .brand small { font-size: .5rem; }
  .brand-cube-shell {
    --cube-size: 28px;
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    perspective: 155px;
  }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .trust-row div:last-child { grid-column: 1/-1; }
  .visual-topline span:first-child { max-width: 190px; }
  .card-grid { grid-template-columns: 1fr; }
  .industry-row { grid-template-columns: 35px 1fr; }
  .about-badge { width: 150px; height: 150px; }
  .about-badge span { font-size: 2.6rem; }
  .signal-card { padding: 10px 12px; }
  .signal-one { left: 14px; top: 55px; }
  .signal-two { right: 14px; bottom: 55px; }
}


@media (prefers-reduced-motion: reduce) {
  .brand-cube {
    animation: none !important;
    transform: rotateX(-24deg) rotateY(34deg);
  }
}
/* ================================================================
   Launch refinements
   ================================================================ */

/* Smoothly resize the header logo as the header changes state. */
.nav-wrap {
  transition: min-height .3s cubic-bezier(.2,.65,.3,1);
}

.brand-cube-shell {
  transition:
    width .3s cubic-bezier(.2,.65,.3,1),
    height .3s cubic-bezier(.2,.65,.3,1),
    flex-basis .3s cubic-bezier(.2,.65,.3,1),
    perspective .3s cubic-bezier(.2,.65,.3,1);
}

/* Standard desktop: logo is 2x its normal/scrolled size at page top. */
@media (min-width: 761px) and (max-width: 1399px) {
  .site-header.at-top .nav-wrap {
    min-height: 118px;
  }

  .site-header.at-top .brand-cube-shell {
    --cube-size: 64px;
    width: 104px;
    height: 104px;
    flex-basis: 104px;
    perspective: 360px;
  }
}

/* Wide desktop keeps the same 2x relationship to the larger header logo. */
@media (min-width: 1400px) {
  .site-header.at-top .nav-wrap {
    min-height: 136px;
  }

  .site-header.at-top .brand-cube-shell {
    --cube-size: 76px;
    width: 120px;
    height: 120px;
    flex-basis: 120px;
    perspective: 430px;
  }
}

/* Phone layout: prioritize content and remove decorative/animated graphics. */
@media (max-width: 760px) {
  .hero-visual {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 122px;
    padding-bottom: 64px;
  }

  .hero-copy {
    max-width: none;
  }

  .pc-build-visual-wrap {
    display: none;
  }

  .system-build-section {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .system-build-layout {
    display: block;
  }

  .pc-build-steps {
    gap: 16px;
    padding: 18px 0 0;
  }

  .pc-build-step {
    min-height: auto;
  }
}
/* ================================================================
   Workload-optimized system graphic refinements
   ================================================================ */

@media (min-width: 1400px) {
  .pc-build-visual {
    min-height: 720px;
  }

  .pc-build-canvas {
    height: 620px;
  }

  .pc-build-scene {
    transform: translateY(8px) scale(1.16);
  }
}

@media (min-width: 1800px) {
  .pc-build-visual {
    min-height: 770px;
  }

  .pc-build-canvas {
    height: 670px;
  }

  .pc-build-scene {
    transform: translateY(10px) scale(1.24);
  }
}
/* ================================================================
   LIVE SITE — proportional workload-system sizing + extended scroll cue
   Appended to styles(20260814-201122).css
   ================================================================ */

/*
   Desktop width remains governed by the existing layout.
   The rules below only intervene when viewport HEIGHT becomes limiting.
*/
@media (min-width: 1021px) {
  .pc-build-visual,
  .pc-build-canvas {
    width: 100%;
    max-width: 100%;
  }

  /*
    LONG SCROLL CUE
    A stronger vertical rail runs down much more of the right side of
    the visual instead of living only in the lower-right corner.
  */
  .pc-build-visual-wrap::before {
    position: absolute;
    z-index: 30;
    content: "";
    right: -24px;
    top: 32%;
    width: 4px;
    height: 42%;
    min-height: 170px;
    max-height: 300px;
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(40,201,238,.12) 8%,
        rgba(40,201,238,.92) 35%,
        rgba(84,231,162,.70) 62%,
        rgba(40,201,238,.28) 84%,
        transparent 100%
      );
    box-shadow:
      0 0 9px rgba(40,201,238,.42),
      0 0 20px rgba(40,201,238,.15);
    pointer-events: none;
    animation: workload-scroll-rail 2.35s linear infinite;
    will-change: transform, opacity;
  }

  .pc-build-visual-wrap::after {
    position: absolute;
    z-index: 31;
    content: "⌄\A⌄\A⌄\A⌄";
    right: -34px;
    top: 49%;
    width: 24px;
    color: rgba(40,201,238,.98);
    font-size: 30px;
    font-weight: 500;
    line-height: .78;
    white-space: pre;
    text-align: center;
    text-shadow:
      0 0 10px rgba(40,201,238,.52),
      0 0 18px rgba(84,231,162,.18);
    pointer-events: none;
    animation: workload-scroll-chevrons 2.35s linear infinite;
    will-change: transform, opacity;
  }
}

@keyframes workload-scroll-rail {
  0% {
    opacity: 0;
    transform: translateY(-34px) scaleY(.78);
  }

  12% {
    opacity: .35;
    transform: translateY(-20px) scaleY(.86);
  }

  26% {
    opacity: .9;
    transform: translateY(-2px) scaleY(.96);
  }

  68% {
    opacity: .95;
    transform: translateY(52px) scaleY(1);
  }

  86% {
    opacity: .42;
    transform: translateY(78px) scaleY(.9);
  }

  100% {
    opacity: 0;
    transform: translateY(104px) scaleY(.76);
  }
}

@keyframes workload-scroll-chevrons {
  0% {
    opacity: 0;
    transform: translateY(-42px);
  }

  12% {
    opacity: .28;
    transform: translateY(-25px);
  }

  25% {
    opacity: .82;
    transform: translateY(-6px);
  }

  68% {
    opacity: 1;
    transform: translateY(58px);
  }

  86% {
    opacity: .42;
    transform: translateY(86px);
  }

  100% {
    opacity: 0;
    transform: translateY(112px);
  }
}


/* ----------------------------------------------------------------
   PROPORTIONAL SHORT-MONITOR LAYOUT

   Important change from the previous version:
   - the outer visual is no longer forced to a tall fixed-height card;
   - the blue canvas height is tied directly to the rendered scene size;
   - scene scale steps upward/downward with viewport height;
   - the bottom padding of the scroll story is reduced on shorter screens.

   This removes both:
   1) the empty blue area beneath the computer, and
   2) much of the unused section space after the final stage.
   ---------------------------------------------------------------- */

/* 841px–960px tall: common 900px-class desktop displays */
@media (min-width: 1021px) and (max-height: 960px) {
  .pc-build-visual-wrap {
    top: clamp(76px, 9.5vh, 96px);
  }

  .pc-build-visual {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(15px, 2vh, 20px);
  }

  .pc-build-canvas {
    height: min(500px, 55svh) !important;
    min-height: 430px;
    margin-top: clamp(12px, 1.7vh, 18px);
  }

  .pc-build-scene {
    transform: translateY(0) scale(.96) !important;
    transform-origin: center top;
  }

  .pc-build-footer {
    margin-top: clamp(7px, 1.1vh, 11px);
    padding-top: clamp(7px, 1vh, 10px);
  }

  /* Reduce the large blank runway after the final stage. */
  .pc-build-steps {
    gap: clamp(90px, 13vh, 125px);
    padding-top: clamp(35px, 5vh, 55px);
    padding-bottom: clamp(48px, 7vh, 70px);
  }

  .pc-build-step {
    min-height: clamp(350px, 52vh, 470px);
  }
}

/* Keep the graphic nearly full-width on wide 900px-class monitors. */
@media (min-width: 1400px) and (max-height: 960px) {
  .pc-build-scene {
    transform: translateY(0) scale(.99) !important;
  }
}


/* 721px–840px tall: laptop / shorter desktop */
@media (min-width: 1021px) and (max-height: 840px) {
  .pc-build-visual-wrap {
    top: clamp(64px, 8.5vh, 78px);
  }

  .pc-build-visual {
    padding: 14px 17px 12px;
  }

  .pc-build-canvas {
    height: min(440px, 53svh) !important;
    min-height: 370px;
    margin-top: 10px;
  }

  .pc-build-scene {
    transform: translateY(0) scale(.84) !important;
  }

  .pc-build-footer {
    margin-top: 6px;
    padding-top: 6px;
  }

  .pc-build-steps {
    gap: clamp(68px, 10vh, 92px);
    padding-top: clamp(24px, 4vh, 36px);
    padding-bottom: clamp(30px, 5vh, 46px);
  }

  .pc-build-step {
    min-height: clamp(300px, 48vh, 395px);
  }

  .pc-build-visual-wrap::before {
    right: -20px;
    top: 28%;
    height: 46%;
    min-height: 150px;
  }

  .pc-build-visual-wrap::after {
    right: -30px;
    top: 44%;
    font-size: 27px;
  }
}

@media (min-width: 1400px) and (max-height: 840px) {
  .pc-build-scene {
    transform: translateY(0) scale(.87) !important;
  }
}


/* 720px and below: very short browser windows */
@media (min-width: 1021px) and (max-height: 720px) {
  .pc-build-visual-wrap {
    top: 58px;
  }

  .pc-build-visual {
    padding: 11px 15px 9px;
    border-radius: 22px;
  }

  .pc-build-canvas {
    height: min(365px, 50svh) !important;
    min-height: 315px;
    margin-top: 7px;
  }

  .pc-build-scene {
    transform: translateY(0) scale(.69) !important;
  }

  .pc-build-footer {
    margin-top: 4px;
    padding-top: 4px;
  }

  .pc-build-steps {
    gap: clamp(48px, 8vh, 64px);
    padding-top: 22px;
    padding-bottom: 26px;
  }

  .pc-build-step {
    min-height: clamp(255px, 44vh, 325px);
  }
}

@media (min-width: 1400px) and (max-height: 720px) {
  .pc-build-scene {
    transform: translateY(0) scale(.72) !important;
  }
}


/* Existing mobile layout removes this graphic; also suppress its cue. */
@media (max-width: 1020px) {
  .pc-build-visual-wrap::before,
  .pc-build-visual-wrap::after {
    display: none;
  }
}


/* Accessibility: preserve the cue but stop the movement. */
@media (prefers-reduced-motion: reduce) {
  .pc-build-visual-wrap::before,
  .pc-build-visual-wrap::after {
    animation: none !important;
  }

  .pc-build-visual-wrap::before {
    opacity: .58;
  }

  .pc-build-visual-wrap::after {
    opacity: .76;
  }
}


/* Fallback for browsers without small-viewport-height units. */
@supports not (height: 100svh) {
  @media (min-width: 1021px) and (max-height: 960px) {
    .pc-build-canvas {
      height: min(500px, 55vh) !important;
    }
  }

  @media (min-width: 1021px) and (max-height: 840px) {
    .pc-build-canvas {
      height: min(440px, 53vh) !important;
    }
  }

  @media (min-width: 1021px) and (max-height: 720px) {
    .pc-build-canvas {
      height: min(365px, 50vh) !important;
    }
  }
}
/* ================================================================
   CONTACT / QUOTE SECTION — interactive technical parallax field
   ================================================================ */

.quote-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Keep all real content above the decorative animation. */
.quote-section .quote-grid {
  position: relative;
  z-index: 3;
}

/*
  Soft veil between the animated field and content.
  This keeps the quote copy/form readable even as signals pass behind it.
*/
.quote-section::after {
  position: absolute;
  z-index: 2;
  content: "";
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(7, 56, 81, .16) 0%,
      rgba(7, 56, 81, .04) 42%,
      rgba(7, 56, 81, .12) 100%
    ),
    radial-gradient(
      circle at 77% 50%,
      rgba(5, 49, 71, .12) 0%,
      rgba(5, 49, 71, .04) 34%,
      transparent 64%
    );
}

.contact-motion-bg {
  --contact-px: 0px;
  --contact-py: 0px;
  --contact-scroll: 0px;

  position: absolute;
  z-index: 1;
  inset: -8%;
  overflow: hidden;
  pointer-events: none;
  opacity: .92;
  contain: layout paint style;
}

.contact-motion-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  will-change: transform;
}

.contact-motion-layer--far {
  opacity: .36;
  transform:
    translate3d(
      calc(var(--contact-px) * .24),
      calc((var(--contact-py) * .18) + (var(--contact-scroll) * .20)),
      0
    )
    scale(1.04);
}

.contact-motion-layer--mid {
  opacity: .58;
  transform:
    translate3d(
      calc(var(--contact-px) * .48),
      calc((var(--contact-py) * .38) + (var(--contact-scroll) * .42)),
      0
    )
    scale(1.055);
}

.contact-motion-layer--near {
  opacity: .82;
  transform:
    translate3d(
      calc(var(--contact-px) * .82),
      calc((var(--contact-py) * .68) + (var(--contact-scroll) * .68)),
      0
    )
    scale(1.07);
}

.contact-motion-trace {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-motion-trace--base {
  stroke: rgba(147, 205, 227, .20);
  stroke-width: 1.35;
}

.contact-motion-trace--secondary {
  stroke: rgba(40, 201, 238, .30);
  stroke-width: 1.55;
}

.contact-motion-trace--near {
  stroke: rgba(126, 224, 235, .43);
  stroke-width: 1.7;
}

.contact-motion-node {
  fill: rgba(84, 231, 162, .66);
  stroke: rgba(207, 255, 236, .46);
  stroke-width: 1;
  filter: drop-shadow(0 0 5px rgba(84,231,162,.34));
}

.contact-motion-node--cyan {
  fill: rgba(40, 201, 238, .76);
  filter: drop-shadow(0 0 6px rgba(40,201,238,.42));
}

.contact-motion-port {
  fill: rgba(12, 66, 91, .62);
  stroke: rgba(157, 218, 235, .34);
  stroke-width: 1;
}

.contact-motion-signal {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-width: 2.2;
  stroke-dasharray: 3 23 2 35;
  filter: drop-shadow(0 0 4px rgba(40,201,238,.48));
  animation: contact-signal-flow 7.5s linear infinite;
}

.contact-motion-signal--cyan {
  stroke: rgba(40, 201, 238, .92);
}

.contact-motion-signal--green {
  stroke: rgba(84, 231, 162, .78);
  animation-duration: 9.5s;
  animation-direction: reverse;
}

.contact-motion-signal--slow {
  animation-duration: 12s;
}

.contact-motion-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: contact-node-pulse 3.8s ease-in-out infinite;
}

.contact-motion-pulse--delay-1 { animation-delay: -1.1s; }
.contact-motion-pulse--delay-2 { animation-delay: -2.4s; }
.contact-motion-pulse--delay-3 { animation-delay: -.6s; }

@keyframes contact-signal-flow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    /*
      contact-motion-signal uses:
      stroke-dasharray: 3 23 2 35;
      Total repeating pattern length = 63.
      252 = exactly 4 full pattern repetitions, so the end frame
      matches the start frame perfectly and the loop is seamless.
    */
    stroke-dashoffset: -252;
  }
}

@keyframes contact-node-pulse {
  0%,
  100% {
    opacity: .42;
    transform: scale(.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

/* Additional depth wash that follows the parallax very slightly. */
.contact-motion-halo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at calc(22% + var(--contact-px) * .04) calc(32% + var(--contact-py) * .03),
      rgba(40,201,238,.13),
      transparent 28%
    ),
    radial-gradient(
      circle at calc(78% - var(--contact-px) * .035) calc(70% - var(--contact-py) * .025),
      rgba(84,231,162,.09),
      transparent 25%
    );
  opacity: .76;
  transform: translateY(calc(var(--contact-scroll) * .15));
  will-change: transform;
}

/* Keep motion restrained on narrow displays. */
@media (max-width: 900px) {
  .contact-motion-bg {
    inset: -4%;
    opacity: .58;
  }

  .contact-motion-layer--near {
    opacity: .48;
  }
}

/* No pointer parallax or flowing signals for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .contact-motion-layer,
  .contact-motion-halo {
    transform: none !important;
  }

  .contact-motion-signal,
  .contact-motion-pulse {
    animation: none !important;
  }

  .contact-motion-bg {
    opacity: .44;
  }
}
/* Intentional termination points for contact-background branches. */
.contact-motion-branch {
  opacity: .72;
}

.contact-motion-terminal-body {
  fill: rgba(10, 64, 89, .82);
  stroke: rgba(137, 211, 232, .48);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(40,201,238,.18));
}

.contact-motion-terminal-pin {
  fill: rgba(165, 222, 237, .76);
}

.contact-motion-terminal {
  filter: drop-shadow(0 0 4px rgba(40,201,238,.20));
}