:root {
  --pim-line: rgba(255, 255, 255, 0.11);
  --pim-ink: #f5f2fb;
  --pim-muted: #aaa5b6;
}

.pim-section { padding-block: 110px; }
.pim-heading { max-width: 760px; margin-inline: auto; text-align: center; }
.pim-heading h2 { margin-top: 16px; color: var(--pim-ink); font-size: clamp(2rem, 4vw, 3.55rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
.pim-heading p { max-width: 680px; margin: 22px auto 0; color: var(--pim-muted); font-size: 1rem; line-height: 1.75; }

#oh-data-flow { background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.035), transparent); }
.pim-flow-panel { max-width: 1040px; margin: 52px auto 0; padding: 10px; border: 1px solid var(--pim-line); border-radius: 28px; background: rgba(11, 9, 17, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
.pim-flow-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; }
.pim-flow-tabs button { min-height: 46px; padding: 9px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--pim-muted); background: transparent; font: inherit; font-size: 0.8rem; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }
.pim-flow-tabs button:hover { color: white; background: rgba(255, 255, 255, 0.035); }
.pim-flow-tabs button[aria-selected="true"] { border-color: rgba(167, 139, 250, 0.35); color: white; background: rgba(124, 58, 237, 0.16); }
.pim-flow-tabs button:focus-visible { outline: 2px solid #b9a2ff; outline-offset: 2px; }
.pim-flow-content { display: grid; min-height: 360px; padding: 42px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 44px; align-items: center; border-radius: 20px; background: radial-gradient(circle at 28% 50%, rgba(124, 58, 237, 0.1), transparent 50%), rgba(17, 14, 24, 0.52); }
.pim-flow-diagram { display: flex; min-width: 0; align-items: center; justify-content: center; }
.pim-flow-node { display: grid; flex: 0 1 128px; min-width: 76px; justify-items: center; gap: 12px; text-align: center; }
.pim-flow-node i { position: relative; display: block; width: 58px; height: 58px; border: 1px solid rgba(167, 139, 250, 0.35); border-radius: 18px; background: linear-gradient(145deg, rgba(124, 58, 237, 0.22), rgba(255, 255, 255, 0.025)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.pim-flow-node i::before, .pim-flow-node i::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.pim-flow-node--device i::before { width: 27px; height: 19px; border: 2px solid #c8b9f8; border-radius: 3px; }
.pim-flow-node--device i::after { width: 17px; height: 2px; margin-top: 14px; background: #c8b9f8; box-shadow: 0 -4px 0 -1px #c8b9f8; }
.pim-flow-node--app i::before { width: 22px; height: 28px; border: 2px solid #c8b9f8; border-radius: 5px; }
.pim-flow-node--file i::before { width: 22px; height: 28px; border: 2px solid #c8b9f8; border-radius: 3px; }
.pim-flow-node--file i::after { width: 10px; height: 2px; background: #c8b9f8; box-shadow: 0 6px 0 #c8b9f8, 0 -6px 0 #c8b9f8; }
.pim-flow-node--lock i::before { width: 20px; height: 17px; margin-top: 6px; border: 2px solid #c8b9f8; border-radius: 4px; }
.pim-flow-node--lock i::after { width: 14px; height: 13px; margin-top: -7px; border: 2px solid #c8b9f8; border-bottom: 0; border-radius: 10px 10px 0 0; }
.pim-flow-node--sync i::before { content: "↻"; color: #c8b9f8; font: 400 32px/1 sans-serif; }
.pim-flow-node--account i::before { width: 16px; height: 16px; margin-top: -8px; border: 2px solid #c8b9f8; border-radius: 50%; }
.pim-flow-node--account i::after { width: 28px; height: 13px; margin-top: 12px; border: 2px solid #c8b9f8; border-bottom: 0; border-radius: 18px 18px 0 0; }
.pim-flow-node--organization i::before { width: 25px; height: 21px; border: 2px solid #c8b9f8; border-radius: 3px; box-shadow: -8px 7px 0 -5px #c8b9f8, 8px 7px 0 -5px #c8b9f8; }
.pim-flow-node strong { color: #d9d3e1; font-size: 0.72rem; font-weight: 550; line-height: 1.35; }
.pim-flow-connector { position: relative; flex: 1 1 60px; min-width: 22px; height: 1px; margin-inline: 4px; background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(167, 139, 250, 0.7), rgba(139, 92, 246, 0.18)); }
.pim-flow-connector::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #a78bfa; border-right: 1px solid #a78bfa; transform: rotate(45deg); }
.pim-flow-explanation { padding-left: 34px; border-left: 1px solid var(--pim-line); }
.pim-flow-explanation > span { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(100, 210, 160, 0.25); border-radius: 999px; color: #79d7ad; background: rgba(49, 151, 103, 0.08); font-size: 0.66rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.pim-flow-explanation h3 { margin-top: 18px; color: white; font-size: 1.35rem; line-height: 1.22; }
.pim-flow-explanation p { margin-top: 15px; color: var(--pim-muted); font-size: 0.85rem; line-height: 1.72; }

@media (max-width: 860px) {
  .pim-flow-content { grid-template-columns: 1fr; }
  .pim-flow-explanation { padding: 28px 0 0; border-top: 1px solid var(--pim-line); border-left: 0; }
}

@media (max-width: 620px) {
  .pim-section { padding-block: 78px; }
  .pim-heading { text-align: left; }
  .pim-flow-panel { margin-top: 36px; padding: 7px; border-radius: 20px; }
  .pim-flow-tabs { overflow-x: auto; }
  .pim-flow-tabs button { min-width: 130px; }
  .pim-flow-content { min-height: 420px; padding: 30px 18px; gap: 30px; }
  .pim-flow-diagram { align-items: stretch; flex-direction: column; gap: 0; }
  .pim-flow-node { display: flex; flex: 0 0 auto; width: 100%; min-height: 58px; align-items: center; gap: 14px; text-align: left; }
  .pim-flow-node i { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; transform: scale(0.78); }
  .pim-flow-connector { width: 1px; min-width: 1px; height: 22px; min-height: 22px; margin-left: 23px; background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), rgba(167, 139, 250, 0.7)); }
  .pim-flow-connector::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pim-flow-tabs button { transition: none !important; }
}