html { scroll-behavior: smooth; }

.navbar-blur { backdrop-filter: saturate(180%) blur(8px); background: rgba(255,255,255); padding-top:10px;}

.hero { 
  background: radial-gradient(1000px 400px at 80% -10%, rgba(13,110,253,.45), transparent),
                 linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); 
                
      }
                 
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.feature-icon { width: 3rem; height: 3rem; border-radius: .8rem; display: inline-grid; place-content: center; }
.price-card { border: 1px solid rgba(0,0,0,.075); }
.brand img { max-height: 34px; opacity: .8; filter: grayscale(100%); transition: opacity .2s; }
.brand img:hover { opacity: 1; filter: grayscale(0); }
footer a { text-decoration: none; }
.badge-soft { background: rgba(13,110,253,.08); color: #0d6efd; border: 1px solid rgba(13,110,253,.2); }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent); margin: 2rem 0; }

.gradient-text {

  background: -webkit-linear-gradient(#0c05d5, #0357e7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-green {

  background: -webkit-linear-gradient(#2e8400, #03e70e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-1 {

  border: 1px solid #bfd4ff;
  box-shadow: 0 10px 30px rgba(23, 55, 214, 0.3);
  color: #000;
}
/* --- Process Stepper --- */
.process-stepper {
  position: relative;
}
.process-stepper .step {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.process-stepper .step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(13,110,253,.12);
}
.process-stepper .num {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: inline-grid; place-content: center;
  font-weight: 700;
  background: linear-gradient(135deg,#e8f1ff,#d6e6ff);
  color: #0d6efd;
  border: 1px solid #bfd4ff;
}
.process-stepper .icon {
  width: 44px; height: 44px;
  border-radius: .8rem;
  display: inline-grid; place-content: center;
  background: rgba(13,110,253,.08);
  color: #0d6efd;
}
.process-rail {
  position: absolute; left: 0; right: 0;
  top: 32px;
  height: 4px;
  background: linear-gradient(90deg, rgba(13,110,253,.15), rgba(13,110,253,.4), rgba(13,110,253,.15));
  border-radius: 999px;
  z-index: 0;
}
@media (max-width: 991.98px) {
  .process-rail { display:none; }
}
/* connector dots */
.process-stepper .step::after {
  content: ""; position: absolute;
  top: 28px; left: 50%; transform: translateX(-50%);
  width: 10px; height:10px; border-radius: 999px;
  background: #0d6efd; box-shadow: 0 0 0 6px rgba(13,110,253,.12);
}
@media (max-width: 991.98px) {
  .process-stepper .step::after { display:none; }
}
.process-stepper .desc { color:#6c757d; font-size:.925rem; }


/* --- Global hover glow for boxes --- */
.card-hover, .shadow-soft, .price-card, .border.rounded-3.p-3 {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-hover:hover, .shadow-soft:hover, .price-card:hover, .border.rounded-3.p-3:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(13,110,253,.14), 0 6px 20px rgba(0,0,0,.06);
  border-color: rgba(13,110,253,.25);
}

/* Slightly more contrast for page background */
body {
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
}

/* Lista ikon w kontakcie + mapa w boksie */
.icon-list li{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem 0;
  border-bottom: 1px dashed rgba(13,110,253,.12);
}
.icon-list li:last-child{ border-bottom:0; }
.icon-list i{ color:#0d6efd; }

.map-wrap{ border:1px solid rgba(13,110,253,.12); box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* Wyrównanie boxów kontaktu */
#kontakt .col-lg-6 > .p-4 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gradient-3 {
  background: #020024;
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

/* Efekt CTA dla sekcji "Dlaczego my" */
.highlight-box {
  overflow: hidden;
  transition: all .3s ease;
  border: 1px solid rgba(13,110,253,.12);
}

.highlight-box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(13,110,253,0.08), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}
.highlight-box:hover::before {
  opacity: 1;
}
.highlight-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(13,110,253,.2);
  border-color: rgba(13,110,253,.25);
}
.highlight-box h6,
.highlight-box ul,
.highlight-box a {
  position: relative;
  z-index: 1;
}
.why-list li {
  padding: .4rem 0;
  display: flex;
  align-items: center;
}
.why-list i {
  font-size: 1rem;
  color: #0d6efd;
}

.back-1 {

  position: relative;
  background: url('img/t1.jpg') center/cover no-repeat;
  border: 1px solid rgba(13,110,253,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  color: #fff;
  overflow: hidden;

}

.back-5 {

  position: relative;
  background: url('img/t01.jpg') right/cover no-repeat;
  border: 1px solid rgba(13,110,253,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  color: #fff;
  overflow: hidden;

}

.back-6 {

  position: relative;
  background: url('img/t01.jpg') center/cover no-repeat;
  border: 1px solid rgba(13,110,253,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  color: #fff;
  overflow: hidden;

}

.back-home {

  position: relative;
  background: url('img/t01.jpg') center/cover no-repeat;
  border: 1px solid rgba(13,110,253,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  color: #fff;
  overflow: hidden;

}

.white{
  color:#fff!important;
}
.black{
  color:#000!important;
}

/* Efekt placeholderów – subtelny i czytelny */
.form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
  transition: opacity .2s ease;
}
.form-control:focus::placeholder {
  opacity: 0;
}

/* Chat-like form */
.chat-card { overflow:hidden; position:relative; }
.bot-avatar{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(13,110,253,.1); color:#0d6efd;
  font-size:18px;
}
.chat-window{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:12px;
  height: 360px; overflow:auto; background:#f8faff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  color:#000
}
.chat-bubble{
  max-width:90%; padding:.6rem .8rem; border-radius:12px;
  font-size:.95rem; margin:.35rem 0; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.chat-bot   { background:#fff; border:1px solid rgba(13,110,253,.12); padding:10px; margin-bottom:25px;}
.chat-user  { background:#0d6efd; color:#fff; margin-left:auto; }
.chat-choices{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem;
}
.chat-choices .btn{
  border-radius:999px; padding:.35rem .8rem; font-size:.9rem;
}

/* Pasek wpisywania – zawsze widoczny */
.chat-input {
  display: flex;
  gap: .5rem;
  margin-top: 12px;
  align-items: center;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: .5rem;
}

.chat-input .form-control {
  flex: 1;
  color: #212529;
  background: #fff;
  border-radius: 10px;
}

.chat-input .form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.chat-input .btn {
  flex-shrink: 0;
  height: 100%;
}

/* Sukces po wysyłce */
.chat-success {
  display:flex; align-items:center; gap:.6rem;
  background:#d1e7dd; color:#0f5132;
  border:1px solid #badbcc; border-radius:.75rem;
  padding:.75rem 1rem; font-weight:600;
}
.chat-success i { font-size:1.2rem; }

/* Bąbel z podsumowaniem (opcjonalne) */
.chat-summary {
  font-size:.9rem; color:#0f5132;
  margin-top:.25rem; opacity:.9;
}




.chat-input .form-control{ background:#fff; }
.chat-typing{ display:inline-block; width:26px; text-align:center; }
.dot{ display:inline-block; width:6px; height:6px; border-radius:999px; background:#0d6efd; opacity:.5; margin:0 1px; animation: blink 1.2s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay:.15s } .dot:nth-child(3){ animation-delay:.3s }
@keyframes blink{ 0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-2px)} }

/* Kotwica: dodaje niewidoczny placeholder o wysokości karty, gdy ta przechodzi na position:fixed */

/* Stan zminimalizowany – niebieskie kółko z robotem w prawym dolnym rogu */


.chat-card.is-min {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  padding: 10px !important;
  border-radius: 999px !important;
  background: #0d6efd !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(13,110,253,.35);
  z-index: 1050;

}

/* W stanie mini pokazujemy tylko ikonę robota */
.chat-card.is-min .bot-avatar{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 28px;
}
.chat-card.is-min .bot-avatar i{ font-size: 28px; }

/* Ukryj resztę treści karty w mini */
.chat-card.is-min h5,
.chat-card.is-min .chat-window,
.chat-card.is-min .chat-input,
.chat-card.is-min .chat-choices {
  display: none !important;
}

/* Kursor dla efektu pisania */
.bot-caret {
  display:inline-block;
  width:1px; height:1em;
  margin-left:2px;
  background: currentColor;
  opacity:.9;
  animation: caretBlink 1s steps(1) infinite;
  vertical-align: -2px;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.hero-uslugi {
  background: linear-gradient(135deg, #0d6efd, #013caa);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-uslugi::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.1), transparent 60%);
}
.card-hover {
  transition: transform .2s ease, box-shadow .3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13,110,253,.15);
}

.mindmap-container {
  position: relative;
  width: 600px;
  height: 450px;
  max-width: 90%;
  margin: auto;
}

.node {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(13,110,253,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
.node:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(13,110,253,.25);
}
.node i { font-size: 30px; }

.node::after {
  content: attr(data-label);
  position: absolute;
  bottom: -1.5rem;
  width: 120px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
}

/* central node */
.node.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0d6efd;
  color: #fff;
  width: 110px;
  height: 110px;
  box-shadow: 0 0 40px rgba(13,110,253,.3);
}

/* surrounding nodes positions */
.node.n1 { top: 10%; left: 50%; transform: translate(-50%, 0); }
.node.n2 { top: 35%; right: 0; transform: translate(0, -50%); }
.node.n3 { bottom: 10%; left: 50%; transform: translate(-50%, 0); }
.node.n4 { top: 35%; left: 0; transform: translate(0, -50%); }
.node.n5 { bottom: 20%; right: 15%; }


/* Niebieski box – ładniejszy gradient i symetryczny cień */
.cta-primary{
  background: linear-gradient(135deg,#0d6efd,#3a6dff);
  box-shadow: 0 20px 40px rgba(13,110,253,.25);
}

/* Mini statsy pod spodem – spójne, lekkie */
.mini-stat { line-height: 1.1; }
.mini-stat i { font-size: 1.4rem; color: #0d6efd; display:block; margin-bottom:.25rem; }
.mini-stat .label { font-weight: 600; color:#0f172a; }
.mini-stat .sub { font-size: .85rem; color:#6c757d; }

/* Ujednolicenie „ciężaru” kolumn na małych ekranach */
@media (max-width: 991.98px){
  .cta-primary { text-align: center; }
}

  :root{--bg:#f6f8fb;--card:#fff;--text:#0f172a;--muted:#6b7280;--primary:#2f64ff;--soft:0 12px 30px rgba(15,23,42,.08);--r:22px}
  body{background:var(--bg)}
  .navbar-blur{backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.85)}
  .m-card{background:var(--card); border:0; border-radius:var(--r); box-shadow:var(--soft)}
  .form-control,.form-select{border-radius:16px; border:1px solid #e5e7eb; padding:.7rem .9rem}
  .form-control:focus,.form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(47,100,255,.12)}
  .btn-primary{background:var(--primary); border:0; border-radius:14px; box-shadow:0 8px 18px rgba(47,100,255,.25)}
  .chip{border:1px solid #e5e7eb; border-radius:999px; padding:.45rem .9rem; display:inline-flex; gap:.5rem; align-items:center; cursor:pointer}
  .chip i{color:var(--primary)}
  .chip.active{background:#e7efff; border-color:var(--primary)}
  .chip-row{display:flex; flex-wrap:wrap; gap:.6rem}
  .dropzone{border:1px dashed rgba(47,100,255,.35); border-radius:16px; padding:1rem; background:#fff}
  .dropzone.drag{background:#f1f6ff}
  .progress{height:.6rem}
  .step-title{font-weight:800}
/* Wizard scope: show only current step */
#wizard .step{display:none}
#wizard .step.active{display:block}
  .summary dt{color:#6b7280}
  .summary dd{margin-bottom:.5rem}

  .lead-topics .lead-box{
  background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  text-align:left; box-shadow:0 8px 20px rgba(15,23,42,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lead-topics .lead-box:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(13,110,253,.15); border-color:#cfe0ff; }
.lead-topics .lead-box.active{ border-color:#b7c6ff; box-shadow:0 16px 36px rgba(13,110,253,.18); }
.lead-topics .lead-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(13,110,253,.08); color:#0d6efd; font-size:1.1rem;
}
.lead-topics .lead-title{ font-weight:700; line-height:1; }
.lead-topics .lead-desc{ font-size:.875rem; color:#6b7280; }

.process-rail{
  position:absolute; left:0; right:0; top:34px; height:4px;
  background:linear-gradient(90deg, rgba(13,110,253,.15), rgba(13,110,253,.4), rgba(13,110,253,.15));
  border-radius:999px; z-index:0;
}
@media (max-width: 991.98px){ .process-rail{ display:none; } }

/* Ensure process cards in "Jak działamy" stay visible */
.process-stepper .step{display:block;}
/* === Improvements: Process section animations === */

/* 1) Fade-in on scroll for process steps (with slight slide-up) */
.process-stepper .step {
  will-change: opacity, transform, box-shadow;
}
.process-stepper .step.reveal {
  opacity: 0;
  transform: translateY(10px);
}
.process-stepper .step.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease, box-shadow .2s ease;
}

/* Staggered delay (desktop) for nicer cascade */
@media (min-width: 992px) {
  .process-stepper .row > [class*="col"]:nth-child(1) .step.reveal { transition-delay: .05s; }
  .process-stepper .row > [class*="col"]:nth-child(2) .step.reveal { transition-delay: .12s; }
  .process-stepper .row > [class*="col"]:nth-child(3) .step.reveal { transition-delay: .19s; }
  .process-stepper .row > [class*="col"]:nth-child(4) .step.reveal { transition-delay: .26s; }
  .process-stepper .row > [class*="col"]:nth-child(5) .step.reveal { transition-delay: .33s; }
  .process-stepper .row > [class*="col"]:nth-child(6) .step.reveal { transition-delay: .40s; }
}

/* 2) Animated gradient for the process rail */
.process-rail {
  position: absolute; left: 0; right: 0; top: 34px; height: 4px;
  background: linear-gradient(90deg, rgba(13,110,253,.15), rgba(13,110,253,.4), rgba(13,110,253,.15));
  border-radius: 999px; z-index: 0;
  overflow: hidden;
}
.process-rail::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 100%);
  width: 30%;
  animation: railSweep 2.8s linear infinite;
  filter: blur(2px);
  opacity: .35;
}
@keyframes railSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@media (max-width: 991.98px) {
  .process-rail, .process-rail::before { display: none; }
}

/* 3) "Pop" effect for step number on hover */
.process-stepper .num {
  transition: transform .18s ease, box-shadow .18s ease;
}
.process-stepper .step:hover .num {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(13,110,253,.22), inset 0 0 0 1px rgba(13,110,253,.25);
}


/* ---- minimal mushroom-lite for this page ---- */
    :root{ --m-bg:#f6f8fb; --m-card:#fff; --m-text:#0f172a; --m-muted:#6b7280; --m-primary:#2f64ff; --m-r:22px; --m-shadow:0 12px 30px rgba(15,23,42,.08); }
    body{ background:var(--m-bg); }
    .m-card{ background:var(--m-card); border:0; border-radius:var(--m-r); box-shadow:var(--m-shadow); }
    .form-control,.form-select{ border-radius:16px; border:1px solid #e5e7eb; padding:.75rem .9rem; }
    .form-control:focus,.form-select:focus{ border-color:var(--m-primary); box-shadow:0 0 0 .2rem rgba(47,100,255,.12); }
    .btn-primary{ background:var(--m-primary); border:0; border-radius:14px; box-shadow:0 8px 18px rgba(47,100,255,.25); }
    .chip{ border:1px solid #e5e7eb; background:#fff; border-radius:999px; padding:.45rem .9rem; display:inline-flex; gap:.5rem; align-items:center; cursor:pointer; }
    .chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
    .chip.active{ background:#e7efff; border-color:#b7c6ff; }
    .dropzone{ border:1px dashed rgba(47,100,255,.35); border-radius:16px; padding:1rem; background:#fff; }
    .dropzone.drag{ background:#f1f6ff; }
    .progress{ height:.6rem; }
    .step{ display:none; }
    .step.active{ display:block; }
    .summary dt{ color:var(--m-muted); }
    .summary dd{ margin-bottom:.5rem; }
    .hero-wycena{ background: radial-gradient(900px 360px at 80% -10%, rgba(13,110,253,.35), transparent), linear-gradient(180deg,#f6f9ff 0%, #fff 100%); }