:root{
    --bg:#080c17; --bg2:#0d1326;
    --text:#e8f2ff; --muted:#a6b6d9;
    --line:rgba(255,255,255,.12);
    --accent:#ba6301; --vio:#e19404; --sky:#efb700;
    --r:18px; --shadow:0 20px 60px rgba(0,0,0,.5);
    --speed:.5s; --ease:cubic-bezier(.2,.8,.2,1);
    --grid:1200px;
    --radius:16px;
    --panel:rgba(255,255,255,.05);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--text); background:
      radial-gradient(1200px 800px at 80% -10%, #141b3b 0%, transparent 60%),
      radial-gradient(1000px 800px at 10% 110%, #11283b 0%, transparent 60%),
      linear-gradient(#080c17,#0d1326);
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.6; overflow-x:hidden; align-items: center;
  }
  a{color:var(--accent); text-decoration:none}
  a:hover{text-decoration:underline}
  .container{width:min(100%,var(--grid)); margin:auto; padding:0 24px; align-items: center;}

  /* A11y */
  .skip{position:absolute;left:-9999px;top:auto}
  .skip:focus{left:12px;top:12px;z-index:1000;background:#04121d;color:var(--text);padding:8px 12px;border-radius:10px;outline:2px solid var(--accent)}

  /* NAV */
  .nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(10px);
       background:linear-gradient(180deg, rgba(8,12,23,.85), rgba(8,12,23,.5));
       border-bottom:1px solid var(--line);}
  .nav .inner{height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
  .brand .dot{width:22px;height:22px;border-radius:8px;background:conic-gradient(from 90deg,#00ffd1,#00c2ff,#8a6cff,#00ffd1); box-shadow:0 0 18px rgba(0,255,209,.45)}
  .menu{display:flex; gap:10px; list-style:none; margin:0; padding:0}
  .menu a{display:block; padding:10px 12px; border-radius:12px; color:var(--text)}
  .menu a.active,.menu a:hover{background:rgba(255,255,255,.06); text-decoration:none}
  .cta{padding:10px 16px; border-radius:12px; border:1px solid var(--line); background:linear-gradient(90deg,var(--accent),var(--sky)); color:#03121d; font-weight:800; box-shadow:0 10px 30px rgba(0,255,209,.2)}

  /* HERO */
  .hero{padding:0 6em;}
  header.hero{display:grid; grid-template-columns: 1.1fr 1fr; min-height:86svh; gap:24px; align-items:center}
  @media (max-width:960px){ header.hero{grid-template-columns:1fr} .hero .art{order:-1; height:44svh} }
  .hero .copy{display:flex; align-items:center}
  .eyebrow{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.9rem}
  .hero h1{font-size: clamp(36px,5.5vw,72px); line-height:1.05; margin:.4em 0}
  .lead{color:#cfe1ff; max-width:60ch}
  .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
  .btn{padding:10px 16px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:rgba(255,255,255,.04); font-weight:700}
  .btn:hover{background:rgba(255,255,255,.08)}
  .btn.pri{border:none; background:linear-gradient(90deg,var(--accent),var(--vio)); color:#07131f}

  .hero .art{
    position:relative; min-height: 460px; border-radius: 24px; overflow:hidden;
    border:1px solid rgba(255,255,255,.12); background:#070f1a;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .hero canvas#mesh{position:absolute; inset:0; display:block; width:100%; height:100%}
  .term{position:relative; height:100%; display:flex; flex-direction:column;
        background:
          radial-gradient(1000px 600px at 15% -10%, rgba(0,255,178,.10), transparent 60%),
          radial-gradient(900px 500px at 110% 0%, rgba(124,92,255,.10), transparent 60%),
          #08121f;
        color:#bfffe9; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; border-radius: 24px; }
  .term-chrome{height:36px; display:flex; align-items:center; gap:8px; padding:0 12px;
               background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
               border-bottom:1px solid rgba(255,255,255,.08);}
  .term-chrome .dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 8px rgba(0,0,0,.4) inset}
  .term-chrome .red{background:#ff5f57}.term-chrome .yellow{background:#febc2e}.term-chrome .green{background:#28c840}
  .term-chrome .title{margin-left:8px; color:#9ec; font-size:.9rem; opacity:.9}
  .term-screen{
    flex:1; min-height:0; max-height:500px; padding:14px 16px 18px;
    overflow-y:auto; line-height:1.5; scrollbar-width:thin; position:relative;
  }
  .term-screen::-webkit-scrollbar{width:10px;height:10px}
  .term-screen::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
  .term-screen::after{content:""; pointer-events:none; position:absolute; inset:0; mix-blend-mode:soft-light;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 2px 4px),
               radial-gradient(80vw 40vh at 10% 0%, rgba(0,255,178,.05), transparent 60%); opacity:.35;}

  .log{color:#bfffe9}.dim{color:#89a7a6}.ok{color:#00ffb2}.warn{color:#ffd166}.err{color:#ff477e}.note{color:#7c5cff}.path{color:#7ad7ff}.prompt{color:#7ad7ff}.hash{color:#9cf}
  .cursor::after{content:"▍"; margin-left:2px; animation:blink 1s steps(1,end) infinite;}
  @keyframes blink{ 50% { opacity:0; } }

  section{padding:80px 0}
  .section-title{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:22px}
  .section-title h2{margin:0; font-size:clamp(28px,4vw,40px)}
  .muted{color:var(--muted)}

    .hero {
      position: relative;
      overflow: hidden; /* żeby film nie wystawał */
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;   /* film rozciąga się na cały header */
      z-index: -1;         /* ląduje za treścią */
      filter: brightness(0.55) contrast(1.15); /* przyciemnienie i kontrast */
    }

    .hero .copy,
    .hero .art {
      position: relative;
      z-index: 1; /* zawsze ponad filmem */
    }
    .hero .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65));
      z-index: 0;
    }




  /* Projekty — rail mini-karty */
.proj-rail {
  overflow: hidden;
  border-radius: 16px;
}

.proj-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 8px;
}

.proj-mini {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}

.proj-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.proj-mini h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.proj-mini p {
  margin: 0;
  font-size: .9rem;
}

.proj-mini[hidden] {
  display: none !important;
}


  /* Filtry (jeden, bez duplikatów) */
  .proj-filters{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px}
  .pf{padding:8px 12px; border-radius:12px; border:1px solid var(--line);
      background:rgba(255,255,255,.04); color:var(--text); font-weight:700; cursor:pointer}
  .pf.on{ background:linear-gradient(90deg,var(--accent),var(--vio)); color:#07131f; border-color:transparent }

  /* Realizacje WWW */
  .cards-grid{--min:260px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr))}.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.5)}.card-content{padding:16px}.card-content h2{margin:0 0 6px;font-size:1.05rem}.card-content p{margin:0 0 10px;font-size:.9rem;color:var(--muted)}.card-content a{display:inline-block;padding:8px 12px;border-radius:12px;background:var(--accent);color:#07131f;font-weight:700;text-decoration:none}
.image-scroll-container {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: #0e1a32;
  border-radius: 12px 12px 0 0;
}

.scroll-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.card:hover .scroll-image {
  transform: scale(1.05);
}
  /* Skills */
  .skills{display:grid; gap:16px; align-items: center;}
  @media (min-width:900px){ .skills{grid-template-columns:1.2fr 1fr} }
  .radials{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .rad{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center}
  .rad .ring{width:120px; height:120px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center; background:
      conic-gradient(var(--accent) calc(var(--p)*1%), rgba(255,255,255,.08) 0)}
  .rad .ring:after{content:attr(data-p) "%"; width:90px; height:90px; border-radius:50%; background:#0c142b; display:grid; place-items:center; font-weight:800}
  .pill{display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--line)}
  .stack-tags{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
  .tag{font-size:.78rem; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line)}

  /* Timeline */
/* Timeline */
.timeline {
  position: relative;
  margin: 40px 0;
  padding-left: 24px;
  border-left: 2px solid rgba(255,255,255,.15);
}

.timeline .tl {
  position: relative;
  margin-bottom: 32px;
  padding-left: 18px;
}

.timeline .marker {
  position: absolute;
  left: -10px;
  top: 6px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}

.timeline .content {
  background: rgba(255,255,255,.03);
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .3s, box-shadow .3s;
}

.timeline .content:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

.timeline h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.timeline .small {
  font-size: .9rem;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

  /* Testimonials */
  .slider{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04)}
  .slides{display:flex; transition:transform .6s var(--ease)}
  .slide{min-width:100%; padding:20px}
  .slide blockquote{margin:0; font-size:1.1rem}
  .slide .who{margin-top:10px; color:var(--muted)}
  .dots{display:flex; gap:8px; justify-content:center; padding:10px}
  .dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);background:#fff0; cursor:pointer}
  .dots button.active{background:var(--accent); border-color:transparent}

  /* Oferta */
.pricing {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.price-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: transform .3s, box-shadow .3s;
  position: relative;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

.price-card h3 {
  margin: 0 0 8px;
}

.price-card .price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}

.price-card .feats {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.price-card .feats li {
  margin: 6px 0;
  color: var(--muted);
}

.price-card .actions {
  margin-top: auto;
}

.price-card.featured {
  border: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(0,255,178,.2);
}

.price-card .label {
  position: absolute;
  top: -12px;
  right: 12px;
  background: var(--accent);
  color: #07131f;
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}


  /* FAQ */
#faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  transition: background .3s, border-color .3s;
}

#faq details[open] {
  background: rgba(255,255,255,.06);
  border-color: var(--accent);
}

#faq summary {
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  position: relative;
}

#faq summary::-webkit-details-marker {
  display: none; /* usuwa domyślną strzałkę */
}

#faq summary::after {
  content: "›";
  font-size: 1.2em;
  transform: rotate(90deg);
  transition: transform .3s ease;
  color: var(--muted);
}

#faq details[open] summary::after {
  transform: rotate(-90deg);
  color: var(--accent);
}

#faq details p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.5;
  animation: faqFade .3s ease;
}

@keyframes faqFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


  /* footer */
  /* FOOTER */
.site-footer {
  background: #070f1a;
  color: #cfe1ff;
  padding: 60px 20px 30px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: -10;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 40px;
}

.footer-col h4 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  color: #fff;
}

.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #cfe1ff;
  text-decoration: none;
  transition: color .2s;
}
.footer-col ul li a:hover {
  color: var(--accent);
}

.footer-col p {
  font-size: .9rem;
  line-height: 1.5;
}

.logo {
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
}

.social a {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.2rem;
  color: #cfe1ff;
  transition: color .2s;
}
.social a:hover {
  color: var(--accent);
}

/* Formularz */
.footer-col form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col input,
.footer-col textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: #fff;
}
.footer-col button {
  align-self: start;
}

.footer-bottom {
  margin-top: 40px;
  text-align: center;
  font-size: .85rem;
  color: #89a7a6;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
}



  /* Reveal + util */
  [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  [data-reveal].in{opacity:1; transform:none; align-items:center}
  .scrollbar{position:fixed; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),var(--vio)); transform-origin:0 50%; transform:scaleX(0); z-index:60}
  .go{position:fixed; right:24px; bottom:24px; width:54px;height:54px;border-radius:50%; display:grid; place-items:center; background:radial-gradient(120% 120% at 0% 0%, var(--accent), var(--sky)); color:#03121d; border:1px solid var(--line); transform:scale(0); opacity:0; transition:.25s}
  .go.show{transform:scale(1); opacity:1}

  /* Sticky CTA on mobile */
  .sticky-cta{position:sticky; bottom:0; z-index:40; background:linear-gradient(180deg, rgba(8,12,23,0), rgba(8,12,23,.85)); padding:12px}
  .sticky-cta .inner{display:flex; gap:12px; justify-content:center}
  @media (min-width:900px){ .sticky-cta{display:none} }

  /*logo*/
  .logo{width:150px; margin:0 auto;}


  /* ---------------------------------------- TEST ---------------------------------------- */
  .image-scroll-container {
  position: relative;
  width: 100%;
  height: 200px; /* wysokość widoczna */
  overflow: hidden;
}

.image-scroll-container .scroll-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: transform 6s ease-in-out;
}
.image-scroll-container:hover .scroll-image {
  transform: translateY(calc(-100% + 200px));
}

/* === RWD === */
/* === RWD pack (paste at the very end) === */
@media(max-width:1200px){.container{padding:0 18px}.nav .inner{height:58px}.menu a{padding:8px 10px}.hero{padding:0 3em}.lead{max-width:65ch}}
@media(max-width:960px){header.hero{grid-template-columns:1fr;min-height:78svh}.hero{padding:0 1.6em}.hero .art{min-height:360px;height:44svh}.term-screen{max-height:44svh}.section{padding:64px 0}.section-title{margin-bottom:18px}.cards-grid{--min:240px}.radials{grid-template-columns:repeat(2,1fr)}.proj-track{grid-template-columns:repeat(2,1fr)}.timeline{margin:28px 0}.slider .slide{padding:16px}.pricing{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{font-size:.95rem}.brand .dot{width:18px;height:18px}.menu{gap:6px}.menu a{padding:8px}}
@media(max-width:720px){.hero h1{font-size:clamp(30px,9vw,44px)}.eyebrow{font-size:.82rem}.lead{font-size:.98rem}.actions{gap:10px}.btn,.cta{padding:10px 14px;border-radius:10px}.cards-grid{--min:220px}.rad .ring{width:104px;height:104px}.rad .ring:after{width:80px;height:80px}.proj-rail{border-radius:12px}.proj-mini{padding:12px;border-radius:12px}.price-card{padding:16px}.price-card .price{font-size:1.25rem}.timeline .content{padding:12px 14px;border-radius:10px}.timeline .marker{width:14px;height:14px;left:-9px}.footer-col h4{font-size:1rem}.logo{width:132px}}
@media(max-width:560px){.container{padding:0 14px}.nav .inner{gap:10px}.brand{gap:8px}.menu{gap:4px;flex-wrap:wrap}.menu a{padding:7px 9px;border-radius:10px;font-size:.95rem}.cta{padding:9px 12px}.hero{padding:0 14px}.hero .art{min-height:300px}.term-chrome{height:34px;padding:0 10px}.term-screen{padding:12px 12px 14px}.section{padding:54px 0}.section-title h2{font-size:clamp(24px,7vw,32px)}.muted{font-size:.95rem}.cards-grid{--min:100%}.proj-track{grid-template-columns:1fr}.radials{grid-template-columns:1fr}.skills{gap:12px}.slider{border-radius:12px}.dots{gap:6px}.pricing{grid-template-columns:1fr}.price-card{padding:14px;border-radius:12px}.price-card .feats li{margin:5px 0}.footer-grid{grid-template-columns:1fr;gap:26px}.footer-bottom{margin-top:26px;padding-top:16px}.go{right:16px;bottom:16px;width:50px;height:50px}}
@media(max-width:400px){.hero h1{font-size:clamp(24px,10vw,32px)}.btn,.cta{width:100%;text-align:center}.term-chrome .title{font-size:.85rem}.price-card .price{font-size:1.15rem}}
/* Touch polish */
@media(hover:none){.card:hover .scroll-image{transform:none}.proj-mini:hover{transform:none;box-shadow:var(--shadow)}}
/* Safer media density */
@media(max-width:560px){.image-scroll-container{height:180px}.image-scroll-container:hover .scroll-image{transform:none}}

/* === perf hotfix header/footer === */
html{scroll-behavior:auto}
.nav{transform:translateZ(0);will-change:transform}
@media(min-width:961px){.nav{backdrop-filter:none;background:linear-gradient(180deg,rgba(8,12,23,.95),rgba(8,12,23,.82))}}
@media(max-width:960px){.nav{backdrop-filter:none;background:rgba(8,12,23,.96)}}
.term{box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.04)}
.site-footer{z-index:auto;transform:translateZ(0);will-change:transform;contain:paint}
.term-screen{will-change:scroll-position;contain:paint;overscroll-behavior:contain}