:root{
  --gray-50:#f3f4f6; --gray-200:#e5e7eb; --gray-700:#374151; --text:#111111;
  --pink:#ED145B; --green:#A6CE39; --blue:#0072BC; --purple:#6F42C1; --cyan:#00B5D9; --navy:#0a3846;
  --tile-radius:28px; --badge-w:360px; --badge-m:12px;
}
html,body{margin:0;font-family:"Source Sans Pro",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
main{scroll-padding-top:90px}

/* TOP BAR */
.info{background:var(--gray-50); font-size:20px; line-height:1.55}
.info .container{max-width:1200px;margin:0 auto;padding:12px 16px}
.info-row{display:flex;flex-wrap:wrap;gap:18px 26px}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--gray-200)}
.nav .container{max-width:1200px;margin:0 auto;padding:16px 16px;display:flex;align-items:center;justify-content:space-between}
.logo img{height:56px;display:block}
.menu{display:flex;gap:28px;font-weight:700;font-size:21px;flex-wrap:wrap}
.menu a:hover{text-decoration:underline}
.menu .is-active{text-decoration:underline}

/* HERO */
.hero{
  position: relative; min-height: clamp(420px,58vh,640px);
  display:flex; align-items:stretch; overflow:hidden;
  padding-block: clamp(48px,8vh,96px);
}
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center right; transform:translateZ(0) }
.hero::after{ background:none; }
.hero .container{
  position:absolute; inset:0; z-index:1;
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:flex-start;
}
.hero .hero-panel{ position:relative; max-width:720px; background:transparent; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35) }
.hero .hero-panel h1{ font-weight:800; font-size:clamp(32px,4.4vw,60px); line-height:1.05; margin:0 0 14px }
.hero .hero-panel p{ font-size:clamp(16px,2.1vw,22px); opacity:.95; margin:0 0 22px; max-width:56ch }

/* BUTTONS */
.btn{display:inline-block;padding:12px 22px;border-radius:18px;font-weight:800;font-size:22px;color:#fff}
.btn + .btn{margin-left:12px}
.btn-pink{background:var(--pink)} .btn-green{background:var(--green)}
.btn-order{background:var(--green);color:#fff;font-size:18px;font-weight:800;padding:10px 20px;border-radius:12px;white-space:nowrap;text-decoration:none;transition:background .2s}
.btn-order:hover{background:#8abb2f}

/* SECTIONS */
.section{max-width:1200px;margin:0 auto;padding:44px 16px 56px}
.section h2{margin:0 0 28px;text-align:center;font-size:clamp(30px,5vw,52px);font-weight:800}

/* ===== OFERTY ===== */
.oferta-grid{max-width:1200px;margin:0 auto;padding:32px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){ .oferta-grid{ grid-template-columns:1fr } }

.pcard{--b:10px;--r:26px;--accent:#0b3140;border:var(--b) solid var(--accent);border-radius:calc(var(--r) + var(--b));background:#fff;color:#0b3140;overflow:hidden;display:flex;flex-direction:column}
.pcard__head{background:#fff;color:var(--accent);font-weight:800;font-size:clamp(26px,4.5vw,38px);padding:16px 18px}
.pcard__feat{background:var(--accent);color:#fff;padding:14px 18px}
.pcard__feat ul{list-style:none;margin:0;padding:0}
.pcard__feat li{margin:6px 0;font-weight:700}
.pcard__price{background:#fff;color:var(--accent);padding:16px 18px 22px;display:flex;justify-content:space-between;align-items:center;font-weight:700;gap:12px}
.pcard__price-left{display:flex;align-items:flex-end;gap:6px}
.pp-big{font-size:clamp(32px,6vw,56px);font-weight:800;line-height:1}
.pp-currency{font-size:clamp(22px,3.6vw,36px);font-weight:800}
.pp-period{font-size:clamp(18px,2.8vw,28px);font-weight:700;color:var(--accent)}
.pcard--cyan{--accent:#00B5D9}.pcard--blue{--accent:#0072BC}.pcard--purple{--accent:#6F42C1}.pcard--pink{--accent:#ED145B}

/* ===== DODATKI – ujednolicone rozmiary i układ ===== */
.addons-section{max-width:1200px;margin:0 auto;padding:18px 16px 44px}
.addons-title{font-size:clamp(22px,3.6vw,36px);margin:0 0 16px;font-weight:800;text-align:left}

/* wspólna karta dodatku (BI, HBO) */
.addon-box{
  display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:18px;
  border:4px solid var(--navy);border-radius:28px;padding:18px;background:#fff;margin-bottom:18px;min-height:220px;
}
.addon-box__media img{width:100%;height:auto;display:block;border-radius:12px}
.addon-box__content h3{margin:0 0 8px;font-size:clamp(20px,3vw,28px);font-weight:800}
.addon-box__content p{margin:0 0 6px;color:#111;font-size:clamp(14px,2.4vw,18px)}
.addon-box__price{font-size:clamp(24px,3.5vw,36px);font-weight:800;white-space:nowrap;margin-left:auto}

/* Bezpieczny Internet ramka ciemnozielona */
.addon-box--white{border-color:var(--navy)}

/* HBO Max – biały z fioletową ramką, większe logo */
.addon-box--hbomax{border-color:#5e2bb7}
.hbomax-logoimg{display:block;height:90px;width:auto}

/* Stały IP – ten sam grid; tło obrazkowe za treścią */
.addon-banner--ip{
  display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:18px;
  background:#8ad93c;border:4px solid #78c332;color:#fff;border-radius:28px;padding:18px;min-height:220px;
  position:relative;overflow:hidden;margin-bottom:18px;
}
.addon-banner--ip .addon-banner__copy h3{margin:0 0 8px;font-size:clamp(20px,3vw,28px);font-weight:800}
.addon-banner--ip .addon-banner__copy p{margin:0;color:#fff;font-size:clamp(14px,2.4vw,18px);font-weight:700}
.addon-banner--ip .addon-banner__price{font-size:clamp(24px,3.5vw,36px);font-weight:800;white-space:nowrap;margin-left:auto;z-index:1}
.addon-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}

/* KONTAKT */
.contact-cards h2{margin-bottom:12px}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1200px;margin:0 auto}
@media (max-width:900px){ .cards-grid{grid-template-columns:1fr} }
.agent-card{display:flex;gap:20px;align-items:center;background:#fff;padding:28px;border-radius:28px;border:8px solid transparent;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.agent-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-1px)}
.agent-card--blue{border-color:#0072BC}.agent-card--pink{border-color:#ED145B}
.agent-photo{width:140px;height:140px;object-fit:cover;border-radius:14px;flex:0 0 auto;background:#f3f4f6}
.agent-name{margin:0;font-weight:800;font-size:clamp(26px,3vw,34px)}
.agent-role{margin:4px 0;font-size:clamp(16px,2.4vw,18px);color:var(--gray-700)}
.agent-phone{margin-top:10px;font-weight:800;letter-spacing:.3px;font-size:clamp(38px,5vw,48px);color:#111}

/* FOOTER */
.footer{background:#f9fafb;border-top:1px solid var(--gray-200);font-size:14px;color:#4b5563}
.footer .container{max-width:1200px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer a{font-weight:700}
.footer a:hover{text-decoration:underline}


/* ===== DODATKI: kwadratowe kafelki ===== */

.addon-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:24px;
}
@media (max-width:1000px){ .addon-grid{ grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px){ .addon-grid{ grid-template-columns:repeat(2, 1fr)} }

.addon-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  aspect-ratio:1 / 1;
  background:#fff; border:4px solid var(--navy); border-radius:22px;
  padding:14px; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease;
}
.addon-tile:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
.addon-tile img{ max-width:80%; max-height:60%; object-fit:contain; display:block }
.addon-tile span{ font-weight:800; text-align:center; font-size:clamp(14px, 2.4vw, 18px) }

/* === OVERRIDES: sekcja Dodatki — pełnoekranowe kafelki z ceną ===
   - czcionka ceny: większa i jasno szara
   - obrazki wypełniają cały kafelek
   - brak konturów kafelków
*/
.addon-tile{
  position: relative;
  background: transparent;
  border: 0;              /* niewidoczny kontur */
  border-radius: 22px;
  padding: 0;
  overflow: hidden;       /* zaokrąglenie działa też na obraz */
}
.addon-tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* obrazek wypełnia calutki kafelek */
  display: block;
}
.addon-tile span{
  position: absolute;
  left: 8px; right: 8px; bottom: 10px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(18px, 2.8vw, 26px); /* powiększona */
  color: #e5e7eb; /* jasno szara */
}

/* === OVERRIDE: obrazek na CAŁY kafelek (Dodatki) === */
.addon-tile{
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;      /* żeby nie wystawały rogi obrazu */
}

.addon-tile img{
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  max-width: none;       /* nadpisuje wcześniejsze 80% itp. */
  max-height: none;
  object-fit: cover;     /* WYPEŁNIA cały kafelek */
  object-position: center;
  display: block;
}

/* === OVERRIDE: ceny w kafelkach dodatków — font jak w cenach pakietów, większy i biały === */
.addon-tile span{
  /* ta sama rodzina, co w body/.pp-big */
  font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;                   /* jak .pp-big */
  font-size: clamp(24px, 3.6vw, 36px);/* większa niż wcześniej */
  color: #fff;                        /* biały */
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); /* zostawiam dla czytelności na jasnych grafikach */
}

/* ===== LEGAL: mini styl + równe odstępy i ciaśniej pod sekcją ===== */
.legal{
  max-width:1200px;
  margin:18px auto 18px;   /* równo góra/dół i nieco większy odstęp na górze */
  padding:0 16px;
  font-size:10px;          /* możliwie mała, ale czytelna */
  line-height:1.25;
  color:#111;
  white-space:pre-wrap;    /* zachowuje łamanie z pliku .txt */
}

/* fallback dla trybu file:// (iframe) – opcjonalnie używane */
.legal.--frame{ overflow:hidden; }
.legal.--frame iframe{
  width:125%;
  height:220px;            /* dopasuj jeśli legal jest dłuższy */
  border:0;
  transform:scale(.8);
  transform-origin:0 0;
}

/* Gęstszy układ wokół sekcji, gdy na końcu sekcji jest legal */
@supports selector(.section:has(.legal)) {
  .section:has(> .legal){ padding-bottom:12px; }      /* było 56px */
  .section:has(> .legal) + .section{ padding-top:12px; } /* było 44px */
}

/* Większy luz między kafelkiem a legalem */
.legal{
  margin-top: 28px !important;  /* było 18px — zwiększamy odstęp NAD legalem */
  margin-bottom: 14px !important;/* zostawiamy ciasniej pod legalem (nagłówek bliżej) */
}

/* === TUNING: mniejsza „dziura” nad legalem (oferta -> legale) === */
@supports selector(.section:has(.legal)) {
  /* mniejszy top-padding sekcji legalowej, gdy stoi tuż po innej sekcji */
  .section + .section:has(> .legal){
    padding-top: 8px !important;
  }
  /* mniejszy bottom-padding sekcji poprzedzającej legale */
  .section:has(+ .section:has(> .legal)){
    padding-bottom: 10px !important;
  }
}
/* legal – ciaśniejszy margines u góry */
.legal{
  margin-top: 10px !important;   /* nadpisuje wcześniejsze 28px */
}
/* Jasnoszare tło dla całej strony (jak panel u góry) */
html, body{
  background: var(--gray-50) !important; /* #f3f4f6 */
}