/* ---------- "Kaip jus randa klientas": sticky scrollytelling with a phone ---------- */
.find{height:520vh;position:relative}
.find-in{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(30px,6vw,110px);align-items:center;padding:80px var(--pad) 30px;max-width:1500px;margin:0 auto}
.find-txt small{font-family:'Big Shoulders Display';font-weight:800;font-size:22px;display:block;margin-bottom:18px}
.find-txt h2{font-weight:900;font-size:clamp(40px,5.4vw,92px);line-height:.92;letter-spacing:-.045em;margin-bottom:34px}
.fsteps{list-style:none;counter-reset:fs;border-top:3px solid var(--ink)}
.fsteps li{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:16px 0;border-bottom:1.5px solid var(--line);opacity:.32;transition:opacity .5s}
.fsteps li b{font-family:'Big Shoulders Display';font-weight:900;font-size:30px;line-height:1}
.fsteps li h3{font-weight:900;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;line-height:1.1}
.fsteps li p{font-size:17px;line-height:1.5;margin-top:6px;max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,1,.3,1)}
.fsteps li.on{opacity:1}.fsteps li.on p{max-height:140px}
.fsteps li.on b{color:var(--ink);background:var(--yellow);padding:2px 6px;justify-self:start}
.fbar{height:4px;background:var(--line);margin-top:22px;position:relative}.fbar i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* phone */
.phone{position:relative;width:100%;aspect-ratio:9/18.5;background:#0d0d0d;border-radius:46px;padding:11px;box-shadow:0 60px 100px -40px rgba(0,0,0,.55),inset 0 0 0 2px #2a2a2a}
.phone:before{content:'';position:absolute;top:20px;left:50%;width:92px;height:26px;margin-left:-46px;background:#000;border-radius:20px;z-index:5}
.scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff;color:#1d1d1f;font-family:'Schibsted Grotesk',sans-serif}
.sv{position:absolute;inset:0;padding:58px 14px 14px;transition:opacity .6s,transform .8s cubic-bezier(.2,1,.3,1)}
.q{display:flex;align-items:center;gap:8px;border:1.5px solid #dadce0;border-radius:24px;padding:10px 14px;font-size:14.5px;min-height:42px}
.q svg{flex:none}.q span:after{content:'';display:inline-block;width:1.5px;height:15px;background:#1d1d1f;margin-left:1px;vertical-align:-2px;animation:qc 1s steps(1) infinite}
@keyframes qc{50%{opacity:0}}
.tabs{display:flex;gap:16px;font-size:12px;color:#5f6368;padding:12px 4px 8px;border-bottom:1px solid #eee}.tabs b{color:#1d1d1f;border-bottom:2px solid #1d1d1f;padding-bottom:6px;font-weight:600}
.res{position:relative;margin-top:10px;display:flex;flex-direction:column;gap:9px}
.r{border:1px solid #eee;border-radius:14px;padding:11px 12px;background:#fff;transition:transform .8s cubic-bezier(.2,1,.3,1),opacity .5s,box-shadow .4s,border-color .4s;opacity:0;transform:translateY(16px)}
.find[data-s="1"] .r:not(.win),.find[data-s="2"] .r:not(.win),.find[data-s="3"] .r:not(.win){opacity:1;transform:none}
.find[data-s="1"] .r:nth-child(2),.find[data-s="2"] .r:nth-child(2){transition-delay:.12s}
.find[data-s="1"] .r:nth-child(3),.find[data-s="2"] .r:nth-child(3){transition-delay:.24s}
.r .u{font-size:10.5px;color:#5f6368;display:flex;align-items:center;gap:6px}.r .u i{width:16px;height:16px;border-radius:50%;background:#e8eaed;flex:none}
.r h5{font-size:15px;font-weight:600;color:#1a0dab;margin-top:3px;line-height:1.25}
.r .st{font-size:11px;color:#5f6368;margin-top:3px}.r .st em{color:#e8a200;font-style:normal;letter-spacing:-1px}
.r .ch{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}.r .ch span{font-size:10.5px;border:1px solid #dadce0;border-radius:12px;padding:3px 8px;color:#3c4043}
.r.you h5{color:#5f6368}.r.you .st{color:#b3261e}
/* step 2: the customer taps the competitor, our result fades */
.find[data-s="2"] .r.you{opacity:.38}
.find[data-s="2"] .r.c1{box-shadow:0 0 0 2px #1a0dab inset;border-color:#1a0dab}
.tap{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(26,13,171,.25);left:60%;top:30px;transform:scale(0);opacity:0;pointer-events:none}
.find[data-s="2"] .tap{animation:tap 1.4s .4s ease-out infinite}
@keyframes tap{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.2);opacity:0}}
/* step 3: with Kodranka our result jumps to the top with sitelinks */
.r.win{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(120px) scale(.96);border-color:#FFC300;box-shadow:0 18px 40px -16px rgba(0,0,0,.25);z-index:3}
.r.win h5{color:#1a0dab}.r.win .st{color:#5f6368}
.r.win .bt{display:block;margin-top:9px;background:#121212;color:#FFC300;text-align:center;font-weight:700;font-size:12.5px;border-radius:9px;padding:9px}
.find[data-s="3"] .r.win{opacity:1;transform:none}
.find[data-s="3"] .r:not(.win){transform:translateY(178px);opacity:.55}
/* step 4: the site itself */
.site{opacity:0;transform:translateY(30px);background:#F6F1E7;padding:0}
.site .shero{height:46%;background:url('img/kirpykla.jpg') center/cover,#2b2622;position:relative}
.site .shero:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.6))}
.site .shero div{position:absolute;left:16px;bottom:14px;right:16px;color:#fff;z-index:2}
.site .shero small{font-size:10px;letter-spacing:.12em;font-weight:700;opacity:.85}
.site .shero h6{font-family:'Big Shoulders Display';font-weight:900;font-size:34px;line-height:.9;margin-top:4px}
.site .bd{padding:14px 16px}
.site .bd p{font-size:11px;font-weight:700;letter-spacing:.08em;color:#7a6f60}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 12px}
.slots span{font-size:12px;font-weight:600;text-align:center;padding:8px 0;border-radius:8px;background:#fff;border:1px solid #e3dccd}
.slots span.x{color:#bbb;text-decoration:line-through}
.slots span.pick{background:#121212;color:#FFC300;border-color:#121212}
.site .go{display:block;background:#B4541F;color:#fff;text-align:center;font-weight:700;font-size:13px;border-radius:10px;padding:11px}
.toast{position:absolute;left:10px;right:10px;top:50px;background:rgba(30,30,30,.92);color:#fff;border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:11.5px;line-height:1.35;transform:translateY(-190%);transition:transform .7s cubic-bezier(.2,1,.3,1) .9s;z-index:6}
.toast i{width:30px;height:30px;border-radius:8px;background:#FFC300;flex:none;display:grid;place-items:center;font-style:normal;font-weight:900;color:#121212}
.find[data-s="4"] .site{opacity:1;transform:none}.find[data-s="4"] .srch{opacity:0;transform:translateY(-20px)}
.find[data-s="4"] .toast{transform:none}
.find[data-s="4"] .slots span.pick{animation:pick .6s .5s both}
@keyframes pick{from{background:#fff;color:#1d1d1f;border-color:#e3dccd}}

@media (max-width:860px){
 .find{height:560vh}
 .find-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:14px;padding:70px 14px 14px}
 .find-txt h2{font-size:34px;margin-bottom:10px}.find-txt small{display:none}
 .fsteps{border-top:2px solid var(--ink)}
 .fsteps li{display:none;padding:10px 0;border:0;opacity:1}.fsteps li.on{display:grid;grid-template-columns:40px 1fr}
 .fsteps li h3{font-size:19px}.fsteps li p{font-size:15px;max-height:none}.fsteps li b{font-size:22px}
 .fbar{margin-top:6px}
 .phone{width:auto;height:100%;max-height:calc(100vh - 290px);justify-self:center;border-radius:38px;padding:9px}
 .scr{border-radius:30px}
}

/* ---------- "Kiekvienoje svetainėje": live feature bento ---------- */
.kit{padding:120px var(--pad) 20px}
.kit-head{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;margin-bottom:34px}
.kit-head h2{font-weight:900;font-size:clamp(40px,6vw,100px);line-height:.92;letter-spacing:-.045em}
.kit-head p{font-size:20px;line-height:1.55}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px)}
.bx{background:var(--board);color:var(--flapt);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:300px;position:relative;overflow:hidden;grid-column:span 2}
.bx.w{grid-column:span 3}.bx.full{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr 1.2fr;align-items:center;gap:28px}.bx.full .tag{grid-column:1/-1}.bx.full .demo{min-height:0;width:330px}
.bx h3{font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.bx p{font-size:16px;line-height:1.5;color:#cfcbbf}
.bx .demo{flex:1;display:grid;place-items:center;min-height:130px}
.bx .tag{font-weight:700;font-size:11px;letter-spacing:.1em;color:#8f8f88}
/* 1 speed race */
.race{width:100%;display:flex;flex-direction:column;gap:14px}
.race div{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;font-size:13px;font-weight:700;color:#8f8f88}
.race i{display:block;height:12px;background:#262626;border-radius:6px;position:relative;overflow:hidden}
.race i:after{content:'';position:absolute;inset:0;border-radius:6px;transform-origin:0 50%;transform:scaleX(0);background:#555}
.race div.me{color:var(--flapt)}.race div.me i:after{background:var(--yellow)}
.kit.in .race i:after{animation:race 4.5s infinite}
.kit.in .race div.me i:after{animation-name:raceme}
@keyframes race{0%{transform:scaleX(0)}75%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes raceme{0%{transform:scaleX(0)}22%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.race b{font-family:'Big Shoulders Display';font-weight:800;font-size:15px;color:var(--yellow)}
/* 2 responsive reflow */
.reflow{width:min(100%,300px);height:150px;position:relative}
.reflow .fr{position:absolute;left:50%;top:50%;width:260px;height:150px;margin:-75px 0 0 -130px;border:2px solid #3a3a3a;border-radius:8px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px;transition:all .9s cubic-bezier(.7,0,.2,1)}
.reflow .fr span{background:#2a2a2a;border-radius:3px}.reflow .fr span:first-child{grid-column:1/-1;background:var(--yellow)}
.kit.in .reflow .fr{animation:reflow 5s cubic-bezier(.7,0,.2,1) infinite}
@keyframes reflow{0%,35%{width:260px;margin-left:-130px;grid-template-columns:1fr 1fr;border-radius:8px}50%,85%{width:84px;margin-left:-42px;grid-template-columns:1fr;border-radius:16px}100%{width:260px;margin-left:-130px;border-radius:8px}}
/* 3 google snippet */
.snip{width:100%;background:#fff;color:#1d1d1f;border-radius:10px;padding:12px 14px;font-size:12px}
.snip .u{color:#5f6368;font-size:11px}.snip h5{color:#1a0dab;font-size:15px;font-weight:600;margin:3px 0}
.snip .d{color:#4d5156;line-height:1.4}
.snip .d span{background:linear-gradient(rgba(255,195,0,.55),rgba(255,195,0,.55)) 0 0/0 100% no-repeat;transition:background-size 1.2s .6s}
.kit.in .snip .d span{background-size:100% 100%}
/* 4 https lock */
.lock{display:flex;align-items:center;gap:10px;background:#1f1f1f;border-radius:30px;padding:10px 18px;font-size:15px;font-weight:600}
.lock svg path.sh{transform-origin:12px 10px;transition:transform .6s cubic-bezier(.7,0,.2,1) .8s}
.lock svg path.sh{transform:translateY(-3px)}.kit.in .lock svg path.sh{transform:none}
.lock em{font-style:normal;color:#7BD88F}
/* 5 mail */
.mail{font-family:'Big Shoulders Display';font-weight:800;font-size:clamp(26px,2.6vw,38px);letter-spacing:.01em;white-space:nowrap}
.mail span{color:var(--yellow)}
.mail:after{content:'';display:inline-block;width:3px;height:.8em;background:var(--yellow);margin-left:3px;animation:qc 1s steps(1) infinite;vertical-align:-2px}
/* 6 month of fixes */
.cal{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:100%;max-width:330px}
.cal i{aspect-ratio:1;border-radius:3px;background:#262626;transition:background .3s}
.cal i.on{background:var(--yellow)}
@media (max-width:860px){
 .kit{padding:80px 14px 10px}.kit-head{grid-template-columns:1fr;gap:16px}.kit-head p{font-size:17px}
 .bento{grid-template-columns:1fr}.bx,.bx.w,.bx.full{grid-column:auto;min-height:0;display:flex}.bx.full{align-items:stretch}.bx.full .demo{width:100%;justify-items:start}
 .bx h3{font-size:23px}.bx p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.kit.in .race i:after,.kit.in .reflow .fr{animation:none}.race i:after{transform:none}}