.demo-spot{background:#010001 url(https://www.kiito.io/wp-content/uploads/2026/07/hero-desktop-bg-contain.avif) bottom right / contain no-repeat;border:1px solid var(--Secondary);cursor:pointer;display:block;height:460px;overflow:hidden;position:relative;.shot{background:url(https://www.kiito.io/wp-content/uploads/2026/07/spotlight-screenshot-comp.avif) center 0 / 100% auto no-repeat;clip-path:circle(150px at var(--mx, 75%) var(--my, 45%));inset:0;position:absolute}.ring{border:1px solid var(--Accent);border-radius:50%;height:300px;left:var(--mx, 75%);pointer-events:none;position:absolute;top:var(--my, 45%);transform:translate(-50%,-50%);width:300px}.cta-chip{background:var(--Secondary);border:1px solid var(--Accent);bottom:28px;color:#fff;display:flex;flex-direction:column;gap:2px;left:32px;padding:14px 22px;position:absolute;.a{font-size:15px;font-weight:500}.b{color:#9a9a9e;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;i{animation:demo-spot-blink 1.6s ease infinite;color:var(--Accent);font-style:normal}}}@media(max-width:900px){height:340px;.shot{background-size:160% auto}}@media(max-width:600px){height:260px;.shot{background-size:220% auto;clip-path:circle(100px at var(--mx, 75%) var(--my, 45%))}.ring{height:200px;width:200px}.cta-chip{bottom:16px;left:16px}}@media(prefers-reduced-motion:reduce){.cta-chip .b i{animation:none}}}@keyframes demo-spot-blink{50%{opacity:.25}}kiito-flow{--kf-accent: #C000FF;--kf-bg: transparent;--kf-glow: .1;--kf-ink: #0B0B0D;--kf-muted: #6B6A66;--kf-rule: #D9D6CE;background:var(--kf-bg);box-sizing:border-box;color:var(--kf-ink);contain:layout paint;display:block;flex:0 0 100%;font-family:Inter Tight,system-ui,-apple-system,Helvetica,Arial,sans-serif;max-width:100%;min-height:420px;min-width:0;position:relative;width:100%;&:before{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--kf-accent) calc(var(--kf-glow) * 100%),transparent) 0%,color-mix(in srgb,var(--kf-accent) calc(var(--kf-glow) * 40%),transparent) 28%,transparent 65%);content:"";inset:0;pointer-events:none;position:absolute;z-index:0}.stage,canvas,.nodes{inset:0;position:absolute}.stage{overflow:hidden}canvas{display:block;height:100%;width:100%}.nodes{pointer-events:none}.node{align-items:center;background:transparent;border:0;cursor:default;display:flex;font-family:Inter Tight,system-ui,sans-serif;font-size:32px;font-weight:600;height:var(--node-size, 72px);justify-content:center;letter-spacing:-.04em;pointer-events:auto;position:absolute;transform:translate(-50%,-50%);transition:transform .25s ease;-webkit-user-select:none;user-select:none;width:var(--node-size, 72px);&:is(:hover,:focus-visible){transform:translate(-50%,-50%) scale(1.12);z-index:3}&:focus-visible{outline:2px solid var(--kf-accent);outline-offset:4px}.glyph{align-items:center;color:var(--node-color, var(--kf-ink));display:flex;height:100%;justify-content:center;width:100%;img,svg{display:block;height:78%;object-fit:contain;width:78%}&[data-logo]{background-color:var(--node-color, var(--kf-ink));mask-position:center;mask-repeat:no-repeat;mask-size:78% 78%}&[data-logo=google]{mask-image:url(../img/flow/google.svg)}&[data-logo=meta]{mask-image:url(../img/flow/meta.svg)}&[data-logo=tiktok]{mask-image:url(../img/flow/tiktok.svg)}&[data-logo=x]{mask-image:url(../img/flow/x.svg)}&[data-logo=reddit]{mask-image:url(../img/flow/reddit.svg)}&[data-logo=woocommerce]{mask-image:url(../img/flow/woocommerce.svg)}&[data-logo=shopify]{mask-image:url(../img/flow/shopify.svg)}&[data-logo=custom]{mask-image:url(../img/flow/custom.svg)}}.pop{background:var(--kf-ink);color:#fff;font-size:12px;font-weight:400;letter-spacing:-.005em;line-height:1.45;max-width:240px;opacity:0;padding:10px 12px;pointer-events:none;position:absolute;transition:opacity .15s ease;width:max-content;z-index:5;b{display:block;font-size:13px;font-weight:500;margin-bottom:2px}em{color:#9a9a9e;display:block;font-family:JetBrains Mono,ui-monospace,Menlo,monospace;font-size:9px;font-style:normal;letter-spacing:.12em;margin-bottom:6px;text-transform:uppercase}}&:is(:hover,:focus-visible) .pop{opacity:1}}.hub{align-items:center;background:var(--kf-ink);color:#fff;display:flex;flex-direction:column;gap:4px;height:calc(var(--hub-size, 140px) * .62);justify-content:center;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--hub-size, 140px);z-index:2;.wm{align-items:baseline;display:flex;font-family:Inter Tight,system-ui,sans-serif;font-size:30px;font-weight:500;letter-spacing:-.04em;.slash{color:var(--kf-accent);display:inline-block;margin-left:1px;transform:translateY(2px)}}&:before,&:after{animation:kiito-flow-hub-pulse 2.6s ease-out infinite;border:1px solid var(--kf-accent);content:"";opacity:0;position:absolute}&:before{inset:-14px}&:after{animation-delay:1.3s;inset:-28px}}&[paused]{.hub:before,.hub:after{animation-play-state:paused}}@media(prefers-reduced-motion:reduce){.node{transition:none}.hub:before,.hub:after{animation:none;opacity:0}}@media(max-width:520px){min-height:360px}}@keyframes kiito-flow-hub-pulse{0%{opacity:.5;transform:scale(.92)}70%{opacity:0;transform:scale(1.08)}to{opacity:0;transform:scale(1.12)}}.kp2{--kp-accent: var(--Accent, #C000FF);--kp-bg: var(--bg, #F4F3EF);--kp-ink: var(--ink, #0B0B0D);--kp-muted: var(--muted, #6B6A66);--kp-rule: var(--rule, #D9D6CE);--kp-rule-2: var(--rule-2, #C9C5BB);--kp-tile: var(--tile, #FFFFFF);background:var(--kp-tile);border:1px solid var(--kp-rule);display:grid;grid-template-columns:1.05fr 1fr;>:first-child{border-right:1px solid var(--kp-rule);display:flex;flex-direction:column;padding:40px}[data-kp-tiles]{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.tile{appearance:none;align-items:center;background:var(--kp-tile);border:1px solid var(--kp-rule);border-radius:0;color:inherit;cursor:pointer;display:flex;font-family:inherit;min-height:46px;padding:0 16px;position:relative;text-align:left;transition:border-color .15s ease,background .15s ease;text-transform:none;-webkit-user-select:none;user-select:none;width:100%;&:hover{background:var(--kp-bg);border-color:var(--kp-rule-2)}&:focus-visible{outline:2px solid var(--kp-accent);outline-offset:2px}&.is-active{background:var(--kp-bg);border-color:var(--kp-ink);&:after{background:var(--kp-accent);border-radius:50%;content:"";height:5px;position:absolute;right:8px;top:8px;width:5px}}.revenue{color:var(--kp-ink);font-family:Inter Tight,system-ui,sans-serif;font-size:15px;font-variant-numeric:tabular-nums;font-weight:400;letter-spacing:-.02em;line-height:1}}[data-kp-tier]{color:var(--kp-accent);font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;margin-bottom:10px;text-transform:uppercase}[data-kp-price]{align-items:baseline;color:var(--kp-ink);display:flex;font-variant-numeric:tabular-nums;font-weight:300;gap:6px;letter-spacing:-.045em;line-height:.92;.currency{align-self:flex-start;color:var(--kp-muted);font-size:34px;font-weight:400;margin-top:10px}.amount{font-size:clamp(72px,9vw,108px)}.period{color:var(--kp-muted);font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase}.contact{color:var(--kp-ink);font-family:Fraunces,Georgia,serif;font-size:clamp(44px,5.2vw,64px);font-style:italic;font-weight:300;letter-spacing:-.02em;line-height:1}}[data-kp-for]{color:var(--kp-muted);font-size:17px;font-weight:400;letter-spacing:-.01em;line-height:1.35;margin-top:22px;max-width:360px;b{color:var(--kp-ink);font-variant-numeric:tabular-nums;font-weight:500}}@media(max-width:860px){grid-template-columns:1fr;>:first-child{border-bottom:1px solid var(--kp-rule);border-right:0}}@media(max-width:600px){>:first-child{padding:28px 22px}[data-kp-price] .amount{font-size:72px}}}