/* Two folder tabs share one sticky baseline as each project covers the last. */
#advantages.project-showcase{background:#fff;padding:80px 0 12px;isolation:isolate;color:#111;font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;line-height:1.3}
.project-stack{width:min(780px,39.1vw);margin:0 auto;padding-bottom:160px;--tab-height:clamp(36px,2.8vw,56px)}
.project-folder{position:sticky;top:40px;padding-top:var(--tab-height);margin-bottom:60px;z-index:calc(var(--folder-index) + 1);--folder-color:#25ae8b;--folder-ink:#103d31;color:var(--folder-ink)}
.project-folder:last-child{margin-bottom:0}
.project-folder-2{--folder-color:#111110;--folder-ink:#fff}
.project-folder-3{--folder-color:#f7bd27;--folder-ink:#4d3c13}
.project-folder-4{--folder-color:#f33268;--folder-ink:#fff}
.project-tab{position:absolute;top:0;left:calc(var(--folder-index)*23%);height:var(--tab-height);width:31%;background:var(--folder-color);clip-path:polygon(0 100%,25% 0,75% 0,100% 100%);display:flex;gap:5px;justify-content:center;align-items:center;padding-top:3px;font:500 clamp(8px,.58vw,12px)/1 monospace;white-space:nowrap}
.project-folder-1 .project-tab{left:0;width:23%;clip-path:polygon(0 0,67% 0,100% 100%,0 100%);justify-content:flex-start;padding-left:9px}
.project-tab svg{width:10px;height:10px;fill:currentColor}
.project-body{background:var(--folder-color);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;aspect-ratio:2.48/1}
.project-copy{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.25vw,24px) 0 0}
.project-date{display:flex;align-items:center;gap:7px;font:400 clamp(6px,.48vw,10px)/1.3 monospace;letter-spacing:.02em;margin-bottom:5px}
.project-date span{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.project-copy h2{font:500 clamp(24px,2.6vw,48px)/1 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:-.06em;margin:0 0 6px;white-space:nowrap}
.project-description{font-size:clamp(7px,.62vw,12px);line-height:1.4;max-width:95%}
.project-link{display:inline-flex;gap:6px;font:400 clamp(6px,.5vw,10px)/1.5 monospace;margin-top:16px;border-bottom:1px solid currentColor;padding-bottom:2px}
.project-tags{display:flex;gap:7px;margin-top:14px}
.project-tags span{background:var(--folder-ink);color:var(--folder-color);font:400 clamp(6px,.52vw,10px)/1 monospace;padding:11px 4px 4px;clip-path:polygon(0 0,45% 0,62% 25%,100% 25%,100% 100%,0 100%)}
.project-preview{position:relative;border:1px solid currentColor;min-width:0;align-self:stretch;display:block}
.project-preview img{height:100%;width:100%;object-fit:cover}
.project-link:focus-visible,.project-preview:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:900px){.project-stack{width:min(620px,82vw)}.project-copy h2{font-size:clamp(24px,4.8vw,38px)}.project-date,.project-link,.project-tags span{font-size:8px}.project-description{font-size:10px}.project-tab{font-size:9px}}
@media(max-width:520px){#advantages.project-showcase{padding:56px 0 12px}.project-stack{width:calc(100% - 32px);padding-bottom:100px;--tab-height:34px}.project-folder{top:22px;margin-bottom:52px}.project-body{padding:9px;gap:14px;grid-template-columns:1fr;aspect-ratio:auto}.project-copy{padding:10px 2px 0;min-height:174px;position:relative}.project-copy h2{font-size:34px}.project-description{font-size:12px}.project-date,.project-link,.project-tags span{font-size:9px}.project-tags{margin-top:12px}.project-preview{aspect-ratio:4/3}.project-tab{font-size:8px;gap:3px}.project-tab svg{width:8px;height:8px}.project-folder-1 .project-tab{padding-left:5px}}
@media(max-height:680px) and (max-width:520px){.project-copy{min-height:132px;padding-top:4px}.project-preview{aspect-ratio:1.8}.project-copy h2{font-size:28px}.project-link{margin-top:8px}}
/* A real trailing spacer keeps all sticky margin boxes inside the stack. */
.project-stack{padding-bottom:0}
.project-stack::after{content:"";display:block;height:76px}
@media(max-width:520px){.project-stack{padding-bottom:0}.project-stack::after{height:64px}}

/* Service content: readable Chinese copy and paired scenario illustrations. */
.project-body{aspect-ratio:auto;min-height:clamp(250px,17vw,340px);grid-template-columns:1fr 1.08fr;gap:14px;padding:12px}
.project-copy{padding:12px 0 0 2px;font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif}
.project-copy h2{font:600 clamp(28px,2.2vw,42px)/1.2 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:.02em;margin:12px 0}
.project-date{font-size:9px;letter-spacing:.1em}
.project-lead{font-size:clamp(11px,.8vw,15px);font-weight:600;line-height:1.6;margin-bottom:8px}
.project-description{font-size:clamp(10px,.7vw,13px);line-height:1.9;opacity:.85;max-width:none}
.project-link{font:500 clamp(10px,.65vw,12px)/1.6 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;margin-top:16px}
.project-tags span{font:500 10px/1.3 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;padding:11px 6px 4px}
.project-tab{font:500 clamp(10px,.72vw,14px)/1 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:.08em}
.project-preview img{position:absolute;inset:0;object-fit:cover;object-position:center}
@media(max-width:900px){.project-body{min-height:265px}.project-lead{font-size:12px}.project-description{font-size:11px}}
@media(max-width:520px){.project-body{grid-template-columns:1fr;padding:12px;gap:16px}.project-copy{min-height:225px;padding:8px 4px 0}.project-copy h2{font-size:32px;margin:10px 0}.project-lead{font-size:14px}.project-description{font-size:12px}.project-preview{aspect-ratio:4/3}.project-tab{font-size:10px}.project-link{font-size:12px}.project-tags{margin-top:14px}}

/* Warm neutral folder pair with one clear action per card. */
.project-folder-1{--folder-color:#e9ddc8;--folder-ink:#493d2e}
.project-folder-2{--folder-color:#b8cbb5;--folder-ink:#243f32}
.project-actions{margin-top:22px;padding-bottom:2px}
.project-cta{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:10px 16px;border:1px solid var(--folder-ink);border-radius:6px;background:var(--folder-ink);color:#fff9ef;font:500 clamp(11px,.75vw,14px)/1.4 "PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;transition:filter .2s,transform .2s}
.project-cta:hover{filter:brightness(1.2);transform:translateY(-2px)}
.project-cta:focus-visible{outline:2px solid var(--folder-ink);outline-offset:4px}
@media(max-width:520px){.project-cta{font-size:13px;padding:11px 18px}}
@media(prefers-reduced-motion:reduce){.project-cta{transition:none}.project-cta:hover{transform:none}}

/* Fine folder edges and a soft, continuous paper shadow. */
.project-folder{--folder-edge:color-mix(in srgb,var(--folder-ink) 28%,var(--folder-color));filter:drop-shadow(0 3px 3px rgba(47,43,34,.05)) drop-shadow(0 12px 16px rgba(47,43,34,.09))}
.project-body{box-shadow:inset 0 0 0 1px var(--folder-edge)}
.project-tab{z-index:1;height:calc(var(--tab-height) + 1px)}
.project-tab .project-tab-outline{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--folder-edge);stroke-width:2px;pointer-events:none}
.project-tab-outline polyline{vector-effect:non-scaling-stroke}
.project-cta span{display:inline-block;transition:transform .2s ease}
.project-cta:hover span,.project-cta:focus-visible span{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.project-cta span{transition:none}.project-cta:hover span,.project-cta:focus-visible span{transform:none}}
/* Shared PingFang typography for all service content. */
.project-copy,.project-copy h2,.project-tab,.project-cta{font-family:"PingFang SC","PingFang TC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif}

/* Keep the service description and its action together. */
.project-copy{justify-content:center;padding-top:0;padding-bottom:0}
.project-actions{margin-top:18px}
@media(max-width:520px){.project-copy{min-height:0;padding:8px 4px}.project-actions{margin-top:16px}}
