:root{
  --bg:#0a0a14;
  --bg-soft:#11111a;
  --accent:#00f2ff;
  --text:#e5e7eb;
  --text-soft:#9ca3af;
  --radius:20px;
}

*{ box-sizing:border-box }

/* ===== Hero / Squad ===== */
.squad{
  padding: clamp(80px,12vh,160px) clamp(20px,5vw,80px);
  background: radial-gradient(circle at 50% 30%, #1a0933 0%, var(--bg) 70%);
  max-width: 100vw;
  min-height: 400px;
}
.squad-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:40px;
  max-width:1200px; margin:0 auto;
}
.squad-text{ flex:1 1 500px; }
.squad-text h1{
  font-size: clamp(36px,6vw,64px); font-weight:800; margin:0 0 16px; color:var(--accent);
}
.squad-text p{ font-size: clamp(18px,2vw,22px); color:var(--text-soft); margin:0; }
.squad-image{ flex:1 1 400px; display:flex; justify-content:center; }
.squad-image img{
  max-width:100%; height:auto; border-radius:var(--radius); box-shadow:0 0 20px rgba(0,229,255,.08);
}

@media (max-width:768px){
  .squad-inner{ flex-direction:column; text-align:center; }
  .squad-text{ order:1; }
  .squad-image{ order:2; }
}

/* ===== Hero Tech ===== */
.hero-tech{
  padding: clamp(80px,12vh,160px) clamp(20px,5vw,80px);
  background: radial-gradient(circle at 50% 30%, #1a0933 0%, var(--bg) 70%);
  display:flex; flex-wrap:wrap; align-items:center; gap:40px;
  max-width:100vw; min-width:80vw; margin:0 auto;
  overflow:hidden; width:100%;
}
.hero-tech-text{ flex:1 1 500px; }
.hero-tech-text h1{
  font-size: clamp(36px,6vw,64px); font-weight:800; margin:0 0 16px; color:var(--accent);
}
.hero-tech-text p{ font-size: clamp(18px,2vw,22px); color:var(--text-soft); margin:0 0 12px; }
.hero-tech-img{ flex:1 1 400px; display:flex; justify-content:center; }
.hero-tech-img img{
  max-width:100%; height:auto; border-radius: var(--radius);
  box-shadow:0 0 20px rgba(0,229,255,.08);
}

/* ===== Galeria / Kafelki ===== */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
  padding: 80px clamp(20px,5vw,80px);
  max-width:100vw;
}
.thumb, .card{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  aspect-ratio:16/10; transition:.4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 20px rgba(0,229,255,.08);
}
.thumb:hover, .card:hover{ transform: translateY(-8px) scale(1.02); }
.thumb img, .card img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.7) saturate(1.2); transition: filter .4s;
}
.thumb:hover img, .card:hover img{ filter:brightness(.9); }

.label, .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.label .num{
  position:absolute; top:16px; left:20px; font-size:44px; font-weight:700;
  color:var(--accent); opacity:.35;
}
.label h3, .overlay h3{ margin:0 0 6px; font-size:20px; color:var(--accent); }
.label p, .overlay p{ margin:0; font-size:14px; color:var(--text-soft); }

@media (max-width:480px){
  .gallery, .hero-tech{ padding:60px 16px; }
  .thumb, .card{ min-width:0; }
}

/* ===== Popup (lightbox) ===== */
#popup{
  position:fixed; inset:0; background:#000e;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s; z-index:9999;
}
#popup[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.popup-close, #popup-close{
  position:absolute; top:24px; right:32px; font-size:36px;
  background:none; border:0; color:#fff; cursor:pointer;
}
.popup-center{ max-width:90vw; max-height:90vh; text-align:center; color:#fff; }
#popup-img{
  max-width:90vw; max-height:70vh; border-radius:var(--radius); margin-bottom:12px;
}
.popup-text h2, #popup h2{ margin:0 0 8px; font-size:28px; color:var(--accent); }
.popup-text p,  #popup p{ margin:0; font-size:16px; color:var(--text-soft); }

/* ===== Process (małe ikonki) ===== */
.process{
  display:flex; align-items:center; justify-content:center; gap:30px;
  margin:60px auto; flex-wrap:wrap;
}
.process-step{ text-align:center; max-width:140px; }
.process-step img{ width:100px; height:auto; display:block; margin:0 auto 10px; }
.process-step p{ font-size:14px; color:#e5e7eb; font-weight:600; }
.arrow{ width:50px; height:auto; opacity:.7; }

/* ===== Tech Slider (1) ===== */
.tech-slider{
  padding: clamp(32px,6vw,64px) clamp(20px,5vw,40px);
  max-width:1200px; margin:0 auto;
}
.tech-slider .ts-viewport{ position:relative; overflow:hidden; outline:none; }
.tech-slider .ts-track{ display:flex; transition: transform 400ms cubic-bezier(.4,0,.2,1); will-change: transform; }
.tech-slider .ts-slide{ flex:0 0 100%; user-select:none; }
.tech-slider .ts-slide img{ display:block; width:100%; height:auto; border-radius: var(--radius); }

/* Nawigacja */
.tech-slider .ts-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:1px solid rgba(255,255,255,.2);
  background: transparent; color:#fff; border-radius:50%; cursor:pointer;
}
.tech-slider .ts-prev{ left:8px; } .tech-slider .ts-next{ right:8px; }
.tech-slider .ts-nav:hover{ background: rgba(255,255,255,.08); }
.tech-slider .ts-nav:focus-visible{ outline:2px solid var(--accent); }

/* Dots */
.tech-slider .ts-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.tech-slider .ts-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#4b5563; opacity:.6; cursor:pointer;
}
.tech-slider .ts-dots button[aria-selected="true"]{ opacity:1; background: var(--accent); }

/* Copy */
.tech-slider .ts-copy{ max-width:900px; margin:16px auto 0; text-align:center; }
.tech-slider .ts-title{ color: var(--accent); margin:0 0 8px; font-size: clamp(20px,2.8vw,28px); }
.tech-slider .ts-desc{ color: var(--text-soft); margin:0; font-size: clamp(16px,2vw,18px); }

@media (max-width:480px){
  .tech-slider .ts-nav{ width:36px; height:36px; }
}

/* ===== Reveal (scroll-in) – JEDYNA wersja ===== */
[data-reveal]{
  opacity:0;
  transform: translateY(24px) scale(.98);
  filter: blur(6px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible{
  opacity:1; transform:none; filter: blur(0);
}
[data-reveal="left"]{ transform: translateX(-40px); }
[data-reveal="right"]{ transform: translateX(40px); }
[data-reveal="up"]{ transform: translateY(-24px); }
[data-reveal][data-delay="100"]{ transition-delay:.1s; }
[data-reveal][data-delay="200"]{ transition-delay:.2s; }
[data-reveal][data-delay="300"]{ transition-delay:.3s; }

/* ===== Tech Benefits ===== */
.tech-benefits{
  padding: clamp(60px,8vw,100px) clamp(20px,5vw,80px);
  
}
.tech-benefits .benefits-grid{
  display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  max-width:1200px; margin:0 auto;
}
.tech-benefits .benefit-card{
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 16px;
}
.tech-benefits .benefit-card .card-icon{ height:140px; margin-bottom:10px; }
.tech-benefits .benefit-card .card-icon img{
  width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius) - 6px);
}
.tech-benefits .benefit-card h3{ margin:0 0 8px; color:var(--text); font-size:18px; }
.tech-benefits .benefit-card p{ margin:0; color: var(--text-soft); }

/* ===== Sekcja ogólna (main-header itd.) – bez zmian funkcjonalnych ===== */
.main-header{
  position: relative; color: var(--text);
  background: linear-gradient(180deg, #0d141f 0%, #0b1117 100%);
  padding: clamp(40px, 10vw, 100px) 0; overflow: hidden;
}
.main-header .header-content{ max-width:1100px; margin:0 auto; padding:0 24px; text-align:center; }
.main-header h1{ margin:0 0 10px; color:#fff; font-size: clamp(28px,4.2vw,44px); line-height:1.1; }
.main-header p{ margin:0; color: var(--text-soft); font-size: clamp(16px,2.1vw,18px); }
.background-animation{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 80% 10%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(600px 300px at 20% 80%, rgba(0,255,200,.14), transparent 60%);
  opacity:.5;
}

/* ===== Tabs (air-drying) ===== */
.air-drying-section{ background: var(--bg); padding: clamp(40px,8vw,80px) 0; }
.air-drying-section .squad-inner{ max-width:1100px; margin:0 auto; padding:0 24px; }
.accent-text{ color: var(--accent); margin: 0 0 8px; }
.soft-text{ color: var(--text-soft); margin:0; }

.drying-tabs-container{ max-width:1100px; margin:20px auto 0; padding:0 24px; }
.drying-tabs-container input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.tab-labels{ display:grid; grid-template-columns:1fr 1fr; position:relative; border-bottom:1px solid rgba(255,255,255,.12); }
.tab-label{ text-align:center; padding:12px 10px; cursor:pointer; color:var(--text-soft); user-select:none; }
.tab-label:hover{ color:#fff; }
.tab-slider{
  position:absolute; left:0; bottom:-1px; width:50%; height:2px; background:var(--accent);
  transform: translateX(0%); transition: transform 250ms ease;
}

#tab-sun:checked ~ .tab-labels label[for="tab-sun"]{ color:#fff; }
#tab-industrial:checked ~ .tab-labels label[for="tab-industrial"]{ color:#fff; }
#tab-industrial:checked ~ .tab-labels .tab-slider{ transform: translateX(100%); }

.tab-content-wrapper{ margin-top:18px; }
.tab-content{ display:none; gap:16px; align-items:start; }
#content-sun:target, #content-industrial:target{ display:grid; } /* fallback */
#tab-sun:checked ~ .tab-content-wrapper #content-sun{ display:grid; }
#tab-industrial:checked ~ .tab-content-wrapper #content-industrial{ display:grid; }

.content-text-wrapper{ min-width:0; }
.content-title{ color:#fff; margin:0 0 8px; font-size: clamp(18px,2.6vw,24px); }
.content-image-wrapper{ min-width:0; aspect-ratio:16/9; }
.content-image{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius); }

@media (min-width:840px){ .tab-content{ grid-template-columns: 1.1fr 1fr; } }
@media (max-width:839.98px){
  .tab-content{ grid-template-columns: 1fr; }
  .content-image-wrapper{ aspect-ratio: 16/10; }
}

/* ===== Utility / A11y ===== */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile drobiazgi */
@media (max-width:480px){
  .ts-nav{ width:36px; height:36px; }
}

/* --------------- -- */
.process-tech {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 60px auto;
  flex-wrap: wrap;
}

.process-tech-step {
  text-align: center;
  max-width: 140px;
  color: white;
}

.process-tech-step img {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.process-tech-step p {
  font-size: 14px;
  color: #e5e7eb; /* dostosuj do swojego motywu */
  font-weight: 600;
}

.arrow {
  width: 50px;
  height: auto;
  opacity: 0.7;
}


/* --------------- -- */
/* === Headline style (dopasowane do screenów) === */
.headline{
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.2;
  margin: 0 0 20px;
  font-weight: 400;
  text-align: center;
  min-width: 100%;
}

/* Niebiesko-fioletowy gradient */
.headline .blue{
  display:inline-block;
  font-weight: 700;
  background: linear-gradient(90deg, #00d4ff, #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Żółty / pomarańczowy akcent */
.headline .yellow{
  color:#ffb400; /* ciepły, jak w screenie */
  font-weight: 800;
  display:inline-block;
}

/* Mocne wyróżnienie */
.headline .strong{
  font-weight:800;
}

/* Mobile */
@media (max-width:768px){
  .headline{
    font-size: clamp(22px, 7vw, 36px);
    text-align:center;
  }
}


/* =============== DARK NEO STYLE =============== */
.neo-root {
  position: relative;
  padding: clamp(80px,8vw,140px) 20px;
  background: radial-gradient(1000px 600px at 20% -10%, rgba(138,99,255,.15), transparent 60%),
              radial-gradient(1000px 500px at 80% 20%, rgba(0,224,255,.12), transparent 60%),
              linear-gradient(180deg,#07090f,#0c111a);
  color: #e6e8ef;
  overflow: hidden;
}
.neo-aurora::before {
  content:""; position:absolute; inset:-50%; background:conic-gradient(from 0deg,#8a63ff,#00e0ff,#00ffa7,#8a63ff);
  filter: blur(120px); opacity:.12; animation: spin 30s linear infinite;
}
@keyframes spin { to{ transform: rotate(360deg) } }

/* HEAD */
.neo-head { max-width:900px; margin:0 auto 60px; text-align:center }
.neo-head h2 {
  font-size:clamp(28px,4vw,44px);
  background:linear-gradient(90deg,#00e0ff,#8a63ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.neo-head p { color:#9aa3b2; line-height:1.7; }

/* PROCESS */
.neo-process {
  display:flex; flex-wrap:wrap; gap:32px; justify-content:center;
  margin-bottom:80px;
}
.neo-step {
  width:200px; text-align:center; position:relative;
  background:#0e131f; border-radius:18px; padding:28px 20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  transition:transform .35s ease, box-shadow .35s ease;
}
.neo-step:hover {
  transform:translateY(-8px);
  box-shadow:0 16px 36px rgba(0,0,0,.65), 0 0 0 2px rgba(0,224,255,.2);
}
.neo-ico { margin-bottom:14px; }
.neo-ico img { width:64px; filter:drop-shadow(0 3px 12px rgba(0,0,0,.6)); }
.neo-step h3 { margin:0; font-weight:700; }

/* SLIDER */
.neo-slider {
  position:relative; max-width:1200px; margin:0 auto;
  border-radius:20px; overflow:hidden;
  background:#0e131f; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.neo-track { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1) }
.neo-slide { min-width:100%; position:relative }
.neo-slide img { width:100%; height:540px; object-fit:cover; display:block }
.neo-slide::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 120px);
}

.neo-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(20,26,40,.75); border:1px solid rgba(255,255,255,.1);
  color:#fff; font-size:22px; display:grid; place-items:center;
  cursor:pointer; transition:all .25s;
}
.neo-prev{ left:12px } .neo-next{ right:12px }
.neo-nav:hover{ background:#00e0ff; border-color:#00e0ff; }

.neo-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; padding:6px 12px;
  background:rgba(10,14,22,.65); border-radius:999px;
}
.neo-dots button {
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer;
  background:#777; transition:.25s;
}
.neo-dots button[aria-selected="true"] {
  background:#00e0ff; box-shadow:0 0 10px #00e0ff;
}

.neo-copy { position:absolute; bottom:20px; left:20px; max-width:400px; z-index:2 }
.neo-title { margin:0 0 6px; color:#00e0ff; font-size:20px; font-weight:700 }
.neo-desc { margin:0; color:#cbd5e1; font-size:15px; line-height:1.5 }

/* REVEAL */
[data-reveal]{ opacity:0; transform:translateY(24px); filter:blur(6px); transition:.6s }
[data-reveal].is-visible{ opacity:1; transform:none; filter:none }
[data-reveal][data-delay="100"]{ transition-delay:.1s }
[data-reveal][data-delay="200"]{ transition-delay:.2s }
[data-reveal][data-delay="300"]{ transition-delay:.3s }

/* ===== NEO TECH – GLASS RAIL THEME (scoped) ===== */
#neo-tech{
  --neo-bg: linear-gradient(180deg,#070b12,#0a111a);
  --neo-aurora1: rgba(138,99,255,.16);
  --neo-aurora2: rgba(0,224,255,.14);
  --neo-glass: rgba(18,24,36,.5);
  --neo-stroke: rgba(255,255,255,.10);
  --neo-text: #e6e8ef;
  --neo-soft: #9aa3b2;
  --neo-accent: #00e0ff;
  --neo-accent-2: #8a63ff;
  --neo-r: 18px;
  --neo-shadow: 0 18px 48px rgba(0,0,0,.55);
  position: relative;
  border-radius: 5%;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--neo-text);
  background: radial-gradient(900px 520px at 15% -10%,var(--neo-aurora1),transparent 60%),
              radial-gradient(900px 520px at 85% 0%,var(--neo-aurora2),transparent 60%),
              var(--neo-bg);
  overflow: hidden;
  isolation: isolate;
}

/* delikatna „aurora” – nie wymaga dodatkowego markupu */
#neo-tech .neo-aurora::before{
  content:"";
  position:absolute; inset:-60%;
  background: conic-gradient(from 0deg,var(--neo-accent),var(--neo-accent-2),var(--neo-accent));
  filter: blur(140px);
  opacity:.10;
  animation: neoSpin 28s linear infinite;
  z-index:-1;
}
@keyframes neoSpin { to{ transform: rotate(360deg); } }

/* ===== HEAD ===== */
#neo-tech .neo-head{
  max-width: min(1100px,95vw);
  margin: clamp(36px,6vw,64px) auto 28px;
  text-align: center;
  padding: 0 16px;
}
#neo-tech .neo-head h2{
  margin: 0 0 10px;
  font-size: clamp(28px,4.2vw,48px);
  line-height: 1.3;
  letter-spacing: .2px;
  background: linear-gradient(90deg,var(--neo-accent),var(--neo-accent-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
#neo-tech .neo-head h2 span{
  text-shadow: 0 0 24px rgba(0,224,255,.25);
}
#neo-tech .neo-head p{
  margin: 0 auto;
  max-width: 72ch;
  color: var(--neo-soft);
  font-size: clamp(16px,1.8vw,18px);
  line-height: 1.75;
}

/* ===== PROCESS – poziomy „rail” z glass-kartami ===== */
#neo-tech .neo-process{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px,1fr);
  gap: clamp(14px,2vw,22px);
  align-items: stretch;
  max-width: min(1200px,95vw);
  margin: 26px auto 40px;
  padding: 10px;
  position: relative;
}
#neo-tech .neo-process::before{
  content:"";
  position:absolute; left: clamp(10px,2vw,20px); right: clamp(10px,2vw,20px);
  top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg,transparent,rgba(181, 178, 178, 0.18),transparent);
  filter: blur(.3px);
  pointer-events: none;
}
#neo-tech .neo-step{
  position: relative;
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: var(--neo-r);
  background: rgb(71 110 189 / 50%);
  border: 1px solid var(--neo-stroke);
  box-shadow: var(--neo-shadow);
  backdrop-filter: blur(10px);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease, border-color .32s ease;
}
#neo-tech .neo-step::after{
  /* konektor punktowy na railu */
  content:"";
  position:absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle,var(--neo-accent) 0%, transparent 66%);
  box-shadow: 0 0 12px var(--neo-accent);
  opacity:.7; pointer-events:none;
}
#neo-tech .neo-step:hover{
  transform: translateY(-6px);
  border-color: rgba(0,224,255,.35);
  box-shadow: 0 20px 58px rgba(0,0,0,.66), 0 0 0 1px rgba(0,224,255,.15) inset;
}
#neo-tech .neo-ico{
  width: 230px; height: 230px; margin: 0 auto 10px;
  border-radius: 50%;
  border: 1px solid var(--neo-stroke);
  background: radial-gradient(160px 160px at 30% 10%,rgba(255,255,255,.08),transparent),
              linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  display:grid; place-items: center left;
}
#neo-tech .neo-ico img{
  width: 180px; height: 180px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  border-radius: 25px;
}
#neo-tech .neo-step h3{
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing:.3px;
}

/* mobile: pionowa oś */
@media (max-width: 860px){
  #neo-tech .neo-process{
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
  #neo-tech .neo-process::before{ display:none; }
}

/* ===== SLIDER – ramka „rail”, szklana kopia i kreski-kropki ===== */
#neo-tech .neo-slider{
  position: relative;
  max-width: min(1240px,95vw);
  margin: 10px auto 70px;
  border-radius: calc(var(--neo-r) + 2px);
  overflow: clip;
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border: 1px solid var(--neo-stroke);
  box-shadow: var(--neo-shadow);
}
#neo-tech .neo-track{ display:flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
#neo-tech .neo-slide{
  min-width: 100%;
  position: relative;
  aspect-ratio: 16/9;        /* spójny wymiar */
  background: #0b121a;
}
#neo-tech .neo-slide img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
#neo-tech .neo-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top,rgba(0,0,0,.55),transparent 30%);
}

/* strzałki */
#neo-tech .neo-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(12,18,28,.7);
  border: 1px solid var(--neo-stroke);
  color: #fff; font-size: 22px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s, transform .2s, border-color .25s;
  backdrop-filter: blur(6px);
  z-index: 5;                 /* <— KLUCZ: zawsze nad slajdami */
  pointer-events: auto;       /* <— KLUCZ: klikalne nawet przy „dziwnych” nakładkach */
}
#neo-tech .neo-prev{ left: 12px; }
#neo-tech .neo-next{ right: 12px; }


/* „kreski-kropki” */
#neo-tech .neo-dots{
  position:absolute; left:50%; bottom: 14px; transform: translateX(-50%);
  display:flex; gap: 8px; padding: 6px 10px;
  background: rgba(7,9,14,.6); border:1px solid var(--neo-stroke);
  border-radius: 999px; backdrop-filter: blur(8px);
}
#neo-tech .neo-dots button{
  width: 18px; height: 6px; border-radius: 6px; border:0; cursor:pointer;
  background: rgba(255,255,255,.28); opacity:.7; transition: opacity .2s, width .2s;
}
#neo-tech .neo-dots button[aria-selected="true"]{
  opacity:1; width: 28px; background: linear-gradient(90deg,var(--neo-accent),var(--neo-accent-2));
  box-shadow: 0 0 16px rgba(0,224,255,.55);
}

/* szklany box z treścią (aside.neo-copy w Twoim HTML) */
#neo-tech .neo-copy{
  position:absolute; left: 16px; bottom: 16px; z-index: 3;
  max-width: min(520px, 85%);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10,14,22,.55);
  border: 1px solid var(--neo-stroke);
  backdrop-filter: blur(8px);
}
#neo-tech .neo-title{
  margin: 0 0 4px; font-size: clamp(16px,2vw,18px); font-weight: 800;
  background: linear-gradient(90deg,var(--neo-accent),var(--neo-accent-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
#neo-tech .neo-desc{
  margin: 0; color: var(--neo-soft); font-size: clamp(13px,1.8vw,15px); line-height: 1.55;
}

/* ===== Reveal (zgodne z tym, co już masz) ===== */
#neo-tech [data-reveal]{ opacity:0; transform: translateY(22px); filter: blur(6px); transition: .6s; }
#neo-tech [data-reveal].is-visible{ opacity:1; transform:none; filter:none; }
#neo-tech [data-reveal][data-delay="100"]{ transition-delay:.1s }
#neo-tech [data-reveal][data-delay="200"]{ transition-delay:.2s }
#neo-tech [data-reveal][data-delay="300"]{ transition-delay:.3s }

/* === NEO: hard-fix klikalności strzałek === */
#neo-tech { position: relative; isolation: isolate; }

#neo-tech .neo-aurora, 
#neo-tech .neo-aurora::before{
  pointer-events: none !important;
  z-index: 0 !important;
}

#neo-tech .neo-slider{
  position: relative !important;
  z-index: 10 !important;          /* slider ponad aurorą i tłem */
  overflow: hidden;
}

#neo-tech .neo-track{
  position: relative !important;
  z-index: 1 !important;           /* track pod strzałkami */
  will-change: transform;
}

#neo-tech .neo-slide::after{
  pointer-events: none !important; /* overlay nie przechwytuje klików */
}

#neo-tech .neo-nav{
  position: absolute !important;
  z-index: 50 !important;          /* zawsze na wierzchu */
  pointer-events: auto !important;
}

#neo-tech .neo-copy{
  position: absolute !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* ==== DESKTOP-ONLY: odblokowanie klików na strzałkach ==== */
@media (min-width: 1025px) {
  #neo-tech { position: relative; isolation: isolate; }

  /* Aurora NIGDY nie łapie klików i siedzi pod spodem */
  #neo-tech .neo-aurora,
  #neo-tech .neo-aurora::before{
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Slider nad tłem, ale nie nad strzałkami */
  #neo-tech .neo-slider{
    position: relative !important;
    z-index: 1 !important;
  }

  /* Track pod strzałkami (transform tworzy stacking-context) */
  #neo-tech .neo-track{
    position: relative !important;
    z-index: 1 !important;
  }

  /* Pseudo-overlay NIE przechwytuje myszki */
  #neo-tech .neo-slide::after{
    pointer-events: none !important;
  }

  /* Strzałki na absolutnym wierzchu i klikalne */
  #neo-tech .neo-nav{
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  #neo-tech .neo-prev{ left: 12px !important; }
  #neo-tech .neo-next{ right: 12px !important; }

  /* Opcjonalnie: opis (copy) pod strzałkami */
  #neo-tech .neo-copy{
    position: absolute !important;
    z-index: 5 !important;
    pointer-events: auto;
  }
}

/* ===== ALTERNATYWNY MOBILE STYLE (≤768px) ===== */
/* === NEO SLIDER — MOBILE HARD FIX (≤768px) === */
@media (max-width: 768px){

  /* 1) Obraz ma być widoczny – zero overlay na slajdzie */
  #neo-tech .neo-slide::after{
    content: none !important;
  }

  /* 2) Slajd i obrazek: stabilna wysokość, nic go nie przykrywa */
  #neo-tech .neo-slide{
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #neo-tech .neo-slide img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;  /* stała proporcja */
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* 3) OPIS – ma być POD obrazem (nie overlay!) */
  #neo-tech .neo-copy{
    position: static !important;        /* klucz: żadnego absoluta */
    margin: 12px 4px 0 !important;      /* odstęp pod zdjęciem */
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(25,30,45,.92) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 1 !important;              /* pod strzałkami, ale nie ma overlay */
  }

  #neo-tech .neo-title{
    font-size: 18px !important;
    margin: 0 0 8px !important;
  }
  #neo-tech .neo-desc{
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }

  /* 4) STRZAŁKI – tylko na obrazie, nie na tekście */
  #neo-tech .neo-nav{
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: 10px !important;   /* przyklejone do prawej krawędzi */
    transform: none !important;
    width: 36px; height: 36px;
    margin: 4px 0;           /* odstęp między przyciskami */
    border-radius: 50%;
    background: rgba(15,18,28,.8);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 5;
  }
  /* pozycjonowanie w kolumnie */
  #neo-tech .neo-prev{
    position: absolute !important;
    bottom: 60px !important;   /* wyżej */
  }
  #neo-tech .neo-next{
    position: absolute !important;
    bottom: 10px !important;   /* niżej */
  }

  /* 5) Porządek warstw – track pod strzałkami; nic nie zasłania klików */
  #neo-tech .neo-track{
    position: relative !important;
    z-index: 0 !important;
  }

  /* 6) Kropeczki pod opisem (opcjonalnie) */
  #neo-tech .neo-dots{
    margin: 10px 0 0 !important;
    text-align: center !important;
  }
  #neo-tech .neo-dots button{
    width: 10px !important; height: 10px !important;
    margin: 0 4px !important;
    border-radius: 50% !important;
  }
  #neo-tech .neo-dots button.is-active{
    background: var(--neo-accent,#3cf) !important;
  }
  
  /* -------------------------------- Siatka i oddech ---------------- */
    #neo-tech .neo-process{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:0 0 28px;       /* bez bocznych marginesów */
    margin:20px 0;
  }

  #neo-tech .neo-step{
    width:100% !important;  /* pełna szerokość */
    border-radius:18px;
    padding:22px 0;
    background:linear-gradient(180deg, rgba(28,36,58,.9), rgba(18,24,40,.85));
    border:1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }

  #neo-tech .neo-ico{
    width:120px; height:120px;
    margin:0 auto 10px;
    border-radius:20px;
    display:grid; place-items:center;
    background:rgba(20,28,44,.6);
    box-shadow: inset 0 2px 4px rgba(255,255,255,.05),
                0 6px 14px rgba(0,0,0,.3);
  }

  #neo-tech .neo-ico img{
    width:88px; height:88px;
    object-fit:contain;
    border-radius:14px;
  }

  #neo-tech .neo-step h3{
    margin:0;
    font-size:16px;
    font-weight:600;
    text-align:center;
    color:#eaf6ff;
    letter-spacing:.3px;
  }

  /* efekt hover/tap – glow + uniesienie */
  @media (hover:hover){
    #neo-tech .neo-step:hover{
      transform:translateY(-4px);
      border-color:rgba(140,200,255,.25);
      box-shadow:0 12px 28px rgba(0,0,0,.45),
                 0 0 22px rgba(0,200,255,.25);
    }
  }
  #neo-tech .neo-step:active{
    transform:scale(.98);
  }
}