.business-showcase{padding:40px clamp(24px,2.7vw,88px) 80px;background:#fff;color:#0d0f0e;font-family:var(--font-body,var(--body));scroll-margin-top:80px}
.showcase-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;max-width:1600px;margin:0 auto 36px}
.showcase-heading h2{margin:0;font:700 clamp(30px,3.1vw,48px)/1.35 var(--font-body,var(--body));letter-spacing:-.025em}
.showcase-heading p{margin:14px 0 0;color:#727570;font-size:clamp(15px,1.4vw,22px);line-height:1.6}
.showcase-more{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;min-height:46px;margin-top:5px;padding:10px 24px;border:1px solid #355623;border-radius:999px;background:#fff;color:#355623;font:600 16px/1.5 var(--font-body,var(--body));text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.showcase-more:hover{background:#f0f6eb}
.showcase-arrow{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;mask:var(--circle-arrow-mask,var(--arrow)) center/contain no-repeat;-webkit-mask:var(--circle-arrow-mask,var(--arrow)) center/contain no-repeat;rotate:-45deg;transition:translate .25s}
.showcase-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1600px;margin:auto}
.showcase-work{min-width:0;container-type:inline-size}
.showcase-link{position:relative;display:block;width:100%;min-width:0;isolation:isolate;aspect-ratio:1.5;min-height:270px;overflow:hidden;border:1px solid #e9ece7;border-radius:18px;background:#fff;color:inherit;text-decoration:none;transition:border-color .25s,box-shadow .25s}
.showcase-copy{position:relative;z-index:3;width:max-content;max-width:calc(100% - 40px);padding:clamp(30px,10.5cqi,56px) 0 0 clamp(22px,5.4cqi,30px);pointer-events:none}
.showcase-copy h3{display:flex;align-items:center;gap:10px;margin:0;font:700 clamp(19px,4.75cqi,26px)/1.4 var(--font-body,var(--body));letter-spacing:-.03em;white-space:nowrap}
.showcase-copy .showcase-arrow{width:16px;height:16px;color:#355623}
.showcase-copy p{margin:20px 0 0;color:#696e68;font-size:clamp(12px,3cqi,16px);line-height:1.8}
.showcase-art{position:absolute;z-index:1;right:-2%;bottom:-2%;width:66%;aspect-ratio:1;pointer-events:none}
.showcase-scene{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform-origin:70% 90%;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.showcase-mascot{position:absolute;z-index:2;left:var(--star-left);top:var(--star-top);width:var(--star-size,42%);translate:var(--look-x,0px) var(--look-y,0px);transition:translate .4s ease-out;transform-origin:50% 70%}
.showcase-mascot img{display:block;width:100%;height:auto;object-fit:contain}
.showcase-work[data-scene=website]{--star-left:0%;--star-top:40%;--star-size:43%;--float-angle:-7deg}
.showcase-work[data-scene=website] .showcase-mascot{z-index:0}
.showcase-work[data-scene=global]{--star-left:64%;--star-top:9%;--star-size:33%;--float-angle:8deg;--float-time:2.8s}
.showcase-work[data-scene=system]{--star-left:42%;--star-top:8%;--star-size:44%;--float-angle:-6deg}
.showcase-work[data-scene=brand]{--star-left:0%;--star-top:43%;--star-size:44%;--float-angle:7deg;--float-time:2.6s}
.showcase-work[data-scene=app]{--star-left:0%;--star-top:30%;--star-size:40%;--float-angle:-9deg}
.showcase-work[data-scene=ai]{--star-left:33%;--star-top:27%;--star-size:42%;--float-angle:9deg;--float-time:3s}
.showcase-link:is(:hover,:focus-visible){border-color:#b8ccab}

.business-showcase :focus-visible{outline:2px solid #355623;outline-offset:5px}
.business-showcase+.case-voices{padding-top:160px}
@media(prefers-reduced-motion:no-preference){
  .showcase-link:focus-visible .showcase-mascot img{animation:showcase-star-float var(--float-time,2.4s) ease-in-out infinite}
  .showcase-link:focus-visible .showcase-scene{transform:translateY(-3px) rotate(-1deg)}
  .showcase-link:active .showcase-mascot{scale:1.06}
  @keyframes showcase-star-float{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-13px) rotate(var(--float-angle,7deg))}70%{transform:translateY(-8px) rotate(-3deg)}}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .showcase-link:hover .showcase-mascot img{animation:showcase-star-float var(--float-time,2.4s) ease-in-out infinite}
  .showcase-link:hover .showcase-scene{transform:translateY(-3px) rotate(-1deg)}
}
@media(max-width:1100px){.showcase-works{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-heading h2{font-size:34px}}
@media(max-width:820px){
  .business-showcase{padding:52px 22px 48px;scroll-margin-top:76px}
  .showcase-heading{flex-wrap:wrap;gap:20px;margin-bottom:26px}
  .showcase-heading h2{font-size:clamp(24px,6.2vw,30px)}
  .showcase-heading p{font-size:14px;margin-top:10px}
  .showcase-more{font-size:13px;min-height:44px;margin:0;padding:8px 18px}
  .showcase-works{grid-template-columns:1fr;gap:14px}
  .showcase-link{min-height:245px;aspect-ratio:1.45;border-radius:16px}
  .showcase-copy{padding-top:30px;padding-left:20px}
  .showcase-copy h3{font-size:clamp(18px,5.1cqi,24px)}
  .showcase-copy p{margin-top:16px;font-size:clamp(12px,3.4cqi,15px)}
  .showcase-art{width:65%;bottom:-1%;right:-2%}
}
@media(prefers-reduced-motion:reduce){.business-showcase *{animation:none!important;transition:none!important}.showcase-mascot{translate:0 0}}

/* 首页固定使用动态业务卡片；场景卡片样式供独立手机页使用。 */
.business-showcase [hidden]{display:none!important}
.showcase-title-line{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.business-showcase[data-showcase-theme="2"]{position:relative;background:#fff;color:#0d0f0e;padding:68px clamp(24px,3.5vw,72px) 86px;overflow:clip}
[data-showcase-theme="2"] .showcase-heading{display:block;position:relative;text-align:center;margin-bottom:clamp(60px,8vw,154px)}
[data-showcase-theme="2"] .showcase-title-line{justify-content:center}
[data-showcase-theme] .showcase-heading h2{font:600 calc(clamp(38px,4.3vw,54px) * .88)/1.2 var(--font-display);letter-spacing:-.012em}
[data-showcase-theme="2"] :focus-visible{outline-color:#153f2d}
.craft-stage{position:relative;max-width:1600px;margin:0 auto;padding:68px 12px 70px}
.craft-deck{display:flex;align-items:center;gap:14px}
.craft-card{position:relative;display:block;flex:1;min-width:0;aspect-ratio:295/442;border-radius:20px;background:var(--card-bg);color:var(--card-ink);isolation:isolate;text-decoration:none;transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-angle)) scale(1.08);transition:transform .45s cubic-bezier(.22,.8,.22,1),box-shadow .3s ease;will-change:transform;box-shadow:0 8px 20px #0000000f}
.craft-card canvas{position:absolute;top:6%;left:8%;width:84%;height:auto;aspect-ratio:240/190;pointer-events:none}
.craft-stage[data-entered] .craft-card{animation:craft-enter .85s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--enter-index,0)*85ms)}
.craft-card:nth-child(2){--enter-index:1}
.craft-card:nth-child(3){--enter-index:2}
.craft-card:nth-child(4){--enter-index:3}
.craft-card:nth-child(5){--enter-index:4}
.craft-card:nth-child(6){--enter-index:5}
.craft-stage:focus-within .craft-card{animation:none}
@keyframes craft-enter{
  from{opacity:0;translate:0 76px;scale:.94;rotate:-4deg}
  to{opacity:1;translate:0 0;scale:1;rotate:0deg}
}
.craft-card h3{position:absolute;left:9%;right:5%;bottom:7%;margin:0;font:400 clamp(19px,2vw,36px)/1.3 var(--font-body);letter-spacing:-.025em;pointer-events:none}
.craft-card[data-pattern=website]{--card-bg:#ee5108;--card-ink:#fff0d4;--scatter-x:15%;--scatter-y:-12px;--scatter-angle:-9deg;z-index:1}
.craft-card[data-pattern=global]{--card-bg:#f5ebd8;--card-ink:#4c4436;--scatter-x:9%;--scatter-y:27px;--scatter-angle:4deg;z-index:2}
.craft-card[data-pattern=system]{--card-bg:#0796c7;--card-ink:#ddf5f7;--scatter-x:3%;--scatter-y:-38px;--scatter-angle:-3deg;z-index:3}
.craft-card[data-pattern=brand]{--card-bg:#45eb91;--card-ink:#104c28;--scatter-x:-3%;--scatter-y:35px;--scatter-angle:2deg;z-index:4}
.craft-card[data-pattern=app]{--card-bg:#252320;--card-ink:#f5ebd8;--scatter-x:-9%;--scatter-y:0px;--scatter-angle:6deg;z-index:5}
.craft-card[data-pattern=ai]{--card-bg:#c8c8e3;--card-ink:#28283f;--scatter-x:-15%;--scatter-y:24px;--scatter-angle:-5deg;z-index:6}
.craft-stage:has(.craft-card:focus-visible) .craft-card{transform:translate(0,0) rotate(0) scale(1)}
.craft-card:focus-visible{outline:2px solid #153f2d;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
  .craft-stage:hover .craft-card{transform:translate(0,0) rotate(0) scale(1)}
  .craft-stage:hover .craft-card:hover{transform:translate(0,-16px) rotate(0) scale(1.04);box-shadow:0 22px 36px #00000026;z-index:10}
}
.craft-stage:focus-within .craft-card:focus-visible{transform:translate(0,-16px) rotate(0) scale(1.04);box-shadow:0 22px 36px #00000026;z-index:10}
@media(max-width:1100px){
  .showcase-title-line{gap:16px}
  .craft-card{border-radius:14px}
  .craft-deck{gap:10px}
}

.showcase-all{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px auto 0;padding:10px 16px;min-height:44px;border:0;background:transparent;color:var(--text-primary);font:600 20px/1.5 var(--font-body);text-decoration:none;transition:color .2s ease;cursor:pointer}
.showcase-all:hover{color:var(--brand-green)}