/*
 * Magnetyczna Kinestetyka: the WordPress/Elementor page as it stood in
 * October 2026, rebuilt by hand. Colours, type and spacing were measured
 * from it at 1440, 1024 and 375 px wide; Elementor's breakpoints (1024 and
 * 767) are kept. The pages the Worker renders (thank-you, errors) and the
 * legal pages use the same sheet.
 */

/* Fira Sans 300–600, latin + latin-ext, served from here (no request to Google). */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/fira-sans-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/fira-sans-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fira-sans-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fira-sans-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fira-sans-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fira-sans-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --bg: #131212;
  --fiolet: #9900ff;
  --szary: #e0e0e0;
  --zielony: #2be630;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: "Fira Sans", Arial, sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: #fff; text-align: center; font-weight: 600; }
p { margin: 0 0 19px; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid rgba(153, 0, 255, .7); outline-offset: 3px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
.fiolet { color: var(--fiolet); }
.tytul { font-size: 48px; line-height: 50px; }
.kreska { height: 2px; background: linear-gradient(to right, rgba(153, 0, 255, 0), #9900ff, rgba(153, 0, 255, 0)); }
.ramka { border: 2px solid var(--fiolet); border-radius: 12px; box-shadow: 0 0 10px var(--fiolet); }
.pudlo { border: 2px solid var(--fiolet); border-radius: 12px; box-shadow: 0 0 10px var(--fiolet); background: linear-gradient(#1e0031 0%, #131212 90%); }

.cta { display: flex; justify-content: center; }
.btn {
  display: inline-block;
  padding: 20px 40px;
  font: 700 20px/20px Helvetica, Arial, sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(#ff0000 0%, #bb0000 100%);
  border: 2px solid #bb0000;
  border-radius: 7px;
  box-shadow: 0 0 10px #ff0000;
  cursor: pointer;
  transition: filter .2s;
}
.btn:hover { filter: brightness(1.15); }
.btn-pelny { display: block; width: 100%; }

/* 1. Hero */
.hero { padding: 18px 0 90px; background: var(--bg) url(/img/tlo-hero.webp) center top / cover no-repeat; }
.hero .kreska { margin-bottom: 28px; }
.hero h1 { max-width: 792px; margin: 0 auto; font-size: 53px; line-height: 56px; }
.hero .okladka { width: 336px; margin: 30px auto 20px; }

/* 2. Co znajdziesz w środku */
.wnetrze { padding: 10px 0 50px; }
.kafle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 55px 15px 0; }
.kafle .pudlo { padding: 32px 20px 28px; }
.kafle h3 { font-size: 26px; font-weight: 500; line-height: 44px; }
.kafle .szeroki { grid-column: 1 / -1; padding: 22px 20px 20px; }
.moduly { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 65px 10px 79px; }

/* 3. Porównanie */
.porownanie { padding: 60px 0 100px; }
.porownanie .ramka { width: 706px; margin: 30px auto 0; }

/* 4. Opinie */
.opinie { padding: 10px 0 22px; }
.opinie h2 { max-width: 705px; margin: 0 auto; line-height: 58px; }
.opinie-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; align-items: start; margin: 62px 12px 0; }
.opinia { margin: 0; }
.opinia .ramka { box-shadow: 0 0 10px 2px var(--fiolet); }
.opinia .ramka img { border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.opinia-kto { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.opinia-kto img { width: 60px; height: 60px; border-radius: 50%; }
.opinia-kto b { display: block; font: 600 16px/24px Roboto, Arial, sans-serif; }
.opinia-kto small { display: block; font: 400 13.6px/18px "Roboto Slab", Georgia, serif; }

/* 5. Gwarancja */
.gwarancja { padding: 65px 0; }
.gwarancja .pudlo { margin: 0 5px; padding: 60px 30px 50px; }
.gwarancja h2 { font-size: 48px; line-height: 44px; }
.gwarancja-tresc { display: grid; grid-template-columns: 281px 1fr; gap: 30px; align-items: start; margin: 40px 10px 0; }
.gwarancja-tresc p { margin-bottom: 31px; }
.gwarancja-zdanie { max-width: 920px; margin: 40px auto 50px; font-size: 26px; font-weight: 400; line-height: 40px; text-align: center; }
.gwarancja-zdanie b { color: var(--fiolet); font-weight: 600; }

/* 6. O mnie */
.omnie { padding: 3px 0 83px; }
.omnie-siatka { display: grid; grid-template-columns: 510px 1fr; gap: 40px; align-items: start; }
.omnie-zdjecie { margin-top: 10px; box-shadow: 0 0 10px 1px var(--fiolet); }
.omnie h2 { font-size: 38px; line-height: 44px; text-align: left; }
.omnie-pod { margin: 20px 0 30px; font-size: 22px; font-weight: 300; line-height: 29px; }
.omnie-pod b { font-weight: 600; }
.omnie-desktop .omnie-pod { margin-bottom: 40px; }
.omnie-desktop ~ p { margin-bottom: 33px; }
.omnie-mobile { display: none; }
.zasieg { list-style: none; margin: 47px 0 0; padding: 0; font-size: 20px; line-height: 33px; }
.zasieg li + li { margin-top: 11px; }
.zasieg a { display: inline-flex; align-items: center; gap: 12px; vertical-align: top; text-decoration: none; }
.zasieg svg { width: 20px; height: 20px; flex: none; fill: var(--fiolet); }

/* 7. Cena */
.cena { padding: 92px 0; background: linear-gradient(#1c1c20 0%, #131212 90%); scroll-margin-top: 0; }
.cena-siatka { display: grid; grid-template-columns: 550px 550px; gap: 20px; justify-content: center; align-items: start; }
.cena-opis h2 { font-size: 69px; line-height: 85px; }
.cena-kwota { margin: 50px 0 40px; font-size: 35px; font-weight: 500; line-height: 44px; text-align: center; }
.cena-kwota span { color: var(--zielony); }
.btn-cena { display: block; width: 97.6%; padding: 25px 40px; background: #ff0000; box-shadow: 0 0 10px -1px #ff0000; }

/* 8. Po ukończeniu */
.efekty { padding: 120px 0 89px; }
.efekty h2 { max-width: 723px; margin: 0 auto; line-height: 51px; }
.efekty-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; margin: 70px 10px 50px; }
.efekty-lista img { border-radius: 4px; }
.efekty .cta { margin: 0 15px; }

/* Stopka */
.stopka { padding: 12px 0 32px; color: var(--szary); font-size: 16px; line-height: 26.4px; }
.stopka-linki { display: flex; justify-content: center; gap: 22px; margin: 0 0 6px; font-size: 18px; line-height: 25px; }
.stopka-linki a { text-decoration: none; }
.stopka-linki a:hover { color: #fff; }
.stopka-prawa { display: grid; grid-template-columns: 63.2fr 36.8fr; gap: 20px; }
.stopka-prawa p { margin: 0; }
.stopka-prawa p:first-child { text-align: right; }

/* The legal pages and the pages the Worker renders */
.tekst { max-width: 900px; margin: 0 auto; padding: 50px 10px 60px; font-size: 17px; line-height: 1.7; }
.tekst h1 { margin-bottom: 8px; font-size: 36px; line-height: 1.25; }
.tekst h2 { margin: 36px 0 12px; font-size: 24px; line-height: 1.3; text-align: left; }
.tekst .data { margin-bottom: 30px; color: var(--szary); text-align: center; }
.tekst ol, .tekst ul { padding-left: 24px; }
.tekst li { margin-bottom: 8px; }
.tekst a { color: #c48bff; }
.tekst .formularz { white-space: pre-line; overflow-wrap: anywhere; padding: 20px; }
.wroc { display: inline-block; margin-top: 30px; color: var(--szary); }
.komunikat { max-width: 640px; margin: 0 auto; padding: 70px 16px 80px; }
.komunikat .pudlo { padding: 40px 30px; text-align: center; }
.komunikat h1 { margin-bottom: 18px; font-size: 34px; line-height: 1.2; }
.komunikat p { font-size: 18px; }
.komunikat .btn { margin: 10px 0 20px; }
.komunikat .maly { color: var(--szary); font-size: 15px; }

@media (max-width: 1024px) {
  .tytul { font-size: 45px; line-height: 58.5px; }
  .hero h1 { font-size: 31px; line-height: 40.3px; }
  .kafle h3 { font-size: 26px; line-height: 33.8px; }
  .moduly { gap: 30px; }
  .porownanie .ramka { width: 595px; }
  .opinie-lista { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .gwarancja h2 { font-size: 36px; line-height: 46.8px; }
  .gwarancja-tresc { grid-template-columns: 220px 1fr; }
  .omnie-siatka { grid-template-columns: 1fr 1fr; gap: 40px; }
  .omnie h2 { font-size: 36px; line-height: 46.8px; }
  .omnie-pod { font-size: 26px; line-height: 33.8px; }
  .cena-siatka { grid-template-columns: 1fr 1fr; }
  .cena-opis h2 { font-size: 31px; line-height: 40.3px; }
  .cena-kwota { margin: 50px 0 40px; font-size: 26px; line-height: 33.8px; }
  .efekty h2 { line-height: 49.5px; }
}

@media (max-width: 767px) {
  .wrap { padding: 0 25px; }
  .tytul { font-size: 36px; line-height: 39.6px; }
  .hero { padding: 27px 0 35px; }
  .hero h1 { font-size: 24px; line-height: 31.2px; }
  .hero .okladka { width: 100%; margin: 23px auto 20px; }
  .wnetrze { padding: 70px 0 40px; }
  .kafle { grid-template-columns: 1fr; gap: 23px; margin: 31px 15px 0; }
  .kafle .pudlo { padding: 20px; }
  .kafle h3 { font-size: 23px; line-height: 29.9px; }
  .kafle .szeroki { grid-column: auto; padding: 11px 20px; }
  .kafle .szeroki h3 { line-height: 25.3px; }
  .moduly { grid-template-columns: 1fr; gap: 20px; margin: 40px 10px 30px; }
  .porownanie { padding: 40px 0 68px; }
  .porownanie .ramka { width: 308px; margin-top: 28px; }
  .opinie h2 { font-size: 39px; line-height: 42.9px; }
  .opinie-lista { grid-template-columns: 1fr; gap: 52px; margin: 40px 5px 0; }
  .opinia-kto { margin-top: 20px; }
  .opinia-kto b { font-size: 14.592px; line-height: 21.888px; }
  .opinia-kto small { font-size: 12.4032px; line-height: 12.4032px; }
  .gwarancja { padding: 40px 0 50px; }
  .gwarancja .pudlo { margin: 0; padding: 50px 10px 45px; }
  .gwarancja h2 { font-size: 39px; line-height: 42.9px; }
  .gwarancja-tresc { grid-template-columns: 1fr; gap: 20px; margin: 40px 0 0; font-size: 17px; line-height: 28.05px; text-align: center; }
  .gwarancja-tresc p { padding: 0 10px; }
  .gwarancja-tresc img { width: 129px; margin: 0 auto; }
  .gwarancja-zdanie { margin: 30px 0 50px; font-size: 23px; line-height: 29.9px; }
  .omnie { padding: 40px 0 25px; }
  .omnie-siatka { grid-template-columns: 1fr; gap: 30px; }
  .omnie-mobile { display: block; margin-bottom: 10px; }
  .omnie-desktop { display: none; }
  .omnie h2 { font-size: 34px; line-height: 40.8px; }
  .omnie-pod { margin: 20px 0 0; font-size: 23px; line-height: 29.9px; }
  .omnie-zdjecie { margin-top: 0; }
  .omnie-desktop ~ p:last-of-type { margin-bottom: 28px; }
  .zasieg { margin-top: 28px; }
  .cena { padding: 52px 0 47px; }
  .cena-siatka { grid-template-columns: 1fr; gap: 20px; margin: 0 5px; }
  .cena-opis h2 { font-size: 31px; line-height: 43.4px; }
  .cena-kwota { margin: 50px 0 20px; font-size: 23px; line-height: 29.9px; }
  .efekty { padding: 80px 0 60px; }
  .efekty h2 { font-size: 35px; line-height: 42px; }
  .efekty-lista { grid-template-columns: 1fr 1fr; gap: 10px; margin: 35px 0 40px; }
  .efekty .cta { margin: 0 4px; }
  .stopka { padding: 10px 0 33px; }
  .stopka .wrap { padding: 0 10px; }
  .stopka-linki { margin-bottom: 22px; font-size: 19px; }
  .stopka-prawa { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .stopka-prawa p:first-child { text-align: center; line-height: 19.2px; }
  .tekst { padding: 36px 25px 50px; }
  .tekst h1 { font-size: 28px; }
}