html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body.software-page {
  --software-bg: #07100b;
  --software-panel: #0b1710;
  --software-raised: #102017;
  --software-ink: #f3f6f1;
  --software-muted: #a4b1a6;
  --software-dim: #75867a;
  --software-green: #78e28e;
  --software-line: rgb(151 199 160 / 19%);
  --software-label: "DM Mono", "SFMono-Regular", monospace;
  --software-display: "Space Grotesk", "Avenir Next", sans-serif;
  --software-body: "Space Grotesk", "Avenir Next", sans-serif;
  --color-product-default: #78e28e;
  --color-product-electronyos: #5697ff;
  --color-product-istylist: #f0a8c8;
  --color-product-bills: #c9b276;
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background: var(--software-bg);
  color: var(--software-ink);
  color-scheme: dark;
  font-family: var(--software-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.software-page *,
.software-page *::before,
.software-page *::after {
  box-sizing: border-box;
}

.software-page a {
  color: inherit;
}

.software-page button,
.software-page summary {
  font: inherit;
}

.software-page a:focus-visible,
.software-page button:focus-visible,
.software-page summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--software-green);
}

.software-container {
  width: min(100% - clamp(2rem, 7vw, 7rem), 84rem);
  margin-inline: auto;
}

.software-skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #07100b !important;
  transform: translateY(-160%);
}

.software-skip-link:focus {
  transform: translateY(0);
}

.software-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: rgb(6 14 9 / 94%);
  backdrop-filter: blur(18px);
}

.software-header-inner {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.software-wordmark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}

.software-brand-wordmark {
  display: block;
  width: clamp(8rem, 12vw, 10.5rem);
  height: 2rem;
  object-fit: contain;
  object-position: left center;
}

.software-wordmark-divider {
  width: 1px;
  height: 1.7rem;
  background: rgb(255 255 255 / 20%);
}

.software-wordmark-label {
  color: #c3cdc4;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
}

.software-navigation {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.software-navigation a,
.footer-navigation a,
.footer-product-links a {
  color: #bdc8be;
  font-size: 0.76rem;
  text-decoration: none;
  transition: color 160ms ease;
}

.software-navigation a:hover,
.footer-navigation a:hover,
.footer-product-links a:hover {
  color: #fff;
}

.software-navigation a[aria-current="page"] {
  color: #fff;
}

.software-navigation .software-header-cta,
.mobile-menu-cta {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgb(158 214 169 / 42%);
  background: rgb(110 205 130 / 8%);
  color: #eff8ef;
}

.software-header-cta:hover,
.mobile-menu-cta:hover {
  border-color: var(--software-green);
  background: rgb(110 205 130 / 15%);
}

.software-mobile-menu {
  display: none;
}

.software-hero {
  position: relative;
  padding-block: clamp(3rem, 5.8vw, 5.25rem) clamp(4.5rem, 7vw, 6.5rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 52%, rgb(38 106 54 / 16%), transparent 48%),
    linear-gradient(180deg, #08120b 0%, #09140c 68%, #08120b 100%);
  isolation: isolate;
}

.software-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(165 218 175 / 3.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(165 218 175 / 3.5%) 1px, transparent 1px);
  background-size: 5rem 5rem;
  content: "";
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 86%, transparent);
  pointer-events: none;
}

.software-hero-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 3.25rem);
}

.software-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: #9eafa1;
  font-family: var(--software-label);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.software-eyebrow > span {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--software-green);
  box-shadow: 0 0 0.8rem rgb(120 226 142 / 70%);
}

.software-hero h1 {
  margin: 0;
  font-family: var(--software-display);
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.075em;
}

.software-hero h1 span,
.ecosystem-heading h2 span,
.future-copy h2 span {
  color: #9bb19f;
}

.software-hero-intro {
  width: min(24rem, 38%);
  padding-bottom: 0.15rem;
}

.software-hero-intro p {
  margin: 0 0 1rem;
  color: #b6c1b8;
  font-size: 0.94rem;
  line-height: 1.65;
}

.software-primary-link {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 23%);
  background: rgb(255 255 255 / 3%);
  color: #eff4ef !important;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.software-primary-link:hover {
  transform: translateY(-2px);
  border-color: var(--software-green);
  background: rgb(120 226 142 / 10%);
}

.motherboard {
  position: relative;
  isolation: isolate;
  padding: 1.15rem clamp(1rem, 3.2vw, 2.75rem) 1rem;
  overflow: hidden;
  border: 1px solid rgb(146 205 158 / 36%);
  background:
    radial-gradient(ellipse at 50% 49%, rgb(42 122 59 / 19%), transparent 44%),
    radial-gradient(ellipse at 50% 50%, transparent 36%, rgb(8 19 11 / 65%) 100%),
    linear-gradient(145deg, #12251a 0%, #0c1a11 45%, #0a160e 100%);
  box-shadow:
    0 2.25rem 5rem rgb(0 0 0 / 46%),
    inset 0 0 4.5rem rgb(109 188 123 / 7%),
    inset 0 1px rgb(255 255 255 / 7%);
}

.motherboard::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(rgb(188 229 192 / 27%) 0.7px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(143 204 154 / 5%) 50%, transparent 50.2%);
  background-size: 14px 14px, 100% 100%;
  content: "";
  opacity: 0.38;
  pointer-events: none;
}

.motherboard::after {
  position: absolute;
  z-index: -1;
  inset: 0.55rem;
  border: 1px solid rgb(178 217 183 / 9%);
  content: "";
  pointer-events: none;
}

.board-topline,
.board-bottomline {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #9aae9c;
  font-family: var(--software-label);
  font-size: 0.57rem;
  letter-spacing: 0.12em;
}

.board-online {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.board-online i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--software-green);
  box-shadow: 0 0 0.85rem rgb(120 226 142 / 86%);
}

.motherboard-stage {
  position: relative;
  margin-block: 0.25rem;
}

.motherboard-layout {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(34rem, 48vw, 41rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(10rem, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: clamp(0.65rem, 2.2vw, 2rem);
  row-gap: 0.5rem;
  padding-block: 1rem;
}

.board-circuit {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.circuit-traces path {
  fill: none;
  stroke: url("#trace-glow");
  stroke-width: 2.25;
  vector-effect: non-scaling-stroke;
}

.circuit-nodes circle {
  fill: url("#trace-node");
  filter: drop-shadow(0 0 5px rgb(121 239 145 / 92%));
}

.circuit-highlight {
  fill: none;
  stroke: rgb(156 248 171 / 78%);
  stroke-dasharray: 4 14;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgb(120 226 142 / 50%));
}

.motherboard-core {
  position: relative;
  display: flex;
  width: min(100%, 17.25rem);
  min-height: 18rem;
  grid-area: 2 / 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(153 226 166 / 68%);
  background:
    linear-gradient(145deg, rgb(103 180 118 / 18%), transparent 42%),
    linear-gradient(155deg, #1a3321, #102018 58%, #0b160f);
  box-shadow:
    0 0 0 0.4rem rgb(6 17 10 / 80%),
    0 0 0 0.48rem rgb(137 208 149 / 27%),
    0 1.5rem 3.5rem rgb(0 0 0 / 58%),
    0 0 2.75rem rgb(91 213 114 / 15%),
    inset 0 0 2rem rgb(146 222 157 / 9%);
  text-align: center;
}

.core-frame {
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgb(151 217 161 / 21%);
  pointer-events: none;
}

.core-overline,
.core-subtitle {
  color: #a6c0aa;
  font-family: var(--software-label);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
}

.core-mark {
  display: block;
  width: 5rem;
  height: 5rem;
  margin-block: 1rem 0.6rem;
  object-fit: contain;
  filter: drop-shadow(0 0 1rem rgb(170 249 182 / 33%));
}

.core-name {
  margin-bottom: 0.32rem;
  color: #fff;
  font-family: var(--software-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.19em;
}

.core-subtitle {
  color: #a2edaf;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.core-pin {
  position: absolute;
  width: 0.7rem;
  height: 2px;
  background: #a1f0ad;
  box-shadow: 0 0 0.7rem rgb(120 226 142 / 82%);
}

.core-pin-one { top: 2.3rem; left: -0.72rem; }
.core-pin-two { top: 4.4rem; right: -0.72rem; }
.core-pin-three { bottom: 2.6rem; left: -0.72rem; }
.core-pin-four { right: -0.72rem; bottom: 4.6rem; }

.motherboard-chips {
  display: contents;
}

.product-chip {
  position: relative;
  display: flex;
  width: min(100%, 19.5rem);
  min-height: 11.5rem;
  flex-direction: column;
  align-self: center;
  padding: 1rem 1.15rem 0.9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chip-accent) 72%, rgb(144 169 147 / 36%));
  border-radius: 0.15rem;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--chip-accent) 15%, transparent), transparent 55%),
    linear-gradient(145deg, #18271c, #111e15 57%, #0d1911);
  box-shadow:
    0 1.2rem 2rem rgb(0 0 0 / 48%),
    inset 0 1px rgb(255 255 255 / 9%),
    inset 0 -1rem 1.5rem rgb(0 0 0 / 19%);
  color: var(--software-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.product-chip::before,
.product-chip::after {
  position: absolute;
  top: 1.65rem;
  bottom: 1.65rem;
  width: 0.48rem;
  border-block: 1px solid color-mix(in srgb, var(--chip-accent) 74%, transparent);
  content: "";
  opacity: 0.82;
}

.product-chip::before {
  left: -1px;
  border-right: 1px solid color-mix(in srgb, var(--chip-accent) 74%, transparent);
}

.product-chip::after {
  right: -1px;
  border-left: 1px solid color-mix(in srgb, var(--chip-accent) 74%, transparent);
}

.product-chip:hover,
.product-chip.is-selected {
  transform: translateY(-3px);
  border-color: var(--chip-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-accent) 45%, transparent),
    0 1.4rem 2.5rem rgb(0 0 0 / 53%),
    0 0 2rem color-mix(in srgb, var(--chip-accent) 27%, transparent),
    inset 0 1px rgb(255 255 255 / 13%);
}

.product-chip.is-selected::before,
.product-chip.is-selected::after {
  opacity: 1;
}

.chip-topline,
.chip-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  font-family: var(--software-label);
  font-size: 0.55rem;
  letter-spacing: 0.09em;
}

.chip-topline {
  color: #a2b0a4;
}

.chip-indicator {
  width: 0.46rem;
  height: 0.46rem;
  flex: 0 0 auto;
  border: 1px solid var(--chip-accent);
  background: color-mix(in srgb, var(--chip-accent) 68%, transparent);
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--chip-accent) 70%, transparent);
}

.chip-name {
  margin-top: 0.85rem;
  color: #fff;
  font-family: var(--software-display);
  font-size: clamp(1.22rem, 1.65vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.chip-description {
  min-height: 2.7em;
  margin-top: 0.38rem;
  color: #bac6bb;
  font-size: 0.76rem;
  line-height: 1.45;
}

.chip-bottomline {
  min-height: 1.65rem;
  padding-top: 0.55rem;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.chip-status {
  color: var(--chip-accent);
  font-family: var(--software-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.chip-status.is-live::before {
  display: inline-block;
  width: 0.37rem;
  height: 0.37rem;
  margin-right: 0.42rem;
  border-radius: 50%;
  background: #85ec99;
  box-shadow: 0 0 0.55rem rgb(120 226 142 / 68%);
  content: "";
}

.chip-select-prompt {
  color: #a3b1a5;
  font-size: 0.53rem;
}

.board-bottomline {
  padding-top: 0.55rem;
  border-top: 1px solid rgb(157 206 165 / 12%);
}

.product-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.7fr) minmax(16rem, 0.9fr);
  align-items: center;
  gap: 1.8rem;
  min-height: 10.5rem;
  padding: 1.6rem clamp(1.2rem, 3vw, 2.5rem);
  margin-top: 1.25rem;
  border: 1px solid rgb(155 191 160 / 20%);
  background: linear-gradient(120deg, #0d1911, #0a140d);
  box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.detail-accent {
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 0;
  width: 3px;
  background: var(--selected-accent, var(--software-green));
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--selected-accent, var(--software-green)) 76%, transparent);
}

.detail-kicker,
.detail-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.58rem;
  color: #9cab9e;
  font-family: var(--software-label);
  font-size: 0.57rem;
  letter-spacing: 0.11em;
}

.detail-kicker span {
  color: #78897b;
}

.detail-overview h2 {
  margin: 0 0 0.35rem;
  color: #f4f7f3;
  font-family: var(--software-display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.15;
}

.detail-overview > p:last-child {
  max-width: 35rem;
  margin: 0;
  color: #b4c0b6;
  font-size: 0.85rem;
  line-height: 1.6;
}

.detail-meta {
  display: grid;
  align-content: center;
  gap: 0.28rem;
  min-height: 3.7rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgb(255 255 255 / 14%);
}

.detail-label {
  margin: 0;
}

.detail-status {
  color: #eff4ef;
  font-size: 0.83rem;
  font-weight: 500;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.detail-link {
  display: inline-flex;
  min-height: 2.9rem;
  flex: 1 1 8rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 23%);
  color: #f2f6f2 !important;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.detail-link:hover {
  border-color: var(--selected-accent, var(--software-green));
  background: rgb(255 255 255 / 5%);
}

.detail-link-primary {
  border-color: var(--selected-accent, var(--software-green));
  background: var(--selected-accent, var(--software-green));
  color: #07110a !important;
  font-weight: 600;
}

.detail-link-primary:hover {
  background: #fff;
}

.software-noscript {
  color: var(--software-muted);
}

.software-noscript a {
  text-underline-offset: 0.2em;
}

.software-ecosystem-section {
  padding-block: clamp(5.5rem, 9vw, 8rem);
  border-block: 1px solid rgb(153 204 163 / 10%);
  background:
    radial-gradient(ellipse at 84% 47%, rgb(38 104 53 / 13%), transparent 35%),
    #09130c;
}

.ecosystem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.ecosystem-heading h2,
.products-heading h2,
.future-copy h2 {
  margin: 0;
  color: #f2f5f1;
  font-family: var(--software-display);
  font-size: clamp(2.5rem, 5.1vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.07em;
}

.ecosystem-copy {
  padding-top: 2.6rem;
}

.ecosystem-copy p {
  max-width: 40rem;
  color: #aab8ad;
  font-size: 0.94rem;
  line-height: 1.8;
}

.ecosystem-copy .ecosystem-lead {
  margin-top: 0;
  color: #e4ebe4;
  font-family: var(--software-display);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.035em;
}

.ecosystem-principles {
  display: grid;
  margin-top: 2rem;
  border-top: 1px solid rgb(208 229 210 / 17%);
}

.ecosystem-principles > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid rgb(208 229 210 / 17%);
}

.ecosystem-principles span {
  color: var(--software-green);
  font-family: var(--software-label);
  font-size: 0.64rem;
}

.ecosystem-principles strong {
  color: #e1e9e2;
  font-size: 0.85rem;
  font-weight: 500;
}

.software-products-section {
  padding-block: clamp(5rem, 8vw, 7rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(50 111 62 / 11%), transparent 50%),
    #07100b;
}

.products-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.products-heading .software-eyebrow {
  margin-bottom: 0.85rem;
}

.products-heading h2 {
  font-size: clamp(2.4rem, 4.7vw, 4rem);
}

.products-heading > p {
  max-width: 20rem;
  margin: 0 0 0.3rem;
  color: #a8b6aa;
  font-size: 0.9rem;
}

.software-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.showcase-product {
  position: relative;
  display: flex;
  min-height: 17rem;
  flex-direction: column;
  padding: 1.3rem 1.35rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--product-accent) 42%, rgb(155 193 161 / 20%));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--product-accent) 10%, transparent), transparent 58%),
    linear-gradient(145deg, #102017, #0b160f);
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

.showcase-product::before {
  position: absolute;
  top: 0;
  right: 1.3rem;
  left: 1.3rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--product-accent), transparent);
  content: "";
}

.showcase-product-topline,
.showcase-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  color: #9eaea1;
  font-family: var(--software-label);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.showcase-product-number {
  color: var(--product-accent);
}

.showcase-product h3 {
  margin: 2rem 0 0.55rem;
  color: #f1f5f0;
  font-family: var(--software-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.12;
}

.showcase-product > p {
  margin: 0 0 1.5rem;
  color: #afbbb1;
  font-size: 0.82rem;
  line-height: 1.65;
}

.showcase-product-footer {
  padding-top: 0.85rem;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-family: var(--software-body);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.showcase-product-status {
  color: var(--product-accent);
  font-weight: 500;
}

.showcase-product-link {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
  color: #edf4ee !important;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration-color: color-mix(in srgb, var(--product-accent) 70%, transparent);
  text-underline-offset: 0.25em;
}

.showcase-product-link:hover {
  color: var(--product-accent) !important;
}

.software-future-section {
  padding-block: clamp(5rem, 8vw, 7.5rem);
  border-top: 1px solid rgb(153 204 163 / 11%);
  background:
    radial-gradient(ellipse at 15% 50%, rgb(56 117 64 / 15%), transparent 36%),
    #09130c;
}

.future-layout {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.future-mark {
  position: relative;
  display: grid;
  width: min(100%, 10rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(154 208 164 / 36%);
  background: linear-gradient(145deg, rgb(117 190 130 / 12%), transparent);
  color: #d9e8dc;
  font-family: var(--software-display);
  box-shadow: inset 0 0 2rem rgb(122 216 139 / 7%);
}

.future-mark::before,
.future-mark::after {
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgb(154 208 164 / 18%);
  content: "";
}

.future-mark::after {
  inset: 1rem;
  border-style: dashed;
  opacity: 0.6;
}

.future-mark-core {
  color: #e7f2e9;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.future-mark i {
  position: absolute;
  z-index: 1;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--software-green);
  box-shadow: 0 0 0.9rem rgb(120 226 142 / 65%);
}

.future-mark i:nth-of-type(1) { top: -0.21rem; left: 50%; }
.future-mark i:nth-of-type(2) { top: 50%; right: -0.21rem; }
.future-mark i:nth-of-type(3) { bottom: -0.21rem; left: 50%; }
.future-mark i:nth-of-type(4) { top: 50%; left: -0.21rem; }

.future-copy {
  max-width: 47rem;
}

.future-copy h2 {
  font-size: clamp(2.7rem, 5.1vw, 4.8rem);
}

.future-copy > p:last-child {
  max-width: 40rem;
  margin: 1.15rem 0 0;
  color: #a7b5a9;
  font-size: 0.9rem;
  line-height: 1.75;
}

.future-index {
  align-self: end;
  padding-bottom: 0.3rem;
  color: #91a193;
  font-family: var(--software-label);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.software-footer {
  border-top: 1px solid rgb(255 255 255 / 11%);
  background: #060d08;
}

.footer-main {
  display: grid;
  min-height: 11rem;
  grid-template-columns: minmax(14rem, 1.1fr) minmax(12rem, 0.7fr) minmax(15rem, 0.8fr);
  align-items: center;
  gap: 2rem;
  padding-block: 2rem;
}

.footer-brand > p {
  margin: 0.85rem 0 0;
  color: #9eaca1;
  font-size: 0.78rem;
}

.software-footer-wordmark .software-brand-wordmark {
  width: clamp(8rem, 11vw, 9.5rem);
}

.footer-navigation,
.footer-product-links {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.footer-product-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-product-links a span {
  color: var(--software-green);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #829084;
  font-family: var(--software-label);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
}

@media (max-width: 68rem) {
  .software-navigation {
    gap: 0.9rem;
  }

  .software-navigation a {
    font-size: 0.72rem;
  }

  .motherboard-layout {
    min-height: 35rem;
  }

  .product-chip {
    min-height: 10.5rem;
    padding-inline: 0.9rem;
  }

  .product-detail {
    grid-template-columns: minmax(0, 1.3fr) minmax(10rem, 0.7fr);
  }

  .detail-actions {
    grid-column: 1 / -1;
  }

  .ecosystem-layout {
    gap: 3rem;
  }

  .future-layout {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  .future-mark {
    width: 7rem;
  }

  .future-index {
    grid-column: 2;
  }

  .footer-main {
    grid-template-columns: minmax(12rem, 1fr) auto auto;
    gap: 1.5rem;
  }
}

@media (max-width: 52rem) {
  html {
    scroll-padding-top: 4.5rem;
  }

  .software-container {
    width: calc(100% - 2rem);
  }

  .software-header-inner {
    min-height: 4.4rem;
  }

  .software-navigation {
    display: none;
  }

  .software-brand-wordmark {
    width: min(8.5rem, 38vw);
    height: 1.75rem;
  }

  .software-mobile-menu {
    position: relative;
    display: block;
  }

  .software-mobile-menu summary {
    display: inline-flex;
    min-width: 5.25rem;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 1px solid rgb(255 255 255 / 24%);
    color: #f0f4f0;
    cursor: pointer;
    list-style: none;
  }

  .software-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu-label {
    font-size: 0.78rem;
  }

  .mobile-menu-icon {
    display: grid;
    gap: 0.25rem;
  }

  .mobile-menu-icon i {
    display: block;
    width: 0.8rem;
    height: 1px;
    background: currentColor;
    transition: transform 160ms ease;
  }

  .software-mobile-menu[open] .mobile-menu-icon i:first-child {
    transform: translateY(0.18rem) rotate(45deg);
  }

  .software-mobile-menu[open] .mobile-menu-icon i:last-child {
    transform: translateY(-0.18rem) rotate(-45deg);
  }

  .software-mobile-menu nav {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    display: grid;
    width: min(18rem, calc(100vw - 2rem));
    gap: 0.15rem;
    padding: 0.65rem;
    border: 1px solid rgb(142 195 151 / 25%);
    background: #0b1710;
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 48%);
  }

  .software-mobile-menu nav a {
    display: flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.8rem;
    color: #dce5dd;
    font-size: 0.82rem;
    text-decoration: none;
  }

  .software-mobile-menu nav a:hover {
    background: rgb(255 255 255 / 5%);
  }

  .software-mobile-menu nav .mobile-menu-cta {
    margin-top: 0.35rem;
    border: 1px solid rgb(158 214 169 / 42%);
  }

  .software-hero {
    padding-block: 3rem 4rem;
  }

  .software-hero-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .software-hero h1 {
    font-size: clamp(2.8rem, 9vw, 4.4rem);
  }

  .software-hero-intro {
    width: min(100%, 30rem);
  }

  .software-hero-intro p {
    margin-bottom: 0.75rem;
  }

  .motherboard {
    padding: 1rem 0.85rem 0.9rem;
  }

  .board-topline,
  .board-bottomline {
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }

  .motherboard-layout {
    min-height: 31rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(9rem, 1fr));
    gap: 0.7rem;
  }

  .motherboard-core {
    width: min(100%, 13.5rem);
    min-height: 15rem;
  }

  .product-chip {
    width: 100%;
    min-height: 10rem;
    padding: 0.85rem 0.75rem 0.75rem;
  }

  .chip-name {
    font-size: clamp(1.05rem, 3.8vw, 1.4rem);
  }

  .chip-description {
    font-size: 0.7rem;
  }

  .chip-status {
    font-size: 0.63rem;
  }

  .product-detail {
    gap: 1.1rem;
    padding: 1.35rem 1rem;
  }

  .detail-meta {
    padding-left: 1rem;
  }

  .ecosystem-layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .ecosystem-copy {
    padding-top: 0;
  }

  .products-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .software-products {
    grid-template-columns: 1fr;
  }

  .showcase-product {
    min-height: 15rem;
  }

  .showcase-product h3 {
    margin-top: 1.5rem;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 2rem 1rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 38rem) {
  .software-container {
    width: calc(100% - 1.5rem);
  }

  .software-wordmark {
    gap: 0.55rem;
  }

  .software-brand-wordmark {
    width: min(7.5rem, 36vw);
  }

  .software-wordmark-divider {
    height: 1.45rem;
  }

  .software-wordmark-label {
    font-size: 0.75rem;
  }

  .software-hero {
    padding-block: 2.5rem 3.25rem;
  }

  .software-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }

  .software-hero h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }

  .motherboard {
    padding: 0.9rem 0.65rem 0.75rem;
  }

  .board-topline,
  .board-bottomline {
    font-size: 0.4rem;
    letter-spacing: 0.055em;
  }

  .board-topline {
    padding-inline: 0.12rem;
  }

  .board-online {
    gap: 0.3rem;
  }

  .board-online i {
    width: 0.32rem;
    height: 0.32rem;
  }

  .motherboard-stage {
    margin-block: 0.35rem;
  }

  .motherboard-layout {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 1rem 0.15rem 1rem 1.15rem;
  }

  .motherboard-layout::before {
    position: absolute;
    z-index: -1;
    top: 7.6rem;
    bottom: 3rem;
    left: 0.35rem;
    width: 2px;
    background: linear-gradient(180deg, transparent, #75e28b 7%, #458a53 92%, transparent);
    box-shadow: 0 0 0.8rem rgb(120 226 142 / 43%);
    content: "";
  }

  .board-circuit-desktop {
    display: none;
  }

  .motherboard-core {
    width: min(100%, 18rem);
    min-height: 13rem;
    align-self: center;
    margin-bottom: 0.25rem;
  }

  .core-mark {
    width: 3.8rem;
    height: 3.8rem;
    margin-block: 0.65rem 0.45rem;
  }

  .core-overline {
    font-size: 0.46rem;
  }

  .core-subtitle {
    font-size: 0.53rem;
  }

  .core-name {
    font-size: 0.86rem;
  }

  .motherboard-chips {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .product-chip {
    width: 100%;
    min-height: 9.2rem;
    padding: 0.8rem 0.85rem 0.72rem;
  }

  .product-chip::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -0.7rem;
    width: 0.7rem;
    height: 2px;
    border: 0;
    background: var(--chip-accent);
    box-shadow: 0 0 0.7rem color-mix(in srgb, var(--chip-accent) 75%, transparent);
  }

  .product-chip::before {
    display: none;
  }

  .product-chip:hover,
  .product-chip.is-selected {
    transform: none;
  }

  .chip-name {
    font-size: 1.25rem;
  }

  .chip-description {
    min-height: 0;
    font-size: 0.75rem;
  }

  .board-bottomline {
    padding-inline: 0.12rem;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 1rem;
  }

  .detail-meta {
    min-height: auto;
    padding: 0.8rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 13%);
    border-left: 0;
  }

  .detail-actions {
    grid-column: auto;
  }

  .detail-link {
    flex: 1 1 100%;
  }

  .software-ecosystem-section,
  .software-products-section,
  .software-future-section {
    padding-block: 4rem;
  }

  .ecosystem-heading h2,
  .products-heading h2 {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
  }

  .ecosystem-copy .ecosystem-lead {
    font-size: 1.24rem;
  }

  .future-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .future-mark {
    width: 5.75rem;
  }

  .future-copy h2 {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .future-index {
    grid-column: auto;
  }

  .footer-main {
    gap: 1.6rem 0.8rem;
  }

  .footer-navigation,
  .footer-product-links {
    gap: 0.7rem;
  }

  .footer-navigation a,
  .footer-product-links a {
    font-size: 0.7rem;
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    font-size: 0.52rem;
  }
}

@media (max-width: 22rem) {
  .software-wordmark-label,
  .software-wordmark-divider {
    display: none;
  }

  .software-hero h1 {
    font-size: 2.5rem;
  }

  .board-topline,
  .board-bottomline {
    font-size: 0.36rem;
  }

  .motherboard {
    padding-inline: 0.5rem;
  }

  .motherboard-layout {
    padding-left: 0.95rem;
  }

  .motherboard-layout::before {
    left: 0.25rem;
  }

  .chip-status {
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .software-page *,
  .software-page *::before,
  .software-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body.software-page {
  --software-bg: #f5f6f7;
  --software-panel: #ffffff;
  --software-raised: #eef1f3;
  --software-ink: #171c21;
  --software-muted: #56616b;
  --software-dim: #68737d;
  --software-accent: #607f99;
  --software-green: #607f99;
  --software-line: rgb(30 45 58 / 15%);
  --color-product-default: var(--software-accent);
  --color-product-electronyos: var(--software-accent);
  --color-product-istylist: var(--software-accent);
  --color-product-bills: var(--software-accent);
  background: var(--software-bg);
  color: var(--software-ink);
  color-scheme: light;
}

.software-page a:focus-visible,
.software-page button:focus-visible,
.software-page summary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #476984;
}

.software-skip-link {
  background: #fff;
  color: #171c21 !important;
  box-shadow: 0 0.4rem 1.4rem rgb(20 35 48 / 18%);
}

.software-header {
  border-bottom-color: rgb(30 45 58 / 12%);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 0.35rem 1.2rem rgb(23 36 48 / 4%);
}

.software-wordmark-divider {
  background: rgb(30 45 58 / 22%);
}

.software-wordmark-label {
  color: #52606b;
}

.software-navigation a,
.footer-navigation a,
.footer-product-links a {
  color: #48535d;
}

.software-navigation a:hover,
.footer-navigation a:hover,
.footer-product-links a:hover,
.software-navigation a[aria-current="page"] {
  color: #10171d;
}

.software-navigation .software-header-cta,
.mobile-menu-cta {
  border-color: #aab5be;
  background: #f3f5f7;
  color: #1d2730;
}

.software-header-cta:hover,
.mobile-menu-cta:hover {
  border-color: #718ba0;
  background: #e9eef2;
}

.software-hero {
  background: #f7f8f9;
}

.software-hero::before {
  background-image:
    linear-gradient(rgb(72 93 111 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(72 93 111 / 4%) 1px, transparent 1px);
}

.software-eyebrow {
  color: #68747e;
}

.software-eyebrow > span {
  background: #6b879e;
  box-shadow: 0 0 0.65rem rgb(100 134 160 / 35%);
}

.software-hero h1 {
  color: #171c21;
}

.software-hero h1 span,
.ecosystem-heading h2 span,
.future-copy h2 span,
.services-heading h2 span,
.technologies-lead span {
  color: #687987;
}

.software-hero-intro p {
  color: #55616b;
}

.software-primary-link {
  border-color: #b7c0c7;
  background: #fff;
  color: #1d2730 !important;
}

.software-primary-link:hover {
  border-color: #6b879e;
  background: #edf2f6;
}

.motherboard {
  border-color: #bbc5cc;
  background: #e9edf0;
  box-shadow:
    0 1.5rem 3.2rem rgb(25 39 52 / 10%),
    inset 0 0 3rem rgb(255 255 255 / 76%),
    inset 0 1px #fff;
}

.motherboard::before {
  background-image:
    radial-gradient(rgb(74 101 123 / 18%) 0.7px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(91 120 143 / 5%) 50%, transparent 50.2%);
  opacity: 0.42;
}

.motherboard::after {
  border-color: rgb(83 105 122 / 12%);
}

.board-topline,
.board-bottomline {
  color: #65737e;
}

.board-online i {
  background: #7793a9;
  box-shadow: 0 0 0.7rem rgb(96 127 153 / 40%);
}

.circuit-traces path {
  stroke: #9eabb5;
  opacity: 0.8;
}

.circuit-nodes circle {
  fill: #8198aa;
  filter: drop-shadow(0 0 3px rgb(92 136 170 / 38%));
}

.circuit-highlight {
  stroke: rgb(82 151 204 / 72%);
  filter: drop-shadow(0 0 3px rgb(82 151 204 / 26%));
}

.circuit-pulse {
  fill: #d7efff;
  filter: drop-shadow(0 0 4px #5a9ed6) drop-shadow(0 0 8px rgb(90 158 214 / 68%));
}

.circuit-pulse-return {
  fill: #fff;
}

.motherboard-core {
  border-color: #9eacb7;
  background: #fff;
  box-shadow:
    0 0 0 0.4rem rgb(233 237 240 / 96%),
    0 0 0 0.48rem rgb(118 144 163 / 38%),
    0 1rem 2.4rem rgb(25 39 52 / 16%),
    0 0 2rem rgb(91 143 183 / 11%),
    inset 0 0 1.5rem rgb(75 104 126 / 5%);
}

.core-frame {
  border-color: rgb(91 116 135 / 18%);
}

.core-overline,
.core-subtitle {
  color: #697783;
}

.core-mark {
  filter: drop-shadow(0 0 0.7rem rgb(90 122 149 / 12%));
}

.core-name {
  color: #17212a;
}

.core-subtitle {
  color: #597187;
}

.core-pin {
  background: #718da3;
  box-shadow: 0 0 0.6rem rgb(96 127 153 / 45%);
}

.product-chip {
  border-color: #c1cbd2;
  background: #fff;
  box-shadow:
    0 0.8rem 1.5rem rgb(22 37 50 / 10%),
    inset 0 1px #fff,
    inset 0 -0.75rem 1.2rem rgb(230 235 239 / 55%);
  color: #171c21;
}

.product-chip::before,
.product-chip::after {
  border-color: #93a6b5;
}

.product-chip:hover,
.product-chip.is-selected {
  border-color: #718da3;
  box-shadow:
    0 0 0 1px rgb(96 127 153 / 22%),
    0 1rem 1.8rem rgb(22 37 50 / 14%),
    0 0 1.4rem rgb(94 145 185 / 15%),
    inset 0 1px #fff;
}

.chip-topline,
.chip-select-prompt {
  color: #6a7781;
}

.chip-name {
  color: #18212a;
}

.chip-description {
  color: #58636d;
}

.chip-bottomline {
  border-top-color: rgb(46 64 79 / 14%);
}

.chip-status {
  color: #4b687f;
}

.chip-status.is-live::before {
  background: #668aa6;
  box-shadow: 0 0 0.45rem rgb(96 127 153 / 40%);
}

.board-bottomline {
  border-top-color: rgb(46 64 79 / 14%);
}

.product-detail {
  border-color: #d0d6db;
  background: #fff;
  box-shadow: 0 0.5rem 1.5rem rgb(25 39 52 / 5%);
}

.detail-accent {
  background: var(--selected-accent, var(--software-accent));
  box-shadow: 0 0 0.8rem rgb(96 127 153 / 42%);
}

.detail-kicker,
.detail-label {
  color: #697681;
}

.detail-kicker span {
  color: #7d8992;
}

.detail-overview h2 {
  color: #18212a;
}

.detail-overview > p:last-child {
  color: #56616b;
}

.detail-meta {
  border-left-color: #dce1e5;
}

.detail-status {
  color: #28333c;
}

.detail-link {
  border-color: #c3ccd2;
  color: #27333d !important;
}

.detail-link:hover {
  border-color: var(--selected-accent, var(--software-accent));
  background: #f2f5f7;
}

.detail-link-primary {
  border-color: #607f99;
  background: #607f99;
  color: #fff !important;
}

.detail-link-primary:hover {
  border-color: #4f6b83;
  background: #4f6b83;
}

.software-noscript {
  color: #56616b;
}

.software-ecosystem-section {
  border-block-color: #e2e6e9;
  background: #fff;
}

.ecosystem-heading h2,
.products-heading h2,
.future-copy h2,
.services-heading h2,
.technologies-heading h2 {
  color: #171c21;
}

.ecosystem-copy p {
  color: #5a646e;
}

.ecosystem-copy .ecosystem-lead {
  color: #27313a;
}

.ecosystem-principles,
.ecosystem-principles > div {
  border-color: #dce1e5;
}

.ecosystem-principles span {
  color: #607f99;
}

.ecosystem-principles strong {
  color: #303b44;
}

.software-products-section {
  background: #f2f4f6;
}

.products-heading > p {
  color: #58636d;
}

.showcase-product {
  border-color: #d1d8dd;
  background: #fff;
  box-shadow: 0 0.6rem 1.6rem rgb(25 39 52 / 5%);
}

.showcase-product::before {
  height: 1px;
  background: #9caab5;
}

.showcase-product-topline,
.showcase-product-footer {
  color: #68747e;
}

.showcase-product-number,
.showcase-product-status {
  color: #526f86;
}

.showcase-product h3 {
  color: #18212a;
}

.showcase-product > p {
  color: #58636d;
}

.showcase-product-footer {
  border-top-color: #e0e4e7;
}

.showcase-product-link {
  color: #364d5f !important;
  text-decoration-color: #93a8b8;
}

.showcase-product-link:hover {
  color: #172c3c !important;
}

.software-services-section {
  padding-block: clamp(5.5rem, 9vw, 8rem);
  background: #fff;
}

.services-heading {
  max-width: 57rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.services-heading h2 {
  margin: 0;
  color: #64727c;
  font-family: var(--software-label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.services-headline {
  margin: 0.8rem 0 0;
  color: #171c21;
  font-family: var(--software-display);
  font-size: clamp(2.3rem, 4.7vw, 4.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.065em;
}

.services-headline span {
  color: #687987;
}

.services-heading > p:last-child {
  max-width: 47rem;
  margin: 1.25rem 0 0;
  color: #56616b;
  font-size: 1rem;
  line-height: 1.75;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.service-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.3rem, 2.3vw, 2rem);
  border: 1px solid #d6dce1;
  background: #fff;
  box-shadow: 0 0.7rem 2rem rgb(25 39 52 / 5%);
}

.service-card-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.55rem;
  place-items: center;
  border: 1px solid #d6dfe5;
  background: #f4f6f8;
  color: #5b778e;
}

.service-card-icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

.service-card-index {
  margin: 0 0 0.55rem;
  color: #6b7882;
  font-family: var(--software-label);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.service-card h3 {
  margin: 0;
  color: #1b242c;
  font-family: var(--software-display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.2;
}

.service-card-description {
  min-height: 4.7rem;
  margin: 0.75rem 0 1rem;
  color: #59646e;
  font-size: 0.84rem;
  line-height: 1.65;
}

.service-card ul {
  display: grid;
  gap: 0.63rem;
  padding: 1rem 0 0;
  margin: auto 0 0;
  border-top: 1px solid #e0e4e7;
  color: #414d57;
  font-size: 0.78rem;
  line-height: 1.5;
  list-style: none;
}

.service-card li {
  position: relative;
  padding-left: 1rem;
}

.service-card li::before {
  position: absolute;
  top: 0.56em;
  left: 0;
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #8799a6;
  content: "";
}

.services-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.55rem clamp(1.3rem, 3vw, 2.25rem);
  margin-top: 1.2rem;
  border: 1px solid #cbd4da;
  background: #f2f4f6;
}

.services-cta .service-card-index {
  margin-bottom: 0.4rem;
}

.services-cta h3 {
  margin: 0;
  color: #1b242c;
  font-family: var(--software-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.services-cta-link {
  display: inline-flex;
  min-height: 3rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 0.75rem 1rem;
  background: #293943;
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.services-cta-link:hover {
  transform: translateY(-2px);
  background: #425d70;
}

.software-technologies-section {
  padding-block: clamp(5rem, 8vw, 7rem);
  border-top: 1px solid #e2e6e9;
  background: #f5f6f7;
}

.technologies-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.technologies-heading h2 {
  margin: 0;
  font-family: var(--software-display);
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.065em;
}

.technologies-lead {
  margin: 0 0 0.25rem;
  color: #28333c;
  font-family: var(--software-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.technologies-note {
  margin: 1rem 0 2.2rem;
  color: #5e6973;
  font-size: 0.82rem;
}

.technology-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.technology-group {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #d6dce1;
  background: #fff;
}

.technology-group h3 {
  margin: 0 0 1rem;
  color: #39454e;
  font-family: var(--software-label);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.035em;
}

.technology-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.technology-grid li {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.68rem;
  border: 1px solid #e1e5e8;
  background: #fafbfc;
  color: #34414b;
  font-size: 0.72rem;
  line-height: 1.35;
}

.technology-mark {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #ccd5dc;
  background: #edf1f4;
  color: #506b80;
  font-family: var(--software-label);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: -0.06em;
}

.software-future-section {
  border-top-color: #e0e5e8;
  background: #fff;
}

.future-mark {
  border-color: #c4cdd4;
  background: #f2f4f6;
  color: #3e5261;
  box-shadow: inset 0 0 1.5rem rgb(75 104 126 / 5%);
}

.future-mark::before,
.future-mark::after {
  border-color: #b8c4cc;
}

.future-mark-core {
  color: #40596c;
}

.future-mark i {
  background: #718da3;
  box-shadow: 0 0 0.7rem rgb(96 127 153 / 35%);
}

.future-copy > p:last-child {
  color: #59646e;
}

.future-index {
  color: #65737e;
}

.software-footer {
  border-top-color: #d8dee3;
  background: #eef1f3;
}

.footer-brand > p {
  color: #59646e;
}

.footer-product-links a span {
  color: #617e94;
}

.footer-meta {
  border-top-color: #d6dce1;
  color: #67737d;
}

.software-mobile-menu summary {
  border-color: #bdc7ce;
  color: #26333c;
}

.software-mobile-menu nav {
  border-color: #d0d8de;
  background: #fff;
  box-shadow: 0 1rem 2.4rem rgb(25 39 52 / 14%);
}

.software-mobile-menu nav a {
  color: #34414b;
}

.software-mobile-menu nav a:hover {
  background: #f1f4f6;
}

.software-mobile-menu nav .mobile-menu-cta {
  border-color: #aab7c0;
}

.motherboard-layout::before {
  background: linear-gradient(180deg, transparent, #8ca4b6 7%, #9aabb8 92%, transparent);
  box-shadow: 0 0 0.7rem rgb(96 127 153 / 24%);
}

.product-chip::after {
  background: #8ca4b6;
  box-shadow: 0 0 0.55rem rgb(96 127 153 / 33%);
}

@media (max-width: 68rem) {
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .service-cards,
  .technology-groups {
    grid-template-columns: 1fr;
  }

  .technologies-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .service-card-description {
    min-height: 0;
  }
}

@media (max-width: 38rem) {
  .software-services-section,
  .software-technologies-section {
    padding-block: 4rem;
  }

  .services-headline,
  .technologies-heading h2 {
    font-size: clamp(2.2rem, 9.5vw, 3.4rem);
  }

  .services-headline br {
    display: none;
  }

  .service-cards {
    gap: 0.8rem;
  }

  .service-card {
    padding: 1.2rem;
  }

  .services-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .services-cta-link {
    width: 100%;
  }

  .technology-group {
    padding: 1rem;
  }

  .technology-group h3 {
    line-height: 1.5;
  }

  .circuit-pulse {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-pulse {
    display: none;
  }
}

body.software-page {
  --software-bg: #d7dce0;
  --software-panel: #e8ecef;
  --software-raised: #f3f5f6;
  --software-ink: #20282e;
  --software-muted: #505d67;
  --software-dim: #68757f;
  --software-accent: #7898b0;
  --software-green: #7898b0;
  --software-line: rgb(39 52 63 / 17%);
  --color-product-default: var(--software-accent);
  --color-product-electronyos: var(--software-accent);
  --color-product-istylist: var(--software-accent);
  --color-product-bills: var(--software-accent);
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 13%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e1e5e8, #cbd1d6);
  color: var(--software-ink);
  color-scheme: light;
}

.software-page a:focus-visible,
.software-page button:focus-visible,
.software-page summary:focus-visible {
  outline: 2px solid #263640;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #a9c5d8;
}

.software-skip-link {
  background: #f8fafb;
  color: #20282e !important;
}

.software-header {
  border-bottom-color: #bac3c9;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 16%) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgb(248 250 251 / 97%), rgb(221 226 230 / 96%));
  box-shadow: 0 0.4rem 1.4rem rgb(26 39 48 / 9%);
}

.software-wordmark-divider {
  background: #aab4bb;
}

.software-wordmark-label {
  color: #46535d;
}

.software-navigation a,
.footer-navigation a,
.footer-product-links a {
  color: #46525b;
}

.software-navigation a:hover,
.footer-navigation a:hover,
.footer-product-links a:hover,
.software-navigation a[aria-current="page"] {
  color: #111a20;
}

.software-navigation .software-header-cta,
.mobile-menu-cta {
  border-color: #9daab3;
  background: linear-gradient(180deg, #f8fafb, #dce2e6);
  color: #25313a;
  box-shadow: inset 0 1px #fff;
}

.software-header-cta:hover,
.mobile-menu-cta:hover {
  border-color: #728ea2;
  background: #e8eef2;
}

.software-hero {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e7ebee 0%, #d2d8dd 54%, #e1e5e8 100%);
}

.software-hero::before {
  background-image:
    linear-gradient(rgb(54 72 86 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(54 72 86 / 4%) 1px, transparent 1px);
}

.software-eyebrow {
  color: #596773;
}

.software-eyebrow > span {
  background: #6f94ad;
  box-shadow: 0 0 0.6rem rgb(100 143 173 / 32%);
}

.software-hero h1 {
  color: #20282e;
}

.software-hero h1 span,
.ecosystem-heading h2 span,
.future-copy h2 span,
.services-heading h2 span,
.technologies-lead span {
  color: #61798b;
}

.software-hero-intro p,
.services-heading > p:last-child {
  color: #4e5b65;
}

.software-primary-link {
  border-color: #aeb9c1;
  background: linear-gradient(180deg, #fbfcfd, #dfe4e8);
  color: #25313a !important;
  box-shadow: inset 0 1px #fff, 0 0.35rem 1rem rgb(32 45 55 / 8%);
}

.software-primary-link:hover {
  border-color: #7895aa;
  background: #eef2f5;
}

.motherboard {
  border-color: #8998a2;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(221 231 237 / 15%), transparent 48%),
    repeating-linear-gradient(112deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #465159 0%, #293239 48%, #39434a 100%);
  box-shadow:
    0 1.5rem 3.5rem rgb(28 39 47 / 23%),
    inset 0 1px rgb(255 255 255 / 36%),
    inset 0 -1rem 2rem rgb(12 20 25 / 25%);
}

.motherboard::before {
  background-image:
    radial-gradient(rgb(219 231 237 / 16%) 0.7px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(211 228 238 / 6%) 50%, transparent 50.2%);
  opacity: 0.5;
}

.motherboard::after {
  border-color: rgb(224 233 238 / 14%);
}

.board-topline,
.board-bottomline {
  color: #c1cbd1;
}

.board-online i {
  background: #a9c6d9;
  box-shadow: 0 0 0.55rem rgb(169 198 217 / 50%);
}

.circuit-traces path {
  stroke: #9aabb7;
  opacity: 0.7;
}

.circuit-nodes circle {
  fill: #b6c8d3;
  filter: drop-shadow(0 0 3px rgb(159 194 216 / 45%));
}

.circuit-highlight {
  stroke: rgb(177 215 237 / 56%);
  filter: drop-shadow(0 0 3px rgb(120 177 210 / 28%));
}

.circuit-pulse {
  fill: #edf7fd;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgb(172 215 239 / 64%));
}

.circuit-pulse-return {
  fill: #c7d7e1;
}

.motherboard-core {
  border-color: #f2f5f6;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 80%), transparent 30%, rgb(255 255 255 / 19%) 51%, transparent 73%),
    repeating-linear-gradient(95deg, rgb(41 55 65 / 4%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #f1f4f5 0%, #adb8c0 52%, #e8edef 100%);
  box-shadow:
    0 0 0 0.4rem rgb(37 47 54 / 90%),
    0 0 0 0.48rem rgb(205 216 223 / 48%),
    0 1rem 2.5rem rgb(8 14 18 / 32%),
    inset 0 1px #fff,
    inset 0 -1rem 1.6rem rgb(80 96 107 / 12%);
}

.core-frame {
  border-color: rgb(60 77 89 / 18%);
}

.core-overline,
.core-subtitle {
  color: #52616b;
}

.core-mark {
  filter: drop-shadow(0 0.3rem 0.6rem rgb(32 46 56 / 18%));
}

.core-name {
  color: #202a31;
}

.core-subtitle {
  color: #506b7e;
}

.core-pin {
  background: #9fc2d9;
  box-shadow: 0 0 0.5rem rgb(138 190 220 / 50%);
}

.product-chip {
  border-color: #8797a2;
  background:
    linear-gradient(116deg, rgb(219 232 240 / 10%), transparent 48%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #56616a, #353f46 58%, #424c53);
  box-shadow:
    0 0.9rem 1.7rem rgb(7 13 17 / 30%),
    inset 0 1px rgb(255 255 255 / 25%),
    inset 0 -0.75rem 1.2rem rgb(11 18 23 / 20%);
  color: #f3f6f7;
}

.product-chip::before,
.product-chip::after {
  border-color: #aec8d8;
}

.product-chip:hover,
.product-chip.is-selected {
  border-color: #c5dbea;
  box-shadow:
    0 0 0 1px rgb(175 208 228 / 34%),
    0 1rem 2rem rgb(7 13 17 / 34%),
    0 0 1rem rgb(117 174 207 / 16%),
    inset 0 1px rgb(255 255 255 / 35%);
}

.chip-topline,
.chip-select-prompt {
  color: #c1cbd0;
}

.chip-name {
  color: #f8fafb;
}

.chip-description {
  color: #e0e6e9;
}

.chip-bottomline {
  border-top-color: rgb(239 245 248 / 18%);
}

.chip-status {
  color: #c1d9e8;
}

.chip-status.is-live::before {
  background: #a9cadf;
  box-shadow: 0 0 0.4rem rgb(154 198 225 / 48%);
}

.board-bottomline {
  border-top-color: rgb(232 240 244 / 19%);
}

.product-detail {
  border-color: #bac4cb;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 15%) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #f1f3f4, #d6dce0 55%, #e8ecee);
  box-shadow: 0 0.65rem 1.8rem rgb(9 17 22 / 20%), inset 0 1px #fff;
}

.detail-accent {
  background: #7898b0;
  box-shadow: 0 0 0.7rem rgb(104 151 182 / 38%);
}

.detail-kicker,
.detail-label {
  color: #5b6973;
}

.detail-kicker span {
  color: #687781;
}

.detail-overview h2 {
  color: #20282e;
}

.detail-overview > p:last-child {
  color: #4e5b65;
}

.detail-meta {
  border-left-color: #bfc8ce;
}

.detail-status {
  color: #29353d;
}

.detail-link {
  border-color: #aab6be;
  color: #2b3942 !important;
}

.detail-link:hover {
  border-color: #718fa4;
  background: rgb(255 255 255 / 52%);
}

.detail-link-primary {
  border-color: #516d81;
  background: linear-gradient(180deg, #607f95, #405a6b);
  color: #fff !important;
}

.detail-link-primary:hover {
  border-color: #354c5c;
  background: #354c5c;
}

.software-noscript {
  color: #46545e;
}

.software-ecosystem-section {
  border-block-color: #c2cbd1;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #e8ecee, #d6dce0 60%, #e3e7e9);
}

.ecosystem-heading h2,
.products-heading h2,
.services-heading h2,
.technologies-heading h2 {
  color: #20282e;
}

.ecosystem-copy p {
  color: #4f5b64;
}

.ecosystem-copy .ecosystem-lead {
  color: #2c3941;
}

.ecosystem-principles,
.ecosystem-principles > div {
  border-color: #bfc9cf;
}

.ecosystem-principles span {
  color: #536f83;
}

.ecosystem-principles strong {
  color: #303c44;
}

.software-products-section {
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #424c53, #272f35 55%, #363f46);
}

.products-heading h2 {
  color: #f2f5f6;
}

.products-heading > p {
  color: #d0d8dd;
}

.showcase-product {
  border-color: #74838d;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 7%), transparent 38%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #505b63, #39434a 60%, #424d54);
  box-shadow: 0 0.7rem 1.5rem rgb(10 16 20 / 19%), inset 0 1px rgb(255 255 255 / 17%);
}

.showcase-product::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, #bed0dc, transparent);
}

.showcase-product-topline,
.showcase-product-footer {
  color: #c4cdd2;
}

.showcase-product-number,
.showcase-product-status {
  color: #c0d8e7;
}

.showcase-product h3 {
  color: #f4f6f7;
}

.showcase-product > p {
  color: #d5dde1;
}

.showcase-product-footer {
  border-top-color: rgb(244 248 250 / 18%);
}

.showcase-product-link {
  color: #eff5f8 !important;
  text-decoration-color: #a9c5d6;
}

.showcase-product-link:hover {
  color: #c6dfef !important;
}

.software-services-section {
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 11%) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, #d9dee2, #cbd2d7 55%, #e3e7e9);
}

.services-heading h2 {
  color: #5c6a74;
}

.services-headline {
  color: #20282e;
}

.services-headline span {
  color: #60798b;
}

.services-heading > p:last-child {
  color: #4d5962;
}

.service-card {
  border-color: #b8c2c9;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 75%), transparent 40%),
    repeating-linear-gradient(100deg, rgb(53 68 79 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f0f3f4, #dce2e5 58%, #e9edef);
  box-shadow:
    0 0.75rem 1.8rem rgb(32 45 54 / 10%),
    inset 0 1px #fff,
    inset 0 -0.5rem 1rem rgb(93 109 119 / 5%);
}

.service-card-icon {
  border-color: #aebbc4;
  background: linear-gradient(145deg, #f9fafb, #cfd7dc);
  color: #4f6c80;
  box-shadow: inset 0 1px #fff, 0 0.3rem 0.8rem rgb(43 58 68 / 9%);
}

.service-card-index {
  color: #5f6e78;
}

.service-card h3 {
  color: #20282e;
}

.service-card-description {
  color: #4f5b64;
}

.service-card ul {
  border-top-color: #c2cbd0;
  color: #354149;
}

.service-card li::before {
  border-color: #718b9d;
}

.service-card-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  margin-top: 1rem;
  border: 1px solid #aebbc3;
  background: linear-gradient(180deg, rgb(255 255 255 / 65%), rgb(210 218 223 / 70%));
  color: #344957;
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.service-card-link:hover {
  transform: translateY(-2px);
  border-color: #708ca1;
  background: #f4f7f8;
}

.services-cta {
  border-color: #aeb9c1;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 10%) 0 1px, transparent 1px 5px),
    linear-gradient(120deg, #d1d8dd, #e5e9eb);
  box-shadow: inset 0 1px rgb(255 255 255 / 75%);
}

.services-cta h3 {
  color: #20282e;
}

.services-cta-link {
  border: 1px solid #657783;
  background: linear-gradient(180deg, #485963, #303b43);
  box-shadow: inset 0 1px rgb(255 255 255 / 25%), 0 0.3rem 0.8rem rgb(31 42 49 / 14%);
}

.services-cta-link:hover {
  background: #26343d;
}

.software-technologies-section {
  border-top-color: #c1cbd1;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e5e9eb, #d4dade 60%, #e4e8ea);
}

.technologies-heading h2 {
  color: #20282e;
}

.technologies-lead {
  color: #34424a;
}

.technologies-note {
  color: #53616a;
}

.technology-group {
  border-color: #bac4ca;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 66%), transparent 45%),
    linear-gradient(145deg, #f0f3f4, #dce2e5);
  box-shadow: inset 0 1px #fff, 0 0.45rem 1.1rem rgb(42 56 65 / 6%);
}

.technology-group h3 {
  color: #43515a;
}

.technology-grid li {
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  border-color: #bdc8cf;
  background: linear-gradient(180deg, #fafbfc, #e1e6e9);
  color: #2f3c44;
  box-shadow: inset 0 1px #fff, 0 0.15rem 0.35rem rgb(37 51 60 / 5%);
}

.software-future-section {
  border-top-color: #606d76;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #3c464d, #252d33 58%, #343e45);
}

.software-future-section .software-eyebrow,
.future-index {
  color: #c5d0d6;
}

.future-copy h2 {
  color: #f3f6f7;
}

.future-copy h2 span {
  color: #b5cddd;
}

.future-copy > p:last-child {
  color: #d2dbe0;
}

.future-mark {
  border-color: #97a8b2;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #59656d, #39434a);
  color: #e5edf1;
  box-shadow: inset 0 1px rgb(255 255 255 / 20%), inset 0 0 1.5rem rgb(12 20 26 / 20%);
}

.future-mark::before,
.future-mark::after {
  border-color: #9aaab4;
}

.future-mark-core {
  color: #f0f4f6;
}

.future-mark i {
  background: #b4d1e2;
  box-shadow: 0 0 0.55rem rgb(162 201 225 / 40%);
}

.software-footer {
  border-top-color: #aeb9c0;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 11%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e1e5e8, #cfd6db);
}

.footer-brand > p {
  color: #4f5b64;
}

.footer-product-links a span {
  color: #526f83;
}

.footer-meta {
  border-top-color: #b5c0c6;
  color: #596772;
}

.software-mobile-menu summary {
  border-color: #aeb9c1;
  color: #28353d;
}

.software-mobile-menu nav {
  border-color: #b9c3c9;
  background: linear-gradient(145deg, #f4f6f7, #dce2e5);
  box-shadow: 0 1rem 2.4rem rgb(25 39 48 / 18%);
}

.software-mobile-menu nav a {
  color: #34414a;
}

.software-mobile-menu nav a:hover {
  background: #e5eaed;
}

.software-mobile-menu nav .mobile-menu-cta {
  border-color: #9daab3;
}

.motherboard-layout::before {
  background: linear-gradient(180deg, transparent, #adc9db 7%, #839eaf 92%, transparent);
  box-shadow: 0 0 0.6rem rgb(144 185 210 / 25%);
}

.product-chip::after {
  background: #a6c4d6;
  box-shadow: 0 0 0.45rem rgb(143 185 210 / 35%);
}

@media (max-width: 68rem) {
  .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 36rem);
    justify-self: center;
  }
}

@media (max-width: 52rem) {
  .service-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

@media (max-width: 38rem) {
  .software-services-section,
  .software-technologies-section {
    background-size: 100% 5px, auto;
  }

  .services-cta {
    background: linear-gradient(120deg, #d1d8dd, #e5e9eb);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-pulse {
    display: none;
  }
}

@property --module-spark-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.software-page {
  --software-bg: #171d21;
  --software-panel: #20282d;
  --software-raised: #2b343a;
  --software-ink: #f3f6f7;
  --software-muted: #c1cbd0;
  --software-dim: #98a5ac;
  --software-green: #9cddff;
  --software-line: rgb(194 211 221 / 20%);
  --color-product-default: #a7dfff;
  background:
    radial-gradient(ellipse at 50% 9%, rgb(111 155 177 / 9%), transparent 37%),
    #171d21;
}

.software-page a:focus-visible,
.software-page button:focus-visible,
.software-page summary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px #287da8;
}

.software-header {
  border-bottom-color: rgb(208 222 230 / 15%);
  background: rgb(19 25 29 / 95%);
}

.software-wordmark-label,
.software-navigation a,
.footer-navigation a,
.footer-product-links a {
  color: #c5d0d5;
}

.software-wordmark-divider {
  background: rgb(218 230 236 / 32%);
}

.software-navigation .software-header-cta,
.mobile-menu-cta {
  border-color: rgb(151 199 221 / 52%);
  background: linear-gradient(180deg, rgb(217 235 244 / 13%), rgb(120 156 174 / 6%));
  color: #f2f8fb;
}

.software-header-cta:hover,
.mobile-menu-cta:hover {
  border-color: #b7e5fb;
  background: rgb(151 199 221 / 18%);
}

.software-hero {
  background:
    radial-gradient(ellipse at 50% 48%, rgb(111 171 201 / 13%), transparent 47%),
    linear-gradient(180deg, #1a2227 0%, #171f24 68%, #1a2227 100%);
}

.software-hero::before {
  background-image:
    linear-gradient(rgb(203 222 231 / 3.2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(203 222 231 / 3.2%) 1px, transparent 1px);
}

.software-eyebrow {
  color: #b2c1c9;
}

.software-eyebrow > span,
.board-online i {
  background: #9bdcff;
  box-shadow: 0 0 0.75rem rgb(132 205 240 / 62%);
}

.software-hero h1 span,
.ecosystem-heading h2 span,
.future-copy h2 span {
  color: #b7d0de;
}

.software-hero-intro p,
.ecosystem-copy p,
.ecosystem-copy .ecosystem-lead {
  color: #c2cdd2;
}

.software-primary-link {
  border-color: rgb(199 219 229 / 30%);
  background: linear-gradient(180deg, rgb(227 239 245 / 10%), rgb(97 119 131 / 8%));
}

.software-primary-link:hover {
  border-color: #b7e5fb;
  background: rgb(120 191 224 / 13%);
}

.motherboard {
  border-color: #8998a1;
  background:
    radial-gradient(ellipse at 50% 49%, rgb(109 169 197 / 15%), transparent 44%),
    radial-gradient(ellipse at 50% 50%, transparent 36%, rgb(12 17 20 / 55%) 100%),
    repeating-linear-gradient(100deg, rgb(230 239 243 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #303a40 0%, #20292e 45%, #171f23 100%);
  box-shadow:
    0 2.25rem 5rem rgb(0 0 0 / 48%),
    inset 0 0 4.5rem rgb(169 197 210 / 5%),
    inset 0 1px rgb(255 255 255 / 13%);
}

.motherboard::before {
  background-image:
    radial-gradient(rgb(221 235 241 / 23%) 0.65px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(192 218 231 / 5%) 50%, transparent 50.2%);
  opacity: 0.32;
}

.motherboard::after {
  border-color: rgb(219 231 237 / 17%);
  background:
    radial-gradient(circle, #202a30 0 1px, #d8e2e7 1.2px 2px, #76858d 2.4px 3px, transparent 3.5px) 8px 8px / 8px 8px no-repeat,
    radial-gradient(circle, #202a30 0 1px, #d8e2e7 1.2px 2px, #76858d 2.4px 3px, transparent 3.5px) calc(100% - 16px) 8px / 8px 8px no-repeat,
    radial-gradient(circle, #202a30 0 1px, #d8e2e7 1.2px 2px, #76858d 2.4px 3px, transparent 3.5px) 8px calc(100% - 16px) / 8px 8px no-repeat,
    radial-gradient(circle, #202a30 0 1px, #d8e2e7 1.2px 2px, #76858d 2.4px 3px, transparent 3.5px) calc(100% - 16px) calc(100% - 16px) / 8px 8px no-repeat;
}

.board-topline,
.board-bottomline {
  color: #b0c1c9;
}

.circuit-traces path {
  stroke: url("#trace-glow");
  opacity: 0.82;
}

.circuit-nodes circle {
  fill: url("#trace-node");
  filter: drop-shadow(0 0 4px rgb(145 216 246 / 66%));
}

.circuit-highlight {
  stroke: rgb(196 238 255 / 85%);
  filter: drop-shadow(0 0 4px rgb(130 202 235 / 52%));
}

.circuit-pulse {
  fill: #fff;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px rgb(142 218 250 / 90%));
}

.circuit-pulse-return {
  fill: #a9e3ff;
}

.motherboard-core {
  border-color: #edf4f7;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 80%), transparent 30%, rgb(255 255 255 / 17%) 51%, transparent 73%),
    repeating-linear-gradient(95deg, rgb(41 55 65 / 4%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e2e8eb 0%, #9daab2 52%, #d7dfe3 100%);
  box-shadow:
    0 0 0 0.4rem rgb(26 34 39 / 94%),
    0 0 0 0.48rem rgb(211 224 231 / 64%),
    0 1.5rem 3.5rem rgb(0 0 0 / 60%),
    0 0 2.75rem rgb(115 193 225 / 19%),
    inset 0 0 2rem rgb(255 255 255 / 34%);
}

.core-frame {
  border-color: rgb(53 69 78 / 32%);
}

.core-overline,
.core-name {
  color: #26333a;
}

.core-subtitle {
  color: #365a6d;
}

.core-mark {
  filter: drop-shadow(0 0 0.7rem rgb(235 248 255 / 62%));
}

.core-pin {
  background: #b7eaff;
  box-shadow: 0 0 0.65rem rgb(137 214 245 / 87%);
}

.product-chip {
  border-color: rgb(176 199 211 / 54%);
  background:
    linear-gradient(115deg, rgb(211 229 238 / 9%), transparent 55%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #46535b, #303b42 57%, #252f35);
  box-shadow:
    0 1.2rem 2rem rgb(0 0 0 / 45%),
    inset 0 1px rgb(255 255 255 / 17%),
    inset 0 -1rem 1.5rem rgb(0 0 0 / 20%);
}

.product-chip:hover,
.product-chip.is-selected {
  border-color: color-mix(in srgb, var(--chip-accent) 75%, #e8f7ff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-accent) 42%, transparent),
    0 1.4rem 2.5rem rgb(0 0 0 / 53%),
    0 0 1.5rem color-mix(in srgb, var(--chip-accent) 18%, transparent),
    inset 0 1px rgb(255 255 255 / 17%);
}

.chip-topline,
.chip-description,
.chip-select-prompt {
  color: #d3dde2;
}

.chip-status {
  color: color-mix(in srgb, var(--chip-accent) 72%, white);
}

.product-detail {
  border-color: #7e8d96;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(130deg, #313b41, #20292e);
  box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 0.8rem 2rem rgb(0 0 0 / 17%);
}

.detail-kicker,
.detail-label {
  color: #c0cdd3;
}

.detail-kicker span,
.detail-overview > p:last-child {
  color: #c2cdd2;
}

.detail-meta {
  border-left-color: rgb(226 237 242 / 22%);
}

.detail-link {
  border-color: rgb(219 232 239 / 38%);
  background: linear-gradient(180deg, rgb(244 249 251 / 11%), rgb(102 123 135 / 9%));
}

.detail-link:hover {
  border-color: #b9e8ff;
  background: rgb(181 225 246 / 13%);
}

.detail-link-primary {
  border-color: #c6eaff;
  background: linear-gradient(180deg, #dff3fc, #a9d8ee);
  color: #1b2b34 !important;
}

.software-ecosystem-section {
  border-block-color: rgb(202 218 227 / 15%);
  background:
    radial-gradient(ellipse at 85% 50%, rgb(101 159 187 / 10%), transparent 36%),
    #1c2429;
}

.ecosystem-heading h2,
.products-heading h2 {
  color: #f1f5f7;
}

.ecosystem-principles > div {
  border-top-color: rgb(212 226 233 / 22%);
}

.ecosystem-principles span {
  color: #a9d7ed;
}

.ecosystem-principles strong {
  color: #e4ebee;
}

.software-products-section {
  border-block: 1px solid #57656d;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #333e44, #252e33 55%, #303a40);
}

.products-heading > p {
  color: #c8d3d9;
}

.software-products {
  gap: 1rem;
}

.showcase-product {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #74838c;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 8%), transparent 38%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2.1%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #505b62, #3b464d 60%, #424e55);
  box-shadow: 0 0.7rem 1.5rem rgb(10 16 20 / 25%), inset 0 1px rgb(255 255 255 / 18%), inset 0 -1rem 1.5rem rgb(14 22 27 / 12%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.showcase-product::before,
.service-card::before,
.technology-group::before,
.services-cta::before,
.product-detail::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle, #273138 0 1px, #e0e8ec 1.2px 2px, #7a8991 2.4px 3px, transparent 3.5px) 8px 8px / 8px 8px no-repeat,
    radial-gradient(circle, #273138 0 1px, #e0e8ec 1.2px 2px, #7a8991 2.4px 3px, transparent 3.5px) calc(100% - 16px) 8px / 8px 8px no-repeat,
    radial-gradient(circle, #273138 0 1px, #e0e8ec 1.2px 2px, #7a8991 2.4px 3px, transparent 3.5px) 8px calc(100% - 16px) / 8px 8px no-repeat,
    radial-gradient(circle, #273138 0 1px, #e0e8ec 1.2px 2px, #7a8991 2.4px 3px, transparent 3.5px) calc(100% - 16px) calc(100% - 16px) / 8px 8px no-repeat;
  content: "";
  opacity: 0.82;
  pointer-events: none;
}

.showcase-product::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid transparent;
  background: conic-gradient(from var(--module-spark-angle), transparent 0 76%, #f5fcff 79%, #91ddff 82%, transparent 86% 100%) border-box;
  content: "";
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.showcase-product:hover,
.showcase-product:focus-within {
  transform: translateY(-3px);
  border-color: #a3d8f1;
  box-shadow: 0 1rem 2rem rgb(7 13 17 / 30%), inset 0 1px rgb(255 255 255 / 20%), 0 0 1rem rgb(125 200 232 / 12%);
}

.showcase-product:hover::after,
.showcase-product:focus-within::after {
  opacity: 0.9;
  animation: module-circuit-run 2.8s linear infinite;
}

.showcase-product-topline,
.showcase-product-footer {
  color: #cbd6db;
}

.showcase-product-number,
.showcase-product-status {
  color: #c4e7f7;
}

.showcase-product h3 {
  color: #f5f8fa;
}

.showcase-product > p {
  color: #dae2e6;
}

.showcase-product-footer {
  border-top-color: rgb(244 248 250 / 20%);
}

.showcase-product-link {
  position: relative;
  z-index: 3;
  color: #f1f8fb !important;
  text-decoration-color: #a7d8ee;
}

.showcase-product-link:hover {
  color: #c9efff !important;
}

.software-services-section {
  background:
    repeating-linear-gradient(100deg, rgb(49 65 75 / 3%) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, #dce2e5, #cbd3d8 55%, #e1e6e9);
}

.services-heading h2 {
  color: #52616a;
}

.services-heading > p:last-child {
  max-width: 46rem;
  color: #35434b;
}

.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #aebac1;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 78%), transparent 40%),
    repeating-linear-gradient(100deg, rgb(53 68 79 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f1f4f5, #d7dfe3 58%, #e7ecee);
  box-shadow: 0 0.75rem 1.8rem rgb(32 45 54 / 10%), inset 0 1px #fff, inset 0 -0.5rem 1rem rgb(93 109 119 / 5%);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: #8498a3;
  box-shadow: 0 1rem 2rem rgb(32 45 54 / 15%), inset 0 1px #fff;
}

.service-card-icon {
  border-color: #aebbc4;
  background: linear-gradient(145deg, #f9fafb, #cfd7dc);
  color: #466d83;
  box-shadow: inset 0 1px #fff, 0 0.3rem 0.8rem rgb(43 58 68 / 9%);
}

.service-card-index {
  color: #566a76;
}

.service-card h3 {
  color: #20282e;
}

.service-card-description {
  min-height: 0;
  color: #3e4c54;
}

.service-card ul {
  border-top-color: #c0cbd1;
  color: #354149;
}

.service-card li::before {
  border-color: #718b9d;
}

.service-card-link {
  position: relative;
  z-index: 3;
  border-color: #aebbc3;
  background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(210 218 223 / 70%));
  color: #344957;
}

.service-card-link:hover {
  border-color: #708ca1;
  background: #f4f7f8;
}

.services-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #aeb9c1;
  background: linear-gradient(120deg, #d1d8dd, #e5e9eb);
  box-shadow: inset 0 1px rgb(255 255 255 / 75%);
}

.services-cta h3 {
  color: #20282e;
}

.services-cta-link {
  position: relative;
  z-index: 3;
  border: 1px solid #657783;
  background: linear-gradient(180deg, #485963, #303b43);
  box-shadow: inset 0 1px rgb(255 255 255 / 25%), 0 0.3rem 0.8rem rgb(31 42 49 / 14%);
}

.services-cta-link:hover {
  background: #26343d;
}

.software-technologies-section {
  border-top-color: #9eabb2;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e3e8ea, #d1d9dd 60%, #e2e7e9);
}

.technologies-heading h2 {
  color: #20282e;
}

.technologies-lead {
  color: #34424a;
}

.technologies-note {
  color: #46545d;
}

.technology-group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #afbbc2;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 70%), transparent 45%),
    repeating-linear-gradient(100deg, rgb(53 68 79 / 2%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f0f3f4, #dce2e5);
  box-shadow: inset 0 1px #fff, 0 0.45rem 1.1rem rgb(42 56 65 / 6%);
}

.technology-group h3 {
  color: #374750;
}

.technology-grid li {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-color: #adbcc5;
  background: linear-gradient(180deg, #fbfcfc, #dce3e6);
  color: #293941;
  box-shadow: inset 0 1px #fff, 0 0.15rem 0.35rem rgb(37 51 60 / 6%);
}

.software-future-section {
  border-top-color: #77868e;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #354047, #242c31 58%, #303a40);
}

.software-footer {
  border-top-color: #9faeb6;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 7%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #dce2e5, #c8d0d5);
}

.footer-brand > p {
  color: #3f4d55;
}

.footer-product-links a span {
  color: #456b80;
}

.footer-meta {
  border-top-color: #aab6bd;
  color: #4a5962;
}

.software-mobile-menu summary {
  border-color: #aeb9c1;
  color: #28353d;
}

.software-mobile-menu nav {
  border-color: #b9c3c9;
  background: linear-gradient(145deg, #f4f6f7, #dce2e5);
  box-shadow: 0 1rem 2.4rem rgb(25 39 48 / 18%);
}

.software-mobile-menu nav a {
  color: #34414a;
}

.software-mobile-menu nav a:hover {
  background: #e5eaed;
}

.software-mobile-menu nav .mobile-menu-cta {
  border-color: #9daab3;
}

.motherboard-layout::before {
  background: linear-gradient(180deg, transparent, #9bdcff 7%, #587f93 92%, transparent);
  box-shadow: 0 0 0.6rem rgb(144 205 232 / 24%);
}

@keyframes module-circuit-run {
  to { --module-spark-angle: 360deg; }
}

@media (max-width: 52rem) {
  .showcase-product::before,
  .service-card::before,
  .technology-group::before,
  .services-cta::before,
  .product-detail::before {
    opacity: 0.68;
  }
}

@media (max-width: 38rem) {
  .motherboard-layout::before {
    background: linear-gradient(180deg, transparent, #b9eaff 18%, #6eb6d7 48%, #b9eaff 82%, transparent);
    background-size: 100% 220%;
    animation: mobile-trace-flow 2.8s linear infinite;
  }

  .software-services-section,
  .software-technologies-section {
    background-size: 100% 5px, auto;
  }

  .product-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-meta {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .detail-actions {
    grid-column: auto;
  }
}

@keyframes mobile-trace-flow {
  to { background-position: 0 220%; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .software-page *,
  .software-page *::before,
  .software-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .circuit-pulse,
  .showcase-product::after {
    display: none !important;
  }

  .motherboard-layout::before {
    animation: none !important;
    background-position: 0 50%;
  }
}

body.software-page {
  --software-bg: #cbd2d6;
  --software-panel: #e1e6e9;
  --software-raised: #f0f3f4;
  --software-ink: #172229;
  --software-muted: #394851;
  --software-dim: #4a5a63;
  --software-accent: #09577e;
  --software-green: #09577e;
  --software-line: rgb(37 55 65 / 20%);
  --color-product-default: var(--software-accent);
  --color-product-electronyos: var(--software-accent);
  --color-product-istylist: var(--software-accent);
  --color-product-bills: var(--software-accent);
  background:
    repeating-linear-gradient(92deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #dce1e4 0%, #c4ccd1 48%, #e0e5e8 100%);
  color: var(--software-ink);
  color-scheme: light;
}

.software-page a:focus-visible,
.software-page button:focus-visible,
.software-page summary:focus-visible {
  outline: 2px solid #123f59;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #a9d8ee;
}

.software-header {
  border-bottom-color: #9daab1;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 76%), transparent 48%),
    repeating-linear-gradient(95deg, rgb(255 255 255 / 15%) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #edf0f2 0%, #cbd2d6 100%);
  box-shadow: 0 0.4rem 1.4rem rgb(26 39 48 / 12%);
}

.software-wordmark-label,
.software-navigation a,
.footer-navigation a,
.footer-product-links a {
  color: #33434c;
}

.software-navigation a:hover,
.footer-navigation a:hover,
.footer-product-links a:hover,
.software-navigation a[aria-current="page"] {
  color: #10191e;
}

.software-wordmark-divider {
  background: #89979f;
}

.software-navigation .software-header-cta,
.mobile-menu-cta {
  border-color: #47758e;
  background: linear-gradient(180deg, #f8fbfc, #ccdce4);
  color: #173c50;
  box-shadow: inset 0 1px #fff, 0 0.25rem 0.7rem rgb(35 61 74 / 10%);
}

.software-header-cta:hover,
.mobile-menu-cta:hover {
  border-color: #126d9b;
  background: linear-gradient(180deg, #fff, #d4eaf3);
}

.software-hero {
  background:
    radial-gradient(ellipse at 50% 42%, rgb(255 255 255 / 66%), transparent 46%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e9edef 0%, #d2d9dd 53%, #e2e7e9 100%);
}

.software-hero::before {
  background-image:
    linear-gradient(rgb(44 62 73 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(44 62 73 / 4%) 1px, transparent 1px);
}

.software-hero h1,
.ecosystem-heading h2,
.products-heading h2,
.future-copy h2,
.services-heading h2,
.technologies-heading h2 {
  color: #18242b;
}

.software-hero h1 span,
.ecosystem-heading h2 span,
.future-copy h2 span,
.services-heading h2 span,
.technologies-lead span {
  color: #315d75;
}

.software-eyebrow,
.board-topline,
.board-bottomline {
  color: #3e515c;
}

.software-eyebrow > span,
.board-online i {
  background: #1687bb;
  box-shadow: 0 0 0.7rem rgb(22 135 187 / 42%);
}

.software-hero-intro p,
.ecosystem-copy p,
.ecosystem-copy .ecosystem-lead,
.products-heading > p,
.services-heading > p:last-child,
.technologies-lead,
.technologies-note,
.future-copy > p:last-child {
  color: #35464f;
}

.software-primary-link {
  border-color: #8799a3;
  background: linear-gradient(180deg, #f9fbfc, #d1d9de);
  color: #1b303c !important;
  box-shadow: inset 0 1px #fff, 0 0.35rem 1rem rgb(32 45 55 / 9%);
}

.software-primary-link:hover {
  border-color: #397c9d;
  background: linear-gradient(180deg, #fff, #d8edf5);
}

.motherboard {
  border-color: #75858e;
  background:
    radial-gradient(ellipse at 50% 49%, rgb(255 255 255 / 58%), transparent 39%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgb(67 80 88 / 16%) 100%),
    repeating-linear-gradient(105deg, rgb(255 255 255 / 10%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #c0c9ce 0%, #929fa6 48%, #c5cdd1 100%);
  box-shadow:
    0 1.5rem 3.5rem rgb(28 39 47 / 24%),
    inset 0 1px rgb(255 255 255 / 76%),
    inset 0 -1rem 2rem rgb(55 69 77 / 11%);
}

.motherboard::before {
  background-image:
    radial-gradient(rgb(52 71 82 / 22%) 0.7px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(255 255 255 / 22%) 50%, transparent 50.2%);
  opacity: 0.35;
}

.motherboard::after {
  border-color: rgb(255 255 255 / 44%);
}

.circuit-traces path {
  stroke: #536e7c;
  opacity: 0.76;
}

.circuit-nodes circle {
  fill: #e8faff;
  filter: drop-shadow(0 0 4px rgb(65 173 220 / 72%));
}

.circuit-highlight {
  stroke: #e9fbff;
  stroke-dasharray: 12 110;
  stroke-dashoffset: 0;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgb(42 161 213 / 84%));
  animation: circuit-energy-flow 2.35s linear infinite;
}

.circuit-pulse {
  display: initial;
  fill: #fff;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgb(47 179 231 / 95%));
}

.circuit-pulse-return {
  fill: #bceeff;
  opacity: 0.64;
}

.motherboard-core {
  z-index: 2;
  border-color: #f4fcff;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 80%), transparent 31%, rgb(255 255 255 / 22%) 52%, transparent 74%),
    repeating-linear-gradient(95deg, rgb(37 55 66 / 5%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e7ecee 0%, #aeb9bf 50%, #dce3e6 100%);
  box-shadow:
    0 0 0 0.4rem rgb(68 80 87 / 82%),
    0 0 0 0.48rem rgb(255 255 255 / 72%),
    0 1.5rem 3.5rem rgb(39 52 60 / 28%),
    0 0 2.75rem rgb(70 190 235 / 38%),
    inset 0 0 2rem rgb(255 255 255 / 52%);
}

.motherboard-core::before {
  position: absolute;
  z-index: 0;
  inset: 19%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 96%) 0%, rgb(109 220 255 / 66%) 24%, rgb(70 174 222 / 25%) 53%, transparent 76%);
  content: "";
  filter: blur(0.35rem);
  opacity: 0.88;
  pointer-events: none;
  animation: core-light-bloom 3.2s ease-in-out infinite;
}

.motherboard-core::after {
  position: absolute;
  z-index: 1;
  inset: 0.65rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 2px) 7% 25% / 5px 5px no-repeat,
    radial-gradient(circle, #b8efff 0 1px, transparent 2px) 93% 37% / 5px 5px no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 14% 82% / 5px 5px no-repeat;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: core-spark 3.8s steps(1, end) infinite;
}

.core-frame {
  z-index: 1;
  border-color: rgb(48 69 81 / 40%);
}

.core-overline,
.core-name {
  position: relative;
  z-index: 2;
  color: #1d2b33;
}

.core-subtitle {
  position: relative;
  z-index: 2;
  color: #145d7d;
}

.core-mark {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 0.8rem rgb(239 251 255 / 95%));
}

.core-pin {
  z-index: 2;
  background: #e8fbff;
  box-shadow: 0 0 0.65rem rgb(49 183 230 / 95%);
}

.motherboard-layout::before {
  background: linear-gradient(180deg, transparent, #e8faff 7%, #54b9e2 50%, #dff8ff 92%, transparent);
  box-shadow: 0 0 0.8rem rgb(55 176 222 / 48%);
}

.product-chip {
  border-color: #788b95;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 62%), transparent 55%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 18%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #dce3e6, #aeb9bf 57%, #d0d8dc);
  box-shadow:
    0 1.2rem 2rem rgb(41 54 62 / 22%),
    inset 0 1px #fff,
    inset 0 -1rem 1.5rem rgb(54 69 78 / 9%);
  color: #1b2930;
}

.product-chip:hover,
.product-chip.is-selected {
  border-color: #167eae;
  box-shadow:
    0 0 0 1px rgb(22 126 174 / 36%),
    0 1.4rem 2.5rem rgb(38 54 63 / 27%),
    0 0 1.3rem rgb(65 177 222 / 32%),
    inset 0 1px #fff;
}

.chip-topline,
.chip-description,
.chip-select-prompt {
  color: #34464f;
}

.chip-name {
  color: #17232a;
}

.chip-status {
  color: #07577e;
}

.product-detail {
  border-color: #89979e;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 58%), transparent 45%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 18%) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #e5e9eb, #c2cbd0 58%, #dce2e5);
  box-shadow: inset 0 1px #fff, 0 0.8rem 2rem rgb(40 54 63 / 12%);
}

.detail-kicker,
.detail-label {
  color: #3a4b54;
}

.detail-overview h2 {
  color: #19262d;
}

.detail-kicker span,
.detail-overview > p:last-child {
  color: #354750;
}

.detail-status {
  color: #1d3039;
}

.detail-meta {
  border-left-color: rgb(61 80 91 / 29%);
}

.detail-link {
  border-color: #7d929e;
  background: linear-gradient(180deg, #f7f9fa, #cbd5da);
  color: #213944 !important;
}

.detail-link:hover {
  border-color: #1679a4;
  background: linear-gradient(180deg, #fff, #d7edf5);
}

.detail-link-primary {
  border-color: #155e7b;
  background: linear-gradient(180deg, #287d9f, #145d7b);
  color: #fff !important;
}

.detail-link-primary:hover {
  background: linear-gradient(180deg, #176b8d, #104e69);
}

.software-ecosystem-section {
  border-block-color: #a7b3b9;
  background:
    radial-gradient(ellipse at 85% 50%, rgb(255 255 255 / 54%), transparent 38%),
    repeating-linear-gradient(95deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(140deg, #dce2e5, #c4cdd2 57%, #e0e5e7);
}

.ecosystem-heading h2,
.products-heading h2 {
  color: #19262d;
}

.ecosystem-principles > div {
  border-color: #aab6bc;
}

.ecosystem-principles span {
  color: #07577e;
}

.ecosystem-principles strong {
  color: #26363e;
}

.software-products-section {
  border-block: 1px solid #8e9da5;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 56%), transparent 55%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 12%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #cbd3d7, #b9c3c8 55%, #d7dde0);
}

.showcase-product {
  border-color: #8c9ba2;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 70%), transparent 42%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 13%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e3e8ea, #c6cfd3 60%, #dbe1e4);
  box-shadow: 0 0.7rem 1.5rem rgb(32 46 55 / 13%), inset 0 1px #fff, inset 0 -1rem 1.5rem rgb(73 89 98 / 6%);
}

.showcase-product::before {
  background:
    radial-gradient(circle, #334650 0 1px, #f2f6f7 1.2px 2px, #8b9aa1 2.4px 3px, transparent 3.5px) 8px 8px / 8px 8px no-repeat,
    radial-gradient(circle, #334650 0 1px, #f2f6f7 1.2px 2px, #8b9aa1 2.4px 3px, transparent 3.5px) calc(100% - 16px) 8px / 8px 8px no-repeat,
    radial-gradient(circle, #334650 0 1px, #f2f6f7 1.2px 2px, #8b9aa1 2.4px 3px, transparent 3.5px) 8px calc(100% - 16px) / 8px 8px no-repeat,
    radial-gradient(circle, #334650 0 1px, #f2f6f7 1.2px 2px, #8b9aa1 2.4px 3px, transparent 3.5px) calc(100% - 16px) calc(100% - 16px) / 8px 8px no-repeat;
  opacity: 0.9;
}

.showcase-product:hover,
.showcase-product:focus-within {
  border-color: #167ba8;
  box-shadow: 0 1rem 2rem rgb(35 51 60 / 18%), inset 0 1px #fff, 0 0 1rem rgb(61 173 216 / 25%);
}

.showcase-product-topline,
.showcase-product-footer {
  color: #3a4b54;
}

.showcase-product-number,
.showcase-product-status {
  color: #07577e;
}

.showcase-product h3 {
  color: #17242b;
}

.showcase-product > p {
  color: #35464f;
}

.showcase-product-footer {
  border-top-color: rgb(57 75 85 / 25%);
}

.showcase-product-link {
  color: #164c67 !important;
  text-decoration-color: #257fa4;
}

.showcase-product-link:hover {
  color: #07577e !important;
}

.software-services-section,
.software-technologies-section,
.software-future-section,
.software-footer {
  background:
    linear-gradient(112deg, rgb(255 255 255 / 48%), transparent 46%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 14%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #d8dfe2, #c4cdd1 58%, #e0e5e7);
}

.service-card,
.technology-group,
.services-cta {
  border-color: #a2afb5;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 72%), transparent 43%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 14%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e9edef, #d1d9dd 58%, #e1e6e8);
  box-shadow: inset 0 1px #fff, 0 0.65rem 1.4rem rgb(38 53 62 / 9%);
}

.service-card:hover {
  border-color: #728994;
  box-shadow: inset 0 1px #fff, 0 1rem 2rem rgb(38 53 62 / 15%);
}

.service-card-icon {
  border-color: #8c9da6;
  background: linear-gradient(145deg, #fbfcfc, #c5d0d5);
  color: #155f7e;
}

.service-card-index,
.technology-group h3 {
  color: #3d515c;
}

.service-card h3,
.services-cta h3,
.technologies-heading h2 {
  color: #1b272e;
}

.service-card-description,
.service-card ul,
.technologies-note {
  color: #35464f;
}

.service-card ul {
  border-top-color: #abb8bf;
}

.service-card li::before {
  border-color: #426d83;
}

.service-card-link {
  border-color: #82949e;
  background: linear-gradient(180deg, #fbfcfc, #d2dce0);
  color: #244454;
}

.service-card-link:hover {
  border-color: #28789b;
  background: #f4fafc;
}

.services-cta {
  border-color: #98a7ae;
}

.services-cta-link {
  border-color: #154e67;
  background: linear-gradient(180deg, #28738f, #174c64);
  color: #fff;
}

.services-cta-link:hover {
  background: #103f55;
}

.software-technologies-section,
.software-future-section {
  border-color: #a4b0b6;
}

.technology-grid li {
  border-color: #a9b5bb;
  background: linear-gradient(180deg, #f9fbfc, #d4dde1);
  color: #243740;
  box-shadow: inset 0 1px #fff, 0 0.15rem 0.35rem rgb(37 51 60 / 8%);
}

.future-mark {
  border-color: #899ba4;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 20%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e8edef, #c3cdd2);
  color: #234452;
  box-shadow: inset 0 0 1.5rem rgb(255 255 255 / 35%), 0 0.5rem 1.2rem rgb(39 54 63 / 9%);
}

.future-mark::before,
.future-mark::after {
  border-color: #8fa0a8;
}

.future-mark-core,
.future-index {
  color: #314751;
}

.future-mark i {
  background: #167ca6;
  box-shadow: 0 0 0.7rem rgb(48 153 194 / 42%);
}

.footer-brand > p,
.footer-meta {
  color: #3a4a53;
}

.footer-product-links a span {
  color: #09577e;
}

.footer-meta {
  border-top-color: #a7b3b9;
}

.software-mobile-menu summary {
  border-color: #82929a;
  color: #21313a;
}

.software-mobile-menu nav {
  border-color: #9eabb2;
  background: linear-gradient(145deg, #f2f5f6, #d3dbe0);
}

.software-mobile-menu nav a {
  color: #2e414b;
}

.software-mobile-menu nav a:hover {
  background: #e4ecef;
}

@keyframes circuit-energy-flow {
  to { stroke-dashoffset: -122; }
}

@keyframes core-light-bloom {
  0%, 100% { opacity: 0.65; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes core-spark {
  0%, 10%, 12%, 46%, 49%, 100% { opacity: 0; }
  11%, 47% { opacity: 0.9; }
}

@media (max-width: 38rem) {
  .circuit-pulse {
    display: initial;
  }

  .circuit-highlight {
    stroke-width: 2.5;
    animation-duration: 3s;
  }

  .motherboard-core::before {
    filter: blur(0.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-highlight,
  .motherboard-core,
  .motherboard-core::before,
  .motherboard-core::after,
  .core-mark {
    animation: none !important;
  }

  .circuit-pulse {
    display: none !important;
  }

  .motherboard-core::before {
    opacity: 0.9;
    transform: none;
  }

  .motherboard-core::after {
    opacity: 0.18;
  }
}

body.software-page {
  --software-green: #a7e4f8;
}

.software-hero {
  background:
    radial-gradient(ellipse at 50% 54%, rgb(31 99 133 / 17%), transparent 48%),
    linear-gradient(180deg, #080c0f 0%, #0a1014 68%, #080c0f 100%);
}

.software-hero::before {
  background-image:
    linear-gradient(rgb(207 225 233 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(207 225 233 / 3%) 1px, transparent 1px);
}

.motherboard {
  border-color: #687983;
  background:
    radial-gradient(ellipse at 50% 48%, rgb(16 77 103 / 15%), transparent 36%),
    radial-gradient(ellipse at 50% 50%, transparent 36%, rgb(0 0 0 / 67%) 100%),
    linear-gradient(145deg, #090e11 0%, #0c1317 47%, #070b0e 100%);
  box-shadow:
    0 2.25rem 5rem rgb(0 0 0 / 56%),
    inset 0 0 4.5rem rgb(113 158 177 / 5%),
    inset 0 1px rgb(255 255 255 / 8%);
}

.motherboard::before {
  background-image:
    radial-gradient(rgb(211 229 237 / 31%) 0.7px, transparent 0.8px),
    linear-gradient(90deg, transparent 49.8%, rgb(184 217 230 / 5%) 50%, transparent 50.2%);
  opacity: 0.38;
}

.motherboard::after {
  border-color: rgb(214 231 238 / 12%);
}

.board-topline,
.board-bottomline {
  color: #b6c6ce;
}

.board-online i {
  background: #a7e4f8;
  box-shadow: 0 0 0.7rem rgb(125 213 244 / 72%);
}

.circuit-traces path {
  fill: none;
  stroke: url("#trace-glow");
  stroke-width: 1.65;
  opacity: 0.82;
  vector-effect: non-scaling-stroke;
}

.circuit-traces-fine path {
  stroke-width: 1.05;
  opacity: 0.58;
}

.circuit-nodes circle {
  fill: url("#trace-node");
  filter: drop-shadow(0 0 3px rgb(182 225 242 / 64%));
}

.circuit-highlight {
  fill: none;
  stroke: url("#trace-energy");
  stroke-dasharray: 10 104;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 2.1;
  filter: drop-shadow(0 0 4px rgb(97 200 241 / 66%));
  animation: circuit-energy-flow 2.55s linear infinite;
  vector-effect: non-scaling-stroke;
}

.circuit-highlight-branch {
  stroke-width: 1.5;
  animation-duration: 3.2s;
}

.circuit-pulse {
  display: initial;
  fill: #f7fdff;
  opacity: 0.95;
  filter: drop-shadow(0 0 4px #75d7ff) drop-shadow(0 0 8px rgb(73 179 226 / 72%));
}

.board-component {
  fill: none;
  stroke: #9eafb8;
  stroke-width: 1.25;
  opacity: 0.88;
  vector-effect: non-scaling-stroke;
}

.component-body {
  fill: #121b20;
  stroke: #c1d0d7;
  stroke-width: 1.4;
}

.component-inset {
  fill: #202b31;
  stroke: #81949e;
}

.component-detail,
.component-leads {
  stroke: #d3e0e5;
  stroke-linecap: round;
  stroke-width: 1.1;
}

.component-detail-fill {
  fill: #a8c0cb;
  stroke: #e4f2f7;
}

.board-component-passive .component-body {
  fill: #b5c3c9;
  stroke: #e2edf1;
}

.board-component-passive .component-detail,
.board-component-passive .component-leads {
  stroke: #51646e;
}

.board-mounts circle:nth-of-type(odd) {
  fill: #788991;
  stroke: #dce8ed;
  stroke-width: 2;
}

.board-mounts circle:nth-of-type(even) {
  fill: #0a1014;
  stroke: #27343a;
  stroke-width: 1.5;
}

.board-mounts path {
  stroke: #dce8ed;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.junction-sparks circle {
  fill: #e9faff;
  filter: drop-shadow(0 0 4px #78d5f8);
  opacity: 0;
  animation: circuit-junction-spark 4.8s steps(1, end) infinite;
}

.junction-sparks circle:nth-child(2) { animation-delay: 1.2s; }
.junction-sparks circle:nth-child(3) { animation-delay: 2.4s; }
.junction-sparks circle:nth-child(4) { animation-delay: 3.6s; }

.motherboard-core {
  width: min(100%, 18rem);
  min-height: 19rem;
  border: 1px solid #e9f3f7;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 22%), transparent 25%, rgb(255 255 255 / 7%) 52%, transparent 75%),
    repeating-linear-gradient(95deg, rgb(219 234 240 / 4%) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #28343a 0%, #11191e 52%, #35434a 100%);
  box-shadow:
    0 0 0 0.35rem #090e11,
    0 0 0 0.48rem #82939b,
    0 1.5rem 3.5rem rgb(0 0 0 / 61%),
    0 0 2.75rem rgb(68 186 230 / 23%),
    inset 0 1px rgb(255 255 255 / 65%),
    inset 0 0 2rem rgb(183 212 224 / 13%);
}

.motherboard-core::before {
  inset: 18%;
  background: radial-gradient(circle, rgb(255 255 255 / 94%) 0%, rgb(122 224 255 / 62%) 20%, rgb(44 160 207 / 26%) 50%, transparent 76%);
  filter: blur(0.45rem);
  opacity: 0.74;
  animation: core-light-bloom 3.2s ease-in-out infinite;
}

.motherboard-core::after {
  inset: 0.65rem;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 2px) 7% 25% / 5px 5px no-repeat,
    radial-gradient(circle, #b8efff 0 1px, transparent 2px) 93% 37% / 5px 5px no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 14% 82% / 5px 5px no-repeat;
  animation: core-spark 3.8s steps(1, end) infinite;
}

.core-frame {
  inset: 0.48rem;
  border-color: rgb(228 241 247 / 35%);
  box-shadow: inset 0 0 1rem rgb(255 255 255 / 4%);
}

.core-overline,
.core-name {
  color: #f5fafc;
}

.core-subtitle {
  color: #a9e5fa;
}

.core-mark {
  width: 7rem;
  height: 7rem;
  margin-block: 0.9rem 0.6rem;
  filter: drop-shadow(0 0 0.9rem rgb(231 250 255 / 25%));
}

.core-pin {
  z-index: 3;
  background: #e3f2f7;
  box-shadow: 0 0 0.65rem rgb(113 212 244 / 88%);
}

.core-terminal {
  position: absolute;
  z-index: 2;
  display: block;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, #d7e5eb 7px 10px, transparent 10px 15px);
  filter: drop-shadow(0 0 2px rgb(130 202 228 / 55%));
  pointer-events: none;
}

.core-terminal-top,
.core-terminal-bottom {
  left: 8%;
  width: 84%;
  height: 0.4rem;
}

.core-terminal-top { top: -0.75rem; }
.core-terminal-bottom { bottom: -0.75rem; }

.core-terminal-right,
.core-terminal-left {
  top: 8%;
  width: 0.4rem;
  height: 84%;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, #d7e5eb 7px 10px, transparent 10px 15px);
}

.core-terminal-right { right: -0.75rem; }
.core-terminal-left { left: -0.75rem; }

.product-chip {
  border-color: #9eafb8;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 12%), transparent 48%),
    repeating-linear-gradient(100deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #252f34, #121a1e 58%, #222c31);
  box-shadow:
    0 1.2rem 2rem rgb(0 0 0 / 51%),
    inset 0 1px rgb(255 255 255 / 22%),
    inset 0 -1rem 1.5rem rgb(0 0 0 / 25%);
  color: #f3f7f9;
}

.product-chip::before,
.product-chip::after {
  border-color: #d1e0e7;
}

.product-chip::after {
  background: #d3eaf3;
  box-shadow: 0 0 0.55rem rgb(128 213 241 / 65%);
}

.product-chip:hover,
.product-chip.is-selected {
  border-color: #ddf5ff;
  box-shadow:
    0 0 0 1px rgb(167 228 248 / 45%),
    0 1.4rem 2.5rem rgb(0 0 0 / 55%),
    0 0 1.4rem rgb(77 187 228 / 27%),
    inset 0 1px rgb(255 255 255 / 27%);
}

.chip-topline,
.chip-description,
.chip-select-prompt {
  color: #c9d6dc;
}

.chip-name {
  color: #fff;
}

.chip-bottomline {
  border-top-color: rgb(237 246 250 / 20%);
}

.chip-status {
  color: color-mix(in srgb, var(--chip-accent) 70%, white);
}

.product-detail {
  border-color: #aebbc2;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / 19%) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #eef2f4, #cbd4d9 55%, #e4e9ec);
  box-shadow: 0 0.65rem 1.8rem rgb(0 0 0 / 23%), inset 0 1px #fff;
}

.detail-kicker,
.detail-label {
  color: #586972;
}

.detail-overview h2 { color: #1d2b32; }
.detail-overview > p:last-child { color: #43535c; }
.detail-status { color: #293941; }
.detail-meta { border-left-color: #b4c0c6; }

.detail-link {
  border-color: #9aaab2;
  color: #2a414d !important;
}

.detail-link-primary {
  border-color: #365a6c;
  background: linear-gradient(180deg, #55798b, #344f5d);
  color: #fff !important;
}

.software-ecosystem-section,
.software-products-section,
.software-services-section,
.software-technologies-section,
.software-future-section {
  border-color: #aab6bc;
  background:
    radial-gradient(ellipse at 85% 0%, rgb(255 255 255 / 72%), transparent 43%),
    repeating-linear-gradient(100deg, rgb(47 63 72 / 3%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e1e6e9 0%, #cbd3d7 55%, #e5e9eb 100%);
  color: #26343b;
}

.software-ecosystem-section {
  border-block-color: #b5c0c6;
}

.software-products-section {
  border-block: 1px solid #9caab1;
}

.ecosystem-heading h2,
.products-heading h2,
.services-heading h2,
.technologies-heading h2,
.future-copy h2 {
  color: #202b31;
}

.ecosystem-heading h2 span,
.future-copy h2 span {
  color: #526a78;
}

.ecosystem-copy p,
.ecosystem-copy .ecosystem-lead,
.products-heading > p,
.services-heading > p:last-child,
.technologies-note,
.future-copy > p:last-child {
  color: #43525a;
}

.ecosystem-principles,
.ecosystem-principles > div {
  border-color: #aab7be;
}

.ecosystem-principles span,
.ecosystem-principles strong {
  color: #354c58;
}

.showcase-product,
.service-card,
.technology-group,
.services-cta {
  border-color: #a8b5bc;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 77%), transparent 43%),
    repeating-linear-gradient(100deg, rgb(45 61 70 / 2.2%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #f1f4f5 0%, #d2dade 58%, #e8edef 100%);
  box-shadow:
    0 0.7rem 1.5rem rgb(31 45 53 / 12%),
    inset 0 1px #fff,
    inset 0 -0.65rem 1rem rgb(62 77 86 / 5%);
}

.showcase-product-topline,
.showcase-product-footer,
.showcase-product > p,
.service-card-description,
.service-card ul,
.technology-group h3 {
  color: #3d4d55;
}

.showcase-product-number,
.showcase-product-status,
.service-card-index {
  color: #3e6478;
}

.showcase-product h3,
.service-card h3,
.services-cta h3 {
  color: #1c2a31;
}

.showcase-product-footer,
.service-card ul {
  border-top-color: #afbdc4;
}

.showcase-product-link {
  color: #31596d !important;
  text-decoration-color: #7898a8;
}

.service-card-icon {
  border-color: #9eafb8;
  background: linear-gradient(145deg, #fbfcfc, #c6d1d6);
  color: #38667e;
}

.service-card li::before {
  border-color: #517b91;
}

.service-card-link {
  border-color: #9eafb7;
  background: linear-gradient(180deg, #fbfcfc, #d2dce0);
  color: #294451;
}

.services-cta-link {
  border: 1px solid #31586b;
  background: linear-gradient(180deg, #55798b, #344f5d);
}

.technology-grid li {
  border-color: #acb9c0;
  background: linear-gradient(180deg, #fbfcfc, #d4dde1);
  color: #293b44;
}

.future-mark {
  border-color: #9eafb8;
  background:
    repeating-linear-gradient(95deg, rgb(255 255 255 / 20%) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #eef2f4, #c5cfd4);
}

.future-mark-core,
.future-index {
  color: #344c59;
}

@keyframes circuit-junction-spark {
  0%, 6%, 9%, 42%, 46%, 100% { opacity: 0; }
  7%, 44% { opacity: 0.95; }
}

@media (max-width: 38rem) {
  .motherboard {
    background:
      radial-gradient(ellipse at 50% 15%, rgb(31 99 133 / 12%), transparent 30%),
      radial-gradient(rgb(211 229 237 / 24%) 0.7px, transparent 0.8px) 0 0 / 14px 14px,
      linear-gradient(145deg, #090e11, #0c1317 55%, #070b0e);
  }

  .motherboard-core {
    min-height: 14.5rem;
  }

  .core-mark {
    width: 5.4rem;
    height: 5.4rem;
    margin-block: 0.7rem 0.45rem;
  }

  .core-terminal-top,
  .core-terminal-bottom {
    left: 13%;
    width: 74%;
  }

  .core-terminal-right,
  .core-terminal-left {
    top: 13%;
    height: 74%;
  }

  .junction-sparks {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-highlight,
  .motherboard-core,
  .motherboard-core::before,
  .motherboard-core::after,
  .core-mark,
  .junction-sparks circle {
    animation: none !important;
  }

  .circuit-pulse {
    display: none !important;
  }

  .motherboard-core::before {
    opacity: 0.6;
    transform: none;
  }
}