/* Compact illustrations keep the value statements in the foreground. */
.product-showcase { padding: 72px 0 80px; background: #f8faff; }
.product-showcase .showcase-heading { max-width: 680px; margin: 0 auto 24px; text-align: center; }
.product-showcase .showcase-heading h2 { margin: 0; color: #182333; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1.4; }
.product-showcase .showcase-heading p { margin: 20px 0 0; color: #647184; font-size: 16px; line-height: 1.8; }
.product-showcase .showcase-service-group,
.product-showcase .showcase-insight-group { margin: 0; padding: 0; }
.product-showcase .showcase-service-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.product-showcase .showcase-card { position: relative; display: grid; align-items: center; gap: 24px; min-width: 0; padding: 36px; overflow: hidden; isolation: isolate; border: 1px solid #e3e9f2; border-radius: 22px; background: #fff; color: var(--card-ink); text-decoration: none; scroll-margin-top: 100px; box-shadow: 0 4px 18px #243b6005; transition: border-color .25s ease, box-shadow .25s ease; }
.product-showcase .showcase-card:focus-visible { outline: 3px solid #1769ff; outline-offset: 5px; }
.product-showcase .showcase-text { grid-column: 1 / 8; grid-template-columns: .9fr 1.1fr; min-height: 360px; --card-ink: #1d293b; --card-muted: #5c6b7e; --card-accent: #2869dc; --card-soft: #edf4ff; --card-line: #d6e5ff; --card-line-strong: #2869dc65; }
.product-showcase .showcase-voice { grid-column: 8 / -1; grid-template-columns: 1.15fr .85fr; gap: 20px; padding-inline: 26px; margin: 0; min-height: 360px; --card-ink: #1d293b; --card-muted: #5c6b7e; --card-accent: #087f70; --card-soft: #e9fbf6; --card-line: #c4eee2; --card-line-strong: #087f7065; }
.product-showcase .showcase-desk { grid-column: 1 / -1; grid-template-columns: 1.4fr 1fr; gap: 48px; min-height: 290px; --card-ink: #1d293b; --card-muted: #5c6b7e; --card-accent: #8050c4; --card-soft: #f5efff; --card-line: #e4d5fa; --card-line-strong: #8050c465; }
.product-showcase .showcase-insight-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e6eaf1; }
.product-showcase .showcase-voc { grid-template-columns: .75fr 1.35fr; gap: 48px; min-height: 300px; padding: 32px; --card-ink: #1d293b; --card-muted: #5c6b7e; --card-accent: #986315; --card-soft: #fff8e6; --card-line: #f2dfb2; --card-line-strong: #98631565; }
.product-showcase .showcase-copy { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; justify-content: center; min-width: 0; gap: 16px; }
.product-showcase .showcase-copy h4 { margin: 0; color: var(--card-ink); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.45; font-weight: 600; letter-spacing: -.025em; }
.product-showcase .showcase-copy > p { margin: 0; color: var(--card-muted); font-size: 16px; line-height: 1.85; }
.product-showcase .showcase-card-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 16px; border: 1px solid #dce4ef; border-radius: 10px; background: #fff; color: #25354c; font-size: 15px; line-height: 1.4; font-weight: 500; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.product-showcase .showcase-card-cta > span { flex-shrink: 0; font-size: 20px; line-height: 1; transition: transform .2s ease; }
.product-showcase .showcase-card:hover .showcase-card-cta,
.product-showcase .showcase-card:focus-visible .showcase-card-cta { background: var(--card-soft); border-color: var(--card-line-strong); color: var(--card-accent); }
.product-showcase .showcase-card:hover .showcase-card-cta > span,
.product-showcase .showcase-card:focus-visible .showcase-card-cta > span { transform: translateX(3px); }
.product-showcase .showcase-visual { position: relative; justify-self: center; width: 100%; min-width: 0; pointer-events: none; color: var(--card-ink); font-size: 14px; line-height: 1.65; }
.product-showcase .showcase-visual p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.product-showcase .showcase-visual strong { font-weight: 500; }


/* Short value statements and compact, non-scenario UI elements. */
.product-showcase .showcase-keywords { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
.product-showcase .showcase-keywords > span { padding: 3px 0; border: 0; border-radius: 0; font-size: 14px; color: var(--card-muted); background: transparent; }
.product-showcase .showcase-icon-grid { display: grid; gap: 7px; }
.product-showcase .showcase-icon-tile { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 7px; border: 1px solid #e7edf5; border-radius: 9px; background: #fff; box-shadow: 0 3px 8px #22385805; }
.product-showcase .showcase-icon-tile img { display: block; width: 100%; height: 100%; max-width: 24px; max-height: 24px; object-fit: contain; filter: none; opacity: 1; }
.product-showcase .showcase-color-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--card-soft); color: var(--card-accent); }
.product-showcase .showcase-color-icon img { width: 20px; height: 20px; }
.product-showcase .showcase-text-art { display: grid; max-width: 280px; gap: 22px; }
.product-showcase .text-response-ui { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 16px; border: 1px solid #dce8fb; border-radius: 12px; background: linear-gradient(135deg, #fff, #f3f7ff); box-shadow: 0 8px 20px #316ac00a; }
.product-showcase .response-heading strong { display: block; font-size: 15px; }
.product-showcase .response-heading > span { display: block; margin-top: 3px; font-size: 14px; }
.product-showcase .response-lines { display: grid; grid-column: 1 / -1; gap: 6px; padding-top: 6px; }
.product-showcase .response-lines i { display: block; height: 3px; width: 85%; border-radius: 3px; background: #487ed040; transform-origin: left; }
.product-showcase .response-lines i:nth-child(2) { width: 100%; }
.product-showcase .response-lines i:last-child { width: 60%; }
.product-showcase .response-check { position: absolute; right: 14px; bottom: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e7fff2; border: 1px solid #9ed7b4; color: #25864c; }
.product-showcase .text-channel-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Voice: a color phone mark, language chips and a living waveform. */
.product-showcase .showcase-voice-art { display: grid; justify-items: center; max-width: 164px; gap: 12px; }
.product-showcase .voice-orbit { position: relative; display: grid; place-items: center; width: 100%; min-height: 76px; }
.product-showcase .voice-phone-icon { position: relative; width: 48px; height: 48px; border: 1px solid #ffffffb0; border-radius: 15px; color: #0a9b80; background: linear-gradient(145deg, #f2fffb, #bff6e7); box-shadow: 0 6px 16px #138f7610; }
.product-showcase .voice-phone-icon::before { content: ""; position: absolute; inset: -9px; border: 1px solid #14887030; border-radius: 50%; }
.product-showcase .voice-phone-icon img { width: 24px; height: 24px; }
.product-showcase .voice-language { position: absolute; display: grid; place-items: center; width: 30px; height: 25px; border: 1px solid #d6eee7; border-radius: 8px; background: #fff; color: #196456; font-size: 13px; font-weight: 600; }
.product-showcase .language-left { left: 0; top: 12px; transform: rotate(-8deg); }
.product-showcase .language-right { right: 0; bottom: 9px; transform: rotate(8deg); }
.product-showcase .showcase-signal { display: flex; align-items: center; justify-content: center; gap: 4px; height: 52px; width: 100%; }
.product-showcase .showcase-signal i { flex: 0 1 3px; height: calc(var(--signal-height) * .65); border-radius: 3px; background: #198e79; }
.product-showcase .voice-ui-caption { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.product-showcase .showcase-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #148466; box-shadow: 0 0 0 4px #ffffff35; }
.product-showcase .voice-notes-ui { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid #d7eee6; border-radius: 9px; background: #f2fbf7; }
.product-showcase .voice-notes-ui > span { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; }
.product-showcase .voice-notes-ui > div { display: grid; flex: 1; gap: 6px; }
.product-showcase .voice-notes-ui i { height: 4px; background: #278c7930; border-radius: 2px; }
.product-showcase .voice-notes-ui i:last-child { width: 65%; }
.product-showcase .voice-notes-ui b { color: #168564; font-weight: 500; }

/* Desk: native ticket management and team collaboration, not third-party integrations. */
.product-showcase .showcase-desk-art { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; max-width: 360px; padding: 18px; border-radius: 20px; background: radial-gradient(ellipse at center, #f2eaff, #faf8ff 64%, #fff 100%); }
.product-showcase .desk-inbox-ui { position: relative; width: 100%; max-width: 320px; padding: 18px; border: 1px solid #e5dcf6; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px #7242b40b; }
.product-showcase .inbox-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.product-showcase .inbox-title strong { font-size: 15px; }
.product-showcase .inbox-title .showcase-color-icon { width: 30px; height: 30px; color: #8952cf; background: #f3e8ff; border-radius: 9px; }
.product-showcase .inbox-title img { width: 20px; height: 20px; }
.product-showcase .inbox-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--card-line); font-size: 14px; }
.product-showcase .inbox-dot { width: 7px; height: 7px; border-radius: 50%; background: #588eeb; }
.product-showcase .inbox-row:nth-child(3) .inbox-dot { background: #38b59c; }
.product-showcase .inbox-row:nth-child(4) .inbox-dot { background: #b975db; }
.product-showcase .inbox-row i { height: 3px; width: 40%; margin-left: auto; border-radius: 3px; background: #8258aa26; transform-origin: left; }
.product-showcase .inbox-team { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 13px; }
.product-showcase .inbox-team > span { padding: 3px 8px; border-radius: 6px; background: #f3edfc; font-size: 13px; color: #734998; }
.product-showcase .inbox-team b { font-size: 13px; font-weight: 400; }

/* VOC: keywords and abstract insight graphics, not sample reviews or metrics. */
.product-showcase .showcase-voc-art { display: grid; grid-template-columns: .9fr 1.1fr; max-width: 470px; gap: 24px; align-items: center; }
.product-showcase .voc-keyword-cloud { position: relative; display: flex; flex-wrap: wrap; align-content: center; gap: 12px; }
.product-showcase .voc-source { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 10px; font-size: 14px; }
.product-showcase .voc-source .showcase-icon-tile { width: 36px; flex-shrink: 0; }
.product-showcase .voc-topic { padding: 7px 10px; border: 1px solid #ffffffa0; border-radius: 10px; font-size: 14px; }
.product-showcase .topic-needs { background: #fff6cb; color: #855e14; transform: rotate(-3deg); }
.product-showcase .topic-pains { background: #ffe3bf; color: #99512b; transform: rotate(3deg); }
.product-showcase .topic-trends { margin-left: 18px; background: #fffaf0; color: #71501e; transform: rotate(-2deg); }
.product-showcase .voc-insight-ui { padding: 16px; border: 1px solid #f0e1bc; border-radius: 12px; background: linear-gradient(135deg, #fffdf7, #fff8e6); box-shadow: 0 8px 20px #98721406; }
.product-showcase .insight-ui-title { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.product-showcase .insight-ui-title .showcase-color-icon { width: 32px; height: 32px; color: #d0870b; background: #fff4ce; }
.product-showcase .insight-trend { display: block; width: 100%; height: 66px; margin-top: 14px; }
.product-showcase .trend-grid { stroke: #98681818; stroke-width: 1; }
.product-showcase .trend-area { fill: #ffbf3025; }
.product-showcase .trend-line { stroke: #bf7b11; stroke-width: 2.5; stroke-linecap: round; }
.product-showcase .insight-bars { display: grid; gap: 6px; margin-top: 12px; }
.product-showcase .insight-bars i { width: 82%; height: 3px; border-radius: 3px; background: #da941d45; transform-origin: left; }
.product-showcase .insight-bars i:nth-child(2) { width: 58%; }
.product-showcase .insight-bars i:last-child { width: 70%; }
.product-showcase .insight-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; }


/* Downloaded Lucide assets; brand logos remain unfiltered. */
.product-showcase .showcase-ui-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
.product-showcase .showcase-card-cta > span { display: grid; place-items: center; }
.product-showcase .showcase-card-cta .showcase-ui-icon { width: 18px; height: 18px; opacity: .8; }
.product-showcase .text-ai-icon img { filter: invert(37%) sepia(92%) saturate(1763%) hue-rotate(201deg) brightness(88%); }
.product-showcase .voice-phone-icon img,
.product-showcase .voice-notes-ui img,
.product-showcase .response-check img { filter: invert(40%) sepia(56%) saturate(775%) hue-rotate(119deg) brightness(88%); }
.product-showcase .inbox-title img { filter: invert(36%) sepia(55%) saturate(1065%) hue-rotate(231deg); }
.product-showcase .insight-ui-title img { filter: invert(45%) sepia(71%) saturate(771%) hue-rotate(2deg) brightness(90%); }
.product-showcase .response-check img { width: 16px; height: 16px; }
.product-showcase .showcase-card:hover { border-color: var(--card-line-strong); box-shadow: 0 8px 28px #243b600a; }

/* Subtle continuous UI activity; logos retain their original colors. */
.product-showcase .showcase-icon-tile { animation: showcase-icon-light 6s ease-in-out infinite; animation-delay: calc(var(--ui-order, 0) * -450ms); }
.product-showcase .response-lines i,
.product-showcase .inbox-row i,
.product-showcase .insight-bars i { animation: showcase-ui-bar 5s ease-in-out infinite; animation-delay: calc(var(--ui-order, 0) * -700ms); }
.product-showcase .showcase-signal i { animation: showcase-wave 1.6s ease-in-out infinite; animation-delay: calc(var(--ui-order, 0) * -110ms); }
.product-showcase .voice-phone-icon::before { animation: showcase-voice-ring 3.6s ease-out infinite; }
.product-showcase .trend-line { stroke-dasharray: 100; animation: showcase-insight-line 7s ease-in-out infinite; }
.product-showcase:not(.is-motion-ready) .showcase-card *,
.product-showcase:not(.is-motion-ready) .voice-phone-icon::before { animation: none; }
.product-showcase .showcase-card:not(.is-motion-visible) *,
.product-showcase .showcase-card:not(.is-motion-visible) .voice-phone-icon::before,
.product-showcase.is-motion-paused .showcase-card *,
.product-showcase.is-motion-paused .voice-phone-icon::before { animation-play-state: paused; }
@keyframes showcase-icon-light { 0%, 40%, 100% { border-color: #e7edf5; } 15%, 25% { border-color: var(--card-line-strong); } }
@keyframes showcase-ui-bar { 0%, 100% { transform: scaleX(.72); } 50% { transform: scaleX(1); } }
@keyframes showcase-wave { 0%, 100% { transform: scaleY(.4); opacity: .65; } 45% { transform: scaleY(1); opacity: 1; } 75% { transform: scaleY(.65); opacity: .85; } }
@keyframes showcase-voice-ring { 0% { transform: scale(.88); opacity: .8; } 80%, 100% { transform: scale(1.18); opacity: 0; } }
@keyframes showcase-insight-line { 0%, 100% { stroke-dashoffset: 20; } 35%, 80% { stroke-dashoffset: 0; } }

@media (max-width: 1120px) {
  .product-showcase .showcase-service-grid { gap: 20px; }
  .product-showcase .showcase-text { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; min-height: 320px; }
  .product-showcase .showcase-voice { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin: 0; min-height: 320px; padding: 30px; gap: 32px; }
  .product-showcase .showcase-desk { grid-column: 1 / -1; grid-template-columns: 1.25fr 1fr; gap: 32px; }
  .product-showcase .showcase-voc { grid-template-columns: .8fr 1.2fr; gap: 30px; padding: 30px; }
  .product-showcase .showcase-voc-art { grid-template-columns: 1fr; max-width: 300px; gap: 20px; }
  .product-showcase .voc-keyword-cloud { gap: 9px; }
  .product-showcase .voc-topic { padding: 6px 10px; }
}
@media (max-width: 760px) {
  .product-showcase { padding: 56px 0; }
  .product-showcase .showcase-heading { margin-bottom: 24px; }
  .product-showcase .showcase-service-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .product-showcase .showcase-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 26px; gap: 28px; border-radius: 18px; }
  .product-showcase .showcase-copy { gap: 14px; }
  .product-showcase .showcase-copy h4 { font-size: 24px; }
  .product-showcase .showcase-desk .showcase-copy { grid-row: 1; }
  .product-showcase .showcase-visual { width: 100%; margin: 4px auto 0; }
  .product-showcase .showcase-insight-group { margin-top: 16px; padding-top: 16px; }
  .product-showcase .showcase-desk-art { grid-template-columns: minmax(0, 1fr); }
  .product-showcase .desk-inbox-ui { padding: 14px; }
  .product-showcase .showcase-voc-art { grid-template-columns: minmax(0, 1fr); }
  .product-showcase .showcase-voice-art { max-width: 164px; }
}
@media (max-width: 390px) {
  .product-showcase .showcase-card { padding: 22px; }
  .product-showcase .text-channel-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .product-showcase .showcase-desk-art { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-showcase .showcase-card { transition: none; }
  .product-showcase .showcase-card *, .product-showcase .showcase-card *::before { animation: none !important; transition: none !important; }
}