:root{
  --bg:#0b0d10;
  --text:#ffffff;
  --muted:#9aa3b2;

  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);

  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --shadow2: 0 12px 40px rgba(0,0,0,.22);

  --r2:22px;

  /* główny niebieski pod stronę */
  --accent:#0ea5e9;         /* blue */
  --accent2:#38bdf8;        /* light blue */

  --card:#12161c;
  --danger:#fb7185;

  /* plan accents – teraz tylko subtelne, NIE tła */
  --planA: rgba(14,165,233,.80);  /* blue */
  --planB: rgba(56,189,248,.80);  /* lighter */
  --planC: rgba(99,102,241,.75);  /* indigo-ish */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 18% 10%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(1100px 700px at 120% 20%, rgba(14,165,233,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
    var(--bg);
  min-height:100svh;
  overflow-x:hidden;
}

.page{ padding:18px; }
@media (max-width:700px){ .page{ padding:0; } }

.wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto;
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  border-radius:var(--r2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:240px;
  background: rgba(255,255,255,.02);
}
@media (max-width:700px){
  .hero{ border-radius:0; border-left:0; border-right:0; }
}
.heroImg{
  position:absolute; inset:0;
  background:url("/img/index-bg.avif") center/cover no-repeat;
  filter:saturate(1.02) contrast(1.02);
}
.heroImg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 32% 22%, rgba(0,0,0,.20), rgba(0,0,0,.86));
}
.heroInner{
  position:relative;
  padding:26px 18px 20px;
  text-align:center;
}
.mark{ display:flex; justify-content:center; margin-bottom:12px; }
.markDot{
  width:54px;height:54px;border-radius:999px;
  display:grid;place-items:center;
  font-weight:1000;color:#071018;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.title{
  font-size:28px;
  font-weight:1000;
  letter-spacing:-0.02em;
}
.sub{
  margin-top:8px;
  color:rgba(154,163,178,.95);
  font-size:14px;
}

.metaRow{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.chip{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  font-size:12px;
  font-weight:900;
  color:rgba(226,232,240,.92);
}
.chip strong{ color:rgba(255,255,255,.92); }

/* ---------------- CARD ---------------- */
.card{
  margin-top:16px;
  border-radius:var(--r2);
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow:var(--shadow2);
  padding:16px;
}
@media (max-width:700px){
  .card{ border-radius:0; border-left:0; border-right:0; margin-top:0; }
}

/* ---------------- GRID/BOX ---------------- */
.grid2{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:12px;
  margin-bottom:12px;
}
@media (max-width:900px){
  .grid2{ grid-template-columns:1fr; }
}

.box{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  padding:14px;
}

.boxHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.label{
  font-size:12px;
  color:rgba(154,163,178,.96);
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.value{
  margin-top:10px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size:13px;
  color:rgba(238,242,255,.95);
  word-break:break-word;
}

.input{
  margin-top:10px;
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:rgba(238,242,255,.95);
  font-size:13px;
  outline:none;
}
.input::placeholder{ color: rgba(167,176,198,.72); }
.input:focus{
  border-color: rgba(14,165,233,.60);
  box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}

.hint{
  margin-top:10px;
  color:rgba(154,163,178,.92);
  font-size:12px;
  line-height:1.35;
}

/* ---------------- BUTTONS ---------------- */
.boxActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  border-radius:999px;
  padding:8px 12px;
  font-weight:1000;
  font-size:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:rgba(238,242,255,.95);
  line-height:1;
}
.btn:hover{ border-color: rgba(255,255,255,.18); }

.btn.primary{
  border:none;
  color:#061018;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.btn.primary:hover{ filter:brightness(1.04); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.msg{
  margin-top:10px;
  font-size:13px;
  min-height:18px;
}
.msg.ok{ color:#4ade80; }
.msg.err{ color: var(--danger); }

/* ---------------- BUY ---------------- */
.buyBox{ margin-top:12px; }
.buyHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* GRID planów */
.planGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 980px){
  .planGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .planGrid{ grid-template-columns: 1fr; }
}

/* =========================
   PLAN CARDS — spójne z niebieskimi buttonami
========================= */
.planCard{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  padding:14px;
  overflow:hidden;

  /* plan accent tylko do ring/paska */
  --p: var(--planA);

  background:
    radial-gradient(900px 240px at 18% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));

  box-shadow: 0 14px 36px rgba(0,0,0,.24);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;

  display:flex;
  flex-direction:column;
  min-height: 220px;
}

/* pasek akcentu */
.planCard::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background: color-mix(in srgb, var(--p) 75%, transparent);
  opacity:.9;
}

/* ring po hover */
.planCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0),
    0 18px 46px rgba(0,0,0,.30);
}

/* BEST — ring w niebieskim (spójny) */
.planCard.best{
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 0 0 2px rgba(14,165,233,.18),
    0 24px 62px rgba(0,0,0,.40);
}

/* badge premium, bez czerwonych “nalep” */
.bestBadge{
  position:absolute;
  top:12px;
  right:12px;
  font-size:11px;
  font-weight:1000;
  padding:7px 10px;
  border-radius:999px;
  color:rgba(238,242,255,.92);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(14,165,233,.28);
  backdrop-filter: blur(10px);
}

/* miejsce na badge */
.planTop{ padding-right: 170px; }
@media (max-width: 640px){
  .planTop{ padding-right: 0; }
  .bestBadge{ position:static; display:inline-flex; margin-bottom:10px; }
}

.planName{
  font-size:12px;
  font-weight:1000;
  color:rgba(226,232,240,.90);
  letter-spacing:.10em;
  text-transform:uppercase;
}

.planPrice{
  margin-top:8px;
  font-size:30px;
  font-weight:1000;
  letter-spacing:-0.02em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

.planSub{
  margin-top:4px;
  font-size:13px;
  color:rgba(154,163,178,.92);
}

/* Stripe na dół */
.stripeWrap{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:flex-start;
}

stripe-buy-button{
  display:block;
  max-width: 100%;
}

/* skalowanie */
.stripeWrap stripe-buy-button{
  transform: scale(.92);
  transform-origin: left top;
}

/* Mobile */
@media (max-width: 520px){
  .stripeWrap stripe-buy-button{
    transform: scale(.96);
    transform-origin: left top;
  }
}

/* zostawiamy klasy planów, ale one tylko ustawiają subtelny akcent (nie tło) */
.plan-green{ --p: var(--planA); } /* miesięcznie */
.plan-red{   --p: var(--planB); } /* co 3 miesiące */
.plan-blue{  --p: var(--planC); } /* rocznie */

/* Stopka */
.fineprint{
  margin-top:12px;
  font-size:12px;
  color:rgba(154,163,178,.95);
}

/* Mobile polish */
@media (max-width:520px){
  .title{ font-size:24px; }
  .hero{ min-height:220px; }
  .markDot{ width:52px; height:52px; }
  .page{ padding:0; }
  .card{ padding:14px; }
}
/* =========================
   Cena regularna — tylko wizualnie przekreślona
   (nie zmienia layoutu)
========================= */

.priceWasWrap{
  display:block;
  margin-top:4px;
}

.priceWasLabel{
  color:rgba(154,163,178,.65);
  font-size:12px;
  letter-spacing:.04em;
}

.priceWas{
  color:rgba(154,163,178,.65);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(154,163,178,.55);
  margin-left:6px;
  font-weight:700;
}

/* usuń efekt przyciągania uwagi — ma być neutralne info */
.savePill{
  opacity:.7;
  font-weight:700;
}
/* =========================
   PRO: plan cards – mniej ciasno + lepsza hierarchia + subtelny glow
========================= */

/* cała sekcja planów mniej ponura */
.buyBox{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 10%, rgba(56,189,248,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
  border-color: rgba(255,255,255,.12);
}

/* planCard: więcej “oddechu”, jaśniejsze tło, delikatny ring */
.planCard{
  padding:16px;
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 46px rgba(0,0,0,.28);
}

/* jeszcze subtelny niebieski “glow” na hover (nie kicz) */
.planCard:hover{
  box-shadow:
    0 0 0 1px rgba(14,165,233,.14),
    0 22px 60px rgba(0,0,0,.34);
}

/* górna część planu – separacja elementów */
.planTop{
  padding-right: 170px; /* zostaje pod badge jak masz */
}
.planName{ margin-bottom:6px; }
.priceRow{ margin-top:2px; }

/* “Cena regularna …” delikatniej i bliżej siebie */
.priceWasWrap{
  margin-top:2px;
  margin-bottom:8px;           /* robi miejsce przed ceną */
  line-height:1.2;
}
.priceWasLabel{
  font-size:11px;
  letter-spacing:.06em;
  color: rgba(154,163,178,.70);
}
.priceWas{
  color: rgba(154,163,178,.70);
  text-decoration-color: rgba(154,163,178,.55);
}

/* cena aktualna – trochę więcej luzu na dole */
.priceNow{
  margin-top:2px;
}

/* “taniej teraz” niech będzie mniejsze i nie tak przyklejone */
.savePill{
  display:inline-flex;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(226,232,240,.88);
}

/* OPIS “co miesiąc / co 3 miesiące / raz w roku” – dalej od kreski */
.planSub{
  margin-top:10px;
  padding-bottom:12px;         /* klucz: odsuwa od kreski stripeWrap */
  font-size:13px;
  color: rgba(154,163,178,.92);
}

/* kreska + przycisk – mniej przyklejone */
.stripeWrap{
  margin-top:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* badge “Najczęściej” – mniej ciężkie, bardziej premium */
.bestBadge{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(14,165,233,.30);
  color: rgba(238,242,255,.92);
}

/* mobile: jeszcze trochę powietrza */
@media (max-width:640px){
  .planCard{ padding:16px; }
  .planSub{ padding-bottom:14px; }
}
/* 🔒 blokada kupna gdy ma PRO */
.planCard[disabled],
.planCard.disabled{
  opacity:.45;
  pointer-events:none;
  filter:grayscale(.3);
}