/* Élő ábrák: görgetésre kirajzolódó „irányítóterem” panelek. A .w akkor kap .on-t, amikor látszik. */

/* panel = egy alkalmazásablak */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 1px 2px rgba(18,17,24,.04),0 18px 50px -22px rgba(18,17,24,.22);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);font:600 14px var(--f-body);color:var(--muted)}
.panel-h .live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(23,160,106,.15)}
.panel-h b{color:var(--ink);font-weight:650}
.panel-h .r{margin-left:auto;font-weight:500;font-size:13px}
.panel-b{padding:22px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cap{margin-top:14px;font:500 14px var(--f-body);color:var(--muted)}

/* ikonos sorok */
.rows .it{display:grid;grid-template-columns:44px 1fr;column-gap:16px}
.rows .it > .ib{grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.rows .it h3{margin:3px 0 6px}

/* kapu: a lakat kinyílik, amikor odaérsz */
.lockgate{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;margin-top:26px;padding:14px 18px 14px 14px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);font-size:16px;line-height:1.45}
.lockgate .lk{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff4ee;color:var(--warm);transition:background .5s .6s,color .5s .6s}
.lockgate .lk .sh{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .6s;transform-origin:17px 11px}
.lockgate b{display:block;font:700 13.5px var(--f-body);color:var(--warm);transition:color .5s .6s}
.lockgate.on .lk{background:#e7f6ef;color:var(--ok)}
.lockgate.on .lk .sh{transform:translateY(-3px) rotate(-28deg)}
.lockgate.on b{color:var(--ok)}
.lockgate.done .lk{background:var(--ink);color:#fff}
.lockgate.done b{color:var(--ink)}

/* 1. akadályok: mindenki húz, terv nincs */
.prob{position:relative;aspect-ratio:1.45;max-width:620px;margin:0 auto}
.prob svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prob .ln{stroke:#d6d2e2;stroke-width:1.5;stroke-dasharray:4 6;fill:none;vector-effect:non-scaling-stroke}
.prob .me{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:#fff;border-radius:20px;padding:16px 22px;text-align:center;box-shadow:0 20px 40px -16px rgba(18,17,24,.5);z-index:1}
.prob .me b{display:block;font:700 22px var(--f-display)}
.prob .me span{display:inline-block;margin-top:6px;font:600 13px var(--f-body);background:var(--warm);color:#fff;border-radius:999px;padding:4px 10px}
.prob .c{position:absolute;transform:translate(-50%,-50%) scale(.9);opacity:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:600 15px var(--f-body);white-space:nowrap;
  transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*90ms);box-shadow:0 8px 20px -14px rgba(18,17,24,.4)}
.prob .c::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:2px;background:var(--warm);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.3,1);transition-delay:calc(.8s + var(--i)*120ms)}
.prob.on .c{opacity:1;transform:translate(-50%,-50%)}
.prob.on .c::after{transform:scaleX(1)}
.prob.on .c{color:var(--muted)}

/* 2. sín: 5 szakasz, egy-egy kapuval */
.rail{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.rail::before,.rail::after{content:"";position:absolute;left:28px;right:calc(20% - 28px);top:27px;height:3px;border-radius:9px;background:var(--line)}
.rail::after{background:linear-gradient(90deg,var(--accent),var(--warm));transform:scaleX(0);transform-origin:left;transition:transform 2.6s cubic-bezier(.5,0,.2,1) .2s}
.on .rail::after{transform:scaleX(1)}
.rail .st{position:relative;padding-right:18px}
.rail .o{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--muted);
  transition:background .4s,border-color .4s,color .4s;transition-delay:calc(.2s + var(--i)*.55s)}
.rail .o .a,.rail .o .b{position:absolute;transition:opacity .3s,transform .4s;transition-delay:calc(.2s + var(--i)*.55s)}
.rail .o .b{opacity:0;transform:scale(.5)}
.on .rail .o{background:var(--ink);border-color:var(--ink);color:#fff}
.on .rail .st:last-child .o{background:var(--warm);border-color:var(--warm)}
.on .rail .o .a{opacity:0;transform:scale(.5)}
.on .rail .o .b{opacity:1;transform:none}
.rail .n{margin-top:18px;font:600 13.5px var(--f-body);color:var(--accent)}
.rail h3{margin-top:4px;font-size:22px}
.rail p{margin-top:6px;font-size:15px;color:var(--muted);line-height:1.45}
.rail .g{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font:600 13px/1.3 var(--f-body);color:var(--ink);background:var(--bg);border-radius:10px;padding:6px 9px}
.days{display:flex;align-items:center;gap:14px;margin-top:34px;font:600 14px var(--f-body);color:var(--muted)}
.days .bar{flex:1;height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.days .bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:9px;transition:width 2.8s cubic-bezier(.5,0,.2,1) .2s}
.rail-w.on .days .bar i{width:100%}
.days b{color:var(--ink);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
@media (max-width:900px){
  .rail{grid-template-columns:1fr;gap:26px}
  .rail::before,.rail::after{left:26.5px;right:auto;top:28px;bottom:28px;width:3px;height:auto;transform-origin:top}
  .rail::after{transform:scaleY(0)}
  .on .rail::after{transform:scaleY(1)}
  .rail .st{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding:0}
  .rail .st > :not(.o){grid-column:2}
  .rail .n{margin-top:2px}
}

/* 3. mérés: négy élő műszer */
.tk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tk .m{background:var(--bg);border-radius:16px;padding:16px}
.tk .m h4{margin:0 0 12px;font:600 13.5px var(--f-body);color:var(--muted)}
.gauge{width:100%;max-width:200px;display:block;margin:0 auto}
.gauge .tr{stroke:var(--line)}
.gauge .va{stroke:url(#gg);stroke-dasharray:252;stroke-dashoffset:252;transition:stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1) .3s}
.on .gauge .va{stroke-dashoffset:60}
.gauge .ndl{transform-origin:100px 100px;transform:rotate(-90deg);transition:transform 1.6s cubic-bezier(.3,0,.2,1) .3s}
.on .gauge .ndl{transform:rotate(47deg)}
.gauge text{font:700 15px var(--f-body);fill:var(--ink)}
.gauge .sm{font:500 11px var(--f-body);fill:var(--muted)}
.fun{display:grid;gap:7px}
.fun div{display:grid;grid-template-columns:78px 1fr;gap:8px;align-items:center;font:600 12.5px var(--f-body);color:var(--muted)}
.fun i{height:18px;border-radius:6px;background:var(--accent);width:0;transition:width 1s cubic-bezier(.3,0,.2,1);transition-delay:calc(.3s + var(--i)*.15s);opacity:calc(1 - var(--i)*.18)}
.on .fun i{width:var(--v)}
.tis{display:flex;align-items:flex-end;gap:8px;height:96px;padding-top:18px;position:relative}
.tis i{flex:1;border-radius:6px 6px 3px 3px;background:#d9d4ea;height:0;transition:height 1s cubic-bezier(.3,0,.2,1);transition-delay:calc(.3s + var(--i)*.12s)}
.tis i.hot{background:var(--warm)}
.on .tis i{height:var(--v)}
.tis .tag{position:absolute;top:-4px;right:0;font:600 11.5px var(--f-body);color:#b4532a;background:#fff1ea;border-radius:6px;padding:3px 7px;opacity:0;transition:opacity .4s 1.4s}
.on .tis .tag{opacity:1}
.lc{display:flex;align-items:flex-end;justify-content:center;gap:22px;height:96px;padding-top:6px}
.lc div{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px var(--f-body);color:var(--muted)}
.lc i{width:38px;border-radius:8px 8px 3px 3px;height:0;transition:height 1.1s cubic-bezier(.3,0,.2,1) .4s}
.lc .l i{background:var(--ok)}.lc .c i{background:#d9d4ea}
.on .lc .l i{height:72px}.on .lc .c i{height:22px}

/* 4. működés: munkafolyamat-lánc */
.wf{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding-top:26px}
.wf .nd{position:relative;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i)*.14s)}
.on .wf .nd{opacity:1;transform:none}
.wf .nd:not(:last-child)::after{content:"";position:absolute;top:28px;left:calc(50% + 32px);width:calc(100% - 52px);height:2px;background:var(--line)}
.wf .bx{width:56px;height:56px;margin:0 auto;border-radius:18px;background:var(--bg);display:grid;place-items:center;color:var(--ink);border:1px solid var(--line)}
.wf .nd.hot .bx{background:#fff1ea;border-color:var(--warm);color:#b4532a;animation:pulse 1.8s infinite 1.2s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,138,93,.45)}70%{box-shadow:0 0 0 12px rgba(240,138,93,0)}100%{box-shadow:0 0 0 0 rgba(240,138,93,0)}}
.wf .nd.hot::before{content:"Szűk keresztmetszet";position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font:650 11.5px var(--f-body);color:#b4532a}
.wf .lb{margin-top:10px;font:600 13.5px/1.25 var(--f-body)}
.wf .tg{display:inline-block;margin-top:8px;font:650 11.5px var(--f-body);padding:4px 8px;border-radius:7px;opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s;transition-delay:calc(1s + var(--i)*.12s)}
.on .wf .tg{opacity:1;transform:none}
.tg.ai{background:var(--accent-soft);color:var(--accent)}
.tg.sw{background:#e9f1fd;color:#1f5fbf}
.tg.hu{background:#e7f6ef;color:#137a52}
.tg.os{background:#fdf3e2;color:#8a5a0b}
@media (max-width:760px){.wf{grid-template-columns:repeat(3,1fr);row-gap:40px}.wf .nd::after{display:none}}

/* 5. ügynökök: Cowork → skill-fájlok → ügynökök */
.ag{display:grid;grid-template-columns:.8fr auto 1fr auto 1.1fr;gap:14px;align-items:center}
.ag .ar{color:var(--muted)}
.ag .wins{display:grid;gap:8px}
.ag .win{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ag .win .t{display:flex;gap:4px;padding:6px 8px;background:var(--bg)}
.ag .win .t i{width:6px;height:6px;border-radius:50%;background:#d6d2e2}
.ag .win .t span{margin-left:6px;font:600 10.5px var(--f-body);color:var(--muted)}
.ag .win p{margin:0;padding:7px 9px;display:grid;gap:4px}
.ag .win p i{height:5px;border-radius:4px;background:#e4e1ee}
.ag .win p i:nth-child(2){width:70%}
.ag .files{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.ag .files i{aspect-ratio:.78;border-radius:4px 7px 4px 4px;background:var(--accent-soft);border:1px solid #d9cefa;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.3s + var(--i)*28ms)}
.on .ag .files i{opacity:1;transform:none}
.ag .fl{margin-top:8px;font:600 11.5px var(--f-body);color:var(--muted);text-align:center}
.ag .bots{display:grid;gap:7px}
.ag .bot{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font:600 13px var(--f-body);opacity:.35;transition:opacity .4s;transition-delay:calc(1.6s + var(--i)*.2s)}
.ag .bot .av{width:26px;height:26px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center}
.ag .bot .av .ic{width:15px;height:15px}
.ag .bot em{margin-left:auto;font:600 11px var(--f-body);font-style:normal;color:var(--ok);display:flex;align-items:center;gap:5px}
.ag .bot em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.on .ag .bot{opacity:1}
@media (max-width:820px){.ag{grid-template-columns:1fr}.ag .ar{transform:rotate(90deg);justify-self:center}}

/* 6. értékesítés: reakcióidő élőben */
.sp{position:relative;padding:8px 4px 0}
.sp .tr{position:absolute;left:32px;right:32px;top:36px;height:4px;border-radius:9px;background:var(--line)}
.sp .tr i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width 3s linear .4s}
.on .sp .tr i{width:100%}
.sp ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.sp li{text-align:center;font:600 13px/1.3 var(--f-body)}
.sp .bx{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:all .35s;transition-delay:calc(.4s + var(--i)*1s)}
.on .sp .bx{background:var(--ink);border-color:var(--ink);color:#fff}
.on .sp li:last-child .bx{background:var(--ok);border-color:var(--ok)}
.sp .watch{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.sp .watch b{font:700 30px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sp .watch span{font:600 13px var(--f-body);padding:5px 10px;border-radius:999px;background:var(--bg);color:var(--muted);transition:all .3s}
.sp .watch span.ok{background:#e7f6ef;color:#137a52}

/* 7. növekedés: csatornák körben, valódi logókkal */
.orb{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto}
.orb .rg{position:absolute;border-radius:50%;border:1.5px solid var(--line)}
.orb .rg.o2{inset:0;border-style:dashed}
.orb .rg.o1{inset:19%}
.orb .spin{position:absolute;inset:0;animation:spin 90s linear infinite}
.orb .spin.rev{animation-direction:reverse;animation-duration:70s}
.orb .lg{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 8px 18px -12px rgba(18,17,24,.35);animation:spin 90s linear infinite reverse}
.orb .spin.rev .lg{animation-direction:normal;animation-duration:70s}
.orb .lg.paid{border-color:#ffd9c6;box-shadow:0 0 0 4px #fff4ee,0 8px 18px -12px rgba(18,17,24,.35)}
.orb .lg i{width:22px;height:22px;background:var(--c,#111);-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.orb .core{position:absolute;inset:37%;border-radius:28px;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font:700 16px/1.15 var(--f-display);padding:10px;
  box-shadow:0 24px 50px -20px rgba(18,17,24,.6)}
.orb .core small{display:block;font:500 12px var(--f-body);color:#bdb8cf;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:16px;font:500 13.5px var(--f-body);color:var(--muted)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:14px;height:14px;border-radius:5px;border:1px solid var(--line);background:#fff}
.legend i.paid{border-color:#ffd9c6;box-shadow:0 0 0 2px #fff4ee}
@media (max-width:560px){.orb .lg{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px}.orb .lg i{width:16px;height:16px}.orb .core{font-size:13px}}

/* 8. szabadság: a vállalkozás fut, te kilépsz */
.fr{display:grid;justify-items:center;gap:0;padding:8px 0 4px}
.fr .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:520px}
.fr .op{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:16px;border:1.5px dashed var(--line);font:600 14px var(--f-body);color:var(--muted);text-align:center;
  transition:all .45s;transition-delay:calc(1.4s + var(--i)*.15s)}
.on .fr .op{border-style:solid;border-color:var(--ink);color:var(--ink);background:#fff}
.fr .me{margin:16px 0;display:flex;align-items:center;gap:8px;background:var(--warm);color:#fff;font:700 15px var(--f-body);padding:10px 16px;border-radius:999px;
  transform:translateY(118px);transition:transform 1s cubic-bezier(.5,0,.2,1) .4s;position:relative;z-index:2;box-shadow:0 12px 26px -12px rgba(240,138,93,.9)}
.on .fr .me{transform:none}
.fr .biz{width:100%;max-width:520px;border-radius:20px;background:var(--ink);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:14px}
.fr .biz .gear{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.fr .biz .gear .ic{animation:spin 6s linear infinite}
.fr .biz b{font:700 18px var(--f-display);display:block}
.fr .biz small{font:500 13px var(--f-body);color:#bdb8cf}
.fr .biz em{margin-left:auto;font:600 12.5px var(--f-body);font-style:normal;color:#7be0b4;display:flex;align-items:center;gap:6px}
.fr .biz em::before{content:"";width:8px;height:8px;border-radius:50%;background:#33d38e;box-shadow:0 0 0 4px rgba(51,211,142,.2)}
.fr .stem{width:2px;height:18px;background:var(--line)}

/* 9. chat → skill → ügynök */
.lp{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch}
.lp .ar{align-self:center;color:var(--muted)}
.lp .cl{border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:190px}
.lp .cl h4{margin:0 0 4px;font:700 20px var(--f-display);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.lp .cl h4 small{font:500 13px var(--f-body);color:var(--muted);letter-spacing:0}
.lp .bub{max-width:88%;font:500 13px/1.35 var(--f-body);padding:8px 11px;border-radius:14px;opacity:0;transform:translateY(6px);transition:all .4s;transition-delay:calc(.3s + var(--i)*.5s)}
.lp .bub.u{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.lp .bub.a{background:var(--bg);border-bottom-left-radius:4px}
.lp .fs{position:relative;flex:1;min-height:110px}
.lp .fs span{position:absolute;left:50%;top:50%;width:150px;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line);font:600 11.5px var(--f-body);display:flex;gap:6px;align-items:center;
  transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.3,1.3,.5,1);transition-delay:1.6s;box-shadow:0 6px 16px -10px rgba(18,17,24,.4)}
.lp .fs span .ic{width:15px;height:15px;color:var(--accent)}
.on .lp .fs span:nth-child(1){transform:translate(-62%,-95%) rotate(-6deg)}
.on .lp .fs span:nth-child(2){transform:translate(-50%,-50%) rotate(1deg)}
.on .lp .fs span:nth-child(3){transform:translate(-38%,-5%) rotate(5deg)}
.lp .bs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:auto}
.lp .bs i{aspect-ratio:1;border-radius:10px;background:var(--bg);color:var(--muted);display:grid;place-items:center;position:relative;transition:all .35s;transition-delay:calc(2.4s + var(--i)*.15s)}
.lp .bs i .ic{width:16px;height:16px}
.lp .bs i::after{content:"";position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid #fff;opacity:0;transition:opacity .3s;transition-delay:inherit}
.on .lp .bub{opacity:1;transform:none}
.on .lp .bs i{background:var(--ink);color:#fff}
.on .lp .bs i::after{opacity:1}
.lp .cl.last{background:var(--surface)}
.lp .zz{font:500 13px/1.4 var(--f-body);color:var(--muted)}
@media (max-width:860px){.lp{grid-template-columns:1fr}.lp .ar{transform:rotate(90deg);justify-self:center}}

/* 10. a PDF, ahogy kézbe veszed */
.doc{position:relative;width:min(420px,100%);aspect-ratio:.86;margin:0 auto;perspective:1400px}
.doc img{position:absolute;top:6%;width:62%;border-radius:8px;box-shadow:0 30px 60px -24px rgba(18,17,24,.5),0 2px 6px rgba(18,17,24,.08);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.doc .p1{left:30%;transform:rotate(9deg) translateY(16px);z-index:1}
.doc .p2{left:20%;transform:rotate(3deg) translateY(6px);z-index:2}
.doc .p3{left:6%;transform:rotate(-4deg);z-index:3}
.doc:hover .p1{transform:rotate(14deg) translate(26px,22px)}
.doc:hover .p2{transform:rotate(5deg) translate(12px,8px)}
.doc:hover .p3{transform:rotate(-6deg) translate(-8px,-6px)}
.doc .chip{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px;font:650 14px var(--f-body);box-shadow:0 12px 28px -14px rgba(18,17,24,.45);display:flex;gap:7px;align-items:center}
.doc .chip.c1{left:0;bottom:12%}
.doc .chip.c2{right:0;top:2%}
.doc .chip .ic{width:16px;height:16px;color:var(--accent)}

/* 11. 60 lépés térkép */
.m60 .row{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.m60 .row:last-of-type{border-bottom:1px solid var(--line)}
.m60 .row h3{font-size:19px}
.m60 .row small{font-size:13.5px;color:var(--muted)}
.m60 .tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.m60 .tile{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:#fff;font:600 13px var(--f-body);color:#b5b0c6;cursor:pointer;padding:0;
  transition:background .35s,color .35s,border-color .35s,transform .15s;transition-delay:calc(var(--i)*14ms)}
.m60.on .tile{background:var(--accent-soft);border-color:#ddd2fb;color:var(--accent)}
.m60 .tile:hover,.m60 .tile[aria-pressed="true"]{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;transform:translateY(-2px);transition-delay:0s}
.m60 .dt{margin-top:24px;display:grid;grid-template-columns:170px 1fr;gap:20px;min-height:76px}
.m60 .dt .n{font:700 42px/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums}
.m60 .dt .t{font:650 clamp(20px,2.2vw,27px)/1.2 var(--f-display);letter-spacing:-.02em}
.m60 .dt .p{font-size:14.5px;color:var(--muted);margin-top:4px}
@media (max-width:760px){.m60 .row,.m60 .dt{grid-template-columns:1fr;gap:8px}.m60 .tiles{grid-template-columns:repeat(6,1fr)}}

/* 12. nyitány: a videóból a monitorba */
.stage{height:400vh;position:relative;background:#0e0d13}
.stage .pin{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);overflow:hidden}
.stage video{position:absolute;transform-origin:0 0;will-change:transform}
.stage .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,14,.84) 0%,rgba(10,9,14,.5) 45%,rgba(10,9,14,0) 78%);pointer-events:none}
.stage .intro{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:#fff}
.stage .intro .kicker{font:600 16px var(--f-body);color:#c9b8ff;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.stage .intro .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warm);animation:pulse 1.8s infinite}
.stage .intro h1{font-size:clamp(42px,6vw,88px);font-weight:750;max-width:12.5ch;color:#fff}
.stage .intro .lead{margin-top:22px;color:#d6d2e4;max-width:36ch}
.stage .intro .btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.stage .stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stage .stats div{font:500 14px var(--f-body);color:#bdb8cf}
.stage .stats b{display:block;font:700 28px/1.1 var(--f-display);color:#fff;letter-spacing:-.02em}
.stage .hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#bdb8cf;font:500 14px var(--f-body);display:flex;flex-direction:column;align-items:center;gap:8px}
.stage .hint i{width:1.5px;height:30px;background:linear-gradient(#bdb8cf,transparent)}
.stage .room{position:absolute;inset:0;background:var(--bg);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none}
.stage .room.on{pointer-events:auto}
.stage .screen{width:min(1100px,100%);background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 120px -40px rgba(18,17,24,.35);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden}
.stage .left{padding:36px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.stage .status{display:flex;align-items:center;gap:10px;font:600 14.5px var(--f-body);color:var(--muted)}
.stage .status b{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(23,160,106,.18)}
.stage .clock{font:700 clamp(64px,8.4vw,124px)/1 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin-top:22px}
.stage .clock small{font-size:.3em;letter-spacing:0;color:var(--muted);font-weight:600;margin-left:8px}
.stage .left h2{font-size:clamp(24px,2.5vw,32px);margin-top:16px;max-width:16ch}
.stage .counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:28px}
.stage .counts div{background:var(--bg);border-radius:16px;padding:12px 14px}
.stage .counts b{display:block;font:700 28px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.stage .counts span{font-size:13px;color:var(--muted);line-height:1.3;display:block;margin-top:4px}
.stage .right{padding:24px 24px 18px;display:flex;flex-direction:column;min-height:0}
.stage .right h3{font:600 14px var(--f-body);color:var(--muted);letter-spacing:0;margin:4px 4px 12px}
.stage .feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;height:380px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.stage .feed li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;animation:feedin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes feedin{from{opacity:0;transform:translateY(-14px)}}
.stage .feed .ck{width:30px;height:30px;border-radius:50%;background:#e7f6ef;color:var(--ok);display:grid;place-items:center}
.stage .feed .ck .ic{width:16px;height:16px;stroke-width:2.4}
.stage .feed .agn{font:600 12.5px var(--f-body);color:var(--accent)}
.stage .feed p{font-size:15px;line-height:1.4}
.stage .feed time{font:500 12.5px var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.stage .note{font-size:12.5px;color:var(--muted);padding:10px 4px 0}
@media (max-width:860px){
  .stage .screen{grid-template-columns:1fr}
  .stage .left{border-right:0;border-bottom:1px solid var(--line);padding:22px 20px}
  .stage .clock{margin-top:10px}
  .stage .counts{padding-top:16px}
  .stage .counts b{font-size:22px}
  .stage .right{padding:14px}
  .stage .feed{height:190px}
  .stage .stats{gap:18px}
  .stage .stats b{font-size:22px}
}
@media (max-width:860px){
  .stage .shade{background:linear-gradient(180deg,rgba(10,9,14,.15) 0%,rgba(10,9,14,.55) 40%,rgba(10,9,14,.92) 72%)}
  .stage .intro{top:auto;bottom:70px;transform:none!important}
  .stage .intro h1{font-size:clamp(36px,10vw,52px)}
  .stage .intro .lead{margin-top:14px;font-size:17px}
  .stage .acts-row{margin-top:22px}
  .stage .stats{margin-top:22px}
  .stage .hint{bottom:14px;font-size:12.5px}.stage .hint i{display:none}
}
@media (max-width:560px){.prob .c{font-size:12.5px;padding:7px 10px}.prob .me b{font-size:18px}}
@media (prefers-reduced-motion:reduce){.orb .spin,.orb .lg,.fr .biz .gear .ic{animation:none}}

/* ===== Tus és pecsét bőr: az ábrák papírra, tussal, egy pecsétvörössel ===== */
.panel{border-radius:4px;border:1px solid var(--ink);background:var(--surface);box-shadow:0 24px 50px -34px rgba(28,27,31,.35)}
.panel-h{color:var(--muted)}
.panel-h .live{background:var(--shu);box-shadow:none;border-radius:2px;transform:rotate(-6deg)}
.rows .it > .ib{border-radius:50%;background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.cap{color:var(--muted)}
.lockgate{border-radius:4px;border-color:var(--line);background:var(--surface)}
.lockgate .lk{border-radius:50%;background:var(--shu-soft);color:var(--shu)}
.lockgate b{color:var(--shu)}
.lockgate.on .lk{background:var(--ink);color:var(--bg)}
.lockgate.on b{color:var(--ink)}
.lockgate.done .lk{background:var(--shu);color:#fff}
.lockgate.done b{color:var(--shu)}
.tk .m{background:var(--bg);border-radius:4px}
.tis i{background:#d8d2c4}
.tis .tag{color:var(--shu);background:var(--shu-soft)}
.lc .c i{background:#d8d2c4}
.wf .bx{border-radius:50%;background:var(--bg);border-color:var(--ink)}
.wf .nd.hot .bx{background:var(--shu-soft);border-color:var(--shu);color:var(--shu);animation-name:pulse-shu}
@keyframes pulse-shu{0%{box-shadow:0 0 0 0 rgba(200,55,45,.4)}70%{box-shadow:0 0 0 12px rgba(200,55,45,0)}100%{box-shadow:0 0 0 0 rgba(200,55,45,0)}}
.wf .nd.hot::before{color:var(--shu)}
.wf .nd:not(:last-child)::after{background:var(--ink);opacity:.25}
.wf .tg,.tg.ai,.tg.sw,.tg.hu,.tg.os{background:transparent;border:1px solid var(--ink);color:var(--ink);border-radius:3px}
.tg.ai{border-color:var(--shu);color:var(--shu)}
.ag .win,.ag .bot{border-radius:4px}
.ag .files i{background:#ece8de;border-color:#d8d2c4;border-radius:2px 5px 2px 2px}
.ag .bot .av{border-radius:50%}
.ag .bot em{color:var(--shu)}
.ag .bot em::before{background:var(--shu)}
.on .sp li:last-child .bx{background:var(--shu);border-color:var(--shu)}
.sp .watch span.ok{background:var(--shu-soft);color:var(--shu)}
.orb .lg{border-radius:50%;border-color:var(--ink);box-shadow:none}
.orb .lg i{background:var(--ink)!important}
.orb .lg.paid{border-color:var(--shu);box-shadow:0 0 0 3px var(--shu-soft)}
.orb .lg.paid i{background:var(--shu)!important}
.orb .rg{border-color:#d8d2c4}
.orb .core{border-radius:50%;inset:36%;font-family:var(--f-display)}
.legend i{border-radius:50%;border-color:var(--ink)}
.legend i.paid{border-color:var(--shu);box-shadow:0 0 0 2px var(--shu-soft)}
.fr .op{border-radius:4px}
.fr .biz{border-radius:4px}
.fr .biz .gear{border-radius:50%}
.fr .biz em{color:#f0b8b1}
.fr .biz em::before{background:var(--shu);box-shadow:0 0 0 4px rgba(200,55,45,.25)}
.fr .me{box-shadow:0 12px 26px -12px rgba(200,55,45,.8)}
.doc img{border-radius:3px}
.doc .chip{border-radius:4px;border-color:var(--ink)}
.doc .chip .ic{color:var(--shu)}
.m60 .tile{border-radius:4px}
.m60.on .tile{background:#ece8de;border-color:#d8d2c4;color:var(--ink)}
.m60 .tile:hover,.m60 .tile[aria-pressed="true"]{background:var(--shu)!important;border-color:var(--shu)!important;color:#fff!important}
.m60 .dt .n{color:var(--shu);font-family:var(--f-display)}
.m60 .row{border-color:var(--line)}

/* ===== Ikonos folyamat-sáv (AI tanulás, Így építek) ===== */
.chain{position:relative}
.chain ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);position:relative}
.chain ol::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:28px;height:2px;background:var(--ink);opacity:.18}
.chain ol::after{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:28px;height:2px;background:var(--shu);transform:scaleX(0);transform-origin:left;transition:transform 2.2s cubic-bezier(.5,0,.2,1) .2s}
.chain.on ol::after{transform:scaleX(1)}
.chain li{position:relative;text-align:center;padding:0 6px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i)*.28s)}
.chain.on li{opacity:1;transform:none}
.chain .bx{position:relative;z-index:1;width:56px;height:56px;margin:0 auto;border-radius:50%;background:var(--surface);border:1.5px solid var(--ink);display:grid;place-items:center;color:var(--ink)}
.chain li.hot .bx{background:var(--shu);border-color:var(--shu);color:#fff;transform:rotate(-6deg)}
.chain b{display:block;margin-top:12px;font:600 14.5px/1.3 var(--f-body)}
.chain small{display:block;margin-top:3px;font:600 12.5px var(--f-body);color:var(--shu)}
.chain .end{position:absolute;right:0;top:-34px;font:700 14px var(--f-display);color:var(--shu);border:2px solid var(--shu);border-radius:4px;padding:4px 10px;transform:rotate(-4deg) scale(1.4);opacity:0;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;transition-delay:calc(var(--n)*.28s + .3s);filter:url(#rough)}
.chain.on .end{transform:rotate(-4deg) scale(1);opacity:1}
.sec.ink .chain .bx{background:#2a2830;border-color:#f4eee4;color:#f4eee4}
@media (max-width:760px){
  .chain ol{grid-template-columns:repeat(3,1fr);row-gap:28px}
  .chain ol::before,.chain ol::after{display:none}
  .chain .end{position:static;display:inline-block;margin-top:22px}
}

/* ===== Fájlkártyák borítóval (Fájlok) ===== */
.files3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--ink)}
.fcard .cov{position:relative;aspect-ratio:16/10;overflow:hidden;background:#141318;border-bottom:1px solid var(--ink)}
.fcard .cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9);transition:transform .6s}
.fcard:hover .cov img{transform:scale(1.04)}
.fcard .cov h3{position:absolute;left:18px;top:16px;right:18px;color:#f7f1e6;font-size:clamp(22px,2.2vw,28px);line-height:1.1}
.fcard .cov h3 em{font-style:normal;background:var(--shu);color:#fff;padding:0 6px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fcard .apps{position:absolute;left:18px;bottom:14px;display:flex;gap:6px}
.fcard .apps i{width:28px;height:28px;border-radius:7px;background:#f4eee4;display:grid;place-items:center}
.fcard .apps i::after{content:"";width:16px;height:16px;background:var(--ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.fcard .vid{position:absolute;right:14px;bottom:14px;font:600 11.5px var(--f-body);color:#f0b8b1;border:1px solid rgba(240,184,177,.5);border-radius:3px;padding:3px 8px}
.fcard .bd{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.fcard .bd h4{margin:0 0 6px;font:700 19px var(--f-display)}
.fcard .bd p{color:var(--ink-2);font-size:15.5px}
.fcard .bd .btn{margin-top:auto;align-self:flex-start;opacity:.55;cursor:default;pointer-events:none;font-size:14.5px;padding:13px 18px}
.fcard .bd .btn::before{content:"";width:14px;height:14px;border:1.5px solid currentColor;border-radius:2px 5px 2px 2px}
.fcard .bd .sp{height:18px}
@media (max-width:900px){.files3{grid-template-columns:1fr}}
.tools li{display:inline-flex;align-items:center;gap:6px}
.tools li i{width:14px;height:14px;background:var(--ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}