/* =====================================================================
   TRYTIUM — arkusz stylów
   Barwy i typografia zgodne z systemem wizualnym marki.
   Projektowane od telefonu w górę: układ jednokolumnowy jest domyślny,
   szersze ekrany dostają kolumny w zapytaniach medialnych.
   ===================================================================== */

:root{
  --tlo:#1A0E23;
  --tlo-2:#241432;
  --kraw:#43284F;
  --tekst:#F6F0FA;
  --przygas:#A691B4;
  --akcent:#7BE495;
  --czerwien:#DB1F26;
  --blekit:#3474BB;
  --szer:1120px;
}

*{box-sizing:border-box;margin:0;padding:0;}

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

body{
  background:var(--tlo);
  color:var(--tekst);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block;}

.srodek{width:100%;max-width:var(--szer);margin:0 auto;padding:0 20px;}
.waski{max-width:720px;}

/* Odnośnik dla osób poruszających się klawiaturą. */
.pomin{position:absolute;left:-9999px;top:0;background:var(--akcent);color:#12210F;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;z-index:50;}
.pomin:focus{left:0;}

a{color:var(--tekst);}
.link{color:var(--akcent);text-decoration:none;border-bottom:1px solid rgba(123,228,149,.35);}
.link:hover{border-bottom-color:var(--akcent);}

/* ------------------------------- nagłówek ------------------------------ */
.naglowek{position:sticky;top:0;z-index:20;
  background:rgba(26,14,35,.9);border-bottom:1px solid var(--kraw);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.pas{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;}
/* Nazwa obok znaku — bez nawigacji, więc nagłówek jest tylko podpisem. */
.marka{display:flex;align-items:center;gap:11px;min-height:44px;}
.marka img{width:34px;height:auto;}
.marka b{font-size:15px;letter-spacing:.22em;font-weight:700;}
.naglowek nav{display:flex;gap:4px;}
.naglowek nav a{text-decoration:none;color:var(--przygas);font-size:14px;
  padding:12px 12px;border-radius:9px;min-height:44px;display:flex;align-items:center;}
.naglowek nav a:hover{color:var(--tekst);}
.naglowek nav a.wyroz{color:var(--akcent);}
@media (max-width:420px){
  .naglowek nav a{padding:12px 9px;font-size:13px;}
}

/* -------------------------------- wstęp -------------------------------- */
/* --------------------------------- wstęp -------------------------------
   Znak zawsze na środku pierwszego ekranu, w jednej kolumnie na każdej
   szerokości. Wysokość liczona jednostką svh — na telefonie uwzględnia
   chowający się pasek przeglądarki, przez co nic nie ucieka pod krawędź. */
.hero{
  min-height:calc(100vh - 65px);
  min-height:calc(100svh - 65px);
  display:grid;place-items:center;
  padding:32px 0 44px;
}
.hero-tresc{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,3.5vh,30px);}

.hero-znak img{
  width:min(560px,80vw);
  height:auto;
  /* Ograniczenie wysokości chroni układ na niskich ekranach; object-fit
     pilnuje, żeby znak się przy tym nie zniekształcił. */
  max-height:min(46svh,430px);
  object-fit:contain;
}

h1{font-size:clamp(30px,7.5vw,52px);font-weight:300;letter-spacing:-.02em;
  line-height:1.12;margin:0;}
.lead{color:var(--przygas);font-size:clamp(16px,4.2vw,20px);max-width:44ch;margin:0;}

.akcje{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px;}
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:15px 30px;border-radius:999px;border:1px solid var(--akcent);
  background:var(--akcent);color:#12210F;font:inherit;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;}
.btn:hover{filter:brightness(1.08);}
.btn:focus-visible{outline:3px solid var(--tekst);outline-offset:3px;}
.btn[disabled]{opacity:.6;cursor:default;}
.btn-cichy{background:transparent;color:var(--tekst);border-color:var(--kraw);}
.btn-cichy:hover{border-color:var(--akcent);filter:none;}

/* Telefon obrócony poziomo ma około 390 px wysokości — żaden układ
   z dużym znakiem się tam nie zmieści. Zamiast ściskać wszystko do
   nieczytelności, pozwalamy na swobodne przewijanie. */
@media (max-height:520px){
  .hero{min-height:auto;padding:26px 0 34px;}
  .hero-tresc{gap:16px;}
  .hero-znak img{max-height:34svh;width:min(420px,64vw);}
  h1{font-size:clamp(26px,4.4vh,34px);}
}

/* ------------------------------- sekcje -------------------------------- */
.sekcja{padding:56px 0;border-top:1px solid var(--kraw);}
.sekcja-ciemna{background:#150B1C;}
h2{font-size:clamp(22px,5vw,32px);font-weight:300;letter-spacing:-.02em;margin-bottom:10px;}
.wstep{color:var(--przygas);margin-bottom:28px;max-width:60ch;}

.karty{display:grid;gap:14px;margin-top:26px;}
@media (min-width:640px){ .karty{grid-template-columns:1fr 1fr;} }
@media (min-width:960px){ .karty{grid-template-columns:repeat(4,1fr);} }
.karty-2{grid-template-columns:1fr;}
@media (min-width:760px){ .karty-2{grid-template-columns:1fr 1fr;} }

.karta{background:var(--tlo-2);border:1px solid var(--kraw);border-radius:16px;padding:22px;}
.karta svg{width:26px;height:26px;fill:none;stroke:var(--akcent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;}
.karta h3{font-size:17px;font-weight:600;margin-bottom:8px;}
.karta p{color:var(--przygas);font-size:14.5px;}
.karta p + p{margin-top:10px;}
.karta-duza{padding:26px;}
.karta-duza h3{font-size:22px;font-weight:300;letter-spacing:-.01em;margin-bottom:10px;}

.etykieta{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--akcent);border:1px solid rgba(123,228,149,.35);
  border-radius:999px;padding:5px 11px;margin-bottom:14px;}

.drobne{font-size:13px;color:var(--przygas);}
.proza p + p{margin-top:12px;}

/* ------------------------------ formularz ------------------------------ */
form{margin-top:24px;}
.pola{display:grid;gap:0;}
@media (min-width:640px){ .pola{grid-template-columns:1fr 1fr;gap:0 16px;} }

form label{display:block;margin-bottom:16px;}
form label > span{display:block;font-size:13px;color:var(--przygas);margin-bottom:7px;}
form label > span b{color:var(--czerwien);font-weight:400;}

input[type=text],input[type=email],textarea{
  width:100%;background:var(--tlo-2);color:var(--tekst);
  border:1px solid var(--kraw);border-radius:11px;padding:14px 15px;
  font:inherit;font-size:16px;               /* 16px zapobiega przybliżaniu na iOS */
  min-height:52px;
}
textarea{resize:vertical;min-height:130px;line-height:1.6;}
input:focus,textarea:focus{outline:none;border-color:var(--akcent);}
input:user-invalid,textarea:user-invalid{border-color:var(--czerwien);}

.zgoda{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;}
.zgoda input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--akcent);}
.zgoda span{font-size:13.5px;color:var(--przygas);line-height:1.55;}

/* Pułapka na roboty — poza ekranem, niewidoczna dla człowieka,
   ale bez display:none, bo część automatów to wykrywa. */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.odpowiedz{margin-top:16px;font-size:14.5px;min-height:1.4em;color:var(--przygas);}
.odpowiedz.ok{color:var(--akcent);}
.odpowiedz.blad{color:#FF8A93;}

.nota{margin-top:22px;padding-top:18px;border-top:1px solid var(--kraw);
  max-width:62ch;line-height:1.6;}

.dane-kontakt{margin-top:38px;padding-top:26px;border-top:1px solid var(--kraw);
  display:grid;gap:14px;}
@media (min-width:640px){ .nota{margin-top:22px;padding-top:18px;border-top:1px solid var(--kraw);
  max-width:62ch;line-height:1.6;}

.dane-kontakt{grid-template-columns:repeat(3,1fr);} }
.dane-kontakt p{font-size:14.5px;color:var(--przygas);}
.dane-kontakt strong{color:var(--tekst);}

/* -------------------------------- stopka ------------------------------- */
.stopka{border-top:1px solid var(--kraw);padding:26px 0 34px;}
.stopka-tresc{display:flex;flex-direction:column;gap:6px;font-size:14.5px;
  color:var(--przygas);}
.stopka-tresc strong{color:var(--tekst);letter-spacing:.18em;font-size:13px;}
.kropka{color:var(--kraw);margin:0 8px;}
@media (max-width:420px){ .kropka{display:none;} .stopka-tresc a{display:block;margin-top:4px;} }