@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

.roseflow-process {
  --rf-violet: #9582c3;
  --rf-orchid: #dc4ff5;
  --rf-deep-violet: #54498b;
  --rf-pink: #fc90e4;
  --rf-coral: #f6895e;
  --rf-lavender: #e0d9fa;
  --rf-background: #1a0a3a;
  --rf-surface: rgba(39, 49, 58, .36);
  --rf-text: #f9f5ff;
  --rf-muted: #d8cff0;
  --rf-dot: #e0d9fa;
  --rf-halo: rgba(220, 79, 245, .2);
  --rf-agent-base-glow: rgba(84, 73, 139, .72);
  --rf-glass-top: rgba(255, 255, 255, .07);
  --rf-glass-bottom: rgba(149, 130, 195, .035);
  --rf-glass-border: rgba(255, 255, 255, .14);
  --rf-glass-highlight: rgba(255, 255, 255, .22);
  --rf-glass-shadow: rgba(0, 0, 0, .28);
  --rf-endpoint-label-gap: 1rem;
  --rf-endpoint-size: .62rem;
  --rf-endpoint-label-offset: calc(var(--rf-endpoint-label-gap) + .31rem);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(570px, 68svh);
  margin-top: -1px;
  padding: clamp(2.8rem, 5vw, 4.4rem) clamp(1.25rem, 5vw, 5rem) 2.3rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: var(--rf-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 50%, var(--rf-halo), transparent 26%),
    var(--rf-background);
}

body.light-theme .roseflow-process {
  --rf-background: #fff8fe;
  --rf-surface: rgba(255, 255, 255, .62);
  --rf-text: #1a0a3a;
  --rf-muted: #605679;
  --rf-dot: #9582c3;
  --rf-halo: rgba(220, 79, 245, .17);
  --rf-agent-base-glow: rgba(246, 94, 216, .42);
  --rf-glass-top: rgba(255, 255, 255, .34);
  --rf-glass-bottom: rgba(224, 217, 250, .14);
  --rf-glass-border: rgba(255, 255, 255, .56);
  --rf-glass-highlight: rgba(255, 255, 255, .72);
  --rf-glass-shadow: rgba(84, 73, 139, .12);
  background:
    radial-gradient(circle at 50% 50%, var(--rf-halo), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(251, 232, 200, .24), transparent 27%),
    var(--rf-background);
}

.roseflow-process *,
.roseflow-process *::before,
.roseflow-process *::after { box-sizing: border-box; }

.rf-intro { position: relative; z-index: 2; max-width: 650px; text-align: center; }
.rf-intro p { max-width: none; margin-inline: 0; }
.rf-eyebrow { margin: 0 0 .85rem; color: var(--rf-orchid); font-size: .73rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.rf-intro h2 { margin: 0; font-family: Poppins, Inter, sans-serif; font-size: clamp(2.15rem, 4.5vw, 4.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.rf-intro > p:last-child { margin: .65rem 0 0; color: var(--rf-muted); font-size: clamp(.95rem, 1.25vw, 1.08rem); font-weight: 400; }

.rf-constellation { position: relative; z-index: 1; width: min(1160px, 100%); height: clamp(265px, 26vw, 340px); margin-top: clamp(1.35rem, 2.8vw, 2.2rem); }
.rf-constellation::before { content: ""; position: absolute; inset: 18% 35%; border-radius: 50%; background: radial-gradient(circle, rgba(251, 232, 200, .22), transparent 68%); filter: blur(13px); }
.rf-branch-label { position: absolute; z-index: 4; top: -.45rem; margin: 0; color: var(--rf-text); font-family: Poppins, Inter, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rf-branch-label span { display: block; width: fit-content; margin-top: .35rem; padding: .28rem .52rem; border: 1px solid currentColor; border-radius: 999px; color: var(--rf-muted); font-family: Inter, sans-serif; font-size: .55rem; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.rf-branch-label--left { left: 2%; text-align: left; }
.rf-branch-label--right { right: 2%; text-align: right; }
.rf-branch-label--left { color: #fff; text-shadow: 0 0 18px rgba(220, 79, 245, .42); }
.rf-branch-label--left span { color: var(--rf-pink); background: rgba(220, 79, 245, .13); box-shadow: 0 0 18px rgba(220, 79, 245, .16); }
.rf-branch-label--right { color: color-mix(in srgb, var(--rf-muted) 74%, transparent); }
.rf-branch-label--right span { margin-left: auto; color: color-mix(in srgb, var(--rf-muted) 66%, transparent); background: transparent; }
.rf-network { width: 100%; height: 100%; overflow: visible; }
.rf-network path { fill: none; stroke: url(#roseflowLineGradient); stroke-width: 1.5; stroke-opacity: .88; vector-effect: non-scaling-stroke; }
.rf-network .rf-active-line { stroke-width: 1.7; }
.rf-network .rf-live-line { stroke-width: 2; stroke-opacity: 1; filter: drop-shadow(0 0 4px rgba(220, 79, 245, .55)); }
.rf-network .rf-soon-line { stroke: var(--rf-muted); stroke-width: 1; stroke-opacity: .28; filter: none; }

.rf-endpoint { position: absolute; z-index: 2; width: var(--rf-endpoint-size); height: var(--rf-endpoint-size); border: 1.35px solid var(--rf-dot); border-radius: 50%; background: var(--rf-background); transform: translate(-50%, -50%); }
.rf-endpoint--live { width: .78rem; height: .78rem; border: 2px solid #fc90e4; background: linear-gradient(135deg, #f65ed8, #dc4ff5); box-shadow: 0 0 0 5px rgba(220, 79, 245, .12), 0 0 22px rgba(220, 79, 245, .8); }
.rf-endpoint--soon { border-color: color-mix(in srgb, var(--rf-muted) 48%, transparent); background: transparent; opacity: .58; }
.rf-endpoint--left-top, .rf-endpoint--left-bottom { left: 15%; }
.rf-endpoint--left-middle { left: 15%; }
.rf-endpoint--right-top, .rf-endpoint--right-bottom { left: 85%; }
.rf-endpoint--right-middle { left: 85%; }
.rf-endpoint--left-top, .rf-endpoint--right-top { top: 19.565%; }
.rf-endpoint--left-middle, .rf-endpoint--right-middle { top: 48.913%; }
.rf-endpoint--left-bottom, .rf-endpoint--right-bottom { top: 81.522%; }

.rf-person { position: absolute; left: 50%; top: 49%; width: clamp(126px, 13.5vw, 172px); aspect-ratio: 2 / 3; transform: translate(-50%, -50%); }
.rf-person::before { content: ""; position: absolute; inset: 16% -18%; background: radial-gradient(circle, rgba(220, 79, 245, .26), transparent 64%); filter: blur(20px); }
.rf-person::after { content: ""; position: absolute; z-index: 2; left: -22%; right: -22%; bottom: -5%; height: 26%; background: radial-gradient(ellipse at center, var(--rf-agent-base-glow) 0%, color-mix(in srgb, var(--rf-agent-base-glow) 58%, transparent) 38%, transparent 74%); filter: blur(7px); pointer-events: none; }
.rf-energy-agent { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.82) 87%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,.82) 87%, transparent 100%); }
.rf-person-label { position: absolute; z-index: 3; top: 57%; left: 50%; transform: translate(-50%, -50%); width: max-content; padding: .28rem .45rem; border: 1px solid rgba(251, 232, 200, .36); border-radius: 999px; background: rgba(26, 10, 58, .34); backdrop-filter: blur(6px); color: #fff; font-family: Poppins, Inter, sans-serif; font-size: clamp(.56rem, .7vw, .7rem); font-weight: 600; letter-spacing: .02em; line-height: 1.3; text-align: center; }

.rf-branch { position: absolute; inset: 0; pointer-events: none; }
.rf-branch--left { filter: saturate(1.16); }
.rf-branch--right { opacity: .56; filter: saturate(.58); }
.rf-node-number { margin-right: .22rem; color: var(--rf-orchid); font-family: Inter, sans-serif; font-size: .7em; letter-spacing: .04em; }
body.light-theme .rf-branch-label--left { color: #1a0a3a; }
body.light-theme .rf-branch-label--left span { color: #54498b; background: rgba(149, 130, 195, .12); }

/* Interactive endpoints: labels at rest, anchored capability cards on demand. */
.rf-node { position: absolute; z-index: 4; width: 34px; height: 34px; color: var(--rf-muted); cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); transition: opacity .24s ease, filter .24s ease; }
.rf-node--top { top: 19.565%; }
.rf-node--middle { top: 48.913%; }
.rf-node--bottom { top: 81.522%; }
.rf-branch--left .rf-node { left: 15%; }
.rf-branch--right .rf-node { left: 85%; }

.rf-node-trigger {
  position: absolute;
  z-index: 7;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  width: max-content;
  max-width: 165px;
  padding: .38rem .52rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--rf-text);
  background: transparent;
  font: 600 clamp(.76rem, 1.08vw, .94rem)/1.08 Poppins, Inter, sans-serif;
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.rf-branch--left .rf-node-trigger { right: calc(50% + var(--rf-endpoint-label-offset)); justify-content: flex-end; text-align: right; }
.rf-branch--right .rf-node-trigger { left: calc(50% + var(--rf-endpoint-label-offset)); color: var(--rf-muted); }
.rf-node-trigger:hover, .rf-node-trigger:focus-visible, .rf-node.is-active .rf-node-trigger { border-color: rgba(252, 144, 228, .48); background: rgba(220, 79, 245, .1); box-shadow: 0 0 20px rgba(220, 79, 245, .13); color: var(--rf-text); outline: none; }
.rf-branch--right .rf-node-trigger:hover, .rf-branch--right .rf-node-trigger:focus-visible, .rf-branch--right .rf-node.is-active .rf-node-trigger { border-color: color-mix(in srgb, var(--rf-muted) 55%, transparent); background: color-mix(in srgb, var(--rf-surface) 80%, transparent); }

.rf-node-details {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: grid;
  gap: .42rem;
  width: 174px;
  padding: .75rem .82rem;
  border: 1px solid var(--rf-glass-border);
  border-radius: 13px;
  color: var(--rf-text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--rf-background) 78%, transparent), var(--rf-surface));
  box-shadow: inset 0 1px 0 var(--rf-glass-highlight), 0 16px 38px var(--rf-glass-shadow), 0 0 24px rgba(220,79,245,.09);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.rf-branch--left .rf-node-details { left: calc(50% + var(--rf-endpoint-label-offset) + .15rem); transform: translate(9px, -50%); }
.rf-branch--right .rf-node-details { right: calc(50% + var(--rf-endpoint-label-offset) + .15rem); transform: translate(-9px, -50%); }
.rf-node--top .rf-node-details { top: calc(50% - .4rem); }
.rf-node--bottom .rf-node-details { top: calc(50% + .4rem); }
.rf-node-details span { position: relative; display: block; padding-left: .8rem; color: var(--rf-muted); font-size: .69rem; font-weight: 600; line-height: 1.3; white-space: normal; }
.rf-node-details span { left: auto !important; top: auto !important; }
.rf-node-details span::before { position: absolute; left: 0; top: .42em; width: .34rem; height: .34rem; border-radius: 50%; background: var(--rf-pink); box-shadow: 0 0 0 3px rgba(220,79,245,.1); content: ""; }
.rf-branch--right .rf-node-details span::before { border: 1px solid var(--rf-muted); background: transparent; box-shadow: none; }
.rf-node:hover .rf-node-details,
.rf-node:focus-within .rf-node-details,
.rf-node-trigger:hover + .rf-node-details,
.rf-node-trigger:focus-visible + .rf-node-details,
.rf-node.is-preview .rf-node-details,
.rf-node.is-open .rf-node-details {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.rf-branch--left .rf-node:hover .rf-node-details,
.rf-branch--left .rf-node:focus-within .rf-node-details,
.rf-branch--left .rf-node-trigger:hover + .rf-node-details,
.rf-branch--left .rf-node-trigger:focus-visible + .rf-node-details,
.rf-branch--left .rf-node.is-preview .rf-node-details,
.rf-branch--left .rf-node.is-open .rf-node-details { transform: translate(0, -50%) !important; }
.rf-branch--right .rf-node:hover .rf-node-details,
.rf-branch--right .rf-node:focus-within .rf-node-details,
.rf-branch--right .rf-node-trigger:hover + .rf-node-details,
.rf-branch--right .rf-node-trigger:focus-visible + .rf-node-details,
.rf-branch--right .rf-node.is-preview .rf-node-details,
.rf-branch--right .rf-node.is-open .rf-node-details { transform: translate(0, -50%) !important; }

.rf-constellation.has-focus .rf-network path { stroke-opacity: .1; filter: none; }
.rf-constellation.has-focus .rf-network path.is-focused { stroke: url(#roseflowLineGradient); stroke-width: 2.7; stroke-opacity: 1; filter: drop-shadow(0 0 6px rgba(220,79,245,.72)); }
.roseflow-process.is-visible .rf-constellation.has-focus .rf-endpoint { opacity: .2; }
.roseflow-process.is-visible .rf-constellation.has-focus .rf-endpoint.is-focused { opacity: 1; }
.roseflow-process.is-visible .rf-constellation.has-focus .rf-person { opacity: .68; filter: blur(0) brightness(.86); }
.roseflow-process.is-visible .rf-constellation.has-focus .rf-branch { opacity: .22; filter: saturate(.45); }
.roseflow-process.is-visible .rf-constellation.has-focus .rf-branch.is-focused { opacity: 1; filter: saturate(1); }
.rf-constellation.has-focus .rf-branch.is-focused .rf-node { opacity: .28; }
.rf-constellation.has-focus .rf-branch.is-focused .rf-node.is-active { opacity: 1; }

.rf-support { position: relative; z-index: 2; max-width: 440px; margin: -.1rem auto 0; color: var(--rf-muted); font-size: clamp(.92rem, 1.2vw, 1.04rem); text-align: center; }
.rf-support > strong { display: block; color: var(--rf-text); font-weight: 650; }
.rf-gradient-word { color: transparent; background: linear-gradient(90deg, var(--rf-violet), var(--rf-orchid), var(--rf-coral)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.rf-roadmap-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; max-width: min(100%, 390px); margin-top: .75rem; padding: .76rem 1.22rem; border: 1px solid var(--rf-glass-border); border-radius: 999px; background: linear-gradient(145deg, var(--rf-glass-top), var(--rf-glass-bottom)); box-shadow: inset 0 1px 0 var(--rf-glass-highlight), 0 8px 24px var(--rf-glass-shadow); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); color: var(--rf-text); font-size: clamp(.72rem, 1vw, .84rem); font-weight: 500; line-height: 1.3; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.rf-roadmap-cta::before { content: ""; position: absolute; z-index: -1; inset: 1px 14% auto; height: 34%; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,.12), transparent); filter: blur(2px); }
.rf-roadmap-cta:hover { border-color: rgba(255,255,255,.52); background: linear-gradient(105deg, var(--rf-violet) 0%, var(--rf-orchid) 48%, var(--rf-coral) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 16px 38px rgba(220,79,245,.28), 0 0 28px rgba(246,137,94,.18); text-shadow: 0 1px 8px rgba(26,10,58,.3); transform: translateY(-2px); }
.rf-roadmap-cta:focus-visible { outline: 2px solid var(--rf-orchid); outline-offset: 3px; }

.roseflow-process .rf-person { opacity: 0; filter: blur(7px) brightness(1.12); transform: translate(-50%, -50%) scale(.88); transition: opacity .82s cubic-bezier(.16,1,.3,1), filter .92s cubic-bezier(.16,1,.3,1), transform .92s cubic-bezier(.16,1,.3,1); }
.roseflow-process .rf-endpoint, .roseflow-process .rf-branch, .roseflow-process .rf-branch-label, .roseflow-process .rf-eyebrow, .roseflow-process .rf-intro h2, .roseflow-process .rf-intro > p:last-child, .roseflow-process .rf-support { opacity: 0; filter: blur(5px); transform: translateY(7px); transition: opacity .82s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.roseflow-process .rf-network path { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .55s ease, stroke-dashoffset 1.15s cubic-bezier(.16,1,.3,1); }
.roseflow-process .rf-network .rf-soon-line { stroke-dasharray: .035 .026; }
.roseflow-process.is-visible .rf-person { opacity: 1; filter: blur(0) brightness(1); transform: translate(-50%, -50%) scale(1); }
.roseflow-process.is-visible .rf-eyebrow { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .08s; }
.roseflow-process.is-visible .rf-intro h2 { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .14s; }
.roseflow-process.is-visible .rf-intro > p:last-child { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .23s; }
.roseflow-process.is-visible .rf-network path { opacity: 1; stroke-dashoffset: 0; transition-delay: .2s; }
.roseflow-process.is-visible .rf-endpoint { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); transition-delay: .36s; }
.roseflow-process.is-visible .rf-branch { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .42s; }
.roseflow-process.is-visible .rf-branch--left { filter: saturate(1.16); }
.roseflow-process.is-visible .rf-branch--right { opacity: .56; filter: saturate(.58); }
.roseflow-process.is-visible .rf-endpoint--soon { opacity: .58; }
.roseflow-process.is-visible .rf-endpoint--live { animation: rf-live-node-pulse 2.8s ease-in-out infinite .8s; }
.roseflow-process.is-visible .rf-branch-label { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .42s; }
.roseflow-process.is-visible .rf-support { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .58s; }

@keyframes rf-live-node-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(220, 79, 245, .12), 0 0 18px rgba(220, 79, 245, .62); }
  50% { box-shadow: 0 0 0 8px rgba(220, 79, 245, .06), 0 0 28px rgba(220, 79, 245, .95); }
}

@media (max-width: 700px) {
  .roseflow-process { min-height: 720px; padding-top: 3.4rem; padding-bottom: 2.2rem; }
  .rf-constellation { height: 430px; margin-top: 1.25rem; }
  .rf-person { width: 130px; top: 48%; }
  .rf-network { opacity: .76; }
  .rf-node-trigger { max-width: 116px; font-size: .7rem; }
  .rf-node-details { width: 150px; padding: .65rem .72rem; }
  .rf-node-details span { font-size: .61rem; }
  .rf-branch-label { top: -.2rem; }
}

@media (max-width: 480px) {
  .roseflow-process { min-height: 690px; padding-inline: .8rem; }
  .rf-intro { padding-inline: .65rem; }
  .rf-constellation { width: 106%; height: 400px; }
  .rf-network { transform: scaleX(.72); transform-origin: center; }
  .rf-person { width: 112px; }
  .rf-branch-label { top: .2rem; max-width: 7rem; }
  .rf-endpoint--left-top, .rf-endpoint--left-middle, .rf-endpoint--left-bottom, .rf-branch--left .rf-node { left: 25%; }
  .rf-endpoint--right-top, .rf-endpoint--right-middle, .rf-endpoint--right-bottom, .rf-branch--right .rf-node { left: 75%; }
  .rf-node-trigger { max-width: 5.2rem; padding: .32rem .38rem; font-size: .61rem; }
  .rf-node-number { font-size: .62em; }
  .rf-node-details { width: min(145px, 42vw); }
  .rf-branch--left .rf-node-trigger { right: calc(50% + .72rem); }
  .rf-branch--right .rf-node-trigger { left: calc(50% + .72rem); }
  .rf-branch--left .rf-node-details { left: calc(50% + .72rem); }
  .rf-branch--right .rf-node-details { right: calc(50% + .72rem); }
  .rf-support { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .roseflow-process * { transition: none !important; }
  .roseflow-process .rf-endpoint--live { animation: none !important; }
}