/* ErgoFlow — strony aplikacji (moduly JST). Uklad wzorowany na stronie Zwrotnika:
   hero z dwoma wezwaniami, wyrozniki, przeplyw procesu, siatka funkcji, "co sie zmienia", FAQ, CTA.

   Wszystkie kolory pochodza z tokenow motywu, wiec strona jest bursztynowa w segmencie JST
   i poprawnie przechodzi w tryb wysokiego kontrastu — bez ani jednej wartosci na sztywno.

   Reset marginesow: be.min.css nadaje spanom margin-left w procentach ukladu, co rozjezdza
   elementy w rzedach. Sekcje maja wlasny uklad na flex/grid, wiec zerujemy to zakresowo. */
.ea *{margin:0}
.ea{--ea-gap:20px;color:var(--tx,#E8ECF2);font-family:var(--font-body,'Inter',system-ui,sans-serif)}
.ea-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ea h2{font-family:var(--font-display,'Manrope',sans-serif);font-size:clamp(24px,3.2vw,34px);
  line-height:1.18;color:var(--tx,#E8ECF2);font-weight:700;text-wrap:balance}
.ea h3{font-family:var(--font-display,'Manrope',sans-serif);font-size:19px;color:var(--tx,#E8ECF2);font-weight:700}
.ea p{color:var(--mut,#8B94A7);line-height:1.65}
.ea-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono,monospace);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut,#8B94A7)}
.ea-eyebrow::before{content:'';width:20px;height:1px;background:var(--accent);flex:none}
.ea-sec{padding:56px 0;border-top:1px solid var(--line,#2A3040)}

/* ── hero ─────────────────────────────────────────────────── */
.ea-hero{padding:70px 0 56px}
.ea-hero .ea-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.ea-hero h1{font-family:var(--font-display,'Manrope',sans-serif);font-size:clamp(32px,5vw,50px);
  line-height:1.06;font-weight:800;margin:16px 0 18px;text-wrap:balance;color:var(--tx,#E8ECF2)}
.ea-hero .lead{font-size:clamp(16px,1.9vw,19px);max-width:56ch}
.ea-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ea-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:12px 24px;border-radius:999px;
  font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;transition:filter .18s,border-color .18s,color .18s}
.ea-btn.primary{background:var(--accent);color:var(--on-accent,#04120c)}
.ea-btn.primary:hover{filter:brightness(1.08);color:var(--on-accent,#04120c)}
.ea-btn.ghost{color:var(--tx,#E8ECF2);border-color:var(--line-strong,#5A6579)}
.ea-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* wyrozniki obok hero — jakosciowe, nie liczbowe */
.ea-highlights{display:flex;flex-direction:column;gap:12px}
.ea-hl{display:flex;gap:14px;align-items:flex-start;background:var(--panel,#1B1F2B);
  border:1px solid var(--line,#2A3040);border-left:3px solid var(--accent);border-radius:12px;padding:16px 18px}
.ea-hl b{display:block;font-size:14.5px;color:var(--tx,#E8ECF2);margin-bottom:3px}
.ea-hl span{font-size:13.5px;color:var(--mut,#8B94A7);line-height:1.5}

/* ── przeplyw procesu ─────────────────────────────────────── */
.ea-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;counter-reset:step}
.ea-stepbox{position:relative;background:var(--panel,#1B1F2B);border:1px solid var(--line,#2A3040);
  border-radius:14px;padding:20px 18px 18px}
.ea-stepbox::before{counter-increment:step;content:counter(step);position:absolute;top:-11px;left:18px;
  width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent,#04120c);
  font-family:var(--font-mono,monospace);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ea-stepbox b{display:block;font-size:15px;color:var(--tx,#E8ECF2);margin:6px 0 6px}
.ea-stepbox span{font-size:13.5px;color:var(--mut,#8B94A7);line-height:1.55}
.ea-stepbox.end{border-color:var(--accent)}

/* ── siatka funkcji ───────────────────────────────────────── */
.ea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:26px}
.ea-feat{background:var(--panel,#1B1F2B);border:1px solid var(--line,#2A3040);border-radius:14px;padding:22px;
  transition:border-color .2s,transform .2s}
.ea-feat:hover{border-color:var(--accent);transform:translateY(-2px)}
.ea-feat h3{margin-bottom:8px}
.ea-feat p{font-size:14px}

/* ── co sie zmienia ───────────────────────────────────────── */
.ea-change{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.ea-col{background:var(--panel2,#161A24);border:1px solid var(--line,#2A3040);border-radius:14px;padding:22px}
.ea-col.after{border-color:var(--accent)}
.ea-col h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
  font-family:var(--font-mono,monospace);color:var(--mut,#8B94A7);font-weight:600}
.ea-col.after h3{color:var(--accent)}
.ea-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.ea-col li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--mut,#8B94A7)}
.ea-col li::before{content:'—';color:var(--dim,#7C8798);flex:none}
.ea-col.after li{color:var(--tx,#E8ECF2)}
.ea-col.after li::before{content:'✓';color:var(--accent);font-weight:700}

/* ── FAQ ──────────────────────────────────────────────────── */
.ea-faq{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:860px}
.ea-q{background:var(--panel,#1B1F2B);border:1px solid var(--line,#2A3040);border-radius:12px;overflow:hidden}
.ea-q>summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15.5px;color:var(--tx,#E8ECF2);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.ea-q>summary::-webkit-details-marker{display:none}
.ea-q>summary::after{content:'+';color:var(--accent);font-size:20px;line-height:1;flex:none}
.ea-q[open]>summary::after{content:'–'}
.ea-q[open]>summary{color:var(--accent)}
.ea-q p{padding:0 20px 18px;font-size:14.5px;max-width:75ch}

/* ── CTA ──────────────────────────────────────────────────── */
.ea-cta{margin:0 0 8px;background:var(--panel,#1B1F2B);border:1px solid var(--accent);border-radius:18px;
  padding:32px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ea-cta h2{font-size:clamp(22px,2.6vw,28px)}
.ea-cta p{margin-top:8px;max-width:60ch}

@media(max-width:960px){
  .ea-hero .ea-in{grid-template-columns:1fr;gap:32px}
  .ea-flow{grid-template-columns:repeat(2,1fr)}
  .ea-change{grid-template-columns:1fr}
}
@media(max-width:560px){.ea-flow{grid-template-columns:1fr}}