/* v1.6 — framing examples, from an actual internal owner test */
.smart-showcase{position:relative;overflow:hidden;padding:95px 0;background:radial-gradient(ellipse at 16% 24%,#ec3e8721,transparent 38%),radial-gradient(ellipse at 93% 62%,#37f1dc12,transparent 40%),#0d0918;border-top:1px solid #f884bd1f;border-bottom:1px solid #4ceee21f}
.smart-showcase .shell{position:relative;z-index:1}.smart-showcase .section-topline{margin-bottom:15px}.smart-showcase-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:32px}.smart-showcase-header h2{font:900 clamp(34px,4.5vw,70px)/1 'Space Grotesk',Arial,sans-serif;letter-spacing:-2px;color:#fff;margin:10px 0}.smart-showcase-header h2 span{background:linear-gradient(110deg,#ff70be,#78fbed);color:transparent;background-clip:text;-webkit-background-clip:text}.smart-showcase-header p{max-width:430px;color:#d5c4db;font-size:15px;line-height:1.75}
.smart-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.smart-showcase-card{position:relative;overflow:hidden;border-radius:22px;padding:12px 12px 22px;border:1px solid #ff80c73e;background:linear-gradient(155deg,#25132d,#151524 70%);transition:transform .2s,border-color .2s,box-shadow .2s}.smart-showcase-card:hover{transform:translateY(-7px);border-color:#65f6e8;box-shadow:0 12px 50px #2effdc24}.smart-showcase-image{border-radius:15px;overflow:hidden;aspect-ratio:9/13;max-height:400px;margin:0 auto 18px;position:relative;background:#160c1b}.smart-showcase-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .3s}.smart-showcase-card:hover img{transform:scale(1.035)}.smart-showcase-card .tag{display:inline-flex;border-radius:24px;padding:6px 9px;border:1px solid #63f7e659;font-weight:900;color:#81fff2;font-size:10px;letter-spacing:1px;margin-left:7px}.smart-showcase-card h3{font-size:21px;color:#fff;margin:12px 7px 5px}.smart-showcase-card p{font-size:12px;color:#cfc1d6;line-height:1.65;margin:0 7px 4px}.smart-showcase-note{margin:22px 0 0;color:#b7a7c5;font-size:11px;line-height:1.75}.smart-showcase-link{display:inline-flex;align-items:center;gap:8px;margin-top:25px;color:#7bffef;font-weight:900;text-decoration:none}.smart-showcase-link:hover{text-decoration:underline}
@media(max-width:850px){.smart-showcase-header{display:block}.smart-showcase-grid{gap:10px}.smart-showcase-card{padding:8px 8px 14px}.smart-showcase-card h3{font-size:15px}.smart-showcase-card p{font-size:11px}.smart-showcase-image{max-height:340px}}
@media(max-width:620px){.smart-showcase{padding:60px 0}.smart-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.smart-showcase-grid .smart-showcase-card:last-child{grid-column:1/-1;max-width:440px;width:100%;margin:auto}.smart-showcase-header h2{letter-spacing:-1px}.smart-showcase-image{max-height:310px}}
@media(max-width:390px){.smart-showcase-grid{grid-template-columns:1fr}.smart-showcase-grid .smart-showcase-card:last-child{grid-column:auto}.smart-showcase-image{max-height:420px}}
@media(prefers-reduced-motion:reduce){.smart-showcase-card,.smart-showcase-image img{transition:none}.smart-showcase-card:hover{transform:none}.smart-showcase-card:hover img{transform:none}}
/* Never crop the demonstration thumbnails: they are also used to teach safe framing. */
.smart-showcase-image{width:min(100%,260px);aspect-ratio:9/16;max-height:none}
.smart-showcase-image img{object-fit:contain;object-position:center}
@media(max-width:850px){.smart-showcase-image{max-height:none}}
@media(max-width:620px){.smart-showcase-image{max-height:none}}