@import "_sub.css";
/* hogyan-mukodik.css — /hogyan-mukodik (docs/02; MOTION 3.8, 4.5, 4.6) */

/* ---------- nyitókép ---------- */
.hm-hero__side{display:flex;justify-content:flex-end}
.hm-count{display:grid;justify-items:end;gap:14px}
.hm-count__n{font-family:"Manrope Outline",var(--f-sans);font-size:clamp(8rem,3rem + 14vw,19rem);line-height:.78;font-weight:800;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c-fog) 50%,transparent);font-variant-numeric:tabular-nums}
.hm-count__k{color:var(--c-text-2-dark);text-align:right;line-height:1.9}
@media (max-width:899px){.hm-hero__side{justify-content:flex-start}.hm-count{justify-items:start;grid-template-columns:auto 1fr;align-items:end}.hm-count__n{font-size:clamp(5rem,3rem + 16vw,8rem)}.hm-count__k{text-align:left}}

/* ---------- A jel útja (signalpath, teljes) ---------- */
.sp-sec{padding-block:clamp(56px,6vw,96px)}
.sp-sec .sp-list{margin-top:clamp(40px,4vw,64px)}
.sp-sec [data-meeting]{position:relative}
.sp-sec [data-meeting] .m-tag{position:absolute;top:0;right:0;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-2-dark);border:1px solid color-mix(in srgb,var(--c-fog) 25%,transparent);padding:4px 6px}
.sp-sec [data-meeting] .m-eyebrow{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-2-dark);margin:0 0 14px}
.sp-sec [data-meeting] .m-time{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.9rem;letter-spacing:-.02em;margin:0 0 6px}
.sp-sec [data-meeting] .m-time::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-lime);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-lime) 18%,transparent)}
.sp-sec [data-meeting] .m-meta{margin:0;color:var(--c-text-2-dark)}
/* JS nélkül / betöltés előtt: rendezett lista */
.sp-sec .sp-list:not(.sp-ol){list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;counter-reset:sp}
.sp-sec .sp-list:not(.sp-ol)>li{counter-increment:sp;display:grid;gap:6px;padding:16px;border:1px solid rgba(169,176,214,.18);border-radius:10px}
.sp-sec .sp-list:not(.sp-ol)>li::before{content:"[ " counter(sp,decimal-leading-zero) " ]";font:500 var(--fs-mono)/1 var(--f-mono);letter-spacing:.06em;color:var(--c-lime)}
.sp-sec .sp-list:not(.sp-ol) .sp-name{font-weight:700}
.sp-sec .sp-list:not(.sp-ol) .sp-receipt{font:500 .8rem/1.5 var(--f-mono);color:var(--c-text-2-dark)}
.sp-sec:not(:has(.sp--pinned)) [data-meeting]:not(.sp-meet-wrap [data-meeting]){max-width:320px;margin-top:24px;padding:18px;border-radius:14px;background:var(--c-ink-2,#262C52)}

/* ---------- definíció ---------- */

/* ---------- MŰHELY-SZALAG (workshop) ---------- */
.hm-st .sec-head{margin-bottom:28px}
.hm-st__after{margin-top:clamp(40px,5vw,72px);max-width:30ch}
.workshop{position:relative}
.ws__head{display:none}
.ws__tape{list-style:none;margin:0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;max-width:var(--maxw);margin-inline:auto}
.ws__st{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 30px;background:var(--c-fog);color:var(--c-ink);border-radius:6px;min-width:0}
.ws__st::before,.ws__st::after{content:"";position:absolute;left:0;right:0;height:7px;background:radial-gradient(circle at 6px 50%,var(--c-ink) 3px,transparent 3.5px) 0 0/14px 7px repeat-x;pointer-events:none}
.ws__st::before{top:-3px}.ws__st::after{bottom:-3px}
.ws__ico{display:block;width:64px;height:64px;color:var(--c-ink)}
.ws__ico svg{width:100%;height:100%;overflow:visible}
.ws__ico .o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws__ico .f{fill:var(--c-cobalt)}
.ws__no2{color:var(--c-text-2-light)}
.ws__name{font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);letter-spacing:-.025em}
.ws__desc{color:var(--c-text-2-light);font-size:.98rem;line-height:1.5}
.ws__slip{margin-top:auto;padding:12px 14px;border:1px dashed rgba(11,16,51,.3);border-radius:3px;font:500 .8rem/1.5 var(--f-mono);letter-spacing:0;background:#fff}
.ws__slip+.ws__slip{margin-top:0}
.ws__stamp{position:absolute;right:18px;top:22px;font-size:.72rem;padding:6px 8px;border-radius:3px}
.ws__stamp{color:var(--c-fog);background:var(--c-cobalt);transform:rotate(-4deg)}
.ws__end{display:none;position:relative}
/* ikonok: alapállapot = végállapot (statikus/JS nélkül is értelmes), .is-live újrajátssza a mozdulatot egyszer */
.ws-sweep{stroke:var(--c-cobalt);stroke-width:2.4;stroke-linecap:round;transform-origin:32px 32px;transform:rotate(40deg)}
.ws-blip{fill:var(--c-cobalt)}
.ws-drop{fill:var(--c-cobalt);opacity:0}
.ws-out{stroke:var(--c-ink-3,#6E7494);stroke-width:2;stroke-linecap:round}
.ws-lens{transform:translate(0,0)}
.ws-beam{transform-origin:32px 20px}
.ws-hand{fill:none;stroke:var(--c-cobalt);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ws-cross .o{stroke:var(--c-cobalt)}
.ws-cross{transform-origin:32px 32px}
.ws-x{stroke:var(--c-ink-3,#6E7494);stroke-width:2.2;stroke-linecap:round}
.ws-ink{fill:none;stroke:var(--c-cobalt);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ws-t{font:500 9px var(--f-mono);fill:var(--c-text-2-light)}
.ws-t2{fill:var(--c-ink);font-weight:600}
.ws-strike,.ws-ok{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ws-strike{stroke:var(--c-ink-3,#6E7494)}
.ws-ok{stroke:var(--c-cobalt);stroke-width:2.4}
.ws-stamp{transform:translateY(0)}
.ws-check{fill:none;stroke:var(--c-cobalt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ws__st.is-live .ws-sweep{animation:wsSweep 1.4s var(--ease-huzat) 1 both}
.ws__st.is-live .ws-blip{animation:wsBlip .5s var(--ease-kattanas) both}
.ws__st.is-live .b1{animation-delay:.35s}.ws__st.is-live .b2{animation-delay:.7s}.ws__st.is-live .b3{animation-delay:1.05s}
.ws__st.is-live .ws-drop{animation:wsDrop 1s var(--ease-huzat) 2 both}
.ws__st.is-live .d2{animation-delay:.2s}.ws__st.is-live .d3{animation-delay:.4s}
.ws__st.is-live .ws-out{animation:wsFade .4s 1s both}
.ws__st.is-live .ws-lens{animation:wsLens 1.6s var(--ease-huzat) 1 both}
.ws__st.is-live .ws-beam{animation:wsBeam 1.3s var(--ease-kattanas) 1 both}
.ws__st.is-live .ws-hand{animation:wsDraw 1.1s cubic-bezier(.5,.1,.3,1) .25s 1 both}
.ws__st.is-live .ws-cross{animation:wsLock .7s var(--ease-kattanas) 1 both}
.ws__st.is-live .ws-env{animation:wsBounce 1s var(--ease-huzat) 1 both}
.ws__st.is-live .ws-x{animation:wsFade .3s .8s both}
.ws__st.is-live .ws-ink{animation:wsDraw 1s linear .1s 1 both}
.ws__st.is-live .ws-pen{animation:wsPen 1s linear .1s 1 both}
.ws__st.is-live .ws-strike{animation:wsDraw .45s var(--ease-jel) .2s both}
.ws__st.is-live .ws-t2{animation:wsFade .3s .7s both}
.ws__st.is-live .ws-ok{animation:wsDraw .4s var(--ease-jel) 1s both}
.ws__st.is-live .ws-stamp{animation:wsStamp .55s var(--ease-kattanas) .2s both}
.ws__st.is-live .ws__stamp{animation:wsStampTag .3s var(--ease-kattanas) .62s both}
.ws__st.is-live .ws-check{animation:wsDraw .6s var(--ease-jel) .2s both}
@keyframes wsSweep{from{transform:rotate(-320deg)}to{transform:rotate(40deg)}}
@keyframes wsBlip{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes wsDrop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(40px)}}
@keyframes wsFade{from{opacity:0}to{opacity:1}}
@keyframes wsLens{0%{transform:translate(-20px,-14px)}40%{transform:translate(-6px,-14px)}70%{transform:translate(-14px,-2px)}100%{transform:none}}
@keyframes wsBeam{0%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}100%{transform:none}}
@keyframes wsDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wsLock{from{transform:scale(1.6) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wsBounce{0%{transform:none}40%{transform:translateX(12px)}60%{transform:translateX(4px)}80%{transform:translateX(8px)}100%{transform:none}}
@keyframes wsPen{from{transform:translate(-26px,-26px)}to{transform:none}}
@keyframes wsStamp{0%{transform:translateY(-18px)}60%{transform:translateY(3px)}100%{transform:none}}
@keyframes wsStampTag{from{opacity:0;transform:rotate(-4deg) scale(1.3)}to{opacity:1;transform:rotate(-4deg) scale(1)}}

/* --- pinned: a szalag vízszintesen halad, a szekció kitűzve (CSS sticky) --- */
.ws--pinned .ws__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3svh,40px);padding-top:calc(var(--header-h-small) + 8px);padding-bottom:12px}
.ws--pinned .ws__head,.ws--cards .ws__head{display:flex;align-items:center;gap:18px;color:var(--c-text-2-dark)}
.ws__head .ws__no{color:var(--c-lime)}
.ws__nm{font-weight:700;color:var(--c-fog);min-width:12ch}
.ws__track{flex:1 1 auto;height:2px;background:rgba(169,176,214,.2);position:relative;overflow:hidden}
.ws__bar{position:absolute;inset:0;background:var(--c-lime);transform-origin:left;transform:scaleX(0)}
.ws--pinned .ws__tape{display:flex;gap:0;width:max-content;max-width:none;margin:0;will-change:transform;padding-block:6px}
.ws--pinned .ws__st,.ws--cards .ws__st{flex:0 0 clamp(300px,27vw,400px);border-radius:0;border-right:1px dashed rgba(11,16,51,.28);transition:background var(--t-3),opacity var(--t-3)}
.ws--pinned .ws__st:first-child,.ws--cards .ws__st:first-child{border-radius:6px 0 0 6px}
.ws--pinned .ws__st.is-past{opacity:.55}
.ws--pinned .ws__st.is-live{background:#fff}
.ws--pinned .ws__end,.ws--cards .ws__end{display:flex;align-items:center;flex:0 0 clamp(300px,30vw,440px);padding:0 0 0 28px}
.ws__tear{position:absolute;left:0;top:-3px;bottom:-3px;width:14px;background:var(--c-fog);clip-path:polygon(0 0,100% 4%,0 8%,100% 12%,0 16%,100% 20%,0 24%,100% 28%,0 32%,100% 36%,0 40%,100% 44%,0 48%,100% 52%,0 56%,100% 60%,0 64%,100% 68%,0 72%,100% 76%,0 80%,100% 84%,0 88%,100% 92%,0 96%,100% 100%,0 100%)}
.ws__meet{position:relative;width:100%;max-width:340px;padding:22px;border-radius:14px;background:var(--c-ink-2,#262C52);color:var(--c-fog);border:1px solid rgba(169,176,214,.2);transform:translateX(-18px) rotate(0);transition:transform 720ms var(--ease-kattanas),box-shadow 720ms var(--ease-jel)}
.ws__end.is-torn .ws__meet{transform:translateX(24px) rotate(-3deg);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--c-lime) 30%,transparent)}
.ws__meet .m-tag{position:absolute;top:12px;right:12px;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-2-dark);border:1px solid rgba(169,176,214,.3);padding:4px 6px}
.ws__meet .m-eyebrow{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-2-dark);margin-bottom:14px}
.ws__meet .m-time{display:flex;align-items:center;gap:10px;font-weight:760;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.02em;margin-bottom:6px}
.ws__meet .m-time::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-lime);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-lime) 18%,transparent)}
.ws__meet .m-meta{color:var(--c-text-2-dark)}

/* --- cards: natív vízszintes scroll-snap szalag (érintő, keskeny) --- */
.ws--cards .ws__head{margin-bottom:18px}
.ws--cards .ws__tape{display:flex;gap:0;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:8px;scroll-padding-inline:var(--gutter)}
.ws--cards .ws__tape::-webkit-scrollbar{display:none}
.ws--cards .ws__st{flex-basis:min(82vw,360px);scroll-snap-align:center}
.ws--cards .ws__end{flex-basis:min(82vw,360px);scroll-snap-align:center;padding-right:var(--gutter)}
.ws--cards .ws__tape:focus-visible{outline:2px solid var(--c-lime);outline-offset:4px}

/* ---------- szemléltető példa ---------- */
.chip{display:inline-flex;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--c-line);font-size:.92rem;font-weight:600}
.tbl--two td{width:50%;font-size:1rem;line-height:1.55}
mark.fix{background:rgba(110,116,148,.16);color:inherit;text-decoration:line-through;text-decoration-color:rgba(11,16,51,.45);padding:0 2px}
mark.good{background:color-mix(in srgb,var(--c-cobalt) 14%,transparent);color:inherit;padding:0 2px}

/* ---------- emberi kapuk (kobalt) ---------- */
.hm-gatelist{counter-reset:g;display:grid;gap:0;border-top:1px solid rgba(244,245,250,.24)}
.hm-gate{position:relative;display:grid;grid-template-columns:clamp(80px,9vw,140px) minmax(0,1fr) auto;gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid rgba(244,245,250,.24)}
.hm-gate__no{color:var(--c-lime);padding-top:.4em}
.hm-gate__c h3{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);letter-spacing:-.03em;margin-bottom:12px}
.hm-gate__c p{color:#DDE2FF;max-width:58ch}
.hm-gate::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--c-lime);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease-jel)}
.sec.is-in .hm-gate::before{transform:scaleX(1)}
.sec.is-in .hm-gate:nth-child(2)::before{transition-delay:.15s}.sec.is-in .hm-gate:nth-child(3)::before{transition-delay:.3s}.sec.is-in .hm-gate:nth-child(4)::before{transition-delay:.45s}
.hm-gate__status{position:relative;align-self:center;display:grid;justify-items:end}
.hm-gate__status>*{grid-area:1/1;white-space:nowrap;transition:opacity var(--t-3) var(--ease-jel),transform var(--t-3) var(--ease-kattanas)}
.hm-gate__ok{background:var(--c-fog);color:var(--c-ink);border-color:transparent;opacity:0;transform:scale(1.2)}
.sec.is-in .hm-gate__wait{opacity:0;transition-delay:1.8s}
.sec.is-in .hm-gate__ok{opacity:1;transform:none;transition-delay:1.8s}
@media (max-width:759px){.hm-gate{grid-template-columns:1fr;gap:10px}.hm-gate__status{justify-self:start}.hm-gate__status{justify-items:start}}

/* ---------- jelek ---------- */

/* ---------- csatorna ---------- */
.hm-chan__h2{grid-column:1/6}
.hm-chan__body{grid-column:7/13}
@media (max-width:899px){.hm-chan__body{margin-top:24px}}

/* ---------- megbeszélés ---------- */
.hm-meet__h2{margin-bottom:clamp(28px,3vw,44px)}
.hm-meet__def{margin:0 0 clamp(48px,6vw,88px);padding-left:clamp(20px,3vw,40px);border-left:3px solid var(--c-lime)}
.hm-meet__def p{max-width:30ch;font-size:clamp(1.4rem,1rem + 1.8vw,2.6rem);line-height:1.18;letter-spacing:-.03em;font-weight:640}
.hm-meet__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,96px)}
.hm-meet__h3{font-size:var(--fs-small);font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-2-dark);margin-bottom:20px}
.hm-cond{display:grid;gap:0;border-top:1px solid rgba(169,176,214,.18)}
.hm-cond li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid rgba(169,176,214,.18)}
.hm-cond p{color:var(--c-text-2-dark)}
.hm-cond strong{color:var(--c-fog)}
.hm-cond__ck{width:30px;height:30px;border-radius:50%;background:var(--c-cobalt);display:grid;place-items:center}
.hm-cond__ck svg{width:18px;height:18px;fill:none;stroke:var(--c-fog);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hm-meet__after{margin-top:clamp(40px,5vw,72px)}
@media (max-width:899px){.hm-meet__grid{grid-template-columns:1fr}}

/* ---------- riport ---------- */
.hm-replist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.hm-replist li{display:grid;gap:16px;align-content:start;padding:clamp(20px,2.4vw,32px);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:color-mix(in srgb,#fff 50%,transparent)}
.hm-replist__ic svg{width:30px;height:30px;fill:none;stroke:var(--c-cobalt);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-replist p{color:var(--c-text-2-light)}
.hm-replist strong{color:var(--c-ink)}
@media (max-width:899px){.hm-replist{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hm-replist{grid-template-columns:1fr}}

/* ---------- amit nem csinálunk ---------- */

/* ---------- adatok + idő ---------- */
.hm-two__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
.hm-two__c .sec-h2{font-size:clamp(1.6rem,1rem + 2.2vw,3rem);margin-bottom:22px}
.hm-two__c--time{padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--line)}
@media (max-width:899px){.hm-two__grid{grid-template-columns:1fr}.hm-two__c--time{padding-left:0;border-left:0;padding-top:32px;border-top:1px solid var(--line)}}

/* ---------- csökkentett mozgás: minden végállapot, animáció nélkül ---------- */
@media (prefers-reduced-motion:reduce){
  .ws__st *,.ws__st{animation:none!important;transition:none!important}
  .hm-gate__wait{opacity:0}.hm-gate__ok{opacity:1;transform:none}
  .hm-gate::before{transform:scaleX(1);transition:none}
  .ws__meet{transition:none}
}

/* ---------- v2 + ABSZTRAKCIÓ (2026-10-05, A-agens) ---------- */
.hm-gates__more{margin-top:clamp(28px,3vw,44px);max-width:70ch;border-top-color:rgba(244,245,250,.24)}
.hm-gates__more .more__body{color:#DDE2FF}
.hm-gates__more .ticks li::before{background:var(--c-lime)}
.hm-meet__more{max-width:70ch}
.hm-meet__grid--one{grid-template-columns:minmax(0,1fr);max-width:860px}
.hm-meet__more{margin-top:clamp(20px,2.4vw,32px)}
.hm-replist--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-replist--4 li{position:relative;gap:20px;min-height:180px}
.hm-replist--4 p{color:var(--c-ink);font-size:1.05rem}
.hm-replist__n{margin-top:auto;color:var(--c-cobalt);letter-spacing:.08em}
.hm-replist--4 .hm-replist__ic svg{transition:transform var(--t-3) var(--ease-kattanas)}
.hm-replist--4 li::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c-cobalt);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-jel)}
.sec.is-in .hm-replist--4 li::after{transform:scaleX(1)}
.sec.is-in .hm-replist--4 li:nth-child(2)::after{transition-delay:.15s}.sec.is-in .hm-replist--4 li:nth-child(3)::after{transition-delay:.3s}.sec.is-in .hm-replist--4 li:nth-child(4)::after{transition-delay:.45s}
@media (hover:hover){.hm-replist--4 li:hover .hm-replist__ic svg{transform:translateY(-3px) scale(1.08)}}
@media (max-width:899px){.hm-replist--4{grid-template-columns:1fr 1fr}.hm-replist--4 li{min-height:0}}
@media (max-width:560px){.hm-replist--4{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hm-replist--4 li::after{transform:scaleX(1);transition:none}}