/* Layout concept: one screen, no scroll. Conversation left, living build-stage right. Phones: stage slides in from the side at the bottom ("side") or sits as a top band ("band"). */ :root{ --ink:#04100f; --ink-2:#071715; --glass:#0b2e2b; --line:rgba(255,255,255,.12); --line-2:rgba(127,230,221,.22); --fg:#eaf6f3; --muted:#91b3ad; --faint:#5f7d78; --teal:#15ACA3; --teal-2:#129189; --teal-3:#3c9fa7; --mint:#7fe6dd; --coral:#e62415; --ok:#39e58c; --accent:#15ACA3; --accent-hi:#7fe6dd; /* re-themed per service by flow.js */ --fdisp:"Poppins","Segoe UI",system-ui,sans-serif; --fbody:"Inter",system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); color-scheme:dark; } .app,.app *,.cf-rek,.cf-rek *{box-sizing:border-box} .app{background:var(--ink);color:var(--fg);font-family:var(--fbody);-webkit-font-smoothing:antialiased} .app button{font:inherit;color:inherit} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .app{height:calc(calc(var(--cf-vh,1svh)*100) - var(--cf-off,0px));min-height:520px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);overflow:hidden;position:relative} /* ---------- left: conversation ---------- */ .cf-left{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(16px,3vw,40px);padding-top:max(clamp(16px,3vw,32px),env(safe-area-inset-top,0px));transition:opacity .6s var(--ease)} .app.finale-dim .cf-left{opacity:.35} .cf-top{display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{font-family:var(--fdisp);font-weight:700;font-size:20px;letter-spacing:-.01em} .logo b{color:var(--teal)} .progress{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:12px;letter-spacing:.04em} .progress svg{width:112px;height:28px;overflow:visible} .progress .base{stroke:rgba(255,255,255,.12);stroke-width:1.5;fill:none} .progress .val{stroke:var(--accent-hi);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:d .7s var(--ease)} .progress .tipdot{fill:var(--accent-hi);transition:cx .7s var(--ease),cy .7s var(--ease)} .progress .lbl{min-width:84px;text-align:right} .convo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:620px;min-height:0} .eyebrow{font-family:var(--fdisp);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-hi);min-height:1em} .q{font-family:var(--fdisp);font-weight:600;font-size:clamp(26px,3.2vw,42px);line-height:1.14;letter-spacing:-.012em;margin:0;text-wrap:balance;outline:none;min-height:1.14em} .caret{display:inline-block;width:.55ch;margin-left:2px;color:var(--accent-hi);animation:blink 1s step-end infinite} @keyframes blink{50%{opacity:0}} .sub{margin:-4px 0 0;color:var(--muted);font-size:15.5px;line-height:1.5;max-width:52ch;min-height:1.5em} .answer{display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .answer.show{opacity:1;transform:none} /* chips (radio group) */ .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .chips.one{grid-template-columns:minmax(0,1fr)} .chips.three{grid-template-columns:repeat(3,minmax(0,1fr))} .chip{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:14px;border:1px solid var(--line); background:rgba(255,255,255,.025);cursor:pointer;text-align:left;font-family:var(--fdisp);font-weight:500;font-size:15.5px; transition:border-color .2s,background .2s,transform .2s var(--ease)} .chip:hover,.chip:focus-visible{border-color:var(--accent);background:rgba(21,172,163,.09);outline:none} .chip:focus-visible{box-shadow:0 0 0 3px rgba(127,230,221,.35)} .chip[aria-checked="true"]{border-color:var(--accent-hi);background:rgba(127,230,221,.12)} .chip:active{transform:scale(.98)} .chip .ic{flex:0 0 30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(21,172,163,.13);border:1px solid rgba(21,172,163,.3);color:var(--mint)} .chip .ic svg{width:17px;height:17px} .chip.wide{grid-column:1/-1} /* text fields */ .field{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--line);padding-bottom:8px;transition:border-color .25s} .field:focus-within{border-color:var(--accent)} .field.ok{border-color:var(--ok)} .field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fg);font-family:var(--fdisp);font-weight:500;font-size:clamp(20px,2.4vw,28px)} .field input::placeholder{color:rgba(145,179,173,.42)} .field .check{color:var(--ok);font-size:20px;opacity:0;transform:scale(.6);transition:all .25s var(--ease)} .field.ok .check{opacity:1;transform:none} .go{flex:0 0 auto;height:50px;padding:0 20px;border-radius:12px;border:0;cursor:pointer;background:linear-gradient(120deg,var(--teal),var(--teal-3));color:#03110f;font-family:var(--fdisp);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 28px -12px rgba(21,172,163,.6);transition:transform .2s var(--ease),filter .2s} .go:hover{transform:translateY(-1px);filter:brightness(1.06)} .go:focus-visible{outline:3px solid rgba(127,230,221,.5);outline-offset:2px} .go.round{width:50px;padding:0;justify-content:center;font-size:20px} .err{color:#ff8a7a;font-size:13.5px;min-height:1.2em} .typo{font-size:13.5px;color:var(--muted)} .typo button{background:none;border:0;color:var(--mint);text-decoration:underline;cursor:pointer;padding:0} .reassure{color:var(--muted);font-size:13.5px;line-height:1.5} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .link{background:none;border:0;padding:4px 0;color:var(--muted);cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:4px} .link:hover{color:var(--mint)} /* proof chip (count-up stat) */ .proof{min-height:34px} .pchip{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 9px;border-radius:999px;border:1px solid var(--line-2);background:rgba(11,46,43,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13.5px;color:#d9efeb;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px) scale(.97);transition:opacity .4s var(--ease),transform .5s var(--ease)} .pchip.in{opacity:1;transform:none} .pchip .pd{flex:0 0 8px;width:8px;height:8px;min-width:8px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 10px var(--accent-hi)} .pchip b{font-weight:600;color:#fff} .pchip.guarantee{border-color:rgba(127,230,221,.45)} .pchip .terms{color:var(--faint);font-size:12px;border-bottom:1px dotted var(--faint);cursor:help;margin-left:2px} .cf-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;color:var(--faint);font-size:12.5px} .back{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px 0;font-size:13.5px;visibility:hidden} .back.on{visibility:visible} .back:hover{color:var(--mint)} /* details card + thank-you */ .cards{display:grid;gap:10px} .dline{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)} .dline .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(21,172,163,.13);color:var(--mint);flex:0 0 auto} .dline .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .dline .v{font-size:16.5px;user-select:all} .dline .act{margin-left:auto;display:flex;gap:6px} .mini{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:12.5px;cursor:pointer;color:var(--fg);text-decoration:none} .mini:hover{border-color:var(--accent)} .next{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:#cfe3df;font-size:14.5px} .next li{display:flex;gap:10px} .next span{color:var(--accent-hi);font-family:var(--fdisp);font-weight:600} .cta-big{height:56px;padding:0 24px;font-size:16px} /* done step: "Pick a 20-min call slot" in the CRO-page orange. The label sits on #C2511A (white 4.7:1, AA for 16px text); #E76A28 is the top highlight + glow */ .app .go.cf-book{background:linear-gradient(180deg,#E76A28 0,#C2511A 30%,#C2511A 100%);color:#fff;font-weight:700;box-shadow:0 6px 22px rgba(231,106,40,.38),inset 0 1px 0 rgba(255,178,122,.45)} .app .go.cf-book:hover{background:#B84C17;filter:none;box-shadow:0 8px 28px rgba(231,106,40,.55),inset 0 1px 0 rgba(255,178,122,.5)} .app .go.cf-book:focus-visible{outline:3px solid #ffb27a;outline-offset:3px} .ghost-btn{height:50px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:none;cursor:pointer;color:var(--fg);font-family:var(--fdisp);font-weight:500} .ghost-btn:hover{border-color:var(--accent)} .tags{display:flex;flex-wrap:wrap;gap:6px} .tag{font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 11px} .tag b{color:var(--fg);font-weight:600} /* ---------- right: build stage ---------- */ .cf-right{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 60% 18%,#0c2723 0%,var(--ink) 62%)} .cf-right::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 50%,transparent 55%,rgba(2,8,7,.6) 100%)} #gl{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)} #gl.on{opacity:1} #gl canvas{width:100%!important;height:100%!important;display:block} .seed{position:absolute;left:28%;top:62%;width:clamp(96px,14vw,150px);transform:translate(-50%,-50%);transition:opacity .8s var(--ease),filter .6s} .seed.off{opacity:0} .seed svg{width:100%;height:auto;overflow:visible;animation:breathe 5s ease-in-out infinite} @keyframes breathe{50%{transform:scale(1.015) translateY(-3px)}} .growthline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible} .growthline path{fill:none;stroke:#E76A28;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(231,106,40,.55))} /* finale: CRO-page orange */ .growthline path.gl-axis{stroke-width:2;stroke-opacity:.5;filter:none} .bubble{position:absolute;z-index:4;left:0;top:0;max-width:260px;padding:9px 14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(7,26,24,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--fdisp);font-weight:500;font-size:14.5px;line-height:1.35;color:#eafffb; opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none;will-change:left,top} .bubble.in{opacity:1;transform:translate(-50%,calc(-100% - 20px))} .caption{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;color:var(--muted);font-size:13px;transition:opacity .5s} .caption.off{opacity:0} .receipt{position:absolute;z-index:4;right:20px;bottom:54px;display:grid;gap:8px;justify-items:end} .receipt .pchip{font-size:12.5px} .finale-title{position:absolute;z-index:4;left:26px;right:26px;top:22px;font-family:var(--fdisp);font-weight:600;font-size:clamp(20px,2.2vw,28px);opacity:0;transform:translateY(8px);transition:all .6s var(--ease)} .finale-title.in{opacity:1;transform:none} /* draft capture log (review only) */ .draftlog{position:fixed;left:12px;bottom:12px;z-index:50;max-width:min(420px,calc(100vw - 24px));font:12px/1.4 ui-monospace,Menlo,monospace;color:#bfe;background:rgba(2,12,11,.92);border:1px dashed rgba(127,230,221,.4);border-radius:10px;padding:7px 10px;opacity:0;transform:translateY(6px);transition:all .35s var(--ease);pointer-events:none} .draftlog.in{opacity:1;transform:none} .draftlog b{color:var(--mint)} /* ---------- phones ---------- */ @media (max-width:860px){ .app{grid-template-columns:minmax(0,1fr)} .cf-left{padding:16px 16px 12px} .convo{justify-content:flex-start;padding-top:calc(var(--cf-vh,1svh)*4);gap:14px} .q{font-size:clamp(23px,6.4vw,30px)} .sub{font-size:14.5px} .chip{min-height:48px;padding:10px 12px;font-size:14.5px;gap:10px} .chip .ic{flex-basis:26px;height:26px} .chips.three{grid-template-columns:minmax(0,1fr)} .progress .lbl{display:none} .field input{font-size:18px} .go{height:46px;padding:0 14px;font-size:14px} .go.round{width:46px} .tip{display:none} .bubble{max-width:200px;font-size:13px} .caption{display:none} .receipt{display:none} .finale-title{font-size:18px;left:14px;top:12px} /* SIDE: stage slides in from the right at the bottom */ .app[data-mobile="side"] .cf-left{padding-bottom:calc(calc(var(--cf-vh,1svh)*31) + 8px)} .app[data-mobile="side"] .cf-right{position:absolute;right:0;bottom:0;width:72vw;height:calc(var(--cf-vh,1svh)*34);border-radius:22px 0 0 0;border:1px solid var(--line);border-right:0;border-bottom:0; transform:translateX(104%);transition:transform .9s var(--ease);z-index:5;box-shadow:-20px -10px 40px -20px rgba(0,0,0,.7)} .app[data-mobile="side"] .cf-right.in{transform:none} .app[data-mobile="side"].kb .cf-right{transform:translateX(104%)} .app[data-mobile="side"] .seed{left:30%;top:60%;width:80px} /* BAND: stage is a band across the top */ .app[data-mobile="band"]{grid-template-rows:calc(var(--cf-vh,1svh)*30) minmax(0,1fr)} .app[data-mobile="band"] .cf-right{grid-row:1;transition:height .5s var(--ease)} .app[data-mobile="band"] .cf-left{grid-row:2} .app[data-mobile="band"] .convo{padding-top:calc(var(--cf-vh,1svh)*1)} .app[data-mobile="band"].kb{grid-template-rows:0 minmax(0,1fr)} .app[data-mobile="band"] .seed{left:26%;top:58%;width:74px} .app[data-mobile="band"] .cf-top{margin-bottom:6px} } @media (prefers-reduced-motion:reduce){ .app *{animation:none!important;transition-duration:.01s!important} } /* Clutch logo + red rating star (same SVGs as the live hero badge) */ .cl-logo{display:inline-block;width:41px;height:12px;vertical-align:-1px;background:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgMTEuMzYwMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEwLjQgMEgxMi4yNFYxMS4zNkgxMC40VjBaIiBmaWxsPSIjRUJFQkVCIi8+CjxwYXRoIGlkPSJWZWN0b3JfMiIgZD0iTTE4LjY0IDcuNzU5OTVDMTguNjQgOS41MTk5NSAxNy4yIDkuNjc5OTUgMTYuNzIgOS42Nzk5NUMxNS42IDkuNjc5OTUgMTUuNDQgOC42Mzk5NSAxNS40NCA4LjA3OTk1VjMuNjc5OTVIMTMuNlY3Ljk5OTk1QzEzLjYgOS4wMzk5NSAxMy45MiA5Ljk5OTk1IDE0LjU2IDEwLjU1OTlDMTUuMTIgMTEuMTE5OSAxNS44NCAxMS4zNTk5IDE2LjcyIDExLjM1OTlDMTcuMzYgMTEuMzU5OSAxOC4xNiAxMS4yIDE4LjY0IDEwLjcyVjExLjM1OTlIMjAuNDhWMy42Nzk5NUgxOC42NFY3Ljc1OTk1WiIgZmlsbD0iI0VCRUJFQiIvPgo8cGF0aCBpZD0iVmVjdG9yXzMiIGQ9Ik0yNC4wOCAwLjg3OTk1M0gyMi4yNFYzLjY3OTk1SDIwLjg4VjUuNDM5OTVIMjIuMjRWMTEuMzZIMjQuMDhWNS40Mzk5NUgyNS40NFYzLjY3OTk1SDI0LjA4VjAuODc5OTUzWiIgZmlsbD0iI0VCRUJFQiIvPgo8cGF0aCBpZD0iVmVjdG9yXzQiIGQ9Ik0zMS4yMDAxIDkuMDQwMDVDMzAuODAwMSA5LjM2MDA1IDMwLjI0MDEgOS42MDAwNSAyOS42ODAxIDkuNjAwMDVDMjguNDAwMSA5LjYwMDA1IDI3LjUyMDEgOC42NDAwNSAyNy41MjAxIDcuMzYwMDVDMjcuNTIwMSA2LjA4MDA1IDI4LjQwMDEgNS4yMDAwNSAyOS42ODAxIDUuMjAwMDVDMzAuMjQwMSA1LjIwMDA1IDMwLjgwMDEgNS4zNjAwNSAzMS4yMDAxIDUuNzYwMDVMMzEuNDQwMSA2LjAwMDA1TDMyLjcyMDEgNC44MDAwNUwzMi40MDAxIDQuNTYwMDVDMzEuNjgwMSAzLjkyMDA1IDMwLjcyMDEgMy41MjAwNSAyOS42ODAxIDMuNTIwMDVDMjcuNDQwMSAzLjUyMDA1IDI1Ljc2MDEgNS4yMDAwNSAyNS43NjAxIDcuNDQwMDVDMjUuNzYwMSA5LjY4MDA1IDI3LjQ0MDEgMTEuMzYgMjkuNjgwMSAxMS4zNkMzMC43MjAxIDExLjM2IDMxLjY4MDEgMTAuOTYwMSAzMi40MDAxIDEwLjMyMDFMMzIuNzIwMSAxMC4wODAxTDMxLjQ0MDEgOC44MDAwNUwzMS4yMDAxIDkuMDQwMDVaIiBmaWxsPSIjRUJFQkVCIi8+CjxwYXRoIGlkPSJWZWN0b3JfNSIgZD0iTTM5LjIgNC4zMkMzOC42NCAzLjc2IDM4LjA4IDMuNTIgMzcuMiAzLjUyQzM2LjU2IDMuNTIgMzUuOTIgMy42OCAzNS40NCA0LjE2VjBIMzMuNlYxMS4zNkgzNS40NFY3LjEyQzM1LjQ0IDUuMzYgMzYuNjQgNS4yIDM3LjEyIDUuMkMzOC4yNCA1LjIgMzguMTYgNi4yNCAzOC4xNiA2LjhWMTEuMjhINDBWNi44OEM0MCA1Ljg0IDM5Ljc2IDQuODggMzkuMiA0LjMyWiIgZmlsbD0iI0VCRUJFQiIvPgo8cGF0aCBpZD0iVmVjdG9yXzYiIGQ9Ik0yOS42IDguNzIwMDNDMzAuMzA2OSA4LjcyMDAzIDMwLjg4IDguMTQ2OTYgMzAuODggNy40NDAwM0MzMC44OCA2LjczMzExIDMwLjMwNjkgNi4xNjAwMyAyOS42IDYuMTYwMDNDMjguODkzMSA2LjE2MDAzIDI4LjMyIDYuNzMzMTEgMjguMzIgNy40NDAwM0MyOC4zMiA4LjE0Njk2IDI4Ljg5MzEgOC43MjAwMyAyOS42IDguNzIwMDNaIiBmaWxsPSIjRUY0MzM1Ii8+CjxwYXRoIGlkPSJWZWN0b3JfNyIgZD0iTTcuODQgOC41NkM3LjIgOS4yIDYuMjQgOS42IDUuMiA5LjZDMy4yIDkuNiAxLjc2IDggMS43NiA1Ljg0QzEuNzYgMy42Nzk5OSAzLjIgMi4wNzk5OSA1LjI4IDIuMDc5OTlDNi4yNCAyLjA3OTk5IDcuMiAyLjQ3OTk5IDcuOTIgMy4xOTk5OUw4LjE2IDMuNDM5OTlMOS4zNiAyLjIzOTk5TDkuMTIgMS45OTk5OUM4LjA4IDAuOTU5OTkyIDYuNzIgMC4zOTk5OTIgNS4yOCAwLjM5OTk5MkMyLjI0IDAuMzE5OTkyIDAgMi43MTk5OSAwIDUuODRDMCA4Ljk2IDIuMjQgMTEuMzYgNS4yIDExLjM2QzYuNjQgMTEuMzYgOC4wOCAxMC44IDkuMDQgOS43Nkw5LjI4IDkuNTJMOC4wOCA4LjMyTDcuODQgOC41NloiIGZpbGw9IiNFQkVCRUIiLz4KPC9nPgo8L3N2Zz4K") center/contain no-repeat;margin-left:1px} .cl-star{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:4px;background:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJGcmFtZSI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik00LjI3NjEzIDEyLjYxOTFDNC4wOTkxOSAxMi42MTkxIDMuOTIzNTQgMTIuNTYzNSAzLjc3MTg3IDEyLjQ1M0MzLjYzOSAxMi4zNTczIDMuNTM2NjYgMTIuMjI1MyAzLjQ3NzIxIDEyLjA3MjdDMy40MTc3NiAxMS45MjAyIDMuNDAzNzQgMTEuNzUzOCAzLjQzNjg1IDExLjU5MzRMNC4wNjcwNiA4LjQ0MzU2TDEuNzgyMjggNi4xNTk2MkMxLjY3Mzc4IDYuMDUxMSAxLjU5NjQzIDUuOTE1NDMgMS41NTgzMiA1Ljc2Njc5QzEuNTIwMjEgNS42MTgxNiAxLjUyMjc1IDUuNDYyMDMgMS41NjU2NSA1LjMxNDcxQzEuNjA4NTYgNS4xNjczOSAxLjY5MDI3IDUuMDM0MyAxLjgwMjIzIDQuOTI5MzRDMS45MTQyIDQuODI0MzkgMi4wNTIzMSA0Ljc1MTQzIDIuMjAyMTMgNC43MTgwOEw1LjEwNzcgNC4wNzI2OUw2Ljc4MTk3IDEuMDYwMjdDNi44NTYwOSAwLjkyNjY2NiA2Ljk2NDYxIDAuODE1MzA4IDcuMDk2MjggMC43Mzc3NDJDNy4yMjc5NSAwLjY2MDE3NyA3LjM3Nzk4IDAuNjE5MjI4IDcuNTMwODEgMC42MTkxNDFDNy42ODM2NSAwLjYxOTA1MyA3LjgzMzcyIDAuNjU5ODMxIDcuOTY1NDggMC43MzcyNDVDOC4wOTcyNCAwLjgxNDY2IDguMjA1ODkgMC45MjU4OTUgOC4yODAxNiAxLjA1OTQyTDkuOTU0NDQgNC4wNzE4M0wxMi44NiA0LjcxNzIzQzEzLjAxIDQuNzUwMzIgMTMuMTQ4MyA0LjgyMzE1IDEzLjI2MDUgNC45MjgwOEMxMy4zNzI2IDUuMDMzMDEgMTMuNDU0NCA1LjE2NjE3IDEzLjQ5NzQgNS4zMTM1OUMxMy41NDAzIDUuNDYxMDIgMTMuNTQyOCA1LjYxNzI4IDEzLjUwNDUgNS43NjU5OEMxMy40NjYyIDUuOTE0NjkgMTMuMzg4NiA2LjA1MDM2IDEzLjI3OTkgNi4xNTg3N0wxMC45OTUxIDguNDQyN0wxMS42MjUzIDExLjU5MjJDMTEuNjU4MyAxMS43NTI1IDExLjY0NDIgMTEuOTE5IDExLjU4NDcgMTIuMDcxNkMxMS41MjUzIDEyLjIyNDEgMTEuNDIzIDEyLjM1NjMgMTEuMjkwMyAxMi40NTIxQzExLjE1ODcgMTIuNTQ5NyAxMS4wMDE2IDEyLjYwNyAxMC44MzgyIDEyLjYxNzFDMTAuNjc0NyAxMi42MjcyIDEwLjUxMTcgMTIuNTg5NyAxMC4zNjkyIDEyLjUwOTFMNy41MzEyOCAxMC45MzM5TDQuNjkzNDEgMTIuNTA5OUM0LjU2NTkxIDEyLjU4MTMgNC40MjIyNiAxMi42MTg5IDQuMjc2MTMgMTIuNjE5MVpNNy41MzEyOCAxMC4wMTU3QzcuNjAyODMgMTAuMDE1NyA3LjY3NDggMTAuMDMzNyA3LjczOTA3IDEwLjA2OTdMNy41MzEyOCA4LjczMTA4TDEwLjExIDguMzg3MDNDMTAuMDk2MiA4LjMxNzkyIDEwLjA5OTcgOC4yNDY0OSAxMC4xMjAxIDguMTc5MDVDMTAuMTQwNSA4LjExMTYgMTAuMTc3MiA4LjA1MDIxIDEwLjIyNjkgOC4wMDAzMUwxMi42NzQxIDUuNTU0MDZMOC40MTMyNCAxMC40NDQxQzguMzU0MTMgMTAuNDMxMSA0LjMyNTA4IDExLjc5NzUgNC4yNzY1NiAxMS43NjEzQzQuMjI4MDMgMTEuNzI1MSA0LjY5MzQxIDguMTc5MDUgNC42OTM0MSA4LjE3OTA1TDcuNTI5NTcgMS40NzM5OEw2LjY3NDI0IDUuMzE0NzFDNi42NDQ4MSA1LjM2NzU4IDcuMjc1MTEgNi45MjM2MyA2LjY3NDI0IDYuMTYxNDlDNy4xMDcyNyA3LjMxMTkzIDUuNzcyODUgNS43NTM2NyA1LjcxMzc2IDUuNzY2NzlMNi42NzQyNCA3LjAxODAyTDQuODM0NzkgOC4wMDAzMUM0Ljg4NDY0IDguMDUwMTUgNC45MjE0MSA4LjExMTUzIDQuOTQxODEgOC4xNzlDNC45NjIyMSA4LjI0NjQ2IDQuOTY1NjMgOC4zMTc5MiA0Ljk1MTc1IDguMzg3MDNMNC4yNzY1NiAxMS43NjEzTDcuMzIyNjQgMTAuMDY5N0M3LjM4Nzc2IDEwLjAzMzcgNy40NTk3MyAxMC4wMTU3IDcuNTMxMjggMTAuMDE1N1oiIGZpbGw9InZhcigtLWZpbGwtMCwgI0U2MjQxNSkiLz4KPC9nPgo8L3N2Zz4K") center/contain no-repeat} /* Site CSS hardening: global input rules (grey text, white bg) must not reach the flow */ .app .field input,.app .field input[type=text],.app .field input[type=email]{color:var(--fg)!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important} .app :focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px} /* Company requisites (below the flow, target of /kontaktai/#rekvizitai) */ .cf-rek{background:#061312;color:var(--fg);font-family:var(--fbody);padding:clamp(40px,6vw,72px) clamp(16px,4vw,40px);border-top:1px solid var(--line);scroll-margin-top:var(--cf-off,0px)} .cf-rek .in{max-width:1080px;margin:0 auto} .cf-rek h2{font-family:var(--fdisp);font-weight:600;font-size:clamp(22px,2.4vw,30px);color:#fff;margin:0 0 22px;padding:0;line-height:1.2} .cf-rek dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0} .cf-rek .it{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.02)} .cf-rek dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 4px} .cf-rek dd{margin:0;font-size:16px;color:var(--fg);user-select:all;word-break:break-word} .cf-rek dd a{color:var(--fg);text-decoration:none} .cf-rek dd a:hover{color:var(--mint)} .app .q:focus,.app .q:focus-visible{outline:none} .app .cf-top{justify-content:flex-end} .app .mini{font-size:12.5px!important;line-height:1.2!important;padding:6px 10px!important;font-weight:500!important;letter-spacing:0!important} .app a.link{text-decoration:underline;color:var(--muted)} .app a.link:hover{color:var(--mint)} /* field keeps its own underline focus state; no box outline (site/Divi input styles also neutralised) */ .app .field input:focus,.app .field input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important} .app .field input{font-family:var(--fdisp)!important;font-weight:500!important;font-size:clamp(20px,2.4vw,28px)!important;height:auto!important;line-height:1.3!important} @media (max-width:860px){.app .field input{font-size:18px!important}} .app .progress .lbl:empty{display:none} /* trust caption moves to the top of the stage so the site's chat widget (bottom-right) never covers it */ .app .caption{top:22px;bottom:auto} .app.finale-dim .caption{opacity:0;transition:opacity .4s} #answer .field input{font-family:var(--fdisp)!important;font-weight:500!important;font-size:clamp(20px,2.4vw,28px)!important} @media (max-width:860px){#answer .field input{font-size:18px!important}} /* long content (career form) must scroll inside the column, never stretch the grid row / stage */ @media (min-width:861px){ .app{grid-template-rows:minmax(0,1fr)} } .app .cf-left{min-height:0} .app.form-open .convo{min-height:0} .app.form-open .convo > *{flex-shrink:0} /* short laptop screens (≤640px tall): tighter rhythm, no tip line */ @media (min-width:861px){ .app.cfh640 .tip,.app.cfh640 .eyebrow{display:none} .app.cfh640 .convo{gap:10px} .app.cfh640 .q{font-size:clamp(24px,2.8vw,32px)} .app.cfh640 .proof{min-height:0} .app.cfh640 .chip{min-height:46px;padding:9px 14px} } /* finale: growth line runs BEHIND Spark/companion (canvas is transparent, so the line shows everywhere else) */ .app #gl{z-index:2} .app .growthline{z-index:1} /* trust caption shares the progress row's vertical box (same top offset + 28px height) */ @media (min-width:861px){ .app .caption{top:max(clamp(16px,3vw,32px),env(safe-area-inset-top,0px));height:28px;display:block;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .app .caption .cl-logo{margin-left:4px} } /* guarantee "terms" toggle + conditions panel */ .app .pchip .terms{background:none;border:0;border-bottom:1px dotted var(--faint);padding:0;margin-left:4px;color:var(--faint);font:inherit;font-size:12px;cursor:pointer;line-height:1.3} .app .pchip .terms:hover,.app .pchip.open .terms{color:var(--accent-hi);border-bottom-color:var(--accent-hi)} .app .pchip .terms span{display:inline-block;font-size:9px;transition:transform .2s} .app .pchip.open .terms span{transform:rotate(180deg)} .app .proof{position:relative} .app .terms-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:6;max-width:min(420px,100%);padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(7,26,24,.97);box-shadow:0 12px 30px rgba(0,0,0,.45);color:var(--fg);font-size:13px;line-height:1.5} .app .terms-pop b{display:block;margin-bottom:6px;font-weight:600} .app .terms-pop ul{margin:0 0 6px;padding-left:18px} .app .terms-pop li{margin:2px 0} .app .terms-pop small{color:var(--muted);font-size:12px} .app .terms-pop ul{list-style:disc!important} .app .terms-pop li{list-style:disc!important;padding:0!important} .app .pchip .terms{white-space:nowrap} .app .bubble,.app .caption,.app .finale-title,.app .receipt{pointer-events:none} /* overlays never block the draggable before/after screen */ @media (min-width:861px){ .app .cf-left{padding-left:var(--cf-padl,max(16px,10vw))} } /* left column lines up with the site logo (Divi rows are 80% wide → logo at 10vw; the page script refines it from the VISIBLE .main_logo — EN has a hidden duplicate) */ /* ===== service step with 11 services (2026-09-29) ===== */ .app.svc-step .convo{overflow-y:auto;justify-content:safe center;scrollbar-width:thin} .app.svc-step .chip{min-height:48px;padding:9px 14px} .app.other-open .chips .chip:not(:last-child){display:none} /* "DI konsultacijos" sub-choice: its chips replace the service chips + the details/careers links */ .app.sub-open .chips.main,.app.sub-open #otherwrap~.row{display:none} #otherwrap>.row{margin-top:14px} @media (min-width:861px){ .app.cfh760.svc-step .sub{display:none} .app.cfh760.svc-step .chip{min-height:42px;padding:7px 12px} .app.cfh760.svc-step .chip .ic{flex-basis:26px;height:26px} } @media (min-width:861px){ .app.cfh640.svc-step .proof{display:none} } /* phones: compact pills so all services fit above the fold */ @media (max-width:860px){ .app.svc-step .eyebrow,.app.svc-step .sub,.app.svc-step .proof{display:none} .app.svc-step .chips{display:flex;flex-wrap:wrap;gap:7px} .app.svc-step .chip{flex:0 0 auto;width:auto;min-height:38px;padding:7px 13px;border-radius:999px;font-size:13.5px;gap:7px;line-height:1.2} .app.svc-step .chip .ic{display:none} .app.svc-step .chip.wide{grid-column:auto} .app.svc-step .convo{gap:12px} } /* short phones: the band only greets on the service step → give the choices the room */ @media (max-width:860px){ .app.cfh780[data-mobile="band"].svc-step{grid-template-rows:calc(var(--cf-vh,1svh)*17) minmax(0,1fr)} .app.cfh780.svc-step .chip{min-height:36px;padding:6px 12px;font-size:13px} .app.cfh780.svc-step .chips{gap:6px} } @media (min-width:861px){ .app.cfh640.svc-step .chip{font-size:14px;min-height:40px} .app.cfh640.svc-step .convo{gap:10px} } /* never squash the question / sub / answer when space is tight (sub text was running into the choices) */ .app .convo > *{flex-shrink:0} @media (max-width:860px){ .app .answer{margin-top:8px} .app.svc-step .answer{margin-top:10px} } .app .bubble{white-space:pre-line} /* greeting uses a line break */ /* short phones (≤780px tall): keep the proof badge + guarantee on screen on every step */ @media (max-width:860px){ .app.cfh780[data-mobile="band"]{grid-template-rows:calc(var(--cf-vh,1svh)*24) minmax(0,1fr)} .app.cfh780 .convo{gap:10px} .app.cfh780 .chips.three{display:flex;flex-wrap:wrap;gap:6px} .app.cfh780 .chips.three .chip{flex:1 1 auto;width:auto;min-height:38px;padding:7px 12px;border-radius:999px;font-size:13.5px;justify-content:center} .app.cfh780 .reassure{font-size:12px;line-height:1.4} .app.cfh780 .answer{margin-top:4px} .app.cfh780 .q{font-size:22px} } /* landscape tablets / short laptops: the 11-choice step drops the sub line and tightens */ @media (min-width:861px){ .app.cfh800.svc-step .sub{display:none} .app.cfh800.svc-step .chip{min-height:42px;padding:7px 12px} .app.cfh800.svc-step .convo{gap:12px} } @media (max-width:860px){ .app.cfh680[data-mobile="band"]{grid-template-rows:calc(var(--cf-vh,1svh)*20) minmax(0,1fr)} .app.cfh680 .reassure{font-size:11.5px} } @media (min-width:861px){ .app.cfh800.svc-step .q{font-size:clamp(24px,2.5vw,32px)} .app.cfh800.svc-step .chip{min-height:40px} .app.cfh800.svc-step .convo{gap:10px} } /* bubble beside Spark when the band is too short for it above */ .app .bubble.side{transform:translate(0,-50%) scale(.96)} .app .bubble.side.in{transform:translate(0,-50%)} /* short phones: keep the band big enough for Spark (overrides the tighter values above) */ @media (max-width:860px){ .app.cfh780[data-mobile="band"]{grid-template-rows:max(170px,calc(var(--cf-vh,1svh)*24)) minmax(0,1fr)} .app.cfh780[data-mobile="band"].svc-step{grid-template-rows:max(150px,calc(var(--cf-vh,1svh)*17)) minmax(0,1fr)} } @media (max-width:860px){ .app.cfh680[data-mobile="band"]{grid-template-rows:max(150px,calc(var(--cf-vh,1svh)*20)) minmax(0,1fr)} .app.cfh680 .q{font-size:20px} } /* ---- docked Spark line (very short phone bands) ---- */ .app .cf-sayline{display:none} .app.say-docked .bubble{display:none!important} .app.say-docked .cf-sayline{display:block;flex:1;min-width:0;margin-right:10px;font-family:var(--fdisp);font-size:12.5px;line-height:1.3;color:var(--fg);opacity:0;transition:opacity .3s;white-space:pre-line;overflow:hidden;max-height:2.6em;padding-left:22px;position:relative} .app.say-docked .cf-sayline.in{opacity:1} .app.say-docked .cf-sayline:before{content:"";position:absolute;left:6px;top:calc(.65em - 3px);width:8px;height:8px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 4px 1px var(--accent-hi)} /* dot + glow stay inside the line box (overflow:hidden clips the 2-line text) */ /* ---- intro reviews next to Spark ---- */ .app .intro-rev{position:absolute;z-index:4;right:24px;top:72px;width:min(360px,calc(100% - 48px));opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:auto} .app .intro-rev.in{opacity:1;transform:none} .app .ir-head{font-size:12px;letter-spacing:.06em;color:var(--muted);margin:0 0 8px 2px;display:flex;align-items:center;gap:4px} .app .ir-card{border:1px solid var(--line-2);border-radius:16px;padding:14px 16px 12px;background:linear-gradient(180deg,rgba(20,70,65,.92),rgba(8,33,31,.94));box-shadow:0 18px 40px rgba(0,0,0,.35);backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .app .ir-card.on{opacity:1;transform:none} .app .ir-who{display:flex;align-items:center;gap:10px} .app .ir-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px;border:2px solid rgba(127,230,221,.35)} .app .ir-who img.sq{border-radius:10px} .app .ir-who b{display:block;font-family:var(--fdisp);font-size:14.5px;color:#fff;line-height:1.2} .app .ir-who span{display:block;font-size:12px;color:var(--muted);line-height:1.3} .app .ir-stars{margin-left:auto;font-style:normal;color:#f5b82e;letter-spacing:1px;font-size:13px;align-self:flex-start} .app .ir-h{margin:10px 0 4px;font-family:var(--fdisp);font-weight:600;font-size:15px;color:#ffb27a} .app .ir-q{margin:0;font-size:13px;line-height:1.5;color:var(--fg);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .app .ir-src{margin-top:8px;font-size:11px;color:var(--faint)} .app .ir-dots{display:flex;gap:6px;justify-content:center;margin-top:10px} .app .ir-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer} .app .ir-dot.on{background:var(--accent-hi)} @media (max-width:860px){ .app .intro-rev{top:auto;bottom:12px;right:12px;width:min(300px,46%)} .app .ir-q{-webkit-line-clamp:2;font-size:12px} .app .ir-card{padding:10px 12px} .app .ir-head,.app .ir-src{display:none} } /* phones: the band is too small for a card next to Spark */ @media (max-width:860px){ .app.cfh960 .intro-rev{display:none} } /* review widgets: 2 text shades (--fg primary, --muted secondary) + Clutch red stars only */ .app .ir-who b,.app .ir-h,.app .ir-q{color:var(--fg)} .app .ir-who span,.app .ir-head,.app .ir-src{color:var(--muted)} .app .ir-stars{color:#E62415} .app .ir-h{font-weight:600} /* no visible scrollbar "track" in the conversation column (scrolling still works) */ .app .convo{scrollbar-width:none;-ms-overflow-style:none} .app .convo::-webkit-scrollbar{display:none;width:0;height:0} /* site live-chat button hidden on the contact flow (owner 2026-09-29) */ .livechat_button_custom{display:none!important} /* ---- iPhone: text steps keep the field ABOVE the keyboard (2026-09-29) ---- iOS Safari pans the whole page when a focused field would sit under the keyboard (the "jump"). On phones the name/email/note steps get a compact Spark band, drop the empty eyebrow and move the sub line + proof badge below the field, so the field is already above the keyboard line before it is tapped — nothing has to move. Sizes use the frozen --cf-vh / .cfhNNN (never svh/max-height). */ @media (max-width:860px){ .app.txt-step[data-mobile="band"]{grid-template-rows:max(90px,calc(var(--cf-vh,1svh)*14)) minmax(0,1fr)} .app.txt-step .q{font-size:20px;line-height:1.2} .app.cfh640.txt-step[data-mobile="band"]{grid-template-rows:max(58px,calc(var(--cf-vh,1svh)*11)) minmax(0,1fr)} .app.cfh640.txt-step .cf-left{padding-top:6px} .app.cfh640.txt-step .convo{gap:6px;padding-top:0} .app.cfh640.txt-step .q{font-size:18px} .app.txt-step .eyebrow{display:none} .app.txt-step .sub{order:1} .app.txt-step .proof{order:2} .app.txt-step .answer{margin-top:4px} } /* iOS zooms into any text field under 16px on focus (another "jump") — career form fields were 15px */ @media (max-width:860px){ .app .wpcf7 input[type=text],.app .wpcf7 input[type=email],.app .wpcf7 input[type=tel],.app .wpcf7 input[type=url],.app .wpcf7 input[type=number],.app .wpcf7 textarea,.app .wpcf7 select{font-size:16px!important} } /* phones/tablets: give the live WebGL canvas its own compositing layer (smooth under the sticky header while scrolling) */ @media (max-width:980px){ .app #gl,.app #gl canvas{transform:translateZ(0)} } /* phones/tablets: Spark's band resizes fluidly between steps (JS fitBand sets the target; the canvas redraws every frame) */ @media (max-width:860px){ .app[data-mobile="band"]{transition:grid-template-rows .45s cubic-bezier(.22,.7,.2,1)} } @media (max-width:860px) and (prefers-reduced-motion:reduce){ .app[data-mobile="band"]{transition:none} } /* ---- phones/tablets: a step can never spill out of the flow (2026-10-03) ---- .convo is a flex child with min-height:0 whose children never shrink; when a step was taller than the room under the band (e.g. "Norite tik mūsų kontaktų?" = 4 contact cards + button), it overflowed past "← Atgal" and past the bottom of .app (overflow:hidden) — the cut-off buttons ended exactly where #rekvizitai starts, so the requisites looked like they slid over the buttons. Now the conversation scrolls inside its own box (fitBand also shrinks the band first), and the contact cards are compact on phones. */ @media (max-width:860px){ .app .convo{overflow-y:auto;overflow-x:hidden;padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px;padding-bottom:6px} .app .cards{gap:8px} .app .dline{padding:9px 12px;gap:10px} .app .dline .ic{width:30px;height:30px;border-radius:9px} .app .dline .k{font-size:10.5px} .app .dline .v{font-size:15px;line-height:1.3} .app .dline .act{gap:4px} .app .dline .mini{padding:5px 8px!important} } /* ---- the site header (and its mobile dropdown) always stays above the flow (2026-10-06) ---- Divi's menu (.et_mobile_menu z 9999) lives inside the header's stacking context (.et_builder_inner_content: relative, z 2). .app had z-index:auto, so its layers competed in the ROOT context: #gl canvas (z 2, later in the DOM → won the tie), bubble / review card (z 4), growth line, terms popup — painted over the open dropdown and took its taps. .app is now its own stacking context at z 0: everything inside keeps its order, nothing can rise above the header. */ .app{isolation:isolate;z-index:0} /* ===================== HERO ENTRANCE + MICRO-INTERACTIONS (2026-10-06) ===================== Plays once per page load at first paint. Server-rendered parts (stage light, dot grid, progress line, trust caption, tip) animate unconditionally; JS-rendered step-1 parts (eyebrow, headline words, sub, chips, links, proof chip, review card) only while .app has NOT got .cf-intro-done (flow.js adds it on the first step change or 2.6 s after boot → back to step 1 = no replay). transform / opacity / clip-path / small-element filter only → no layout shift; every end state = the old static layout. t=0 ≈ first paint (flow.js renders step 1 synchronously during parsing): 0.00 stage light blooms + dot grid fades in · 0.05 light sweep crosses the hero (1.4 s) · 0.06 eyebrow wipes in 0.12–0.80 headline words rise out of a mask (70 ms stagger) · 0.10–0.75 progress growth line draws, tip dot pops 0.38 sub · 0.42–1.30 chips cascade (spring, 45 ms stagger, icons pop after) · 0.55 review card deals in, stars fill 1.0–1.4 0.80 trust caption + Clutch star pop · 0.95 links · 1.05 proof chip (count-up starts with it) · 1.30 tip line → all settled ≤1.75 s */ .app{--cf-spring:cubic-bezier(.34,1.42,.64,1);--cf-out:cubic-bezier(.16,1,.3,1)} @keyframes cf-fade{from{opacity:0}} @keyframes cf-rise{from{opacity:0;transform:translateY(10px)}} @keyframes cf-rise-blur{from{opacity:0;transform:translateY(8px);filter:blur(4px)}} @keyframes cf-word{from{transform:translateY(112%);opacity:0}40%{opacity:1}} @keyframes cf-word-blur{from{transform:translateY(112%);opacity:0;filter:blur(5px)}45%{opacity:1}to{filter:blur(0)}} @keyframes cf-wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}} @keyframes cf-chip{from{opacity:0;transform:translateY(14px) scale(.94)}55%{opacity:1}} @keyframes cf-chip-m{from{opacity:0;transform:translateY(8px) scale(.96)}} @keyframes cf-ic{from{transform:scale(.35) rotate(-28deg);opacity:0}} @keyframes cf-pop{from{transform:scale(0)}} @keyframes cf-draw{from{stroke-dashoffset:200}} @keyframes cf-card{from{opacity:0;transform:translate3d(34px,10px,0) rotate(2.4deg) scale(.95)}} @keyframes cf-card-m{from{opacity:0;transform:translate3d(16px,0,0) scale(.96)}} @keyframes cf-ping{from{transform:scale(1);opacity:.75}to{transform:scale(3.2);opacity:0}} @keyframes cf-sweep{0%{transform:translate3d(-120%,0,0) skewX(-14deg);opacity:0}12%{opacity:1}100%{transform:translate3d(330%,0,0) skewX(-14deg);opacity:0}} @keyframes cf-seed-in{0%{opacity:0;scale:.55;translate:0 22px;filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1}} /* --- ambient: stage light bloom, dot grid, one light sweep across the whole hero --- */ .app .cf-right{animation:cf-fade 1.1s ease-out both} /* opacity only: fitBand() measures this box, so no transform */ .app .cf-right::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(127,230,221,.13) 1px,transparent 1.5px);background-size:26px 26px;background-position:13px 13px; -webkit-mask-image:radial-gradient(62% 56% at 46% 52%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%);mask-image:radial-gradient(62% 56% at 46% 52%,#000 0%,rgba(0,0,0,.5) 45%,transparent 78%); opacity:.7;animation:cf-fade 1.6s .1s ease-out both} .app::after{content:"";position:absolute;z-index:6;top:-10%;bottom:-10%;left:0;width:34%;pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(127,230,221,.035) 30%,rgba(190,255,248,.075) 50%,rgba(127,230,221,.035) 70%,transparent 100%); opacity:0;animation:cf-sweep 1.45s .05s cubic-bezier(.45,.05,.3,1) both;will-change:transform} /* --- growth line (progress) draws, tip dot pops --- */ .app .progress .base,.app .progress .val{stroke-dasharray:200 200} .app .progress .base{animation:cf-draw .9s .08s var(--cf-out) both} .app .progress .val{animation:cf-draw .75s .18s var(--cf-out) both} .app .progress .tipdot{transform-box:fill-box;transform-origin:center;animation:cf-pop .45s .62s var(--cf-spring) both} /* --- trust caption (Clutch) + tip --- */ .app .caption{animation:cf-rise .6s .8s var(--cf-out) both} .app .caption .cl-star{animation:cf-pop .5s 1.02s var(--cf-spring) both} .app .cf-bottom .tip{animation:cf-fade .6s 1.3s ease-out both} /* --- step 1 (JS-rendered), first load only --- */ .app:not(.cf-intro-done) .eyebrow:not(:empty){animation:cf-wipe .55s .06s var(--cf-out) both} .app .q .cf-w{display:inline-block;clip-path:inset(-.25em -.3em -.3em -.3em)} .app .q .cf-w>span{display:inline-block} .app:not(.cf-intro-done) .q .cf-w>span{animation:cf-word .8s calc(.12s + var(--i,0)*.07s) var(--cf-out) both} .app:not(.cf-intro-done) .sub:not(:empty){animation:cf-rise .6s .38s var(--cf-out) both} .app:not(.cf-intro-done) .answer .chip{animation:cf-chip .66s calc(.42s + var(--ci,0)*.045s) var(--cf-spring) both} .app:not(.cf-intro-done) .answer .chip .ic{animation:cf-ic .5s calc(.54s + var(--ci,0)*.045s) var(--cf-spring) both} .app .answer .chip:nth-child(2){--ci:1}.app .answer .chip:nth-child(3){--ci:2}.app .answer .chip:nth-child(4){--ci:3}.app .answer .chip:nth-child(5){--ci:4}.app .answer .chip:nth-child(6){--ci:5} .app .answer .chip:nth-child(7){--ci:6}.app .answer .chip:nth-child(8){--ci:7}.app .answer .chip:nth-child(9){--ci:8}.app .answer .chip:nth-child(10){--ci:9}.app .answer .chip:nth-child(11){--ci:10}.app .answer .chip:nth-child(12){--ci:11} .app:not(.cf-intro-done) .answer>.row{animation:cf-rise .55s .95s var(--cf-out) both} .app:not(.cf-intro-done) .proof .pchip{animation:cf-rise .6s 1.05s var(--cf-spring) both} .app:not(.cf-intro-done) .proof .pchip .pd::after{animation-delay:1.2s} .app .pchip .pd{position:relative} .app .pchip .pd::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent-hi);opacity:0;animation:cf-ping 1.1s .25s ease-out 1 both;pointer-events:none} /* review card: deals in beside Spark, stars fill left→right (each card change re-fills them, quicker) */ .app:not(.cf-intro-done) .intro-rev{animation:cf-card .95s .55s var(--cf-spring) both} .app .ir-stars{animation:cf-wipe .5s .15s var(--cf-out) both} .app:not(.cf-intro-done) .ir-stars{animation-delay:1.05s;animation-duration:.45s} .app .ir-who img{animation:cf-pop .45s .05s var(--cf-spring) both} /* Spark's first line comes after the 2D Spark has materialised (opacity only: the bubble's transform positions it) */ .app:not(.cf-intro-done):not(.spark-landed) .bubble.in,.app.say-docked:not(.cf-intro-done):not(.spark-landed) .cf-sayline.in{animation:cf-fade .45s .78s ease-out both} /* 2D path only: with 3D, stage.js holds the greeting until Spark lands (.spark-landed) */ .app:not(.cf-intro-done) .ir-who img{animation-delay:.85s} /* desktop only: a touch of blur-to-sharp on the headline + sub (small areas) */ @media (min-width:861px){ .app:not(.cf-intro-done) .q .cf-w>span{animation-name:cf-word-blur} .app:not(.cf-intro-done) .sub:not(:empty){animation-name:cf-rise-blur} } /* phones/tablets: lighter — no sweep, no blur, shorter cascade */ @media (max-width:860px){ .app::after{display:none;animation:none} .app .cf-right::before{opacity:.5} .app:not(.cf-intro-done) .answer .chip{animation-name:cf-chip-m;animation-duration:.5s;animation-delay:calc(.36s + var(--ci,0)*.03s);animation-timing-function:var(--cf-out)} .app:not(.cf-intro-done) .answer .chip .ic{animation:none} .app:not(.cf-intro-done) .answer>.row{animation-delay:.72s} .app:not(.cf-intro-done) .intro-rev{animation-name:cf-card-m;animation-duration:.6s} .app:not(.cf-intro-done) .q .cf-w>span{animation-delay:calc(.08s + var(--i,0)*.05s);animation-duration:.65s} } /* --- 2D seed (first-paint Spark) — sits where the 3D Spark rests, materialises instead of popping, leaves fast --- */ .app .cf-right{container-type:size} .app .seed{left:36%;top:58%;width:clamp(120px,15vw,210px);transition:opacity .35s var(--cf-out),scale .35s var(--cf-out),filter .6s} @supports (width:1cqh){ .app .seed{width:clamp(110px,24cqh,240px)} } .app.cfh760 .seed{top:68%} .app:not(.cf-intro-done) .seed svg{animation:cf-seed-in .9s .22s var(--cf-spring) both,breathe 5s 1.2s ease-in-out infinite} .app .seed.off{opacity:0;scale:.82} .app #gl{transition:opacity .45s var(--cf-out)} @media (max-width:860px){ .app[data-mobile="band"] .seed{left:50%;top:49%;width:74px} @supports (width:1cqh){ .app[data-mobile="band"] .seed{width:min(40cqh,150px)} } } /* --- micro-interactions (mouse/trackpad only) --- */ @media (hover:hover) and (pointer:fine){ .app .chip{position:relative;overflow:hidden;transition:border-color .2s,background .2s,transform .25s var(--cf-spring),translate .35s var(--cf-out)} .app .chip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(190,255,248,.09),transparent);transform:translateX(-120%) skewX(-12deg);opacity:0} .app .chip:hover::after{animation:cf-chip-sheen .7s var(--cf-out)} .app .chip:hover{transform:translateY(-2px)} .app .chip[style*="--mx"]{translate:var(--mx) var(--my)} /* only while the cursor is on it: an idle translate would put every chip on its own layer */ .app .chip:active{transform:translateY(0) scale(.975);transition-duration:.08s} .app .chip .ic{transition:transform .35s var(--cf-spring),background .2s,border-color .2s} .app .chip:hover .ic{transform:scale(1.09) rotate(-7deg);background:rgba(21,172,163,.22);border-color:rgba(127,230,221,.5)} .app .chip[aria-checked="true"] .ic{background:rgba(127,230,221,.2)} .app .ir-card{transition:opacity .45s var(--ease),transform .5s var(--cf-out)} .app .ir-card.on[style*="--ry"]{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))} .app .pchip{transition:opacity .4s var(--ease),transform .5s var(--ease),border-color .25s} .app .pchip:hover{border-color:rgba(127,230,221,.5)} .app .go:active{transform:scale(.97)} } @keyframes cf-chip-sheen{0%{opacity:1;transform:translateX(-120%) skewX(-12deg)}100%{opacity:1;transform:translateX(330%) skewX(-12deg)}} /* reduced motion: everything instant, nothing moves */ @media (prefers-reduced-motion:reduce){ .app::after{display:none;animation:none} .app .cf-right,.app .cf-right::before,.app .pchip .pd::after{animation:none!important} .app .pchip .pd::after{display:none} .app .chip,.app .ir-card.on{translate:none!important;transform:none!important} } /* ---- no-jump on every phone/tablet (2026-10-07) ---- 1) the conversation's own scroll never drags the page along (a page left scrolled was realigned at focus = jump) 2) "Kažkas kita / Something else": the compact text-step band applies at once, before the field is focused in the same tap 3) touch tablets in the two-column layout: text steps start at the top (centred fields sat under the keyboard in landscape) */ @media (max-width:860px){ .app .convo{overscroll-behavior:contain} .app.other-open[data-mobile="band"]{grid-template-rows:max(90px,calc(var(--cf-vh,1svh)*14)) minmax(0,1fr)!important;transition:none!important} .app.cfh640.other-open[data-mobile="band"]{grid-template-rows:max(58px,calc(var(--cf-vh,1svh)*11)) minmax(0,1fr)!important} .app.other-open .answer{margin-top:4px} .app.other-open .q{display:none} /* the 'Kažkas kita' chip + the field say it all; keeps the field above the keyboard on SE-size phones */ .app.other-open .convo{justify-content:flex-start} /* svc-step centres its (scrolling) list; with one chip + the field that put the field mid-screen */ } @media (min-width:861px) and (pointer:coarse){ .app.txt-step .convo,.app.other-open .convo{justify-content:flex-start;padding-top:8px} .app.other-open .q{display:none} .app.txt-step .eyebrow{display:none} .app.txt-step .sub{order:1} .app.txt-step .proof{order:2} } /* ---- phone step (2026-10-12): dial code + number in ONE row, the same height as the email row (band math unchanged); the ✓, error line, privacy line and "Email is enough" all sit BELOW the field (iPhone no-jump rule). Native