/* Approved v3: distinct application images on one continuous forest-green stage. */
#possibilities {
  --case-width: min(41.4vw, 72svh, 740px);
  scroll-margin-top: -84px;
  padding-top: clamp(32px, 5svh, 54px);
  padding-bottom: 28px;
  background: radial-gradient(ellipse at 50% 76%, #395b4852, transparent 62%), #0b241e;
}
#possibilities .section-heading { align-items: center; margin-bottom: 26px; }
#possibilities h2 {
  font: 600 clamp(34px, min(4.5vw, 7.7svh), 72px)/1.08 var(--sans);
  letter-spacing: -.045em;
}
#possibilities .section-heading > p {
  width: 34%; max-width: 470px; font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.7; padding-left: 32px; padding-right: 130px;
  border-color: #b9955550;
}
#possibilities .carousel-controls { top: clamp(70px, 9svh, 96px); gap: 14px; }
#possibilities .carousel-controls button {
  width: 48px; height: 48px; border-color: #b99555a6; color: #eee9df;
}
#possibilities .industry-tabs {
  justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 12px;
}
#possibilities .industry-tabs button {
  flex: 0 1 auto; min-width: 100px; min-height: 44px; padding: 10px 25px;
  background: transparent; border: 0; border-radius: 5px;
  color: #e5e7df; font-size: 13px;
}
#possibilities .industry-tabs button + button { border-left: 1px solid #d4d8c733; }
#possibilities .industry-tabs button[aria-selected=true] {
  background: #f6f3ea; color: #172c23; border-color: transparent;
}
#possibilities .industry-tabs button:hover { background: #f6f3ea18; }
#possibilities .industry-tabs button[aria-selected=true]:hover { background: #f6f3ea; }
#possibilities .case-stage {
  position: relative; height: calc(var(--case-width) * .6255 + 80px);
  width: 100%; perspective: 1600px; touch-action: pan-y;
  isolation: isolate; overflow: hidden; outline-offset: -6px;
}
#possibilities .case-stage::before {
  content: ''; position: absolute; width: 90%; height: 24%; left: 5%; bottom: 0;
  background: radial-gradient(ellipse, #54715e40, #173d2c20 46%, transparent 70%);
  pointer-events: none;
}
/* Stage-local layers: near windows are foreground; distant windows sit behind. */
#possibilities .case-card {
  position: absolute; left: 50%; top: 50%; width: var(--case-width);
  border: 1px solid #b8c3aa99; border-radius: 8px; padding: 3px;
  background: #15372a; color: #213a2d; overflow: hidden;
  box-shadow: inset 0 0 0 1px #eee5c21a, 0 5px 9px #041a1466,
    0 22px 30px #03160e66, 0 38px 46px #03160e40;
  transform: translate(-50%, -50%); transform-origin: center;
  backface-visibility: hidden;
}
#possibilities .case-card::after {
  content: ''; position: absolute; inset: 3px; border-radius: 4px;
  background: #08241b; opacity: .1; pointer-events: none;
  transition: opacity .6s;
}
#possibilities .case-card[data-state=center] { z-index: 5; }
#possibilities .case-card[data-state=center]::after { opacity: 0; }
#possibilities .case-card[data-state=previous] {
  transform: translate(-94%, -50%) translateY(8px) scale(.88) rotateY(10deg) rotate(-2.2deg);
  z-index: 3; pointer-events: none;
}
#possibilities .case-card[data-state=next] {
  transform: translate(-6%, -50%) translateY(8px) scale(.88) rotateY(-10deg) rotate(2.2deg);
  z-index: 3; pointer-events: none;
}
#possibilities .case-card[data-state=far-previous] {
  transform: translate(-140%, -50%) translateY(20px) scale(.76) rotateY(20deg) rotate(-4.4deg);
  z-index: 1; pointer-events: none;
}
#possibilities .case-card[data-state=far-next] {
  transform: translate(40%, -50%) translateY(20px) scale(.76) rotateY(-20deg) rotate(4.4deg);
  z-index: 1; pointer-events: none;
}
#possibilities .case-image {
  display: block; width: 100%; height: auto; aspect-ratio: 1586/992;
  object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none;
}
#possibilities .case-image[hidden], #possibilities .case-image-error[hidden] { display: none; }
#possibilities .case-image-error {
  padding: 40px 24px; aspect-ratio: 1586/992; background: #e7eddf;
  font-size: 15px; display: grid; place-content: center;
}
#possibilities .case-position { display: flex; justify-content: center; margin: 12px 24px 0; }
#possibilities .case-dots { display: flex; gap: 12px; align-items: center; }
#possibilities .case-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #688174; }
#possibilities .case-dots i.active { background: #c7a55d; }
#possibilities .case-swipe-hint { display: none; }
#possibilities .concept-note {
  text-align: right; color: #b9c7bd; max-width: none; margin-top: 20px;
  font-size: 10px; line-height: 1.6;
}
@media (max-width: 1100px) {
  #possibilities { --case-width: min(46vw, 72svh); }
  #possibilities .section-heading > p { font-size: 12px; padding-left: 20px; padding-right: 96px; }
  #possibilities .carousel-controls { gap: 8px; }
  #possibilities .carousel-controls button { width: 44px; height: 44px; font-size: 22px; }
  #possibilities .industry-tabs button { padding: 10px 20px; font-size: 12px; }
}
@media (max-width: 760px) {
  #possibilities { --case-width: 84vw; scroll-margin-top: 0; padding-top: 38px; padding-bottom: 28px; }
  #possibilities .section-heading { display: block; margin-bottom: 20px; }
  #possibilities h2 { font-size: clamp(28px, 7.8vw, 46px); letter-spacing: -.04em; }
  #possibilities .section-heading > p {
    width: auto; max-width: none; border: 0; padding: 0;
    margin-top: 18px; font-size: 12px; line-height: 1.65;
  }
  #possibilities .carousel-controls { position: static; justify-content: flex-end; margin: 0 24px 12px; }
  #possibilities .carousel-controls button { width: 44px; height: 44px; }
  #possibilities .industry-tabs {
    flex-wrap: wrap; overflow: visible; gap: 6px; margin: 0 24px 8px; padding: 0;
  }
  #possibilities .industry-tabs button {
    flex: 0 1 auto; min-width: 0; padding: 10px 12px;
    border: 1px solid #d4d8c733; font-size: 11px;
  }
  #possibilities .industry-tabs button + button { border: 1px solid #d4d8c733; }
  #possibilities .case-stage { height: calc(var(--case-width) * .6255 + 68px); perspective: 1000px; }
  #possibilities .case-card { border-radius: 7px; }
  #possibilities .case-card[data-state=previous] {
    transform: translate(-138%, -50%) translateY(8px) scale(.8) rotateY(12deg) rotate(-2deg);
  }
  #possibilities .case-card[data-state=next] {
    transform: translate(38%, -50%) translateY(8px) scale(.8) rotateY(-12deg) rotate(2deg);
  }
  #possibilities .case-card[data-state=far-previous], #possibilities .case-card[data-state=far-next] { visibility: hidden; }
  #possibilities .case-position { margin-top: 4px; }
  #possibilities .case-swipe-hint { display: block; text-align: center; font-size: 10px; color: #b6c5bb; margin-top: 12px; }
  #possibilities .concept-note { margin-top: 18px; text-align: center; font-size: 10px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  #possibilities .case-card, #possibilities .case-card::after { transition: none !important; animation: none !important; }
}