:root .sig--web-funnel { display: flex; container-type: inline-size; padding: clamp(16px, 3.4cqw, 40px); }
:root .sig--web-funnel svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-funnel .fn { --a: #b07cff; --b: #0f3554; position: relative; flex: 1; display: flex; align-items: center; }
:root .sig--web-funnel .fn__shape { position: absolute; left: -4%; right: -2%; top: 14%; bottom: 8%; width: 106%; height: 78%; }
:root .sig--web-funnel .fn__flow { position: absolute; left: -4%; right: -2%; top: 14%; bottom: 8%; pointer-events: none; }
:root .sig--web-funnel .fn__dot { position: absolute; left: 0; top: var(--y0); width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--lilac); box-shadow: none; opacity: 0; animation: fnDot var(--dur) cubic-bezier(.45, .05, .55, .95) var(--d) infinite; animation-play-state: paused; }
:root .sig--web-funnel .fn__dot.lost { background: #8a8094; box-shadow: none; animation-name: fnLost; }
:root .sig--web-funnel .is-run .fn__dot { animation-play-state: running; }
@keyframes fnDot{ 0% { left: 0; top: var(--y0); opacity: 0; } 8% { opacity: .9; } 55% { top: calc(50% + (var(--y0) - 50%) * .25); } 92% { opacity: .9; } 100% { left: 100%; top: 50%; opacity: 0; } }
@keyframes fnLost{ 0% { left: 0; top: var(--y0); opacity: 0; } 8% { opacity: .6; } 45% { left: 38%; opacity: .5; } 70% { left: 46%; top: calc(var(--y0) * 1.1 - 6%); opacity: 0; } 100% { left: 46%; opacity: 0; } }
:root .sig--web-funnel .fn__row { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 3cqw, 40px); align-items: center; }
:root .sig--web-funnel .fn__st { position: relative; display: grid; gap: 10px; transition: transform .7s var(--ease-out), opacity .5s; opacity: .55; }
:root .sig--web-funnel .fn__st.on { opacity: 1; transform: translateY(-6px); }
:root .sig--web-funnel .fn__st.done { opacity: .85; }
:root .sig--web-funnel .fn__lab { display: flex; align-items: center; gap: 8px; margin: 0; color: #b9b0c2; font: 600 clamp(10px, 1.3cqw, 12px)/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; transition: color .4s; }
:root .sig--web-funnel .fn__lab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3e3746; transition: background .4s, box-shadow .4s; }
:root .sig--web-funnel .on .fn__lab { color: #fff; }
:root .sig--web-funnel .on .fn__lab::before { background: var(--v); box-shadow: 0 0 0 4px rgba(161, 0, 255, .25); }
:root .sig--web-funnel .done .fn__lab::before { background: var(--lilac); }
:root .sig--web-funnel .fn__card { position: relative; min-height: clamp(190px, 25cqw, 290px); padding: clamp(10px, 1.6cqw, 16px); border-radius: 16px; background: #fff; color: #1f1c24; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .9); transition: box-shadow .5s, transform .5s var(--ease-out); overflow: hidden; }
:root .sig--web-funnel .on .fn__card { box-shadow: 0 0 0 2px var(--v), 0 30px 60px -24px rgba(161, 0, 255, .6); }
:root .sig--web-funnel .fn__beam { position: absolute; left: 0; top: 0; z-index: 3; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(227, 184, 255, .35); opacity: 0; pointer-events: none; }
:root .sig--web-funnel .fn__ad { display: flex; flex-direction: column; justify-content: center; transition: transform .2s; }
:root .sig--web-funnel .fn__ad.tap { transform: scale(.96); }
:root .sig--web-funnel .fn__g { display: grid; gap: 7px; }
:root .sig--web-funnel .fn__gq { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #f1f3f4; color: #3c4043; font: 400 clamp(10px, 1.3cqw, 12px)/1.2 var(--f-body); white-space: nowrap; overflow: hidden; }
:root .sig--web-funnel .fn__g small { color: #4d5156; font: 400 11px/1.2 var(--f-body); }
:root .sig--web-funnel .fn__g small b { color: #202124; }
:root .sig--web-funnel .fn__g strong { color: #1a0dab; font: 500 clamp(12px, 1.7cqw, 15px)/1.25 var(--f-body); }
:root .sig--web-funnel .fn__g i, :root .sig--web-funnel .fn__lp li i { height: 6px; border-radius: 3px; background: #eceef0; }
:root .sig--web-funnel .fn__g i + i { width: 70%; }
:root .sig--web-funnel .fn__so { display: grid; gap: 8px; }
:root .sig--web-funnel .fn__sh { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; }
:root .sig--web-funnel .fn__sh i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
:root .sig--web-funnel .fn__sh b { font: 600 11.5px/1.1 var(--f-display); }
:root .sig--web-funnel .fn__sh small { color: #6a6470; font-size: 10px; }
:root .sig--web-funnel .fn__si { display: grid; place-items: end start; aspect-ratio: 1 / .8; padding: 10px; border-radius: 10px; background: radial-gradient(80% 80% at 80% 20%, color-mix(in srgb, var(--a) 80%, #fff), transparent 60%), linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
:root .sig--web-funnel .fn__si b { font: 700 clamp(13px, 2cqw, 18px)/1.05 var(--f-display); letter-spacing: -.04em; }
:root .sig--web-funnel .fn__sa { display: flex; align-items: center; gap: 8px; color: #d6455d; font-size: 14px; }
:root .sig--web-funnel .fn__sa i { flex: 1; }
:root .sig--web-funnel .fn__sa em { padding: 5px 9px; border-radius: 6px; background: #f1eff4; color: #222; font: 600 10px/1 var(--f-display); font-style: normal; }
:root .sig--web-funnel .fn__po { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; min-height: inherit; margin: calc(-1 * clamp(10px, 1.6cqw, 16px)); padding: clamp(12px, 2cqw, 18px); background: linear-gradient(160deg, var(--a), var(--b)); color: #fff; }
:root .sig--web-funnel .fn__po b { font: 800 clamp(16px, 2.6cqw, 26px)/.98 var(--f-display); letter-spacing: -.05em; }
:root .sig--web-funnel .fn__po small { color: color-mix(in srgb, var(--a) 25%, #fff); font: 400 11px/1.3 var(--f-body); }
:root .sig--web-funnel .fn__qr { position: absolute; right: 12px; bottom: 12px; width: clamp(40px, 6cqw, 58px); height: auto; }
:root .sig--web-funnel .fn__lp { display: flex; flex-direction: column; gap: 8px; }
:root .sig--web-funnel .fn__lph { padding: 10px; border-radius: 10px; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
:root .sig--web-funnel .fn__lpt { display: block; min-height: 1.1em; font: 700 clamp(12px, 1.8cqw, 16px)/1.08 var(--f-display); letter-spacing: -.035em; }
:root .sig--web-funnel .fn__lps { display: block; margin-top: 5px; color: color-mix(in srgb, var(--a) 25%, #fff); font: 400 10px/1.3 var(--f-body); opacity: 0; transition: opacity .5s; }
:root .sig--web-funnel .fn__lpi { height: clamp(30px, 6cqw, 64px); border-radius: 8px; background: linear-gradient(180deg, #fff3da, color-mix(in srgb, var(--a) 35%, #fff)); opacity: 0; transform: scale(.96); transition: opacity .5s .1s, transform .7s .1s var(--ease-out); }
:root .sig--web-funnel .fn__lp ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
:root .sig--web-funnel .fn__lp li { display: flex; align-items: center; gap: 6px; color: var(--b); font-size: 12px; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--ease-out); }
:root .sig--web-funnel .fn__lp li i { flex: 1; }
:root .sig--web-funnel .fn__lp li:nth-child(2) i { flex: .7; }
:root .sig--web-funnel .fn__lp li:nth-child(3) i { flex: .85; }
:root .sig--web-funnel .fn__lp li:nth-child(2) { transition-delay: .15s; }
:root .sig--web-funnel .fn__lp li:nth-child(3) { transition-delay: .3s; }
:root .sig--web-funnel .fn__lpb { align-self: flex-start; margin-top: auto; padding: 7px 11px; border-radius: 999px; background: var(--b); color: #fff; font: 600 clamp(9.5px, 1.2cqw, 11px)/1 var(--f-display); opacity: 0; transition: opacity .5s .45s; white-space: nowrap; }
:root .sig--web-funnel .full .fn__lps, :root .sig--web-funnel .full .fn__lpi, :root .sig--web-funnel .full li, :root .sig--web-funnel .full .fn__lpb { opacity: 1; transform: none; }
:root .sig--web-funnel .fn__goal { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
:root .sig--web-funnel .fn__f { display: grid; gap: 4px; }
:root .sig--web-funnel .fn__f small { color: #6a6470; font: 500 10px/1 var(--f-display); }
:root .sig--web-funnel .fn__in { height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid #e0dbe5; color: #1f1c24; font: 400 11.5px/28px var(--f-body); font-style: normal; white-space: nowrap; overflow: hidden; }
:root .sig--web-funnel .fn__go { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border-radius: 10px; background: var(--v); color: #fff; font: 600 clamp(10px, 1.3cqw, 12px)/1 var(--f-display); box-shadow: 0 12px 24px -12px rgba(161, 0, 255, .9); transition: transform .15s; white-space: nowrap; }
:root .sig--web-funnel .fn__go.press { transform: scale(.94); }
:root .sig--web-funnel .fn__go.press::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--v); animation: fnRing .7s ease-out forwards; }
@keyframes fnRing{ to { transform: scale(1.25, 1.6); opacity: 0; } }
:root .sig--web-funnel .on .fn__go:not(.press) { animation: fnPulse 1.6s ease-in-out infinite; }
@keyframes fnPulse{ 50% { box-shadow: 0 0 0 6px rgba(161, 0, 255, .2), 0 12px 24px -12px rgba(161, 0, 255, .9); } }
:root .sig--web-funnel .fn__in-box { display: flex; flex-direction: column; justify-content: center; gap: 10px; background: #f6f3f9; }
:root .sig--web-funnel .fn__note { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #1b1b1b; color: #fff; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .35s, transform .7s var(--ease-out); }
:root .sig--web-funnel .fn__note.on { opacity: 1; transform: none; }
:root .sig--web-funnel .fn__note > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--v); font-size: 15px; }
:root .sig--web-funnel .fn__note b { display: block; font: 600 clamp(10.5px, 1.4cqw, 12.5px)/1.2 var(--f-display); }
:root .sig--web-funnel .fn__note small { color: #cfc8d6; font-size: 10.5px; line-height: 1.3; }
:root .sig--web-funnel .fn__call { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: #fff; color: #3a3340; font: 500 11px/1.2 var(--f-display); opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--ease-out); }
:root .sig--web-funnel .fn__call svg { color: #2f9e5b; font-size: 14px; }
:root .sig--web-funnel .fn__call.on { opacity: 1; transform: none; }
@container (max-width: 680px){:root .sig--web-funnel .fn__row { grid-template-columns: 1fr 1fr; row-gap: 18px; }
:root .sig--web-funnel .fn__shape, :root .sig--web-funnel .fn__flow { display: none; }
:root .sig--web-funnel .fn__card { min-height: 170px; }
:root .sig--web-funnel .fn__st { opacity: .75; }

}
:root .sig--web-funnel .fn__shape, :root .sig--web-funnel .fn__qr { stroke: none; }
:root .sig--web-funnel .fn__st, :root .sig--web-funnel .fn__st.done { opacity: 1; }
:root .sig--web-funnel .fn__card { transition: box-shadow .5s, transform .5s var(--ease-out), filter .6s; }
:root .sig--web-funnel .fn__st:not(.on):not(.done) .fn__card { filter: grayscale(.7) brightness(.5); }
:root .sig--web-funnel .fn__st.done .fn__card { filter: brightness(.82); }
:root .sig--web-funnel { text-align: left; }