/* Short, thematic previews for the three approach cards. */
#approach{scroll-margin-top:90px}
#approach .value-card{position:relative;isolation:isolate;overflow:hidden}
#approach .value-card::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 95% 0%,rgba(0,171,201,.075),transparent 66%);opacity:0;transition:opacity .3s}
#approach .value-card::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan),#87d4e1);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
#approach .value-card:is(:hover,:focus-visible,.is-playing)::before{opacity:1}
#approach .value-card:is(:hover,:focus-visible,.is-playing)::after{transform:scaleX(1)}
#approach .value-card.is-visible:is(:hover,:focus-visible){transform:translateY(-4px);border-color:#8ab9c8;box-shadow:0 10px 32px rgba(10,59,99,.09)}
#approach .value-card:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.pillar-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin-bottom:20px}
#approach .pillar-top .value-icon{margin:0;flex:0 0 48px;transition:box-shadow .3s}
#approach .value-card.is-playing .value-icon{box-shadow:0 0 0 5px rgba(0,171,201,.09)}
.pillar-scene{display:block;width:160px;max-width:calc(100% - 64px);height:72px;flex:0 1 160px;overflow:visible;color:#92aab8;transition:color .25s}
.value-card:is(:hover,:focus-visible,.is-playing) .pillar-scene{color:#426d85}
.pillar-line{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pillar-panel{fill:#f6f9fb;stroke:currentColor;stroke-width:1.4}
.pillar-detail{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;opacity:.65}
.pillar-accent{fill:none;stroke:#00abc9;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pillar-dot{fill:#00abc9}
.pillar-animated-line{stroke-dasharray:100;stroke-dashoffset:0;opacity:.3}
.pillar-scan{opacity:0}
.pillar-diagnostic-check{stroke-dasharray:100;stroke-dashoffset:0;opacity:.4}
.pillar-diagnostic-node{transform-box:fill-box;transform-origin:center}
.is-playing .pillar-scan{animation:pillar-scan 2.6s ease-in-out both}
.is-playing .pillar-diagnostic-check{animation:pillar-check 2.6s ease both}
.is-playing .pillar-diagnostic-node{animation:pillar-found 2.6s ease both}
.is-playing .pillar-diagnostic-node--second{animation-delay:.3s}
.is-playing .pillar-diagnostic-node--third{animation-delay:.7s}
.pillar-module{transform-box:fill-box;transform-origin:center}
.is-playing .pillar-module--left{animation:pillar-assemble-left 2.6s ease both}
.is-playing .pillar-module--right{animation:pillar-assemble-right 2.6s ease both}
.is-playing .pillar-architecture-link{animation:pillar-connect 2.6s ease both}
.is-playing .pillar-architecture-link--second{animation-delay:.2s}
.pillar-data-pulse{stroke-dasharray:4 96;stroke-dashoffset:100;opacity:0}
.is-playing .pillar-data-pulse{animation:pillar-data 2.6s ease both}
.pillar-growth-bar{transform-box:fill-box;transform-origin:center bottom}
.is-playing .pillar-growth-bar{animation:pillar-grow 2.6s ease both}
.is-playing .pillar-growth-bar--second{animation-delay:.15s}
.is-playing .pillar-growth-bar--third{animation-delay:.3s}
.is-playing .pillar-growth-line{animation:pillar-rise 2.6s ease both}
.pillar-new-module{transform-box:fill-box;transform-origin:center}
.is-playing .pillar-new-module{animation:pillar-expand 2.6s ease both}
@keyframes pillar-scan{0%{transform:translateX(0);opacity:0}12%{opacity:.8}66%{transform:translateX(152px);opacity:.8}82%,100%{transform:translateX(152px);opacity:0}}
@keyframes pillar-found{0%,12%,100%{fill:#f6f9fb;stroke:#92aab8}35%,74%{fill:#e4f6f9;stroke:#00abc9}}
@keyframes pillar-check{0%,56%{stroke-dashoffset:100;opacity:0}76%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes pillar-assemble-left{0%{transform:translate(-7px,5px);opacity:.35}32%,100%{transform:translate(0,0);opacity:1}}
@keyframes pillar-assemble-right{0%{transform:translate(7px,-5px);opacity:.35}42%,100%{transform:translate(0,0);opacity:1}}
@keyframes pillar-connect{0%,20%{stroke-dashoffset:100;opacity:0}62%,100%{stroke-dashoffset:0;opacity:.9}}
@keyframes pillar-data{0%,48%{stroke-dashoffset:100;opacity:0}53%{opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pillar-grow{0%{transform:scaleY(.25);opacity:.45}55%,100%{transform:scaleY(1);opacity:1}}
@keyframes pillar-rise{0%,15%{stroke-dashoffset:100;opacity:0}77%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes pillar-expand{0%,40%{transform:scale(.5);opacity:0}72%,100%{transform:scale(1);opacity:1}}
@media(max-width:400px){.pillar-top{gap:12px}.pillar-scene{width:145px;flex-basis:145px}}
@media(prefers-reduced-motion:reduce){
  #approach .value-card,#approach .value-card::before,#approach .value-card::after,#approach .value-icon,.pillar-scene{transition:none}
  #approach .value-card.is-visible:is(:hover,:focus-visible){transform:none}
  #approach .pillar-scene *{animation:none!important}
  .pillar-scan,.pillar-data-pulse{display:none}
}