/* product-showcase-01  (namespace s3-)  Product-first: dark graphite stage + cyan, hotspot viewer, scroll-snap gallery, zig-zag. */
.s3 { --pm-ink: #121316; --pm-bg: #f4f6f8; --pm-brand: #0e8fa0; --pm-cta: #19c3d6; --pm-on-cta: #0b1114; --pm-muted: #565d68; --pm-line: #dde2e8; --pm-soft: #e9eef2;
  --pm-btn-r: 10px; --pm-btn-bd: 0; --pm-btn-sh: 0 0 0 0 transparent; --pm-focus: #0e8fa0; }
.s3 .pm-btn:hover { box-shadow: 0 8px 24px -6px rgba(25,195,214,.6); }
.s3-dark { background: #121316; color: #f2f5f7; }
.s3-dark :focus-visible { outline-color: #19c3d6; }
.s3-head { position: relative; z-index: 3; }
.s3-head__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 16px; }
.s3-brand { font-weight: 900; font-size: 1.1rem; text-decoration: none; }
.s3-nav { display: none; gap: 26px; font-weight: 700; color: #aab3bd; } .s3-nav a { text-decoration: none; } .s3-nav a:hover { color: #fff; }

.s3-hero { padding-block: 22px 56px; position: relative; overflow: hidden; text-align: center; }
.s3-hero::before { content: ""; position: absolute; inset-inline: 10%; top: -30%; height: 70%; background: radial-gradient(closest-side, rgba(25,195,214,.22), transparent); pointer-events: none; }
.s3-hero .pm-wrap { position: relative; }
.s3-tag { display: inline-block; border: 1px solid #38434d; border-radius: 999px; padding: 0 16px; font-weight: 700; font-size: .9rem; color: #9fe6ee; margin-bottom: 14px; line-height: 2; }
.s3-h1 { font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.28; font-weight: 900; max-width: 17em; margin-inline: auto; }
.s3-lead { margin: 16px auto 0; color: #aab3bd; font-size: clamp(1.05rem, 3vw, 1.2rem); max-width: 34em; line-height: 1.95; }
.s3-hero .pm-cta { justify-content: center; margin-top: 24px; }
.s3-hero .pm-btn--ghost { color: #fff !important; border: 2px solid #38434d; }
.s3-viewer { margin-top: 38px; text-align: start; }
.s3-stage { position: relative; background: #1b1e24; border: 1px solid #2c333b; border-radius: 18px; padding: 10px; box-shadow: 0 40px 80px -30px rgba(25,195,214,.35); }
.s3-win { background: #fff; color: var(--pm-ink); border-radius: 10px; overflow: hidden; }
.s3-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #eef2f5; border-bottom: 1px solid var(--pm-line); font-size: .74rem; font-weight: 800; overflow: hidden; white-space: nowrap; }
.s3-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c8d0d8; flex: none; }
.s3-bar span { padding: 2px 10px; border-radius: 6px; background: #fff; margin-inline-start: 4px; } .s3-bar span.on { background: #19c3d6; }
.s3-sheet { padding: 12px; display: grid; gap: 10px; }
.s3-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s3-kpis div { border: 1px solid var(--pm-line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.s3-kpis b { font-size: clamp(.8rem, 2.6vw, 1.3rem); font-weight: 900; direction: ltr; text-align: end; line-height: 1.2; }
.s3-main { display: grid; gap: 10px; grid-template-columns: 1.4fr 1fr; }
.s3-tbl { border: 1px solid var(--pm-line); border-radius: 8px; overflow: hidden; }
.s3-tbl div { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8px; padding: 7px 10px; align-items: center; border-top: 1px solid var(--pm-line); }
.s3-tbl div:first-child { border-top: 0; background: #f4f7f9; }
.s3-st { justify-self: start; padding: 0 9px; border-radius: 99px; font-size: .62rem; font-weight: 800; line-height: 1.8; }
.s3-st.a { background: #d6f5e6; color: #0b6b43; } .s3-st.b { background: #fff0c9; color: #8a5a00; } .s3-st.c { background: #e0ecff; color: #1b4fb3; }
.s3-chart { border: 1px solid var(--pm-line); border-radius: 8px; padding: 10px; display: flex; align-items: flex-end; gap: 6px; min-height: 120px; }
.s3-chart i { flex: 1; background: #19c3d6; border-radius: 3px 3px 0 0; height: var(--h); }
.s3-chart i:nth-child(odd) { background: #0e8fa0; }
.s3-pin { position: absolute; z-index: 4; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #19c3d6; color: #0b1114; font-weight: 900; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(25,195,214,.3), 0 6px 14px rgba(0,0,0,.4); }
.s3-pin[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 6px 14px rgba(0,0,0,.4); }
.s3-pin:nth-of-type(1) { top: 13%; right: 12%; } .s3-pin:nth-of-type(2) { top: 50%; right: 36%; } .s3-pin:nth-of-type(3) { top: 52%; left: 12%; } .s3-pin:nth-of-type(4) { top: 5%; right: 40%; }
.s3-notes { margin-top: 14px; min-height: 3.8em; text-align: center; }
.s3-notes p { margin: 0 auto; max-width: 36em; color: #d7dde3; font-weight: 600; line-height: 1.85; }
.s3-notes b { color: #19c3d6; }

.s3-specs { background: #fff; border-bottom: 1px solid var(--pm-line); }
.s3-specs__in { display: grid; grid-template-columns: 1fr 1fr; }
.s3-specs div { padding: 16px 12px; text-align: center; line-height: 1.5; border-bottom: 1px solid var(--pm-line); }
.s3-specs div:nth-child(odd) { border-inline-start: 1px solid var(--pm-line); }
.s3-specs small { display: block; color: var(--pm-muted); font-weight: 600; font-size: .82rem; } .s3-specs b { font-weight: 900; }

.s3-sec { padding-block: 60px; }
.s3-h2 { font-size: clamp(1.7rem, 5.6vw, 2.5rem); line-height: 1.32; font-weight: 900; max-width: 18em; }
.s3-sub { margin: 10px 0 0; color: var(--pm-muted); max-width: 36em; }
.s3-gal { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pm-pad) 18px; scroll-padding-inline: var(--pm-pad); margin-top: 26px; scrollbar-width: thin; }
.s3-card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; background: #fff; border: 1px solid var(--pm-line); border-radius: 16px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.s3-card .mini { background: #f4f7f9; border-radius: 10px; padding: 10px; display: grid; gap: 6px; min-height: 120px; align-content: start; }
.s3-card h3 { margin: 4px 0 0; font-size: 1.08rem; font-weight: 800; } .s3-card p { margin: 0; color: var(--pm-muted); font-size: .94rem; line-height: 1.75; }
.s3-zig { display: grid; gap: 26px; margin-top: 8px; }
.s3-row { display: grid; gap: 18px; align-items: center; }
.s3-row h3 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 900; line-height: 1.4; } .s3-row p { margin: 0; color: var(--pm-muted); }
.s3-vis { background: #121316; border-radius: 20px; padding: 18px; display: grid; gap: 8px; align-content: center; min-height: 190px; }
.s3-vis .bar { height: 10px; border-radius: 99px; background: #2c333b; overflow: hidden; } .s3-vis .bar i { display: block; height: 100%; width: var(--w); background: #19c3d6; }
.s3-vis .chips { display: flex; gap: 6px; flex-wrap: wrap; } .s3-vis .chips span { padding: 0 12px; border-radius: 99px; font-weight: 800; font-size: .8rem; line-height: 2; background: #fff; color: #121316; }
.s3-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--pm-ink); }
.s3-list li { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--pm-line); font-weight: 700; }
.s3-list small { color: var(--pm-muted); font-weight: 600; margin-inline-start: auto; font-size: .88rem; white-space: nowrap; }
.s3-box { max-width: 520px; margin-inline: auto; background: #fff; border: 1px solid var(--pm-line); border-radius: 24px; padding: 28px 22px; text-align: center; box-shadow: 0 30px 60px -34px rgba(0,0,0,.35); }
.s3-box h2 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 900; } .s3-box .p { font-size: clamp(3.4rem, 14vw, 4.4rem); font-weight: 900; direction: ltr; line-height: 1.1; margin: 8px 0 4px; } .s3-box .p small { font-size: 1.3rem; font-weight: 800; }
.s3-box ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 4px; color: var(--pm-muted); font-weight: 600; }
.s3-box p.n { margin: 12px 0 0; color: var(--pm-muted); font-size: .9rem; }
.s3-final { padding-block: 56px; text-align: center; } .s3-final h2 { margin: 0 auto; font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 900; max-width: 15em; line-height: 1.3; } .s3-final .pm-btn { margin-top: 22px; }
.s3-foot { background: #0b0c0e; color: #7d8792; font-size: .9rem; padding-block: 22px; } .s3-foot p { margin: 0; }

@media (min-width: 768px) {
  .s3-nav { display: flex; } .s3-sec { padding-block: 88px; }
  .s3-specs__in { grid-template-columns: repeat(4, 1fr); } .s3-specs div { border-bottom: 0; border-inline-start: 1px solid var(--pm-line); } .s3-specs div:first-child { border-inline-start: 0; }
  .s3-stage { padding: 16px; } .s3-sheet { padding: 18px; gap: 14px; }
  .s3-row { grid-template-columns: 1fr 1fr; gap: 48px; } .s3-row:nth-child(even) .s3-vis { order: -1; }
  .s3-card { flex-basis: 300px; }
}
@media (min-width: 1200px) { .s3-gal { padding-inline: calc((100vw - 1200px) / 2 + var(--pm-pad)); scroll-padding-inline: calc((100vw - 1200px) / 2 + var(--pm-pad)); } }