/* MT Dynamics: wspólny arkusz dla strony głównej, polityki prywatności i strony 404.
   Układ: ciemna siatka rysunku technicznego, neon tylko na akcentach. */

/* Fonty z własnego serwera (licencja SIL OFL, pliki OFL-*.txt obok) */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/exo2-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/exo2-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:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrainsmono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/jetbrainsmono-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:"Russo One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/russoone-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Russo One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/russoone-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#060A16; --surface:#0B1226; --surface-2:#0F1932; --line:#1C2848; --grid:rgba(28,40,72,.35);
  --fg:#EAF0FF; --muted:#9AA6C4; --cyan:#05ACEF; --cyan-hi:#3FD8FF; --violet:#8148CA; --magenta:#DB5BF2;
  --ok:#3FD8A0; --err:#FF7A8A;
  --todo-bg:rgba(219,91,242,.1); --todo-fg:#E9A6F7;
  --f-display:"Russo One","Exo 2",system-ui,sans-serif;
  --f-body:"Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r:14px; --max:1180px; --header-h:69px; --footer-h:108px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.todo{display:inline;background:var(--todo-bg);color:var(--todo-fg);font-family:var(--f-mono);font-size:.82em;padding:.1em .4em;border-radius:4px;border:1px dashed rgba(219,91,242,.45)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--cyan);color:#03121C;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* Nagłówek */
header{position:sticky;top:0;z-index:20;background:rgba(6,10,22,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px;display:block}
.brand span{font-family:var(--f-display);line-height:1;color:var(--cyan);text-shadow:0 0 12px rgba(5,172,239,.45)}
.brand small{display:block;font-size:11px;letter-spacing:.24em}
.brand strong{display:block;font-size:16px;font-weight:400;letter-spacing:.12em}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
nav a{display:block;text-decoration:none;padding:8px 11px;border-radius:8px;color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap}
nav a:hover{color:var(--fg)}
nav a[aria-current="true"]{color:var(--cyan-hi);background:rgba(5,172,239,.08)}
.soon{display:inline-block;font:500 10px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#C9A8F5;background:rgba(129,72,202,.18);border:1px solid rgba(129,72,202,.5);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.nav-cta{margin-left:8px}
nav .nav-cta a{color:#03121C;padding:9px 16px}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:8px 12px;font:600 14px var(--f-body);cursor:pointer}
@media (max-width:980px){
  .menu-btn{display:block}
  #main-nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line)}
  #main-nav[data-open="false"]{display:none}
  #main-nav ul{flex-direction:column;align-items:stretch;padding:8px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
  #main-nav a{padding:12px}
  .nav-cta{margin:8px 0 0}
  nav .nav-cta a{justify-content:center}
}

/* Typografia i sekcje */
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(32px,5.4vw,56px)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:19px;letter-spacing:.01em}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.lead{color:var(--muted);font-size:18px;max-width:62ch}
main>section{padding-block:clamp(48px,7vw,88px)}
main>section+section{border-top:1px solid var(--line)}
.head{display:grid;gap:10px;margin-bottom:32px;max-width:65ch}
.head-flat{margin:0}

/* Przyciski */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:10px;font:600 15px var(--f-body);text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--cyan);color:#03121C;box-shadow:0 0 22px rgba(5,172,239,.35)}
.btn-primary:hover{background:var(--cyan-hi)}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-ghost{border-color:rgba(5,172,239,.5);color:var(--cyan-hi);background:transparent}
.btn-ghost:hover{background:rgba(5,172,239,.08)}

/* Sekcja 1: wstęp */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-copy{display:grid;gap:22px;min-width:0}
.tagline{font-family:var(--f-mono);font-size:clamp(15px,2vw,19px);color:var(--cyan-hi);text-shadow:0 0 14px rgba(5,172,239,.4)}
.hero-art{display:grid;place-items:center;min-width:0}
.hero-art img{width:100%;max-width:440px;height:auto;aspect-ratio:1/1;display:block;filter:drop-shadow(0 0 28px rgba(129,72,202,.25))}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-art{order:-1}.hero-art img{max-width:240px}}

/* Karty */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-2{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}
@media (max-width:360px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start;min-width:0;transition:border-color .25s,box-shadow .25s}
.card:hover{border-color:rgba(5,172,239,.45);box-shadow:0 0 22px rgba(5,172,239,.12)}
.card p{color:var(--muted);font-size:15px}
.ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface-2)}
.ico svg{width:24px;height:24px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-cyan{stroke:var(--cyan-hi)} .c-mag{stroke:var(--magenta)} .c-vio{stroke:#A47AE6}

/* Sekcja 2: zespół */
.person{justify-items:center;text-align:center;padding:32px 24px}
.person .ico{width:64px;height:64px;border-radius:50%}
.person .ico svg{width:30px;height:30px}
.person h3{font-size:24px}
.role{font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;color:var(--cyan-hi)}
.person.mag .role{color:var(--magenta)}
.chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips li{font-weight:600;font-size:14px;padding:5px 14px;border-radius:999px;border:1px solid rgba(5,172,239,.4);color:var(--cyan-hi);background:rgba(5,172,239,.08)}
.person.mag .chips li{border-color:rgba(219,91,242,.4);color:var(--magenta);background:rgba(219,91,242,.08)}

/* Kafelki MTD System i MTD Store */
.tile{position:relative;overflow:hidden;padding:28px}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}
.tile.mag::before{background:linear-gradient(90deg,transparent,var(--magenta),transparent)}
.tile.highlight{border-color:var(--cyan);box-shadow:0 0 30px rgba(5,172,239,.25)}
.tile-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.tile-top h3{flex:1;font-size:21px}
@media (max-width:820px){
  .tile-top{display:grid;grid-template-columns:auto 1fr}
  .tile-top .soon{grid-column:2;justify-self:start}
}
.tile .soon{margin:0;font-size:11px;padding:3px 10px}
/* Kafelki jeden pod drugim; na szerszym ekranie opis po lewej, zapis na powiadomienie po prawej */
.tiles{display:grid;gap:16px}
@media (min-width:821px){
  .tiles .tile{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:36px;align-items:center}
  .tiles .tile>*{grid-column:1}
  .tiles .tile>.notify{grid-column:2;grid-row:1 / span 3}
}
.card .perk{color:var(--cyan-hi);font-weight:600}
.notify{display:grid;gap:10px}
.notify-row{display:flex;gap:10px;flex-wrap:wrap}
.notify-row input{flex:1 1 200px}

/* Formularze */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.split>*{min-width:0}
@media (max-width:820px){.split{grid-template-columns:1fr}}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:600;font-size:14px}
input,textarea,select{font:16px var(--f-body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
input:hover,textarea:hover,select:hover{border-color:rgba(219,91,242,.5)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--cyan);outline-offset:1px}
textarea{min-height:140px;resize:vertical;overscroll-behavior:contain}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row-2{grid-template-columns:1fr}}
label.consent{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:12.5px;color:var(--muted)}
.consent input{width:auto;margin-top:3px;flex:none}
.req{color:var(--magenta)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.form-card input,.form-card textarea,.form-card select,.tile input{background:var(--bg)}
.small{font-size:12.5px;color:var(--muted)}
.small a,.consent a,footer small a{color:var(--cyan-hi)}
.form-msg{font-family:var(--f-mono);font-size:13px;color:var(--cyan-hi)}
.form-msg:empty{display:none}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--err)}

/* Sekcja 5: kontakt */
.contact-card{display:flex;align-items:center;gap:16px;text-decoration:none}
.contact-card .ico{flex:none}
.contact-card span{display:block}
.contact-card .label{font-weight:700}
.contact-card .value{color:var(--muted);font-size:15px;overflow-wrap:anywhere}

/* Stopka */
footer{border-top:1px solid var(--line);background:#040712}
footer .wrap{padding-block:32px;display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
footer nav a{padding:6px 10px;font-size:14px}
footer small{font-family:var(--f-mono);color:var(--muted);font-size:12px}

/* Polityka prywatności */
.doc{max-width:820px;padding-block:clamp(40px,6vw,72px)}
.doc h1{font-size:clamp(30px,5vw,44px)}
.doc h2{font-size:clamp(21px,3vw,26px);margin:44px 0 14px}
.doc h3{font-size:17px;color:var(--cyan-hi)}
.doc p{margin:0 0 12px;line-height:1.65}
.doc ul{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.doc .intro{display:grid;gap:12px;margin-bottom:8px}
.doc .intro p{margin:0}
.meta{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.doc a{color:var(--cyan-hi)}
.purposes{display:grid;gap:14px}
.purpose{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;gap:12px}
.purpose:target{border-color:var(--cyan);box-shadow:0 0 26px rgba(5,172,239,.2)}
.purpose dl{margin:0}
.purpose dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.purpose dt{font-family:var(--f-mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:3px}
.purpose dd{margin:0}
.doc .purpose p.aside{margin:0;font-size:14px;color:var(--muted)}
.doc .after{margin-top:14px}
@media (max-width:620px){.purpose dl div{grid-template-columns:1fr;gap:2px}}
.box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:10px;padding:16px 18px}
.doc .box p:last-child{margin:0}

/* Prosta strona (404, odpowiedź formularza bez JavaScriptu) */
.simple-box{min-height:70vh;display:grid;align-content:center;justify-items:start;gap:20px;padding-block:64px}

/* Strona główna na komputerze: każda sekcja wypełnia ekran pod menu, a treść stoi na środku.
   Ostatnia sekcja razem ze stopką dochodzi do dołu ekranu. Dociąganie do sekcji przy przewijaniu
   i pomniejszanie treści, która się nie mieści, robi main.js; on też mierzy --header-h i --footer-h. */
@media (min-width:981px) and (min-height:420px){
  .onepage main>section{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-block:32px}
  .onepage main>section:last-child{min-height:calc(100vh - var(--header-h) - var(--footer-h));min-height:calc(100svh - var(--header-h) - var(--footer-h))}
  .onepage main>section>.wrap{width:100%}
  .onepage .head{margin-bottom:24px}
  /* Usługi: mniejsze kafelki, żeby 6 kart zmieściło się na ekranie razem z nagłówkiem */
  .onepage #uslugi .grid-3{gap:14px}
  .onepage #uslugi .card{padding:18px 20px;gap:8px}
  .onepage #uslugi .ico{width:38px;height:38px}
  .onepage #uslugi .ico svg{width:21px;height:21px}
  .onepage #uslugi h3{font-size:17px}
  .onepage #uslugi .card p{font-size:14px;line-height:1.5}
  .onepage #formularz textarea{min-height:110px}
  .onepage #formularz form{gap:12px}
}
/* Niskie ekrany (np. laptop ze skalowaniem 150%): ciaśniej, żeby każda sekcja zmieściła się w całości */
@media (min-width:981px) and (min-height:420px) and (max-height:760px){
  .onepage main>section{padding-block:20px}
  .onepage .head{gap:6px;margin-bottom:16px}
  .onepage main h2{font-size:28px}
  .onepage .hero-copy{gap:16px}
  .onepage .hero-art img{max-width:min(440px,52vh)}
  .onepage .person{padding:24px}
  .onepage .tile{padding:22px}
  .onepage #uslugi .grid-3{gap:12px}
  .onepage #uslugi .card{padding:14px 18px;gap:6px}
  .onepage #uslugi .ico{width:32px;height:32px}
  .onepage #uslugi .ico svg{width:18px;height:18px}
  .onepage #uslugi h3{font-size:16px}
  .onepage #uslugi .card p{font-size:13.5px;line-height:1.45}
  .onepage #formularz form{gap:10px}
  .onepage #formularz label{gap:4px}
  .onepage #formularz input,.onepage #formularz select{padding:9px 12px}
  .onepage #formularz textarea{min-height:70px;padding:9px 12px}
  .onepage #formularz .form-card{padding:18px 22px}
  .onepage #formularz .small{font-size:12px}
}