/* PtzMix — strona produktu. Ciemny motyw, spójny z aplikacją/instrukcją. */
:root{
  --bg:#0d1017; --bg2:#141925; --bg3:#1c2230; --bdr:#28304a; --bdr2:#3a4560;
  --cyan:#22cfff; --amber:#e8a020; --yellow:#f6de29; --green:#20d460;
  --ink:#d8e8ff; --ink2:#aab6cf; --muted:#7e8ca8; --head:#eaf2ff;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,Arial,sans-serif;line-height:1.65;}
a{color:var(--cyan);text-decoration:none;}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px;}

/* Nav */
header{position:sticky;top:0;z-index:50;background:rgba(13,16,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bdr);}
nav{display:flex;align-items:center;gap:18px;height:62px;}
nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:#fff;}
nav .logo img{height:34px;width:auto;}
nav .logo .mix{color:var(--cyan);}
nav .links{display:flex;gap:6px;margin-left:18px;flex:1;flex-wrap:wrap;}
nav .links a{color:var(--ink2);padding:8px 14px;border-radius:6px;font-weight:600;font-size:15px;}
nav .links a:hover{background:var(--bg3);color:#fff;}
nav .cta{background:var(--green);color:#04220f;font-weight:800;padding:9px 18px;border-radius:7px;}
nav .cta:hover{filter:brightness(1.08);}
.burger{display:none;background:none;border:1px solid var(--bdr2);color:#fff;font-size:22px;border-radius:7px;width:42px;height:38px;cursor:pointer;margin-left:auto;}

/* Hero */
.hero{text-align:center;padding:54px 0 30px;}
.hero img.logo{width:200px;filter:drop-shadow(0 0 18px rgba(34,207,255,.35));margin-bottom:16px;}
.hero h1{font-size:40px;font-weight:800;color:var(--head);letter-spacing:-.5px;}
.hero h1 .mix{color:var(--cyan);}
.hero .lead{font-size:20px;color:var(--yellow);margin-top:10px;font-weight:600;}
.hero .sub{font-size:17px;color:var(--ink2);max-width:760px;margin:14px auto 22px;}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;padding:12px 24px;border-radius:8px;font-weight:800;font-size:16px;cursor:pointer;border:none;}
.btn-primary{background:var(--cyan);color:#04222a;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--bdr2);}
.btn:hover{filter:brightness(1.1);}
.hero .shot{margin-top:30px;}
.hero .shot img{max-width:100%;border:1px solid var(--bdr);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.55);}

/* USP pasek */
.usp-bar{background:linear-gradient(135deg,#0a2730,#0e3a44);border-top:1px solid #14525f;border-bottom:1px solid #14525f;padding:18px 0;text-align:center;color:#dffaff;font-size:18px;}
.usp-bar b{color:#fff;} .usp-bar .k{color:var(--cyan);font-weight:800;}

/* Sekcje przemienne */
.feat{padding:44px 0;border-bottom:1px solid var(--bdr);}
.feat .row{display:flex;align-items:center;gap:42px;}
.feat .row.rev{flex-direction:row-reverse;}
.feat .media{flex:1;min-width:0;}
.feat .media img{width:100%;border:1px solid var(--bdr);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5);}
.feat .ph{width:100%;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#161b26,#161b26 14px,#1c2230 14px,#1c2230 28px);border:2px dashed var(--bdr2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;text-align:center;padding:16px;}
.feat .txt{flex:1;min-width:0;}
.feat h2{font-size:27px;color:var(--yellow);font-weight:800;margin-bottom:10px;}
.feat p{color:var(--ink2);font-size:17px;margin-bottom:10px;}
.feat ul{color:var(--ink2);padding-left:22px;margin-bottom:12px;}
.feat li{margin:5px 0;}
.feat .more{color:var(--cyan);font-weight:700;cursor:pointer;background:none;border:none;font-size:15px;padding:0;}
.feat .more:hover{text-decoration:underline;}

/* Sekcja tytulowa */
.sec-h{text-align:center;padding:40px 0 6px;}
.sec-h h2{font-size:30px;color:var(--head);font-weight:800;}
.sec-h p{color:var(--ink2);margin-top:6px;}

/* Tabela Lite/Full */
.compare{padding:14px 0 30px;}
table.cmp{width:100%;border-collapse:collapse;background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;}
table.cmp th,table.cmp td{padding:11px 14px;border-bottom:1px solid var(--bdr);text-align:left;}
table.cmp th{background:var(--bg3);color:var(--ink2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;}
table.cmp td.c{text-align:center;width:130px;}
table.cmp .yes{color:var(--green);font-weight:800;} table.cmp .no{color:#56607a;}
table.cmp .lim{color:var(--cyan);font-weight:600;font-size:14px;}
table.cmp tr:hover td{background:#1a2030;}

/* Cennik */
.pricing{padding:24px 0 50px;}
.toggle{display:flex;justify-content:center;gap:8px;margin-bottom:22px;}
.toggle a{padding:8px 16px;border:1px solid var(--bdr2);border-radius:20px;color:var(--ink2);font-weight:700;font-size:14px;}
.toggle a.on{background:var(--cyan);color:#04222a;border-color:var(--cyan);}
.plans{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.plan{background:var(--bg2);border:1px solid var(--bdr);border-radius:14px;padding:24px 22px;width:340px;}
.plan.full{border-color:var(--cyan);box-shadow:0 0 24px rgba(34,207,255,.15);}
.plan .name{font-size:22px;font-weight:800;color:#fff;}
.plan.full .name .b{color:var(--cyan);}
.plan .desc{color:var(--ink2);font-size:14px;margin:6px 0 14px;min-height:38px;}
.plan .price{display:flex;align-items:baseline;gap:6px;margin:6px 0;}
.plan .price .v{font-size:34px;font-weight:800;color:var(--head);}
.plan .price .u{color:var(--muted);font-size:14px;}
.plan .price-row{padding:7px 0;border-bottom:1px dashed var(--bdr);font-size:15px;color:var(--ink2);display:flex;justify-content:space-between;}
.plan .price-row b{color:var(--head);}
.plan .buy{display:block;text-align:center;margin-top:16px;background:var(--cyan);color:#04222a;font-weight:800;padding:11px;border-radius:8px;}
.plan.lite .buy{background:var(--bg3);color:var(--cyan);border:1px solid var(--cyan);}
.netto{text-align:center;color:var(--muted);font-size:13px;margin-top:14px;}

/* Modal "więcej" */
.modal{position:fixed;inset:0;background:rgba(5,8,15,.85);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal.open{display:flex;}
.modal .box{background:var(--bg2);border:1px solid var(--bdr2);border-radius:14px;max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:26px 28px;position:relative;}
.modal .box h3{color:var(--yellow);font-size:22px;margin-bottom:12px;}
.modal .box p,.modal .box li{color:var(--ink2);}
.modal .box ul{padding-left:22px;margin:8px 0;}
.modal .x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--ink2);font-size:24px;cursor:pointer;}

/* Footer */
footer{background:var(--bg2);border-top:1px solid var(--bdr);padding:30px 0;color:var(--muted);font-size:14px;text-align:center;}
footer a{color:var(--cyan);}

@media(max-width:820px){
  .feat .row,.feat .row.rev{flex-direction:column;}
  nav .links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--bg2);flex-direction:column;padding:10px 18px;border-bottom:1px solid var(--bdr);}
  nav .links.open{display:flex;}
  .burger{display:block;}
  .hero h1{font-size:30px;} .hero .lead{font-size:17px;}
}