/* =========================================================
   PYRAMC — motyw "niebo + ziemia" (układ i charakter jak fezzimc.pl, kolory PYRAMC)
   Jasne niebo z pikselowymi chmurami u góry, granatowa pikselowa ziemia niżej, bardzo grube
   nagłówki (Unbounded), pikselowe przyciski i tabele, hero jako zaokrąglona karta + kolorowe kafle.
   Ładowany PO pyramc.css — nadpisuje wygląd, nie zmienia działania.
   ========================================================= */

:root{
  --navy:#0E1424; --navy-2:#141C32; --navy-3:#1B2540; --navy-line:#26335A;
  --sky-1:#EAF4FF; --sky-2:#D6EAFF;
  --f-head:'Unbounded','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* paleta ciemnej strefy ("ziemia"): te same zmienne co w pyramc.css, więc wszystkie komponenty
   (formularz, ranking, cennik, stopka, okno vouchera) ściemniają się same */
.night,.site-footer,.modal-overlay,body.night-page{
  --text:#EAF0FF;--muted:#9FB0D6;--card:#141C32;--card-img:#1B2540;--card-frame:#26335A;
  --line:rgba(255,255,255,.1);--field-bg:#0E1424;--field-bd:#2C3B6B;--edge:#26335A;--drop:transparent;
  --btn:var(--y);--btn-text:var(--on-y);--btn-frame:rgba(246,205,24,.0);--bar:var(--y);
  --tab:#26335A;--tab-frame:#1B2540;--dash:rgba(255,255,255,.18);--band:#0A0F1D;
  --y-frame:rgba(246,205,24,.22);color:var(--text)
}

body{background:var(--navy);background-image:none;color:var(--text)}
body.night-page{background:var(--navy) url(../assets/px-night.png) 0 0/960px}
h1,h2,h3{font-family:var(--f-head);text-transform:none;letter-spacing:-.02em;line-height:1.15}

/* ---------- przyciski: płaskie, zaokrąglone, z "pikselowym" dolnym cieniem ---------- */
.btn{border-radius:8px;min-height:46px;padding:.75rem 1.5rem;font-size:15px;letter-spacing:.1em;
  box-shadow:0 4px 0 rgba(0,0,0,.32);border:2px solid rgba(14,20,36,.9);transition:transform .12s var(--ease),box-shadow .12s,background .15s,color .15s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.32);background:#fff;color:#14120c}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.32)}
.btn-y{background:var(--y);color:var(--on-y);box-shadow:0 4px 0 rgba(0,0,0,.32)}
.btn-y:hover{background:#fff;color:#14120c;box-shadow:0 2px 0 rgba(0,0,0,.32)}
.btn-sm{box-shadow:0 3px 0 rgba(0,0,0,.32)}
.btn-blue{background:#4453E0;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.32)}
.btn-blue:hover{background:#6C7BFF;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.32)}
.sq-btn{border-radius:8px;border:2px solid rgba(14,20,36,.9);box-shadow:0 4px 0 rgba(0,0,0,.28);background:#fff;color:#14120c}
.sq-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28);background:var(--y);color:var(--on-y)}
.sq-btn.y{background:var(--y);box-shadow:0 4px 0 rgba(0,0,0,.28)}
.sq-btn.discord{background:#5865F2;color:#fff}
.sq-btn.discord svg{fill:currentColor;stroke:none;width:22px;height:22px}

/* ---------- nagłówek: logo + nazwa + online, menu z ikonami, KUP/Discord po prawej ---------- */
.site-header{background:rgba(214,234,255,.9);border-bottom:0}
.hdr{min-height:88px;gap:26px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:54px;width:auto}
.brand-txt{display:grid;gap:5px}
.brand-txt b{font:800 18px/1 var(--f-head);letter-spacing:-.01em;color:#0E1424}
.brand-txt small{display:flex;align-items:center;gap:7px;font:600 11px/1 var(--font);letter-spacing:.08em;color:#4A5B82;text-transform:uppercase}
.on-dot{width:9px;height:9px;background:#e44;flex:none}
.on-dot.is-on{background:#2ec24a;animation:blink 2s infinite}
.hdr nav{gap:22px;margin-left:auto}
.hdr nav a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:.6rem .2rem;font:600 14px/1 var(--font);letter-spacing:0;text-transform:none;color:#31456F}
.hdr nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr nav a:hover,.hdr nav a.is-active{color:#0E1424}
.hdr nav a::after{height:3px;bottom:-6px;background:var(--y)}
.hdr nav a.is-active::after{transform:scaleX(1)}
.hdr-right{gap:12px}
.kup-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 1.1rem;background:var(--y);color:var(--on-y);
  border:2px solid #0E1424;border-radius:8px;box-shadow:0 4px 0 rgba(0,0,0,.3);font:400 14px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;
  transition:transform .12s var(--ease),box-shadow .12s,background .15s}
.kup-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.3);background:#fff;color:#0E1424}

/* ---------- niebo: hero na jasnym tle z pikselowymi chmurami i pikselową ziemią u dołu ---------- */
.hero{position:relative;padding:34px 0 190px;
  background:url(../assets/px-sky.png) 0 0/1440px auto repeat-x,linear-gradient(180deg,var(--sky-2) 0,var(--sky-1) 55%,#F4F9FF 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:192px;pointer-events:none;
  background:url(../assets/px-ground.png) 0 100%/1440px 192px repeat-x}
.hero .container{position:relative;z-index:1}
.bento{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:26px;align-items:stretch}

.hero-panel{--hp-stripe:rgba(255,255,255,.0);--hp-glow:rgba(255,255,255,.4);margin:0;min-height:390px;border-radius:18px;
  background:linear-gradient(135deg,var(--hp-bg) 0%,color-mix(in srgb,var(--hp-bg) 78%,#ff8a00) 100%);
  box-shadow:0 26px 44px -22px rgba(14,20,36,.55)}
.hero-panel::before{display:none}
.slide{padding:48px clamp(34px,4.4vw,80px) 70px}
.slide h1,.slide h2{font:900 clamp(30px,3.7vw,54px)/1.04 var(--f-head);letter-spacing:-.03em;text-transform:none;margin-bottom:16px;text-shadow:0 3px 0 rgba(255,255,255,.3)}
.s-kicker{display:inline-block;margin-bottom:16px;padding:.5rem .8rem;border-radius:4px;background:rgba(14,20,36,.88);color:#fff;font-size:13px;letter-spacing:.14em}
.slide p.txt{font:500 15px/1.65 var(--font);letter-spacing:0;max-width:40ch}
.s-logo{filter:drop-shadow(0 18px 14px rgba(14,20,36,.28))}
.poster{border-radius:6px}
.hero-dots{bottom:26px}
.hero-dots button{border-radius:2px}
.hero-status{border-radius:6px;right:18px;bottom:18px;background:rgba(14,20,36,.88)}
.hero-panel .btn{background:#0E1424;color:#fff;border-color:#0E1424}
.hero-panel .btn:hover{background:#fff;color:#0E1424}
.hero-panel .btn-blue{background:#5865F2;border-color:#0E1424}

/* kolorowe kafle obok hero */
.tiles{grid-template-rows:repeat(3,1fr);gap:18px;padding:0}
.tile{margin:0;min-height:100px;padding:0 18px;border:2px solid rgba(255,255,255,.4);border-radius:14px;
  font:400 20px/1.2 var(--font-head);letter-spacing:.14em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);
  box-shadow:0 14px 26px -16px rgba(14,20,36,.6);background:linear-gradient(135deg,#43D268,#1FA44D)}
.tile::before{opacity:.45;background:linear-gradient(135deg,rgba(255,255,255,.2) 25%,transparent 25% 50%,rgba(255,255,255,.2) 50% 75%,transparent 75%) 0 0/62.23px 62.23px}
.tile.green{background:linear-gradient(135deg,#43D268,#1FA44D);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.tile.blue{background:linear-gradient(135deg,#6C7BFF,#4453E0);color:#fff}
.tile.red{background:linear-gradient(135deg,#FF7A6B,#E0392D);color:#fff}
.tile:hover{transform:translateY(-3px)}

/* ---------- ziemia: ciemna strefa z pikselowym szumem ---------- */
.night{position:relative;background:var(--navy) url(../assets/px-night.png) 0 0/960px;padding:10px 0 40px}
.night .container,.night .container .container{position:relative}
.sec-title{display:block;text-align:center;margin:96px 0 44px}
.sec-title::before,.sec-title::after{display:none}
.sec-title h2{display:block;background:none;box-shadow:none;padding:0;color:#fff;font:900 clamp(34px,5.4vw,66px)/1.04 var(--f-head);letter-spacing:-.04em;text-transform:none}
.night > .container:first-child .sec-title,.night > section:first-child .sec-title{margin-top:30px}
.lead{margin:-14px auto 46px;color:var(--muted);font-size:15px}

/* formularz doładowania */
.topup{border:2px solid var(--edge);border-radius:18px;background:var(--card);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);overflow:hidden}
.topup-head{background:linear-gradient(90deg,#1B2540,#141C32);color:#fff;border-bottom:2px solid var(--edge);padding:20px 28px;
  font:800 18px/1 var(--f-head);letter-spacing:-.01em;text-transform:none}
.topup-head::after,.modal-head::after{display:none}
.topup-head{padding-right:28px}
.lbl{font-size:14px;letter-spacing:.12em;color:var(--muted)}
.amount-box{border-radius:14px;border:2px solid var(--edge)}
.amount-big b{font-size:60px;color:#fff}
.step{border-radius:10px;box-shadow:0 4px 0 rgba(0,0,0,.4);background:var(--navy-3);color:#fff;border:2px solid var(--edge)}
.step:hover{background:var(--y);color:var(--on-y);box-shadow:0 2px 0 rgba(0,0,0,.4);transform:translateY(2px)}
input[type=range]::-webkit-slider-runnable-track{border-radius:8px;box-shadow:none;border:2px solid var(--edge);background:linear-gradient(90deg,var(--y),var(--y)) 0/var(--fill,10%) 100% no-repeat,var(--navy)}
input[type=range]::-moz-range-track{border-radius:8px;box-shadow:none;border:2px solid var(--edge);background:var(--navy)}
input[type=range]::-moz-range-progress{border-radius:8px;background:var(--y)}
input[type=range]::-webkit-slider-thumb{background:var(--y);border:3px solid #0E1424;box-shadow:none;border-radius:5px}
input[type=range]::-moz-range-thumb{background:var(--y);border:3px solid #0E1424;box-shadow:none;border-radius:5px}
input[type=text],input[type=email]{border-radius:10px;border-color:var(--field-bd);background:var(--field-bg)}
input::placeholder{color:#6B7BA6}
input[type=text]:focus,input[type=email]:focus{box-shadow:0 0 0 3px rgba(246,205,24,.45);border-color:var(--y)}
.nick-avatar{border-radius:5px}
.pay-method .pm{border-radius:12px;border-color:var(--field-bd)}
.pay-method input:checked+.pm{background:var(--y);color:var(--on-y);border-color:var(--y);box-shadow:0 0 0 3px rgba(246,205,24,.3)}
.pay-method input:checked+.pm small{color:rgba(20,18,12,.75)}
.price-box{margin:0;border-radius:14px;box-shadow:none;background:linear-gradient(135deg,#FFD83D,#F5A623);color:#14120c}
.check input{border-radius:6px}
.check input:checked::after{border-color:#14120c}
.discount-row .btn{border-radius:10px;box-shadow:0 3px 0 rgba(0,0,0,.32)}
.pay-row .btn{min-height:60px;font-size:16px}

/* cennik */
.price-card{max-width:860px}
.price-table th{font-size:13px}
.price-table td{border-top:2px solid var(--line)}
.price-table tbody tr:nth-child(odd) td{background:rgba(255,255,255,.025)}
.price-table td:last-child{color:var(--y)}
.price-notes a{color:#fff}

/* ranking: karty w stylu topki */
.ranks{gap:22px;padding:0}
.rank{border:2px solid var(--edge);border-radius:16px;background:var(--card);box-shadow:none;overflow:hidden;transition:transform .25s var(--ease),border-color .25s}
.rank:hover{transform:translateY(-4px);box-shadow:none;border-color:var(--y)}
.rank.first{border-color:var(--y);box-shadow:0 0 0 3px rgba(246,205,24,.22)}
.rank-img{background:var(--card-img)}
.rank-img b{color:#4A5B8C}
.rank.first .rank-img b{color:var(--y)}
.rank h3{font:800 16px/1.2 var(--f-head);letter-spacing:-.01em;color:#fff}
.rank-bar{border-radius:8px;background:var(--y);color:#14120c;margin:0 14px 14px;padding:.75rem .5rem}
.note{color:var(--muted)}

/* baner */
.more{margin-top:100px}
.banner{border:2px solid var(--edge);border-radius:20px;background:linear-gradient(135deg,#1B2540,#0E1424);box-shadow:none;margin:0}
.banner::before{opacity:.5}
.banner h2{font:900 clamp(28px,4.2vw,48px)/1.05 var(--f-head);letter-spacing:-.03em;text-transform:none;color:#fff}
.banner p{font:500 15px/1.6 var(--font);text-transform:none;letter-spacing:0;color:var(--muted)}

/* stopka */
.site-footer{margin-top:0;padding:80px 0 30px;background:#0A0F1D;border-top:2px solid var(--edge)}
.footer-col h4{font:800 15px/1.2 var(--f-head);letter-spacing:-.01em;text-transform:none;color:#fff}
.footer-brand p{color:var(--muted);text-transform:none;letter-spacing:0;font-size:12px}
.footer-col a,.footer-col button{color:var(--muted)}
.footer-col a:hover,.footer-col button:hover{color:var(--y)}
.footer-copy{color:var(--muted);border-top-color:var(--line)}
.switch .track{border-radius:6px;box-shadow:none;border:2px solid var(--edge);background:var(--navy-3)}
.switch .track::after{border-radius:3px;background:var(--y)}

/* okno vouchera, powiadomienia */
.modal{border:2px solid var(--edge);border-radius:18px;background:var(--card);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);overflow:hidden}
.modal-head{background:linear-gradient(90deg,#1B2540,#141C32);color:#fff;border-bottom:2px solid var(--edge);font:800 18px/1 var(--f-head);letter-spacing:-.01em;text-transform:none;padding-right:70px}
.modal-close{border-radius:8px;background:var(--navy-3);color:#fff}
.toast{border-radius:12px;box-shadow:0 18px 36px -14px rgba(0,0,0,.6);border:2px solid rgba(14,20,36,.9)}

/* strony prawne (regulamin, polityka): ciemne tło "ziemi" */
body.night-page .site-header{background:rgba(14,20,36,.92)}
body.night-page .brand-txt b,body.night-page .hdr nav a:hover{color:#fff}
.legal{padding:70px 0 20px}
.legal h1{font:900 clamp(30px,4.6vw,54px)/1.05 var(--f-head);letter-spacing:-.04em;text-transform:none;color:#fff;margin-bottom:34px}
.legal .box{border:2px solid var(--edge);border-radius:18px;background:var(--card);box-shadow:none}
.legal .box h2{font:800 16px/1.2 var(--f-head);letter-spacing:-.01em;text-transform:none;color:#fff}
.legal .box a{color:var(--y)}

/* ---------- tryb ciemny (przełącznik w stopce): niebo też robi się nocą ---------- */
[data-theme="dark"] .site-header{background:rgba(14,20,36,.92)}
[data-theme="dark"] .brand-txt b,[data-theme="dark"] .hdr nav a:hover,[data-theme="dark"] .hdr nav a.is-active{color:#fff}
[data-theme="dark"] .brand-txt small,[data-theme="dark"] .hdr nav a{color:#9FB0D6}
[data-theme="dark"] .hero{background:url(../assets/px-sky.png) 0 0/1440px auto repeat-x,linear-gradient(180deg,#1B2750 0,#141C32 60%,#0E1424 100%)}
[data-theme="dark"] .sq-btn{background:var(--navy-3);color:#fff;border-color:var(--edge)}
[data-theme="dark"] .kup-btn{border-color:#0E1424}

/* ---------- responsywność ---------- */
@media (max-width:1280px){
  .hdr nav a svg{display:none}
  .hdr nav{gap:18px}
}
@media (max-width:1100px){
  .bento{grid-template-columns:1fr;gap:22px}
  .tiles{grid-template-rows:none;grid-template-columns:repeat(3,1fr);gap:14px;padding:0}
  .tile{min-height:84px;font-size:16px}
  .hero{padding-bottom:160px}
  .hero::after{height:160px;background-size:1200px 160px}
}
@media (max-width:900px){
  .hdr{min-height:76px}
  .brand-txt small{display:none}
  .kup-btn{display:none}
  .mobile-nav.is-open{background:var(--sky-1)}
  [data-theme="dark"] .mobile-nav.is-open{background:var(--navy-2)}
  .slide{padding:28px 24px 66px}
  .sec-title{margin:76px 0 34px}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
  .hero{padding:22px 0 130px}
  .hero::after{height:130px;background-size:1000px 130px}
  .tile{min-height:72px}
}