@charset "UTF-8";
/* ============================================================
   COGNITO — system designu 2026
   Paleta: navy + baby blue + biel (pod logo)
   Typografia: Sora (nagłówki) + Inter (tekst)
   ============================================================ */

:root{
  /* Granaty */
  --navy-900:#081a3a;
  --navy-800:#0c2350;
  --navy-700:#123a7d;
  --navy-600:#1a4a9a;
  /* Niebieskie */
  --blue-600:#1e5fd0;
  --blue-500:#2f74e8;
  /* Baby blue / błękit z logo */
  --sky-500:#34a8e8;
  --sky-400:#5bc0f2;
  --sky-300:#8ad4f7;
  --sky-100:#e7f4fd;
  --sky-50:#f1f8ff;
  /* Neutralne */
  --paper:#ffffff;
  --bg:#f4f9ff;
  --ink:#13233f;
  --ink-soft:#54648a;
  --line:#dde9f7;
  --line-soft:#eaf2fb;
  /* Funkcje */
  --ok:#1f9d6b;
  --warn:#c9821a;
  --shadow-sm:0 1px 2px rgba(11,35,80,.06), 0 2px 8px rgba(11,35,80,.05);
  --shadow:0 6px 24px rgba(13,46,110,.10);
  --shadow-lg:0 18px 50px rgba(10,31,74,.18);
  /* Unified Design Tokens */
  --color-brand-dark:#081a3a;
  --color-brand-primary:#1e5fd0;
  --color-brand-primary-hover:#164cb0;
  --color-text-main:#13233f;
  --color-bg-light:#ffffff;
  --color-bg-alt:#f8faff;
  --color-border-subtle:#e5e7eb;
  --shadow-card-subtle:0 2px 8px rgba(15,23,42,.04);
  --shadow-card-elevated:0 8px 24px rgba(15,23,42,.08);
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --maxw:1180px;
  --nav-h:clamp(54px,5.5vh,70px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html, body {
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   BACK TO SCHOOL 2026 — Global Sticky Promo Bar & Countdown
   ============================================================ */
.cognito-bts-bar {
  position: sticky;
  top: 0;
  z-index: 101;
  width: 100%;
  background: linear-gradient(90deg, #061329 0%, #0a214d 50%, #0f306e 100%);
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.86rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(85, 199, 245, 0.25);
  box-shadow: 0 2px 10px rgba(6, 19, 41, 0.15);
}
.cognito-bts-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 38px;
  text-align: center;
}
.cognito-bts-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: rgba(85, 199, 245, 0.18);
  border: 1px solid rgba(85, 199, 245, 0.45);
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #7ce2ff;
  text-transform: uppercase;
}
.cognito-bts-msg {
  color: #e2eeff;
  font-weight: 500;
}
.cognito-bts-msg strong {
  color: #ffffff;
  font-weight: 700;
}
.cognito-bts-msg .bts-highlight {
  color: #ffd166;
  font-weight: 700;
}

/* Cena przed promocją Back to School */
.bts-old-price {
  display: inline-block;
  margin-right: .28em;
  color: #aeb6c5;
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}
.cognito-bts-timer-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.28);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}
.cognito-bts-timer-label {
  font-size: 0.78rem;
  color: #a3c7f7;
}
.cognito-bts-timer {
  font-family: 'Sora', 'Inter', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.cognito-bts-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #1e5fd0;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.cognito-bts-link:hover {
  background: #2b72ee;
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .cognito-bts-inner {
    padding: 6px 12px;
    gap: 6px;
    font-size: 0.78rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cognito-bts-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
  }
  .cognito-bts-desk-text {
    display: none;
  }
  .cognito-bts-mob-text {
    display: inline;
    font-weight: 600;
  }
  .cognito-bts-timer {
    font-size: 0.8rem;
  }
  .cognito-bts-link {
    font-size: 0.75rem;
    padding: 2px 8px;
  }
}
@media (min-width: 768px) {
  .cognito-bts-mob-text {
    display: none;
  }
}

/* Mobile Sticky Bottom Bar (CRO / RWD) */
@media (max-width: 767px) {
  body.has-sticky-bar {
    padding-bottom: 75px !important;
  }
  .mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(8, 26, 58, 0.12);
  }
  .mobile-sticky-bar .btn-sticky-cta {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background: #1e5fd0;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(30, 95, 208, 0.3);
  }
  .mobile-sticky-bar .btn-sticky-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f4f9ff;
    color: #1e5fd0;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    text-decoration: none;
  }
}
@media (min-width: 768px) {
  .mobile-sticky-bar { display: none !important; }
}

/* === COGNITO 2026/2027 — spokojny, konwersyjny layout === */
.home-2027{background:#fff;color:#14213b}
.home-2027 .nav-light{background:rgba(255,255,255,.94);border-color:#e8edf6}
.home-2027 .site-nav .brand img,.footer-clean .brand img{height:48px;width:auto;object-fit:contain}
.home-2027 h1,.home-2027 h2,.home-2027 h3{letter-spacing:-.045em}
.conversion-hero{position:relative;overflow:hidden;padding:clamp(54px,7vw,96px) 0;background:
  radial-gradient(circle at 80% 15%,rgba(78,147,255,.13),transparent 32%),
  radial-gradient(circle at 12% 88%,rgba(85,199,245,.12),transparent 28%),
  linear-gradient(180deg,#f9fbff 0%,#fff 100%)}
.conversion-hero::after{content:"";position:absolute;width:480px;height:480px;right:-260px;bottom:-330px;border:1px solid #dcecff;border-radius:50%;box-shadow:0 0 0 70px rgba(228,240,255,.45),0 0 0 140px rgba(239,247,255,.45)}
.conversion-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.82fr);gap:clamp(42px,6vw,86px);align-items:center}
.conversion-copy{max-width:690px}
.recruitment-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #dce5f1;background:#fff;color:#26375a;border-radius:999px;padding:8px 14px;font-size:.86rem;font-weight:600;box-shadow:0 3px 14px rgba(20,47,94,.05);margin-bottom:24px}
.recruitment-pill i{width:8px;height:8px;border-radius:50%;background:#35bf74;box-shadow:0 0 0 4px rgba(53,191,116,.12)}
.conversion-hero h1{font-size:clamp(2.75rem,5.7vw,5.45rem);line-height:.99;color:#101a31;margin-bottom:24px;max-width:780px}
.conversion-hero h1 span{background:linear-gradient(90deg,#225bd8,#38a8ed);-webkit-background-clip:text;background-clip:text;color:transparent}
.conversion-hero .lead{font-size:clamp(1.03rem,1.25vw,1.18rem);line-height:1.75;color:#52617d;max-width:650px}
.conversion-hero .hero-actions{margin-top:28px;margin-bottom:20px}
.conversion-hero .btn{min-height:58px}
.conversion-hero .btn-primary,.final-conversion .btn-primary,.trial-showcase .btn-primary{background:linear-gradient(135deg,#2459d8,#2689e9);color:#fff;box-shadow:0 13px 30px rgba(36,89,216,.24)}
.conversion-hero .btn-primary:hover,.final-conversion .btn-primary:hover,.trial-showcase .btn-primary:hover{color:#fff;box-shadow:0 16px 36px rgba(36,89,216,.32)}
.trust-notes{display:flex;flex-wrap:wrap;gap:18px;color:#66738c;font-size:.9rem;font-weight:600}
.trust-notes span{display:flex;align-items:center;gap:7px}
.trust-notes svg{width:19px;height:19px;fill:none;stroke:#28a767;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trial-showcase{position:relative;background:rgba(255,255,255,.92);border:1px solid #e1e8f3;border-radius:28px;padding:clamp(24px,3vw,38px);box-shadow:0 24px 70px rgba(33,68,133,.14);transform:rotate(1deg)}
.trial-showcase::before{content:"";position:absolute;z-index:-1;inset:28px -22px -22px 28px;border-radius:28px;background:#eaf3ff;transform:rotate(-3deg)}
.trial-showcase-head{display:flex;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid #e8edf5}
.trial-showcase-head strong{display:block;font-family:Sora,sans-serif;font-size:1.25rem;color:#111b32}
.trial-showcase-head small{display:block;color:#78839a;margin-top:3px}
.vector-tile{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:linear-gradient(145deg,#edf2ff,#f3f9ff);color:#2767df}
.vector-tile svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.clean-check-list{list-style:none;padding:20px 0 10px;margin:0;display:grid;gap:14px;color:#33405a}
.clean-check-list li{position:relative;padding-left:30px;font-weight:600}
.clean-check-list li::before{content:"";position:absolute;left:0;top:.22em;width:19px;height:19px;border-radius:50%;background:#e6f8ed;border:1px solid #b6e7c8}
.clean-check-list li::after{content:"";position:absolute;left:6px;top:.48em;width:7px;height:4px;border-left:2px solid #229c5e;border-bottom:2px solid #229c5e;transform:rotate(-45deg)}
.btn-block{display:flex;width:100%}
.microcopy{text-align:center;color:#78839a;font-size:.82rem;margin:12px 0 0}
.proof-strip{background:#fff;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}
.proof-strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-strip-grid>div{text-align:center;padding:24px 18px;border-right:1px solid #eef2f7}
.proof-strip-grid>div:last-child{border-right:0}
.proof-strip strong{display:block;font-family:Sora,sans-serif;font-size:1.25rem;color:#18356f}
.proof-strip span{display:block;color:#748097;font-size:.82rem;margin-top:3px}
.compact-section{padding:clamp(62px,7vw,92px) 0}
.compact-section .section-head{margin-bottom:34px}
.compact-section .section-head h2{font-size:clamp(2rem,3.5vw,3.25rem);max-width:800px;margin-left:auto;margin-right:auto}
.compact-section .section-head .lead{max-width:720px}
.level-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:18px;overflow-x:auto;padding:4px}
.level-tab{min-height:46px;padding:0 19px;border:1px solid #e0e7f1;border-radius:999px;background:#fff;color:#45536d;font-weight:700;white-space:nowrap;cursor:pointer;transition:.2s}
.level-tab:hover,.level-tab.active{background:#235ed8;border-color:#235ed8;color:#fff;box-shadow:0 8px 20px rgba(35,94,216,.18)}
.level-panel{max-width:900px;margin:auto;background:#fff;border:1px solid #e2e9f3;border-radius:22px;padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 10px 34px rgba(37,67,120,.07)}
.level-panel[hidden]{display:none!important}
.level-copy{display:flex;align-items:center;gap:18px}
.level-copy h3{margin:0 0 5px}
.level-copy p{margin:0;color:#68758b}
/* white-space:nowrap rozpychalo kolumny gridu na mobile przy dluzszych etykietach
   (min-content linku > szerokosc ekranu) - link ma sie zawijac */
.text-link{font-weight:700}
.system-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.system-steps article{background:#fff;border:1px solid #e2e9f3;border-radius:20px;padding:26px;text-align:center}
.system-steps .vector-tile{margin:0 auto 18px}
.system-steps strong{display:block;font-family:Sora,sans-serif;font-size:1.08rem;color:#11213f;margin-bottom:8px}
.system-steps p{color:#68758b;margin:0;font-size:.94rem}
.center-row{display:flex;justify-content:center;margin-top:28px}
.start-steps{display:grid;grid-template-columns:repeat(3,1fr);max-width:980px;margin:auto}
.start-steps>div{position:relative;text-align:center;padding:20px 36px}
.start-steps>div+div{border-left:1px solid #e3eaf4}
.start-steps span{font-family:Sora,sans-serif;font-size:.78rem;color:#2b6cdd;font-weight:800;letter-spacing:.12em}
.start-steps h3{margin:10px 0 8px}
.start-steps p{margin:0;color:#6b768c;font-size:.94rem}
.review-section{background:#f7faff}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{background:#fff;border:1px solid #e1e8f3;border-radius:20px;padding:25px;box-shadow:0 8px 26px rgba(32,65,120,.06)}
.review-card blockquote{margin:12px 0 24px;color:#34425c;line-height:1.7}
.review-card>div:last-child{display:flex;align-items:center;gap:11px}
.review-card img{border-radius:50%;object-fit:cover}
.review-card span strong,.review-card span small{display:block}
.review-card span small{color:#7b879b;font-size:.78rem}
.review-source{text-align:center;color:#7a869b;font-size:.82rem;margin:20px 0 0}
.final-conversion{padding:clamp(62px,8vw,104px) 0;background:#fff}
.final-conversion-inner{position:relative;overflow:hidden;text-align:center;padding:clamp(36px,6vw,70px);border-radius:30px;background:linear-gradient(145deg,#eef5ff,#f7fbff);border:1px solid #dce8f7}
.final-conversion-inner::before,.final-conversion-inner::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(63,138,231,.18)}
.final-conversion-inner::before{width:250px;height:250px;left:-150px;top:-130px}
.final-conversion-inner::after{width:340px;height:340px;right:-190px;bottom:-220px}
.final-conversion h2{font-size:clamp(2rem,3.4vw,3.2rem);max-width:820px;margin-left:auto;margin-right:auto}
.final-conversion p{max-width:620px;margin:0 auto 24px;color:#60708a}
.footer-clean{padding:54px 0 0;background:#0b1730}
.footer-clean-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);gap:clamp(24px,4vw,58px);padding-bottom:42px}
.footer-clean-grid>div:not(.footer-brand){display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-clean .footer-brand p{max-width:320px;color:#98a9c5;font-size:.9rem;margin-top:12px}
.footer-clean .footer-title{color:#fff;margin:0 0 4px;font-family:Sora,sans-serif;font-size:.9rem}
.footer-clean a{color:#9eabc0;font-size:.88rem;transition:color .18s ease,transform .18s ease}
.footer-clean a:hover{color:#58b9f2;transform:translateX(3px)}
.footer-clean .brand:hover{transform:none}
.footer-clean-bottom{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);color:#75849d;font-size:.8rem}

@media(max-width:920px){
  .conversion-hero-grid{grid-template-columns:minmax(0,1fr)}
  .conversion-copy{text-align:center;margin:auto}
  .conversion-copy .lead{margin-left:auto;margin-right:auto}
  .conversion-copy .btn-row,.trust-notes{justify-content:center}
  .trial-showcase{max-width:620px;margin:auto;transform:none}
  .system-steps,.review-grid{grid-template-columns:1fr}
  .footer-clean-grid{grid-template-columns:1.4fr 1fr 1fr}
  .footer-clean-grid>div:last-child{grid-column:2/4}
}
@media(max-width:680px){
  .conversion-hero{padding-top:42px}
  .conversion-hero h1{font-size:clamp(2.4rem,13vw,4rem)}
  .conversion-copy .btn-row{display:grid}
  .conversion-copy .btn{width:100%}
  .trust-notes{align-items:flex-start;flex-direction:column;gap:9px}
  .proof-strip-grid{grid-template-columns:1fr 1fr}
  .proof-strip-grid>div:nth-child(2){border-right:0}
  .proof-strip-grid>div:nth-child(-n+2){border-bottom:1px solid #eef2f7}
  .level-tabs{justify-content:flex-start}
  .level-panel{align-items:flex-start;flex-direction:column;padding:22px}
  .level-copy{align-items:flex-start}
  .start-steps{grid-template-columns:1fr}
  .start-steps>div+div{border-left:0;border-top:1px solid #e3eaf4}
  .footer-clean-grid{grid-template-columns:1fr 1fr}
  .footer-clean-grid .footer-brand{grid-column:1/-1}
  .footer-clean-grid>div:last-child{grid-column:auto}
}
@media(max-width:430px){
  .conversion-hero .container{width:min(100% - 28px,var(--maxw))}
  .trial-showcase{padding:22px 18px}
  .trial-showcase-head{align-items:flex-start}
  .footer-clean-grid{grid-template-columns:1fr}
  .footer-clean-grid .footer-brand{grid-column:auto}
  .footer-clean-bottom{gap:10px;flex-direction:column}
}
@media(max-width:1140px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:clamp(1rem,.6vw + .9rem,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{overflow-x:clip}
body.menu-open{overflow:hidden}
/* overflow:hidden na body odbiera .site-nav kontener przewijania, wiec sticky
   przestaje dzialac i nagłowek z menu zostaje w miejscu dokumentu, poza ekranem.
   Przy scrollu 5000 px menu otwieralo sie 12 679 px nad widokiem. */
body.menu-open .site-nav{position:fixed;top:var(--cognito-bts-height,38px);left:0;right:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-500)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sky-300);color:var(--navy-900)}

h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;line-height:1.12;letter-spacing:-.02em;color:var(--navy-900);margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3vw,2.5rem);font-weight:800;letter-spacing:-.025em}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem)}
p{margin:0 0 1rem}
strong{color:var(--navy-800)}

.container{width:min(var(--maxw),calc(100% - clamp(20px,5vw,56px)));margin-inline:auto}
.container-narrow{width:min(680px,calc(100% - clamp(20px,5vw,56px)));margin-inline:auto}

/* ---------- Skip link / dostępność ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;z-index:2000}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--sky-400);outline-offset:2px;border-radius:6px}

.eyebrow{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);margin-bottom:14px}
.section-dark .eyebrow,.hero .eyebrow{color:var(--sky-300)}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--ink-soft);line-height:1.66}
.hero .lead,.section-dark .lead{color:rgba(226,238,255,.86)}
.muted{color:var(--ink-soft)}
.section-subtitle{color:var(--ink-soft);font-size:1.1rem;max-width:60ch;margin:0 auto 8px}

/* ============================================================
   NAWIGACJA
   ============================================================ */
.site-nav{position:sticky;top:var(--cognito-bts-height,38px);z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.site-nav.is-scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--nav-h)}
.brand,.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo picture img,.logo img,.brand img{width:auto;height:38px;display:block}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
.nav-links a{color:var(--navy-800);font-weight:600;font-size:.97rem;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--blue-600)}
.nav-links a.active{color:var(--blue-600)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--sky-400)}
.nav-links a[href^="tel:"]{color:var(--ink-soft)}
.btn-nav-cta{background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:#fff!important;padding:11px 18px!important;border-radius:12px;font-weight:700;box-shadow:0 6px 16px rgba(30,95,208,.28)}
.btn-nav-cta:hover{color:#fff!important;transform:translateY(-1px)}
.nav-toggle{display:none;align-items:center;justify-content:center;gap:7px;min-width:48px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy-800);font-weight:700;cursor:pointer}
/* Telefon w naglowku — na mobile to najkrotsza droga do kontaktu; wczesniej numer
   byl tylko w rozwinietym menu i w stopce. Pokazywany ponizej 1140px, czyli
   dokladnie tam, gdzie znika .nav-links. */
.nav-phone{display:none;align-items:center;justify-content:center;gap:7px;margin-left:auto;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy-800);font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
.nav-phone svg{flex:0 0 auto}
/* Regula musi stac PO deklaracji bazowej `display:none` — arkusz ma wczesniejszy
   blok @media(max-width:1140px) z ukrywaniem .nav-links, ale przy tej samej
   specyficznosci wygralaby pozniejsza deklaracja bazowa. */
@media(max-width:1140px){.nav-phone{display:inline-flex}}
@media(max-width:359px){.nav-phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nav-phone{padding:0 12px;min-width:48px}}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:10px 0 16px}
.mobile-menu.open{display:flex;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.mobile-menu a{padding:13px 14px;border-radius:12px;color:var(--navy-800);font-weight:600}
.mobile-menu a:hover{background:var(--sky-50)}
.mobile-menu .btn-nav-cta{text-align:center;margin-top:6px}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:14px;border:1px solid transparent;font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue-600) 0%,var(--navy-600) 100%);box-shadow:0 10px 26px rgba(26,74,154,.30)}
.btn-primary:hover{color:#fff;box-shadow:0 14px 32px rgba(26,74,154,.40)}
.btn-accent,.cta-main{color:#06203f;background:linear-gradient(135deg,var(--sky-400) 0%,var(--sky-500) 100%);box-shadow:0 10px 26px rgba(52,168,232,.32)}
.btn-accent:hover,.cta-main:hover{color:#06203f;box-shadow:0 14px 34px rgba(52,168,232,.44)}
.btn-secondary{color:var(--blue-600);background:#fff;border:1.5px solid var(--line)}
.btn-secondary:hover{color:var(--blue-600);border-color:var(--sky-400);background:var(--sky-50)}
.section-dark .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.section-dark .btn-secondary:hover{background:rgba(255,255,255,.10);color:#fff}
/* .btn-ghost byl komponentem tylko na ciemne tlo (bialy tekst), a uzywany jest
   takze na jasnych sekcjach: /rezerwacja/ krok 3 i promo e-bookow. Tam wychodzil
   kontrast 1,06:1, czyli przycisk niewidoczny. Baza jest teraz jasna, biel wraca
   tylko tam, gdzie tlo faktycznie jest ciemne. */
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--navy-800)}
.btn-ghost:hover{border-color:var(--sky-400);color:var(--blue-600)}
.hero .btn-ghost,.hero-simple .btn-ghost,.section-dark .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn-ghost:hover,.hero-simple .btn-ghost:hover,.section-dark .btn-ghost:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   SEKCJE
   ============================================================ */
.section{padding:clamp(56px,7vw,104px) 0}
.section-soft{background:linear-gradient(180deg,var(--sky-50),#fff)}
.section-dark{background:radial-gradient(120% 120% at 15% 0%,var(--navy-700) 0%,var(--navy-800) 45%,var(--navy-900) 100%);color:#fff}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:760px;margin:0 auto clamp(36px,4vw,56px);text-align:center}
.section-head .lead{margin-left:auto;margin-right:auto}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;color:#fff;padding:clamp(40px,6vw,76px) 0 clamp(48px,6vw,84px);
  background:radial-gradient(110% 130% at 85% 0%,var(--navy-600) 0%,var(--navy-800) 48%,var(--navy-900) 100%)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(420px 320px at 78% 18%,rgba(91,192,242,.30),transparent 70%),
  radial-gradient(520px 380px at 12% 88%,rgba(30,95,208,.28),transparent 72%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(28px,3.4vw,52px)}
/* `1fr` to `minmax(auto,1fr)` — sciezka gridu nie schodzi ponizej szerokosci
   min-content. Na 320px przy powiekszonej czcionce hero mial sciezke 363px
   w kontenerze 300px, a `overflow:hidden` na `.hero` obcinal naglowek i CTA
   (zmierzone 54px na /matura-rozszerzona-matematyka/). Stad minmax(0,...). */
.hero-copy{max-width:640px;min-width:0}
.hero h1{color:#fff}
.hero .lead{margin-bottom:22px}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.95rem;color:rgba(226,238,255,.92);margin-bottom:18px}
/* Ta sama zasada co przy .tcard-stars: baza pod jasne tlo, jasne zloto na ciemnym. */
.hero-proof-stars,.review-stars,.proof-stars,.ct-stars{color:#dfa008;letter-spacing:2px}
.hero .hero-proof-stars,.hero .proof-stars,.hero .ct-stars,.hero .review-stars,
.hero-simple .hero-proof-stars,.section-dark .proof-stars,.section-dark .ct-stars,
.section-dark .review-stars,.section-dark .hero-proof-stars{color:#ffd36b}
.hero-proof-sep{color:rgba(255,255,255,.3)}
.hero-social{font-size:1rem;color:rgba(226,238,255,.82);border-left:3px solid var(--sky-400);padding-left:16px;margin-bottom:24px}
.hero-actions{margin-bottom:14px}
.hero-cta-note{font-size:.9rem;color:rgba(226,238,255,.7);margin-bottom:20px}

/* drugie wyjscie z hero: dla osob, ktore nie chca wybierac godziny w kalendarzu */
.hero-alt-cta{margin:6px 0 0;font-size:.92rem;color:rgba(226,238,255,.78)}
.hero-alt-cta a{color:var(--sky-300);font-weight:600;text-underline-offset:3px}
.hero-proof-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.proof-chip{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:#eaf4ff;background:rgba(255,255,255,.08);border:1px solid rgba(138,212,247,.3);padding:7px 13px;border-radius:999px}
.cta-scroll-link{display:inline-block;color:var(--sky-300);font-weight:600;font-size:.92rem;margin-right:18px}
.cta-scroll-link:hover{color:#fff}
.cta-phone-hero{display:inline-block;color:rgba(226,238,255,.85);font-weight:600;font-size:.92rem}
.cta-phone-hero:hover{color:#fff}

/* Hero — karta wizualna */
.hero-visual{display:grid;gap:16px}
.visual-card,.offer-card{background:rgba(255,255,255,.06);border:1px solid rgba(138,212,247,.22);border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,30px);backdrop-filter:blur(6px)}
.offer-kicker{font-family:'Sora',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-300);font-weight:700}
.offer-top h2{font-size:1.5rem!important;color:#fff;margin-top:12px!important}
.offer-list{display:grid;gap:12px;margin-top:18px}
/* Etykieta NAD opisem, nie obok.
   Wczesniej bylo `grid-template-columns:auto 1fr`, ale kazdy wiersz listy to
   OSOBNA siatka, wiec kolumna `auto` dopasowywala sie do wlasnej etykiety.
   Etykiety maja od 4 do 28 znakow ("Plan" vs "Harmonogram do dnia egzaminu"),
   wiec opisy startowaly w kazdym wierszu z innego miejsca — zmierzony rozjazd
   do 124 px, widoczny na 9 stronach zarowno na telefonie, jak i na 1280 px.
   Ustawienie sztywnej kolumny nie wchodzi w gre przy takiej rozpietosci etykiet;
   ulozenie w pionie wyrownuje wszystko przy kazdej szerokosci i daje opisowi
   pelna szerokosc karty zamiast polowy. */
.offer-list>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.offer-list strong{color:var(--sky-300);font-family:'Sora',sans-serif}
.offer-list span{color:rgba(226,238,255,.82);font-size:.92rem}
.dashboard-row{display:grid;gap:16px}
.dashboard-card,.signal-card{background:rgba(255,255,255,.06);border:1px solid rgba(138,212,247,.22);border-radius:var(--radius);padding:22px}
.dashboard-card h3,.signal-card h3{color:#fff;font-size:1.1rem}
.dashboard-meta,.dashboard-result{display:flex;justify-content:space-between;font-size:.84rem;color:rgba(226,238,255,.78);margin:10px 0}
.progress-track{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--sky-400),var(--blue-500));transition:width 1.2s var(--ease)}
.case-study-attribution{font-size:.82rem;color:rgba(226,238,255,.7);margin:8px 0 0}
.signal-bar{display:flex;gap:6px;margin:12px 0}
.signal-bar span{height:8px;flex:1;border-radius:999px;background:rgba(138,212,247,.4)}
.signal-bar span:nth-child(2){background:rgba(138,212,247,.7)}
.signal-bar span:nth-child(3){background:var(--sky-400)}

/* ============================================================
   KARTY / SIATKI
   ============================================================ */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,1.8vw,22px)}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,1.8vw,22px)}

.card,.problem-card,.subject-card,.audience-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.2vw,28px);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card:hover,.problem-card:hover,.hover-border-card:hover,.audience-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky-300)}
.card h3,.problem-card h3{margin-bottom:8px}
.card p,.problem-card p{color:var(--ink-soft);margin:0}

/* Badge numeryczny zamiast surowych „01"/„L" */
.icon-top{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;color:var(--blue-600);background:var(--sky-100);border:1px solid var(--sky-300);margin-bottom:16px}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;font-family:'Sora',sans-serif;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--navy-600));margin-bottom:14px}
.accent-infa .icon-top{color:var(--blue-600);background:var(--sky-50);border-color:var(--sky-400)}  /* sky-500 na sky-50 dawalo 2,48:1 */

.proof-line{text-align:center;font-weight:600;color:var(--navy-700);background:var(--sky-50);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px}

/* Pasek CTA w sekcji */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(28px,3vw,40px);
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px)}
.cta-band h3{color:#fff;margin-bottom:6px}
.cta-band p{color:rgba(226,238,255,.82);margin:0;max-width:54ch}
.cta-band .btn{flex-shrink:0}

/* ============================================================
   DIFFERENTIATOR
   ============================================================ */
.differentiator-section{color:#fff}
.diff-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.diff-col p{color:rgba(226,238,255,.82)}
.diff-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diff-card{border-radius:var(--radius);padding:22px}
.diff-card-bad{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.diff-card-good{background:rgba(91,192,242,.12);border:1px solid var(--sky-400)}
.diff-label{font-family:'Sora',sans-serif;font-weight:700;margin-bottom:14px;color:#fff}
.diff-card-good .diff-label{color:var(--sky-300)}
.diff-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.diff-list li{position:relative;padding-left:28px;font-size:.94rem;color:rgba(226,238,255,.88)}
.diff-list-bad li::before{content:"\2715";position:absolute;left:0;color:#ff8d8d;font-weight:700}
.diff-list-good li::before{content:"\2713";position:absolute;left:0;color:var(--sky-300);font-weight:700}

/* ============================================================
   OPINIE / DOWODY
   ============================================================ */
.proof-grid{display:grid;gap:clamp(16px,1.8vw,22px)}
.proof-grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.glass-card,.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.section-dark .glass-card,.section-dark .quote-card{background:rgba(255,255,255,.06);border-color:rgba(138,212,247,.22)}
.glass-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky-300)}
.result-badge{display:inline-block;font-family:'Sora',sans-serif;font-weight:700;font-size:.78rem;color:var(--blue-600);background:var(--sky-100);border:1px solid var(--sky-300);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.section-dark .result-badge{color:var(--sky-300);background:rgba(91,192,242,.14);border-color:rgba(91,192,242,.35)}
.review-stars{margin-bottom:10px}
.quote-card blockquote{margin:8px 0;font-size:.96rem;line-height:1.6;color:var(--ink)}
.section-dark .quote-card blockquote{color:rgba(232,242,255,.92)}
.quote-person{font-family:'Sora',sans-serif;font-weight:700;margin:0 0 4px}
.quote-meta{font-size:.82rem;color:var(--ink-soft);margin:10px 0 0}
.section-dark .quote-meta{color:rgba(226,238,255,.7)}
.proof-note{text-align:center;font-size:.88rem;color:var(--ink-soft);margin-top:22px}
.section-dark .proof-note{color:rgba(226,238,255,.7)}

/* ============================================================
   TIMELINE (historia ucznia)
   ============================================================ */
.timeline-case{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow)}
.timeline-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.timeline-student{display:flex;align-items:center;gap:14px}
.timeline-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--sky-500))}
.timeline-student strong{display:block;font-family:'Sora',sans-serif}
.timeline-student span{font-size:.85rem;color:var(--ink-soft)}
.timeline-result-badge{font-family:'Sora',sans-serif;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--navy-600));padding:8px 16px;border-radius:999px}
.timeline-track{display:grid;gap:14px;position:relative}
.timeline-step{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px 0;border-bottom:1px dashed var(--line)}
.timeline-step:last-of-type{border-bottom:none}
.timeline-step-label{font-family:'Sora',sans-serif;font-weight:700;font-size:.82rem;color:var(--blue-600);text-transform:uppercase;letter-spacing:.06em}
.timeline-step-content strong{display:block;margin-bottom:4px}
.timeline-step-content p{color:var(--ink-soft);margin:0;font-size:.94rem}
.timeline-step-result .timeline-step-label{color:var(--blue-600)}  /* sky-500 dawal 2,48:1 */
.timeline-step-result{background:var(--sky-50);border-radius:12px;padding:14px;border-bottom:none}
.timeline-quote{margin:22px 0 0;padding:18px 22px;background:var(--sky-50);border-left:4px solid var(--sky-400);border-radius:0 12px 12px 0;font-style:italic;color:var(--navy-800)}
.timeline-quote cite{display:block;margin-top:8px;font-style:normal;font-weight:600;font-size:.86rem;color:var(--ink-soft)}
.timeline-cta{text-align:center;margin-top:26px}

/* ============================================================
   ZESPÓŁ
   ============================================================ */
.team{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.team-photo img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:5px solid #fff}
.jakub-bio-lead{font-size:1.15rem;color:var(--ink)}
.jakub-bio-secondary{color:var(--ink-soft)}
.jakub-stats{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.jakub-stat{flex:1;min-width:120px;background:var(--sky-50);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.jakub-stat-number{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;color:var(--blue-600);line-height:1}
.jakub-stat-label{font-size:.82rem;color:var(--ink-soft)}
.team-highlights{display:grid;gap:14px}
.team-highlights>div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.team-highlights h3{font-size:1.05rem;margin-bottom:4px}
.team-highlights p{margin:0;font-size:.94rem}

/* ============================================================
   NASI KOREPETYTORZY / KARTY Z BIOGRAMAMI
   ============================================================ */
.tutors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:34px}  /* 240px zostawialo piata karte samotna w drugim rzedzie */
.tutor-card{background:var(--paper,#fff);border:1px solid var(--line,#dde9f7);border-radius:var(--radius-lg,20px);padding:22px;box-shadow:var(--shadow-sm,0 2px 8px rgba(11,35,80,.06));display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tutor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow,0 12px 32px rgba(10,31,74,.1))}
.tutor-card-photo{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius,14px);overflow:hidden;background:var(--sky-50,#f1f8ff);border:3px solid #fff;box-shadow:0 4px 14px rgba(8,26,58,.08);margin-bottom:16px}
.tutor-card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;z-index:2}
.tutor-photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;font-size:.84rem;font-weight:600;color:var(--ink-soft,#54648a);background:linear-gradient(135deg,#eef6ff 0%,#e0effe 100%);z-index:1}
.tutor-photo-placeholder svg{color:var(--sky-500,#3b82f6);opacity:.85}
.tutor-card-badge{display:inline-block;font-size:.78rem;font-weight:700;color:var(--blue-600,#1e5fd0);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.tutor-card-name{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700;color:var(--navy-900,#081a3a);margin:0 0 6px}
.tutor-card-result{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;padding:3px 8px;border-radius:12px;margin-bottom:12px;width:fit-content}
.tutor-card-bio{font-size:.9rem;color:var(--ink-soft,#54648a);line-height:1.55;margin:0}

/* ============================================================
   WYBÓR PRZEDMIOTU
   ============================================================ */
.section-choose h2{text-align:center}
.subject-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:34px}
.subject-card-link{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;color:var(--ink)}
.subject-card-link:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky-400);color:var(--ink)}
.subject-card-icon{flex-shrink:0;width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--sky-100);border:1px solid var(--sky-300)}
.subject-card-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.2rem;color:var(--navy-900)}
.subject-card-desc{color:var(--ink-soft);font-size:.92rem;margin:4px 0}
.subject-card-result{font-size:.82rem;font-weight:700;color:var(--blue-600)}
.subject-card-arrow{margin-left:auto;font-size:1.4rem;color:var(--blue-600);transition:transform .2s}  /* strzalka miala 2,65:1 */
.subject-card-link:hover .subject-card-arrow{transform:translateX(4px)}

/* ============================================================
   CENNIK
   ============================================================ */
.pricing-section h2{text-align:center;margin-bottom:34px}
.pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;align-items:stretch}
.pricing-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.pricing-card-featured{background:linear-gradient(180deg,#eef6ff 0%,#e7f1ff 100%);border:2px solid var(--sky-400);box-shadow:var(--shadow);transform:translateY(-6px)}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:'Sora',sans-serif;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--sky-500));padding:6px 16px;border-radius:999px;white-space:nowrap}
.pricing-card-top h3{margin-bottom:8px}
.pricing-price{font-family:'Sora',sans-serif;font-weight:800;font-size:2.1rem;color:var(--navy-900)}
.pricing-reference{font-size:.58em;font-weight:600;color:var(--ink-soft);text-decoration-line:line-through;text-decoration-thickness:2px;text-decoration-color:currentColor;white-space:nowrap;margin-right:.35rem}
.cognito-bts-bar .pricing-reference{color:#c6d2e5}
.pricing-unit{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.pricing-desc{color:var(--ink-soft);margin:10px 0 0;font-size:.94rem}

/* ============================================================
   FORMULARZ
   ============================================================ */
.section-form .container-narrow h2{text-align:center}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.section-form-panel{margin-top:24px}
form label{display:block;font-weight:600;font-size:.9rem;color:var(--navy-800);margin-bottom:7px}
form input[type=text],form input[type=tel],form input[type=email],form select,form textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fcfdff;transition:border-color .15s,box-shadow .15s;margin-bottom:16px}
/* Pierscien fokusu na polach: rgba(91,192,242,.18) na bialym tle to w praktyce
   #e2f4fc, kontrast 1,1:1 wobec tla — czyli wskaznik, ktorego nie widac.
   WCAG 2.2 (2.4.11 Focus Appearance) chce 3:1. Zamiast alfy dajemy pelny
   --blue-600 jako cienki obrys plus jasniejsza poswiata. */
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 2px var(--blue-600),0 0 0 5px rgba(30,95,208,.20)}
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.subject-picker{margin-bottom:16px}
.subject-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subject-option{position:relative;cursor:pointer;margin:0}
.subject-option input{position:absolute;opacity:0;inset:0;cursor:pointer}
.subject-option span{display:flex;align-items:center;justify-content:center;padding:14px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;transition:all .15s;background:#fcfdff}
.subject-option input:checked + span{border-color:var(--sky-400);background:var(--sky-50);color:var(--blue-600);box-shadow:0 0 0 3px rgba(91,192,242,.16)}
.subject-option input:focus-visible + span{outline:3px solid var(--sky-400);outline-offset:2px}
.field-optional{font-weight:400;color:var(--ink-soft);font-size:.82rem}
.form-submit{width:100%;margin-top:4px}
.form-note{font-size:.84rem;color:var(--ink-soft);margin:10px 0 0;text-align:center}
.form-note a{color:var(--blue-600);text-decoration:underline}
.form-trust{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:12px 0 0}
.form-phone-alt{text-align:center;font-size:.9rem;margin:10px 0 0}
.availability-note{font-size:.9rem;color:var(--blue-600);font-weight:600;text-align:center}
.availability-note #next-slot,.availability-note #next-appointment-slot{text-decoration:underline}
.consent-field{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px}
.consent-field input{margin-top:4px;width:18px;height:18px;flex-shrink:0;accent-color:var(--blue-600)}
.consent-field label{font-weight:400;font-size:.84rem;color:var(--ink-soft);margin:0}
.form-success{text-align:center;padding:20px}
.form-success-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--ok),#27b97d);color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success-sub{font-size:.92rem;color:var(--ink-soft)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item.open{border-color:var(--sky-300);box-shadow:var(--shadow-sm)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:none;border:none;text-align:left;font-family:'Sora',sans-serif;font-weight:600;font-size:1.02rem;color:var(--navy-900);cursor:pointer}
.faq-question span:last-child{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--sky-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:transform .2s}
.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;padding:0 20px;color:var(--ink-soft);transition:max-height .3s var(--ease),padding .3s var(--ease)}
.faq-item.open .faq-answer{max-height:500px;padding:0 20px 20px}

/* ============================================================
   FINAL CTA / proces
   ============================================================ */
.final-cta,.footer-cta-box{text-align:center;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,4vw,52px);box-shadow:var(--shadow-lg)}
.final-cta h2{color:#fff;margin-bottom:24px}
.process-steps-mini{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:0 auto 26px}
.pstep{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(138,212,247,.3);border-radius:12px;padding:12px 16px;font-weight:600}
.final-cta .pstep,.footer-cta-box .pstep{color:#eaf4ff}
.pstep-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--sky-400);color:var(--navy-900);font-family:'Sora',sans-serif;font-weight:800;font-size:.85rem}
.pstep em{font-style:normal;color:var(--sky-300);font-weight:700}
.pstep-free{font-family:'Sora',sans-serif;font-weight:800;color:var(--blue-600);font-size:.78rem}
.section-dark .pstep-free,.hero .pstep-free{color:var(--sky-300)}  /* sky-300 na jasnym tle: 1,53:1 */
.pstep-arrow{color:var(--sky-300);font-size:1.2rem}
.process-steps-mini .pstep{color:var(--navy-800);background:var(--sky-50);border-color:var(--line)}
.process-steps-mini .pstep em{color:var(--blue-600)}
.process-steps-mini .pstep-arrow{color:var(--blue-600)}  /* sky-300 na jasnym tle dawal 1,55:1 */
.process-pricing-note,.system-step-note{display:block;margin-top:12px;font-size:.86rem;color:var(--ink-soft);background:var(--sky-50);border:1px solid var(--line);border-radius:10px;padding:12px}
.process-pricing-note strong,.system-step-note strong{color:var(--navy-800)}

/* ============================================================
   STRONA KONTAKT
   ============================================================ */
.kontakt-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,40px);align-items:start}
.kontakt-header{text-align:center;margin-bottom:8px}
.kontakt-header h1{color:#fff}
.kontakt-header .lead{margin-left:auto;margin-right:auto;text-align:center}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--sky-100);color:var(--blue-600);border:1px solid var(--sky-300)}
.badge--light{background:rgba(255,255,255,.12);color:#eaf4ff;border-color:rgba(138,212,247,.35)}
.kontakt-form-col{background:var(--paper)}
.kontakt-form-h2{font-size:1.4rem}
.contact-testimonial{background:var(--sky-50);border:1px solid var(--line);border-radius:12px;padding:16px;margin:6px 0 18px}
.ct-stars{margin-bottom:6px}
.ct-quote{font-style:italic;color:var(--navy-800);margin:0 0 6px;font-size:.94rem}
.ct-author{font-size:.82rem;color:var(--ink-soft);margin:0}
.kontakt-proof-col{display:grid;gap:18px}
.proof-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.proof-quote{font-style:italic;color:var(--ink);margin:8px 0}
.proof-author{font-weight:700;font-family:'Sora',sans-serif;margin:0;font-size:.9rem}
.proof-source{font-size:.8rem;color:var(--ink-soft);margin:2px 0 0}
.proof-pricing{background:var(--sky-50);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.proof-pricing-label{font-family:'Sora',sans-serif;font-weight:700;margin:0 0 12px}

/* ============================================================
   TERMINAL (informatyka)
   ============================================================ */
.terminal{background:#06142e;border:1px solid rgba(138,212,247,.25);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.terminal-top{display:flex;gap:7px;padding:13px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.terminal-top span{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25)}
.terminal-top span:nth-child(1){background:#ff5f57}
.terminal-top span:nth-child(2){background:#febc2e}
.terminal-top span:nth-child(3){background:#28c840}
.terminal-body{padding:20px;font-family:'Courier New',monospace;font-size:.92rem;color:#8ad4f7;display:grid;gap:8px;min-height:140px}
.terminal-line{white-space:pre-wrap;word-break:break-word}
.terminal-caret{display:inline-block;width:8px;height:1.1em;background:var(--sky-400);vertical-align:text-bottom;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   STRONY PRAWNE / PROSTY HERO
   ============================================================ */
.hero-simple{background:radial-gradient(110% 130% at 80% 0%,var(--navy-600),var(--navy-800) 60%,var(--navy-900));color:#fff;text-align:center;padding:clamp(48px,7vw,90px) 0 clamp(40px,5vw,64px)}
.hero-simple h1{color:#fff}
.hero-simple .lead{color:rgba(226,238,255,.86);max-width:640px;margin-left:auto;margin-right:auto}
/* Globalne `strong{color:var(--navy-800)}` daje granat na granacie — w akapicie
   .lead na ciemnym tle wyróżnienie znikało (np. termin lekcji na /dziekujemy/).
   Na jasno, żeby wyróżnienie faktycznie wyróżniało. */
.hero .lead strong,.hero-simple .lead strong,.section-dark .lead strong{color:#fff}
/* To samo dotyczylo .muted i linkow w ciemnych sekcjach: kontrast 2,0:1 przy
   wymaganych 4,5:1 (WCAG AA). Link dostaje --sky-300, tak jak breadcrumbs nizej. */
.hero .muted,.hero-simple .muted,.section-dark .muted{color:rgba(226,238,255,.72)}
.hero .muted a,.hero-simple .muted a,.section-dark .muted a{color:var(--sky-300)}
.hero-simple .btn-row{justify-content:center}
.hero-simple .hero-cta-note{text-align:center}
.legal-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,4vw,48px);box-shadow:var(--shadow-sm);margin:clamp(32px,5vw,56px) 0;max-width:860px;margin-inline:auto}
.legal-card h2{font-size:1.3rem;margin-top:1.8em}
.legal-card h2:first-of-type{margin-top:.4em}.legal-card p a,.legal-card li a{text-decoration:underline;text-underline-offset:2px}
.legal-card h3{font-size:1.08rem;margin-top:1.4em}
.legal-card p,.legal-card li{color:var(--ink-soft)}
.legal-card ul{padding-left:22px}
.legal-card li{margin-bottom:6px}
.legal-card .updated{display:inline-block;font-size:.84rem;color:var(--blue-600);background:var(--sky-50);border:1px solid var(--line);border-radius:999px;padding:5px 14px;margin-bottom:8px}
.legal-card code{background:var(--sky-100);padding:2px 6px;border-radius:6px;font-size:.88em;color:var(--navy-800)}
.legal-toc{background:var(--sky-50);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:8px}
.legal-toc ol{margin:0;padding-left:20px;columns:2;gap:24px}
.legal-toc a{font-size:.9rem}

/* ============================================================
   E-BOOKI / MATERIAŁY
   ============================================================ */
.ebook-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.ebook-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.ebook-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--sky-300)}
.ebook-cover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px;font-family:'Sora',sans-serif;font-weight:800;font-size:1.2rem;background:linear-gradient(135deg,var(--navy-700),var(--blue-600))}
.ebook-cover.is-free{background:linear-gradient(135deg,var(--sky-500),var(--blue-500))}
.ebook-cover.is-system{background:linear-gradient(135deg,var(--navy-900),var(--navy-600))}
.ebook-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:10px}
.ebook-tag{align-self:flex-start;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 11px;border-radius:999px}
.ebook-tag.free{color:var(--ok);background:#e6f7ef;border:1px solid #bfe9d4}
.ebook-tag.paid{color:var(--blue-600);background:var(--sky-100);border:1px solid var(--sky-300)}
.ebook-body h3{margin:0}
.ebook-body p{color:var(--ink-soft);font-size:.92rem;margin:0}
.ebook-features{list-style:none;margin:6px 0;padding:0;display:grid;gap:7px}
.ebook-features li{position:relative;padding-left:24px;font-size:.9rem;color:var(--ink-soft)}
.ebook-features li::before{content:"\2713";position:absolute;left:0;color:var(--sky-500);font-weight:700}
.ebook-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.ebook-price{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;color:var(--navy-900)}
.ebook-price.free{color:var(--ok)}
.ebook-soon{font-size:.78rem;font-weight:700;color:var(--warn);background:#fdf3e2;border:1px solid #f3dcb4;border-radius:999px;padding:5px 12px}
.notify-box{background:var(--sky-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);text-align:center;max-width:620px;margin:40px auto 0}
.notify-box form{display:flex;gap:10px;max-width:440px;margin:18px auto 0;flex-wrap:wrap}
.notify-box input[type=email]{flex:1;min-width:200px;margin:0}
.notify-box .btn{margin:0}

/* ============================================================
   STICKY MOBILE CTA + FLOATING CALL BUTTON
   ============================================================ */
.sticky-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px 14px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(10,31,74,.10)}
/* Bez tego progu pasek "mobilny" wychodzil takze na desktopie: regula nie
   miala zadnego @media, a JS dodaje .is-visible niezaleznie od szerokosci. */
@media(max-width:820px){.sticky-mobile-cta.is-visible{display:flex}}
/* 6.6 — pasek jest position:fixed, wiec bez tego przykrywal ostatnie ~74 px
   stopki. .has-sticky-bar korygowalo dotad wylacznie pozycje przycisku telefonu. */
@media(max-width:820px){body.has-sticky-bar{padding-bottom:74px}}
.sticky-cta-primary{flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:12px;font-family:'Sora',sans-serif;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--blue-600),var(--blue-500))}
.sticky-cta-primary:hover{color:#fff}
.sticky-cta-phone{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 16px;border-radius:12px;font-weight:700;color:var(--blue-600);background:var(--sky-50);border:1px solid var(--sky-300);white-space:nowrap}
.fab-call{position:fixed;right:18px;bottom:20px;z-index:80;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--blue-600);box-shadow:0 8px 22px rgba(30,95,208,.45);transition:transform .2s}
.fab-call:hover{transform:scale(1.08);color:#fff}
.has-sticky-bar .fab-call{bottom:84px}
@media(min-width:821px){.has-sticky-bar .fab-call{bottom:24px}}

/* ============================================================
   STOPKA
   ============================================================ */
.footer{background:var(--navy-900);color:rgba(226,238,255,.78);padding:clamp(44px,5vw,72px) 0 28px;margin-top:0}
.footer .brand img{height:42px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer p.muted{color:rgba(226,238,255,.62);font-size:.92rem;margin-top:12px;max-width:32ch}
.footer-title{font-family:'Sora',sans-serif;font-weight:700;color:#fff;font-size:.95rem;margin:0 0 12px}
.footer-links{display:grid;gap:9px}
.footer-links a{color:rgba(226,238,255,.74);font-size:.92rem}
.footer-links a:hover{color:var(--sky-300)}
.footer-legal-data{font-size:.86rem;color:rgba(226,238,255,.6);margin-top:14px;line-height:1.6}
/* Stopka checkoutu (/zapisy/): tylko to, czego wymaga prawo i kontakt.
   Pelny katalog SEO zostaje na pozostalych 130+ stronach. */
.footer-legal-min{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center;padding:22px 0 6px;font-size:.9rem}
.footer-legal-min a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.footer-legal-min a:hover,.footer-legal-min a:focus-visible{border-bottom-color:currentColor}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);font-size:.82rem;color:rgba(226,238,255,.78)}  /* .55 dawalo kontrast 2,93:1 */
.footer-bottom .muted{color:rgba(226,238,255,.78)}  /* --ink-soft na granacie dawal 2,93:1 */

/* ============================================================
   BANER COOKIES + CENTRUM PREFERENCJI (MODAL V2 SCREENSHOT SPEC)
   ============================================================ */
.cookie-banner{position:fixed;inset:auto 0 0 0;z-index:1400;pointer-events:none;display:none;align-items:flex-end;justify-content:center;padding:12px 18px;opacity:0;transition:opacity .2s ease}
.cookie-banner.show{display:flex;opacity:1}
.cookie-banner-card{pointer-events:auto;background:#fff;border-radius:16px;box-shadow:0 18px 40px -14px rgba(8,26,58,.25),0 0 0 1px rgba(15,23,42,.06);max-width:1080px;width:100%;padding:10px 18px;position:relative;animation:cookieCardIn .2s ease forwards;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}
@keyframes cookieCardIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cookie-banner-header{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.cookie-shield-icon{width:30px;height:30px;border-radius:50%;background:#eef5ff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cookie-shield-icon svg{width:18px;height:18px}
.cookie-banner-title{font-family:'Sora',sans-serif;font-weight:800;font-size:1.05rem;color:#111e38;margin:0;letter-spacing:-.02em;line-height:1.2}
.cookie-banner-body{display:block;margin:0}
.cookie-banner-content .cookie-desc{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:.79rem;line-height:1.4;color:#475569;margin:0 0 4px 0}
.cookie-policy-link{color:#1d68e5;font-family:'Sora',sans-serif;font-weight:600;font-size:.78rem;text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-top:1px;transition:all .15s ease}
.cookie-policy-link:hover{color:#144ebd;text-decoration:underline}
.cookie-banner-illustration{display:none}
.cookie-banner-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;min-width:390px}
.cookie-banner-actions [data-cookie="settings"]{grid-column:1/-1}
.cookie-btn-accept{background:#1d68e5;color:#fff;border:none;border-radius:10px;height:44px;font-family:'Sora',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 10px rgba(29,104,229,.22);transition:all .15s cubic-bezier(.16,1,.3,1)}
.cookie-btn-accept:hover{background:#1752b8;transform:translateY(-1px);box-shadow:0 6px 18px rgba(29,104,229,.38)}
.cookie-btn-settings{background:#fff;color:#111e38;border:1.5px solid #111e38;border-radius:10px;height:44px;font-family:'Sora',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s cubic-bezier(.16,1,.3,1)}
.cookie-btn-settings:hover{background:#f8fafc;border-color:#000;transform:translateY(-1px)}
.cookie-btn-accept,.cookie-btn-settings[data-cookie="reject"]{background:#1d68e5;color:#fff;border:0;box-shadow:0 3px 10px rgba(29,104,229,.22)}
.cookie-btn-accept:hover,.cookie-btn-settings[data-cookie="reject"]:hover{background:#1752b8;border-color:#1752b8;transform:translateY(-1px);box-shadow:0 6px 18px rgba(29,104,229,.38)}
.cookie-banner-footer{display:flex;align-items:center;gap:5px;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:.68rem;color:#64748b;font-weight:500;text-align:left;margin-top:4px}
.cookie-banner-footer svg{color:#64748b;flex-shrink:0}

/* Centrum preferencji (modal) */
.cookie-modal{position:fixed;inset:0;z-index:1450;background:rgba(8,26,58,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.cookie-modal.show{display:flex}
.cookie-modal-card{background:#fff;border-radius:24px;max-width:540px;width:100%;max-height:90vh;overflow-y:auto;padding:32px 30px;box-shadow:0 25px 60px -15px rgba(8,26,58,.3);box-sizing:border-box}
.cookie-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cookie-modal-head h3{margin:0;font-family:'Sora',sans-serif;font-size:1.3rem;color:#111e38;font-weight:700}
.cookie-modal-close{width:40px;height:40px;flex:0 0 40px;border:0;background:#f1f5f9;border-radius:50%;color:#111e38;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.cookie-modal-close:hover{background:#e2e8f0}
.cookie-cat{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line,#e2e8f0)}
.cookie-cat h4{margin:0 0 4px;font-family:'Sora',sans-serif;font-size:.98rem;color:#111e38;font-weight:700}
.cookie-cat p{margin:0;font-size:.85rem;color:#64748b;line-height:1.45}
.switch{position:relative;width:48px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s;cursor:pointer}
.switch .track::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.switch input:checked+.track{background:#1d68e5}
.switch input:checked+.track::before{transform:translateX(22px)}
.switch input:disabled+.track{background:#93c5fd;cursor:not-allowed}
.cookie-modal-actions{display:flex;gap:12px;margin-top:24px}
.cookie-modal-btn{flex:1;min-height:46px;padding:0 16px;border-radius:12px;font-family:'Sora',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}
.cookie-modal-btn.accept{background:#1d68e5;color:#fff;border:none;box-shadow:0 4px 12px rgba(29,104,229,.25)}
.cookie-modal-btn.accept:hover{background:#1752b8}

@media(max-width:680px){
  .cookie-banner{padding:8px 10px;align-items:flex-end}
  .cookie-banner-card{padding:12px 14px 11px;border-radius:14px;max-height:220px;overflow-y:auto;display:block}
  .cookie-banner-header{margin-bottom:4px}
  .cookie-banner-title{font-size:0.96rem}
  .cookie-banner-content .cookie-desc{font-size:.78rem;line-height:1.35;margin-bottom:3px}
  .cookie-banner-content .cookie-desc:nth-child(2){display:none}
  .cookie-policy-link{font-size:.76rem;margin-top:0}
  .cookie-banner-actions{grid-template-columns:1.3fr 1fr;gap:8px;min-width:0;margin-top:8px}
  .cookie-btn-accept{height:44px;font-size:.84rem;padding:0 8px;font-weight:700}
  .cookie-btn-settings{height:44px;font-size:.76rem;padding:0 6px;border-color:#cbd5e1;color:#475569}
  .cookie-btn-accept svg{width:16px;height:16px;flex-shrink:0}
  .cookie-btn-settings svg{width:14px;height:14px;flex-shrink:0}
  .cookie-banner-footer{display:none}
  .cookie-modal-card{padding:22px 18px;border-radius:20px}
  .cookie-modal-actions{flex-direction:column}
}

/* ============================================================
   ANIMACJE REVEAL
   ============================================================ */
[data-reveal]{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  /* H1 musi byc pierwszy takze na mobile - wczesniej karta oferty (.hero-visual)
     miala order:-1 i wypychala naglowek pod siebie */
  .hero-visual{order:0}
  .team{grid-template-columns:1fr}
  .team-photo{max-width:360px}
  .diff-grid{grid-template-columns:1fr}
  .kontakt-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  /* NIE USUWAJ tych dwoch linii. Wygladaja na duplikat progu 1140px wyzej,
     ale nim nie sa: miedzy jednym a drugim stoi `.nav-links{display:flex}`
     (linia ~231), ktore kasuje regule z 1140px. To wlasnie ten blok realnie
     chowa nawigacje na telefonie. Usuniete 15.08.2026 przez pomylke —
     skutkiem byla rozjezdzajaca sie nawigacja na 375 px. Przywrocone. */
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .cta-band{flex-direction:column;align-items:flex-start}
  .legal-toc ol{columns:1}
}
@media(max-width:640px){
  .btn,.cta-main,.btn-row .btn{width:100%}
  .hero-actions .btn{width:100%}
  .diff-compare{grid-template-columns:1fr}
  .subject-options{grid-template-columns:1fr}
  .timeline-step{grid-template-columns:1fr;gap:6px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .notify-box form{flex-direction:column}
  .notify-box input[type=email]{width:100%}
  .pricing-card-featured{transform:none}
}

/* System Cognito */
.system-page{background:#fff}
.system-page .site-nav .brand img{height:48px;width:auto}
.system-page .btn-primary{background:linear-gradient(135deg,#2459d8,#2689e9);color:#fff;box-shadow:0 13px 30px rgba(36,89,216,.23)}
.lesson-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lesson-timeline article{position:relative;border:1px solid #e0e8f3;border-radius:22px;padding:27px;background:#fff}
.lesson-timeline article>div{display:flex;align-items:baseline;gap:9px;margin-bottom:20px}
.lesson-timeline article>div strong{font-family:Sora,sans-serif;font-size:1.7rem;color:#245ed5}
.lesson-timeline article>div span{font-size:.76rem;color:#7b8799;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.lesson-timeline h3{font-size:1.12rem}
.lesson-timeline p{color:#6a7890;margin:0;font-size:.92rem}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.method-grid article{padding:25px 20px;text-align:center;background:#fff;border:1px solid #e1e9f3;border-radius:20px}
.method-grid .vector-tile{margin:0 auto 16px}
.method-grid h3{font-size:1.05rem}
.method-grid p{font-size:.88rem;color:#6e7b91;margin:0}
.parent-system-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(34px,6vw,80px);align-items:center}
.parent-report{padding:28px;border:1px solid #dce6f2;border-radius:22px;background:linear-gradient(160deg,#f7fbff,#fff);box-shadow:0 14px 38px rgba(40,72,126,.09)}
.parent-report>span{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:#3169ce;font-weight:800}
.parent-report h3{margin:10px 0 20px}
.parent-report dl{margin:0}
.parent-report dl>div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-top:1px solid #e5ecf4}
.parent-report dt{color:#7a879a;font-size:.82rem}
.parent-report dd{margin:0;color:#263651;font-weight:700;font-size:.88rem}
.trial-process{display:grid;grid-template-columns:repeat(4,1fr);max-width:1020px;margin:auto}
.trial-process>div{text-align:center;padding:18px 24px}
.trial-process>div+div{border-left:1px solid #dfe7f1}
.trial-process strong{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0 auto 11px;border-radius:50%;background:#e7f1ff;color:#245fd6;font-family:Sora,sans-serif}
.trial-process span{color:#52617a;font-size:.9rem;font-weight:600}
@media(max-width:900px){
  .lesson-timeline{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr 1fr}
  .parent-system-grid{grid-template-columns:1fr}
  .trial-process{grid-template-columns:1fr 1fr}
  .trial-process>div:nth-child(3){border-left:0}
  .trial-process>div:nth-child(n+3){border-top:1px solid #dfe7f1}
}
@media(max-width:560px){
  .method-grid,.trial-process{grid-template-columns:1fr}
  .trial-process>div+div{border-left:0;border-top:1px solid #dfe7f1}
}

/* Rezerwacja: realny kalendarz */
.booking-2027{background:#f6f9fe;min-height:100vh}
.booking-2027 .site-nav{position:relative;background:#fff}
.booking-2027 .site-nav .brand img{height:48px;width:auto}
.booking-help{color:#778399;font-size:.85rem}.booking-help strong{color:#183b79;margin-left:5px}
.booking-main{padding:clamp(34px,5vw,70px) 0}
.booking-layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(30px,5vw,72px);align-items:start}
.booking-assurance{padding:28px 0;position:sticky;top:28px}
.booking-assurance h1{font-size:clamp(2.15rem,4vw,3.6rem)}
.booking-assurance>p{color:#65738c}
.booking-safe{display:flex;align-items:center;gap:11px;padding-top:20px;border-top:1px solid #dfe7f2;margin-top:24px}
.booking-safe svg{width:34px;height:34px;fill:none;stroke:#2464d9;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.booking-safe strong,.booking-safe small{display:block}.booking-safe small{color:#7d899c}
.booking-card{background:#fff;border:1px solid #e0e8f3;border-radius:26px;padding:clamp(22px,4vw,40px);box-shadow:0 20px 60px rgba(35,68,126,.1)}
.booking-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:32px}
.booking-progress span{padding-top:8px;border-top:3px solid #e1e8f1;color:#8b96a8;font-size:.76rem;font-weight:800}
.booking-progress span.active{border-color:#2a65da;color:#2657b8}
.booking-step h2{font-size:clamp(1.55rem,2.5vw,2.15rem)}
.subject-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.subject-choice button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:22px;border:2px solid #e1e8f2;border-radius:18px;background:#fff;cursor:pointer;transition:.2s}
.subject-choice button:hover,.subject-choice button.selected{border-color:#2a66da;background:#f5f8ff;box-shadow:0 9px 25px rgba(39,95,210,.1)}
.subject-choice button strong{font-family:Sora,sans-serif;color:#15274b;font-size:1.05rem;margin-top:7px}
.subject-choice button small{color:#78859b}
.booking-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.booking-actions .btn-primary{background:linear-gradient(135deg,#2459d8,#2689e9);color:#fff}
.booking-actions button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.booking-intro{color:#6e7b90;font-size:.9rem;margin-top:-5px}
.calendar-state{padding:30px;text-align:center;background:#f7faff;border-radius:16px;color:#728098}
.calendar-error{color:#9b2c20;background:#fff2f1}
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin:20px 0 14px}
.calendar-head strong{text-transform:capitalize;font-family:Sora,sans-serif}
.calendar-head button{width:42px;height:42px;border:1px solid #dfe7f2;border-radius:12px;background:#fff;color:#1c3e7b;font-size:1.3rem;cursor:pointer}
.calendar-head button:disabled{opacity:.3;cursor:not-allowed}
.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calendar-week span{text-align:center;color:#8b96a8;font-size:.7rem;font-weight:800;text-transform:uppercase;padding:5px}
.calendar-grid button,.calendar-empty{aspect-ratio:1;border-radius:11px}
.calendar-grid button{border:1px solid transparent;background:transparent;color:#c1c8d2;font-weight:700}
.calendar-grid button.available{background:#eef5ff;border-color:#d1e3fa;color:#183c7a;cursor:pointer}
.calendar-grid button.available:hover,.calendar-grid button.selected{background:#2864d9;border-color:#2864d9;color:#fff}
.time-panel{margin-top:22px;padding-top:19px;border-top:1px solid #e4ebf3}
.time-panel>strong{display:block;font-size:.88rem;color:#34445f;text-transform:capitalize;margin-bottom:11px}
.time-slots{display:flex;flex-wrap:wrap;gap:8px}
.time-slots button{min-width:75px;padding:10px 13px;border:1px solid #dbe5f1;border-radius:11px;background:#fff;color:#26406e;font-weight:700;cursor:pointer}
.time-slots button:hover,.time-slots button.selected{background:#2763d8;border-color:#2763d8;color:#fff}
.field-error{color:#a23027;font-size:.82rem;font-weight:700;margin:10px 0 0}
.booking-summary-line{display:flex;align-items:center;gap:12px;background:#eff6ff;border:1px solid #d4e6fb;border-radius:15px;padding:14px 16px;margin:20px 0}
.booking-summary-line svg{width:25px;height:25px;fill:none;stroke:#2863d6;stroke-width:1.7}
.booking-summary-line span{flex:1}.booking-summary-line small,.booking-summary-line strong{display:block}.booking-summary-line small{color:#7c899c}.booking-summary-line strong{text-transform:capitalize;font-size:.9rem}
.booking-summary-line button{border:0;background:transparent;color:#235bcb;font-weight:700;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-grid label{display:block}.form-grid label.full{grid-column:1/-1}
.form-grid label>span{display:block;color:#34435c;font-size:.82rem;font-weight:700;margin-bottom:6px}
.form-grid input,.form-grid select{width:100%;min-height:48px;border:1px solid #dce5f0;border-radius:11px;padding:10px 12px;background:#fff;font-size:16px}
.form-grid input:focus,.form-grid select:focus{outline:3px solid rgba(38,100,218,.15);border-color:#2a65d8}
.consent-line{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;color:#596881;margin-top:13px}
.consent-line input{width:20px;height:20px;flex:0 0 20px}
.submit-note{text-align:center;color:#7c889b;font-size:.77rem;margin:13px 0 0}
.booking-alert{padding:13px 15px;margin-bottom:18px;border:1px solid #f0c4bf;border-radius:12px;background:#fff1f0;color:#982d25;font-weight:700;font-size:.86rem}
@media(max-width:850px){
  .booking-layout{grid-template-columns:1fr}
  .booking-assurance{position:static;text-align:center;padding-top:0}
  .booking-assurance .clean-check-list{max-width:430px;margin:auto;text-align:left}
  .booking-safe{justify-content:center}
}
@media(max-width:560px){
  .booking-help{font-size:0}.booking-help strong{font-size:.8rem}
  .subject-choice,.form-grid{grid-template-columns:1fr}
  .form-grid label.full{grid-column:auto}
  .booking-progress span{font-size:.67rem}
  .booking-actions .btn{padding:0 17px}
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .progress-fill{transition:none!important}
}

/* ============================================================
   v2 — nawigacja i logo stanowe
   ============================================================ */
.site-nav{position:sticky;top:var(--cognito-bts-height,38px);z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-nav.is-scrolled{box-shadow:0 4px 20px rgba(10,31,74,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{flex-shrink:0;display:block}
.brand-name{font-family:'Sora',sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:-.02em;line-height:1;color:var(--navy-900);transition:color .3s var(--ease)}
.nav-links a{color:var(--navy-800)!important}
.nav-links a:hover,.nav-links a.active{color:var(--blue-600)!important}
.nav-links a.active::after{background:var(--sky-400)}
.nav-links a[href^="tel:"]{color:var(--ink-soft)!important}
.btn-nav-cta{background:linear-gradient(135deg,var(--blue-600),var(--blue-500))!important;border-color:transparent;color:#fff!important;box-shadow:0 6px 16px rgba(30,95,208,.28)}
.nav-toggle{background:#fff;border-color:var(--line);color:var(--navy-800)}
.nav-rating{display:flex;align-items:center;gap:8px;margin-left:4px;font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.nav-rating .stars{color:#ffd36b;letter-spacing:1px}


/* ============================================================
   v2 — pasek zaufania z avatarami (rating row)
   ============================================================ */
.trust-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.avatar-stack{display:flex}
.avatar-stack img{width:40px;height:40px;border-radius:50%;border:2px solid #fff;margin-left:-12px;background:var(--sky-100);box-shadow:0 2px 6px rgba(10,31,74,.12)}
.avatar-stack img:first-child{margin-left:0}
.hero .avatar-stack img{border-color:rgba(255,255,255,.85)}
.trust-rating{display:flex;flex-direction:column;line-height:1.2}
.trust-rating .stars{color:#ffd36b;letter-spacing:2px;font-size:1rem}
.trust-rating small{color:var(--ink-soft);font-size:.84rem}
.hero .trust-rating small{color:rgba(226,238,255,.82)}
.trust-rating strong{font-family:'Sora',sans-serif}

/* ============================================================
   v2 — OPINIE (karty z avatarami)
   ============================================================ */
/* `minmax(280px,...)` wymusza 280px nawet gdy kontener ma mniej — na 320px
   karta z opinia wystawala poza siatke. `min(280px,100%)` schodzi do
   szerokosci kontenera, gdy jest go mniej niz 280px. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(16px,1.8vw,22px)}
.tcard{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky-300)}
.section-dark .tcard{background:rgba(255,255,255,.06);border-color:rgba(138,212,247,.22)}
.tcard-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tcard-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:var(--sky-100);border:2px solid #fff;box-shadow:0 2px 8px rgba(10,31,74,.12)}
/* Awatar literowy. Uzywany tam, gdzie nie mamy zdjecia autora opinii — nie podstawiamy
   cudzej twarzy pod prawdziwe imie i date z e-korepetycje.net. */
.tcard-avatar--letter{display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:var(--blue-600);-webkit-user-select:none;user-select:none}
.tcard-id{display:flex;flex-direction:column;line-height:1.25}
.tcard-name{font-family:'Sora',sans-serif;font-weight:700;font-size:.98rem;color:var(--navy-900)}
.section-dark .tcard-name{color:#fff}
.tcard-role{font-size:.8rem;color:var(--ink-soft)}
.section-dark .tcard-role{color:rgba(226,238,255,.7)}
/* Zlote gwiazdki sa czytelne na granacie, na bieli daja 1,42:1. Baza jest teraz
   ciemnozlota, jasne zloto wraca tylko na ciemnym tle. */
.tcard-stars{color:#dfa008;letter-spacing:1.5px;font-size:.95rem}
.section-dark .tcard-stars,.hero .tcard-stars,.hero-simple .tcard-stars{color:#ffd36b}
.tcard blockquote{margin:0;font-size:.96rem;line-height:1.62;color:var(--ink)}
.section-dark .tcard blockquote{color:rgba(232,242,255,.92)}
.tcard-tag{align-self:flex-start;margin-top:auto;font-size:.74rem;font-weight:700;color:var(--blue-600);background:var(--sky-100);border:1px solid var(--sky-300);border-radius:999px;padding:4px 11px}
.section-dark .tcard-tag{color:var(--sky-300);background:rgba(91,192,242,.14);border-color:rgba(91,192,242,.35)}
.tcard-result{font-family:'Sora',sans-serif;font-weight:800;color:var(--ok);font-size:.9rem}
.reviews-summary{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.reviews-summary .big{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;color:var(--navy-900)}
.section-dark .reviews-summary .big{color:#fff}

/* ============================================================
   v2 — E-BOOK PROMO BAND
   ============================================================ */
.ebook-promo{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,3vw,44px);align-items:center;background:linear-gradient(135deg,#0c2350,#123a7d);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px);color:#fff;overflow:hidden;position:relative}
.ebook-promo::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(91,192,242,.28),transparent 70%);pointer-events:none}
.ebook-promo-visual{position:relative;z-index:1;display:flex;justify-content:center;gap:14px}
.ebook-mock{width:150px;aspect-ratio:3/4;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#fff;font-family:'Sora',sans-serif;transform:rotate(-5deg)}
.ebook-mock.two{transform:rotate(5deg) translateY(14px);margin-left:-50px}
.ebook-mock .m-kicker{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.ebook-mock .m-title{font-size:1.05rem;font-weight:800;line-height:1.15}
.ebook-mock .m-foot{font-size:.62rem;opacity:.85;font-family:'Inter',sans-serif}
.ebook-promo-body{position:relative;z-index:1}
.ebook-promo-body .eyebrow{color:var(--sky-300)}
.ebook-promo-body h2{color:#fff;margin-bottom:10px}
.ebook-promo-body p{color:rgba(226,238,255,.85)}
.ebook-promo-feats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 20px;padding:0;list-style:none}
.ebook-promo-feats li{position:relative;padding-left:24px;font-size:.92rem;color:#eaf4ff}
.ebook-promo-feats li::before{content:"\2713";position:absolute;left:0;color:var(--sky-300);font-weight:700}
.ebook-promo-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ebook-promo-price{font-family:'Sora',sans-serif;font-weight:800;font-size:1.1rem;color:#fff}
.ebook-promo-price s{color:rgba(226,238,255,.55);font-weight:400;font-size:.9rem;margin-right:6px}

/* ============================================================
   v2 — KARTY E-BOOK (oferta) + strona produktu
   ============================================================ */
.ebook-price-row{display:flex;align-items:baseline;gap:8px}
.ebook-price-old{color:var(--ink-soft);text-decoration:line-through;font-size:1rem}
.ribbon{position:absolute;top:14px;right:14px;font-size:.72rem;font-weight:700;color:#06203f;background:var(--sky-400);border-radius:999px;padding:4px 12px;z-index:2}
.product-hero{display:grid;grid-template-columns:340px 1fr;gap:clamp(28px,4vw,52px);align-items:start}
.product-cover{aspect-ratio:3/4;border-radius:var(--radius-lg);display:flex;flex-direction:column;justify-content:space-between;padding:26px;color:#fff;font-family:'Sora',sans-serif;box-shadow:var(--shadow-lg)}
.product-cover .pc-kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.product-cover .pc-title{font-size:1.6rem;font-weight:800;line-height:1.12}
.product-cover .pc-foot{font-family:'Inter',sans-serif;font-size:.8rem;opacity:.85}
.product-buy{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);margin:18px 0}
.product-hero .muted a{color:#164da6;text-decoration:underline;text-underline-offset:2px;}
.ebook-digital-consent{display:flex;align-items:flex-start;gap:9px;margin:10px 0 12px;text-align:left;font-size:.9rem;line-height:1.45;color:var(--ink)}
.ebook-digital-consent input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);}
.ebook-digital-consent input[aria-invalid="true"]{outline:2px solid #b42318;outline-offset:2px;}
.ebook-digital-consent a{color:inherit;text-decoration:underline;}
.product-price{font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;color:var(--navy-900)}
.product-price s{font-size:1.1rem;color:var(--ink-soft);font-weight:400;margin-right:8px}
.product-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.product-meta span{font-size:.8rem;font-weight:600;color:var(--blue-600);background:var(--sky-50);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.product-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.product-list li{position:relative;padding-left:28px;color:var(--ink-soft)}
.product-list li::before{content:"\2713";position:absolute;left:0;color:var(--sky-500);font-weight:800}

/* ============================================================
   v2 — BLOG
   ============================================================ */
.breadcrumbs{font-size:.85rem;color:var(--ink-soft);margin:0 0 8px}
.breadcrumbs a{color:var(--blue-600)}
.breadcrumbs span{margin:0 6px;color:var(--line)}
.hero-simple .breadcrumbs{color:rgba(226,238,255,.7)}
.hero-simple .breadcrumbs a{color:var(--sky-300)}
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.blog-cat{font-size:.85rem;font-weight:600;color:var(--blue-600);background:var(--sky-50);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.blog-cat:hover{border-color:var(--sky-400);background:var(--sky-100)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;color:var(--ink)}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--sky-300);color:var(--ink)}
.post-thumb{aspect-ratio:16/9;display:flex;align-items:flex-end;padding:0;color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.2;overflow:hidden;position:relative;background:#0c2350}
.post-thumb.mat{background:linear-gradient(135deg,#123a7d,#1e5fd0)}
.post-thumb.inf{background:linear-gradient(135deg,#0c2350,#34a8e8)}
.post-thumb-image{display:block;width:100%;height:100%;object-fit:cover}
.post-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-600)}
.post-card h3{margin:0;font-size:1.12rem}
.post-card p{color:var(--ink-soft);font-size:.92rem;margin:0}
/* Bez `wrap` data, "zaktualizowano" i nazwisko autora stoja w jednej linii
   niezaleznie od szerokosci. Zmierzone na 320px przy powiekszonej czcionce:
   "Jakub Juszczak" wychodzil 68px poza kontener artykulu. */
.post-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;font-size:.82rem;color:var(--ink-soft)}
.post-readmore{color:var(--blue-600);font-weight:600;font-size:.9rem}

/* Artykuł */
.article-wrap{max-width:760px;margin:0 auto}
.prose{font-size:1.06rem;line-height:1.8;color:#21314d}
.prose h2{margin:1.8em 0 .5em;font-size:clamp(1.4rem,2.4vw,1.85rem)}
.prose h3{margin:1.5em 0 .4em;font-size:1.2rem}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:24px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--navy-800)}
.prose a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
/* Linki w akapitach wprowadzajacych musza byc rozpoznawalne bez koloru: kontrast
   linku do otaczajacego tekstu to 1.01:1 (WCAG 1.4.1 wymaga 3:1 albo innego
   wyroznika). Podkreslenie zamyka temat i jest zgodne ze stylem .prose. */
.lead a:not(.btn),.article-lead a:not(.btn),.quick-answer a:not(.btn){text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:1.4em 0;padding:16px 22px;background:var(--sky-50);border-left:4px solid var(--sky-400);border-radius:0 12px 12px 0;font-style:italic;color:var(--navy-800)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;color:var(--ink-soft);font-size:.9rem;margin:10px 0 6px}
.article-author{display:flex;align-items:center;gap:10px}
.article-author img{width:38px;height:38px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(10,31,74,.12)}
.article-lead{font-size:1.18rem;line-height:1.6;color:var(--ink-soft);margin:0 0 6px}
.toc{background:var(--sky-50);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:24px 0}
.toc p{font-family:'Sora',sans-serif;font-weight:700;margin:0 0 8px;font-size:.95rem}
.toc ol{margin:0;padding-left:20px}
.toc a{font-size:.94rem}
.article-cta{margin:2em 0;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);text-align:center}
.article-cta h3{color:#fff;margin-bottom:8px}
.article-cta p{color:rgba(226,238,255,.85);max-width:52ch;margin:0 auto 18px}
.article-faq{margin:2em 0}
.related-posts{margin-top:40px}
.tag-pill{display:inline-block;font-size:.78rem;font-weight:600;color:var(--blue-600);background:var(--sky-50);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:0 6px 6px 0}

@media(max-width:760px){
  .ebook-promo{grid-template-columns:1fr;text-align:center}
  .ebook-promo-visual{margin-bottom:8px}
  .ebook-promo-feats li{text-align:left}
  .ebook-promo-actions{justify-content:center}
  .product-hero{grid-template-columns:1fr}
  .product-cover{max-width:300px;margin:0 auto}
  /* .nav-rating{display:none} usuniete 15.08.2026 — klasa i tak nie wystepuje
     w zadnym pliku HTML po przejsciu na v6. Martwa regula chowala dowod
     spoleczny na mobile i mylila przy audytach. */
}

/* ============================================================
   v3 — PRAWDZIWE ZDJĘCIA OPINII + PRAWDZIWE OKŁADKI E-BOOKÓW (2026-06)
   ============================================================ */
img.tcard-avatar{object-fit:cover;object-position:center 22%}
.avatar-stack img{object-fit:cover;object-position:center 22%}
.ebook-cover.has-img{padding:0;aspect-ratio:3/4;overflow:hidden;display:block;background:linear-gradient(135deg,var(--navy-700),var(--blue-600))}
.ebook-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.product-cover-img{display:block;width:100%;aspect-ratio:1055/1491;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.ebooki-collage{display:block;width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.ebook-promo-visual.is-collage{display:block}
/* Lead magnet — gated darmowy e-book */
.leadmagnet-success{display:none}
.leadmagnet-form .consent-field{margin-top:6px}

/* --- poprawki 27.06: widoczny dowód w hero + foto w timeline --- */
.hero-proof,.hero-proof strong,.hero .trust-rating strong{color:#fff}
.timeline-avatar{overflow:hidden}
.timeline-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ============================================================
   v4 — 2026-08: animacje reveal, siatki, karty bloga
   ============================================================ */
/* Reveal działa tylko przy włączonym JS (klasa .has-js ustawiana w <head>),
   dzięki czemu bez JS treść jest od razu widoczna. */
.has-js [data-reveal]{opacity:1;transform:none;transition:none}
.has-js [data-reveal].is-visible{opacity:1;transform:none}
/* Kaskadowe wejście kart w siatkach */
.has-js .grid-2 > [data-reveal]:nth-child(2),
.has-js .grid-4 > [data-reveal]:nth-child(2),
.has-js .steps-grid > [data-reveal]:nth-child(2),
.has-js .tgrid > [data-reveal]:nth-child(2),
.has-js .post-grid > [data-reveal]:nth-child(2),
.has-js .subject-cards > [data-reveal]:nth-child(2){transition-delay:.07s}
.has-js .grid-4 > [data-reveal]:nth-child(3),
.has-js .steps-grid > [data-reveal]:nth-child(3),
.has-js .tgrid > [data-reveal]:nth-child(3),
.has-js .post-grid > [data-reveal]:nth-child(3),
.has-js .subject-cards > [data-reveal]:nth-child(3){transition-delay:.14s}
.has-js .grid-4 > [data-reveal]:nth-child(4),
.has-js .steps-grid > [data-reveal]:nth-child(4),
.has-js .tgrid > [data-reveal]:nth-child(4),
.has-js .post-grid > [data-reveal]:nth-child(4),
.has-js .subject-cards > [data-reveal]:nth-child(4){transition-delay:.21s}
@media(prefers-reduced-motion:reduce){
  .has-js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Hero bez kolumny wizualnej — nie zostawiaj pustej połowy ekranu */
.hero-grid:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.hero-grid:has(> :only-child) .hero-copy{max-width:820px}

/* Karty bloga — delikatny zoom okładki przy hoverze */
.post-thumb{background:linear-gradient(135deg,var(--navy-700),var(--blue-600))}
.post-thumb-image{transition:transform .45s var(--ease)}
.post-card:hover .post-thumb-image{transform:scale(1.045)}
.post-card h3{font-family:'Sora',sans-serif;color:var(--navy-900);letter-spacing:-.01em}
.post-card:hover h3{color:var(--blue-600)}

/* Sekcja kategorii na blogu */
.blog-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.blog-section-head h2{margin:0;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--navy-900)}
.blog-section-head span{font-size:.86rem;color:var(--ink-soft);white-space:nowrap}

/* Pasek CTA lead-magnet na liście bloga */
.blog-lead-strip{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center;background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);margin:36px 0}
.blog-lead-strip h3{color:#fff;margin:0 0 8px}
.blog-lead-strip p{color:rgba(226,238,255,.86);margin:0}
.blog-lead-strip .btn{white-space:nowrap}
@media(max-width:820px){.blog-lead-strip{grid-template-columns:1fr;text-align:center}}

/* Okładka w artykule */
.article-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);margin:0 0 26px}

/* Siatka 3-kolumnowa (strony miast i oferty) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
@media(max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}
/* Lista miast powiązanych */
.city-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Chipy dowodowe na jasnym tle (np. /rezerwacja/) */
.bk-wrap .proof-chip{color:var(--navy-800);background:var(--sky-50);border-color:var(--line)}

/* Oferta 2026/2027 */
.offer-2027{background:#fff}
.offer-2027 .site-nav .brand img{height:48px;width:auto}
.page-hero-light{text-align:center;padding:clamp(58px,8vw,96px) 0;background:radial-gradient(circle at 50% 0,rgba(52,137,235,.14),transparent 42%),linear-gradient(180deg,#f8fbff,#fff)}
.page-hero-light h1{font-size:clamp(2.45rem,5vw,4.6rem);max-width:880px;margin:0 auto 18px}
.page-hero-light p{max-width:670px;margin:0 auto 26px;color:#66758f;font-size:1.1rem}
.page-hero-light .btn-primary,.offer-2027 .btn-primary{background:linear-gradient(135deg,#2459d8,#2689e9);color:#fff;box-shadow:0 13px 30px rgba(36,89,216,.23)}
.pricing-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.package-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px;border:1.5px solid #dde6f2;border-radius:23px;background:#fff;color:#263650;cursor:pointer;transition:.22s;box-shadow:0 7px 24px rgba(34,66,118,.05)}
.package-card:hover,.package-card.selected{transform:translateY(-5px);border-color:#2b69df;box-shadow:0 16px 42px rgba(35,89,180,.14)}
.package-card.selected{background:linear-gradient(180deg,#f5f8ff,#fff)}
.package-card mark{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:7px 13px;background:#245fdc;color:#fff;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.package-card .vector-tile{margin-bottom:17px}
.package-card small{color:#6f7e97;font-weight:700;margin-bottom:6px}
.package-card>strong{font-family:Sora,sans-serif;color:#102043;font-size:1.55rem}
.package-card>span:not(.vector-tile){color:#6c7990;font-size:.9rem}
.package-card>b{display:block;margin-top:18px;color:#1e56c6;font-family:Sora,sans-serif;font-size:1.45rem}
.package-card b em{font-family:Inter,sans-serif;font-size:.76rem;color:#6f7e97;font-style:normal}
.investment-summary{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 0 0;border:1px solid #dfe7f2;border-radius:20px;background:#fff;overflow:hidden}
.investment-summary>div{text-align:center;padding:20px 16px;border-right:1px solid #e7edf5}
.investment-summary>div:last-child{border:0}
.investment-summary small{display:block;color:#78859a;font-size:.75rem;margin-bottom:5px}
.investment-summary strong{font-family:Sora,sans-serif;color:#18366e;font-size:.94rem}
.calculation-note{text-align:center;color:#7d899b;font-size:.78rem;margin:12px 0 0}
.offer-level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.offer-level-grid article{background:#fff;border:1px solid #e0e8f2;border-radius:21px;padding:26px}
.offer-level-grid article>span{display:inline-flex;min-width:48px;height:42px;align-items:center;justify-content:center;padding:0 10px;border-radius:12px;background:#eaf3ff;color:#225ed3;font-family:Sora,sans-serif;font-weight:800;font-size:.82rem}
.offer-level-grid h3{margin:17px 0 8px}
.offer-level-grid p{color:#68768d}
.offer-level-grid article>div{display:flex;gap:16px}
.offer-level-grid a{font-weight:700;font-size:.9rem}
.included-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.included-grid>div{text-align:center;padding:24px 18px}
.included-grid .vector-tile{margin:0 auto 16px}
.included-grid h3{font-size:1.05rem}
.included-grid p{color:#728097;font-size:.88rem;margin:0}
@media(max-width:900px){
  .pricing-choice{grid-template-columns:1fr}
  .package-card{max-width:580px;width:100%;margin:auto}
  .investment-summary{grid-template-columns:1fr 1fr}
  .investment-summary>div:nth-child(2){border-right:0}
  .investment-summary>div:nth-child(-n+2){border-bottom:1px solid #e7edf5}
  .included-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .offer-level-grid{grid-template-columns:1fr}
  .investment-summary{grid-template-columns:1fr}
  .investment-summary>div{border-right:0;border-bottom:1px solid #e7edf5}
  .included-grid{grid-template-columns:1fr}
}

/* --- katalog w stopce: poziomy, klasy, egzaminy, miasta --- */
.footer-catalog{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;margin-top:8px}
.footer-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px 24px;margin-bottom:26px}
.footer-catalog h3,.footer-catalog h4,.footer-cities h3,.footer-cities h4{color:#fff!important;font-family:'Sora',sans-serif;font-size:.95rem;font-weight:600;margin:0 0 10px}
.footer-links-sm a{font-size:.86rem;color:rgba(255,255,255,.72)}
.footer-links-sm a:hover{color:#fff}
.footer-cities{border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
.footer-cities-list{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem}
.footer-cities-list a{color:rgba(255,255,255,.7)}
.footer-cities-list a:hover{color:#fff}
.footer-cities-list .footer-cities-all{color:#fff;font-weight:600}
@media(max-width:520px){.footer-catalog-grid{grid-template-columns:1fr 1fr;gap:18px 14px}.footer-cities-list{gap:8px 14px;font-size:.82rem}}

/* --- zajawka testu poziomu --- */
.quiz-teaser{background:linear-gradient(135deg,var(--sky-100),#fff);border:1px solid var(--sky-300);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.quiz-teaser h2{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--navy-900)}
.quiz-teaser p{color:var(--ink-soft);max-width:62ch}

/* ============================================================
   Strona główna 2026: krótka ścieżka decyzji i widoczny zespół
   ============================================================ */
.home-v5{background:#fff;color:#15243e}
.home-v5 .site-nav .brand img,.home-v5 .footer-clean .brand img{height:44px;width:auto}
.home-v5 .conversion-hero{padding:clamp(44px,5.6vw,76px) 0 clamp(48px,6vw,82px)}
.home-v5 .conversion-hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);gap:clamp(34px,5vw,72px)}
.home-v5 .conversion-hero h1{font-size:clamp(2.55rem,4.65vw,4.8rem);line-height:1.02;max-width:760px}
.home-v5 .conversion-hero .lead{max-width:640px}
.home-hero-media{position:relative;margin:0}
.home-hero-media>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:28px;border:1px solid #dce7f5;box-shadow:0 24px 70px rgba(19,55,119,.18)}
.home-hero-caption{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 14px;border:1px solid rgba(255,255,255,.48);border-radius:14px;background:rgba(7,23,52,.84);backdrop-filter:blur(10px);color:#fff;font-size:.78rem;line-height:1.45}
.home-hero-caption strong{color:#fff}  /* dziedziczyl --navy-800 na granatowym tle: 1,16:1 */
.home-proof{background:#fff;border-bottom:1px solid #e8eff8}
.home-proof .proof-strip-grid>div{padding:20px 14px}
.home-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-choice-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:clamp(26px,3vw,38px);border:1px solid #dfe8f4;border-radius:26px;background:#fff;box-shadow:0 12px 38px rgba(18,52,105,.07);overflow:hidden}
.home-choice-card::after{content:"";position:absolute;width:210px;height:210px;right:-90px;bottom:-120px;border-radius:50%;background:#eaf4ff}
.home-choice-card.student::after{background:#e8f9f6}
.home-choice-label{display:inline-flex;align-self:flex-start;padding:6px 11px;border-radius:999px;background:#eaf2ff;color:#1e5fd0;font-size:.77rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.home-choice-card.student .home-choice-label{background:#e6f8f3;color:#16795a}
.home-choice-card h3{font-size:clamp(1.45rem,2.4vw,2.05rem);margin:18px 0 12px;max-width:18ch}
.home-choice-card p{color:#5c6b83;max-width:54ch;margin:0 0 24px}
.home-choice-card .text-link{position:relative;z-index:1;margin-top:auto;align-self:flex-start}
.home-output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.home-output-card{padding:26px;border:1px solid #dfe8f3;border-radius:20px;background:#fff}
.home-output-card>span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:#eaf3ff;color:#1e5fd0;font-family:Sora,sans-serif;font-weight:800}
.home-output-card h3{margin:18px 0 8px;font-size:1.12rem}
.home-output-card p{margin:0;color:#617087;font-size:.94rem}
.home-subject-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-subject-card{padding:clamp(27px,3vw,38px);border-radius:26px;color:#fff;overflow:hidden;position:relative}
.home-subject-card.math{background:linear-gradient(145deg,#173d83,#225fd3)}
.home-subject-card.info{background:linear-gradient(145deg,#082850,#0d6d99)}
.home-subject-card::before{content:"";position:absolute;width:260px;height:260px;right:-130px;top:-130px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 46px rgba(255,255,255,.04)}
.home-subject-card h3{position:relative;color:#fff;font-size:clamp(1.6rem,2.8vw,2.35rem);margin:0 0 10px}
.home-subject-card p{position:relative;color:rgba(239,247,255,.86);max-width:52ch}
.home-subject-links{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.home-subject-links a{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.38);border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:.88rem}
.home-subject-links a:first-child{background:#fff;color:#173c80;border-color:#fff}
.home-subject-links a:hover{transform:translateY(-1px);background:#fff;color:#173c80}
.home-team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.home-team-card{min-width:0;border:1px solid #dfe8f3;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 8px 28px rgba(23,54,104,.06)}
.home-team-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;background:#edf4fb}
.home-team-copy{padding:16px}
.home-team-copy h3{font-size:.98rem;margin:0 0 4px;letter-spacing:-.02em}
.home-team-copy p{font-size:.8rem;line-height:1.5;color:#69768c;margin:0}
.home-team-card.filip{border-color:#7fb8f4;box-shadow:0 10px 34px rgba(30,95,208,.13)}
.home-price-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;max-width:940px;margin:0 auto}
.home-price-card{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);border:1px solid #dce7f4;border-radius:24px;background:#fff}
.home-price-card.featured{border:2px solid #2968dc;background:linear-gradient(180deg,#f4f8ff,#fff);box-shadow:0 18px 46px rgba(34,94,204,.13)}
.home-price-card h3{font-size:1.25rem;margin:0 0 12px}
.home-price{font-family:Sora,sans-serif;font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:#102a5a;margin-bottom:16px}
.home-price small{font-family:Inter,sans-serif;font-size:.78rem;color:#718097;font-weight:600}
.home-price-card p{color:#5f6d84;margin:0 0 20px}
.home-price-list{list-style:none;padding:0;margin:auto 0 0;display:grid;gap:9px;color:#34445e;font-size:.9rem}
.home-price-list li{position:relative;padding-left:24px}
.home-price-list li::before{content:"\2713";position:absolute;left:0;color:#16835d;font-weight:800}
.home-source-note{font-size:.78rem;color:#76849a;text-align:center;margin:18px auto 0;max-width:720px}
.home-faq{max-width:820px;margin:0 auto}
.home-v5 .final-conversion{padding-top:20px}

@media(max-width:1050px){
  .home-team-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:920px){
  .home-v5 .conversion-hero-grid{grid-template-columns:minmax(0,1fr)}
  .home-hero-media{max-width:680px;margin:0 auto}
}
@media(max-width:760px){
  .home-choice-grid,.home-subject-grid,.home-price-grid{grid-template-columns:1fr}
  .home-output-grid{grid-template-columns:1fr}
  .home-choice-card{min-height:0}
  .home-team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .home-hero-caption{position:static;margin-top:10px;background:#0b2452}
  .home-team-grid{gap:10px}
  .home-team-copy{padding:12px}
  .home-team-copy h3{font-size:.9rem}
  .home-team-copy p{font-size:.74rem}
}

/* ============================================================
   TABELE
   Na desktopie zwykla tabela. Ponizej 640 px kazdy wiersz staje sie
   blokiem, a naglowek kolumny wraca jako etykieta z data-label.
   Tabela przewijana w bok jest na telefonie nieczytelna, wiec jej nie ma.
   ============================================================ */
.ctable-wrap{margin-top:26px}
.ctable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius,16px);overflow:hidden;font-size:.95rem}
.ctable th,.ctable td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.ctable thead th{background:var(--sky-50);font-family:'Sora',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-700)}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:hover{background:var(--sky-50)}
.ctable td strong{color:var(--navy-800);font-weight:700}
.ctable td .muted{display:block;color:var(--ink-soft);font-size:.88rem;margin-top:2px}
.ctable .ctable-num{font-family:'Sora',sans-serif;font-weight:800;color:var(--blue-600);white-space:nowrap}
.ctable .ctable-yes{color:var(--ok,#1f9d6b);font-weight:700}
.ctable .ctable-no{color:#c0392b;font-weight:700}
.ctable-note{color:var(--ink-soft);font-size:.88rem;margin:12px 0 0}
.section-dark .ctable{background:rgba(255,255,255,.06);border-color:rgba(138,212,247,.22);color:rgba(232,242,255,.92)}
.section-dark .ctable thead th{background:rgba(255,255,255,.08);color:var(--sky-300)}
.section-dark .ctable th,.section-dark .ctable td{border-bottom-color:rgba(255,255,255,.12)}
.section-dark .ctable tbody tr:hover{background:rgba(255,255,255,.05)}
.section-dark .ctable td strong{color:#fff}
.section-dark .ctable td .muted{color:rgba(226,238,255,.72)}
@media(max-width:640px){
  .ctable{display:block;border-radius:14px}
  .ctable thead{display:none}
  .ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
  .ctable tr{border-bottom:1px solid var(--line);padding:12px 0}
  .ctable tr:last-child{border-bottom:0}
  .ctable td{border:0;padding:4px 14px;display:flex;gap:14px;align-items:baseline}
  .ctable td::before{content:attr(data-label);flex:0 0 40%;color:var(--ink-soft);font-size:.82rem;line-height:1.4}
  .ctable td[data-label="."]::before{display:none}
  .ctable td[data-label="."]{padding-top:10px;font-weight:700}
  .section-dark .ctable td::before{color:rgba(226,238,255,.7)}
  .section-dark .ctable tr{border-bottom-color:rgba(255,255,255,.12)}
}

/* ============================================================
   SZYBKA ODPOWIEDZ (GEO)
   Blok, ktory wyszukiwarki i modele jezykowe wycinaja jako cytat.
   Nie dopisujemy tu nowej tresci — oznaczamy akapit, ktory i tak
   odpowiadal na pytanie z naglowka, zeby byl rozpoznawalny maszynowo.
   ============================================================ */
.quick-answer{background:var(--sky-50,#f1f8ff);border-left:4px solid var(--blue-600,#1e5fd0);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 26px;font-size:1.02rem;line-height:1.65;color:var(--navy-800,#13233f)}
.quick-answer strong{color:var(--navy-900,#0a1f4a)}
@media(max-width:560px){.quick-answer{padding:14px 16px;font-size:.98rem}}

/* ==========================================================================
   KONTRAST — przebieg calego serwisu, 15.08.2026
   Zmierzone automatycznie na 22 stronach (WCAG AA: 4.5 dla tekstu, 3.0 dla duzego).
   Kazda regula ma obok zmierzony kontrast PRZED poprawka.
   ========================================================================== */

/* Nazwa biezacej strony w okruszkach: #dde9f7 na #f8faff = 1.18.
   Praktycznie niewidoczna — na 10 podstronach. */
.breadcrumbs span,
.breadcrumbs > span:last-child { color: #55658a; }
.breadcrumbs a { color: #2f5fb0; }
/* UWAGA: w motywie v6 hero jest JASNY, wiec bialych okruszkow tu nie ma —
   bialy na bialym dawal kontrast 1.0. Bialy tekst tylko tam, gdzie hero
   naprawde jest ciemny, czyli poza v6. */
body:not(.theme-v6):not(.home-v6) .hero .breadcrumbs span,
body:not(.theme-v6):not(.home-v6) .hero-simple .breadcrumbs span { color: rgba(255,255,255,.85); }
body:not(.theme-v6):not(.home-v6) .hero .breadcrumbs a,
body:not(.theme-v6):not(.home-v6) .hero-simple .breadcrumbs a { color: #fff; }
body.theme-v6 .hero .breadcrumbs span,
body.theme-v6 .hero-simple .breadcrumbs span { color: #55658a; }
body.theme-v6 .hero .breadcrumbs a,
body.theme-v6 .hero-simple .breadcrumbs a { color: #2f5fb0; }

/* Pigulki kroku procesu maja jasne tlo, a tekst byl bialy: 1.07. */
/* `.pstep` to jasna pigulka. Bialy tekst byl dziedziczony z ciemnego pasa,
   w ktorym te pigulki kiedys stały. Wysoka specyficznosc, bo przegrywalo. */
.pstep, .pstep span, .process-steps-mini .pstep,
body.theme-v6 .pstep, body.theme-v6 .pstep span,
body.theme-v6 .process-steps-mini .pstep,
body.theme-v6 .process-steps-mini .pstep span,
body.home-v6 .pstep, body.home-v6 .pstep span { color: #13233f; }
.pstep-free { color: #0f7a52; }
.pstep-arrow { color: #7787a8; }

/* `.badge--light` — #eaf4ff na #f8faff = 1.06. Jasnoszara pigulka bez tekstu. */
.badge--light { background: #e4edff; color: #22407a; border: 1px solid #cfdcf5; }

/* Gwiazdki. Zloto na jasnym tle nie przechodzi 4.5 przy zadnym odcieniu, wiec
   ocena jest zawsze podana tez liczba i przez aria-label — glify sa dekoracja. */
.stars, .ct-stars, .proof-stars, .tcard-stars, .hero-proof-stars, .review-stars,
.zp-stars, .h6-stars,
.trust-rating .stars, .reviews-summary .stars { color: #dfa008; }
.section-dark .stars, .section-dark .tcard-stars, .section-dark .review-stars,
.footer .stars, .hero .stars { color: #ffd36b; }

/* Bialy tekst na jasnoniebieskiej plakietce ceny: 2.65. */
.pricing-badge { background: #1552a8; color: #fff; }

/* Zielona etykieta "Bezplatny" na jasnozielonym tle: 3.1. */
.ebook-tag.free { color: #0b6b47; background: #d8f3e6; }

/* Bialy z alfa .88 na niebieskim pasie: 4.37 przy progu 4.5. */
.h6-band p, .h6-band .microcopy, .cta-band p { color: #fff; }

/* Tabele na waskich ekranach: etykieta zajmuje 40% szerokosci, wiec dluga
   nierozdzielna tresc (adres e-mail, numer telefonu) rozpychala wiersz poza
   ekran — zmierzone na /kontakt/: 449 px tresci w 361 px kontenera.
   `min-width:0` pozwala elastycznemu dziecku sie skurczyc, `overflow-wrap`
   lamie dlugie ciagi. `.ctable-wrap` zostaje jako bezpiecznik. */
.ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  .ctable td{min-width:0}
  .ctable td::before{min-width:0;overflow-wrap:anywhere}
  .ctable td > *,.ctable td{overflow-wrap:anywhere;word-break:break-word}
}

/* ============================================================
   CELE DOTYKOWE W STOPCE — 16.08.2026
   Linki w stopce mialy 24 px wysokosci i 9 px odstepu. WCAG 2.2 AA (2.5.8)
   przechodzi dzieki wyjatkowi na odstep, ale na telefonie to nadal linia tekstu,
   w ktora trzeba celowac kciukiem. Podnosimy do 40 px tylko na dotyku i tylko
   w kolumnach linkow — spis miast (34 pozycje) zostaje gesty, bo 40 px na
   kazdy chip dolozyloby ~700 px do i tak dlugiej strony, a chipy plyna
   poziomo i tak przechodza prog 2.5.8.
   ============================================================ */
@media (max-width: 820px) {
  .footer-links a,
  .footer-clean-grid > div:not(.footer-brand) a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  .footer-links { gap: 2px; }
  .footer-clean-grid > div:not(.footer-brand) { gap: 2px; }

  /* Katalog przedmiotow i spis miast: powiekszamy pole klikniecia paddingiem,
     nie wysokoscia wiersza — uklad zostaje poziomy. */
  .footer-links-sm a { min-height: 38px; }
  .footer-cities-list { gap: 4px 14px; }
  .footer-cities-list a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ============================================================
   RUNDA 13 - 2026-08-16: warstwa wizualna
   Cel: mniej scian tekstu, wiecej czytelnej struktury i ruchu.
   Wszystko na CSS wspoldzielonym, zeby dzialalo na 127 stronach
   bez ruszania markupu (speakable, zdarzenia GA4 i schema zostaja).
   ============================================================ */

/* --- reveal ------------------------------------------------
   Byl wylaczony na no-op od v4. Wracamy do subtelnego wejscia,
   ale wylacznie na transform i opacity, wiec CLS sie nie rusza.
   Hero jest wykluczone w cognito-shared.js, wiec LCP bez zmian. */
.has-js [data-reveal]{opacity:1;transform:translateY(14px);transition:transform .52s var(--ease)}
.has-js [data-reveal].is-visible{transform:none}
.has-js .hero [data-reveal],.has-js .hero-simple [data-reveal],
.has-js .hero [data-reveal].is-visible,.has-js .hero-simple [data-reveal].is-visible{transform:none;transition:none}

/* --- quick-answer ------------------------------------------
   Blok istnieje dla speakable i wyciagania odpowiedzi przez AI,
   wiec caly tekst zostaje w DOM. Zmienia sie tylko hierarchia:
   pierwsze zdanie czyta sie jak odpowiedz, reszta jak przypis. */
.quick-answer{
  background:linear-gradient(180deg,#fff,var(--sky-50,#f1f8ff));
  border:1px solid var(--line,#e8eef9);
  border-left:4px solid var(--blue-600,#1e5fd0);
  border-radius:0 14px 14px 0;
  padding:20px 24px;
  margin:0 0 26px;
  font-size:.95rem;
  line-height:1.62;
  color:var(--ink-soft,#54648a);
  box-shadow:0 1px 2px rgba(11,28,61,.04),0 10px 26px rgba(11,28,61,.05);
}
.quick-answer strong{
  display:block;
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:1.14rem;
  line-height:1.32;
  letter-spacing:-.015em;
  color:var(--navy-900,#0a1f4a);
  margin:0 0 7px;
}
@media(max-width:560px){
  .quick-answer{padding:16px 18px;font-size:.92rem}
  .quick-answer strong{font-size:1.02rem;margin-bottom:6px}
}

/* --- cennik -------------------------------------------------
   Cena to powod wejscia na te strone, wiec dostaje wlasna skale. */
.ctable .ctable-num{font-size:1.22rem;letter-spacing:-.02em;line-height:1.1}
.ctable tbody tr{transition:background .18s var(--ease)}
.ctable thead th{font-size:.76rem;letter-spacing:.08em}
@media(max-width:720px){
  .ctable .ctable-num{font-size:1.3rem}
  .ctable tr{padding:14px 0}
}

/* --- pasek dowodow ------------------------------------------
   Liczby sa statyczne z premedytacja: licznik animowany na cenie
   pokazywal kiedys "od 17 zl" zamiast 99 zl. Nie wraca. */
/* Zawezone do siatki: .quick-answer siedzi w tej samej sekcji i jego
   nagłowek przejmowal ten rozmiar. */
.proof-strip-grid strong{font-size:1.45rem;letter-spacing:-.02em}
.proof-strip-grid>div{transition:background .2s var(--ease)}
.proof-strip-grid>div:hover{background:var(--sky-50,#f1f8ff)}

/* --- karty --------------------------------------------------
   Jeden spojny gest podniesienia zamiast kilku roznych. */
.card,.tcard,.quote-card,.glass-card{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card:hover,.tcard:hover,.quote-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(11,28,61,.05),0 18px 38px rgba(11,28,61,.09)}
.btn:active{transform:translateY(1px)}

/* --- FAQ ----------------------------------------------------
   Plynne rozwijanie zamiast skoku. */
.faq-item .faq-answer{transition:max-height .28s var(--ease),opacity .22s var(--ease)}
.faq-question span:last-child{transition:transform .2s var(--ease)}
.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}

@media(prefers-reduced-motion:reduce){
  .has-js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .card,.tcard,.quote-card,.glass-card,.proof-strip-grid>div,.ctable tbody tr,
  .faq-item .faq-answer,.faq-question span:last-child{transition:none!important}
  .card:hover,.tcard:hover,.quote-card:hover{transform:none}
}

/* Pasek CTA na telefonie: etykieta "Umow lekcje probna 0 zl" jest jedna dla
   calej strony (runda 12, 586 przyciskow), wiec skracac jej nie mozna.
   Zamiast tego przycisk ma prawo urosnac i domykac tekst w srodku,
   zamiast wypuszczac go pod tlo. */
.sticky-mobile-cta{align-items:stretch}
.sticky-cta-primary{
  min-width:0;
  padding:9px 12px;
  line-height:1.18;
  text-align:center;
  font-size:clamp(.86rem,3.5vw,1rem);
}
.sticky-cta-phone{font-size:.92rem;padding:0 13px}

/* --- Przycisk telefonu: koniec z pływaniem nad treścią --------------------
   Przycisk byl `position:fixed` w prawym dolnym rogu i zaslanial to, co
   akurat tam wypadlo. Zmierzone na /informatyka/: przykrywal link
   "Zostaw numer, oddzwonimy", czyli jedna z dwoch drog konwersji.
   Na telefonie numer jest juz widoczny w dolnym pasku (.sticky-cta-phone),
   wiec pływajacy przycisk jest tam zbedny — zostaje tylko na desktopie. */
@media(max-width:820px){
  .fab-call{display:none!important}
}

/* --- dwie drogi do lekcji probnej ----------------------------------------
   Jeden wzorzec na calej stronie: 1) rezerwujesz sam w kalendarzu,
   2) zostawiasz numer i oddzwaniamy. Do 16.08 wiekszosc podstron dawala
   wylacznie formularz oddzwonienia — droga "zrob to sam" w ogole nie istniala
   na 54 z 61 stron z formularzem. */
.trial-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
  margin-top:26px;
}
.trial-opt{
  position:relative;
  background:var(--paper,#fff);
  border:1px solid var(--line,#e8eef9);
  border-radius:var(--radius,16px);
  padding:26px 24px 24px;
  box-shadow:0 1px 2px rgba(11,28,61,.04),0 10px 26px rgba(11,28,61,.05);
}
.trial-opt-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--sky-50,#f1f8ff);color:var(--blue-600,#1e5fd0);
  font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;
  margin-bottom:12px;
}
.trial-opt h3{margin:0 0 6px;font-family:'Sora',sans-serif;font-size:1.18rem;line-height:1.25;color:var(--navy-900,#0a1f4a)}
.trial-opt-lead{margin:0 0 14px;color:var(--ink-soft,#54648a);font-size:.95rem;line-height:1.55}
.trial-opt-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.trial-opt-list li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.45;color:var(--navy-800,#13233f)}
.trial-opt-list li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:16px;height:16px;border-radius:50%;
  background:var(--sky-50,#f1f8ff);
  box-shadow:inset 0 0 0 1px rgba(30,95,208,.28);
}
.trial-opt-list li::after{
  content:"";position:absolute;left:5px;top:.62em;
  width:5px;height:8px;border:solid var(--blue-600,#1e5fd0);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.trial-opt-cta{margin-top:4px}
/* Formularz w drugiej karcie nie ma juz wlasnego panelu ani naglowka. */
.trial-opt form{margin:0}
.trial-opt .form-trust,.trial-opt .submit-note{margin:10px 0 0;font-size:.84rem;color:var(--ink-soft,#54648a)}

@media(max-width:820px){
  .trial-two{grid-template-columns:1fr;gap:16px;margin-top:22px}
  .trial-opt{padding:22px 18px 20px}
}

/* --- siatka korepetytorow ------------------------------------------------
   Zastapila karuzele z biogramami po ~300 znakow kazdy. Ten sam uklad co na
   stronie glownej: zdjecie, imie, jedna linia, tagi przedmiotow. */
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:26px}
.people-card{
  background:var(--paper,#fff);border:1px solid var(--line,#e8eef9);
  border-radius:var(--radius,16px);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,28,61,.04),0 8px 22px rgba(11,28,61,.05);
  display:flex;flex-direction:column;
}
.people-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.people-card-body{padding:16px 16px 18px}
.people-card h3{margin:0 0 4px;font-family:'Sora',sans-serif;font-size:1.02rem;line-height:1.3;color:var(--navy-900,#0a1f4a)}
.people-card p{margin:0 0 10px;font-size:.88rem;line-height:1.5;color:var(--ink-soft,#54648a)}
.people-tags{display:flex;flex-wrap:wrap;gap:6px}
.people-tags span{
  font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:999px;
  background:var(--sky-50,#f1f8ff);color:var(--blue-600,#1e5fd0);
  border:1px solid rgba(30,95,208,.16);
}
@media(max-width:560px){
  .people-grid{grid-template-columns:1fr 1fr;gap:12px}
  .people-card-body{padding:12px 12px 14px}
  .people-card h3{font-size:.92rem}
  .people-card p{font-size:.82rem}
}

/* CTA w karcie "zarezerwuj sam" musi wygladac tak samo wszedzie. Bazowy
   `.btn-accent` w tym pliku ma blady blekit, a mocny granat dokłada dopiero
   cognito-v6.css — ktorego strona glowna nie laduje. Stad wlasny styl. */
.trial-opt-cta,
.trial-opt .form-submit{
  background:linear-gradient(135deg,#2563eb,#4f46e5)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 8px 24px rgba(37,99,235,.28);
}
.trial-opt-cta:hover,
.trial-opt .form-submit:hover{
  background:linear-gradient(135deg,#1d4ed8,#4338ca)!important;
  color:#fff!important;
}

/* Tabela porownawcza: dwie rownorzedne kolumny, bez kolumny-etykiety. */
.ctable-compare td{width:50%}
.ctable-compare .ctable-no,.ctable-compare .ctable-yes{display:inline-block;width:1.1em;font-weight:800}
.ctable-compare thead th:first-child{color:#a33}
@media(max-width:720px){
  .ctable-compare td{width:auto}
  .ctable-compare td::before{flex:0 0 42%;font-weight:600}
}

/* Lista miast jako klikalne pigulki zamiast akapitu-wyliczanki.
   26 nazw stalo w prozie, a kazde miasto ma wlasna strone. */
.city-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.city-chips a{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;
  border-radius:999px;background:var(--sky-50,#f1f8ff);
  border:1px solid rgba(30,95,208,.16);
  color:var(--blue-600,#1e5fd0);font-size:.88rem;font-weight:600;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.city-chips a:hover{background:#e4edff;border-color:rgba(30,95,208,.34)}
@media(prefers-reduced-motion:reduce){.city-chips a{transition:none}}

/* Tabela "nazwa + opis": na telefonie powtarzana etykieta kolumny zabierala
   40% szerokosci i sciskala opis do kilku slow w wierszu. Tutaj wiersz czyta
   sie jak haslo ze slownika: nazwa u gory, opis pod nia na pelnej szerokosci. */
@media(max-width:720px){
  .ctable-def td{display:block;padding:3px 16px}
  .ctable-def td::before{display:none}
  .ctable-def td[data-label="."]{padding-top:14px;font-size:1rem}
  .ctable-def td:last-child{padding-bottom:14px;color:var(--ink-soft,#54648a)}
  .ctable-def tr{padding:4px 0}
}

/* --- elementy ukladu musza moc sie zwezic --------------------------------
   Dziecko gridu i flexa ma domyslnie `min-width:auto`, czyli nie schodzi
   ponizej szerokosci min-content swojej tresci. Kiedy tresc jest szersza niz
   ekran, element rozpycha sciezke, a nadrzedny `overflow:hidden` obcina to,
   co wystaje — tekst po prostu znika, bez paska przewijania.
   Zmierzone na 320px przy czcionce 22px: karta oferty w hero miala 364px
   w kontenerze 300px, przez co ginal naglowek i lista korzysci. */
.hero-grid > *,
.hero-visual > *,
.conversion-hero-grid > *,
.offer-card,
.visual-card,
.dashboard-card,
.offer-list > *,
.offer-list > div > *,
.dashboard-row > * { min-width: 0; }

/* --- znaczniki tak/nie rysowane w CSS ------------------------------------
   Ptaszek i krzyzyk byly znakami Unicode (U+2713 / U+2715). Ani Inter, ani
   Sora ich nie zawieraja, wiec przegladarka siegala po font zastepczy —
   a ten na czesci urzadzen albo wyglada obco, albo pokazuje pusty prostokat.
   Do tego znak w pliku CSS zalezy od kodowania, ktore serwer moze nadpisac.
   Ksztalt rysowany obramowaniem nie zalezy ani od fontu, ani od kodowania. */
.mark-yes,
.mark-no{
  position:relative;display:inline-block;
  width:1em;height:1em;vertical-align:-.12em;flex:none;
}
/* ptaszek: dwa boki kwadratu obrocone o 45 stopni */
.mark-yes::before{
  content:"";position:absolute;left:.28em;top:.06em;
  width:.32em;height:.62em;
  border:solid currentColor;border-width:0 .16em .16em 0;
  transform:rotate(45deg);
}
/* krzyzyk: dwie kreski na krzyz */
.mark-no::before,
.mark-no::after{
  content:"";position:absolute;left:.06em;top:.42em;
  width:.88em;height:.16em;border-radius:1px;
  background:currentColor;
}
.mark-no::before{transform:rotate(45deg)}
.mark-no::after{transform:rotate(-45deg)}

/* Listy "zwykle vs Cognito" — ten sam ksztalt zamiast znaku z fontu. */
.diff-list-bad li::before,
.diff-list-good li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:1em;height:1em;
}
.diff-list-good li::before{
  border:solid var(--sky-300,#8ad4f7);border-width:0 0 .16em .16em;
  height:.5em;width:.8em;transform:rotate(-45deg);top:.28em;
}
.diff-list-bad li::before{
  background:
    linear-gradient(45deg,transparent 42%,#ff8d8d 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,#ff8d8d 42% 58%,transparent 58%);
}

/* CTA w treści wpisu — bez tego pierwszy link do /zapisy/ był w medianie
   4 116 px od góry, czyli pięć ekranów telefonu poniżej pierwszego akapitu. */
.post-inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0}
.post-inline-cta-note{font-size:.9rem;color:var(--ink-soft)}
.post-product-link{margin:22px 0;color:var(--ink-soft)}

/* === WYROWNANIE KART W RZEDZIE ============================================
   Karty w siatce maja rozna dlugosc tekstu, wiec wszystko, co lezy PO tym
   tekscie (plakietka, wynik, podpis autora), ladowalo na roznej wysokosci.
   Zmierzone na 1280 px: cytaty rozjezdzaly sie o 50 px, plakietki
   korepetytorow o 49 px, opisy krokow o 26 px. Na oko wyglada to jak
   niedokonczony uklad, mimo ze nic nie wystaje poza ekran.

   Lek jest jeden: karta to kolumna flex, zmienny tekst rosnie (`flex:1`),
   a element koncowy dostaje `margin-top:auto` i przykleja sie do dolu.
   Dzieki temu wszystkie karty w rzedzie maja stopke na tej samej wysokosci
   niezaleznie od dlugosci tresci. Na waskim ekranie karty i tak sa jedna pod
   druga, wiec regula nic tam nie zmienia. */

/* opinie */
.tcard { height: 100% }
.tcard blockquote { flex: 1 1 auto }
.tcard-result { margin-top: auto }

/* korepetytorzy — karta z podpisem i plakietka */
.tutor-card { height: 100% }
.tutor-card-bio { flex: 1 1 auto }

.people-card { display: flex; flex-direction: column; height: 100% }
.people-card-body { display: flex; flex-direction: column; flex: 1 1 auto }
.people-card p { flex: 1 1 auto }
.people-tags { margin-top: auto }

/* kroki „jak to dziala" i karty przedmiotow */
.steps-grid > .card { display: flex; flex-direction: column; height: 100% }
.steps-grid > .card > p:last-child { margin-bottom: 0 }
.subject-card-link { align-items: stretch }
.subject-card-content { display: flex; flex-direction: column; flex: 1 1 auto }
.subject-card-desc { flex: 1 1 auto }
.subject-card-result { margin-top: auto }
.subject-card-arrow { align-self: center }

/* stopka — kolumny maja rozne naglowki, listy musza zaczynac sie rowno */
.footer-grid > div { display: flex; flex-direction: column }

/* --- rezerwacja miejsca na dwuwierszowy naglowek -------------------------
   Reszta rozjazdu bierze sie stad, ze naglowek jednej karty miesci sie
   w jednej linii, a sasiedniej w dwoch ("Jakub Juszczak" vs
   "Barbara Krzyzanowska", "Arkusz na wejscie" vs "Najtansze punkty najpierw").
   Wszystko pod nim przesuwa sie wtedy o wysokosc linii — zmierzone 26 px.
   Rezerwujemy dwa wiersze na sztywno, wiec akapit startuje rowno niezaleznie
   od dlugosci imienia czy tytulu kroku. Przy jednym wierszu zostaje pusty
   pasek, ale rytm siatki jest wazniejszy niz te kilkanascie pikseli.
   Ponizej 700 px karty leza jedna pod druga i rezerwacja jest zbedna. */
@media (min-width: 700px) {
  .tutor-card-name { min-height: calc(2 * 1.25rem * 1.25) }
  .steps-grid > .card > h3 { min-height: calc(2em * 1.25) }
}

/* --- karty z linkiem na koncu ---------------------------------------------
   „Strona matematyki →" i „Strona informatyki →" wisialy 29 px od siebie,
   bo akapit nad nimi ma inna dlugosc. Link ma byc stopka karty. */
.grid-2 > .card,
.grid-3 > .card { display: flex; flex-direction: column; height: 100% }
.card > p:last-child:has(> a.text-link) { margin-top: auto; margin-bottom: 0 }

/* Okladka e-booka i pierwszy wiersz opisu maja startowac na tej samej wysokosci.
   `.product-meta` ma `margin:16px 0`, wiec prawa kolumna zaczynala sie 16 px
   nizej niz obrazek. Na waskim ekranie kolumny sa jedna pod druga i odstep
   nad opisem jest potrzebny — zerujemy go tylko w ukladzie dwukolumnowym. */
@media (min-width: 860px) {
  .product-hero > div > .product-meta:first-child { margin-top: 0 }
}

/* ---------- WYGASZANIE PROMOCJI (klasa ustawiana w cognito-shared.js) ----------
   Po SITE_OFFER.campaign_deadline strona przestaje pokazywac deadline
   i cene referencyjna. Cena regularna 99 zl zostaje nietknieta. */
/* Pasek naboru NIE jest promocja (2026-09-12) — zostaje po 30.09.
   Chowamy tylko elementy stricte promocyjne ponizej. */
html.cognito-promo-expired .pricing-reference{display:none !important}
html.cognito-promo-expired .promo-deadline{display:none !important}

/* Tablet (681-900px): karta zgody zostawala w ukladzie 2-kolumnowym, w ktorym
   .cognito-banner-footer nachodzil na przycisk "Dostosuj ustawienia" i
   przechwytywal klikniecia — na tablecie nie dalo sie otworzyc ustawien.
   Wykryte testem krytycznych sciezek 2026-09-04 (tablet-portrait 768x1024). */
@media(max-width:900px){
  /* Uklad pionowy jest tu celowy (patrz wyzej), wiec karta jest wyzsza niz na desktopie.
     Ograniczamy ja tak samo jak na mobile, zeby nie mogla rosnac bez konca przy
     dluzszej tresci albo wiekszej czcionce systemowej. */
  .cookie-banner-card{display:block;max-height:240px;overflow-y:auto}
  .cookie-banner-actions{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
  .cookie-banner-footer{margin-top:8px}
}