/* ===== Base ===== */
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Space Grotesk',Arial,sans-serif;background:#0b0b12;color:#f8f8ff;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ===== Canvas BG ===== */
#bg{position:fixed;inset:0;z-index:-1;filter:contrast(110%) saturate(120%)}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:rgba(11,11,18,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .brand img{height:34px}
.menu{display:flex;list-style:none;gap:10px;max-width:62vw;overflow-x:auto;-webkit-overflow-scrolling:touch}
.menu a{padding:8px 12px;border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.08)}
.cta.small{padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,#8f5bff,#00ffe0);color:#081018;font-weight:800}

/* ===== Hero ===== */
.hero{min-height:82vh;display:grid;place-items:center;padding:90px 16px 24px;text-align:center}
.title{font-size:clamp(40px,9vw,110px);letter-spacing:.02em;font-weight:900;text-shadow:0 0 22px rgba(143,91,255,.6)}
.subtitle{max-width:880px;margin:10px auto 18px;color:#cfd1ff;font-size:clamp(15px,3.6vw,18px)}
.cta-wrap{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cta{display:inline-block;padding:14px 22px;border-radius:999px;background:linear-gradient(90deg,#8f5bff,#00ffe0);color:#081018;font-weight:900;letter-spacing:.04em;box-shadow:0 0 20px rgba(143,91,255,.4);transition:.2s transform,.2s box-shadow}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 28px rgba(0,255,224,.35)}
.cta.ghost{background:transparent;color:#bda8ff;border:2px solid #8f5bff;box-shadow:none}
.cta.ghost:hover{background:#8f5bff;color:#081018}

/* ===== Sections ===== */
.section{max-width:1200px;margin:30px auto;padding:0 14px}
.section-title{text-align:center;margin-bottom:14px;font-size:clamp(22px,6vw,40px);text-shadow:0 0 16px rgba(143,91,255,.5)}
.lead{color:#d7d8ff;text-align:center;max-width:900px;margin:0 auto}

/* ===== Cards / Grid ===== */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;box-shadow:0 0 14px rgba(143,91,255,.18)}
.card h3{margin-bottom:8px}
.card p{color:#e7e8ff}

/* ===== Calculator ===== */
.calc{display:grid;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;max-width:940px;margin:0 auto 10px}
.calc label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.calc input,.calc select{background:#0f1020;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;font-size:16px;min-height:44px}
.results.hidden{display:none}
.stat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:10px 0}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;text-align:center}
.stat-h{color:#cfd1ff}
.stat-v{font-size:clamp(18px,5vw,26px);font-weight:900;color:#bca3ff}

/* ===== Table ===== */
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.table th{color:#bca3ff}

/* ===== PDF ===== */
.pdf{width:100%;height:75vh;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:#0a0b1a}
.pdf iframe{width:100%;height:100%;border:0}

/* ===== FAQ ===== */
.faq{max-width:900px;margin:0 auto}
details{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;margin-bottom:10px}
summary{cursor:pointer;font-weight:800}
details p{margin-top:6px;color:#d7d8ff}

/* ===== Contact ===== */
.contact{display:grid;gap:12px;max-width:620px;margin:0 auto}
.contact input,.contact textarea{background:#0f1020;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px;font-size:16px}

/* ===== Footer ===== */
.footer{text-align:center;color:#acb0ff;margin:44px 0 28px}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  .menu{max-width:58vw}
  .grid,.stat-cards{grid-template-columns:1fr}
  .pdf{height:65vh}
  .cta{padding:12px 18px}
  .hero{padding-top:96px}
}
/* PDF – wygodny fallback na mobile */
.pdf{width:100%;height:75vh;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:#0a0b1a}
.pdf iframe{width:100%;height:100%;border:0}

/* Domyślnie pokaż desktop, ukryj mobile */
.pdf-desktop{display:block}
.pdf-mobile{display:none}
.pdf-note{color:#d7d8ff;text-align:center;margin:10px 0 12px}

/* Na wąskich ekranach ukryj iframe, pokaż przyciski */
@media (max-width: 680px){
  .pdf{display:none}
  .pdf-mobile{display:block}
}

/* ——— PROMO BAR ——— */
.promo-bar{
  position: sticky; top: 0; z-index: 9999;
  background: linear-gradient(90deg, #9f7bff, #00ffe0);
  color: #081018; border-bottom: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.promo-inner{
  max-width: 1200px; margin: 0 auto; padding: 10px 14px;
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
}
.promo-text{font-weight: 700}
.promo-timer{display:flex;gap:6px;align-items:center}
.tbox{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:46px;padding:6px 8px;border-radius:10px;background: rgba(255,255,255,.85); color:#041014}
.tbox > span{font-weight:900; font-variant-numeric: tabular-nums}
.tbox small{font-size: 12px; opacity:.75}
.promo-cta{
  justify-self:end; padding:10px 14px; border-radius:999px; font-weight:900;
  background:#081018; color:#00ffe0; border:2px solid rgba(0,0,0,.4)
}
.promo-cta:hover{filter: brightness(1.05)}
.promo-close{
  justify-self:end; background:transparent; border:0; font-size:18px; line-height:1; cursor:pointer; color:#081018; opacity:.7
}
@media (max-width: 860px){
  .promo-inner{grid-template-columns: 1fr auto; row-gap:8px}
  .promo-cta{grid-column: 2; grid-row: 2}
  .promo-timer{grid-column: 1; grid-row: 2; justify-content:flex-start}
}