.software-page {
  --software-teal: #29c7be;
  --software-blue: #6ab8ff;
  --software-purple: #9b7cff;
}

.software-page .nav a[aria-current="page"] { color: #fff; }
.software-page .nav a[aria-current="page"]::after { transform: scaleX(1); }
.software-hero .concept-hero-copy { justify-content: center; }
.software-hero h1 { max-width: 900px; font-size: clamp(58px, 4.75vw, 72px); }

.software-flow-demo {
  position: relative;
  width: min(100%, 680px);
  height: 184px;
  margin-top: 34px;
}

.software-flow-window {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(106, 184, 255, .26);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(11, 28, 40, .97), rgba(8, 12, 25, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3), 0 0 34px rgba(41, 199, 190, .08);
}

.software-flow-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(106, 184, 255, .13);
  background: rgba(255, 255, 255, .035);
}

.software-flow-topbar > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(235, 244, 246, .32); }
.software-flow-topbar > span:first-child { background: #ff6b64; }
.software-flow-topbar > span:nth-child(2) { background: #f5bd4f; }
.software-flow-topbar > span:nth-child(3) { background: #5acb72; }
.software-flow-topbar small { margin-left: 8px; color: rgba(235, 244, 246, .56); font: 700 9px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.software-flow-topbar b { display: flex; align-items: center; gap: 5px; margin-left: auto; color: rgba(235, 244, 246, .72); font: 750 9px/1 Inter, sans-serif; }
.software-flow-topbar b i { width: 7px; height: 7px; border-radius: 50%; background: var(--software-teal); box-shadow: 0 0 0 4px rgba(41, 199, 190, .1); }

.software-flow-board {
  display: grid;
  grid-template-columns: minmax(160px, .84fr) minmax(260px, 1.65fr);
  gap: 16px;
  height: calc(100% - 32px);
  padding: 15px;
}

.software-flow-request {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(106, 184, 255, .18);
  border-radius: 12px;
  background: radial-gradient(180px 100px at 0% 0%, rgba(106, 184, 255, .12), transparent 72%), rgba(255, 255, 255, .025);
}

.software-flow-request span,
.software-flow-request strong,
.software-flow-request small { display: block; }
.software-flow-request span { color: var(--software-blue); font: 800 9px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.software-flow-request strong { margin-top: 8px; color: #fff7eb; font: 700 15px/1.18 "Space Grotesk", Inter, sans-serif; }
.software-flow-request small { margin-top: 7px; color: rgba(235, 244, 246, .58); font: 600 10px/1.3 Inter, sans-serif; }
.software-flow-steps { display: grid; gap: 6px; }

.software-flow-steps > div {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(41, 199, 190, .11);
  border-radius: 9px;
  background: rgba(255, 255, 255, .022);
  opacity: .56;
  animation: software-flow-step 7.2s ease-in-out infinite;
}

.software-flow-steps > div:nth-child(2) { animation-delay: -4.8s; }
.software-flow-steps > div:nth-child(3) { animation-delay: -2.4s; }
.software-flow-steps > div > span { display: grid; width: 27px; height: 27px; color: #061216; font: 900 9px/1 Inter, sans-serif; border-radius: 50%; background: linear-gradient(135deg, var(--software-blue), var(--software-teal)); place-items: center; }
.software-flow-steps p { min-width: 0; margin: 0; }
.software-flow-steps p b,
.software-flow-steps p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.software-flow-steps p b { color: #eef8fa; font: 700 11px/1.15 Inter, sans-serif; }
.software-flow-steps p small { margin-top: 3px; color: rgba(235, 244, 246, .5); font: 600 8px/1.1 Inter, sans-serif; }
.software-flow-steps > div > i { color: var(--software-teal); font: 800 8px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.software-owner-phone { display: block; margin-top: 10px; color: var(--software-teal); font-size: 13px; font-weight: 800; letter-spacing: .02em; }

@keyframes software-flow-step {
  0%, 18%, 100% { opacity: .55; border-color: rgba(41, 199, 190, .11); transform: none; }
  32%, 52% { opacity: 1; border-color: rgba(41, 199, 190, .4); box-shadow: 0 0 24px rgba(41, 199, 190, .08); transform: translateX(2px); }
  66% { opacity: .7; transform: none; }
}

.software-difference-card { min-height: 570px; }
.software-difference-card .difference-card-copy h3 { max-width: 390px; font-size: clamp(27px, 2.35vw, 36px); }

.software-workflow-visual,
.software-running-visual,
.software-builder-visual {
  position: absolute;
  top: 288px;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(106, 184, 255, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(11, 28, 40, .96), rgba(7, 11, 23, .98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.software-workflow-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(300px 170px at 0% 100%, rgba(106, 184, 255, .13), transparent 72%), linear-gradient(145deg, rgba(11, 28, 40, .96), rgba(7, 11, 23, .98));
}

.software-visual-label { color: rgba(235, 244, 246, .5); font: 800 9px/1 Inter, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.software-workflow-lane { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 13px; }
.software-workflow-lane b { padding: 12px 7px; color: #eef8fa; font-size: 11px; text-align: center; border: 1px solid rgba(106, 184, 255, .17); border-radius: 9px; background: rgba(255, 255, 255, .03); }
.software-workflow-lane i { color: var(--software-teal); font-style: normal; font-weight: 900; }
.software-workflow-tool { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px; border: 1px solid rgba(41, 199, 190, .28); border-radius: 11px; background: rgba(41, 199, 190, .055); }
.software-workflow-tool img { width: 36px; height: 36px; }
.software-workflow-tool p,
.software-workflow-tool small,
.software-workflow-tool strong { display: block; margin: 0; }
.software-workflow-tool small { color: var(--software-teal); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.software-workflow-tool strong { margin-top: 4px; color: #fff7eb; font-size: 15px; }

.software-running-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(300px 180px at 100% 100%, rgba(41, 199, 190, .15), transparent 72%), linear-gradient(145deg, rgba(11, 28, 40, .96), rgba(7, 11, 23, .98));
}

.software-running-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.software-running-head img { width: 132px; height: auto; }
.software-running-head span { display: flex; align-items: center; gap: 6px; color: #dff7f5; font-size: 10px; font-weight: 800; }
.software-running-head span i,
.software-builder-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--software-teal); box-shadow: 0 0 0 4px rgba(41, 199, 190, .1); }
.software-running-status { display: grid; gap: 7px; margin-top: 18px; }
.software-running-status > div { display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(41, 199, 190, .12); border-radius: 9px; background: rgba(255, 255, 255, .025); }
.software-running-status span { color: rgba(235, 244, 246, .66); font-size: 10px; font-weight: 700; }
.software-running-status b { color: #eef8fa; font-size: 10px; }
.software-running-status i { display: grid; width: 22px; height: 22px; color: #061216; font-size: 11px; font-style: normal; font-weight: 900; border-radius: 50%; background: var(--software-teal); place-items: center; }
.software-running-visual > small { margin-top: 14px; color: rgba(235, 244, 246, .54); font-size: 10px; font-weight: 650; text-align: center; }

.software-builder-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(300px 180px at 50% 100%, rgba(155, 124, 255, .14), transparent 72%), linear-gradient(145deg, rgba(11, 28, 40, .96), rgba(7, 11, 23, .98));
}

.software-builder-person { display: flex; align-items: center; gap: 13px; }
.software-builder-person img { width: 58px; height: 58px; object-fit: cover; border: 1px solid rgba(155, 124, 255, .46); border-radius: 50%; }
.software-builder-person small,
.software-builder-person strong { display: block; }
.software-builder-person small { color: rgba(235, 244, 246, .52); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.software-builder-person strong { margin-top: 5px; color: #fff7eb; font-size: 20px; }
.software-builder-thread { display: grid; gap: 7px; margin-top: 16px; }
.software-builder-thread p { max-width: 84%; margin: 0; padding: 9px 11px; color: rgba(235, 244, 246, .8); font-size: 10px; line-height: 1.35; border: 1px solid rgba(106, 184, 255, .14); border-radius: 10px 10px 10px 3px; background: rgba(255, 255, 255, .03); }
.software-builder-thread p:last-child { justify-self: end; color: #e9fffd; border-color: rgba(41, 199, 190, .24); border-radius: 10px 10px 3px 10px; background: rgba(41, 199, 190, .07); }
.software-builder-status { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(235, 244, 246, .62); font-size: 10px; font-weight: 750; }

.software-examples { min-height: 0; padding-top: 76px; padding-bottom: 84px; }
.software-example-grid { row-gap: 22px; }
.software-example-grid > .concept-example-card { min-height: 620px; }
.software-example-grid .concept-example-card:nth-child(1),
.software-example-grid .concept-example-card:nth-child(4) { --example-accent: 41, 199, 190; }
.software-example-grid .concept-example-card:nth-child(2),
.software-example-grid .concept-example-card:nth-child(5) { --example-accent: 106, 184, 255; }
.software-example-grid .concept-example-card:nth-child(3),
.software-example-grid .concept-example-card:nth-child(6) { --example-accent: 155, 124, 255; }
.software-example-grid .homepage-example-media { aspect-ratio: 16 / 9; }
.software-example-grid .homepage-example-media img { object-fit: cover; }
.software-example-grid .concept-example-card:first-child .homepage-example-media img { object-position: center 16%; }
.software-example-grid .homepage-example-body h3 { font-size: clamp(27px, 2.2vw, 33px); }
.software-example-grid .homepage-example-body p { min-height: 72px; font-size: 16px; }

.software-portal-preview,
.software-follow-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  color: #eaf8fb;
  background: radial-gradient(360px 180px at 100% 0%, rgba(155, 124, 255, .17), transparent 70%), linear-gradient(145deg, #0b1c28, #090d1b);
}

.software-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.software-portal-head b { font: 700 17px/1 "Space Grotesk", Inter, sans-serif; }
.software-portal-head span { padding: 6px 9px; color: #dff7f5; font-size: 9px; font-weight: 800; border: 1px solid rgba(41, 199, 190, .28); border-radius: 999px; background: rgba(41, 199, 190, .08); }
.software-portal-next { margin-top: 18px; padding: 14px; border: 1px solid rgba(155, 124, 255, .2); border-radius: 11px; background: rgba(255, 255, 255, .03); }
.software-portal-next small,
.software-portal-next strong,
.software-portal-next span { display: block; }
.software-portal-next small { color: var(--software-purple); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.software-portal-next strong { margin-top: 6px; font-size: 15px; }
.software-portal-next span { margin-top: 4px; color: rgba(235, 244, 246, .52); font-size: 9px; }
.software-portal-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 13px; }
.software-portal-track i { height: 4px; border-radius: 999px; background: var(--software-teal); }
.software-portal-track i:last-child { background: rgba(235, 244, 246, .15); }
.software-portal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.software-portal-meta span { padding: 10px; border: 1px solid rgba(106, 184, 255, .13); border-radius: 9px; background: rgba(255, 255, 255, .02); }
.software-portal-meta small,
.software-portal-meta b { display: block; }
.software-portal-meta small { color: rgba(235, 244, 246, .45); font-size: 8px; text-transform: uppercase; }
.software-portal-meta b { margin-top: 4px; font-size: 11px; }

.software-follow-preview { background: radial-gradient(360px 180px at 0% 0%, rgba(41, 199, 190, .17), transparent 70%), linear-gradient(145deg, #0b1c28, #090d1b); }
.software-follow-lead { padding: 12px 14px; border: 1px solid rgba(41, 199, 190, .22); border-radius: 11px; background: rgba(255, 255, 255, .035); }
.software-follow-lead span,
.software-follow-lead strong,
.software-follow-lead small { display: block; }
.software-follow-lead span { color: var(--software-teal); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.software-follow-lead strong { margin-top: 6px; font-size: 15px; }
.software-follow-lead small { margin-top: 4px; color: rgba(235, 244, 246, .5); font-size: 9px; }
.software-follow-line { width: 1px; height: 9px; margin-left: 21px; background: rgba(41, 199, 190, .35); }
.software-follow-event { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid rgba(106, 184, 255, .13); border-radius: 9px; background: rgba(255, 255, 255, .022); }
.software-follow-event + .software-follow-event { margin-top: 6px; }
.software-follow-event {
  opacity: 0;
  transform: translateY(7px);
  animation: software-follow-beat 5.2s cubic-bezier(.22, 1, .36, 1) infinite;
}
.software-follow-event:last-child { animation-delay: .9s; }
.software-follow-event > i { display: grid; flex: 0 0 25px; width: 25px; height: 25px; color: #061216; font-size: 10px; font-style: normal; font-weight: 900; border-radius: 50%; background: var(--software-teal); place-items: center; }
.software-follow-event:last-child > i { background: var(--software-blue); }
.software-follow-event b,
.software-follow-event small { display: block; }
.software-follow-event b { font-size: 11px; }
.software-follow-event small { margin-top: 3px; color: rgba(235, 244, 246, .5); font-size: 8px; }

@keyframes software-follow-beat {
  0%, 8% { opacity: 0; transform: translateY(7px); }
  18%, 84% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}

.software-process .process-step-card { min-height: 500px; }
.software-process .process-step-card p { font-size: 16px; }
.software-process .concept-process-close p { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .software-flow-steps > div { opacity: 1; animation: none; }
  .software-follow-event { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 1080px) {
  .software-hero h1 { max-width: 820px; }
  .software-difference-card { min-height: 500px; }
  .software-workflow-visual,
  .software-running-visual,
  .software-builder-visual { top: 218px; }
  .software-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .software-example-grid { grid-template-columns: 1fr; }
  .software-example-grid > .concept-example-card { min-height: 0; }
  .software-example-grid .homepage-example-body p { min-height: 0; }
}

@media (max-width: 720px) {
  .software-hero h1 { font-size: clamp(43px, 11.8vw, 58px); line-height: .99; }
  .software-flow-demo { height: 190px; margin-top: 28px; }
  .software-flow-board { grid-template-columns: 1fr; gap: 8px; padding: 9px; }
  .software-flow-request { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 9px 11px; }
  .software-flow-request span { grid-column: 1; }
  .software-flow-request strong { grid-column: 1; margin-top: 4px; font-size: 12px; }
  .software-flow-request small { grid-column: 2; grid-row: 1 / span 2; max-width: 90px; margin: 0; font-size: 8px; text-align: right; }
  .software-flow-steps { gap: 4px; }
  .software-flow-steps > div { padding: 4px 8px; }
  .software-flow-steps > div > span { width: 24px; height: 24px; }
  .software-owner-phone { font-size: 12px; }
  .software-difference-card { min-height: 550px; }
  .software-difference-card .difference-card-copy h3 { font-size: 31px; }
  .software-workflow-visual,
  .software-running-visual,
  .software-builder-visual { top: 270px; right: 12px; bottom: 14px; left: 12px; padding: 16px; }
  .software-workflow-lane { gap: 4px; }
  .software-workflow-lane b { padding: 10px 3px; font-size: 9px; }
  .software-example-grid > .concept-example-card { min-height: 0; }
  .software-portal-preview,
  .software-follow-preview { min-height: 190px; padding: 17px; }
  .software-process .process-step-card { min-height: 450px; }
}