#services.svc-showcase{--ink:#14243a;--muted:#6d7784;--blue:#086de1;--paper:#FDFCF8;--line:#dedfdc;--gold:#b9944f}
#services.svc-showcase *{box-sizing:border-box}
#services.svc-showcase{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Microsoft YaHei','PingFang SC',sans-serif}
#services.svc-showcase a{color:inherit;text-decoration:none}
#services.svc-showcase button{font:inherit;cursor:pointer}
#services.svc-showcase button:focus-visible,#services.svc-showcase a:focus-visible{outline:3px solid #0b75df;outline-offset:4px}
#services.svc-showcase .review{padding:14px max(24px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffd9;gap:16px}
#services.svc-showcase .review small{font-size:11px;color:var(--muted)}
#services.svc-showcase .review nav{display:flex;gap:8px}
#services.svc-showcase .review a{font-size:12px;padding:9px 14px;border-radius:30px}
#services.svc-showcase .review a[aria-current=page]{background:var(--ink);color:white}
#services.svc-showcase .brand{font-weight:800;font-size:22px;letter-spacing:1px;color:var(--blue)}
#services.svc-showcase .svc-stage{max-width:1200px;margin:auto;padding:62px 28px 70px}
#services.svc-showcase .intro{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:34px}
#services.svc-showcase .eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:700;margin:0 0 15px}
#services.svc-showcase .svc-title{font-size:clamp(32px,3.3vw,47px);font-weight:700;letter-spacing:-2px;line-height:1.25;margin:0}
#services.svc-showcase .svc-title em{color:var(--blue);font-style:normal}
#services.svc-showcase .intro>p{max-width:300px;color:var(--muted);font-size:14px;line-height:1.9;margin:0}
#services.svc-showcase .service{display:grid;grid-template-columns:35% 1fr;gap:6%;align-items:center;border-top:1px solid var(--line);padding:42px 0}
#services.svc-showcase .service.reverse{grid-template-columns:1fr 35%}
#services.svc-showcase .service.reverse .words{order:2}
#services.svc-showcase .number{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:2px}
#services.svc-showcase .words h3{font-size:30px;letter-spacing:-1px;margin:14px 0 14px}
#services.svc-showcase .promise{font-size:20px;line-height:1.65;margin:0 0 14px}
#services.svc-showcase .description{font-size:13px;line-height:1.85;color:var(--muted);margin:0 0 18px}
#services.svc-showcase .scope{font-size:12px;line-height:2;color:#526275;padding-top:14px;border-top:1px solid var(--line)}
#services.svc-showcase .scope b{font-weight:500;color:var(--ink)}
#services.svc-showcase .outcome{display:inline-flex;align-items:center;gap:12px;color:var(--blue);font-size:13px;font-weight:600;margin-top:14px}
#services.svc-showcase .outcome:after{content:'↗';font-size:18px}
#services.svc-showcase .visual{min-width:0}
#services.svc-showcase .photo{position:relative;overflow:hidden;border-radius:9px;background:#e6e9ec;aspect-ratio:1.7;margin:0}
#services.svc-showcase .photo>img{width:100%;height:100%;object-fit:cover;display:block}
#services.svc-showcase .photo:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0c203784)}
#services.svc-showcase .photo figcaption{position:absolute;bottom:20px;left:24px;right:24px;color:white;z-index:1;display:flex;align-items:end;justify-content:space-between;font-size:20px;font-weight:500}
#services.svc-showcase .photo figcaption small{font-size:10px;font-weight:400;background:#14243a65;padding:5px 8px;border-radius:3px}
#services.svc-showcase .play{position:absolute;right:25px;top:25px;width:40px;height:40px;border:1px solid #ffffffa1;border-radius:50%;display:grid;place-items:center;color:white;background:#15263c44}
#services.svc-showcase .process{display:flex;justify-content:space-between;gap:8px;padding:15px 2px 0;font-size:11px;color:var(--muted)}
#services.svc-showcase .process span:not(:last-child):after{content:'→';margin-left:12px;color:var(--gold)}
#services.svc-showcase .note{font-size:11px;color:var(--muted);margin-top:28px;line-height:1.8}
#services.svc-showcase .usecase{border-top:1px solid var(--line);padding-top:25px;display:flex;align-items:center;justify-content:space-between;gap:28px;font-size:13px;color:var(--muted)}
#services.svc-showcase .usecase b{display:block;color:var(--ink);font-size:17px;margin-bottom:7px}
#services.svc-showcase .ui-tabs{display:flex;gap:5px;margin:0 0 12px;flex-wrap:wrap}
#services.svc-showcase .ui-tabs button{border:1px solid var(--line);background:transparent;border-radius:30px;padding:8px 13px;font-size:11px;color:var(--muted)}
#services.svc-showcase .ui-tabs button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:var(--blue)}
#services.svc-showcase .app{border:1px solid #dfe5ed;border-radius:9px;background:#fff;box-shadow:0 12px 35px #243e5b0c;overflow:hidden;min-height:310px}
#services.svc-showcase .app-bar{height:43px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5eaf0;padding:0 18px;font-size:10px;color:var(--muted)}
#services.svc-showcase .app-bar b{color:var(--blue);font-size:13px}
#services.svc-showcase .app-body{display:grid;grid-template-columns:110px 1fr;min-height:265px}
#services.svc-showcase .app aside{background:#f5f8fc;padding:17px 10px;font-size:10px;line-height:3;color:#73829a}
#services.svc-showcase .app aside b{display:block;background:#e4edfc;border-radius:4px;padding-left:8px;color:var(--blue);font-weight:500}
#services.svc-showcase .app-content{padding:23px 20px;min-width:0}
#services.svc-showcase .app-content h4{font-size:18px;margin:0 0 7px}
#services.svc-showcase .app-content .hint{font-size:10px;color:var(--muted);margin:0 0 20px}
#services.svc-showcase .steps{display:flex;gap:8px;margin:17px 0}
#services.svc-showcase .steps span{flex:1;font-size:10px;background:#f3f6fa;padding:9px 7px;border-radius:4px;border-left:2px solid #7ca9e5}
#services.svc-showcase .steps span:last-child{border-color:#daa34e}
#services.svc-showcase table{border-collapse:collapse;width:100%;font-size:10px;text-align:left}
#services.svc-showcase th{font-weight:400;color:#7e8895;background:#f7f9fc}
#services.svc-showcase td,#services.svc-showcase th{padding:11px 8px;border-bottom:1px solid #edf0f3}
#services.svc-showcase td:last-child{color:var(--blue)}
#services.svc-showcase .chat{font-size:11px;padding:12px 14px;line-height:1.8;border-radius:6px;margin-top:12px;background:#f4f7fc;max-width:95%}
#services.svc-showcase .chat.question{margin-left:auto;background:#eaf2ff}
#services.svc-showcase .chat em{font-style:normal;color:var(--blue)}
#services.svc-showcase .flow{display:grid;grid-template-columns:1fr 18px 1fr;align-items:center;gap:11px;margin-top:20px}
#services.svc-showcase .flow div{padding:13px 9px;font-size:11px;border:1px solid #dde6f4;border-radius:5px;background:#f8fbff}
#services.svc-showcase .flow i{font-size:16px;color:#b99b63;text-align:center}
#services.svc-showcase .flow div:last-child{background:#fcf5e8;border-color:#ead4ab}
#services.svc-showcase .ui-panel[hidden],#services.svc-showcase .exhibit-panel[hidden]{display:none}
#services.svc-showcase .exhibit-tabs{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 30px}
#services.svc-showcase .exhibit-tabs button{position:relative;flex:1;display:flex;align-items:center;gap:12px;text-align:left;padding:23px 10px;background:none;border:0;color:var(--muted);font-size:18px}
#services.svc-showcase .exhibit-tabs button small{font-size:11px;color:var(--gold)}
#services.svc-showcase .exhibit-tabs button[aria-pressed=true]{color:var(--blue)}
#services.svc-showcase .exhibit-tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;left:10px;right:10px;height:3px;background:var(--blue)}
#services.svc-showcase .exhibit-panel{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:center}
#services.svc-showcase .exhibit-panel .photo{aspect-ratio:1.25}
#services.svc-showcase .exhibit-panel .words h3{font-size:31px}
#services.svc-showcase .exhibit-panel .app{min-height:370px}
#services.svc-showcase .exhibit-panel .app-body{min-height:325px}
#services.svc-showcase .exhibit-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
#services.svc-showcase .exhibit-footer strong{color:var(--ink);font-weight:500}
#services.svc-showcase button{transition:background-color .2s,color .2s}
@media(prefers-reduced-motion:reduce){#services.svc-showcase *,#services.svc-showcase *:before,#services.svc-showcase *:after{transition:none!important;animation:none!important}
}
@media(max-width:760px){#services.svc-showcase .review{padding:12px 18px}
#services.svc-showcase .review small{display:none}
#services.svc-showcase .review a{padding:8px 10px;font-size:10px}
#services.svc-showcase .svc-stage{padding:38px 20px}
#services.svc-showcase .intro{display:block}
#services.svc-showcase .intro>p{margin-top:18px;max-width:100%}
#services.svc-showcase .svc-title{letter-spacing:-1px}
#services.svc-showcase .service,#services.svc-showcase .service.reverse{grid-template-columns:1fr;gap:24px;padding:30px 0}
#services.svc-showcase .service.reverse .words{order:0}
#services.svc-showcase .words h3{font-size:26px;margin:10px 0}
#services.svc-showcase .promise{font-size:18px}
#services.svc-showcase .scope{padding-top:10px}
#services.svc-showcase .photo figcaption{left:17px;bottom:16px;font-size:17px}
#services.svc-showcase .photo figcaption small{font-size:8px}
#services.svc-showcase .process{font-size:9px;flex-wrap:wrap;justify-content:flex-start;gap:9px}
#services.svc-showcase .process span:not(:last-child):after{margin-left:9px}
#services.svc-showcase .usecase{display:block}
#services.svc-showcase .usecase>div{margin-bottom:20px}
#services.svc-showcase .app-body{grid-template-columns:72px 1fr}
#services.svc-showcase .app aside{font-size:8px;padding:15px 7px}
#services.svc-showcase .app-content{padding:18px 12px}
#services.svc-showcase .app-content h4{font-size:16px}
#services.svc-showcase .steps{gap:4px}
#services.svc-showcase .steps span{font-size:8px;padding:8px 4px}
#services.svc-showcase .app td,#services.svc-showcase .app th{font-size:8px;padding:9px 5px}
#services.svc-showcase .exhibit-tabs{margin-bottom:24px}
#services.svc-showcase .exhibit-tabs button{display:block;padding:16px 5px;font-size:12px;line-height:1.8}
#services.svc-showcase .exhibit-tabs button small{display:block;font-size:9px}
#services.svc-showcase .exhibit-panel{grid-template-columns:1fr;gap:25px}
#services.svc-showcase .exhibit-panel .words{order:-1}
#services.svc-showcase .exhibit-panel .words h3{font-size:26px}
#services.svc-showcase .exhibit-panel .photo{aspect-ratio:1.4}
#services.svc-showcase .exhibit-footer{display:block;line-height:2}
#services.svc-showcase .exhibit-footer strong{display:block}
#services.svc-showcase .flow div{font-size:9px}
#services.svc-showcase .note{font-size:10px}
}

#services.svc-showcase{padding:0;overflow:clip}
#services.svc-showcase .svc-stage{width:100%;max-width:1200px;margin:auto;padding:70px 28px}
@media(max-width:760px){#services.svc-showcase .svc-stage{padding:42px 20px}}

/* Shared warm-white atmosphere; lower edge matches the evolution section. */
#services.svc-showcase{background:#FDFCF8;background:linear-gradient(180deg,#fff7eb 0%,#FDFCF8 160px,#FDFCF8 62%,#F6F2E9 100%)}

/* Compact the showcase closing space after removing its footer note. */
#services.svc-showcase .svc-stage{padding-bottom:40px}
@media(max-width:760px){#services.svc-showcase .svc-stage{padding-bottom:26px}}

/* Pointer feedback without changing the selected business or layout. */
#services.svc-showcase .exhibit-tabs button{cursor:pointer;transition:color .2s ease,background-color .2s ease}
#services.svc-showcase .exhibit-tabs button:not([aria-pressed=true]):after{content:'';position:absolute;bottom:-1px;left:10px;right:10px;height:3px;background:#086de1;opacity:0;transform:scaleX(.55);transform-origin:left;transition:opacity .2s ease,transform .2s ease}
@media(hover:hover) and (pointer:fine){
 #services.svc-showcase .exhibit-tabs button:hover{color:var(--blue);background-color:#086de10b}
 #services.svc-showcase .exhibit-tabs button:not([aria-pressed=true]):hover:after{opacity:.4;transform:scaleX(1)}
}
#services.svc-showcase .exhibit-tabs button:focus-visible{color:var(--blue);background-color:#086de10b;outline:2px solid var(--blue);outline-offset:-4px}
@media(prefers-reduced-motion:reduce){#services.svc-showcase .exhibit-tabs button,#services.svc-showcase .exhibit-tabs button:after{transition:none}}

/* System demo tabs: invite a click while keeping the selected state distinct. */
#services.svc-showcase .ui-tabs button{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
@media(hover:hover) and (pointer:fine){
 #services.svc-showcase .ui-tabs button:hover{border-color:var(--blue);box-shadow:0 4px 12px #086de126;transform:translateY(-2px)}
 #services.svc-showcase .ui-tabs button:not([aria-pressed=true]):hover{background:#edf5ff;color:var(--blue)}
 #services.svc-showcase .ui-tabs button[aria-pressed=true]:hover{background:#075bbf;border-color:#075bbf}
}
#services.svc-showcase .ui-tabs button:not([aria-pressed=true]):focus-visible{background:#edf5ff;color:var(--blue);border-color:var(--blue)}
#services.svc-showcase .ui-tabs button:active{transform:translateY(0) scale(.97)}
@media(prefers-reduced-motion:reduce){
 #services.svc-showcase .ui-tabs button{transition:none}
 #services.svc-showcase .ui-tabs button:hover,#services.svc-showcase .ui-tabs button:active{transform:none}
}