/*plik css/style.css     */   

/* ====== USTAWIENIA / ZMIENNE (JASNY MOTYW) ====== */
    :root{
      --bg: #ffffff;          /* białe tło */
      --bg-soft:#f9fafb;      /* delikatne tło sekcji */
      --bg-softer:#f3f4f6;    /* alternatywne tło sekcji */
      --txt:#111827;          /* główny tekst */
      --muted:#4b5563;        /* tekst drugorzędny */
      --card:#ffffff;         /* kafle/karty */
      --line:#e5e7eb;         /* obramowania */
      --acc:#2563eb;          /* akcent */
      --acc-2:#3b82f6;        /* jaśniejszy akcent */
      --ok:#16a34a;
      --warn:#b45309;
      --err:#dc2626;
      --radius:16px;
      --shadow: 0 14px 30px rgba(2, 6, 23, 0.12);
      --shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.08);
      --maxw:1200px;
    }

    /* ====== RESET / BAZA ====== */
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
      color:var(--txt);
      background: var(--bg);
    }
    a{color:var(--acc); text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%; height:auto}
    .container{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
    .section{padding:80px 0}
    .grid{display:grid; gap:24px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      padding:14px 20px; background:var(--acc); color:white; border:none; border-radius:12px;
      font-weight:700; letter-spacing:.2px; cursor:pointer; box-shadow:var(--shadow-soft);
      transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
    .btn:active{transform:translateY(0)}
    .btn--ghost{
      background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe;
    }
    .tag{
      display:inline-flex; align-items:center; gap:.5rem; padding:6px 10px;
      border:1px solid var(--line); border-radius:999px; color:#1f2937; background:#fff; font-size:.9rem
    }
    .card{
      background:var(--card);
      border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft)
    }
    .sub{color:var(--muted)}
    h1,h2,h3{line-height:1.15; margin:0 0 12px}
    h1{font-size: clamp(2rem, 4vw, 3.1rem)}
    h2{font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom:6px}
    h3{font-size:1.15rem}
    p{margin:0 0 12px}
    ul{margin:0; padding-left:1.2rem}
    .muted{color:var(--muted)}
    .sep{height:1px; background:linear-gradient(90deg,transparent, var(--line), transparent); margin:24px 0}
    .icon{width:22px; height:22px; flex:0 0 22px}
    .icon-lg{width:28px; height:28px}
    .kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono";
      background:#eef2ff; border:1px solid #c7d2fe; padding:2px 6px; border-radius:6px; color:#1e3a8a}

    /* ====== SKIP TO CONTENT ====== */
    .skip a{
      position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
    }
    .skip a:focus{
      position:fixed; left:20px; top:16px; width:auto; height:auto; padding:10px 14px; background:var(--acc); color:white; border-radius:10px; z-index:9999
    }

    /* ====== NAV ====== */
    .nav{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(130%) blur(6px);
      background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
      border-bottom:1px solid var(--line)
    }
    .nav__row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:#0b1324}
    .brand__logo{
      width:34px; height:34px; display:inline-grid; place-items:center; border-radius:10px;
      background: radial-gradient(100% 100% at 50% 0%, #93c5fd, #2563eb);
      box-shadow: inset 0 -6px 12px rgba(0,0,0,.08)
    }
    .nav__links{display:flex; gap:18px; align-items:center}
    .nav__links a{color:#111827; opacity:.9}
    .nav__links a:hover{opacity:1}
    .nav__cta .btn{padding:10px 14px}

    /* ====== HERO ====== */
    .hero{
      padding:96px 0 72px; position:relative; overflow:hidden;
      background:
       radial-gradient(60% 60% at 120% -10%, rgba(37,99,235,.10), transparent 60%),
       radial-gradient(70% 70% at -20% 10%, rgba(96,165,250,.10), transparent 70%),
       var(--bg);
      border-bottom:1px solid var(--line);
    }
    .hero__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center}
    .hero__badge{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
    .hero__title{margin-bottom:10px}
    .hero__lead{font-size:1.15rem; color:#374151; margin-bottom:22px}
    .hero__cta{display:flex; gap:12px; flex-wrap:wrap}
    .hero__ill{
      position:relative; border:1px solid var(--line); border-radius:20px; padding:18px;
      background: linear-gradient(180deg,#ffffff, #f8fafc); box-shadow:var(--shadow);
    }
    .hero__ill svg{width:100%; height:auto; display:block}
    .hero small{color:#1d4ed8}

    /* ====== PROBLEM (4 powody) ====== */
    .cards-4{grid-template-columns: repeat(4, 1fr)}
    .cards-4 .card{height:100%}
    @media (max-width:1000px){ .hero__grid{grid-template-columns:1fr} .cards-4{grid-template-columns:1fr 1fr} }
    @media (max-width:640px){ .cards-4{grid-template-columns:1fr} }

    /* ====== ROZWIĄZANIE ====== */
    .feat{display:grid; grid-template-columns: 1fr 1fr; gap:24px}
    .feat .card{display:flex; gap:14px; align-items:flex-start}
    @media (max-width:900px){ .feat{grid-template-columns:1fr} }

    /* ====== CENNIK ====== */
    .pricing{grid-template-columns: 1fr 1fr}
    .price{display:flex; flex-direction:column; gap:14px; position:relative; isolation:isolate}
    .price__headline{display:flex; align-items:center; justify-content:space-between}
    .price__num{font-size:2rem; font-weight:800}
    .price__note{font-size:.95rem; color:var(--muted)}
    .price--pro{outline:2px solid #c7d2fe; background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%)}
    .price--pro::after{
      content:"Najczęściej wybierany"; position:absolute; top:-10px; right:16px; font-size:.8rem;
      background:var(--acc); color:#fff; padding:6px 10px; border-radius:999px;
    }

    /* ====== KROKI ====== */
    .steps{grid-template-columns: repeat(3, 1fr)}
    .step{
      position:relative; padding:24px; border:1px dashed var(--line); border-radius:16px; background:#ffffff;
    }
    .step__num{
      width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800;
      color:#fff; background:var(--acc); margin-bottom:10px
    }
    .step__arrow{display:none;}
    @media (min-width:860px){
      .steps{position:relative}
      .step__arrow{display:block; position:absolute; right:-20px; top:42%; transform:translateY(-50%); opacity:.7}
    }

    /* ====== TŁA SEKCJI ====== */
    #problem{background:var(--bg-soft)}
    #rozwiazanie{background:#fff}
    #cennik{background:var(--bg-soft)}
    #jak{background:#fff}
    #kontakt{background:var(--bg-softer)}

    /* ====== FORMULARZ ====== */
    form{display:grid; gap:14px}
    .f-row{display:grid; gap:14px; grid-template-columns:1fr 1fr}
    @media (max-width:820px){ .f-row{grid-template-columns:1fr} }
    .field{display:flex; flex-direction:column; gap:8px}
    label{font-weight:700}
    input[type="text"], input[type="email"], textarea{
      background:#ffffff; border:1px solid var(--line); color:var(--txt);
      border-radius:12px; padding:12px 14px; outline:none
    }
    textarea{min-height:120px; resize:vertical}
    input:focus, textarea:focus{border-color:var(--acc); box-shadow:0 0 0 4px rgba(37,99,235,.15)}
    .help{font-size:.9rem; color:var(--muted)}
    .error{color:var(--err)}
    .ok{color:var(--ok)}
    .file{
      display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px; border:1px dashed var(--line); border-radius:12px; background:#ffffff
    }
    .file input[type="file"]{display:none}
    .file .btn{padding:10px 14px}
    .file__name{color:#374151}
    .status{margin-top:6px; min-height:22px}
    .status[aria-live]{padding-top:4px}

    /* ====== STOPKA ====== */
    footer{border-top:1px solid var(--line); padding:26px 0; color:#6b7280; font-size:.95rem; background:#fff}
    .row-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
      
    /* ==== Modal (AJAX feedback) ==== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.modal[aria-hidden="false"] { display: flex; }
.modal__overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.modal__box {
  position: relative; z-index: 1; max-width: 520px; width: 92%;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 24px; text-align: center;
}
.modal__icon{
  width: 52px; height: 52px; border-radius: 999px; margin: 4px auto 12px;
  display: grid; place-items: center; font-size: 28px; font-weight: 800;
}
.modal__icon--ok   { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;}
.modal__icon--err  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;}
.modal__box h2 { margin: 0 0 8px; font-size: 1.25rem; }
.modal__box p  { margin: 0 0 18px; color: var(--muted); }
.modal__actions { display: flex; justify-content: center; gap: 12px; }
  
/* ==== Upload Overlay (postęp) ==== */
.upload-overlay {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px) saturate(130%);
}
.upload-overlay[aria-hidden="false"] { display: grid; place-items: center; }
.upload-box {
  width: min(520px, 92%); background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 22px;
  text-align: center;
}
.upload-title { margin: 0 0 10px; font-size: 1.15rem; }
.upload-sub   { margin: 0 0 16px; color: var(--muted); }
.progress-wrap { width: 100%; height: 12px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; overflow: hidden; }
.progress-bar  { height: 100%; width: 0%; background: linear-gradient(90deg, #93c5fd, #2563eb); }
.progress-num  { margin-top: 10px; font-variant-numeric: tabular-nums; color: #1e3a8a; }
   



.error-msg {
  color: #dc2626; /* czerwony */
  font-size: 0.9rem;
  margin-top: 6px;
}

.modal--lg .modal__box { max-width: 880px; width: 90vw; }
.modal__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.modal__scroll { max-height: 70vh; overflow:auto; padding-right: 6px; }
.modal__scroll h3 { margin-top:1.25rem; }




/* PRIVACY modal – działa dla Bulma (.modal-card/.modal-content) i Twojego modala (.modal__box) */
#privacyModal,
#privacyModal .modal-card,
#privacyModal .modal-card-body,
#privacyModal .modal-content,
#privacyModal .modal__box,
#privacyModal .modal__scroll,
#privacyBody,
#privacyBody *,
#privacyModal .content {
  text-align: left !important;
}

/* Gdyby w modalu były listy – wyłącz punkty i wcięcia */
#privacyModal .modal-card-body ul,
#privacyModal .modal-content ul,
#privacyModal .modal__scroll ul,
#privacyBody ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}


      

.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dropzone {
  border:2px dashed #cbd5e1; border-radius:12px; padding:22px; background:#f8fafc;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.dropzone:focus { outline:2px solid #2563eb; outline-offset:2px; }
.dropzone.is-dragover { background:#eff6ff; border-color:#60a5fa; }
.dz__inner { display:flex; align-items:center; gap:14px; justify-content:center; }
.dz__icon { font-size:1.4rem; opacity:.7; }
.dz__text .btn--tiny { padding:6px 10px; font-size:.9rem; border-radius:8px; }

.file-list { list-style:none; padding:10px 0 0; margin:0; display:grid; gap:8px; }
.file-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.file-item__name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item__meta { font-size:.9rem; color:#6b7280; }
.file-item__remove { border:1px solid #fee2e2; background:#fef2f2; color:#b91c1c; padding:6px 10px; border-radius:8px; }
.file-item__remove:hover { background:#fee2e2; }
.file-summary { display:flex; gap:10px; align-items:center; margin-top:8px; color:#334155; }
.file__stats { font-size:.9rem; color:#64748b; }