/* Three business-facing previews, styled after the company capability profile. */
.scenario-preview-section { position:relative; isolation:isolate; background:radial-gradient(ellipse at 85% 28%,#e8f3ff80,transparent 55%),linear-gradient(180deg,#fff,#f7fbff); }
.scenario-preview-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.scenario-preview-card { display:flex; flex-direction:column; min-width:0; position:relative; overflow:hidden; border:1px solid var(--scenario-line); border-radius:15px; background:linear-gradient(155deg,#fff,#fafdff); color:var(--scenario-ink); box-shadow:0 10px 35px -22px #1b5aa429; transition:border-color .35s,box-shadow .35s,transform .35s; }
.scenario-preview-card::before { content:''; position:absolute; top:0; left:25px; width:35px; height:2px; background:var(--scenario-blue); }
.scenario-preview-card:hover,.scenario-preview-card:focus-visible { border-color:#8abaff; box-shadow:0 20px 45px -22px #2475db40; transform:translateY(-5px); }
.scenario-preview-card:focus-visible { outline:2px solid var(--scenario-blue); outline-offset:5px; }
.sp-card-top { padding:22px 25px 0; display:flex; justify-content:space-between; align-items:center; gap:15px; }
.sp-card-top > span { display:flex; align-items:center; gap:8px; color:var(--scenario-muted); font:9px/1.5 ui-monospace,monospace; letter-spacing:1px; }
.sp-card-top i { width:5px; height:5px; background:var(--scenario-blue); border-radius:50%; box-shadow:0 0 0 4px #006bff0b; }
.sp-card-top > small { color:var(--scenario-blue); font:14px/1.3 ui-monospace,monospace; }
.sp-visual { height:265px; flex-shrink:0; position:relative; isolation:isolate; margin:10px 15px 0; background:radial-gradient(ellipse at 50% 65%,#d1e6ffb3,transparent 72%); overflow:hidden; pointer-events:none; }
.sp-visual::before { content:''; position:absolute; z-index:-1; inset:10px; background:radial-gradient(#6b9fe06e .6px,transparent .6px); background-size:17px 17px; mask-image:radial-gradient(ellipse,#0008,transparent 70%); }
.sp-visual::after { content:''; position:absolute; z-index:-1; top:55px; right:20px; width:36%; height:160px; transform:skewY(-28deg); background:linear-gradient(135deg,#c9e0ff70,#fff2); border:1px solid #d3e6ff; box-shadow:-35px 16px 0 -1px #e4f0ff77; }
.sp-copy { display:flex; flex-direction:column; flex:1; padding:23px 25px 22px; }
.sp-copy h3 { color:var(--scenario-ink); font-size:22px; font-weight:650; line-height:1.5; margin:0 0 20px; letter-spacing:-.4px; }
.sp-specs { display:grid; gap:17px; margin:0; }
.sp-specs dt { color:var(--scenario-muted); font-size:10px; line-height:1.6; margin-bottom:7px; letter-spacing:.5px; }
.sp-specs dd { margin:0; font-size:13px; line-height:1.85; color:var(--scenario-body); }
.sp-problem dd { min-height:48px; }
.sp-specs .sp-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.sp-path > span { position:relative; display:flex; flex-direction:column; gap:3px; padding:9px 8px; border:1px solid #dceaff; border-radius:5px; background:linear-gradient(135deg,#f0f7ff,#e5f0ffb0); color:#24528d; font-size:11px; line-height:1.8; white-space:nowrap; }
.sp-path i { color:var(--scenario-blue); font:8px/1.4 ui-monospace,monospace; }
.sp-path > span + span::before { content:'›'; position:absolute; left:-7px; top:17px; font-size:12px; color:#6894d2; }
.sp-acceptance dd { color:var(--scenario-ink); font-size:12px; }
.sp-card-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; margin-top:22px; border-top:1px solid var(--scenario-line); }
.sp-card-foot > span { color:var(--scenario-muted); font-size:10px; }
.sp-card-foot strong { display:flex; align-items:center; gap:12px; color:var(--scenario-blue); font-size:12px; font-weight:600; white-space:nowrap; }
.sp-card-foot b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1px solid #c4ddff; font-size:17px; font-weight:400; transition:background .3s,color .3s,transform .3s; }
.scenario-preview-card:hover .sp-card-foot b { transform:translate(2px,-2px); background:var(--scenario-blue); color:white; border-color:var(--scenario-blue); }
.sp-delivery-note { display:flex; align-items:center; gap:19px; padding:21px 25px; margin-top:24px; border-radius:9px; background:linear-gradient(100deg,#edf5ff,#e4f0ff99); border:1px solid #e3efff; }
.sp-delivery-note > span { display:grid; place-items:center; width:33px; height:33px; flex-shrink:0; border-radius:50%; background:#fff; color:var(--scenario-blue); font-size:22px; }
.sp-delivery-note p { color:var(--scenario-ink); font-size:13px; line-height:1.8; }
.sp-delivery-note strong { color:var(--scenario-blue); font-weight:600; }
.sp-delivery-note > small { margin-left:auto; padding-left:20px; border-left:1px solid #c3dfff; color:var(--scenario-muted); font-size:10px; white-space:nowrap; }
.sp-search { position:absolute; top:21px; left:7%; right:7%; display:flex; align-items:center; gap:10px; padding:11px 12px; background:#fff; border:1px solid #d8e7f9; border-radius:7px; box-shadow:0 8px 20px #3881be09; }.sp-search > span:first-child { color:var(--scenario-blue); font-size:20px; line-height:1; }.sp-search > span:nth-child(2) { font-size:10px; color:var(--scenario-body); }.sp-search i { height:11px; width:1px; background:#73a6e9; animation:sp-cursor 2s steps(2,end) infinite; }
.sp-document-stack { position:absolute; left:20%; top:86px; width:56%; height:143px; animation:sp-paper-float 8s ease-in-out infinite; }.sp-document { position:absolute; inset:0; background:linear-gradient(130deg,#fff,#f3f9ff); border:1px solid #b9d6f7; border-radius:7px; padding:15px 17px; transform:rotate(-3deg); box-shadow:0 9px 24px #3171b710; overflow:hidden; }.sp-document-back { transform:rotate(6deg) translate(8px,2px); background:#e8f3ff; border-color:#d0e5ff; }.sp-document > span:first-child { font:6px/1.6 ui-monospace,monospace; letter-spacing:1px; color:var(--scenario-muted); }.sp-document > strong { display:block; color:var(--scenario-ink); font-size:12px; font-weight:500; margin:9px 0 12px; }.sp-document > i { display:block; height:3px; background:#e1ecf8; margin-top:5px; width:90%; }.sp-document > i:nth-of-type(2) { width:65%; }.sp-document mark { display:block; font-size:8px; color:var(--scenario-blue); background:#dcecff; margin-top:9px; padding:4px; white-space:nowrap; }.sp-document .sp-scan { position:absolute; height:1px; left:8px; right:8px; top:38%; background:linear-gradient(90deg,transparent,#579aff,transparent); box-shadow:0 4px 15px 3px #5aabff24; animation:sp-scan 6s ease-in-out infinite; }
.sp-evidence { position:absolute; bottom:7px; left:13%; right:8%; z-index:2; display:flex; align-items:center; gap:12px; background:#ffffffed; border:1px solid #cce0f8; border-radius:8px; padding:12px; box-shadow:0 10px 25px #307abe0d; }.sp-evidence > span { color:var(--scenario-blue); font-size:24px; }.sp-evidence strong { display:block; font-size:11px; color:var(--scenario-ink); font-weight:500; }.sp-evidence small { display:block; font-size:8px; color:var(--scenario-muted); margin-top:5px; }.sp-evidence > b { margin-left:auto; color:var(--scenario-blue); font-weight:400; font-size:12px; }
.sp-request { position:absolute; left:6%; right:6%; top:22px; display:flex; align-items:center; gap:11px; border:1px solid #d0e3fa; border-radius:8px; padding:13px; background:#fff; }.sp-request > span { width:24px; height:24px; border-radius:5px; background:#edf5ff; color:var(--scenario-blue); font:12px/24px ui-monospace,monospace; text-align:center; }.sp-request p { color:var(--scenario-body); font-size:11px; }.sp-router { position:absolute; left:7%; top:112px; width:32%; min-height:102px; padding:16px 10px; border-radius:12px; border:1px solid #b7d3f6; background:linear-gradient(140deg,#fff,#edf6ff); text-align:center; box-shadow:0 9px 25px #4684c510; }.sp-router > span { font-size:12px; color:var(--scenario-ink); }.sp-router > div { display:flex; justify-content:center; align-items:center; gap:4px; height:24px; margin-top:8px; }.sp-router i { width:3px; height:14px; border-radius:2px; background:#3186ff; animation:sp-wave 2.4s ease-in-out infinite; }.sp-router i:nth-child(2n) { animation-delay:-.7s; height:23px; }.sp-router i:nth-child(3n) { animation-delay:-1.3s; height:19px; }.sp-router small { display:block; font:6px/1.6 ui-monospace,monospace; color:var(--scenario-muted); margin-top:7px; letter-spacing:.6px; }
.sp-routing-lines { position:absolute; left:39%; right:48%; top:127px; height:98px; }.sp-routing-lines i { position:absolute; left:0; right:0; height:1px; background:#cadff8; top:36%; }.sp-routing-lines i:first-child { top:0; height:37%; border-top:1px solid #9bc2f4; border-left:1px solid #9bc2f4; background:transparent; border-radius:5px 0 0 0; }.sp-routing-lines i:last-child { top:36%; height:53%; border-bottom:1px solid #cbdff7; border-left:1px solid #cbdff7; background:transparent; border-radius:0 0 0 5px; }.sp-routing-lines:after { content:''; position:absolute; top:0; left:0; width:5px; height:5px; border-radius:50%; background:#438df2; box-shadow:0 0 0 4px #418bfc15; animation:sp-route 4s ease-in-out infinite; }
.sp-destinations { position:absolute; top:105px; right:5%; width:47%; display:grid; gap:10px; }.sp-destinations > span { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #dbe8f8; border-radius:6px; padding:11px; font-size:10px; color:var(--scenario-body); }.sp-destinations > span:first-child { color:var(--scenario-blue); border-color:#9fc3f4; background:#f6faff; animation:sp-target 4s ease-in-out infinite; }.sp-destinations i { width:4px; height:4px; background:#cadcf0; border-radius:50%; }.sp-destinations > span:first-child i { background:#77abeb; }.sp-destinations b { margin-left:auto; font-size:15px; font-weight:400; }
.sp-identity { position:absolute; left:8%; right:8%; top:21px; padding:15px; border:1px solid #cee2f9; border-radius:9px; background:#fff; box-shadow:0 8px 25px #3679b00b; }.sp-identity > span { color:var(--scenario-muted); font:7px/1.6 ui-monospace,monospace; letter-spacing:.8px; }.sp-identity > div { display:flex; align-items:center; gap:11px; margin-top:13px; }.sp-identity b { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#e7f3ff; color:var(--scenario-blue); font:15px/1 ui-monospace,monospace; }.sp-identity p { color:var(--scenario-ink); font-size:11px; }.sp-identity small { display:block; margin-top:4px; font-size:8px; color:var(--scenario-muted); }.sp-identity i { color:var(--scenario-blue); font-size:10px; margin-left:auto; font-style:normal; }
.sp-access { position:absolute; top:136px; left:9%; right:7%; display:flex; align-items:center; justify-content:space-between; gap:20px; }.sp-access-check { flex:0 0 28%; text-align:center; position:relative; }.sp-access-check > span { display:grid; place-items:center; width:47px; height:47px; border-radius:50%; background:#f4faff; border:1px solid #c1ddfa; margin:0 auto; color:var(--scenario-blue); box-shadow:0 0 0 8px #eef6ff; font-size:22px; animation:sp-access 5s ease-in-out infinite; }.sp-access-check small { display:block; color:var(--scenario-body); font-size:9px; margin-top:12px; }.sp-access-line { position:absolute; top:24px; height:1px; left:28%; right:45%; background:#bdd9f6; }.sp-tools { flex:1; display:grid; gap:9px; z-index:1; }.sp-tools > span { display:flex; align-items:center; gap:7px; font-size:9px; color:var(--scenario-body); background:#fff; border:1px solid #d3e5f8; border-radius:6px; padding:11px 9px; white-space:nowrap; }.sp-tools i { color:var(--scenario-muted); font:6px/1.5 ui-monospace,monospace; font-style:normal; }.sp-tools b { margin-left:auto; font-size:8px; font-weight:400; color:var(--scenario-blue); }.sp-audit { position:absolute; bottom:3px; left:9%; right:7%; display:flex; align-items:center; gap:8px; padding-top:14px; border-top:1px solid #dce9f7; color:var(--scenario-body); font-size:9px; }.sp-audit i { width:4px; height:4px; border-radius:50%; background:#86b3eb; }.sp-audit b { margin-left:auto; font-size:15px; font-weight:400; }

.scenario-preview-card[data-playing="false"] * { animation-play-state:paused!important; }
@keyframes sp-cursor { 50% { opacity:0; } }
@keyframes sp-paper-float { 50% { transform:translateY(-5px); } }
@keyframes sp-scan { 0%,100% { transform:translateY(0); opacity:.2; } 50% { transform:translateY(61px); opacity:1; } }
@keyframes sp-wave { 50% { transform:scaleY(.35); opacity:.55; } }
@keyframes sp-route { 0%,20% { transform:translate(-2px,35px); opacity:0; } 35% { transform:translate(-2px,0); opacity:1; } 65%,100% { transform:translate(40px,0); opacity:0; } }
@keyframes sp-target { 50% { box-shadow:0 0 0 3px #9ac3ff1f; } }
@keyframes sp-access { 50% { box-shadow:0 0 0 12px #edf5ff88; border-color:#8cb8ee; } }
@media(max-width:1050px) {
 .scenario-preview-gallery { gap:17px; }.sp-card-top { padding:20px 19px 0; }.sp-card-top > span { font-size:8px; letter-spacing:.5px; }.sp-copy { padding:22px 19px; }.sp-copy h3 { font-size:19px; }.sp-visual { margin-inline:6px; }.sp-document { padding:13px 12px; }.sp-document mark { font-size:7px; }.sp-card-foot { gap:8px; }.sp-card-foot > span { font-size:9px; }.sp-card-foot strong { font-size:11px; gap:7px; }.sp-tools > span { padding:10px 7px; gap:5px; font-size:8px; }.sp-tools i { font-size:5px; }.sp-path > span { padding:9px 6px; font-size:10px; }.sp-problem dd { min-height:72px; }
}
@media(max-width:900px) {
 .scenario-preview-gallery { grid-template-columns:1fr; gap:24px; max-width:500px; margin-inline:auto; }.sp-card-top { padding:23px 24px 0; }.sp-card-top > span { font-size:9px; }.sp-visual { max-width:380px; margin:12px auto 0; width:calc(100% - 24px); }.sp-copy { padding:20px 24px 24px; }.sp-copy h3 { font-size:23px; }.sp-specs dd { font-size:14px; }.sp-specs .sp-path { gap:7px; }.sp-path > span { font-size:12px; padding:10px; }.sp-problem dd { min-height:0; }.sp-acceptance dd { font-size:13px; }.sp-card-foot > span { font-size:10px; }.sp-card-foot strong { font-size:12px; }.sp-tools > span { font-size:10px; padding:11px 9px; }.sp-tools i { font-size:6px; }.sp-delivery-note { max-width:500px; margin-inline:auto; gap:12px; padding:20px; }.sp-delivery-note > small { display:none; }.sp-delivery-note p { font-size:12px; }
}
@media(max-width:360px) { .sp-copy { padding-inline:20px; }.sp-path > span { padding:9px 6px; font-size:11px; }.sp-card-foot > span { font-size:9px; }.sp-card-foot strong { gap:7px; } }
@media(prefers-reduced-motion:reduce) { .scenario-preview-card,.scenario-preview-card * { animation:none!important; transition:none!important; }.scenario-preview-card:hover { transform:none; } }