.platform-showcase {
  margin-top: 48px;
  padding: 48px 24px;
  background: radial-gradient(ellipse at 90% 0, #285ed4, transparent 65%), #10378f;
  font-family: "Roboto", sans-serif;
  text-align: left;
}
.platform-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  max-width: 1237px;
  margin: auto;
}
.platform-showcase .platform-eyebrow {
  margin: 0 0 10px;
  color: #b8d7ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.platform-showcase h3.platform-title {
  margin: 0 0 24px;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.15;
  color: #fff;
}
.platform-tabs { display: grid; gap: 8px; }
.platform-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  padding: 12px 16px;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  color: #edf4ff;
  background: #ffffff07;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.platform-tab:hover { background: #ffffff12; transform: translateX(3px); }
.platform-tab[aria-selected="true"] {
  color: #153777;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 22px #06205624;
}
.platform-tab:focus-visible, .platform-panel:focus-visible {
  outline: 3px solid #7ce5ff;
  outline-offset: 3px;
}
.platform-tab-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff12;
}
.platform-tab[aria-selected="true"] .platform-tab-icon { background: #edf3ff; color: #2457d6; }
.platform-tab-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.platform-tab-arrow { margin-left: auto; font-size: 22px; opacity: .65; }
.platform-stage {
  background: #fff;
  border: 1px solid #dce7ff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 20px 60px #051c592b;
  color: #19365d;
  min-width: 0;
}
.platform-stage-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e8eef7; }
.platform-stage-header > span:first-child { font-size: 14px; font-weight: 700; }
.platform-preview-label { font-size: 11px; color: #61748e; background: #f1f5fb; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.platform-panel { min-height: 396px; display: flex; flex-direction: column; padding-top: 26px; animation: platform-panel-in .3s ease both; }
.platform-panel[hidden] { display: none; }
.platform-showcase .platform-panel h4 { margin: 0 0 10px; font-size: 25px; color: #102c55; line-height: 1.2; }
.platform-showcase .platform-panel > p { margin: 0; font-size: 16px; line-height: 1.55; color: #59708d; }
.platform-demo { margin: auto 0; padding: 26px 0 20px; }
.platform-showcase .platform-caption { margin: auto 0 0; font-size: 13px; line-height: 1.5; color: #59708d; text-align: center; }
.connection-sources { display: flex; justify-content: center; gap: 28px; }
.connection-source { display: flex; align-items: center; gap: 9px; padding: 13px 17px; border: 1px solid #e0e8f7; background: #f8faff; border-radius: 12px; font-size: 15px; font-weight: 600; }
.connection-source b { color: #2464d8; font-size: 24px; line-height: 1; }
.connection-source .google-mark { color: #4285f4; font-size: 19px; }
.connection-lines { display: block; width: 100%; height: 58px; overflow: visible; }
.connection-lines path { fill: none; stroke: #d5e2fc; stroke-width: 2; }
.connection-lines .connection-flow { stroke: #4386ed; stroke-dasharray: 5 20; }
.connection-hub { display: flex; justify-content: center; align-items: center; width: 190px; height: 70px; margin: 0 auto; background: #fff; border: 1px solid #dce6fb; border-radius: 16px; box-shadow: 0 6px 28px #2861c817; }
.connection-hub img { display: block; width: 145px; height: auto; }
.connection-output { text-align: center; margin-top: 18px; font-size: 13px; color: #61748e; }
.journey-demo { display: flex; gap: 0; align-items: flex-start; position: relative; }
.journey-demo::before { content: ""; position: absolute; top: 46px; left: 12%; width: 76%; height: 2px; background: #dce7fa; }
.journey-dot { position: absolute; top: 42px; left: 12%; width: 10px; height: 10px; background: #3f86ef; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px #3f86ef1a; }
.journey-step { position: relative; z-index: 1; flex: 1; text-align: center; }
.journey-step b { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 14px; background: #edf3ff; color: #2457d6; border: 1px solid #d8e5ff; border-radius: 13px; font-size: 17px; }
.journey-step span { font-size: 12px; color: #45617f; }
.transaction-demo { display: grid; gap: 12px; }
.transaction-row { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e2eaf7; border-radius: 12px; background: #f8faff; font-size: 14px; }
.transaction-row i { width: 10px; height: 10px; background: #4386ed; border-radius: 50%; }
.transaction-row span:last-child { margin-left: auto; font-size: 11px; color: #3865a1; background: #e6efff; border-radius: 5px; padding: 4px 7px; }
.report-demo { padding: 22px; border: 1px solid #e0e8f7; border-radius: 14px; background: #f8faff; }
.report-heading { display: flex; justify-content: space-between; align-items: center; color: #365578; font-size: 13px; }
.report-heading span:last-child { color: #7291b4; font-size: 11px; }
.report-chart { height: 106px; display: flex; align-items: flex-end; gap: 12px; padding: 12px 4px 0; border-bottom: 1px solid #dce6f5; }
.report-chart span { flex: 1; height: var(--bar); min-height: 12px; border-radius: 5px 5px 0 0; background: linear-gradient(#72b9fa, #3464dc); transform-origin: bottom; }
.report-actions { display: flex; justify-content: space-between; gap: 8px; padding-top: 16px; font-size: 11px; color: #59708d; }
.insight-demo { position: relative; background: linear-gradient(135deg, #f3f6ff, #ecf7ff); border: 1px solid #dce7fa; border-radius: 16px; padding: 24px; }
.insight-spark { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 14px; border-radius: 12px; background: #fff; color: #2457d6; font-size: 29px; box-shadow: 0 3px 12px #2457d60a; }
.insight-demo strong { display: block; font-size: 17px; line-height: 1.4; color: #244677; }
.insight-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.insight-tags span { border-radius: 6px; padding: 5px 8px; background: #fff; color: #59708d; font-size: 11px; }
.platform-showcase.in-view .connection-flow { animation: platform-flow 2.8s linear infinite; }
.platform-showcase.in-view .journey-dot { animation: platform-journey 4s ease-in-out infinite; }
.platform-showcase.in-view .transaction-row { animation: platform-highlight 3s ease-in-out infinite; }
.platform-showcase.in-view .transaction-row:nth-child(2) { animation-delay: .6s; }
.platform-showcase.in-view .transaction-row:nth-child(3) { animation-delay: 1.2s; }
.platform-showcase.in-view .report-chart span { animation: platform-bar-in .8s ease both; animation-delay: calc(var(--order) * .09s); }
.platform-showcase.in-view .insight-spark { animation: platform-spark 3s ease-in-out infinite; }
@keyframes platform-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes platform-flow { to { stroke-dashoffset: -100; } }
@keyframes platform-journey { 0%, 8% { left: 12%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 92%, 100% { left: 85%; opacity: 0; } }
@keyframes platform-highlight { 0%, 70%, 100% { border-color: #e2eaf7; } 30% { border-color: #89b5f5; background: #edf4ff; } }
@keyframes platform-bar-in { from { transform: scaleY(.1); } to { transform: scaleY(1); } }
@keyframes platform-spark { 0%, 100% { transform: translateY(0); box-shadow: 0 3px 12px #2457d60a; } 50% { transform: translateY(-3px); box-shadow: 0 6px 18px #2457d61c; } }
@media (max-width: 900px) {
  .platform-showcase { padding: 36px 20px; }
  .platform-showcase-inner { grid-template-columns: 1fr; gap: 24px; }
  .platform-tabs { grid-template-columns: 1fr 1fr; }
  .platform-tab:last-child { grid-column: 1 / -1; }
  .platform-tab { font-size: 14px; }
  .platform-panel { min-height: 380px; }
}
@media (max-width: 520px) {
  .platform-showcase { padding: 32px 16px; }
  .platform-tabs { grid-template-columns: 1fr; }
  .platform-tab { min-height: 62px; padding: 10px 12px; }
  .platform-tab:last-child { grid-column: auto; }
  .platform-stage { padding: 20px; border-radius: 18px; }
  .platform-panel { min-height: 400px; padding-top: 22px; }
  .platform-showcase .platform-panel h4 { font-size: 23px; }
  .connection-sources { gap: 12px; }
  .connection-source { padding: 12px 10px; font-size: 13px; gap: 7px; }
  .platform-stage-header { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-showcase *, .platform-showcase.in-view * { animation: none !important; transition: none !important; }
}