/* matenet — style wspólne dla wszystkich podstron.
   Kierunek: karta katalogowa / schemat płytki drukowanej. Ścięte narożniki
   wzięte z liter logotypu, zero zaokrągleń i cieni. */

/* ---- fonty (hostowane lokalnie, bez zapytań do Google Fonts) ---- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/archivo-400-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/archivo-400-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/chakra-petch-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/chakra-petch-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/chakra-petch-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/chakra-petch-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- tokeny: kolory z księgi logotypu (#0f2417, #00953a, #f3f3ee) ----
   --paper/--ink/--text odwracają się w trybie ciemnym; --panel to tło
   nagłówka, kontaktu i stopki, a --light to jasny tekst na tym panelu. */
:root{
  color-scheme:light;
  --paper:#f3f3ee;
  --ink:#0f2417;
  --text:#2c4436;
  --muted:#5b6f62;
  --panel:#0f2417;
  --light:#f3f3ee;
  --green:#00953a;
  --green-hover:#00a843;
  --green-text:#007a2f;      /* zieleń do tekstu na jasnym — kontrast 4.9:1 */
  --green-lit:#3fbf6e;       /* zieleń do tekstu na ciemnym */
  --night:#0a1c12;           /* tło intro */
  --on-green:#06140c;
  --on-dark:#a9c6b5;
  --rule:rgba(15,36,23,.16);
  --code-bg:rgba(15,36,23,.07);

  --max:1200px;
  --gut:16px;
  --head:56px;

  --display:"Chakra Petch","Arial Narrow",sans-serif;
  --body:"Archivo","Segoe UI",system-ui,sans-serif;
}
/* tryb ciemny: z ustawień systemu, chyba że ktoś wybrał inaczej przełącznikiem */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0b1710;
    --ink:#e9f0eb;
    --text:#c3d3c9;
    --muted:#8da394;
    --panel:#1a3124;
    --green-text:#3fbf6e;
    --rule:rgba(233,240,235,.14);
    --code-bg:rgba(233,240,235,.08);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0b1710;
  --ink:#e9f0eb;
  --text:#c3d3c9;
  --muted:#8da394;
  --panel:#1a3124;
  --green-text:#3fbf6e;
  --rule:rgba(233,240,235,.14);
  --code-bg:rgba(233,240,235,.08);
}

@media (min-width:600px){:root{--gut:32px}}
@media (min-width:900px){:root{--gut:40px;--head:68px}}

/* ---- baza ---- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 12px);
}
body{
  margin:0;min-height:100vh;
  display:flex;flex-direction:column;   /* stopka zawsze na dole, także na krótkiej 404 */
  background:var(--paper);color:var(--text);
  font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto;min-width:0}
@media (min-width:900px){body{font-size:18px}}
svg{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
a{color:var(--green-text);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.mt-skip{
  position:absolute;left:8px;top:-80px;z-index:100;
  padding:10px 14px;background:var(--ink);color:var(--paper);font-weight:600;
}
.mt-skip:focus{top:8px;color:var(--paper)}

.mt-sprite{position:absolute;width:0;height:0;overflow:hidden}

.mt-wrap{
  max-width:calc(var(--max) + 2 * var(--gut));
  margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);
}

/* ---- przyciski: ścięte dwa narożniki, jak rama logotypu ---- */
.mt-btn{
  --cut:12px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 24px 16px;border:0;cursor:pointer;
  font:700 19px/1.1 var(--display);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;
  color:var(--on-green);background:var(--green);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.mt-btn:hover{background:var(--green-hover);color:var(--on-green)}
.mt-btn:active{transform:translateY(1px)}
/* clip-path obcina zewnętrzny outline — ramka fokusu idzie do środka */
.mt-btn:focus-visible{outline:2px solid var(--on-green);outline-offset:-6px}
.mt-btn-s{--cut:8px;padding:10px 14px 9px;font-size:15px}
.mt-btn-dim{background:#24402f;color:var(--light)}
.mt-btn-dim:hover{background:#2f5140;color:var(--light)}
.mt-btn-dim:focus-visible{outline-color:var(--light)}

/* ---- nagłówek ---- */
.mt-head{position:sticky;top:0;z-index:40;background:var(--panel)}
.mt-head-in{display:flex;align-items:center;gap:28px;height:var(--head)}
.mt-brand{margin-right:auto;line-height:0}
.mt-hlogo{width:104px;height:auto;overflow:visible}
@media (min-width:900px){.mt-hlogo{width:136px}}
.mt-fill{fill:var(--green)}
.mt-nav{display:none}
.mt-nav a{color:var(--on-dark);text-decoration:none;font-size:15px;font-weight:500}
.mt-nav a:hover{color:var(--light)}
/* przełącznik motywu: mikroprzełącznik DIP jak na płytce — suwak w prawo = ciemny */
.mt-theme{
  display:flex;align-items:center;gap:10px;
  margin:0;padding:8px 0;border:0;background:none;cursor:pointer;
  font:500 15px/1 var(--body);color:var(--on-dark);
}
.mt-theme:hover{color:var(--light)}
.mt-theme-label{display:none}
.mt-theme-sw{position:relative;flex:none;width:38px;height:20px;border:2px solid currentColor}
.mt-theme-sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:currentColor}
.mt-theme[aria-pressed="true"] .mt-theme-sw::after{left:20px;background:var(--green-lit)}
@media (min-width:1000px){.mt-theme-label{display:inline}}
.mt-show-s{display:inline}
.mt-hide-s{display:none}
@media (min-width:760px){
  .mt-nav{display:flex;gap:28px}
  .mt-show-s{display:none}
  .mt-hide-s{display:inline}
}

/* ---- hero ---- */
.mt-hero{padding:44px 0 80px}
@media (min-width:900px){.mt-hero{padding:104px 0 128px}}
.mt-hero-grid{display:grid;gap:56px}
@media (min-width:900px){
  .mt-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
}
.mt-hero h1{font-weight:700;font-size:clamp(38px,5.4vw,66px);line-height:1.02;letter-spacing:-.02em}
.mt-lead{margin-top:24px;max-width:46ch;font-size:clamp(18px,1.55vw,21px);line-height:1.55}
.mt-cta{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.mt-cta-alt{font-size:16px;color:var(--muted)}

/* schemat „Rys. 1” */
.mt-fig{margin:0;width:100%;max-width:480px;justify-self:center}
@media (min-width:900px){.mt-fig{justify-self:end}}
.mt-fig svg{width:100%;height:auto}
.mt-fig figcaption{margin-top:16px;font:600 14px/1.45 var(--display);letter-spacing:.01em;color:var(--muted)}
.mt-sch-box{fill:none;stroke:var(--ink);stroke-width:2.5}
.mt-sch-core{fill:var(--green)}
.mt-sch-trace{fill:none;stroke:var(--ink);stroke-width:2.5}
.mt-sch-pad{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.mt-sch-label{font:600 19px var(--display);fill:var(--ink)}
.mt-sch-core-label{font:700 24px var(--display);fill:var(--on-green)}
.mt-sch-note{font:600 15px var(--display);fill:var(--muted)}

/* ---- sekcje treści ---- */
.mt-sec{padding-bottom:88px}
@media (min-width:900px){.mt-sec{padding-bottom:128px}}
.mt-rule{border-top:3px solid var(--ink);padding-top:26px}
@media (min-width:900px){.mt-rule{padding-top:36px}}
.mt-sec h2,.mt-contact h2{font-weight:600;font-size:clamp(32px,4.2vw,50px);line-height:1.04}

/* co robimy */
.mt-offer{display:grid;gap:28px}
@media (min-width:900px){
  .mt-offer{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
  .mt-offer-head{position:sticky;top:calc(var(--head) + 36px);align-self:start}
}
.mt-offer-head p{margin-top:14px;max-width:28ch;color:var(--muted)}
.mt-list{margin:0}
.mt-item{padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.mt-item:first-child{padding-top:4px}
.mt-item dt{margin-bottom:6px;font:600 22px/1.25 var(--display);color:var(--ink)}
.mt-item dd{margin:0}
@media (min-width:640px){
  .mt-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px}
  .mt-item dt{margin:0}
}

/* współpraca: kroki są chronologiczne, więc numeracja ma sens */
.mt-work{display:grid;gap:44px}
@media (min-width:900px){.mt-work{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px}}
.mt-work-intro p{margin-top:20px;max-width:42ch}
.mt-steps{margin:0;padding:0;list-style:none;counter-reset:krok}
.mt-step{position:relative;padding:0 0 34px 64px;counter-increment:krok}
.mt-step:last-child{padding-bottom:0}
.mt-step::before{
  content:counter(krok);
  position:absolute;left:0;top:0;width:42px;height:42px;
  display:grid;place-items:center;
  font:700 18px/1 var(--display);color:var(--paper);background:var(--ink);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.mt-step h3{padding-top:8px;font-weight:600;font-size:22px;line-height:1.2}
.mt-step p{margin-top:6px}

/* ---- kontakt ---- */
.mt-contact{
  --chamfer:28px;
  background:var(--panel);color:var(--on-dark);
  clip-path:polygon(0 var(--chamfer),var(--chamfer) 0,100% 0,100% 100%,0 100%);
}
@media (min-width:900px){.mt-contact{--chamfer:56px}}
.mt-contact h2{color:var(--light)}
.mt-contact-grid{display:grid;gap:44px;padding-top:64px;padding-bottom:64px}
@media (min-width:900px){
  .mt-contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;padding-top:104px;padding-bottom:88px}
}
.mt-tel{
  display:inline-block;margin:20px 0 22px;
  font:700 clamp(32px,9.4vw,60px)/1 var(--display);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--light);text-decoration:none;
}
@media (min-width:900px){.mt-tel{font-size:clamp(48px,5vw,76px)}}
.mt-tel:hover{color:var(--green-lit)}
.mt-contact-note{max-width:44ch}

/* spis jak w starej książce telefonicznej: etykieta ....... wartość */
.mt-dir{font-style:normal}
.mt-dir dl{margin:0}
.mt-dir div{display:flex;align-items:baseline;gap:10px;padding:11px 0}
.mt-dir dt{
  flex:1;display:flex;align-items:baseline;gap:10px;
  font:600 15px/1.3 var(--display);letter-spacing:.02em;white-space:nowrap;color:var(--on-dark);
}
.mt-dir dt::after{content:"";flex:1;min-width:24px;border-bottom:2px dotted rgba(169,198,181,.4);transform:translateY(-4px)}
.mt-dir dd{margin:0;text-align:right;color:var(--light)}
.mt-dir a{color:var(--light)}
.mt-dir a:hover{color:var(--green-lit)}

/* ---- stopka ---- */
.mt-foot{background:var(--panel);color:var(--on-dark);font-size:15px}
.mt-foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-top:24px;padding-bottom:28px}
.mt-foot-joined .mt-foot-in{border-top:1px solid rgba(169,198,181,.16)}
.mt-foot-in p{margin-right:auto}
@media (max-width:599px){.mt-foot-in p{flex-basis:100%}}
.mt-foot a,.mt-linkbtn{color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(169,198,181,.35);text-underline-offset:.2em}
.mt-foot a:hover,.mt-linkbtn:hover{color:var(--light)}
.mt-linkbtn{font:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---- podstrony: dokument i 404 ---- */
.mt-doc{padding:48px 0 96px}
@media (min-width:900px){.mt-doc{padding:88px 0 128px}}
.mt-doc-in{max-width:72ch}
.mt-doc h1{font-weight:700;font-size:clamp(36px,5vw,56px);line-height:1.04}
.mt-doc-date{margin-top:14px;color:var(--muted)}
.mt-doc h2{margin-top:48px;padding-top:18px;border-top:3px solid var(--ink);font-weight:600;font-size:24px;line-height:1.2}
.mt-doc p,.mt-doc ul{margin:14px 0 0}
.mt-doc ul{padding-left:1.2em}
.mt-doc li+li{margin-top:6px}
.mt-doc code{font-size:.9em;padding:1px 5px;background:var(--code-bg);color:var(--ink)}

.mt-404{padding:64px 0 120px}
.mt-404-code{font:700 clamp(96px,22vw,220px)/.9 var(--display);letter-spacing:-.03em;color:var(--green)}
.mt-404 h1{margin-top:18px;font-weight:700;font-size:clamp(32px,4.6vw,52px);line-height:1.05}
.mt-404 p{margin-top:16px;max-width:44ch}
.mt-404 .mt-btn{margin-top:32px}

/* ---- intro: logo rysuje się na pełnym ekranie, potem odlatuje do nagłówka ----
   Bez klasy .mt-intro (brak JS, reduced motion, kolejna wizyta w sesji)
   strona od razu jest w stanie końcowym. */
.mt-splash{display:none}
.mt-intro .mt-splash{
  display:block;position:fixed;inset:0;z-index:60;
  animation:mt-failsafe-hide 1ms 7s forwards;   /* awaryjnie, gdyby JS nie zadziałał */
}
.mt-intro .mt-hlogo{visibility:hidden;animation:mt-failsafe-show 1ms 7s forwards}
@keyframes mt-failsafe-hide{to{visibility:hidden}}
@keyframes mt-failsafe-show{to{visibility:visible}}

.mt-splash-bg{
  position:absolute;inset:0;
  background-color:var(--night);
  background-image:radial-gradient(circle at 13px 13px,rgba(0,149,58,.08) 1.5px,transparent 1.6px);
  background-size:26px 26px;
}
.mt-splash-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.mt-splash .mt-logo{width:100%;max-width:720px;height:auto;overflow:visible;transform-origin:0 0}
.mt-outline{fill:none;stroke:#3f7a5b;stroke-width:1.6;opacity:.45}

.mt-intro .mt-outline{opacity:0;animation:mt-draw-outline 2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes mt-draw-outline{0%{opacity:0}26%{opacity:1}72%,100%{opacity:.45}}

.mt-reveal-rect{width:595px}
.mt-intro .mt-reveal-rect{width:0;animation:mt-draw-reveal 2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes mt-draw-reveal{0%,24%{width:0}72%,100%{width:595px}}

.mt-pulse{opacity:0}
.mt-intro .mt-pulse{
  animation:mt-draw-pulse-x 2s cubic-bezier(.65,0,.35,1) forwards,
            mt-draw-pulse-o 2s linear forwards;
}
@keyframes mt-draw-pulse-x{0%,24%{transform:translateX(-78px)}72%,100%{transform:translateX(587px)}}
@keyframes mt-draw-pulse-o{0%{opacity:0}18%,72%{opacity:1}86%,100%{opacity:0}}

/* ---- baner zgody na cookies: zielona ramka ze ściętymi rogami ---- */
.mt-ck{
  --cut:16px;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:50;
  max-width:540px;margin:0 auto;padding:20px 22px 22px;
  background:var(--green);isolation:isolate;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
.mt-ck::before{
  content:"";position:absolute;inset:2px;z-index:-1;background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));
}
.mt-ck[hidden]{display:none}
.mt-ck-text{font-size:14.5px;line-height:1.55;color:#c8dfd2}
.mt-ck-text b{font-weight:600;color:var(--light)}
.mt-ck-text a{color:var(--light)}
.mt-ck-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
@media (max-width:420px){.mt-ck-actions .mt-btn{flex:1 1 auto}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}