.spx{padding:60px 0;text-align:center}.spx h2{margin:0 0 6px}.spx>p{margin:0 auto 26px;max-width:640px;opacity:.8}
.spx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 18px;max-width:980px;margin:0 auto}
.spx-hex{--g:#999;aspect-ratio:1/1.08;border:0;padding:6px;cursor:pointer;background:var(--g);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .2s;font:inherit}
.spx-grid .spx-hex:nth-child(n+6){transform:translateX(9%)}
.spx-hex:hover,.spx-hex:focus-visible{transform:scale(1.07)!important;outline:none}
.spx-in{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:linear-gradient(#fff,#eef0f3);clip-path:inherit;color:#333}
.spx-i{font-size:2.3rem;line-height:1.2}.spx-l{font-size:1rem;margin-top:4px}
.spx-lb{position:fixed;inset:0;background:rgba(10,16,30,.92);z-index:9999;display:flex;align-items:center;justify-content:center}.spx-lb[hidden]{display:none}
.spx-lb figure{margin:0;max-width:92vw;text-align:center;color:#fff}.spx-lb h3{color:#fff;margin:0 0 10px;font-size:1.5rem}
.spx-lb img{max-width:88vw;max-height:72vh;border-radius:6px}.spx-lb figcaption{margin-top:8px}.spx-n{opacity:.85;font-size:.95rem}
.spx-lb button{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:0;font-size:2rem;min-width:48px;min-height:48px;border-radius:50%;cursor:pointer}
.spx-x{top:14px;right:14px}.spx-p{left:10px;top:50%}.spx-nx{right:10px;top:50%}
@media(max-width:760px){.spx-grid{grid-template-columns:repeat(3,1fr);gap:8px}.spx-grid .spx-hex:nth-child(n+6){transform:none}.spx-i{font-size:1.7rem}.spx-l{font-size:.8rem}}

.spx-n{font-size:1.2rem!important;padding:30px 10px}

.spx-hex.on{transform:scale(1.08)!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}.spx-hex.on .spx-in{background:linear-gradient(#f3fbe9,#dff3cf)}
.spx-show{max-width:980px;margin:26px auto 0;text-align:center}.spx-show h3{margin:0 0 12px;color:#2b8a3e}
.spx-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.spx-strip button{border:0;padding:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.spx-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .25s}.spx-strip button:hover img{transform:scale(1.05)}
.spx-strip figcaption{font-size:.85rem;padding:6px 4px;color:#444;background:#fff}.spx-soon{opacity:.8;padding:16px}
@media(max-width:760px){.spx-strip{grid-template-columns:1fr;gap:14px}.spx-strip img{aspect-ratio:3/2}}
/* nov11 hex tiles (5 + 5 staggered; same honeycomb, scaled on mobile) */
.spx-hx{position:relative;max-width:1113px;margin:0 auto;aspect-ratio:1113/405}
.spx-t{position:absolute;width:18.69%;height:59.26%;padding:0;border:0;background:none;cursor:pointer;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .2s,filter .2s}
.spx-t img{display:block;width:100%;height:100%;pointer-events:none}
.spx-t:nth-child(-n+5){top:0}.spx-t:nth-child(n+6){top:40.74%}
.spx-t:nth-child(1){left:0}.spx-t:nth-child(2){left:18.06%}.spx-t:nth-child(3){left:36.12%}.spx-t:nth-child(4){left:54.18%}.spx-t:nth-child(5){left:72.24%}
.spx-t:nth-child(6){left:9.03%}.spx-t:nth-child(7){left:27.09%}.spx-t:nth-child(8){left:45.15%}.spx-t:nth-child(9){left:63.21%}.spx-t:nth-child(10){left:81.27%}
.spx-t:hover,.spx-t:focus-visible{transform:scale(1.05);outline:none;z-index:2}
.spx-t.on{transform:scale(1.07);filter:drop-shadow(0 0 6px rgba(43,138,62,.6));z-index:3}
.spx-t:focus-visible{filter:drop-shadow(0 0 4px #2b8a3e)}
.spx-t .spx-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:760px){.spx-hx{max-width:none;width:100%}.spx-t:hover,.spx-t:focus-visible{transform:none}.spx-t.on{transform:scale(1.04)}}