/* ErgoFlow — style stron strukturalnych (produkty/blog). Dark, on-brand, Poppins (z BeTheme). */
:root{
  /* Paleta stron strukturalnych jest teraz pochodna motywu CMS-a (render/tokens.ts),
     a nie osobnym zestawem kolorow BeTheme. Fallbacki = wartosci EFX. */
  --ef-bg:var(--bg,#0E1117); --ef-bg2:var(--panel2,#161A24); --ef-card:#20273600; --ef-card-bg:var(--panel,#1B1F2B);
  --ef-green:var(--mint,#00E5A0); --ef-blue:var(--blue,#3B82F6); --ef-text:var(--tx,#E8ECF2);
  --ef-muted:var(--mut,#8B94A7); --ef-line:var(--line,#2A3040);
}
.ef body,body.ef-page{background:var(--ef-bg);}
.ef-page #Content{background:var(--ef-bg);}
.ef-wrap{max-width:1200px;margin:0 auto;padding:0 20px;color:var(--ef-text);
  font-family:var(--font-body,'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif);}
.ef-hero{padding:90px 0 40px;text-align:center;}
.ef-eyebrow{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ef-green);border:1px solid var(--ef-line);border-radius:999px;padding:8px 18px;margin-bottom:22px;}
.ef-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.08;margin:0 0 16px;font-weight:700;}
.ef-hero h1 .g{color:var(--ef-green);}
.ef-lead{font-size:clamp(16px,2vw,20px);color:var(--ef-muted);max-width:760px;margin:0 auto;}
.ef-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding:30px 0 90px;}
.ef-card{background:var(--ef-card-bg);border:1px solid var(--ef-line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s;}
.ef-card:hover{border-color:var(--ef-green);transform:translateY(-3px);}
.ef-badge{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ef-blue);margin-bottom:12px;}
.ef-card h3{font-size:22px;margin:0 0 8px;font-weight:600;}
.ef-card .ef-tag{color:var(--ef-green);font-size:14px;margin:0 0 12px;}
.ef-card p{color:var(--ef-muted);font-size:15px;line-height:1.6;margin:0 0 20px;flex:1;}
.ef-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ef-green);color:#0f1420;
  font-weight:600;text-decoration:none;padding:12px 22px;border-radius:999px;font-size:15px;
  transition:filter .2s;align-self:flex-start;}
.ef-btn:hover{filter:brightness(1.08);}
.ef-btn.ghost{background:transparent;color:var(--ef-text);border:1px solid var(--ef-line);}
.ef-btn.ghost:hover{border-color:var(--ef-green);}
/* detal */
.ef-detail{padding:80px 0 90px;}
.ef-detail .ef-back{color:var(--ef-muted);text-decoration:none;font-size:14px;}
.ef-detail .ef-back:hover{color:var(--ef-green);}
.ef-detail h1{font-size:clamp(30px,5vw,48px);margin:18px 0 10px;font-weight:700;}
.ef-detail .ef-tag{color:var(--ef-green);font-size:18px;margin:0 0 26px;}
.ef-body{font-size:17px;line-height:1.75;color:#d9dee7;max-width:820px;}
.ef-body p{margin:0 0 16px;}
.ef-features{list-style:none;padding:0;margin:34px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.ef-features li{background:var(--ef-card-bg);border:1px solid var(--ef-line);border-radius:12px;padding:20px;}
.ef-features li b{display:block;margin-bottom:6px;color:#fff;}
.ef-features li span{color:var(--ef-muted);font-size:14px;line-height:1.6;}
.ef-cta{margin-top:40px;padding:36px;background:linear-gradient(135deg,#1b2330,#141a24);
  border:1px solid var(--ef-line);border-radius:18px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ef-cta h2{margin:0;font-size:24px;}
.ef-cta p{margin:6px 0 0;color:var(--ef-muted);}
/* blog */
.ef-date{color:var(--ef-muted);font-size:13px;margin:0 0 12px;letter-spacing:.02em;}
.ef-detail .ef-date{margin:0 0 24px;}
.ef-cover{width:100%;max-width:900px;border-radius:14px;margin:0 0 30px;display:block;}
.ef-prose{font-size:17px;line-height:1.8;color:#d9dee7;max-width:820px;}
.ef-prose h2{color:#fff;font-size:26px;margin:36px 0 14px;font-weight:600;}
.ef-prose h3{color:#fff;font-size:21px;margin:28px 0 10px;font-weight:600;}
.ef-prose p{margin:0 0 18px;}
.ef-prose ul,.ef-prose ol{margin:0 0 18px;padding-left:22px;}
.ef-prose li{margin:0 0 8px;}
.ef-prose a{color:var(--ef-green);text-decoration:underline;text-underline-offset:3px;}
.ef-prose a:hover{filter:brightness(1.15);}
.ef-prose strong{color:#fff;}
.ef-prose blockquote{border-left:3px solid var(--ef-green);margin:20px 0;padding:6px 0 6px 20px;color:var(--ef-muted);}
/* formularz leada */
.ef-leadbox{margin-top:40px;padding:36px;background:linear-gradient(135deg,#1b2330,#141a24);
  border:1px solid var(--ef-line);border-radius:18px;}
.ef-leadbox-head h2{margin:0 0 6px;font-size:24px;}
.ef-leadbox-head p{margin:0 0 22px;color:var(--ef-muted);}
.ef-form{display:flex;flex-direction:column;gap:14px;max-width:720px;}
.ef-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ef-form-row>*{min-width:0;}
/* !important — nadpisujemy globalne style input BeTheme (content-box, margin), przez ktore pola sie nachodzily */
.ef-form input,.ef-form textarea{box-sizing:border-box!important;margin:0!important;width:100%;height:auto!important;
  background:#0f141d!important;border:1px solid var(--ef-line)!important;
  border-radius:10px;padding:13px 15px!important;color:var(--ef-text)!important;font-size:15px;line-height:1.4;
  font-family:inherit;transition:border-color .2s;-webkit-appearance:none;appearance:none;box-shadow:none!important;}
.ef-form input:focus,.ef-form textarea:focus{outline:none;border-color:var(--ef-green);}
.ef-form input::placeholder,.ef-form textarea::placeholder{color:#8b93a1;}
.ef-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0;}
.ef-consent{display:flex;align-items:flex-start;gap:10px;color:var(--ef-muted);font-size:14px;line-height:1.5;cursor:pointer;}
.ef-consent input{width:auto;margin-top:3px;accent-color:var(--ef-green);}
.ef-form button{align-self:flex-start;border:none;cursor:pointer;}
.ef-form-msg{font-size:14px;min-height:1px;}
.ef-form-msg.ok{color:var(--ef-green);}
.ef-form-msg.err{color:#ff8a8a;}
/* --- pogrupowana lista produktow --- */
.ef-hero-sm{padding:70px 0 30px;}
.ef-svg{display:block;}
.ef-catrow{display:grid;grid-template-columns:1fr 2fr;gap:44px;padding:46px 0;border-top:1px solid var(--ef-line);}
.ef-catrow:first-of-type{border-top:none;}
.ef-catlabel .ef-eyebrow{margin-bottom:14px;}
.ef-catlabel h2{font-size:27px;margin:0 0 12px;color:#fff;line-height:1.2;}
.ef-catlabel p{color:var(--ef-muted);font-size:15px;line-height:1.65;}
.ef-catcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px;align-content:start;}
.ef-pcard{background:var(--ef-card-bg);border:1px solid var(--ef-line);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s;overflow:hidden;}
.ef-pcard:hover{border-color:var(--ef-green);transform:translateY(-3px);}
/* karta z realna grafika produktu: thumbnail pelnej szerokosci + wypadka tresc */
.ef-pcard-img{padding:0;}
.ef-pcard-img .ef-pcard-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1;}
.ef-pthumb{aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--ef-line);}
.ef-pthumb img{width:100%;height:100%;display:block;}
.ef-stage-light{background:radial-gradient(circle at 50% 42%,#f5f7fa,#dde3ec);}
.ef-stage-light img{object-fit:contain;padding:14px;box-sizing:border-box;}
.ef-stage-dark img{object-fit:cover;}
.ef-pcard-img:hover .ef-pthumb img{transform:scale(1.03);}
.ef-pthumb img{transition:transform .35s ease;}
.ef-picon{width:52px;height:52px;border-radius:13px;background:rgba(47,212,192,.10);color:#2fd4c0;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.ef-picon .ef-svg{width:28px;height:28px;}
.ef-pcard h3{font-size:19px;margin:0 0 6px;color:#fff;}
.ef-ptag{color:var(--ef-green);font-size:13px;margin:0 0 10px;}
.ef-pcard p{color:var(--ef-muted);font-size:14px;line-height:1.6;margin:0 0 18px;flex:1;}
.ef-plink{color:var(--ef-green);font-weight:600;font-size:14px;}
.ef-plink:hover{filter:brightness(1.15);}
/* --- detal produktu --- */
.ef-phero{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;padding:26px 0 6px;}
.ef-phero-txt h1{font-size:clamp(30px,4.5vw,46px);margin:14px 0 10px;line-height:1.1;}
.ef-ptag-lg{color:var(--ef-green);font-size:20px;margin:0 0 20px;}
.ef-phero-txt .ef-body{margin-bottom:26px;}
.ef-phero-visual{display:flex;align-items:center;justify-content:center;}
.ef-phero-visual .ef-svg{width:auto;height:150px;color:#2fd4c0;background:linear-gradient(135deg,rgba(47,212,192,.12),rgba(47,155,243,.07));border:1px solid var(--ef-line);border-radius:24px;padding:40px;box-sizing:content-box;}
.ef-phero-stage{width:100%;max-width:430px;aspect-ratio:1/1;border-radius:24px;overflow:hidden;border:1px solid var(--ef-line);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px -30px rgba(0,0,0,.6);}
.ef-phero-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.ef-phero-stage.ef-stage-light img{object-fit:contain;padding:24px;box-sizing:border-box;}
.ef-fsec{padding:52px 0 6px;}
.ef-fsec .ef-eyebrow{margin-bottom:14px;}
.ef-fsec h2{font-size:28px;margin:0 0 26px;}
.ef-fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:18px;}
.ef-fcard{background:var(--ef-card-bg);border:1px solid var(--ef-line);border-radius:16px;padding:26px;}
.ef-ficon{width:46px;height:46px;border-radius:12px;background:rgba(140,192,74,.12);color:var(--ef-green);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.ef-ficon .ef-svg{width:26px;height:26px;}
.ef-fcard b{display:block;color:#fff;font-size:17px;margin-bottom:6px;}
.ef-fcard span{color:var(--ef-muted);font-size:14px;line-height:1.6;}
@media(max-width:860px){.ef-catrow{grid-template-columns:1fr;gap:22px;}.ef-phero{grid-template-columns:1fr;}.ef-phero-visual{order:-1;}}
@media(max-width:640px){.ef-hero{padding:60px 0 24px;}.ef-cta{flex-direction:column;align-items:flex-start;}.ef-form-row{grid-template-columns:1fr;}}

/* Link-akcja w karcie. UWAGA: .ef-cta to juz istniejacy baner CTA (blok z gradientem),
   wiec link ma wlasna nazwe. Bez wlasnej reguly przegladarka dawala domyslny niebieski,
   ktory na ciemnej karcie ma kontrast 1.75:1 — ponizej progu WCAG.
   Kolor z --accent, wiec w segmencie JST jest bursztynowy razem z reszta. */
.ef-more{display:inline-flex;align-items:center;gap:6px;min-height:32px;
  color:var(--accent,var(--ef-green));font-weight:600;font-size:14px;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s}
.ef-more:hover,.ef-more:focus-visible{border-bottom-color:currentColor}
.ef-card p+p{margin-top:10px}