/* BetElite theme.css - design system wydzielony ze strona-sie-wzoruj.html */
/* ============ TOKENY ============ */
:root{
  --bg:#0F1113;
  --bg-2:#14161A;
  --card:#171A1E;
  --line:#272B31;
  --line-soft:#1F2227;
  --cream:#F2F0E9;
  --ink:#191C1E;
  --ink-soft:#62696E;
  --gold:#E3B34C;
  --gold-hi:#F6D77E;
  --gold-deep:#A8781F;
  --gold-grad:linear-gradient(180deg,#F6D77E 0%,#E3B34C 46%,#A8781F 100%);
  --gold-soft:rgba(227,179,76,.10);
  --win:#2E9E63;
  --loss:#C8553D;
  --text:#EBEDF0;
  --muted:#99A1A9;
  --fd:'Archivo',system-ui,sans-serif;
  --fb:'Schibsted Grotesk','Archivo',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
section{scroll-margin-top:90px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:min(1160px,92%);margin-inline:auto}

/* ============ TŁO: WARP GRID + ZIARNO ============ */
.warp{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:radial-gradient(130% 95% at 50% 16%,#000 0 30%,rgba(0,0,0,.5) 56%,transparent 82%);
  mask:radial-gradient(130% 95% at 50% 16%,#000 0 30%,rgba(0,0,0,.5) 56%,transparent 82%);
}
.warp svg{width:100%;height:100%;display:block}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.06;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
section,.statstrip,footer{position:relative;z-index:2}

/* ============ TYPOGRAFIA ============ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:600 11px/1 var(--fm);letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--gold)}
.h2{
  font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,46px);line-height:1.04;letter-spacing:-.01em;
  margin:14px 0 16px;
}
.lead{color:var(--muted);max-width:56ch}
.au{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ============ PRZYCISKI ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14.5px/1 var(--fd);letter-spacing:.02em;
  padding:15px 26px;border-radius:9px;
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold-grad);color:#231A08;border:1px solid rgba(143,106,30,.9)}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{border:1px solid #32363C;color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn-ink{background:#15171B;color:var(--cream)}
.btn-ink:hover{filter:brightness(1.3)}
.btn-owned{background:rgba(46,158,99,.12)!important;color:var(--win)!important;border:1px solid rgba(46,158,99,.4)!important;cursor:default!important;pointer-events:none}
.btn-owned:hover{filter:none!important;transform:none!important}

/* ============ NAGŁÓWEK ============ */
.site-head{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(15,17,19,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-color:var(--line-soft);
}
.nav{display:flex;align-items:center;gap:34px;height:72px}
.logo{font:800 20px var(--fd);letter-spacing:.02em;display:flex;align-items:center;gap:0;position:relative}
.logo b{font-weight:800;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.logo-mark{width:16px;height:18px;background:var(--gold-grad);margin-right:9px;position:relative;clip-path:polygon(74% 0,8% 60%,40% 60%,24% 100%,94% 38%,50% 38%);-webkit-clip-path:polygon(74% 0,8% 60%,40% 60%,24% 100%,94% 38%,50% 38%)}
/* Świecący, wirujący pierścień za znaczkiem loga (ten sam efekt co w panelu admina).
   Pozycjonowany wzgledem .logo (lewo wyrownany w navie) - w .auth-logo mark jest
   wyśrodkowany razem z tekstem, wiec efekt tam pomijamy (zle by sie wyrownal). */
.logo::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg, var(--gold), transparent 35%, transparent 65%, var(--gold));
  opacity:.45;filter:blur(2px);
  animation:logoRingSpin 6s linear infinite;
}
@keyframes logoRingSpin{to{transform:translateY(-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.logo::before{animation:none}}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font:500 14px var(--fb);color:var(--muted);transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .login{font:600 13.5px var(--fb);color:var(--text);padding:10px 18px;border:1px solid var(--line);border-radius:9px;transition:border-color .18s,color .18s}
.nav-cta .login:hover{border-color:var(--gold);color:var(--gold-hi)}
.nav-cta .btn{padding:11px 18px;font-size:13.5px}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.burger span{width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s}
.mnav{
  display:none;position:fixed;inset:72px 0 auto;z-index:55;
  background:rgba(15,17,19,.97);border-bottom:1px solid var(--line);
  padding:18px 6vw 26px;flex-direction:column;gap:4px;
}
.mnav a{padding:12px 0;font:600 17px var(--fb);border-bottom:1px solid var(--line-soft)}
.mnav .btn{margin-top:16px}
body.nav-open .mnav{display:flex}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;padding:168px 0 84px;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:-8%;top:2%;width:780px;height:600px;
  background:radial-gradient(closest-side,rgba(206,214,222,.09),transparent 72%);
  filter:blur(8px);pointer-events:none;z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;position:relative}
.h1{
  font-family:var(--fd);font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,5.6vw,68px);line-height:.99;letter-spacing:-.015em;
  margin:20px 0 22px;
}
.hero .lead{font-size:17.5px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{
  margin-top:26px;font:500 12px var(--fm);letter-spacing:.06em;
  color:var(--muted);
}
.hero-trust b{color:var(--text);font-weight:500}

/* ============ KUPONY (podpis wizualny) ============ */
.slip{
  position:relative;
  background:var(--cream);
  background-image:repeating-linear-gradient(0deg,rgba(22,25,27,.026) 0 1px,transparent 1px 4px);
  color:var(--ink);
  border-radius:10px;
  font-family:var(--fm);
  -webkit-mask:
    radial-gradient(circle 6px at 12px 0,transparent 5.5px,#000 6px) 0 0/24px 52% repeat-x,
    radial-gradient(circle 6px at 12px 100%,transparent 5.5px,#000 6px) 0 100%/24px 52% repeat-x;
  mask:
    radial-gradient(circle 6px at 12px 0,transparent 5.5px,#000 6px) 0 0/24px 52% repeat-x,
    radial-gradient(circle 6px at 12px 100%,transparent 5.5px,#000 6px) 0 100%/24px 52% repeat-x;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
.tear{border-top:2px dashed rgba(22,25,27,.22);margin:14px 0}
.stamp{
  position:absolute;z-index:3;
  font:700 12.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;
  color:var(--win);
  border:3px solid currentColor;outline:1.5px solid currentColor;outline-offset:3px;
  border-radius:6px;padding:.55em .85em;
  transform:rotate(-8deg);opacity:.9;
  background:rgba(46,158,99,.06);
}
.stamp--loss{color:var(--loss);transform:rotate(6deg);background:rgba(200,85,61,.06)}
.barcode{
  height:26px;
  background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 7px,transparent 7px 9px,currentColor 9px 10px,transparent 10px 14px);
  opacity:.8;
}

/* Stos kuponów w hero */
.slipstack{position:relative;max-width:432px;margin-left:auto}
.slip--back{
  position:absolute;top:-58px;right:-22px;width:82%;
  padding:18px 22px 40px;transform:rotate(5deg);
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45)) brightness(.96);
  z-index:1;font-size:12px;
}
.slip--back .stamp{top:10px;right:16px;font-size:11px}
.slip--front{position:relative;z-index:2;transform:rotate(-2deg);padding:24px 26px 26px;font-size:13px}
.s-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.s-brand{font:700 15px var(--fd);letter-spacing:.04em}
.s-brand b{color:var(--gold-deep)}
.s-no{font:500 11.5px var(--fm);color:var(--ink-soft)}
.s-sub{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin-top:3px;text-transform:uppercase}
.leg{margin:12px 0}
.leg-top{display:flex;justify-content:space-between;font-weight:700;gap:10px}
.leg-top .ok{color:var(--win)}
.leg-top .no{color:var(--loss)}
.leg-sub{font-size:11px;color:var(--ink-soft);margin-top:2px}
.s-tot{display:flex;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}
.s-tot-v{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:15px;margin-top:3px}
.slip--front .stamp{right:16px;bottom:88px}
.s-code{display:flex;align-items:center;gap:12px;margin-top:16px}
.s-code span{font-size:10.5px;letter-spacing:.2em;color:var(--ink-soft)}
.s-code .barcode{flex:1}

/* ============ PASEK STATYSTYK ============ */
.statstrip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(20,22,26,.82)}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 26px}
.stat + .stat{border-left:1px solid var(--line-soft)}
.sv{
  font:700 clamp(28px,3.2vw,40px)/1 var(--fm);
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sv em{font-style:normal;font-size:.62em}
.sl{font:500 10.5px var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* ============ DARMOWY TYP DNIA ============ */
.dgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
.dslip{max-width:430px;padding:24px 26px;transform:rotate(-1.6deg);font-size:13px}
.d-note{font-size:11.5px;color:var(--ink-soft);line-height:1.55;margin-top:4px}
.d-note strong{color:var(--ink);font-weight:700}
.d-meta{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.d-count{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:10px 18px;font:600 13px var(--fm);color:var(--text)}
.d-count b{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.d-yday{font:500 12px var(--fm);color:var(--muted)}
.d-yday .ok{color:var(--win);font-weight:700}
.d-mail{margin-top:24px}
.d-mail p{font-size:13.5px;color:var(--muted);margin-bottom:12px;max-width:56ch}

/* ============ TRANSPARENTNOŚĆ + ROZLICZENIE ============ */
.sec{padding:96px 0}
.tgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.checks{margin:26px 0 30px;display:grid;gap:13px}
.checks li{display:flex;gap:12px;color:var(--text);font-size:15.5px}
.checks li::before{content:"✓";font:700 14px var(--fm);color:var(--gold);margin-top:2px}
.chips-label{font:600 10.5px var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  width:34px;height:42px;border-radius:5px;
  background:var(--cream);color:var(--win);
  display:grid;place-items:center;font:700 15px var(--fm);
  -webkit-mask:radial-gradient(circle 4px at 50% 0,transparent 3.5px,#000 4px);
  mask:radial-gradient(circle 4px at 50% 0,transparent 3.5px,#000 4px);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.chip--l{color:var(--loss)}
.chips-link{font:600 13px var(--fb);color:var(--gold);margin-left:10px;white-space:nowrap}
.chips-link:hover{text-decoration:underline}

.receipt{max-width:420px;margin-left:auto;padding:26px 28px;transform:rotate(1.4deg);font-size:13px}
.r-row{display:flex;align-items:baseline;gap:6px;margin:9px 0}
.r-row .dots{flex:1;border-bottom:2px dotted rgba(22,25,27,.3);transform:translateY(-4px)}
.r-row b{font-weight:700}
.r-row .big{font-size:17px}
.receipt .stamp{right:22px;bottom:104px}
.r-note{font-size:10.5px;color:var(--ink-soft);margin-top:14px;line-height:1.5}

/* ============ METODY ============ */
.sec-alt{background:rgba(19,21,25,.86);border-block:1px solid var(--line-soft)}
.methods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.mcard{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:26px 22px;transition:transform .2s ease,border-color .2s ease;
}
.mcard:hover{transform:translateY(-4px);border-color:rgba(227,179,76,.45)}
.mtag{font:600 10.5px var(--fm);letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.mcard h3{font:700 19px var(--fd);margin:16px 0 9px;letter-spacing:.01em}
.mcard p{color:var(--muted);font-size:14px;line-height:1.55}

/* ============ PAKIETY ============ */
.p-head{max-width:660px}
.bill-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.bill-toggle{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:4px;gap:4px}
.bill-toggle button{font:600 13.5px var(--fb);color:var(--muted);padding:9px 20px;border-radius:99px;transition:background .2s,color .2s}
.bill-toggle button.on{background:var(--gold-grad);color:#231A08;font-weight:700}
.bill-save{font:600 11px var(--fm);letter-spacing:.08em;color:var(--gold);text-transform:uppercase}

.trial-slip{
  margin:30px 0 34px;padding:22px 28px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.trial-slip .t-tag{font:700 11px var(--fm);letter-spacing:.22em;color:var(--loss);text-transform:uppercase}
.trial-slip h3{font:800 20px var(--fd);text-transform:uppercase;letter-spacing:.01em;margin-top:4px}
.trial-slip p{font-family:var(--fb);font-size:14px;color:var(--ink-soft);margin-top:2px;max-width:54ch}
.trial-slip p b{color:var(--ink);font-weight:600}
.trial-slip .t-price{margin-left:auto;font:700 34px/1 var(--fm);white-space:nowrap}
.trial-slip .t-price small{font-size:13px;color:var(--ink-soft);font-weight:500}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:32px 28px 28px;
  transition:transform .2s ease,border-color .2s ease;
}
.plan:hover{transform:translateY(-4px);border-color:#3A3F46}
.plan--gold{
  border:1.5px solid var(--gold);
  background:linear-gradient(180deg,var(--gold-soft),transparent 42%),var(--card);
  box-shadow:0 0 0 1px rgba(227,179,76,.22),0 34px 64px rgba(0,0,0,.55);
}
@media (min-width:901px){
  .plan--gold{transform:scale(1.045)}
  .plan--gold:hover{transform:scale(1.045) translateY(-4px)}
}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold-grad);color:#231A08;
  font:700 10.5px var(--fm);letter-spacing:.16em;text-transform:uppercase;
  padding:7px 15px;border-radius:99px;white-space:nowrap;
}
.plan h3{font:800 21px var(--fd);text-transform:uppercase;letter-spacing:.02em}
.plan .p-desc{font-size:13.5px;color:#99A1A9;margin:6px 0 18px;min-height:40px}
.pr{display:none}
.pr.show{display:block}
.price{
  font:700 40px/1 var(--fm);
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.price small{font:500 13px var(--fb);-webkit-text-fill-color:var(--muted);color:var(--muted)}
.p-note{font:500 12px var(--fm);color:var(--gold);margin-top:8px;min-height:16px}
.p-div{border-top:1px solid var(--line);margin:20px 0 16px}
.feat{display:grid;gap:10px;flex:1;align-content:start;margin-bottom:24px}
.feat li{display:flex;gap:10px;font-size:13.5px;color:#E9ECEF}
.feat li::before{content:"✓";font:700 12px var(--fm);color:var(--gold);margin-top:2px}
.feat li.fx{color:var(--gold-hi);font-weight:600}
.feat li.fx::before{content:"★"}
.plan .btn{width:100%}
.plan .btn-ghost{border-color:#3A3F46;color:#E9ECEF}
.plan .btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)}

.guarantee{
  margin-top:26px;
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg-2);border:1px solid rgba(227,179,76,.32);border-radius:14px;
  padding:22px 26px;
}
.g-ico{
  flex-shrink:0;width:42px;height:42px;border-radius:11px;
  background:rgba(227,179,76,.12);
  display:grid;place-items:center;font:700 18px var(--fm);color:var(--gold);
}
.guarantee h4{font:700 16px var(--fb);margin-bottom:3px}
.guarantee p{font-size:13.5px;color:var(--muted);max-width:74ch}
.plans-foot{
  margin-top:22px;text-align:center;
  font:500 12px var(--fm);letter-spacing:.05em;color:var(--muted);
}

/* ============ FAQ ============ */
.faq{max-width:760px;margin:44px auto 0;display:grid;gap:12px}
.faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:19px 22px;font:600 16px var(--fb);
}
.faq summary::-webkit-details-marker{display:none}
.sicon{font:500 20px/1 var(--fm);color:var(--gold);transition:transform .25s ease;flex-shrink:0}
.faq details[open] .sicon{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;max-width:64ch}

/* ============ DARMOWY TYP ============ */
.freepick{background:rgba(20,22,26,.85);border-block:1px solid var(--line-soft);position:relative;z-index:2}
.fp-in{display:flex;align-items:center;gap:26px;padding:38px 0;flex-wrap:wrap}
.fp-in h3{font:800 20px var(--fd);text-transform:uppercase;letter-spacing:.01em}
.fp-in p{color:var(--muted);font-size:14px;margin-top:3px;max-width:46ch}
.fp-form{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.fp-form input{
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:13px 16px;font:500 14px var(--fb);color:var(--text);min-width:250px;
}
.fp-form input::placeholder{color:#6E747B}

/* ============ CTA ============ */
.cta{position:relative;text-align:center;padding:110px 0;overflow:hidden}
.cta::before{
  content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:820px;height:640px;
  background:radial-gradient(closest-side,rgba(206,214,222,.08),transparent 72%);
  filter:blur(8px);pointer-events:none;z-index:-1;
}
.cta .h2{margin-top:16px}
.cta .lead{margin:0 auto 34px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ STOPKA ============ */
footer{border-top:1px solid var(--line-soft);background:rgba(17,19,22,.9)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:64px 0 50px}
.f-brand p{color:var(--muted);font-size:14px;max-width:34ch;margin:14px 0 20px}
.f-social{display:flex;gap:16px;font:600 12.5px var(--fm)}
.f-social a{color:var(--muted)}
.f-social a:hover{color:var(--gold)}
.f-col h4{font:700 11px var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.f-col a{display:block;padding:5px 0;font-size:14px;color:var(--muted)}
.f-col a:hover{color:var(--text)}
.f-bottom{
  border-top:1px solid var(--line-soft);
  padding:22px 0 26px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);
}
.f-bottom .resp{margin-left:auto;max-width:56ch}
.badge18{
  flex-shrink:0;width:36px;height:36px;border:2px solid var(--muted);border-radius:50%;
  display:grid;place-items:center;font:700 12px var(--fm);color:var(--muted);
}

/* ============ ANIMACJE ============ */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}
  .rv-d1{transition-delay:.08s}
  .rv-d2{transition-delay:.16s}
  .rv-d3{transition-delay:.24s}
  @keyframes stampin{
    from{opacity:0;transform:rotate(-22deg) scale(1.7)}
    to{opacity:.9;transform:rotate(-8deg) scale(1)}
  }
  .stamp--hero{animation:stampin .5s cubic-bezier(.2,1.4,.35,1) 1s backwards}
}

/* ============ RESPONSYWNOŚĆ ============ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .slipstack{margin:74px auto 0;max-width:400px}
  .methods{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:1fr;gap:56px}
  .dgrid{grid-template-columns:1fr;gap:44px}
  .dslip{margin:0 auto}
  .receipt{margin:0 auto}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:900px){
  .plans{grid-template-columns:1fr;gap:16px}
  .plan--gold{order:-1}
}
@media (max-width:920px){
  .nav-links,.nav-cta .login{display:none}
  .burger{display:flex}
  .nav-cta{margin-left:0}
  .nav{gap:16px}
  .nav-cta .btn{display:none}
}
@media (max-width:640px){
  .hero{padding-top:130px}
  .methods{grid-template-columns:1fr}
  .sec{padding:72px 0}
  .trial-slip .t-price{margin-left:0}
  .trial-slip{gap:16px}
  .slip--back{right:-8px;top:-52px}
  .fp-form{margin-left:0;width:100%}
  .fp-form input{flex:1;min-width:0}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .f-brand{grid-column:1/-1}
  .f-bottom .resp{margin-left:0}
}


/* ============ KOMPATYBILNOSC ze starym frontem (modale profilu, drawer) ============ */
html.be-logged .mnav-login{display:none}
.plan-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 13.5px var(--fb);padding:12px 18px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer}
.plan-btn:hover{border-color:var(--gold)}
.btn-plan-gold{background:var(--gold-grad);color:#231A08;border-color:rgba(143,106,30,.9)}
.btn-delete-account,.btn-delete-confirm{color:var(--loss);border-color:rgba(200,85,61,.4)}
.btn-drawer-save{background:var(--gold-grad);color:#231A08;border:none;border-radius:10px;padding:10px 16px;font:700 13px var(--fb);cursor:pointer}

/* ============ ALIASY dla podstron (stare nazwy zmiennych ze styles.css) ============ */
:root{
  --bg2:var(--bg-2);
  --bg3:#111318;
  --border:var(--line);
  --muted2:var(--muted);
  --green:var(--win);
  --red:var(--loss);
  --blue:#5B8DB8;
  --gold2:var(--gold-deep);
  --accent:var(--gold);
}
/* Podstrony: tresc zaczyna sie pod fixed naglowkiem */
body.sub{padding-top:104px}
body.sub .page-head{margin-bottom:28px}

/* ============ PREFERS-REDUCED-MOTION: wylacz animacje globalnie ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Wyszarzone pozycje na kartach planow: drogowskaz do wyzszego pakietu */
.feat li.fno{color:var(--muted)}
.feat li.fno::before{content:"✗";color:var(--muted)}

/* ============ DROPDOWN (komponent wspolny, uzywany m.in. na kuponach i kalkulatorze) ============ */
.kp-select{display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;color:var(--muted);font:600 12.5px/1 var(--fb);padding:9px 16px;cursor:pointer;transition:border-color .18s,color .18s}
.kp-select:hover{border-color:var(--gold);color:var(--text)}
.kp-dd{position:relative}
.kp-dd-btn{gap:9px}
.kp-dd-btn i{font-size:10px;transition:transform .2s;line-height:1}
.kp-dd.open .kp-dd-btn{border-color:var(--gold);color:var(--text)}
.kp-dd.open .kp-dd-btn i{transform:rotate(180deg)}
.kp-dd-list{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#191C22;border:1px solid #32363C;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;display:none;z-index:90}
.kp-dd.open .kp-dd-list{display:block}
.kp-dd-list button{display:flex;width:100%;text-align:left;background:none;border:none;color:var(--muted);font:500 13px var(--fb);padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s,color .12s}
.kp-dd-list button:hover{background:rgba(255,255,255,.05);color:var(--text)}
.kp-dd-list button.on{color:var(--gold);background:var(--gold-soft);font-weight:600}