/* Locally rendered optical surfaces; no external assets or framework. */
.capabilities {
  background-image: linear-gradient(#11768a04 1px, transparent 1px), linear-gradient(90deg, #11768a04 1px, transparent 1px), radial-gradient(ellipse at 90% 10%, #bdeee34a, transparent 65%);
  background-size: 72px 72px, 72px 72px, auto;
}
.cap-card { isolation: isolate; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, background .35s; }
.cap-card .optical-edge {
  position: absolute; inset: -1px; padding: 1px; border-radius: inherit; z-index: 3; pointer-events: none;
  background: radial-gradient(190px circle at var(--mx,50%) var(--my,0%), #138fa8, #a5ece6 45%, transparent 76%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.cap-card:is(:hover,:focus-within,.is-touched) .optical-edge { opacity: 1; }
.cap-card:focus-within { border-color: #65aeba; box-shadow: 0 12px 28px #07546518; }
.stack-rail { background: linear-gradient(130deg,#e9f6f6c7,#f7fbfbb3); box-shadow: inset 0 1px 0 #fff, 0 8px 28px #14566c05; }
.stack-step.active { background: linear-gradient(140deg,#fff,#e9f8f7); box-shadow: inset 0 0 0 1px #a9d5d970, 0 4px 14px #0d6f8510; }
.stack-panel { box-shadow: 0 22px 65px #164f6011, inset 0 1px 0 #ffffffd9; }
.stack-visual { position: relative; isolation: isolate; overflow: hidden; border-radius: 13px; }
.product-light-pass {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(108deg,transparent 35%,#c9fff91a 44%,#f6ffff6e 50%,#c9fff91a 56%,transparent 65%);
  mix-blend-mode: screen;
}
.stack-step { transition: background .25s, box-shadow .25s, color .25s; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .cap-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(var(--surface-rx,0deg)) rotateY(var(--surface-ry,0deg));
    border-color: #a6d2d8; box-shadow: 0 20px 38px #0c647c17, 0 2px 4px #0c647c08;
    background: linear-gradient(145deg,#ffffffed,#eaf9f8eb);
  }
  .cap-card::before { background: radial-gradient(300px circle at var(--mx,50%) var(--my,20%),#8be2da42,transparent 70%); }
}
@media (min-width:901px) {
  .main-nav { gap: 3px; padding: 4px; border-radius: 50px; border: 1px solid #b9d9de75; background: #ffffff6b; box-shadow: inset 0 1px 0 #fff, 0 4px 20px #1c6d7f04; }
  .main-nav a { padding: 0 15px; min-height: 38px; border-radius: 40px; font-size: 13px; transition: color .3s, background .3s, box-shadow .3s; }
  .main-nav a::after { display: none; }
  .main-nav a.is-active { color: #116f87; background: linear-gradient(135deg,#fff,#e6f6f5); box-shadow: inset 0 0 0 1px #c5e3e5, 0 2px 8px #16778c0b; }
  .main-nav a:hover { background: #ffffffb3; }
}
@media (max-width:760px) {
  .capabilities { background-size: 48px 48px, 48px 48px, auto; }
  .cap-card.is-touched { background: #f4fcfc; border-color: #6eafbc; box-shadow: 0 6px 20px #0b758b15; }
  .stack-visual { border-radius: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .cap-card, .cap-card .optical-edge, .main-nav a, .stack-step { transition: none; }
  .cap-card:hover { transform: none; }
  .product-light-pass { display: none; }
}