/* =======================
   Zmienne
======================= */
:root{
  --bg:#0B0F14;
  --surface:#111826;
  --text:#E6F1FF;
  --muted:#A3B3C2;
  --accent:#33FF66;
  --accent-2:#7CFFCB;
  --shadow:rgba(0,0,0,0.35);

  --r-20:20px;
  --r-16:16px;

  --s-8:8px;
  --s-12:12px;
  --s-16:16px;
  --s-24:24px;
  --s-32:32px;
  --s-48:48px;

  --header-h:60px;
}

/* =======================
   Reset i baza
======================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(57,255,20,0.08), transparent 60%),
    var(--bg);
}
img{max-width:100%;height:auto;display:block;border-radius:var(--r-16)}
a{color:var(--text);text-decoration:none}
a:hover,a:focus{color:var(--accent)}
.container{width:min(1200px,92%);margin-inline:auto}
.center{text-align:center}
.muted{color:var(--muted)}
.mt-24{margin-top:var(--s-24)}
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:var(--s-16);top:var(--s-16);width:auto;height:auto;
  padding:var(--s-12);background:var(--surface);
  border-radius:var(--r-16);outline:2px solid var(--accent)
}
/* Dostępność / ukryty tekst для czytników */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =======================
   Header (bez styli nawigacji)
======================= */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(17,24,38,0.7);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-12) 0; min-height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:var(--s-12)}
.brand__logo{filter:drop-shadow(0 0 8px rgba(57,255,20,0.5))}
.brand__text{font-weight:700;letter-spacing:.3px}

/* =======================
   Hero
======================= */
.section{padding:var(--s-48) 0}
.section__title{margin:0 0 var(--s-24);font-size:clamp(1.25rem,2vw,1.6rem);text-align:center}

.hero{padding:72px 0}
.hero__grid{
  display:grid;gap:var(--s-32);
  grid-template-columns:1fr;
  align-items:center;justify-items:center;
}
.hero__text{
  max-width:900px;margin:0 auto;text-align:center;
}
.hero__text h1{
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.25;margin:0 0 var(--s-16)
}
.hero__actions{
  display:flex;gap:var(--s-12);margin-top:var(--s-16);justify-content:center
}
.hero__media img{box-shadow:0 10px 30px var(--shadow)}
.glow{color:var(--accent);text-shadow:0 0 12px rgba(57,255,20,0.35)}
.hero--sub{
  padding:56px 0 24px;border-bottom:1px solid rgba(255,255,255,0.06)
}
.hero--sub .container{
  max-width:900px;margin-inline:auto;text-align:center;
}
.hero--sub h1{
  font-size:2.8rem;line-height:1.25;margin:0 0 var(--s-16);font-weight:700
}
.hero--sub p{
  margin:0 auto var(--s-16);max-width:70ch
}

/* =======================
   Grid / Cards
======================= */
.grid{display:grid;gap:var(--s-24)}
.grid--two{grid-template-columns:1fr;gap:min(5vw,var(--s-32))}
.grid.cards{
  display:flex;flex-wrap:wrap;gap:var(--s-24);justify-content:center
}
.cards .card{
  display:flex;flex-direction:column;
  flex:1 1 clamp(260px,30%,360px);
  max-width:420px;width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-20);
  padding:var(--s-24);
  box-shadow:0 10px 25px var(--shadow);
}
.cards--compact .card{padding:var(--s-16)}
.card--icon .icon{
  width:32px;height:32px;fill:none;stroke:var(--accent);stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(57,255,20,0.45));margin-bottom:8px
}
.cards .card .btn:last-of-type{
  margin-top:auto;align-self:flex-start
}

/* =======================
   Badges / Tech
======================= */
.badges{
  display:flex;justify-content:center;gap:var(--s-12);
  list-style:none;padding:0;margin:var(--s-16) 0 0;flex-wrap:wrap
}
.badges--wrap{margin-top:0}
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:rgba(124,255,203,0.08);
  border:1px solid rgba(124,255,203,0.25);
  box-shadow:0 0 0 0 rgba(124,255,203,0.4),0 0 18px rgba(124,255,203,0.15) inset;
  font-size:.875rem
}

.tech-list{display:flex;flex-wrap:wrap;gap:var(--s-12);list-style:none;padding:0;margin:0;justify-content:center}
.tech{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px dashed rgba(255,255,255,0.15);border-radius:12px}
.tech__dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent)}

/* =======================
   Steps
======================= */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-16);list-style:none;padding:0;margin:0
}
.steps li{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-16);padding:14px 16px
}
.steps li span{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:rgba(57,255,20,0.15);border:1px solid rgba(57,255,20,0.35);margin-right:8px
}

/* =======================
   Listy
======================= */
.list{list-style:disc;padding-left:22px}
.list li{margin:6px 0}

/* =======================
   FAQ
======================= */
.faq{ text-align:center }
.faq details{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--r-16);
  padding:12px 16px;
}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq details > div{margin-top:8px}

/* =======================
   CTA sekcja
======================= */
.section--cta{
  background:linear-gradient(180deg,rgba(57,255,20,0.06),transparent);
}

/* =======================
   Buttons
======================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);cursor:pointer;
  background:rgba(255,255,255,0.02);color:var(--text);text-decoration:none;font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn--primary{
  border-color:rgba(57,255,20,0.5);
  background:linear-gradient(180deg,rgba(57,255,20,0.22),rgba(57,255,20,0.14));
  box-shadow:0 0 18px rgba(57,255,20,0.25);
}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,0.18)}
.btn:hover,.btn:focus-visible{transform:translateY(-1px);box-shadow:0 0 24px rgba(57,255,20,0.35)}
.btn:focus-visible{outline:2px solid var(--accent)}

/* =======================
   Footer
======================= */
.site-footer{padding: 0 0 var(--s-24) 0; margin-top:var(--s-48)}

.footer__separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.06);
  margin-bottom: var(--s-24);
}

.footer__top{display:grid;gap:var(--s-24);grid-template-columns:1fr; text-align:center;}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center; gap:12px 16px;list-style:none;padding:0;margin:0}
.footer__legal{display:flex;justify-content:center;align-items:center;}
.brand--footer{display:flex;align-items:center;justify-content:center; gap:10px}
.footer__bottom {
  margin-top: var(--s-24);
  text-align: center;
  color: var(--muted);
}
.footer__contact {
  margin-top: var(--s-12);
}
.footer__contact p {
  margin: var(--s-8) 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.footer__contact p a {
  color: var(--muted);
}
.footer__contact p a:hover {
  color: var(--accent);
}

/* =======================
   Social
======================= */
.social{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.social__link{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.1)
}
.icon{width:20px;height:20px;fill:none;stroke:var(--text);stroke-width:2}

/* =======================
   Formularz
======================= */
.form{display:grid;gap:14px}
.form__row{display:grid;gap:6px}
label{font-weight:600}
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.02);color:var(--text)
}
textarea{resize:vertical}
input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);box-shadow:0 0 20px rgba(57,255,20,0.25)
}
.form__row--check{
  display:grid;grid-template-columns:auto 1fr;align-items:flex-start;gap:10px
}
.error{color:#ff8a80;min-height:18px}
.success{
  margin-top:8px;padding:10px 12px;border-radius:10px;
  background:rgba(124,255,203,0.1);border:1px solid rgba(124,255,203,0.35)
}

/* =======================
   Komponenty pomocnicze
======================= */
.back-to-top{
  position:fixed;right:16px;bottom:16px;z-index:40;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);color:var(--text);
  display:grid;place-items:center;box-shadow:0 8px 18px var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
.back-to-top.show{opacity:1;pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px)}

.cookie{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(680px,92%);padding:14px 16px;border-radius:16px;
  background:rgba(17,24,38,0.95);border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 26px var(--shadow);
  display:flex; flex-direction:column; justify-content:space-between;gap:12px;align-items:center;
  z-index:2147483640 !important;
  pointer-events:auto !important;
}
.cookie p { margin: 0; text-align: center; }
.cookie .link{color:var(--accent)}
.cookie__actions{display:flex;gap:8px}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.reveal.in-view{opacity:1;transform:none}

/* =======================
   Style dla konkretnych sekcji
======================= */
.section[aria-labelledby="tech-title"] .container,
.section[aria-labelledby="prepress-title"] .container,
.section[aria-labelledby="schedule-title"] .container,
.section[aria-labelledby="edu-title"] .container{
  text-align:center;max-width:900px;margin-inline:auto;
}
.section[aria-labelledby="tech-title"] .list,
.section[aria-labelledby="prepress-title"] .list,
.section[aria-labelledby="edu-title"] .list{
  display:inline-block;text-align:left;margin:0 auto;
}
.section[aria-labelledby="schedule-title"] p,
.section[aria-labelledby="tech-title"] p{
  max-width:70ch;margin:0 auto;
}

/* Kontakt: formularz centralnie */
.section[aria-labelledby="form-title"] .grid.grid--two{grid-template-columns:1fr !important;justify-items:center}
.section[aria-labelledby="form-title"] .grid.grid--two > *{width:min(720px,100%)}
#contactForm{width:100%}

/* =======================
   Media Queries
======================= */

/* Tablet i większe (od 768px) */
@media (min-width:768px){
    .cookie{ flex-direction: row; }
    .cookie p { text-align: left; }
    .footer__top{ grid-template-columns: auto 1fr; text-align:left; }
    .footer__nav{ justify-content: flex-start; }
    .footer__legal{ justify-content: flex-start; }
}

/* Desktop (od 1024px) */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid--two{grid-template-columns:1.2fr .8fr}
  .footer__top{ grid-template-columns: auto 1fr auto; align-items:center; }
  .footer__nav{ justify-content: center; }
  .footer__legal{ justify-content: flex-end; }
}

/* Duży desktop (od 1280px) */
@media (min-width:1280px){ .hero__text h1{font-size:2.8rem} }

/* Ustawienia dla użytkowników preferujących ograniczenie ruchu */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Kontrola widoczności banera cookies */
.cookie { display: none; }
.cookie.is-visible { display: flex; }