/* ==========================================================================
   Homepage — premium product showcase (spotlight band).
   Dark section; each card carries its product's accent palette and links to
   the bespoke landing. Scoped under .tm-showcase.
   ========================================================================== */

.tm-showcase {
    --sc-bg: #0b0e15;
    --sc-ink: #eef2fb;
    --sc-muted: #93a0b8;
    --sc-line: rgba(255,255,255,.08);
    --sc-card: rgba(255,255,255,.035);
    position: relative;
    padding: clamp(70px, 9vw, 120px) 0;
    background:
        radial-gradient(80% 60% at 85% 0%, rgba(56,189,248,.08), transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(176,108,255,.08), transparent 60%),
        var(--sc-bg);
    color: var(--sc-ink);
    overflow: hidden;
}
.tm-showcase .container { max-width: 1280px; }
.tm-showcase * { box-sizing: border-box; }

.tm-showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; flex-wrap: wrap; }
.tm-showcase-head .texts { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 640px; }
.tm-showcase .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #4fe0c8; display: inline-flex; align-items: center; gap: .5em; }
.tm-showcase .kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, #4fe0c8, transparent); }
.tm-showcase h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; }
.tm-showcase .subtitle { margin: 0; color: var(--sc-muted); font-size: 1.02rem; line-height: 1.55; }
.tm-showcase .btn-all { display: inline-flex; align-items: center; gap: .5em; padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size: .92rem; text-decoration: none; border: 1px solid var(--sc-line); color: var(--sc-ink); white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.tm-showcase .btn-all:hover { border-color: #4fe0c8; color: #4fe0c8; }

.tm-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tm-show-card {
    --acc: #12d9a3; --acc2: #2fe4ff;
    position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
    border: 1px solid var(--sc-line); border-radius: 22px; background: var(--sc-card);
    overflow: hidden; isolation: isolate;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.tm-show-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--acc) 70%, transparent); }

.tm-show-media { position: relative; aspect-ratio: 16/12; display: grid; place-items: center; overflow: hidden; }
.tm-show-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%); }
.tm-show-media::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--acc), var(--acc2)); opacity: .9; }
.tm-show-media img { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(0,0,0,.5)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.tm-show-card:hover .tm-show-media img { transform: translateY(-6px) scale(1.03); }

.tm-show-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tm-show-body h3 { margin: 0; font-size: 1.24rem; font-weight: 800; letter-spacing: -.01em; }
.tm-show-body p { margin: 0; color: var(--sc-muted); font-size: .93rem; line-height: 1.5; flex: 1; }
.tm-show-more { margin-top: 6px; display: inline-flex; align-items: center; gap: .45em; font-weight: 700; font-size: .9rem; color: var(--acc); }
.tm-show-more .arw { transition: transform .25s ease; }
.tm-show-card:hover .tm-show-more .arw { transform: translateX(4px); }

/* audience badges (catalog cards) */
.tm-show-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.tm-show-tags span { font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--sc-line); color: var(--sc-muted); }

/* per-product accent palettes (match bespoke landings) */
.tm-show-card--terzapower-pen-20mg { --acc: #12d9a3; --acc2: #2fe4ff; }
.tm-show-card--terzapower-10mg    { --acc: #38bdf8; --acc2: #7c6cff; }
.tm-show-card--terzapower         { --acc: #e8c489; --acc2: #f6e2b8; }
.tm-show-card--mots-c             { --acc: #ffb340; --acc2: #ff5d7a; }
.tm-show-card--klow               { --acc: #b06cff; --acc2: #4fe0c8; }
.tm-show-card--nova-nad           { --acc: #b06cff; --acc2: #4fe0c8; }

/* reveal */
.tm-show-card { opacity: 0; transform: translateY(26px); }
.tm-show-card.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.tm-show-card.is-in:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .tm-show-card { opacity: 1; transform: none; } }

@media (max-width: 1000px) { .tm-showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .tm-showcase-grid { grid-template-columns: 1fr; } }