/*
Theme Name: SkyPulse
Theme URI: https://skypulse.info.pl
Author: SkyPulse
Description: Motyw strony aplikacji SkyPulse, wariant „Kokpit” (ciemny). Strona główna z pokazem wskaźników, ostrzeżeniami, cennikiem i płatnością Paddle (karty, PayPal, BLIK), klucze licencyjne dla aplikacji, statystyki bez ciasteczek w kokpicie WordPressa, wersja polska i angielska (gotowy pod Polylang).
Version: 1.4.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skypulse
Domain Path: /languages
*/

/* Czcionki na serwerze strony (bez łączenia z Google), licencja SIL OFL — assets/fonts/OFL-*.txt */
@font-face { font-family: "Chakra Petch"; src: url("assets/fonts/chakra-petch-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-var.woff") format("woff"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("assets/fonts/sora-var.woff") format("woff"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* Wygląd: ciemne szkło na rozmytym zrzucie stacji, turkusowe akcenty (wariant I „Kokpit”) */
:root {
  --bg: #060A0E; --glass: rgba(20,30,40,.55); --gl: rgba(120,200,230,.16); --fg: #E8F3F8; --muted: #93A9B5;
  --c: #33D1E6; --c2: #9BE15D; --line: rgba(120,200,230,.16); --ok: #3FD07A; --warn: #E5483D;
  --f-d: "Chakra Petch", "Arial", sans-serif; --f-b: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --f-logo: "Sora", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-b); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: var(--c); color: #031418; padding: 8px 12px; border-radius: 8px; }

.site { position: relative; overflow: hidden; min-height: 100vh; }
.bgimg { position: absolute; inset: 0 0 auto; height: 1400px; background-size: cover; background-position: center top; filter: blur(28px) saturate(1.3) brightness(.45); transform: scale(1.15); pointer-events: none; }
.site > *:not(.bgimg) { position: relative; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* nagłówek */
.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-block: 18px; }
.nav .links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav .links a { color: var(--muted); text-decoration: none; font-weight: 500; }
.nav .links a:hover { color: var(--fg); }
.logo { font: 400 23px var(--f-logo); letter-spacing: -.01em; display: flex; align-items: center; gap: .45em; white-space: nowrap; text-decoration: none; color: var(--fg); }
.logo svg { width: 1.65em; height: 1.65em; flex: none; }
.logo b { font-weight: 700; }
.logo i { font-style: normal; font-weight: 300; }
.lang { font-weight: 600; white-space: nowrap; display: flex; gap: 6px; align-items: center; color: var(--muted); }
.lang a { text-decoration: none; }
.lang .on { color: var(--c); }

/* wspólne */
.glass { background: var(--glass); border: 1px solid var(--gl); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
section { padding-block: 26px; }
section > .wrap > .glass { padding: 26px; }
h1, h2, h3, h4 { text-wrap: balance; }
.hero-title { font: 700 clamp(30px, 4.8vw, 54px)/1.05 var(--f-d); letter-spacing: .005em; margin: 0 0 16px; }
.hero-title span { color: var(--c); }
h2.sec { font: 700 26px/1.15 var(--f-d); letter-spacing: .02em; margin: 0 0 20px; text-transform: uppercase; }
.lead { font-size: 17px; line-height: 1.6; color: #BFD2DB; max-width: 44ch; margin: 0 0 22px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.b1, .b2 { font: 600 16px var(--f-b); padding: 12px 18px; border-radius: 10px; text-decoration: none; display: inline-block; cursor: pointer; border: 0; text-align: center; }
.b1 { background: var(--c); color: #031418; }
.b1:hover { filter: brightness(1.08); }
.b2 { border: 1px solid var(--gl); color: var(--fg); background: rgba(255,255,255,.04); }
.b2:hover { background: rgba(255,255,255,.08); }

/* hero */
.hero { padding: 34px; margin-block: 20px 50px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; }
.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.hud div { border: 1px solid var(--gl); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--muted); }
.hud b { display: block; font: 700 20px var(--f-d); color: var(--fg); font-variant-numeric: tabular-nums; }
.dev { border-radius: 14px; padding: 8px; background: rgba(0,0,0,.6); border: 1px solid var(--gl); }
.dev img { border-radius: 8px; width: 100%; }

/* platformy */
.plat { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 600 14px var(--f-b); border: 1px solid var(--gl); border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.04); }
.chip { display: inline-flex; align-items: center; gap: 8px; }
.chip .pd, .chip .ps { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.chip .pd { background: var(--ok); box-shadow: 0 0 8px rgba(63,208,122,.6); }
.chip .ps { border: 1.5px solid var(--muted); opacity: .8; }

/* ostrzeżenia */
.wxg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.wxd { position: relative; border-radius: 16px; padding: 10px; background: #000; border: 1px solid rgba(128,128,128,.25); margin: 0 0 24px 12px; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.wxd img { width: 100%; border-radius: 8px; }
.wxa { position: absolute; left: -12px; bottom: -22px; background: #1A0B0B; border: 1px solid #5A1E1F; color: #FFD9D9; border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px; line-height: 1.35; box-shadow: 0 16px 30px rgba(0,0,0,.45); max-width: 260px; }
.wxa b { color: #FF5A4F; display: block; font-size: 12px; letter-spacing: .08em; margin-bottom: 4px; }
.wxt { position: absolute; right: -10px; top: -14px; background: #FFD54F; color: #1A1400; font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; display: flex; align-items: center; gap: 7px; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.wxt i { width: 8px; height: 8px; border-radius: 50%; background: #D32F2F; animation: wxb 1.2s steps(2, jump-none) infinite; }
@keyframes wxb { 50% { opacity: .2; } }
.wxc { min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); margin-bottom: 8px; }
.eyebrow.blue { color: #6FA8FF; }
.txt { color: var(--muted); max-width: 52ch; }
.wxl { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.wxl li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wxl .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(229,72,61,.14); color: var(--warn); }
.wxl b { display: block; margin-bottom: 2px; }
.wxl span { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* noc i ekran */
.nxg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: center; }
.nxv { border: 1px solid rgba(128,128,128,.25); border-radius: 16px; padding: 22px; background: rgba(128,128,128,.06); min-width: 0; }
.nxb { position: relative; height: 34px; border-radius: 10px; overflow: hidden; background: #05070A; }
.nxb i { position: absolute; top: 0; bottom: 0; }
.nscr i.on { background: linear-gradient(90deg, #19c2b0, #3ba4f5); }
.nscr i.nt { background: #26345A; }
.nscr i.off { background: #05070A; box-shadow: inset 0 0 0 1px rgba(128,128,128,.3); }
.nxs { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.nxl { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-size: 15px; }
.nxl li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nxl li i { width: 14px; height: 14px; border-radius: 4px; flex: none; display: inline-block; }
.nxl b { font-variant-numeric: tabular-nums; }
.nxn { color: var(--muted); font-size: 14px; margin: 16px 0 0; }

/* pokaz wskaźników */
.show { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 28px; align-items: center; margin: 0 0 28px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.show .pic { position: relative; aspect-ratio: 420 / 443; border-radius: 12px; overflow: hidden; background: #000; max-width: 100%; }
.show .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.025); transition: opacity .45s ease; }
.show .meta { min-width: 0; }
.show .grp { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.show .nm { font: 700 clamp(24px, 3vw, 34px)/1.1 var(--f-b); margin: 0 0 10px; }
.show .ds { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0 0 18px; max-width: 46ch; min-height: 3.2em; }
.show .ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.show button { font: inherit; font-size: 15px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.show .cnt { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); min-width: 56px; }
.show .bar { flex: 1; min-width: 80px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.show .bar i { display: block; height: 100%; width: 0; background: currentColor; opacity: .7; }

/* wskaźniki */
.aurora { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 0 0 26px; padding: 16px 18px; border-left: 4px solid #3DDC97; background: rgba(61,220,151,.09); border-radius: 0 12px 12px 0; }
.aurora .ring { width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#3DDC97, #2BC4E0, #7C5CFF, #3DDC97); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
.aurora b { display: block; font-size: 17px; margin-bottom: 4px; }
.aurora p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 70ch; }
.ind { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 22px; }
.ind h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .02em; }
.ind ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ind li { font-size: 13px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.ind li.hi { border-color: #3DDC97; color: var(--fg); font-weight: 600; }
.ind .soon { grid-column: 1 / -1; padding-top: 14px; border-top: 1px dashed var(--line); }
.ind .soon li { border-style: dashed; opacity: .8; }
.ind-note { font-size: 13px; color: var(--muted); margin: 18px 0 0; }

/* aktualizacje */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.f { border: 1px solid var(--gl); border-radius: 14px; padding: 18px; background: rgba(255,255,255,.03); }
.f h3 { margin: 0 0 6px; font: 700 17px var(--f-d); letter-spacing: .02em; }
.f p { margin: 0; color: var(--muted); line-height: 1.55; }
.f .k { font: 700 13px var(--f-d); color: var(--c2); letter-spacing: .12em; margin-bottom: 8px; text-transform: uppercase; }
.log { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.log li { display: flex; gap: 16px; color: var(--muted); line-height: 1.5; flex-wrap: wrap; }
.log b { min-width: 120px; color: var(--fg); }

/* cennik */
.cur { display: flex; gap: 6px; margin: -8px 0 18px; }
.cur button { font: 600 14px var(--f-b); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gl); background: transparent; color: var(--muted); cursor: pointer; }
.cur button[aria-pressed="true"] { color: #031418; background: var(--c); border-color: var(--c); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { border: 1px solid var(--gl); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,.03); }
.plan.hi { border-color: var(--c); box-shadow: 0 0 30px -8px rgba(51,209,230,.45); }
.plan .n { font: 700 17px var(--f-d); text-transform: uppercase; letter-spacing: .06em; }
.plan .price { font: 700 42px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 15px var(--f-b); color: var(--muted); }
.plan .pay { font-size: 13px; color: var(--muted); }
.plan ul { margin: 0; padding-left: 18px; color: #BFD2DB; line-height: 1.7; flex: 1; }
.price-note { font-size: 13px; color: var(--muted); margin: 16px 0 0; }

/* strony zwykłe i podziękowanie */
.page-body { padding: 34px; margin-block: 20px 50px; }
.page-body h1 { font: 700 clamp(28px, 4vw, 42px)/1.1 var(--f-d); margin: 0 0 18px; }
.entry { max-width: 72ch; line-height: 1.7; color: #CFDDE4; }
.entry h2, .entry h3 { font-family: var(--f-d); color: var(--fg); }
.entry a { color: var(--c); }
.key { font: 700 clamp(20px, 3vw, 28px) ui-monospace, monospace; letter-spacing: .06em; padding: 14px 18px; border: 1px dashed var(--c); border-radius: 12px; display: inline-block; margin: 6px 0 14px; user-select: all; word-break: break-all; }
.wait { color: var(--muted); }

/* konto, logowanie, parowanie */
.acc h2 { font: 700 20px var(--f-d); margin: 26px 0 12px; }
.login { max-width: 460px; display: grid; gap: 14px; margin-top: 10px; }
.sp-gbtn { min-height: 44px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--gl); }
.lf { display: grid; gap: 8px; }
.lf label { color: var(--muted); font-size: 14px; font-weight: 600; }
.lf .row { display: flex; gap: 8px; flex-wrap: wrap; }
.lf input { flex: 1; min-width: 180px; font: 500 16px var(--f-b); color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid var(--gl); border-radius: 10px; padding: 11px 13px; }
.lf input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.lf input.code { font: 700 26px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; max-width: 240px; }
.linkbtn { background: none; border: 0; color: var(--c); cursor: pointer; padding: 0; font: inherit; font-size: 14px; justify-self: start; }
.msg { min-height: 1.4em; color: var(--muted); margin: 0; }
.msg.err { color: #FF8A80; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.acc-card { border: 1px solid var(--gl); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); display: grid; gap: 4px; min-width: 0; }
.acc-card span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.acc-card b { font: 700 20px var(--f-d); overflow-wrap: anywhere; }
.acc-card b.on { color: var(--ok); }
.acc-card small { color: var(--muted); }
.devs { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; max-width: 620px; }
.devs li { display: flex; align-items: center; gap: 12px; justify-content: space-between; border: 1px solid var(--gl); border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.devs li span { color: var(--muted); font-size: 13px; }
.devs li .empty { color: var(--muted); }
.ok-big { font-size: 18px; color: var(--fg); }
.steps { line-height: 1.8; padding-left: 20px; }
.keybox { margin: 10px 0 18px; color: var(--muted); }
.keybox summary { cursor: pointer; color: var(--c); }
.gbuy { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--gl); border-radius: 14px; }
.gbuy > div:first-child { min-width: 0; flex: 1 1 320px; color: var(--muted); }
.gbuy b { color: var(--fg); }

/* stopka */
.site-footer { padding-block: 30px 34px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.foot { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
.site-footer b { color: var(--fg); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); }

@media (max-width: 1050px) { .wxl { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .wxg, .nxg { grid-template-columns: 1fr; gap: 36px; }
  .wxa { position: static; margin-top: 10px; max-width: none; box-shadow: none; }
  .wxt { right: 6px; }
  .wxd { margin: 0; }
  .feat, .plans, .foot { grid-template-columns: 1fr; }
  .nav .links > a { display: none; }
  .nav .links > a.acc-link { display: inline; }
  .page-body { padding: 20px; }
}
@media (max-width: 700px) { .show { grid-template-columns: 1fr; } .show .pic { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .show .pic img { transition: none; } .wxt i { animation: none; } html { scroll-behavior: auto; } }

/* promocja startowa i rabaty (1.2.0) */
.promo-tag { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.promo-tag b { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(140,224,90,.14); border: 1px solid rgba(140,224,90,.5); color: #B8F08F; font: 700 12px var(--f-d); letter-spacing: .08em; text-transform: uppercase; }
.promo-box { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(140,224,90,.45); border-radius: 12px; background: rgba(140,224,90,.08); }
.promo-box b { font: 700 16px var(--f-d); color: #B8F08F; letter-spacing: .03em; }
.promo-box span { color: var(--muted); font-size: 14px; }
.plan .price.disc .was { font-size: 22px; color: var(--muted); font-weight: 500; text-decoration-thickness: 2px; }
.plan .price.disc .now { color: #B8F08F; }
.acc-promo { margin: 18px 0; padding: 16px; border: 1px solid rgba(140,224,90,.45); border-radius: 12px; background: rgba(140,224,90,.08); }
.acc-promo h2 { margin: 0 0 6px; font-size: 18px; }
.acc-promo p { margin: 0 0 10px; color: var(--muted); }
.acc-promo .price-line s { color: var(--muted); margin-left: 6px; }
.plan .price.disc .nw { white-space: nowrap; }
.consent { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--c); }
.apk-line { margin: 10px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan .apk-ver { display: block; margin-top: 8px; text-align: center; font-size: 12px; color: var(--muted); }
/* wersja webowa (1.3.0) */
.chip-link { text-decoration: none; color: inherit; border-color: var(--c); }
.chip-link:hover { background: rgba(51,209,230,.08); }
.plan .webapp-link { display: block; margin-top: 10px; text-align: center; font-size: 13px; color: var(--c); }