/* Public proof gallery shared by the examples and Pro pages. */
.showcase-hero {
    padding:clamp(4.5rem,9vw,8rem) 0 3rem;
    text-align:center
}

.showcase-eyebrow {
    color:#67e8f9;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.16em;
    margin-bottom:1rem;
    text-transform:uppercase
}

.showcase-hero h1 {
    font-size:clamp(2.5rem,7vw,5rem);
    letter-spacing:-.055em;
    line-height:.98;
    margin:0 auto 1.25rem;
    max-width:920px
}

.showcase-hero .hero-subtitle {
    color:var(--text-secondary-color);
    font-size:clamp(1rem,2vw,1.2rem);
    margin:0 auto;
    max-width:720px
}

.showcase-proof-strip {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem 1.5rem;
    justify-content:center;
    margin:2rem auto 0
}

.showcase-proof-strip span {
    align-items:center;
    color:#d4d4d8;
    display:inline-flex;
    font-size:.85rem;
    font-weight:600;
    gap:.45rem
}

.showcase-proof-strip span::before {
    background:#22d3ee;
    border-radius:50%;
    box-shadow:0 0 12px rgba(34,211,238,.6);
    content:'';
    height:6px;
    width:6px
}

.showcase-section {
    padding:2rem 0 6rem
}

.showcase-grid {
    display:grid;
    gap:3rem;
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.showcase-card {
    background:linear-gradient(145deg,rgba(30,41,59,.82),rgba(10,15,26,.94));
    border:1px solid rgba(148,163,184,.2);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.24);
    min-width:0;
    overflow:hidden
}

.showcase-card--featured {
    grid-column:1/-1
}

.showcase-card-header {
    align-items:end;
    display:flex;
    gap:1rem;
    justify-content:space-between;
    padding:1.35rem 1.4rem 1.1rem
}

.showcase-card-kicker {
    color:#67e8f9;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.12em;
    margin-bottom:.25rem;
    text-transform:uppercase
}

.showcase-card h2,.showcase-card h3 {
    font-size:clamp(1.2rem,2.6vw,1.65rem);
    line-height:1.15;
    margin:0
}

.showcase-card-summary {
    color:#a1a1aa;
    font-size:.85rem;
    margin:0;
    max-width:260px;
    text-align:right
}

.showcase-frame {
    aspect-ratio:3/2;
    background:#090d14;
    overflow:hidden;
    position:relative
}

.showcase-panel {
    height:100%;
    inset:0;
    position:absolute;
    width:100%
}

.showcase-panel[hidden] {
    display:none
}

.showcase-image,.showcase-layer-image {
    display:block;
    height:100%;
    object-fit:cover;
    width:100%
}

.showcase-result {
    background:#090d14;
    height:100%;
    overflow:hidden;
    position:relative;
    width:100%
}

.showcase-result .showcase-bg,.showcase-result .showcase-fg {
    height:100%;
    inset:0;
    object-fit:cover;
    pointer-events:none;
    position:absolute;
    width:100%
}

.showcase-result .showcase-bg {
    z-index:1
}

.showcase-result .showcase-fg {
    z-index:3
}

.showcase-word {
    color:#fff;
    font-size:clamp(2rem,8vw,7rem);
    font-weight:900;
    left:48%;
    letter-spacing:-.07em;
    line-height:.8;
    position:absolute;
    text-shadow:0 8px 24px rgba(0,0,0,.34);
    top:46%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    z-index:2
}

.showcase-word--portrait {
    font-size:clamp(2.4rem,10vw,8.8rem);
    left:43%;
    top:52%
}

.showcase-word--product {
    color:#eaf6ff;
    left:43%;
    top:48%
}

.showcase-word--hiker {
    left:48%;
    top:47%
}

.showcase-word--surfer {
    color:#67e8f9;
    left:43%;
    top:42%
}

.showcase-layers {
    background:#111827;
    display:grid;
    gap:1px;
    grid-template-columns:repeat(3,1fr);
    height:100%
}

.showcase-layer {
    background-color:#0b101b;
    min-width:0;
    overflow:hidden;
    position:relative
}

.showcase-layer--transparent {
    background-color:#d4d4d8;
    background-image:linear-gradient(45deg,#b9bec6 25%,transparent 25%),linear-gradient(-45deg,#b9bec6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b9bec6 75%),linear-gradient(-45deg,transparent 75%,#b9bec6 75%);
    background-position:0 0,0 8px,8px -8px,-8px 0;
    background-size:16px 16px
}

.showcase-layer--type {
    align-items:center;
    background:linear-gradient(145deg,#172033,#080c14);
    display:flex;
    justify-content:center
}

.showcase-layer--type strong {
    color:#fff;
    font-size:clamp(1rem,4vw,2.6rem);
    font-weight:900;
    letter-spacing:-.06em;
    transform:rotate(-90deg);
    white-space:nowrap
}

.showcase-layer-label {
    background:rgba(3,7,18,.78);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    bottom:.65rem;
    color:#e4e4e7;
    font-size:.62rem;
    font-weight:700;
    left:50%;
    letter-spacing:.08em;
    padding:.28rem .52rem;
    position:absolute;
    text-transform:uppercase;
    transform:translateX(-50%);
    white-space:nowrap;
    z-index:4
}

.showcase-controls {
    align-items:center;
    display:flex;
    gap:.45rem;
    padding:.9rem 1rem 1rem
}

.showcase-tab,.showcase-expand {
    background:transparent;
    border:1px solid rgba(148,163,184,.28);
    border-radius:999px;
    color:#a1a1aa;
    cursor:pointer;
    font:inherit;
    font-size:.75rem;
    font-weight:700;
    padding:.5rem .78rem;
    transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease
}

.showcase-tab:hover,.showcase-tab[aria-selected=true],.showcase-expand:hover {
    background:rgba(34,211,238,.12);
    border-color:rgba(34,211,238,.62);
    color:#ecfeff
}

.showcase-tab:focus-visible,.showcase-expand:focus-visible,.showcase-dialog-close:focus-visible {
    outline:3px solid #67e8f9;
    outline-offset:2px
}

.showcase-expand {
    margin-left:auto
}

.showcase-note {
    border-top:1px solid rgba(148,163,184,.16);
    color:#a1a1aa;
    font-size:.78rem;
    line-height:1.55;
    margin:0;
    padding:.9rem 1.2rem 1.15rem
}

.showcase-note strong {
    color:#e4e4e7
}

.showcase-method {
    background:rgba(9,14,24,.68);
    border:1px solid rgba(148,163,184,.16);
    border-radius:18px;
    display:grid;
    gap:1rem 3rem;
    grid-template-columns:minmax(0,1fr) auto;
    margin-top:3rem;
    padding:1.5rem
}

.showcase-method h2 {
    font-size:1.15rem;
    margin-bottom:.35rem
}

.showcase-method p {
    color:#a1a1aa;
    font-size:.86rem;
    margin:0;
    max-width:760px
}

.showcase-method a {
    align-self:center;
    font-size:.9rem;
    font-weight:700
}

.showcase-dialog {
    background:#090d14;
    border:1px solid rgba(148,163,184,.3);
    border-radius:18px;
    color:#fff;
    max-height:calc(100vh - 2rem);
    max-width:min(1200px,calc(100vw - 2rem));
    overflow:hidden;
    padding:0;
    width:100%
}

.showcase-dialog::backdrop {
    background:rgba(0,0,0,.84);
    backdrop-filter:blur(8px)
}

.showcase-dialog-media {
    aspect-ratio:3/2;
    position:relative;
    width:100%
}

.showcase-dialog-media .showcase-panel {
    display:block
}

.showcase-dialog-close {
    background:rgba(9,13,20,.88);
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    cursor:pointer;
    font:inherit;
    font-size:.8rem;
    font-weight:800;
    padding:.6rem .85rem;
    position:absolute;
    right:.8rem;
    top:.8rem;
    z-index:10
}

.pro-proof {
    padding:1rem 0 5rem
}

.pro-proof-inner {
    align-items:center;
    display:grid;
    gap:clamp(2rem,6vw,5rem);
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)
}

.pro-proof-media {
    aspect-ratio:3/2;
    border:1px solid rgba(103,232,249,.28);
    border-radius:18px;
    box-shadow:0 24px 70px rgba(0,0,0,.34);
    overflow:hidden
}

.pro-proof-copy h2 {
    font-size:clamp(2rem,4vw,3.2rem);
    letter-spacing:-.04em;
    line-height:1.04;
    margin:0 0 1rem
}

.pro-proof-copy>p {
    color:#a1a1aa;
    margin:0 0 1.25rem
}

.pro-proof-list {
    display:grid;
    gap:.65rem;
    list-style:none;
    margin:0 0 1.5rem;
    padding:0
}

.pro-proof-list li {
    color:#e4e4e7;
    font-size:.9rem;
    padding-left:1.35rem;
    position:relative
}

.pro-proof-list li::before {
    color:#67e8f9;
    content:'✓';
    font-weight:900;
    left:0;
    position:absolute
}

@media(max-width:780px) {
    .showcase-grid {
        grid-template-columns:1fr;
        gap:1.5rem
    }

    .showcase-card--featured {
        grid-column:auto
    }

    .showcase-card-header {
        align-items:start;
        flex-direction:column;
        gap:.5rem
    }

    .showcase-card-summary {
        max-width:none;
        text-align:left
    }

    .showcase-controls {
        flex-wrap:wrap
    }

    .showcase-expand {
        margin-left:0
    }

    .showcase-method {
        grid-template-columns:1fr
    }

    .pro-proof-inner {
        grid-template-columns:1fr
    }

}

@media(max-width:480px) {
    .showcase-hero {
        padding-top:3.5rem
    }

    .showcase-section {
        padding-bottom:4rem
    }

    .showcase-controls {
        gap:.35rem;
        padding:.75rem
    }

    .showcase-tab,.showcase-expand {
        font-size:.7rem;
        padding:.45rem .62rem
    }

    .showcase-layer-label {
        bottom:.35rem;
        font-size:.52rem
    }

}

@media(prefers-reduced-motion:reduce) {
    .showcase-tab,.showcase-expand {
        transition:none
    }

}