.software-hero {
  --focus: var(--mint);
  color: #f3fcf9;
  background: radial-gradient(ellipse at 78% 52%, #123d48 0%, var(--night) 56%);
}
.software-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding-block: clamp(3rem, 5vw, 5.75rem);
}
.software-intro .kicker { color: var(--mint); }
.software-intro .intro { max-width: 31rem; }
.software-intro .button { margin-top: 1.8rem; }

.software-system { position: relative; padding-bottom: 1.85rem; width: min(100%, 40rem); justify-self: center; }
.product-orbit { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.product-orbit::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  background-image: linear-gradient(#69b2b019 1px, transparent 1px), linear-gradient(90deg, #69b2b019 1px, transparent 1px);
  background-size: 7% 7%;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 69%);
  transform: rotate(-15deg);
}
.orbit-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.outer-ring { stroke: #90c6bd75; }
.inner-ring { stroke: #90c6bd50; stroke-dasharray: 2 8; }
.slant-ring { stroke: #90c6bd42; }
.orbit-spokes { stroke: #90c6bd40; stroke-dasharray: 2 5; }
.orbit-trace {
  stroke: #70efcf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 51 949;
  filter: drop-shadow(0 0 3px #42d6b891);
  animation: software-orbit-trace 40s linear infinite;
}
@keyframes software-orbit-trace { to { stroke-dashoffset: -1000; } }
.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #4d978e;
  border-radius: 29%;
  background: linear-gradient(135deg, #1b505b, #102a43 68%);
  box-shadow: inset 0 1px #b6fff825, 0 .8rem 2rem #04132166;
  transform: translate(-50%, -50%) rotate(-8deg);
}
.orbit-core::before { content: ""; position: absolute; inset: 9%; border: 1px solid #47736d; border-radius: 25%; }
.orbit-core img { width: 65%; transform: rotate(8deg); }
.orbit-app {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-decoration: none;
  color: #d6e9e5;
  font-size: clamp(.75rem, 1.05vw, .95rem);
  font-weight: 580;
}
.orbit-tile {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #194352, #0b2535);
  border: 1px solid #467478;
  border-radius: 26%;
}
.orbit-tile { width: clamp(2.9rem, 5.4vw, 5.3rem); aspect-ratio: 1; box-shadow: 0 .6rem 1rem #051b2640; transition: transform .2s, border-color .2s; }
.orbit-tile img { width: 62%; height: 62%; object-fit: contain; }
.orbit-weevault { left: 32%; top: 18.5%; }
.orbit-weestrata { left: 68%; top: 18.5%; }
.orbit-weedesk { left: 86%; top: 50%; }
.orbit-weepilot { left: 68%; top: 81.5%; }
.orbit-weesteps { left: 32%; top: 81.5%; }
.orbit-weelinks { left: 14%; top: 50%; }
.orbit-app:hover, .orbit-app:focus-visible { color: var(--mint); }
.orbit-app:hover .orbit-tile, .orbit-app:focus-visible .orbit-tile { border-color: var(--mint); transform: translateY(-3px); }
.orbit-pause, .orbit-control { position: absolute; bottom: -.25rem; z-index: 1; }
.orbit-pause { right: 7.15rem; margin: 0 0 .66rem; width: 1rem; height: 1rem; accent-color: var(--mint); cursor: pointer; }
.orbit-pause:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.orbit-control { right: 0; padding: .5rem .35rem; font-size: .81rem; line-height: 1.4; color: #c4dad9; cursor: pointer; }
.orbit-pause:checked ~ .product-orbit .orbit-trace { animation-play-state: paused; }

.software-products {
  --gallery-wash: #f4f6f0;
  background-color: var(--gallery-wash);
  transition: background-color .35s ease-out;
}
.software-products .container { padding-block: clamp(3.2rem, 5.5vw, 5.75rem); }
.software-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  list-style: none;
  padding: 0;
  margin-top: clamp(1.65rem, 3vw, 3rem);
}
.family-product { min-width: 0; }
.product-weelinks { --accent: #09634f; --tint: #effaf3; --edge: #bddbc9; --dx: 8px; --dy: -1px; }
.product-weevault { --accent: #165955; --tint: #eef7f4; --edge: #b9d2c8; --dx: 4px; --dy: -3px; }
.product-weestrata { --accent: #554184; --tint: #f6f2fb; --edge: #d8cbe6; --dx: 0px; --dy: -5px; }
.product-weedesk { --accent: #884420; --tint: #fff5ec; --edge: #e9d0b8; --dx: 7px; --dy: 0px; }
.product-weesteps { --accent: #425d35; --tint: #f7f8e9; --edge: #ced8ad; --dx: -3px; --dy: -2px; }
.product-weepilot { --accent: #2b5286; --tint: #eef4fa; --edge: #c4d5e7; --dx: 3px; --dy: -3px; }
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: .85rem;
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 4px #102e3e0a;
  transition: transform .24s ease-out, border-color .24s, box-shadow .24s;
}
.card-art { width: 100%; aspect-ratio: 12 / 5; overflow: hidden; }
.card-art svg { display: block; width: 100%; height: 100%; }
.card-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.15rem, 2.2vw, 2rem);
}
.app-name { display: flex; align-items: center; gap: .65rem; }
.app-name h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.055em; font-weight: 620; }
.app-mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  background: var(--night);
  border-radius: .48rem;
}
.app-mark img { width: 70%; height: 70%; object-fit: contain; }
.card-description { color: #354e54; max-width: 38ch; margin-block: .8rem 1.3rem; line-height: 1.48; }
.card-action {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 680;
}
.action-arrow { font-size: 1.15rem; line-height: 1; }
.action-arrow, .scene-move { transition: transform .32s ease-out; }
.flow-trail { opacity: 0; stroke-dasharray: .22 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .product-weesteps .is-playing .capture-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: capture-guide-click .6s ease-out;
  }
  .product-weesteps .is-playing .guide-step { animation: capture-guide-step .46s ease-out backwards; }
  .product-weesteps .is-playing .first-step { animation-delay: .25s; }
  .product-weesteps .is-playing .second-step { animation-delay: .67s; }
  @keyframes capture-guide-click {
    from { opacity: 1; transform: scale(.4); }
    to { opacity: 0; transform: scale(1.6); }
  }
  @keyframes capture-guide-step {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .product-card:is(:hover, :focus-visible) .flow-trail { animation: app-action-trace .9s ease-out both; }
  @keyframes app-action-trace {
    0% { opacity: 0; stroke-dashoffset: .22; }
    18% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: -1; }
  }
}
.product-card:focus-visible {
  border-radius: .85rem;
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.product-card:is(:hover, :focus-visible) .card-action { text-decoration: underline; text-underline-offset: .23em; }
.product-card:is(:hover, :focus-visible) .scene-move { transform: translate(var(--dx), var(--dy)); }
.product-card:is(:hover, :focus-visible) .action-arrow { transform: translateX(3px); }
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 9px 22px #102e3e19;
  }
  .software-products:has(.product-weelinks:hover) { --gallery-wash: #e5f4eb; }
  .software-products:has(.product-weevault:hover) { --gallery-wash: #e3eeeb; }
  .software-products:has(.product-weestrata:hover) { --gallery-wash: #f0eaf7; }
  .software-products:has(.product-weedesk:hover) { --gallery-wash: #faeddf; }
  .software-products:has(.product-weesteps:hover) { --gallery-wash: #eff2e0; }
  .software-products:has(.product-weepilot:hover) { --gallery-wash: #e7eef8; }
}
@media (min-width: 621px) and (max-width: 960px) {
  .software-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .software-directory { display: flex; flex-direction: column; }
  .card-copy { padding: 1.15rem 1.2rem 1.3rem; }
}

@media (max-width: 760px) {
  .software-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .software-system { width: min(100%, 29rem); }
  .orbit-tile { width: clamp(2.9rem, 12vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-trace { animation: none; }
  .software-products, .product-card, .action-arrow, .scene-move { transition: none; }
  .product-card:is(:hover, :focus-visible),
  .product-card:is(:hover, :focus-visible) :is(.scene-move, .action-arrow) { transform: none; }
  .orbit-pause, .orbit-control { display: none; }
  .orbit-tile { transition: none; }
  .orbit-app:hover .orbit-tile, .orbit-app:focus-visible .orbit-tile { transform: none; }
}