:root{
  --accent:#FF7343; --accent-2:#ff916b; --text:#0e0e0e; --muted:#6b7280;
  --border:#e5e7eb; --ok:#FF7343; --header:#ffeee8;
  --card-grad-top:#ffd7c9; --card-grad-mid:#ffe8df; --card-grad-bot:#ffffff;
  --tick-bg: rgba(255,115,67,.12); --badge-bg:#ffe0d6; --badge-bd:#ffbfa8;
}

/* === ODCIENIE PAKIETÓW (zmienne do gradientu) === */
.card.p1{ --card-grad-top:#FFE1D5; --card-grad-mid:#FFF1EA; --card-grad-bot:#FFFFFF; }
.card.p2{ --card-grad-top:#E6F2FF; --card-grad-mid:#F2F8FF; --card-grad-bot:#FFFFFF; }
.card.p3{ --card-grad-top:#E9F8EB; --card-grad-mid:#F4FDF5; --card-grad-bot:#FFFFFF; }

/* Tła w ramce ilustracji */
.card.p1 .top-head{ background:#ffe6dc; }
.card.p2 .top-head{ background:#eaf3ff; }
.card.p3 .top-head{ background:#eaf9ed; }

/* Fallback diagnostyczny – usuń !important gdy już niepotrzebne */
.packages .card.p1{ background:linear-gradient(180deg,#FFE1D5 0%,#FFF1EA 40%,#FFFFFF 100%) !important; }
.packages .card.p2{ background:linear-gradient(180deg,#E6F2FF 0%,#F2F8FF 40%,#FFFFFF 100%) !important; }
.packages .card.p3{ background:linear-gradient(180deg,#E9F8EB 0%,#F4FDF5 40%,#FFFFFF 100%) !important; }

/* resets/basics */
*{ box-sizing:border-box }
html,body{ height:100% }
html, body{ overflow-x:hidden; } /* zapobiega poziomowemu scrollowi */
body{ margin:0; font:16px/1.6 'Poppins', system-ui; color:var(--text); background:#fff; }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:.08em }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
img{ max-width:100%; height:auto; display:block }

/* header */
.site-header{ background:var(--header); position:sticky; top:0; z-index:100; border-bottom:none }
.nav-wrap{ max-width:1200px; margin:0 auto; padding:14px 18px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; position:relative }
.brand img{ height:48px; width:auto; max-width:100% }

.main-nav{ position:relative }
.main-nav > ul{ list-style:none; margin:0; padding:0; display:flex; gap:26px; justify-content:center; flex-wrap:wrap }
.main-nav li{ position:relative }
.main-nav a{ font-weight:500; color:var(--text) }

/* dropdown "Oferta" – desktop */
.nav-dropdown{ display:inline-block }
.nav-parent{ display:inline-block }
.nav-menu{
  display:none; position:absolute; left:0; top:100%;
  min-width:240px; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:110;
}
.nav-menu ul{ list-style:none; margin:0; padding:0 }
.nav-menu li{ display:block }
.nav-menu a{ display:block; padding:8px 10px; border-radius:8px; white-space:nowrap; text-decoration:none }
.nav-menu a:hover{ background:#f9fafb; text-decoration:none }
.nav-menu a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; background:#f9fafb }
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu{ display:block }
@media (max-width: 900px){ .nav-menu{ left:auto; right:0 } }

/* hero */
.hero{ background:var(--header); padding:34px 18px 30px; border-bottom:none }
.hero h1{ max-width:1200px; margin:0 auto 6px; font-size:clamp(36px,5vw,56px); text-align:center; font-weight:700; color:var(--text) }
.hero h4,.hero h3{ max-width:1200px; margin:8px auto 0; text-align:center; font-weight:600; font-size:clamp(18px,2.2vw,22px); line-height:1.5; color:var(--muted) }

/* sub-hero */
.sub-hero{ background:#fff }
.sub-hero .inner{ max-width:900px; margin:0 auto; text-align:center; padding:28px 18px 40px }
.sub-hero .lead,
.sub-hero .strap{
  color:#FF7343;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans';
  display:block; margin:0 auto;
}
.sub-hero .lead{ font-weight:600; font-size:clamp(26px,3vw,34px); line-height:1.3; margin-bottom:10px }
.sub-hero .strap{ font-weight:600; font-size:clamp(20px,2.3vw,26px); line-height:1.4 }

/* container */
.container{ max-width:1120px; margin:0 auto; padding:28px 16px 0 }

/* packages grid */
.packages{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px; margin-top:10px;
  align-items:start; grid-auto-rows:auto;
}
@media (max-width:1000px) and (min-width:700px){
  .packages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:699px){
  .packages{ grid-template-columns:1fr; }
}

/* card */
.card{
  background:linear-gradient(180deg, var(--card-grad-top) 0%, var(--card-grad-mid) 40%, var(--card-grad-bot) 100%);
  border:none; border-radius:20px; padding:24px 20px; box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  height:auto !important; min-height:0;
  overflow:visible;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card.featured{ outline:3px solid rgba(255,115,67,.28) }
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.08); }

.top{
  display:grid; justify-items:center; text-align:center; margin-bottom:6px;
  gap:12px; padding-bottom:8px; position:relative;
  padding-top:44px; /* więcej miejsca na badge */
}

/* === WYEKSPONOWANE "PAKIET 1/2/3" (różne kolory) === */
.pretitle{
  position:absolute;
  top:-18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; text-transform:uppercase; letter-spacing:.8px;
  font-size:clamp(15px,1.7vw,20px);
  line-height:1; padding:12px 28px;
  min-width:180px; border-radius:16px;
  border:2px solid rgba(255,255,255,.95); color:#fff; z-index:2; white-space:nowrap;
}
.pretitle::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-12px;
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
}
.card.p1 .pretitle{ background:#ff7e55; box-shadow:0 12px 28px rgba(255,126,85,.38), 0 2px 0 rgba(0,0,0,.02) inset; }
.card.p1 .pretitle::after{ border-top:14px solid #ff7e55; }
.card.p2 .pretitle{ background:#5aa6ff; box-shadow:0 12px 28px rgba(90,166,255,.35), 0 2px 0 rgba(0,0,0,.02) inset; }
.card.p2 .pretitle::after{ border-top:14px solid #5aa6ff; }
.card.p3 .pretitle{ background:#4ecb74; box-shadow:0 12px 28px rgba(78,203,116,.34), 0 2px 0 rgba(0,0,0,.02) inset; }
.card.p3 .pretitle::after{ border-top:14px solid #4ecb74; }
.card.featured .pretitle{ transform:translateX(-50%) scale(1.06); }

/* top head */
.card .top-head{
  width:100%; background:#ffe6dc; border-radius:18px;
  padding:10px 12px 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.card .top-head .illustration{
  width:92%; max-width:300px; height:auto; display:block;
  margin:8px auto 6px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.04));
}

/* nagłówki i ceny */
.pkg-title{
  font-weight:900; font-size:clamp(22px,2.4vw,26px);
  letter-spacing:.3px; color:var(--accent); margin-top:0; margin-bottom:4px;
}
.price{ font-size:30px; font-weight:900; margin:6px 0; color:var(--text) }

/* Separator nad ceną */
.card .price{ position:relative; padding-top:18px; margin-top:4px; }
.card .price::before{
  content:""; position:absolute; left:9%; right:9%; top:0; height:1px;
  background:rgba(0,0,0,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
  border-radius:2px; pointer-events:none; opacity:.9;
}
@media (max-width: 600px){
  .card .price::before{ left:12%; right:12%; opacity:.8; }
}

/* BELKA */
.pkg-info{
  display:block; width:100%;
  justify-self:stretch; text-align:center;
  font-weight:800; color:var(--accent);
  background:var(--badge-bg); border:1px solid var(--badge-bd);
  padding:10px 16px; border-radius:14px; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(255,115,67,.12); margin-top:4px;
}
.pkg-info--emph{
  text-transform:uppercase; letter-spacing:.4px; border-width:2px;
  box-shadow:0 10px 24px rgba(255,115,67,.22);
  background:linear-gradient(180deg,#ffece5,#fff); font-size:15px;
}

/* wybór pakietu */
.choose{ display:flex; align-items:center; gap:10px; font-size:18px; margin:4px 0 0 }
.choose input[type=radio]{
  appearance:none; width:24px; height:24px; border:3px solid #2c2c2c; border-radius:50%;
  display:inline-grid; place-content:center; background:#fff; cursor:pointer
}
.choose input[type=radio]::after{ content:""; width:12px; height:12px; border-radius:50%; background:var(--accent); transform:scale(0); transition:.12s }
.choose input[type=radio]:checked::after{ transform:scale(1) }
.choose input[type=radio]:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }

/* features */
.features{ display:grid; gap:8px; margin-top:12px; overflow:visible; max-height:none }
.feature{
  display:grid; grid-template-columns:26px 1fr; align-items:start;
  gap:10px 12px; border:none; border-radius:12px; padding:8px 6px; background:transparent; overflow:visible;
}
.tick{
  width:26px; height:26px; min-width:26px; border-radius:50%;
  background:var(--tick-bg); display:grid; place-items:center; margin-top:2px; grid-column:1;
}
.tick svg{ width:16px; height:16px; fill:var(--ok) }

/* options */
h2{ font-size:24px; margin:32px 0 12px; font-weight:700 }

.options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (max-width:900px){
  .options{ grid-template-columns:1fr }
  .options-inner{ padding-left:16px; padding-right:16px; }
}

/* Kafel opcji – bez wyciekania ceny poza obszar */
.opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#fff;
  overflow:hidden;  /* chroni przed wyciekiem */
}
.opt label{
  display:flex; align-items:center; gap:10px; cursor:pointer; flex:1 1 auto; min-width:0; /* pozwala się zwężać */
}
.tag{
  font-weight:800; white-space:nowrap; flex:0 0 auto;
  max-width:40%; text-align:right; overflow:hidden; text-overflow:ellipsis;
}
.opt .tag{ margin-left:12px }

/* Mobile: cena zawsze widoczna, może spaść do nowej linii */
@media (max-width:520px){
  .opt{ flex-wrap:wrap }
  .opt .tag{
    max-width:100%;
    margin-left:auto;
  }
}

/* Notka pod pakietami */
.packages-note{
  font-style:italic; color:#64748b; margin:18px 0 0; font-size:15px;
}

/* form */
.form-title{ margin-top:28px }

/* Desktopowa siatka: [Imię] [E-mail szerzej] [Telefon] */
.form{
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap:10px; margin-top:10px;
  align-items:start;
  width:100%;
}
@media (max-width:900px){
  .form{ grid-template-columns:1fr }
}

.field{
  width:100%; max-width:100%; min-width:0;
  padding:11px 12px; border-radius:12px; border:1px solid var(--border); font:inherit; background:#fff;
  box-sizing:border-box;
}
textarea.field{ grid-column:1/-1; min-height:120px }

/* Mobilne „Twoje dane” — nigdy nie wyjeżdża poza ekran */
.form .field,
.form input.field,
.form textarea.field{
  display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}

/* Pas bezpieczeństwa przeciw nadmiernej szerokości */
.form, .form *{ max-width:100%; }

/* Bezpieczne paddingi i brak overflow w sekcji formularza */
.form-section{
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  width:100vw; background:#F0F9FF; padding:32px 0 calc(120px + env(safe-area-inset-bottom));
  margin-top:0; overflow-x:hidden;
}
@supports (width: 100svw){
  .form-section{ width:100svw; }
}
.form-inner{ max-width:1120px; margin:0 auto; padding:0 16px; }
@media (max-width:420px){
  .form-inner{ padding-left:14px; padding-right:14px; }
  .form .field{ font-size:16px; } /* zapobiega auto-zoomowi iOS */
}

/* RODO: w jednej linii na desktopie, zawijane na mobile */
.agree{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  white-space:nowrap;
}
@media (max-width:700px){
  .agree{ white-space:normal; flex-wrap:wrap; row-gap:6px; align-items:flex-start; }
}
.agree a{ text-decoration:underline; text-underline-offset:3px; word-break:break-word; }

/* summary bar */
.summary{ position:sticky; bottom:0; margin-top:18px; z-index:5 }
.bar{
  display:flex; gap:12px; align-items:center; justify-content:space-between; background:#fff;
  border:1px solid var(--badge-bd); border-radius:16px; padding:12px 14px; box-shadow:0 14px 30px rgba(255,115,67,.25);
  min-height:64px;
}
.sumlabel{ color:var(--muted) }
.sum{ font-size:24px; font-weight:900 }
.btn{
  appearance:none; border:none; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff;
  padding:12px 16px; border-radius:14px; font-weight:800; cursor:pointer; box-shadow:0 10px 20px rgba(255,115,67,.35);
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* ====== Pełno-szerokie tło dla sekcji „Opcje dodatkowe” ====== */
.options-section{
  position:relative;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  margin-top:28px;
  background:#F0F9FF;
  padding:28px 0;
  overflow-x:hidden; /* ochronnie */
}
@supports (width: 100svw){
  .options-section{ width:100svw; }
}
.options-inner{ max-width:1120px; margin:0 auto; padding:0 16px; }
.options-section h2{ margin-top:0; }

/* STOPKA */
.site-footer{ background:#191d23; margin-top:0; color:#e5e7eb; }
.site-footer .footer-inner{ max-width:1200px; margin:0 auto; padding:56px 18px 72px; }
.site-footer h2{
  margin:0; color:#fff; font-weight:600; line-height:1.15;
  font-size:clamp(24px,3.8vw,44px); letter-spacing:.2px;
}
.site-footer .accent{ color:var(--accent); }
.site-footer .legal-nav{
  margin-top:18px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.site-footer a{
  color:#cbd5e1;              /* jasny, czytelny link */
  font-weight:600;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:#ffffff;
  text-decoration:underline;
}
.site-footer a:visited{ color:inherit; }

/* ====== Nawigacja mobilna (hamburger/panel) — bez backdroppu ====== */
.nav-toggle{
  display:none; appearance:none; border:0; background:#fff;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.08); line-height:0;
}
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

@keyframes menuSlideDown {
  from { transform:translateY(-8px); opacity:.0; }
  to   { transform:translateY(0);    opacity:1;  }
}

@media (max-width: 1024px){
  .nav-wrap{ grid-template-columns:auto auto; justify-content:space-between; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Panel liczy pozycję względem viewportu; CENTROWANIE lewo/prawo */
  .main-nav{ position:static; }
  .main-nav > ul{
    display:none;
    position:fixed; left:12px; right:12px; top:64px;
    margin:0 auto; width:auto; max-width:520px;
    flex-direction:column; gap:10px;
    max-height:calc(100vh - 80px);
    overflow:auto; -webkit-overflow-scrolling:touch;
    background:#fff; border:1px solid var(--border);
    border-radius:14px; padding:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    z-index:1001;
  }
  .main-nav.is-open > ul{
    display:flex !important;
    animation: menuSlideDown .18s ease-out both;
  }

  /* Podmenu w mobilce – jako zwykła lista pod pozycją */
  .nav-dropdown .nav-menu{
    position:static; display:block; border:none; box-shadow:none; padding:0; margin:6px 0 0 8px;
  }
  .nav-dropdown .nav-menu a{ padding:8px 10px; border-radius:10px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .card, .pkg-info, .bar, .btn{ box-shadow:none !important; }
  .card:hover{ transform:none !important; }
}

/* ====== STOPKA – poprawiona czytelność linków ====== */
.site-footer{
  background:#191d23;
  margin-top:0;
  color:#e5e7eb;
}

/* ====== KONTRASTOWE POWIADOMIENIA ====== */
.notice{
  margin-top:14px;
  border-radius:12px;
  padding:14px 16px;
  font-weight:700;
  line-height:1.4;
  display:none;
}
.notice.ok{
  display:none;                 /* JS włączy */
  background:#065f46;           /* zielony ciemny */
  color:#ecfdf5;                /* bardzo jasny tekst */
  border:2px solid #34d399;     /* miętowa ramka */
  box-shadow:0 10px 24px rgba(16,185,129,.25);
}
.notice.err{
  background:#7f1d1d;
  color:#fee2e2;
  border:2px solid #f87171;
  box-shadow:0 10px 24px rgba(239,68,68,.25);
}

/* ====== MODAL – LEKKA NAKŁADKA ====== */
.offer-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  display:none;                 /* .is-open => flex */
  align-items:center; justify-content:center;
  z-index:2000;
  padding:16px;
}
.offer-modal.is-open{ display:flex; }

.offer-modal__box{
  background:#ffffff;
  color:#0e0e0e;
  width:min(520px, 100%);
  max-width: calc(100vw - 32px); /* nie wyjdzie poza krawędź */
  border-radius:16px;
  padding:22px 18px 18px;
  border:1px solid #e5e7eb;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  outline:none;                 /* focus zarządzany skryptem */
  text-align:center;
}
.offer-modal__icon{
  width:52px; height:52px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900;
  background:#ecfdf5; color:#059669; border:2px solid #34d399;
  margin:0 auto 10px;
}
.offer-modal__title{
  margin:6px 0 6px; font-size:22px; font-weight:800; letter-spacing:.2px;
}
.offer-modal__msg{
  margin:0 0 14px; color:#111827;
}
.offer-modal__btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:12px; padding:10px 14px; font-weight:800;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#fff; box-shadow:0 10px 20px rgba(255,115,67,.35);
}
.offer-modal__btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }