:root{--bg:#edf1ef;--pane:#fff;--ink:#10282a;--mut:#4f6264;--line:#d0dad7;--dark:#0f3a37;--amb:#f2b01e;--amb2:#d99a0c;--r:6px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.6 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

input, textarea {
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}

h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;line-height:1.1;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:700}
.w{max-width:1120px;margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--amb);outline-offset:2px}
header{position:sticky;top:0;z-index:5;background:rgba(237,241,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:20px;height:64px}
.logo{font:700 22px "Bricolage Grotesque",sans-serif;text-decoration:none;color:var(--ink);margin-right:auto}
nav{display:flex;gap:20px;align-items:center}
nav a{color:var(--mut);text-decoration:none;font-size:15px}
nav a:hover{color:var(--ink)}
.lang{display:flex;gap:4px;font-size:14px}
.lang button{border:0;background:none;color:var(--mut);padding:4px 6px;cursor:pointer;font:inherit;border-bottom:2px solid transparent}
.lang button[aria-pressed=true]{color:var(--ink);border-color:var(--amb)}

.btn-login{background:var(--dark);color:#fff!important;padding:8px 14px;border-radius:var(--r);font-size:14px;font-weight:500;cursor:pointer;border:0}
.btn-login:hover{background:#266058}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:72px 0 88px;align-items:center}
h1{font-size:clamp(38px,5.4vw,66px);font-weight:700}
.lead{color:var(--mut);max-width:34em;margin:22px 0 32px;font-size:19px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 22px;border-radius:var(--r);font-weight:500;text-decoration:none;border:1px solid var(--ink);color:var(--ink);transition:background .15s;cursor:pointer;font-family:inherit;font-size:16px;background:none;text-align:center}
.btn.p{background:var(--amb);border-color:var(--amb)}
.btn.p:hover{background:var(--amb2);border-color:var(--amb2)}
.btn:not(.p):hover{background:#fff}
.demo{background:var(--dark);color:#e8f3f1;border-radius:14px;padding:18px;display:flex;flex-direction:column;min-height:520px}
.dh{font-size:14px;color:#9fc4bd;padding:2px 4px 14px;border-bottom:1px solid #266058;display:flex;justify-content:space-between;align-items:center}
.dh-status{font-size:11px;font-family:monospace;background:#1a504a;padding:2px 6px;border-radius:4px;color:#f2b01e}
.log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px 2px;max-height:260px}
.m{max-width:86%;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.45;animation:in .25s ease}
.m.u{align-self:flex-end;background:var(--amb);color:#0f3a37;border-bottom-right-radius:3px}
.m.b{align-self:flex-start;background:#1a504a;border-bottom-left-radius:3px}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.ty i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#9fc4bd;animation:bl 1s infinite}
.ty i:nth-child(2){animation-delay:.15s}.ty i:nth-child(3){animation-delay:.3s}
@keyframes bl{50%{opacity:.25}}
.stream-box{border-top:1px solid #266058;padding-top:10px;margin-top:4px}
.stream-title{font-size:11px;font-family:monospace;color:#9fc4bd;margin-bottom:6px}
.stream-code{background:#0a2a28;padding:8px 10px;border-radius:4px;font-family:monospace;font-size:11px;color:#f2b01e;overflow-x:auto;margin:0;min-height:48px}
.chips{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #266058;padding-top:12px;margin-top:auto}
.chips p{width:100%;margin:0 0 2px;font-size:13px;color:#9fc4bd}
.chips button{background:none;border:1px solid #3f7770;color:#e8f3f1;border-radius:99px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer;transition:background .15s}
.chips button:hover{background:#1a504a}
.chips button[aria-pressed=true]{background:var(--amb);border-color:var(--amb);color:#0f3a37}
section{padding:80px 0;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1.3fr;gap:56px}
.rows p{margin:0;padding:22px 0;border-top:1px solid var(--line);font-size:19px;display:flex;gap:16px}
.rows p span{color:var(--mut);font-weight:500;font-family:"Bricolage Grotesque",sans-serif}
.rows p:first-child{border-top:0;padding-top:4px}
.sub{color:var(--mut);max-width:38em;margin:16px 0 0}
.flow{overflow-x:auto;margin-top:36px}
.flow svg{min-width:680px;width:100%;height:auto;display:block}
.flow text{font:500 17px "IBM Plex Sans",sans-serif;fill:var(--ink)}
.flow rect{fill:var(--pane);stroke:var(--ink);stroke-width:1.5}
.flow .ln{stroke:var(--ink);stroke-width:1.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.flow.go .ln{animation:dr 1.1s ease forwards}
.flow.go .ln:nth-of-type(2){animation-delay:.4s}.flow.go .ln:nth-of-type(3){animation-delay:.8s}
@keyframes dr{to{stroke-dashoffset:0}}

.promo-banner{background:#0f3a37;color:#f2b01e;text-align:center;padding:12px;font-weight:700;font-size:15px;border-radius:var(--r);margin-bottom:24px;border:1px dashed var(--amb)}
.plans{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.plan{border:1px solid var(--line);background:var(--pane);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.plan.f{background:var(--dark);color:#e8f3f1;border-color:var(--dark);padding-top:36px;padding-bottom:36px}
.plan h3{font-size:24px}
.plan .pr-old{text-decoration:line-through;color:var(--mut);font-size:16px;margin-top:10px}
.plan.f .pr-old{color:#84aaa4}
.plan .pr{font:700 30px "Bricolage Grotesque",sans-serif;margin:2px 0 4px;color:var(--amb)}
.plan p{margin:0 0 20px;color:var(--mut);font-size:16px}
.plan.f p{color:#b5d2cd}
.plan-features{list-style:none;padding:0;margin:0 0 24px;font-size:15px;color:var(--mut);flex-grow:1}
.plan.f .plan-features{color:#b5d2cd}
.plan-features li{margin-bottom:8px;display:flex;align-items:center;gap:8px}
.plan-features li::before{content:"—";color:var(--amb)}
.tag{display:inline-block;background:var(--amb);color:#0f3a37;border-radius:99px;padding:2px 12px;font-size:13px;font-weight:500;margin-bottom:12px}
.anchor{margin-top:28px;color:var(--mut);max-width:40em}

details{border-top:1px solid var(--line);padding:18px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:500;font-size:18px}
details p{margin:10px 0 0;color:var(--mut)}
form{display:grid;gap:14px;max-width:560px}
label{font-size:15px;color:var(--mut);display:grid;gap:6px}
input,textarea{font:inherit;padding:12px 14px;border:1px solid #a9bab6;border-radius:var(--r);background:#fff;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
#fs, #modal-status, #login-status{min-height:24px;margin:0;font-weight:500}
footer{padding:36px 0 48px;border-top:1px solid var(--line);color:var(--mut);font-size:14px}

.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,58,55,0.7);backdrop-filter:blur(4px);z-index:10050;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.active{display:flex}
.modal{background:var(--pane);border-radius:12px;width:100%;max-width:520px;max-height:calc(100dvh - 40px);overflow-y:auto;padding:32px;box-shadow:0 20px 40px rgba(0,0,0,0.2);position:relative;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:18px;right:20px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--mut)}
.modal-title{font-size:26px;margin-bottom:6px}
.modal-badge{display:inline-block;background:var(--amb);color:#0f3a37;font-size:14px;font-weight:700;padding:4px 10px;border-radius:4px;margin-bottom:18px}
.coreflux-turnstile { margin: 12px 0 14px; min-height:65px; }
.coreflux-turnstile:empty { min-height:0; }
.coupon-box{display:flex;gap:8px;margin-bottom:14px}
.coupon-box input{flex:1}
.coupon-box button{padding:0 16px;background:var(--dark);color:#fff;border:0;border-radius:var(--r);cursor:pointer;font-weight:500}
.price-box{background:#f4f7f6;padding:12px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:14px;font-size:15px}
.price-box span{font-weight:700;color:var(--ink)}

/* --- WIDGET CZATU COREFLUX --- */
#cf-chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: var(--amb);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15,58,55,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
#cf-chat-toggle:hover {
  transform: scale(1.06);
  background: var(--amb2);
}

#cf-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 9999;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 580px;
  max-height: calc(100dvh - 100px);
  background: var(--dark);
  border: 1px solid #266058;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(15,58,55,0.35);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  color: #e8f3f1;
}
#cf-chat-panel.cf-open {
  display: flex;
}

/* NAGŁÓWEK */
.bp-head {
  padding: 12px 16px;
  background: var(--dark);
  border-bottom: 1px solid #1a504a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}
.bp-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.bp-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amb);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.bp-head-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bp-head-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-head-sub {
  font-size: 11.5px;
  color: #9fc4bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bp-icon-btn {
  background: transparent;
  border: 0;
  color: #9fc4bd;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.bp-icon-btn:hover {
  color: #ffffff;
  background: #1a504a;
}

/* OBSZAR WIADOMOŚCI - WYPEŁNIA CAŁĄ WOLNĄ PRZESTRZEŃ */
#cf-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--dark);
  width: 100%;
  margin: 0;
}

.bp-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
  width: 100%;
  margin: 0;
}
.bp-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--amb);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.bp-welcome-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
  width: 100%;
}
.bp-welcome-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: #9fc4bd;
  width: 100%;
}
.bp-date-divider {
  text-align: center;
  font-size: 11px;
  color: #7ba39d;
  margin: 4px 0;
  width: 100%;
}

/* DYMKI WIADOMOŚCI */
.bp-msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
}
.bp-msg-row.user {
  justify-content: flex-end;
}
.bp-msg-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.bp-msg-row.bot .bp-msg-bubble {
  background: #1a504a;
  color: #e8f3f1;
  border-bottom-left-radius: 2px;
}
.bp-msg-row.user .bp-msg-bubble {
  background: var(--amb);
  color: var(--ink);
  border-bottom-right-radius: 2px;
}
.bp-msg-row.error .bp-msg-bubble {
  background: #542c2c;
  color: #ffd9d9;
}

/* ANIMACJA PISANIA */
.bp-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
}
.bp-dot {
  width: 5px;
  height: 5px;
  background-color: #9fc4bd;
  border-radius: 50%;
  animation: bpPulse 1.4s infinite ease-in-out both;
}
.bp-dot:nth-child(1) { animation-delay: -0.32s; }
.bp-dot:nth-child(2) { animation-delay: -0.16s; }
.bp-dot:nth-child(3) { animation-delay: 0s; }
@keyframes bpPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40% { transform: scale(1.1); opacity: 1; }
}

/* DOLNY FORMULARZ / INPUT - PRZYLEGA BEZPOŚREDNIO DO SPODU */
.bp-privacy-hint {
  color: #9fc4bd;
  font-size: 10.5px;
  line-height: 1.35;
  margin: 0 0 8px;
}

.bp-order-banner {
  border-top: 1px solid #266058;
  padding: 10px 16px 11px;
  background: #123d38;
  flex: 0 0 auto;
}
.bp-order-banner[hidden] { display: none !important; }
.bp-order-label {
  font-size: 12px;
  color: #e8f3f1;
  line-height: 1.35;
  margin-bottom: 7px;
}
.bp-checkout-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
}
.bp-checkout-action {
  display: block;
  flex: 1 1 auto;
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #e8a316;
  background: #f2b01e;
  color: #0f3a37;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  text-align: center;
}
.bp-checkout-action:hover, .bp-checkout-action:focus-visible {
  background: #ffd05a;
  outline: 2px solid #fff3c4;
  outline-offset: 2px;
}

.bp-footer {
  padding: 10px 16px;
  background: var(--dark);
  border-top: 1px solid #1a504a;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
}
.bp-input-wrapper {
  background: #1a504a;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 6px;
  border: 1px solid #266058;
}
.bp-input-wrapper:focus-within {
  border-color: var(--amb);
}

#cf-chat-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 13.5px;
  padding: 6px 4px;
  outline: none;
  min-width: 0;
}
#cf-chat-input::placeholder {
  color: #7ba39d;
}

.bp-mic-btn {
  background: transparent;
  border: 0;
  color: #9fc4bd;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.bp-mic-btn:hover { color: #ffffff; background: #266058; }
.bp-mic-btn.recording { color: #ef4444; animation: pulseMic 1s infinite; }
.bp-mic-btn.tts-active { color: #f2b01e; }
@keyframes pulseMic { 50% { opacity: 0.5; } }

.bp-send-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--amb);
  border: 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.bp-send-btn:hover { background: var(--amb2); transform: scale(1.05); }
.bp-send-btn:disabled { opacity: 0.5; cursor: wait; }

/* --- POPRAWKI: kontrast, okna modalne, panel czatu --- */
#cf-chat-panel{padding:0}
.plan .pr{color:var(--ink)}
.plan.f .pr{color:var(--amb)}
.bp-avatar-small,.bp-avatar-large,.bp-send-btn{color:var(--ink)}
.modal-overlay{align-items:flex-start;overflow-y:auto}
.modal{margin:auto}

/* --- RESPONSYWNOŚĆ --- */
@media(max-width:860px){
  .hero,.two,.plans{grid-template-columns:1fr}
  .hero{padding:40px 0 56px;gap:32px}
  section{padding:56px 0}
  .two{gap:28px}
  .nav{gap:10px;height:58px}
  nav{gap:0}
  nav a{display:none}
  .logo{font-size:20px}
  .btn-login{padding:7px 11px;font-size:13px}
  .demo{min-height:0}
  .log{min-height:200px;max-height:300px}
}
@media(max-width:480px){
  body{font-size:16px}
  .w{padding:0 18px}
  .lead{font-size:17px}
  .btns .btn{flex:1 1 100%}
  .rows p{font-size:17px}
  .promo-banner{font-size:13px;padding:10px}
  .modal{padding:24px 18px}
  .modal-overlay{padding:12px}
  #cf-chat-toggle{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  #cf-chat-panel{top:0;left:0;right:0;bottom:0;width:auto;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;border:0}
  .bp-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #cf-chat-input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.flow .ln{stroke-dashoffset:0}html{scroll-behavior:auto}}