.platform { position: relative; background: var(--ink-950); }
.platform__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: end; }
.platform__head .eyebrow { grid-column: 1 / -1; }
.platform__title { font-size: var(--fs-h1); line-height: 1; max-width: 15ch; letter-spacing: -0.045em; }
.platform__title span { color: var(--accent-soft); }

/* ---- Pinned (desktop) ---- */
.platform--pinned { height: calc(var(--n) * 100vh); height: calc(var(--n) * 100svh); }
.platform__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto 1fr;
  padding-top: calc(104px + env(safe-area-inset-top, 0px));
  overflow: hidden;
}
.platform__sticky::before {
  content: ""; position: absolute; right: -10%; bottom: -30%; width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(34, 195, 230, 0.28), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.platform__progress { position: relative; display: flex; gap: 4px; padding-bottom: 14px; }
.platform__progress button {
  background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.86rem; font-weight: 500; color: var(--on-ink-faint);
  transition: color var(--dur-med), background var(--dur-fast);
}
.platform__progress button:hover { color: var(--on-ink); background: rgba(255, 255, 255, 0.04); }
.platform__progress button.is-on { color: var(--on-ink); }
.platform__bar { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink-line-strong); overflow: hidden; }
.platform__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }

.platform__viewport { position: relative; min-height: 0; display: flex; align-items: center; padding-block: 24px 32px; }
.platform__track { display: flex; flex: none; width: calc(var(--n) * 100%); will-change: transform; }
.platform__slide { width: calc(100% / var(--n)); flex: none; }

/* ---- Product panel ---- */
.pp {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.pp__copy { display: grid; gap: 18px; justify-items: start; }
.pp__tag { color: var(--accent-soft); display: inline-flex; gap: 12px; }
.pp__tag .tabular { color: var(--on-ink-faint); }
.pp__title { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.pp__body { color: var(--on-ink-muted); max-width: 46ch; }
.pp__points { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.pp__points li { display: flex; gap: 10px; align-items: center; color: var(--on-ink); font-size: 0.94rem; }
.pp__points svg { color: var(--closed); flex: none; }
.pp__visual { position: relative; }
.pp__visual::before {
  content: ""; position: absolute; inset: 10% -4% -8% 8%;
  background: radial-gradient(closest-side, rgba(34, 195, 230, 0.35), transparent);
  filter: blur(30px); z-index: -1;
}

/* ---- Stacked (tablet/mobile) ---- */
.platform--stacked { padding-block: var(--section-y); }
.platform__stack { display: grid; gap: clamp(4rem, 10vw, 7rem); margin-top: var(--space-8); }
@media (min-width: 760px) {
  .platform__item.is-flip .pp__copy { order: 2; }
}
@media (max-width: 759px) {
  .platform__head { grid-template-columns: minmax(0, 1fr); }
  .pp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pp__visual { margin-inline: calc(var(--gutter) * -0.25); }
}
@media (min-width: 760px) and (max-width: 1199px) {
  .pp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* ---- Swipe (phone) ---- */
.platform--swipe { padding-block: var(--section-y); }
.swipe__tabs {
  margin-top: 28px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.swipe__tabs::-webkit-scrollbar { display: none; }
.swipe__tabs button {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); color: var(--on-ink-muted); font-size: 0.86rem; font-weight: 550;
  scroll-snap-align: start;
}
.swipe__tabs button.is-on { background: var(--paper-3); color: var(--on-paper); }
.swipe__track {
  margin-top: 24px;
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.swipe__track::-webkit-scrollbar { display: none; }
.swipe__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding-inline: var(--gutter); }
.swipe__slide .pp { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.swipe__slide .pp__visual { order: -1; }
.swipe__dots { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.swipe__dots i { width: 6px; height: 6px; border-radius: 6px; background: var(--ink-line-strong); transition: width var(--dur-med) var(--ease-out), background var(--dur-med); }
.swipe__dots i.is-on { width: 22px; background: var(--accent-soft); }

/* Pinned mode: compact header so the panel fits a laptop viewport */
.platform--pinned .platform__title { font-size: clamp(2rem, 3.3vw, 3.3rem); max-width: 22ch; }
.platform--pinned .platform__sticky { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
.platform--pinned .platform__head { row-gap: 12px; }
@media (max-height: 820px) {
  .platform--pinned .pp__body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .platform--pinned .pp__copy { gap: 14px; }
}

.platform__note { grid-column: 1 / -1; order: 99; font-size: 0.8rem; color: var(--on-ink-faint); }