/* Шаблон сторінки функції (однаковий для всіх 7): перший екран з живим обʼєктом → історія кроками (сцена прилипає, текст гортається) →
   «Усе, що вміє» рядками → «В роботі» → «Разом з іншими» → питання → наступна функція наїжджає шаром. */
.wrapx{max-width:1320px;margin:0 auto;padding-inline:24px}
@media (max-width:900px){.wrapx{padding-inline:16px}}

/* перехід між сторінками сайту — «перегортання» без білого спалаху (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .6s var(--ease) both}
::view-transition-new(root){animation:vt-in .7s var(--ease) both}
@keyframes vt-out{to{transform:scale(.94);opacity:.4;filter:blur(3px)}}
@keyframes vt-in{from{transform:translateY(40%)}}

/* 1. перший екран функції */
.fhero{position:relative;padding:140px 0 60px;overflow:hidden;isolation:isolate;background:radial-gradient(60% 50% at 80% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 70%),linear-gradient(var(--bg),var(--s-fn) 80%)}
.fhero .wrapx{display:grid;gap:26px}
.xcrumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--ink3)}
.xcrumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.xcrumbs a:hover{color:var(--ink)}
.fhero h1{font-size:clamp(42px,7vw,104px);max-width:13ch}
.fhero h1 em{font-style:normal;color:var(--c)}
.fhero .lead{max-width:640px;color:var(--ink2);font-size:clamp(17px,1.5vw,20px)}
.fhero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.fstage{position:relative;margin-top:40px}
.fstage .dglive{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.fstage .vis{max-width:900px;margin:0 auto} /* сцена функції (scenes.js) на першому екрані */
.fstage .note{margin-top:12px;font-size:13.5px;color:var(--ink3);display:flex;gap:8px;align-items:center}
.fstage .note::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);box-shadow:0 0 10px var(--c)}

/* 2. історія кроками: сцена прилипає справа (на телефоні — зверху), кроки гортаються */
.story{position:relative;background:var(--s-fn);padding:40px 0 0}
.story .wrapx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.st-steps{display:grid}
.step{min-height:78vh;display:grid;align-content:center;gap:16px;opacity:.28;transition:opacity .6s var(--ease)}
.step.on{opacity:1}
.step .k{font:500 13px var(--f-mono);color:var(--c);display:flex;gap:12px;align-items:center;font-variant-numeric:tabular-nums}
.step .k i{flex:1;max-width:120px;height:2px;background:var(--line2);position:relative;overflow:hidden}
.step .k i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.step.on .k i::after{transform:none}
.step h2{font-size:clamp(28px,3.2vw,48px)}
.step p{color:var(--ink2);max-width:46ch}
.st-stage{position:sticky;top:calc(50vh - min(300px,34vh));height:min(600px,68vh);align-self:start;margin-top:12vh}
.pane{position:absolute;inset:0;display:none;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow)}
.pane.on{display:block;z-index:1}.pane.was{display:block;z-index:0} /* уходящая панель — под новой, пока та проявляется (fn.js) */
.pane .cap{position:absolute;left:16px;top:14px;z-index:3;font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){
  .story .wrapx{grid-template-columns:1fr;gap:0}
  /* телефон: панель вище (вміст не обрізається) і непрозора — текст кроків, що їде під неї, не просвічує */
  .st-stage{order:-1;top:calc(env(safe-area-inset-top,0px) + 70px);height:58vh;margin-top:0;z-index:2;border-radius:18px;background:var(--s-fn,var(--bg))}
  .st-stage .pane{background:linear-gradient(var(--card),var(--card)),var(--s-fn,var(--bg))}
  .step{min-height:60vh;align-content:end;padding-bottom:8vh}
}

/* 3. усе, що вміє — рядки на всю ширину */
.cando{background:var(--bg);padding:130px 0 100px}
.cando h2{font-size:clamp(32px,4vw,58px);margin:18px 0 40px;max-width:18ch}
.rows{border-top:1px solid var(--line)}
.rw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.rw b{font:700 20px/1.25 var(--f-body);letter-spacing:-.01em}
.rw span{color:var(--ink2)}
.rw em{font-style:normal;font:500 12px var(--f-mono);color:var(--c);white-space:nowrap}
@media (max-width:760px){.rw{grid-template-columns:1fr;gap:6px}.rw em{order:-1}}

/* 4. в роботі — картки перегортаються вбік */
.inwork{background:var(--s-fn);padding:120px 0;overflow:hidden}
.inwork h2{font-size:clamp(32px,4vw,58px);margin:18px 0 40px}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;perspective:1600px}
.case{display:grid;gap:14px;align-content:start;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);transform-origin:0 50%}
.case .who{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.case h3{font-size:22px;letter-spacing:-.03em}
.case p{color:var(--ink2);font-size:15.5px}
.case .res{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
.case .thumb{height:150px;border-radius:12px;border:1px solid var(--line);background:var(--card-in) radial-gradient(circle at 1px 1px,var(--card-in2) 1px,transparent 0) 0 0/16px 16px;overflow:hidden}
.case .thumb svg{width:100%;height:100%}
@media (max-width:900px){.cases{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.case{scroll-snap-align:start}}

/* 5. разом з іншими */
.together{background:var(--bg);padding:120px 0}
.together .wrapx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.together h2{font-size:clamp(30px,3.6vw,52px);margin:18px 0 20px}
.together ul{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--line)}
.together li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.together li a{color:var(--ink);font-weight:600}
.web7{width:100%;aspect-ratio:1.25}
.web7 .hub{fill:var(--card);stroke:var(--c);stroke-width:2}
.web7 .sat{fill:var(--card);stroke-width:2}
.web7 .ln{fill:none;stroke-width:2;stroke-opacity:.6}
.web7 text{fill:var(--ink)}
.ticons{height:100%;display:flex;gap:18px;align-items:center;justify-content:center}
.ticons span{width:52px;height:52px;padding:11px;border-radius:10px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.ticons svg{width:100%;height:100%}
.web7 text{font:600 14px var(--f-body)}
@media (max-width:900px){.together .wrapx{grid-template-columns:1fr}}

/* 7. наступна функція — наїжджає шаром */
.nextfn{position:relative;display:block;margin-top:40px;min-height:80vh;border-radius:28px 28px 0 0;background:var(--s-nx);box-shadow:var(--shadow-up);overflow:hidden;color:var(--ink)}
.nextfn .wrapx{padding-block:110px 90px;display:grid;gap:20px;justify-items:start}
.nextfn .num{--c:var(--c-nx)}
.nextfn h2{font-size:clamp(44px,8vw,120px);letter-spacing:-.05em}
.nextfn p{color:var(--ink2);max-width:52ch;font-size:18px}
.nextfn .go{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:18px;color:var(--c-nx)}
.nextfn .go i{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--c-nx);color:var(--ev-ink);font-style:normal;transition:transform .5s var(--ease)}
.nextfn:hover .go i{transform:translate(4px,-4px)}
.nextfn .glow{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-15vw;bottom:-35vw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-nx) var(--glow-a),transparent),transparent 62%);pointer-events:none}