/* =========================================================
   edufeeds.com — style.css
   Design system: "The1" (DESIGN.md) — light theme
   Concrete canvas + iron near-black type + 4 paint blocks.
   Flat: no shadows, no gradients, no elevation.
   ========================================================= */

:root{
  /* Colors */
  --color-the-green:#027b49;
  --color-the-pink:#f19ec8;
  --color-the-red:#fa4d43;
  --color-the-yellow:#fbb833;
  --color-concrete:#d9d9d9;
  --color-iron:#1f1f1f;
  --color-carbon:#000000;

  /* Typography */
  --font-kh-teka:'Archivo Narrow','Barlow Condensed','Roboto Condensed',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-system-sans-serif:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --text-caption:12px;   --leading-caption:1.2;
  --text-body:15px;      --leading-body:1.2;
  --text-body-sm:18px;   --leading-body-sm:1.1;
  --text-subheading:26px;--leading-subheading:1;
  --text-heading:60px;   --leading-heading:.8;
  --text-display:215px;  --leading-display:.7;

  --font-weight-regular:400;

  /* Spacing */
  --spacing-5:5px;   --spacing-6:6px;   --spacing-8:8px;   --spacing-10:10px;
  --spacing-11:11px; --spacing-14:14px; --spacing-15:15px; --spacing-19:19px;
  --spacing-20:20px; --spacing-24:24px; --spacing-30:30px; --spacing-40:40px;
  --spacing-50:50px; --spacing-100:100px;--spacing-130:130px;--spacing-170:170px;

  /* Layout */
  --page-max-width:1440px;
  --section-gap:40px;
  --card-padding:0px;
  --element-gap:10px;
  --gutter:20px;

  /* Radius */
  --radius-cards:0px;
  --radius-buttons:100px;
  --radius-tags:100px;

  /* Fluid display sizes */
  --display-fluid:clamp(56px,13.5vw,215px);
  --heading-fluid:clamp(38px,6.2vw,60px);
  --subheading-fluid:clamp(22px,3vw,26px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-concrete);
  color:var(--color-iron);
  font-family:var(--font-kh-teka);
  font-weight:var(--font-weight-regular);
  font-size:var(--text-body-sm);
  line-height:var(--leading-body-sm);
  letter-spacing:-.01em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
address{font-style:normal;}
::selection{background:var(--color-iron);color:var(--color-concrete);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--color-iron);color:var(--color-concrete);
  padding:var(--spacing-10) var(--spacing-20);
}
.skip-link:focus{left:var(--spacing-10);top:var(--spacing-10);}

:focus-visible{outline:2px solid var(--color-iron);outline-offset:3px;}

/* ---------- Layout primitives ---------- */
.wrap{
  width:100%;
  max-width:var(--page-max-width);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section{padding:var(--spacing-50) 0 var(--spacing-50);}
.section--tight{padding-bottom:0;}
.hairline{height:1px;background:var(--color-iron);width:100%;}
.hairline--full{margin:0;}
.mt-40{margin-top:var(--spacing-40);}

/* ---------- Type ---------- */
.display{
  font-size:var(--display-fluid);
  line-height:var(--leading-display);
  letter-spacing:-.06em;
  text-transform:uppercase;
  margin:var(--spacing-20) 0 var(--spacing-24);
}
.heading{
  font-size:var(--heading-fluid);
  line-height:var(--leading-heading);
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin:var(--spacing-10) 0 var(--spacing-30);
}
.subheading{
  font-size:var(--subheading-fluid);
  line-height:var(--leading-subheading);
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.eyebrow{
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.lead{
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.2;
  max-width:62ch;
}
.lead--narrow{max-width:52ch;}
.body-lg{font-size:var(--text-body-sm);line-height:1.2;}
.caption{
  font-family:var(--font-system-sans-serif);
  font-size:var(--text-caption);
  line-height:var(--leading-caption);
}

/* ---------- Pill button ---------- */
.pill{
  display:inline-block;
  background:var(--color-iron);
  color:var(--color-concrete);
  border:0;
  border-radius:var(--radius-buttons);
  padding:var(--spacing-10) var(--spacing-20);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:-.01em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .15s linear;
}
.pill:hover{opacity:.82;}
.pill--wide{width:100%;padding:var(--spacing-14) var(--spacing-20);text-align:center;}

.text-link{
  font-size:var(--text-body-sm);
  border-bottom:1px solid transparent;
  transition:border-color .15s linear;
}
.text-link:hover{border-color:var(--color-iron);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--color-concrete);
}
.header-inner{
  display:flex;align-items:center;gap:var(--spacing-20);
  min-height:72px;
}
.wordmark{display:flex;align-items:center;gap:var(--spacing-10);}
.wordmark__mark{
  width:32px;height:32px;flex:0 0 32px;
  background:var(--color-iron);color:var(--color-concrete);
  display:grid;place-items:center;
  font-size:20px;line-height:1;letter-spacing:-.03em;
}
.wordmark__text{
  font-size:var(--text-subheading);
  line-height:var(--leading-subheading);
  letter-spacing:-.03em;
}
.wordmark__dot{opacity:.55;}

.nav-desktop{display:none;gap:var(--spacing-24);margin-left:var(--spacing-30);}
.nav-link{
  font-size:var(--text-body-sm);
  letter-spacing:-.03em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.nav-link:hover,.nav-link.is-active{border-color:var(--color-iron);}

.header-cta{display:none;align-items:center;gap:var(--spacing-14);margin-left:auto;}
.header-cta__text{font-size:var(--text-body-sm);letter-spacing:-.03em;}

.burger{
  margin-left:auto;
  width:48px;height:48px;flex:0 0 48px;
  border:0;border-radius:var(--radius-buttons);
  background:var(--color-iron);
  display:grid;align-content:center;justify-items:center;gap:5px;
  cursor:pointer;padding:0;
}
.burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .18s linear,opacity .18s linear;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Expanded menu panel ---------- */
.menu-panel{
  position:fixed;inset:73px 0 0 0;z-index:99;
  background:var(--color-the-red);
  padding:var(--spacing-30) var(--gutter) var(--spacing-40);
  overflow:auto;
}
.menu-panel[hidden]{display:none;}
.menu-panel__mark{
  position:absolute;left:-4vw;bottom:-6vh;
  font-size:min(58vh,52vw);
  line-height:.7;letter-spacing:-.06em;
  color:var(--color-carbon);opacity:.16;
  pointer-events:none;user-select:none;
}
.menu-panel__nav{position:relative;display:grid;gap:var(--spacing-10);}
.menu-panel__nav a{
  font-size:clamp(30px,9vw,60px);
  line-height:.9;letter-spacing:-.04em;
  text-transform:uppercase;color:var(--color-iron);
}
.menu-panel__foot{
  position:relative;margin-top:var(--spacing-30);
  font-size:var(--text-body);text-transform:uppercase;color:var(--color-iron);
}

/* ---------- Hero ---------- */
.hero{padding:var(--spacing-30) 0 var(--spacing-50);}
.hero-grid{display:grid;gap:var(--spacing-40);}
.hero-copy .lead{margin-bottom:var(--spacing-24);}
.hero-points{display:grid;gap:var(--spacing-8);margin-bottom:var(--spacing-30);}
.hero-points li{
  font-size:var(--text-body-sm);line-height:1.2;
  padding-left:var(--spacing-20);position:relative;
}
.hero-points li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;background:var(--color-iron);
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-20);}

/* ---------- Forms ---------- */
.form-block{
  border:1px solid var(--color-iron);
  border-radius:var(--radius-cards);
  padding:var(--spacing-24);
  background:var(--color-concrete);
}
.form-block__title{
  font-size:var(--subheading-fluid);
  line-height:var(--leading-subheading);
  letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:var(--spacing-10);
}
.form-block__sub{font-size:var(--text-body);line-height:var(--leading-body);margin-bottom:var(--spacing-20);}
.form{display:grid;gap:var(--spacing-15);}
.field{display:grid;gap:var(--spacing-5);}
.field label{font-size:var(--text-body);text-transform:uppercase;letter-spacing:.02em;}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--color-iron);
  border-radius:0;
  padding:var(--spacing-11) var(--spacing-14);
  font-size:var(--text-body-sm);
  letter-spacing:-.02em;
}
.field textarea{resize:vertical;min-height:88px;}
.field select{appearance:none;background-image:none;cursor:pointer;}
.field input::placeholder,.field textarea::placeholder{color:#6a6a6a;}
.field.has-error input,.field.has-error select,.field.has-error textarea,
.check.has-error input{outline:2px solid var(--color-the-red);outline-offset:1px;}
.error{
  font-family:var(--font-system-sans-serif);
  font-size:var(--text-caption);line-height:var(--leading-caption);
  min-height:0;
}
.field.has-error .error,.check.has-error .error{color:#a32118;}

.check{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-10);align-items:start;}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--color-iron);}
.check label{
  font-family:var(--font-system-sans-serif);
  font-size:var(--text-caption);line-height:var(--leading-caption);
}
.check label a{border-bottom:1px solid var(--color-iron);}
.check .error{grid-column:1 / -1;}

.form-note{
  font-family:var(--font-system-sans-serif);
  font-size:var(--text-caption);line-height:var(--leading-caption);
}
.form-status{font-size:var(--text-body);line-height:var(--leading-body);}
.form-status.is-ok{background:var(--color-the-green);color:#fff;padding:var(--spacing-10) var(--spacing-14);}
.form-status.is-bad{background:var(--color-the-red);color:var(--color-iron);padding:var(--spacing-10) var(--spacing-14);}

/* ---------- Two column text ---------- */
.two-col{display:grid;gap:var(--spacing-24);margin-bottom:var(--spacing-40);}

/* ---------- Feature grid ---------- */
.grid-4,.grid-3{display:grid;gap:1px;background:var(--color-iron);border:1px solid var(--color-iron);}
.feature,.case,.teacher{background:var(--color-concrete);padding:var(--spacing-24);}
.feature__num{
  display:block;font-size:var(--text-subheading);letter-spacing:-.03em;
  line-height:1;margin-bottom:var(--spacing-14);opacity:.5;
}
.feature h4{
  font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:-.03em;text-transform:uppercase;margin-bottom:var(--spacing-10);
}
.feature p{font-size:var(--text-body);line-height:var(--leading-body);}

/* ---------- Steps ---------- */
.steps{display:grid;border-top:1px solid var(--color-iron);}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-20);
  padding:var(--spacing-24) 0;border-bottom:1px solid var(--color-iron);
}
.step__num{
  font-size:clamp(40px,8vw,60px);line-height:.8;letter-spacing:-.04em;opacity:.35;
}
.step__body h3{
  font-size:var(--subheading-fluid);line-height:var(--leading-subheading);
  letter-spacing:-.03em;text-transform:uppercase;margin-bottom:var(--spacing-8);
}
.step__body p{font-size:var(--text-body-sm);line-height:1.2;max-width:70ch;}
.step__meta{
  display:inline-block;margin-top:var(--spacing-10);
  border:1px solid var(--color-iron);border-radius:var(--radius-tags);
  padding:var(--spacing-5) var(--spacing-14);
  font-size:var(--text-body);text-transform:uppercase;
}

/* ---------- Levels (paint blocks) ---------- */
.levels{
  display:grid;
  border-top:1px solid var(--color-iron);
}
.level{border-bottom:1px solid var(--color-iron);}
.level--green{background:var(--color-the-green);}
.level--pink{background:var(--color-the-pink);}
.level--yellow{background:var(--color-the-yellow);}
.level--red{background:var(--color-the-red);}
.level__figure{
  display:grid;place-items:center;
  min-height:200px;
  margin:var(--spacing-20) var(--spacing-20) 0;
  background:var(--color-concrete);
}
.level__figure span{
  font-size:clamp(52px,9vw,86px);line-height:.7;letter-spacing:-.06em;
  text-align:center;color:var(--color-iron);
}
.level__foot{padding:var(--spacing-20);color:var(--color-iron);}
.level--green .level__foot{color:#fff;}
.level__foot h3{
  display:inline;font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:-.03em;text-transform:uppercase;
}
.dot{display:inline-block;width:10px;height:10px;border-radius:100px;margin-left:var(--spacing-8);vertical-align:middle;}
/* Kropka wayfindingowa: wypełnienie w kolorze kanwy, obwódka w kolorze bloku,
   żeby marker pozostał widoczny na pełnokolorowym tle. */
.dot--green{background:var(--color-concrete);outline:1px solid #fff;}
.dot--pink,.dot--yellow,.dot--red{background:var(--color-concrete);outline:1px solid var(--color-iron);}
.level__foot p{font-size:var(--text-body);line-height:var(--leading-body);margin-top:var(--spacing-10);}
.level__meta{display:block;margin-top:var(--spacing-10);font-size:var(--text-body);text-transform:uppercase;opacity:.85;}

/* ---------- Stats ---------- */
.stats{display:grid;gap:1px;background:var(--color-iron);border:1px solid var(--color-iron);margin-bottom:var(--spacing-40);}
.stat{background:var(--color-concrete);padding:var(--spacing-24);}
.stat__num{
  display:block;font-size:clamp(48px,8vw,60px);line-height:.8;letter-spacing:-.04em;
  margin-bottom:var(--spacing-10);
}
.stat__label{font-size:var(--text-body);line-height:var(--leading-body);}

/* ---------- Cases ---------- */
.case__quote{font-size:var(--text-body-sm);line-height:1.2;margin-bottom:var(--spacing-14);}
.case__who{font-size:var(--text-body);text-transform:uppercase;letter-spacing:.02em;}
.case__result{
  display:inline-block;margin-top:var(--spacing-10);
  background:var(--color-iron);color:var(--color-concrete);
  border-radius:var(--radius-tags);padding:var(--spacing-5) var(--spacing-14);
  font-size:var(--text-body);text-transform:uppercase;
}

/* ---------- Teachers ---------- */
.teacher__initials{
  display:grid;place-items:center;width:64px;height:64px;
  background:var(--color-iron);color:var(--color-concrete);
  font-size:var(--text-subheading);letter-spacing:-.03em;
  margin-bottom:var(--spacing-14);
}
.teacher h3{font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:-.03em;text-transform:uppercase;}
.teacher__role{font-size:var(--text-body);text-transform:uppercase;opacity:.65;margin:var(--spacing-5) 0 var(--spacing-10);}
.teacher p{font-size:var(--text-body);line-height:var(--leading-body);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--color-iron);}
.faq__item{border-bottom:1px solid var(--color-iron);}
.faq__q{
  width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-20);
  padding:var(--spacing-20) 0;text-align:left;
  font-size:clamp(19px,2.4vw,26px);line-height:1.05;letter-spacing:-.03em;
  text-transform:uppercase;
}
.faq__q i{
  position:relative;flex:0 0 20px;width:20px;height:20px;margin-top:2px;
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;background:var(--color-iron);
  left:0;top:9px;width:20px;height:2px;
}
.faq__q i::after{transform:rotate(90deg);transition:transform .18s linear;}
.faq__q[aria-expanded="true"] i::after{transform:rotate(0deg);}
.faq__a{display:none;padding:0 0 var(--spacing-20);}
.faq__a p{font-size:var(--text-body-sm);line-height:1.2;max-width:78ch;}
.faq__item.is-open .faq__a{display:block;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:var(--spacing-30);}
.contact-list{display:grid;gap:var(--spacing-19);margin-top:var(--spacing-24);border-top:1px solid var(--color-iron);padding-top:var(--spacing-20);}
.contact-list dt{font-size:var(--text-body);text-transform:uppercase;letter-spacing:.02em;opacity:.65;}
.contact-list dd{margin:var(--spacing-5) 0 0;font-size:var(--text-body-sm);line-height:1.2;}
.contact-list a{border-bottom:1px solid var(--color-iron);}

/* ---------- Footer ---------- */
.site-footer{padding-bottom:var(--spacing-30);}
.footer-grid{display:grid;gap:var(--spacing-30);padding-top:var(--spacing-40);padding-bottom:var(--spacing-30);}
.footer-brand .wordmark__text{display:block;margin-bottom:var(--spacing-10);}
.footer-brand p{font-size:var(--text-body);line-height:var(--leading-body);max-width:38ch;}
.footer-col{display:grid;align-content:start;gap:var(--spacing-8);}
.footer-col h2{
  font-size:var(--text-body);text-transform:uppercase;letter-spacing:.02em;
  opacity:.65;margin-bottom:var(--spacing-5);font-weight:400;
}
.footer-col a{font-size:var(--text-body-sm);letter-spacing:-.02em;border-bottom:1px solid transparent;justify-self:start;}
.footer-col a:hover{border-color:var(--color-iron);}
.owner{font-size:var(--text-body);line-height:var(--leading-body);}
.owner a{border-bottom:1px solid var(--color-iron);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--spacing-14);
  align-items:center;justify-content:space-between;
  border-top:1px solid var(--color-iron);padding-top:var(--spacing-20);
}
.footer-bottom p{font-size:var(--text-body);}

/* =========================================================
   Legal / content pages
   ========================================================= */
.page-head{padding:var(--spacing-40) 0 var(--spacing-30);}
.page-head .heading{margin-bottom:var(--spacing-15);}
.breadcrumbs{font-size:var(--text-body);text-transform:uppercase;letter-spacing:.02em;}
.breadcrumbs a{border-bottom:1px solid var(--color-iron);}
.legal{padding:var(--spacing-40) 0 var(--spacing-50);max-width:80ch;}
.legal h2{
  font-size:var(--subheading-fluid);line-height:var(--leading-subheading);
  letter-spacing:-.03em;text-transform:uppercase;
  margin:var(--spacing-30) 0 var(--spacing-10);
}
.legal h3{font-size:var(--text-body-sm);text-transform:uppercase;letter-spacing:-.02em;margin:var(--spacing-20) 0 var(--spacing-8);}
.legal p,.legal li{font-size:var(--text-body-sm);line-height:1.2;}
.legal p{margin-bottom:var(--spacing-14);}
.legal ul{display:grid;gap:var(--spacing-8);margin:0 0 var(--spacing-19);}
.legal ul li{padding-left:var(--spacing-20);position:relative;}
.legal ul li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--color-iron);}
.legal .updated{
  display:inline-block;border:1px solid var(--color-iron);border-radius:var(--radius-tags);
  padding:var(--spacing-5) var(--spacing-14);font-size:var(--text-body);text-transform:uppercase;
}
.legal table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-19);font-size:var(--text-body);}
.legal th,.legal td{border:1px solid var(--color-iron);padding:var(--spacing-10);text-align:left;vertical-align:top;line-height:var(--leading-body);}
.legal-wrap{overflow-x:auto;}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width:600px){
  :root{--gutter:30px;}
  .grid-4,.grid-3,.stats{grid-template-columns:repeat(2,1fr);}
  .levels{grid-template-columns:repeat(2,1fr);border-left:1px solid var(--color-iron);}
  .level{border-right:1px solid var(--color-iron);border-left:0;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:900px){
  .section{padding:var(--spacing-100) 0;}
  .section--tight{padding-bottom:0;}
  .hero{padding:var(--spacing-50) 0 var(--spacing-100);}
  .hero-grid{grid-template-columns:1.25fr .95fr;gap:var(--spacing-50);align-items:start;}
  .two-col{grid-template-columns:1fr 1fr;gap:var(--spacing-40);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .contact-grid{grid-template-columns:1fr 1fr;gap:var(--spacing-50);}
  .step{grid-template-columns:120px 1fr;gap:var(--spacing-30);padding:var(--spacing-30) 0;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:var(--spacing-40);}
}

@media (min-width:1024px){
  .nav-desktop{display:flex;}
  .header-cta{display:flex;}
  .burger{display:none;}
  .menu-panel{display:none !important;}
  .grid-4,.stats{grid-template-columns:repeat(4,1fr);}
  .levels{grid-template-columns:repeat(4,1fr);}
  .level__figure{min-height:230px;}
}

@media (min-width:1280px){
  :root{--gutter:40px;}
}

/* Very small phones */
@media (max-width:359px){
  :root{--gutter:14px;}
  .form-block{padding:var(--spacing-15);}
  .feature,.case,.teacher,.stat{padding:var(--spacing-15);}
}

/* Motion / print */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}
@media print{
  .site-header,.menu-panel,.form-block,.burger{display:none !important;}
  body{background:#fff;}
}