/* === Energy Plans — scoped do .ep-plans === */
.ep-plans{
  --ep-text:#0b0b0b;
  --ep-muted:#6b7280;
  --ep-bg:#ffffff;
  --ep-card:#ffffff;
  --ep-border:#e5e7eb;
  --ep-shadow:rgba(0,0,0,.06);
  --ep-primary:#111111;
  --ep-primary-ink:#ffffff;
  --ep-accent:#6d28d9; /* fiolet wstążki */

  color:var(--ep-text);
  font-family:inherit;
  margin:0 auto;
  padding:clamp(20px,4vw,48px) clamp(12px,4vw,24px);
  max-width:1200px;
}

.ep-grid{
  display:grid;
  gap:clamp(16px,2.6vw,24px);
}
.ep-grid--2{ grid-template-columns:1fr; }
@media (min-width:860px){
  .ep-grid--2{ grid-template-columns:repeat(2,1fr); }
}

/* KARTA PLANU */
.ep-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--ep-card);
  border:1px solid var(--ep-border);
  border-radius:18px;
  box-shadow:0 10px 28px var(--ep-shadow);
  padding:clamp(16px,2.6vw,22px);
  min-height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:visible; /* wstążka może wystawać poza kartę */
}
.ep-card:hover{
  transform:translateY(-2px);
  border-color:#c7cdd6;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* Wstążka ukośna jak na screenie:
   - zakotwiczona w lewym górnym rogu droższego planu,
   - wysunięta na zewnątrz i obrócona,
   - na mobile przeniesiona bliżej rogu, by nie nachodziła na treść. */
.ep-ribbon {
  position:absolute;
  top:90px;
  right:-22px;           /* przesunięcie do środka kafelka */
  transform:rotate(45deg);
  transform-origin:top right;
  font-weight:800;
  font-size:13px;
  color:#fff;
  background:var(--ep-accent);
  padding:4px 12px;
  border-radius:4px;
  white-space:nowrap;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  z-index:2;
}


/* Nazwa i cena */
.ep-card__name{
  margin:0 0 8px;
  text-align:center;
  font-weight:800;
  font-size:clamp(20px,2.6vw,24px);
  letter-spacing:-.01em;
}

.ep-card__price{
  margin:0 0 clamp(28px,4vw,40px); /* większy odstęp od ceny do treści */
  text-align:center;
}
.ep-card__price-num{
  display:block;
  font-size:clamp(48px,6.8vw,60px); /* powiększona cena */
  font-weight:900;
  line-height:1.05;
}
.ep-card__price-unit{
  display:inline-block;
  margin-top:6px;
  color:var(--ep-muted);
  font-size:clamp(14px,1.9vw,15px);
}

/* Intro */
.ep-card__intro{
  margin:0 0 clamp(12px,2.2vw,16px);
  text-align:center;
  color:var(--ep-muted);
  font-size:clamp(14px,1.9vw,15px);
}

/* Lista funkcji — kółko + ptaszek */
.ep-list{
  list-style:none;
  padding:0;
  margin:0 0 clamp(18px,3vw,24px);
}
.ep-list li{
  position:relative;
  padding-left:38px;
  margin:12px 0;
  line-height:1.55;
  font-size:clamp(14px,1.9vw,16px);
}
.ep-list li::before{
  content:"";
  position:absolute;
  left:0; top:0.25em;
  width:22px; height:22px;
  border:2px solid #111;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}
.ep-list li::after{
  content:"✓";
  position:absolute;
  left:3px; top:0.08em;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px;
  color:#111;
}

/* Stopka i przycisk */
.ep-card__foot{
  margin-top:auto;
  display:flex;
}
.ep-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  background:var(--ep-primary);
  color:var(--ep-primary-ink);
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  line-height:1;
  transition:filter .15s ease, transform .02s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.ep-btn:hover{ filter:brightness(1.06); }
.ep-btn:active{ transform:translateY(1px); }

/* Preferencje dostępności */
@media (prefers-reduced-motion:reduce){
  .ep-card, .ep-btn{ transition:none; }
}