/* About: editorial product photos suspended over a softly lit plinth. */
#about .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.product-showcase {
    position: relative; isolation: isolate; width: 100%; max-width: 440px;
    min-width: 0; margin: 0 auto; aspect-ratio: 1 / 1.13;
    border-radius: 28px; overflow: hidden;
    background: radial-gradient(ellipse at 53% 37%, #fff 5%, #effbfc 48%, #e4f1f8 100%);
    border: 1px solid rgba(39, 125, 163, .1);
    box-shadow: 0 30px 65px -42px rgba(8, 61, 95, .38);
}
.showcase-heading { position: absolute; top: 7%; left: 8%; right: 8%; z-index: 4; }
.showcase-eyebrow { display: block; color: var(--blue); font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.showcase-heading h3 { color: var(--navy); font-size: clamp(1rem, 1.7vw, 1.35rem); font-weight: 700; margin-top: 6px; }
.showcase-light { position: absolute; inset: 10% 0 15%; background: radial-gradient(ellipse, rgba(93, 221, 218, .2), transparent 66%); }
.showcase-ring { position: absolute; width: 80%; aspect-ratio: 1; left: 10%; top: 18%; border: 1px solid rgba(60, 153, 173, .14); border-radius: 50%; }
.showcase-ring::after { content: ''; position: absolute; inset: 7%; border: 1px dashed rgba(60, 153, 173, .11); border-radius: inherit; }
.showcase-stage {
    position: absolute; inset: 0; perspective: 1000px;
    transform: rotateX(var(--showcase-x, 0deg)) rotateY(var(--showcase-y, 0deg));
    transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.showcase-platform { position: absolute; left: 9%; right: 9%; bottom: 17%; height: 15%; border-radius: 50%;
    background: linear-gradient(180deg, #fff 5%, #d1ebf0 65%, #aacfdc 100%);
    box-shadow: 0 13px 0 -2px #c4dfe8, 0 25px 0 -7px #dbeaf0, 0 38px 26px -14px rgba(35,94,125,.22), inset 0 2px 2px white;
}
.showcase-platform::before { content: ''; position: absolute; inset: 10% 8%; border-radius: inherit; border: 1px solid rgba(255,255,255,.9); background: radial-gradient(ellipse, rgba(68,192,208,.16), transparent 70%); }
.showcase-product { position: absolute; width: 31%; margin: 0; bottom: 29%; z-index: 2; animation: showcaseFloat 6s ease-in-out infinite; }
.showcase-product a { position: relative; display: block; padding: 5px; background: rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 18px 28px -16px rgba(10,55,83,.48); transform: rotate(var(--card-angle, 0deg)); transition: box-shadow .3s; }
.showcase-product a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.showcase-product a:hover { box-shadow: 0 22px 35px -14px rgba(10,55,83,.6); }
.showcase-product img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 13px; }
.showcase-product figcaption { position: absolute; bottom: 11px; left: 10px; right: 10px; padding: 6px 3px; border-radius: 9px;
    background: rgba(255,255,255,.94); color: var(--navy); text-align: center; font-size: clamp(.5rem, .75vw, .68rem); font-weight: 700; pointer-events: none; }
.showcase-product-left { left: 5%; --card-angle: -10deg; animation-delay: -2s; }
.showcase-product-right { right: 5%; --card-angle: 10deg; animation-delay: -4s; }
.showcase-product-center { width: 36%; left: 32%; bottom: 32%; z-index: 3; --card-angle: -2deg; }
.showcase-footer { position: absolute; left: 8%; right: 8%; bottom: 5%; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 4; }
.showcase-footer span { font-size: .66rem; color: #527587; line-height: 1.5; }
.showcase-footer a { font-size: .72rem; color: var(--blue); font-weight: 700; white-space: nowrap; padding: 8px 0; }
.showcase-bubble { position: absolute; z-index: 3; pointer-events: none; border-radius: 50%; border: 1px solid rgba(65,170,199,.22);
    background: radial-gradient(circle at 28% 23%, #fff 0 5%, rgba(255,255,255,.3) 20%, transparent 58%, rgba(112,204,222,.22) 90%);
    box-shadow: inset 1px 2px 5px #fff; animation: showcaseBubble 7s ease-in-out infinite; }
.showcase-bubble-one { width: 42px; height: 42px; left: 9%; top: 24%; }
.showcase-bubble-two { width: 25px; height: 25px; right: 17%; top: 20%; animation-delay: -2s; }
.showcase-bubble-three { width: 52px; height: 52px; right: 6%; bottom: 24%; animation-delay: -4s; }
.showcase-bubble-four { width: 18px; height: 18px; left: 20%; bottom: 20%; animation-delay: -1s; }
.product-showcase:not(.is-running) .showcase-product,
.product-showcase:not(.is-running) .showcase-bubble { animation-play-state: paused; }
@keyframes showcaseFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes showcaseBubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@media (max-width: 1023px) and (min-width: 768px) {
    #about .about-grid { gap: 28px; }
    .showcase-heading h3 { font-size: 1rem; }
    .showcase-footer span { max-width: 100px; font-size: .58rem; }
}
@media (max-width: 767px) {
    #about .about-grid { grid-template-columns: minmax(0, 1fr); }
    .product-showcase { max-width: 100%; border-radius: 20px; }
    .showcase-product figcaption { font-size: .58rem; }
    .showcase-heading h3 { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .product-showcase .showcase-product, .product-showcase .showcase-bubble { animation: none; }
    .product-showcase .showcase-stage { transform: none; transition: none; }
}