/* ===== Reset / baza ===== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0b0d10; /* ciemne tło */
  color: #e7e9ee;
}

/* ===== Zmienne kolorów (Grok vibes) ===== */
:root{
  /* tło blobów (przezroczyste, bo mamy ciemny body) */
  --color-bg1: rgba(0,0,0,0);
  --color-bg2: rgba(0,0,0,0);

  /* paleta blobów: niebiesko-fioletowe plus neonowe akcenty */
  --color1: 98, 86, 250;   /* indigo-violet */
  --color2: 0, 209, 178;   /* neon cyan/teal */
  --color3: 245, 92, 171;  /* neon magenta/pink */
  --color4: 64, 133, 255;  /* electric blue */

  --color-interactive: 0, 209, 178; /* plama pod kursorem */
  --circle-size: 140%;
  --blending: screen;
  --blur: 80px;
}

/* ===== HERO ===== */
.hero{
  position: relative;
  z-index: 10;
  min-height: 100svh;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 20px;
}

.hero__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.02;
}

.gradient-text{
  background: linear-gradient(90deg, #7a7dff 0%, #6a5cff 25%, #a05bff 55%, #ff6ead 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle{
  margin: 0;
  font-weight: 600;
  font-size: clamp(18px, 2.6vw, 28px);
  color: #cfd3dc;
  opacity: 0.95;
}

.hero__lead{
  max-width: 900px;
  margin: 0 auto;
  color: #aab0bb;
  font-size: clamp(16px, 2.1vw, 20px);
}

/* ===== Button (jak na screenie: obrys, zaokrąglenie, delikatna poświata) ===== */
.btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select: none;
  will-change: transform, box-shadow;
}
.btn--primary{
  border: 1px solid rgba(116, 151, 255, .5);
  color: #cfe1ff;
  background: rgba(12, 18, 30, 0.25);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 0 rgba(100, 140, 255, 0.25);
}
.btn--primary:hover{
  transform: translateY(-1px);
  border-color: rgba(116, 151, 255, .85);
  box-shadow: 0 8px 28px 0 rgba(100, 140, 255, 0.25);
  background: rgba(20, 28, 45, 0.45);
}

/* ===== Sekcja kontaktu (opcjonalna) ===== */
.contact{
  position: relative;
  z-index: 10;
  display: grid;
  place-content: center;
  padding: 64px 24px 96px;
}
.contact__card{
  width: min(720px, 92vw);
  margin: 0 auto;
  padding: 28px 28px;
  border-radius: 20px;
  background: rgba(15, 18, 28, 0.55);
  border: 1px solid rgba(110, 135, 255, 0.20);
  box-shadow: 0 20px 80px rgba(20, 26, 54, .35);
}
.contact__card h3{
  margin: 0 0 8px;
  font-size: 22px;
}
.contact__card a{
  color: #a9c4ff;
  text-underline-offset: 3px;
}

/* ===== Gradientowe tło — na bazie Twojej wersji ===== */
/* (pozostawiam strukturę i animacje; zmienione kolory i blending) */
.gradient-bg{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 10% -10%, rgba(42,48,68,0.3), rgba(11,13,16,0) 60%),
              radial-gradient(900px 700px at 90% 110%, rgba(42,48,68,0.28), rgba(11,13,16,0) 60%);
}
.gradient-bg svg{ display:none; }
.gradients-container{ filter: url(#goo) blur(var(--blur)); width: 100%; height: 100%; }
.g1, .g2, .g3, .g4, .interactive{
  position: absolute;
  mix-blend-mode: var(--blending);
  filter: blur(var(--blur));
  opacity: 0.8;
}

/* Rozmiary/pozycje */
.g1, .g2, .g3, .g4{
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
}

/* Kolorystyka blobów */
.g1{ background: radial-gradient(circle at center, rgba(var(--color1),0.85) 0, rgba(var(--color1),0) 52%); animation: moveVertical 30s ease infinite; transform-origin: left center; }
.g2{ background: radial-gradient(circle at center, rgba(var(--color2),0.90) 0, rgba(var(--color2),0) 52%); animation: moveInCircle 22s reverse infinite; transform-origin: calc(50% - 420px); }
.g3{ background: radial-gradient(circle at center, rgba(var(--color3),0.90) 0, rgba(var(--color3),0) 50%); animation: moveInCircle 38s linear infinite; transform-origin: calc(50% + 420px); top: calc(50% - var(--circle-size) / 2 + 220px); left: calc(50% - var(--circle-size) / 2 - 520px); }
.g4{ background: radial-gradient(circle at center, rgba(var(--color4),0.80) 0, rgba(var(--color4),0) 55%); animation: moveHorizontal 42s ease-in-out infinite; transform-origin: calc(50% - 220px); }

/* Interaktywna plama pod kursorem */
.interactive{
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle at center, rgba(var(--color-interactive),0.9) 0, rgba(var(--color-interactive),0) 55%);
  opacity: .7;
}

/* Animacje (z Twojego pliku, zachowane) */
@keyframes moveInCircle{
  0%{ transform: rotate(0deg); }
  50%{ transform: rotate(180deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes moveVertical{
  0%{ transform: translateY(-50%); }
  50%{ transform: translateY(50%); }
  100%{ transform: translateY(-50%); }
}
@keyframes moveHorizontal{
  0%{ transform: translateX(-50%) translateY(-10%); }
  50%{ transform: translateX(50%) translateY(10%); }
  100%{ transform: translateX(-50%) translateY(-10%); }
}

/* Preferencje dostępności: ogranicz ruch */
@media (prefers-reduced-motion: reduce){
  .g1, .g2, .g3, .g4, .interactive{ animation: none !important; }
}
.hero__inner {
    display: inline-block;
    padding: 32px 40px;
    border-radius: 20px;
    background: rgba(10, 12, 20, 0.55);
    backdrop-filter: blur(12px);
  }
  /* Glass card – delikatniejsza, premium */
  .hero__inner{
    display: grid;
    gap: 16px;
    padding: clamp(20px, 3.2vw, 36px);
    background: rgba(10,12,20,0.64);                 /* ciemniej */
    border: 1px solid rgba(255,255,255,0.10);         /* nieco wyraźniejsza ramka */
    border-radius: 24px;
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 22px 70px rgba(6, 10, 22, 0.55),    /* głębszy cień */
                inset 0 1px 0 rgba(255,255,255,0.05);
    max-width: min(980px, 92vw);                      /* odrobinę szersza */
    margin: 0 auto;
  }
  
  /* Uporządkowanie sekcji z danymi i socialami */
  .contact-row{
    display: flex;
    align-items: center;
    justify-content: center;   /* <— centrowanie w poziomie */
    gap: 12px 14px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  
  .contact-mail{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #e4ebff;
    background: linear-gradient(180deg, rgba(22,26,40,.72), rgba(16,20,34,.72));
    border: 1px solid rgba(160,180,255,0.22);
    text-decoration: none;
    line-height: 1;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .contact-mail svg{ width: 18px; height: 18px; }
  .contact-mail:hover,
  .contact-mail:focus-visible{
    transform: translateY(-1px);
    border-color: rgba(170,190,255,.45);
    box-shadow: 0 8px 24px rgba(80,120,255,.25);
    background: linear-gradient(180deg, rgba(28,34,56,.82), rgba(18,22,38,.82));
    outline: none;
  }
  
  /* Socials (małe, eleganckie kółeczka) */
  .socials{ display: inline-flex; gap: 10px; }

.social{
  width: 38px; height: 38px;                        /* większe klikalne pole */
  display: grid; place-items: center;
  border-radius: 999px;
  color: #d7e2ff;
  background: linear-gradient(180deg, rgba(22,26,40,.72), rgba(16,20,34,.72));
  border: 1px solid rgba(160,180,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.social svg {
    width: 20px;
    height: 20px;
  }
.social:hover,
.social:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(170,190,255,.45);
  box-shadow: 0 10px 26px rgba(80,120,255,.22);
  background: linear-gradient(180deg, rgba(28,34,56,.82), rgba(18,22,38,.82));
  color: #ffffff;
  outline: none;
}
  
  /* Duży claim */
  .bigline{
    margin: 6px 0 4px;
    font-weight: 700;
    font-size: clamp(22px, 3.4vw, 36px);
    line-height: 1.22;
    color: #e6ebff;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
  }
  
  /* Liquid glass buttons */
  .actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
  }
  @media (max-width: 560px){
    .actions{ grid-template-columns: 1fr; }
  }
  
  .actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
  }
  @media (max-width: 560px){
    .actions{ grid-template-columns: 1fr; }
  }
  
  .glass-btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    border-radius: 18px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
  
    /* Liquid Glass look */
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 8px 24px rgba(0,0,0,0.25);
  
    transition: all 0.25s ease;
  }
  
  /* Subtelne glow gradientowe przy hover */
  .glass-btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: radial-gradient(circle at top left, rgba(255,200,255,0.4), transparent 60%),
                radial-gradient(circle at bottom right, rgba(100,200,255,0.35), transparent 60%);
    opacity:0;
    transition: opacity 0.3s ease;
    z-index:0;
  }
  
  .glass-btn:hover::before{
    opacity:1;
  }
  
  .glass-btn:hover{
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 12px 28px rgba(0,0,0,0.3);
  }
  
  .glass-btn span, .glass-btn{
    position: relative;
    z-index: 1;
  }
  /* lekkie dopalenie tytułu i podtytułu, żeby grały z kartą */
  .hero__title{ font-size: clamp(44px, 7.2vw, 96px); }
  .hero__subtitle{ color: #cfd5e6; }
  .hero__lead{ color: #aeb6c8; }
  .profile-photo{
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
  }
  
  .profile-photo img{
    width: min(220px, 60%);
    border-radius: 20px; /* zaokrąglenie rogów */
    box-shadow: 0 10px 32px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(20,24,36,0.6); /* glass tło na wypadek przezroczystości */
    object-fit: cover;
  }
  /* === Rozwijany panel newslettera === */
.newsletter-inline{
    max-width: min(720px, 92vw);
    margin: 14px auto 0;
    transition: grid-template-rows .28s ease, opacity .28s ease, margin .28s ease;
    display: grid;
    grid-template-rows: 0fr;         /* zwinięty */
    opacity: 0;
  }
  .newsletter-inline:not(.is-hidden){
    grid-template-rows: 1fr;         /* rozwinięty */
    opacity: 1;
    margin-top: 18px;
  }
  .newsletter-inline > *{ overflow: hidden; }
  
  .newsletter-card{
    padding: 16px;
    border-radius: 18px;
    background: rgba(18,22,35,.62);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(6,10,22,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  
  .newsletter-card h3{
    margin: 2px 2px 6px;
    font-size: 20px;
    color: #eef3ff;
  }
  .newsletter-card .desc{
    margin: 0 2px 12px;
    color: #c4cbda;
  }
  
  /* === Fallback (gdy ML nie załadował się) === */
  .ml-fallback{ display: grid; gap: 10px; }
  .ml-fallback .row{ display: grid; }
  .ml-fallback input{
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(26,30,48,.65);
    color: #e7ecff;
  }
  .ml-fallback button{
    padding: 12px 14px;
    border-radius: 14px;
    border: 0;
    color: #fff;
    background: linear-gradient(90deg, rgba(120,160,255,.55), rgba(80,120,255,.55));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(12,18,36,.35);
  }
  .ml-fallback small{ color:#a8b0c2; }
  
  /* === Nadpisy dla wstrzykniętego formularza MailerLite (bez białej karty) === */
  /* ML różnie generuje klasy, te niżej przykrywają najczęstsze struktury. */
  .newsletter-card .ml-form-embedWrapper,
  .newsletter-card .ml-form-embedContainer,
  .newsletter-card .ml-form-embed,
  .newsletter-card .ml-form-embedBody{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  
  .newsletter-card .ml-form-embedBody .ml-form-fieldRow input,
  .newsletter-card input[type="text"],
  .newsletter-card input[type="email"]{
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(26,30,48,.65) !important;
    color: #e7ecff !important;
    outline: none !important;
    height: auto !important;
  }
  
  .newsletter-card .ml-form-embedBody .ml-form-fieldRow{ margin-bottom: 10px !important; }
  
  .newsletter-card .ml-form-embedBody .ml-button,
  .newsletter-card button[type="submit"]{
    display: inline-flex !important;
    justify-content: center; align-items: center;
    padding: 12px 14px !important;
    width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(120,160,255,.55), rgba(80,120,255,.55)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px rgba(12,18,36,.35) !important;
    cursor: pointer;
  }
  
  .newsletter-card .ml-form-embedContent,
  .newsletter-card .ml-form-successContent{
    color: #dfe6ff !important;
    background: transparent !important;
    border: 0 !important;
  }
  
  /* dostępność: high contrast */
  @media (prefers-contrast: more){
    .newsletter-card{
      border-color: rgba(255,255,255,.25);
    }
  }
  /* Pasek z przyciskami nad menu */
  .pre-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 10px auto 2px;
    max-width: min(720px, 92vw);
  }
  @media (max-width:560px){
    .pre-actions{ grid-template-columns: 1fr; }
  }
  
  /* Sekcja "O mnie" – rozwijana pod przyciskami */
  .about-inline{
    max-width: min(900px, 92vw);
    margin: 10px auto 0;
    transition: grid-template-rows .28s ease, opacity .28s ease, margin .28s ease;
    display: grid;
    grid-template-rows: 0fr; /* zwinięta */
    opacity: 0;
  }
  .about-inline:not(.is-hidden){
    grid-template-rows: 1fr; /* rozwinięta */
    opacity: 1;
    margin-top: 14px;
  }
  .about-inline > *{ overflow: hidden; }
  
  .about-card{
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(18,22,35,.62);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(6,10,22,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .about-card h3{
    margin: 0 0 6px;
    font-size: 20px;
    color: #eef3ff;
  }
  .about-card p, .about-card li{
    color: #cdd3e2;
  }
  .about-list{ margin: 8px 0 0 18px; }
  
 
  .about-actions{
    margin-top: 14px;
    display: flex;
    justify-content: center;
  }
  @media (max-width:560px){
    .js-toggle-about.is-sticky{ width: calc(100% - 24px); }
  }
  /* Pastylka "O mnie" jak ikonka – ale z tekstem */
.about-pill{
    min-width: 64px;
    padding: 0 12px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(22,26,40,.72), rgba(16,20,34,.72));
    border: 1px solid rgba(160,180,255,0.22);
    color: #d7e2ff;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  }
  .about-pill:hover,
  .about-pill:focus-visible{
    transform: translateY(-1px);
    border-color: rgba(170,190,255,.45);
    box-shadow: 0 10px 26px rgba(80,120,255,.22);
    background: linear-gradient(180deg, rgba(28,34,56,.82), rgba(18,22,38,.82));
    color: #ffffff;
    outline: none;
  }
  
  /* "Zobacz video" pokazuj tylko gdy sekcja otwarta */
  .about-actions{ 
    display: none; 
    justify-content: center; 
    margin-top: 14px; 
  }
  .about-inline:not(.is-hidden) .about-actions{ display: flex; }
  /* ===== Booking panel (Setmore) ===== */
.booking-inline{
    max-width: min(900px, 92vw);
    margin: 14px auto 0;
    transition: grid-template-rows .28s ease, opacity .28s ease, margin .28s ease;
    display: grid;
    grid-template-rows: 0fr;   /* zwinięty */
    opacity: 0;
  }
  .booking-inline:not(.is-hidden){
    grid-template-rows: 1fr;   /* rozwinięty */
    opacity: 1;
    margin-top: 18px;
  }
  .booking-inline > *{ overflow: hidden; }
  
  .booking-card{
    padding: 16px;
    border-radius: 18px;
    background: rgba(18,22,35,.62);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 60px rgba(6,10,22,.45), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .booking-card h3{ margin: 2px 2px 6px; font-size: 20px; color: #eef3ff; }
  .booking-card .desc{ margin: 0 2px 12px; color:#c4cbda; }
  
  /* Responsywne „okno” na iframe (pełna wysokość z przewijaniem wewnątrz) */
  .booking-iframe-wrap{
    position: relative;
    height: clamp(560px, 70vh, 840px);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(26,30,48,.55);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .booking-iframe-wrap iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  
  /* Pokaż fallback tylko jeśli iframe nie zadziała (JS ukryje go po load) */
  .booking-fallback{ display: none; margin-top: 12px; text-align: center; color:#dfe6ff; }
  .booking-inline.error .booking-fallback{ display: block; }
  .toast{
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(18,22,35,.75);
    border: 1px solid rgba(255,255,255,.1);
    padding: 12px 18px;
    border-radius: 14px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    z-index: 2000;
  }
  .toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* Kompaktowa wersja highlightów */
.about-highlights.compact{
    gap: 10px;
  }
  
  .about-highlights.compact .highlight{
    padding: 8px 10px;
    gap: 10px;
  }
  
  .about-highlights.compact .highlight .icon{
    font-size: 18px;
    margin-top: 2px;
  }
  
  .about-highlights.compact .highlight h4{
    font-size: 15px;
    margin: 0;
  }
  
  .about-highlights.compact .highlight p{
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
  }
  /* bezpieczne marginesy przy notchu / paskach */
html, body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* upewnij się, że „szklany” box trzyma wymiar i jest idealnie wycentrowany */
.hero__inner{
  width: min(980px, 92vw);       /* nie tylko max-width – ustaw także width */
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;

  /* iOS: uniknij przesunięć compositingu */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;            /* separacja efektów blend/blur */
}
/* tylko iOS + małe ekrany – złagodź blur i wyłącz filtr „goo” */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px){
    .gradients-container{ filter: none !important; } /* bez filtra goo */
    .g1, .g2, .g3, .g4, .interactive{
      filter: blur(48px) !important;                 /* sam blur na blobach */
    }
  }
}
/* 1) Nigdy nie przewijamy horyzontalnie – ucina „fantomowy” 1–2px overflow */
html, body { overflow-x: hidden; }

/* 2) NIE dawaj paddingów safe-area na całe <html>/<body> (potrafią rozjechać układ).
      Jeśli je wcześniej dodałem – wyzeruj: */
html, body { padding-left: 0; padding-right: 0; }

/* 3) Hero: twarde, przewidywalne centrowanie karty */
.hero {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.hero__inner{
  max-width: 980px;
  width: 100%;           /* zamiast 92vw/min() – żadnych vw tutaj */
  margin-inline: auto;   /* prawdziwe centrowanie */
  box-sizing: border-box;
  transform: translateZ(0); /* iOS compositing fix */
  isolation: isolate;
}

/* 4) Wszystkie „sekcje-karty” pod hero: szerokość 100% + max-width, bez vw */
.pre-actions,
.actions,
.about-inline,
.newsletter-inline,
.booking-inline,
.video-section,
.contact,
.contact__card,
.newsletter-card,
.booking-card,
.video-card {
  max-width: 980px !important;   /* lub 900px jeśli wolisz ciaśniej */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 5) Tło: absolutnie bezpieczne ograniczenie w poziomie (czasem blur wycieka) */
.gradient-bg { position: fixed; inset: 0; overflow: hidden; }
.gradients-container { max-width: 100vw; }

/* 6) iOS/Android – zbij trochę blur i wyłącz „goo”, żeby nie generować overflow */
@media (max-width: 820px){
  .gradients-container{ filter: none !important; }
  .g1, .g2, .g3, .g4, .interactive{ filter: blur(48px) !important; }
}