:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.72);
  --muted2: rgba(11,18,32,.55);

  --accent: #2563eb;
  --accent2:#7c3aed;

  --card: rgba(255,255,255,.92);
  --shadow: 0 18px 50px rgba(2,6,23,.10);
  --r: 22px;

  --border: rgba(2,6,23,.10);
  --headerH: 86px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(900px 600px at 15% 10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(900px 600px at 85% 12%, rgba(124,58,237,.05), transparent 62%),
    var(--bg);
}

/* TOP */
.hero-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--headerH);
  z-index: 120;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events: none;
}
.hero-title{
  justify-self: center;
  font-weight: 950;
  letter-spacing: .32em;
  font-size: 18px;
  color: rgba(11,18,32,.34);
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}
.hero-scroll{
  justify-self: end;
  pointer-events: auto;
  cursor: pointer;

  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);

  font-weight: 900;
  font-size: 16px;
  color: #fff;

  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 40px rgba(37,99,235,.18);
}
.hero-scroll:hover{ filter: brightness(1.02); }
.hero-scroll:active{ transform: translateY(1px); }
.hero-scroll:focus{ outline: 3px solid rgba(37,99,235,.25); outline-offset: 3px; }

.stage{ height: 300vh; padding-top: var(--headerH); }

.sticky{
  position: sticky;
  top: var(--headerH);
  height: calc(100vh - var(--headerH));
  display:grid;
  grid-template-columns: minmax(320px, 540px) minmax(320px, 900px);
  align-items:center;
  justify-content:center;
  padding: 26px 18px;
  gap: 28px;
  overflow:hidden;
}

.copy{ width:100%; }
.copy-card{
  padding: 18px 18px;
  border-radius: var(--r);
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);

  display:none;
  max-height: 66vh;
  overflow:auto;

  transform: translateY(8px);
  opacity:0;
  transition: opacity .25s ease, transform .25s ease;
}
.copy-card.active{ display:block; opacity:1; transform: translateY(0); }

.copy-card h1{
  margin:0 0 10px;
  font-size: clamp(22px, 3.0vw, 34px);
  letter-spacing:-.4px;
}
.copy-card p{ margin: 0 0 10px; color:var(--muted); line-height:1.45; }
.copy-card ul{ margin: 10px 0 12px; padding-left: 18px; color:var(--muted); }
.copy-card li{ margin: 6px 0; }
.micro{ color:var(--muted2); font-size: 13px; }

.row{ display:flex; gap: 10px; align-items:center; margin-top: 10px; flex-wrap:wrap; }

.status{
  font-size: 13px;
  color: rgba(11,18,32,.78);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.10);
}
.status.ok{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
  color: rgba(11,18,32,.92);
}

.btn{
  appearance:none;
  border:0;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 750;
  cursor:pointer;
  color:#ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 14px 30px rgba(37,99,235,.12);
}
.btn:hover{ filter: brightness(1.02); }
.btn.ghost{
  background: rgba(2,6,23,.04);
  color: var(--text);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow:none;
}
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; filter: grayscale(.15); }

.devices{ width:100%; height: min(760px, 72vh); position:relative; }
.device{ position:absolute; transform-origin: center; will-change: transform, opacity; }

.computer{
  width: 470px;
  height: 320px;
  left: 3%;
  top: 28%;
  filter: drop-shadow(0 26px 45px rgba(2,6,23,.16));
}
.tablet{
  width: 460px;
  height: 640px;
  right: 3%;
  top: 5%;
  filter: drop-shadow(0 34px 70px rgba(2,6,23,.20));
}

.bezel{
  width:100%; height:100%;
  border-radius: 34px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
}

.computer .bezel{
  background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.98));
  box-shadow: 0 18px 55px rgba(2,6,23,.18);
}

.tablet .bezel{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.96));
  box-shadow: 0 22px 65px rgba(37,99,235,.20);
  border: 1px solid rgba(255,255,255,.18);
  position:relative;
}

.tablet-camera{
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(0,0,0,.55));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.10),
    0 8px 18px rgba(2,6,23,.25);
  z-index: 5;
}

.screen{
  width:100%; height:100%;
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
}

.computer-screen{
  background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.95));
}

/* PDF badge */
.pdf-badge{
  position:absolute;
  top: 14px;
  right: 14px;
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(239,68,68,.98), rgba(220,38,38,.98));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 28px rgba(220,38,38,.18);
  z-index: 10;
}
.pdf-badge::before{
  content:"";
  width: 14px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255,255,255,.90);
  clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
}
.pdf-badge span{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 12px;
  color:#fff;
}

/* ===== NOWY “Ekran komputera” (PDF viewer) ===== */
.pc-window{
  position:absolute;
  inset: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  z-index: 2;
}

.pc-topbar{
  height: 34px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  padding: 0 12px;
  gap: 10px;
}

.pc-traffic{ display:flex; gap: 7px; align-items:center; }
.pc-dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.pc-dot.red{ background: rgba(239,68,68,.65); }
.pc-dot.yellow{ background: rgba(245,158,11,.65); }
.pc-dot.green{ background: rgba(34,197,94,.60); }

.pc-filename{
  flex:1;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-actions{ display:flex; gap: 7px; }
.pc-ico{
  width: 18px; height: 18px;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

.pc-preview{
  flex:1;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  overflow:hidden;
}

.pc-page{
  width: 78%;
  height: 88%;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 24px 55px rgba(2,6,23,.18);
  padding: 16px 16px;
  position:relative;
  overflow:hidden;
}

.pc-h1{
  font-size: 14px;
  font-weight: 900;
  color: rgba(11,18,32,.95);
  letter-spacing: -.2px;
}
.pc-meta{
  margin-top: 4px;
  font-size: 11px;
  color: rgba(11,18,32,.62);
}
.pc-hr{
  margin: 10px 0 12px;
  height: 1px;
  background: rgba(2,6,23,.10);
}

.pc-sec{ margin-bottom: 10px; }
.pc-sec-title{
  font-size: 11px;
  font-weight: 900;
  color: rgba(11,18,32,.86);
  margin-bottom: 6px;
}
.pc-line{
  font-size: 10.5px;
  color: rgba(11,18,32,.78);
  line-height: 1.35;
  margin: 3px 0;
}

.pc-watermark{
  position:absolute;
  right: 10px;
  bottom: 10px;
  font-weight: 950;
  letter-spacing: .22em;
  font-size: 11px;
  color: rgba(11,18,32,.22);
  text-transform: uppercase;
}

.pc-statusbar{
  height: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 12px;
  color: rgba(255,255,255,.74);
  font-size: 12px;
}

.computer .stand{
  width: 250px;
  height: 12px;
  border-radius: 999px;
  margin: 12px auto 0;
  background: rgba(30,41,59,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 35px rgba(2,6,23,.16);
}

/* Tablet screen */
.tablet-screen{ background: linear-gradient(180deg, rgba(10,12,18,.38), rgba(10,12,18,.78)); }

.doc{ height:100%; padding: 14px; display:flex; flex-direction:column; gap: 10px; }
.doc-head{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.14);
}
.doc-title{ font-weight: 900; letter-spacing: -0.2px; font-size: 15px; color: #0b1220; }
.doc-meta{ font-size: 12px; color: rgba(11,18,32,.66); margin-top: 3px; }

.doc-body{
  flex: 1;
  min-height: 150px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.14);
  overflow:auto;
}
.doc-body h3{ margin: 10px 0 6px; font-size: 12px; letter-spacing:.2px; color: rgba(11,18,32,.92); }
.doc-body p{ margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: rgba(11,18,32,.82); }
.doc-body .metaLine{ font-size: 11px; color: rgba(11,18,32,.76); margin-bottom: 6px; }

.sign-area{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,6,23,.14);
  border-radius: 16px;
  padding: 10px;
  min-height: 220px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.sign-label{ font-size: 13px; color: rgba(11,18,32,.72); font-weight: 800; }

.canvas-wrap{
  position:relative;
  width:100%;
  flex:1;
  border-radius: 14px;
  background: #ffffff;
  border: 1px dashed rgba(2,6,23,.28);
  overflow:hidden;
}
.canvas-wrap.pulse{ animation: pulse 0.9s ease-in-out 2; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 rgba(37,99,235,0); }
  50%{ box-shadow: 0 0 0 6px rgba(37,99,235,.10); }
  100%{ box-shadow: 0 0 0 rgba(37,99,235,0); }
}

#sigCanvas{ width:100%; height:100%; display:block; touch-action: none; }

.canvas-hint{
  position:absolute;
  inset:auto 10px 10px auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(11,18,32,.86);
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(2,6,23,.12);
  pointer-events:none;
  opacity:.92;
  transition: opacity .25s ease;
}

.doc-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing:.6px;
}

.tablet .home-indicator{
  position:absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

.progress{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
}
.dotp{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.18);
  border: 1px solid rgba(2,6,23,.14);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.dotp.active{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transform: scale(1.25);
  box-shadow: 0 0 20px rgba(37,99,235,.20);
}

.footer{
  padding: 18px 20px;
  color: var(--muted2);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.66);
}

@media (max-width: 980px){
  :root{ --headerH: 92px; }
  .hero-title{ font-size: 16px; letter-spacing: .26em; }
  .hero-scroll{ padding: 14px 16px; font-size: 15px; }
  .sticky{ grid-template-columns: 1fr; align-content:start; }
  .devices{ height: min(760px, 54vh); }
  .copy-card{ max-height: 42vh; }
  .computer{ left: -2%; top: 36%; transform: scale(.92); }
  .tablet{ right: -2%; top: 4%; transform: scale(.94); }
}