/* Matmoo – wspólny wygląd strony głównej i podstron (o Matmoo, dla nauczyciela, polityka prywatności). */
:root{
  --ink:#3B4A54;
  --ink-deep:#2F3C45;
  --ink-soft:#5B6F7A;
  --paper:#F3EFE6;
  --paper-line:#DED6C4;
  --card:#FBFAF5;
  --chalk:#B0805F;
  --chalk-soft:#D6B393;
  --green:#6B4530;
  --white:#FFFFFF;
  --max:1120px;
  --radius:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Quicksand',sans-serif;
  color:var(--ink);
  letter-spacing:-0.01em;
  margin:0;
}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
img,svg{max-width:100%;display:block;}
ul{margin:0;}
a:focus-visible,button:focus-visible,label:focus-within{
  outline:3px solid var(--green);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

/* Sekcje „ruled” miały tło w linie zeszytu – usunięte (gryzło się z podziałami w FAQ i listach). */
.ruled{background:var(--paper);}

/* ---------- header ---------- */
header{
  padding:18px 0;
  border-bottom:1px solid var(--paper-line);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:50;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand-logo{height:28px;width:auto;}
nav{display:flex;align-items:center;justify-content:space-between;gap:26px;position:relative;width:100%;}
.links{display:flex;align-items:center;gap:24px;list-style:none;padding:0;margin:0;}
.nav-link{
  background:none;border:none;padding:0;margin:0;
  font-family:'Karla',sans-serif;font-size:0.95rem;font-weight:500;
  color:var(--ink);cursor:pointer;
}
.nav-link:hover{color:var(--green);}
.nav-cta{
  display:inline-block;
  background:var(--ink);
  color:var(--white);
  padding:10px 20px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--ink-deep);}
#nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.burger{
  display:none;
  width:38px;height:38px;
  border-radius:6px;
  border:1px solid var(--paper-line);
  background:var(--card);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.burger svg{width:18px;height:18px;}
@media (max-width:820px){
  .links{
    position:absolute;
    top:calc(100% + 18px);left:-24px;right:-24px;
    flex-direction:column;
    align-items:flex-start;
    background:var(--card);
    border-bottom:1px solid var(--paper-line);
    padding:18px 24px;
    gap:16px;
    display:none;
  }
  #nav-toggle:checked ~ .links{display:flex;}
  .burger{display:flex;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:6px;
  font-family:'Karla',sans-serif;
  font-weight:600;
  font-size:0.98rem;
  text-decoration:none;
  border:1.5px solid transparent;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.btn-primary{background:#9C6A4A;color:var(--white);}
.btn-primary:hover{background:#86573A;}
.btn-dark{background:var(--ink);color:var(--white);}
.btn-dark:hover{background:var(--ink-deep);}
.btn-outline{border-color:var(--paper-line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-rozgrzej{background:#E3B48F;border-color:#E3B48F;color:#2F3C45;font-weight:700;}
.btn-rozgrzej:hover{background:#D9A277;border-color:#D9A277;}
.btn-ghost{border-color:#7D8F9A;color:var(--white);}
.btn-ghost:hover{border-color:var(--white);}

/* ---------- hero ---------- */
.hero{
  padding:70px 0 84px;
  background:var(--card);
  color:var(--ink);
  border-bottom:1px solid var(--paper-line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:52px;
  align-items:center;
}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-block;
  color:var(--chalk);
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:16px;
}
.hero h1{
  color:var(--ink-deep);
  font-size:clamp(2rem,4.6vw,3.1rem);
  line-height:1.12;
  font-weight:700;
}
.hero p.lead{
  margin:20px 0 0;
  font-size:1.12rem;
  max-width:50ch;
  color:var(--ink-soft);
}
.who{
  margin-top:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:560px;
}
@media (max-width:520px){.who{grid-template-columns:1fr;}}
.who button,.who a{
  text-align:left;
  border-radius:var(--radius);
  padding:16px 18px;
  cursor:pointer;
  font-family:'Karla',sans-serif;
  border:1.5px solid transparent;
}
.who .who-title{display:block;font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.08rem;}
.who .who-sub{display:block;font-size:0.88rem;margin-top:2px;}
.who-student{background:#9C6A4A;color:var(--white);}
.who-student:hover{background:#86573A;}
.who-student .who-sub{color:rgba(255,255,255,0.88);}
.who .who-teacher{background:var(--ink);color:var(--white);border-color:var(--ink);}
.who .who-teacher:hover{background:var(--ink-deep);}
.who-teacher .who-sub{color:#B9C2CF;}

.board{
  background:var(--green);
  border-radius:var(--radius);
  padding:28px 26px;
  color:var(--white);
  box-shadow:0 18px 40px -14px rgba(0,0,0,0.5);
}
/* ---- Motyw graficzny: symbole matematyczne i krowa w okularach ---- */
.math-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.math-bg span{
  position:absolute;font-family:'Cambria Math','STIX Two Math','Times New Roman',serif;line-height:1;
  background:linear-gradient(135deg,#8E9AA2 10%,var(--chalk) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0.28;animation:unos 9s ease-in-out infinite;
}
.math-bg span:nth-child(2n){animation-duration:11s;animation-delay:-3s;}
.math-bg span:nth-child(3n){animation-duration:13s;animation-delay:-6s;}
@keyframes unos{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 4deg));}}
@media (prefers-reduced-motion:reduce){.math-bg span{animation:none;}}
.hero,#start{position:relative;overflow:hidden;}
.hero .wrap,#start .wrap{position:relative;z-index:1;}
.hero-art{display:flex;justify-content:center;}
.hero-fig{position:relative;margin:0;width:100%;max-width:470px;container-type:inline-size;animation:wejscie 0.9s ease-out both;}
.hero-art img{width:100%;height:auto;display:block;}
.haslo{position:absolute;left:50%;top:75%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Karla',sans-serif;font-size:4.7cqw;letter-spacing:0.01em;color:#5E6468;}
.haslo span{color:#C07A52;font-weight:700;}
@keyframes wejscie{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.hero-fig{animation:none;}}
/* Telefon/tablet: krowa nad nagłówkiem (mniejsza), żeby była widoczna od razu, a przyciski dalej mieściły się na pierwszym ekranie. */
@media (max-width:860px){.hero-art{order:-1;margin-bottom:14px;}.hero-fig{max-width:230px;}.hero-grid{gap:0;}}
@media (max-width:560px){.hero{padding-top:18px;}.hero-fig{max-width:150px;}}
@media (max-width:520px){.math-bg span.opc{display:none;}}
.board-head{display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;color:#E4CDB9;margin-bottom:10px;}
.board-tag{background:rgba(255,255,255,0.14);padding:3px 10px;border-radius:20px;font-weight:600;}
.board .step{
  font-family:'Quicksand',sans-serif;
  font-size:1.25rem;
  padding:7px 0;
  border-bottom:1px dashed rgba(255,255,255,0.2);
  display:flex;justify-content:space-between;align-items:center;
}
.board .step:last-of-type{border-bottom:none;color:var(--chalk-soft);font-weight:700;}
.board .tick{font-family:'Karla',sans-serif;font-size:0.8rem;color:#BFE3CB;font-weight:600;}
.board .cap{font-size:0.85rem;color:#E4CDB9;margin-top:14px;}

/* ---------- sections ---------- */
section{padding:72px 0;}
.section-head{max-width:64ch;margin-bottom:40px;}
.section-head h2{font-size:clamp(1.55rem,3vw,2.1rem);font-weight:700;}
.section-head p{margin:14px 0 0;color:#4B5768;}

/* what's inside */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:820px){.pillars{grid-template-columns:1fr;}}
.pillar{
  background:var(--card);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:26px 24px;
}
.pillar-icon{
  width:42px;height:42px;border-radius:10px;
  background:#EFE3D6;color:var(--green);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.pillar-icon svg{width:22px;height:22px;}
.pillar h3{font-size:1.15rem;margin-bottom:8px;}
.pillar p{margin:0;color:#4B5768;font-size:0.97rem;}

/* ---------- zones ---------- */
.zone-label{
  display:inline-block;
  font-size:0.8rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;margin-bottom:16px;
}
.zone-student{background:var(--paper);border-top:1px solid var(--paper-line);}
.zone-student .zone-label{background:#EFE3D6;color:var(--green);}
.zone-teacher{background:var(--ink);color:var(--white);}
.zone-teacher .zone-label{background:rgba(255,255,255,0.12);color:var(--chalk-soft);}
.zone-teacher .section-head h2{color:var(--white);}
.zone-teacher .section-head p{color:#C3CBD5;}

.zone-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:start;}
@media (max-width:900px){.zone-grid{grid-template-columns:1fr;}}

.features{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:600px){.features{grid-template-columns:1fr;}}
.feature{border-radius:var(--radius);padding:20px 20px 18px;}
.zone-student .feature{background:var(--card);border:1px solid var(--paper-line);}
.zone-teacher .feature{background:var(--ink-soft);border:1px solid #6A7E89;}
.feature h3{font-size:1.04rem;margin-bottom:6px;}
.zone-teacher .feature h3{color:var(--white);}
.feature p{margin:0;font-size:0.94rem;color:#4B5768;}
.zone-teacher .feature p{color:#DCE2E8;}
.soon{
  display:inline-block;vertical-align:middle;margin-left:6px;
  font-family:'Karla',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.03em;
  padding:2px 8px;border-radius:20px;
  background:#EADBCD;color:var(--green);
}
.zone-teacher .soon{background:var(--chalk-soft);color:var(--ink);}

.how{border-radius:var(--radius);padding:24px 24px 8px;}
.zone-student .how{background:var(--card);border:1px solid var(--paper-line);}
.zone-teacher .how{background:var(--ink-deep);border:1px solid #56697A;}
.how h3{font-size:1.1rem;margin-bottom:6px;}
.zone-teacher .how h3{color:var(--white);}
.how ol{list-style:none;padding:0;margin:0;counter-reset:s;}
.how li{
  counter-increment:s;
  display:grid;grid-template-columns:34px 1fr;gap:12px;
  padding:14px 0;border-top:1px solid var(--paper-line);
  font-size:0.96rem;
}
.zone-teacher .how li{border-top-color:#4D606E;color:#D5DCE3;}
.how li:first-child{border-top:none;}
.how li::before{
  content:counter(s);
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:0.9rem;
  background:var(--chalk);color:var(--ink);
}
.how li strong{display:block;color:var(--ink);}
.zone-teacher .how li strong{color:var(--white);}
.zone-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* progress preview (teacher) */
.preview{
  margin-top:18px;
  background:var(--card);color:var(--ink);
  border-radius:var(--radius);
  padding:18px 18px 14px;
}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;}
.preview-head strong{font-family:'Quicksand',sans-serif;font-size:1rem;}
.preview-head span{font-size:0.78rem;color:var(--ink-soft);white-space:nowrap;}
.prow{display:grid;grid-template-columns:1fr 110px 44px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--paper-line);font-size:0.9rem;}
.prow:first-of-type{border-top:none;}
.bar{height:8px;border-radius:6px;background:#EDE5D8;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--chalk);border-radius:6px;}
.prow b{text-align:right;font-weight:700;}
.preview-note{font-size:0.8rem;color:var(--ink-soft);margin-top:8px;}

/* ---------- chapters ---------- */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.levels{grid-template-columns:1fr;}}
.level{
  background:var(--card);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
  padding:22px 22px 18px;
}
.level h3{font-size:1.1rem;margin-bottom:2px;}
.level .muted{font-size:0.86rem;color:var(--ink-soft);margin-bottom:14px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:inline-block;
  font-size:0.86rem;
  padding:6px 11px;
  border-radius:20px;
  border:1px solid var(--paper-line);
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
}
.chip:hover{border-color:var(--chalk);color:var(--green);}
.level-actions{margin-top:16px;font-size:0.9rem;}
.level-actions a{color:var(--green);font-weight:600;}

/* about */
.about-grid{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;}
@media (max-width:640px){.about-grid{grid-template-columns:1fr;}}
.avatar{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius);
  background:linear-gradient(155deg,var(--green),var(--ink));
  display:flex;align-items:center;justify-content:center;
  color:var(--chalk-soft);font-family:'Quicksand',sans-serif;font-size:2.3rem;font-weight:700;
  position:relative;overflow:hidden;
}
/* Zdjęcie pionowe 2:3 – kadr jak na szkicu: pełna szerokość (bez 2,5% z boków), od góry do połowy swetra */
.avatar img{position:absolute;width:108.7%;max-width:none;height:auto;left:-2.7%;top:-2.9%;}
.avatar:has(img){aspect-ratio:920/865;}
.about-text p{color:#39424F;}

/* FAQ */
.faq{max-width:760px;}
details{border-bottom:1px solid var(--paper-line);padding:18px 0;}
details:first-child{border-top:1px solid var(--paper-line);}
summary{
  cursor:pointer;
  font-family:'Quicksand',sans-serif;
  font-weight:600;
  font-size:1.02rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-size:1.3rem;color:var(--green);margin-left:16px;flex-shrink:0;}
details[open] summary::after{content:"–";}
details p{color:#4B5768;margin:12px 0 0;max-width:65ch;}

/* CTA */
.cta-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:760px){.cta-split{grid-template-columns:1fr;}}
.cta{border-radius:14px;padding:36px 32px;}
.cta h2{font-size:1.4rem;}
.cta p{margin:10px 0 22px;}
.cta-student{background:var(--green);color:var(--white);}
.cta-student h2{color:var(--white);}
.cta-student p{color:#EAD9CB;}
.cta-teacher{background:var(--ink);color:var(--white);}
.cta-teacher h2{color:var(--white);}
.cta-teacher p{color:#C3CBD5;}

footer{padding:36px 0 50px;border-top:1px solid var(--paper-line);font-size:0.88rem;color:#6B7280;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- linki w menu (na podstronach to zwykłe linki) ---------- */
a.nav-link{text-decoration:none;}

/* ---------- stopka ---------- */
.footer-grid{align-items:center;}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;}
.footer-links a{color:inherit;text-decoration:none;}
.footer-links a:hover{color:var(--ink);text-decoration:underline;}

/* ---------- strony-dokumenty (polityka prywatności, o Matmoo) ---------- */
.doc{padding:48px 0 64px;}
.doc-wrap{max-width:820px;}
.doc h1{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:6px;}
.doc h2{font-size:1.3rem;margin:34px 0 10px;}
.doc p{margin:0 0 12px;}
.doc a{color:var(--green);}
.doc-meta{color:var(--ink-soft);font-size:0.95rem;}
.doc-list{padding-left:22px;margin:0 0 12px;}
.doc-list li{margin:4px 0;}
.doc-table{overflow-x:auto;margin:6px 0 14px;border:1px solid var(--paper-line);border-radius:var(--radius);background:var(--card);}
.doc-table table{border-collapse:collapse;width:100%;min-width:560px;font-size:0.93rem;line-height:1.5;}
.doc-table th,.doc-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--paper-line);}
.doc-table th{font-family:'Quicksand',sans-serif;background:#EFE9DC;}
.doc-table tr:last-child td{border-bottom:0;}
@media (max-width:600px){.doc{padding:30px 0 44px;}.wrap{padding:0 16px;}}

/* ---------- podstrony ---------- */
.about-doc{margin:26px 0 8px;}
.about-doc h2{margin-top:0;}
.teacher-page{padding-top:56px;}
.teacher-page h1{font-size:clamp(1.8rem,4vw,2.4rem);color:inherit;margin:8px 0 12px;}
.teacher-page .features{grid-template-columns:1fr 1fr;}
@media (max-width:600px){.teacher-page .features{grid-template-columns:1fr;}}

/* ---------- strona główna: skrót ---------- */
.trust{font-size:0.95rem;color:var(--ink-soft);margin:14px 0 22px;}
a.who-teacher{text-decoration:none;}
.start-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:860px){.start-cards{grid-template-columns:1fr;}}
.start-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--paper-line);border-radius:14px;
  padding:22px 22px 20px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;}
.start-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(47,60,69,.45);}
.start-card h3{font-size:1.2rem;}
.start-card p{margin:0;flex:1;color:var(--ink-soft);font-size:0.97rem;}
.start-go{font-weight:700;color:var(--green);}
.teacher-points{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px;}
.teacher-points li{padding-left:26px;position:relative;color:#C3CBD5;}
.teacher-points li::before{content:"✓";position:absolute;left:0;color:var(--chalk-soft);font-weight:700;}
.teacher-points strong{color:var(--white);}
.level-more summary{cursor:pointer;font-weight:600;color:var(--green);margin:10px 0 4px;}
.level-more[open] summary{margin-bottom:8px;}
.level-actions{display:flex;gap:16px;flex-wrap:wrap;}
@media (max-width:640px){
  .doc-table{border:0;background:none;}
  .doc-table table{min-width:0;}
  .doc-table thead{display:none;}
  .doc-table tr{display:block;background:var(--card);border:1px solid var(--paper-line);border-radius:var(--radius);margin-bottom:10px;padding:4px 0;}
  .doc-table td{display:block;border:0;padding:6px 12px;}
  .doc-table td::before{content:attr(data-label);display:block;font-weight:700;font-size:0.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
}

/* znaczek „beta” przy Lekcjach w menu */
.nav-beta{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#B97A4E;color:#fff;border-radius:6px;padding:1px 5px;margin-left:3px;vertical-align:2px;}