/* ===== Design tokens ===== */
    :root{
      --bg:#0a0b0d;           /* mocna czerń */
      --panel:#0f1115;
      --line:#1a2433;
      --text:#ffffff;
      --muted:#b8c2d3;
      --blue:#1E90FF;         /* akcent */
      --blue-2:#63B3FF;       /* hover/gradient */
      --radius:14px;
      --shadow:0 14px 34px rgba(0,0,0,.45);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(30,144,255,.12), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(30,144,255,.08), transparent 60%),
        var(--bg);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}

    /* ===== Nav ===== */
    .nav{
      position:sticky; top:0; z-index:100;
      backdrop-filter: blur(8px) saturate(140%);
      background:rgba(10,11,13,.72);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      max-width:1200px; margin:0 auto; padding:10px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:20px;
    }
    .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeSlideIn 1s ease forwards;
}

.brand img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(30,144,255,0.25));
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeSlideIn 1s ease forwards;
}

.brand-text {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(30,144,255,0.4);
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeSlideInText 1.2s ease forwards;
  animation-delay: 0.2s;
}

/* Animacje wejścia */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideInText {
  from { opacity: 0; transform: translateX(-30px); text-shadow: none; }
  to { opacity: 1; transform: translateX(0); text-shadow: 0 0 8px rgba(30,144,255,0.4); }
}

/* Efekt po najechaniu */
.brand:hover .brand-text {
  color: #63B3FF;
  text-shadow: 0 0 16px rgba(99,179,255,0.9);
  transition: 0.3s ease;
}

    .menu{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
    .menu a{
      padding:10px 12px; border-radius:10px; color:#eaf2ff; font-weight:700; letter-spacing:.2px;
      transition:.2s ease; border:1px solid transparent;
    }
    .menu a:hover{border-color:#183457; background:#0f1420}
    .menu .cta{
      background:linear-gradient(180deg,var(--blue),#0a68e6);
      padding:10px 16px; border-radius:12px; box-shadow:0 10px 24px rgba(30,144,255,.28);
    }
    .menu .cta:hover{filter:brightness(1.08)}

    /* ===== HERO ===== */

  .hero{
  position:relative;
  min-height:75vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background-size: calc(100% + var(--heroZoom, 0%)) auto; /* slow-zoom */

  /* Parallax sterowany zmienną CSS --heroY (działa także na iOS) */
  background-image:url("zwijak/zwijak1.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center var(--heroY, 0px);
  background-attachment:scroll;          /* zamiast fixed – JS robi płynny parallax */
  transition:background-position .12s ease-out;
  will-change:background-position;
}

/* Winieta */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,.25), transparent 55%),
    radial-gradient(1200px 600px at 50% 110%, rgba(0,0,0,.25), transparent 55%);
  mix-blend-mode:multiply;
  pointer-events:none; z-index:1;
}

/* Filmowy gradient */
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(0,0,0,.85) 0%,
                                     rgba(8,14,24,.78) 45%,
                                     rgba(0,0,0,.55) 100%);
  z-index:2;
}

/* Treść wjeżdża z góry */
.hero-inner{
  position:relative; z-index:3;
  text-align:center; padding:90px 20px 120px; max-width:980px;
  opacity:0; transform:translateY(-50px);
  animation:heroSlideDown 1s ease forwards;
}
@keyframes heroSlideDown{
  from{opacity:0; transform:translateY(-50px)}
  to{opacity:1; transform:translateY(0)}
}

/* Opcja dostępności – mniej ruchu */
@media (prefers-reduced-motion: reduce){
  .hero, .hero-inner{animation:none; transition:none}
}

/* ===== PRZYCISKI (niebieskie jak wcześniej) ===== */
.btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid #204a7a;
  background: linear-gradient(180deg, #1E90FF, #0a68e6);
  color: #fff;
  box-shadow: 0 14px 30px rgba(30,144,255,.3);
  transition: all .25s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn.secondary {
  background: transparent;
  color: #d9e9ff;
  border-color: #214267;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(30,144,255,.4);
}

/* spójność typografii w hero */
.hero h1{margin:0 0 12px; font-size:clamp(28px,5vw,48px); font-weight:800}
.hero p{margin:0 0 26px; color:var(--muted); font-size:clamp(15px,2.6vw,18px)}

    /* ===== Sections base ===== */
    section{padding:92px 20px 76px}
    .container{max-width:1200px; margin:0 auto}
    .title{font-size:clamp(24px,4vw,34px); text-align:center; margin:0 0 10px}
    .lead{color:var(--muted); text-align:center; max-width:840px; margin:0 auto 30px}

    /* ===== Benefits ===== */
    .grid{display:grid; gap:22px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .card{
      background:linear-gradient(180deg,#12161f,#0e131c);
      border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    }
    .icon{
      width:42px; height:42px; border-radius:10px; display:grid; place-items:center; margin-bottom:10px;
      background:linear-gradient(180deg, rgba(30,144,255,.18), rgba(30,144,255,.06));
      border:1px solid #1c3d66; color:#a6d2ff; font-size:22px;
    }
    .card h3{margin:4px 0 8px}
    .muted{color:var(--muted)}

    /* ===== Gallery (4) ===== */
    /* ===== Sekcje obraz + tekst (zamiast siatki galerii) ===== */
.features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 40px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* co drugi blok odwracamy – raz zdjęcie z lewej, raz z prawej */
.feature-row:nth-child(even) {
  flex-direction: row-reverse;
}

.feature-media img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid #1e3a5b;
  box-shadow: var(--shadow);
  display: block;
  object-fit: cover;
}

.feature-copy h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.feature-copy p {
  margin: 0 0 10px;
  color: var(--muted);
}

/* mały akcent */
.feature-tag {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #8fb7ff;
  margin-bottom: 4px;
}

/* RWD – na telefonie wszystko pod sobą */
@media (max-width: 900px) {
  .feature-row {
    flex-direction: column !important;
    align-items: flex-start;
  }
}


    /* ===== FAQ ===== */
    .faq{max-width:920px; margin:0 auto}
    details{
      background:#0f141e; border:1px solid #183457; border-radius:12px; padding:16px 18px; margin:10px 0;
      box-shadow:var(--shadow)
    }
    summary{cursor:pointer; font-weight:700}
    details[open]{outline:1px solid #2a5da0}

    /* ===== Contact ===== */
    .contact{
      background:linear-gradient(180deg,#0b0e13,#090b0f); border-top:1px solid var(--line);
      border-bottom:1px solid var(--line)
    }
    .contact .box{
      max-width:820px; margin:0 auto; background:#0e1219; border:1px solid #183457; border-radius:16px; padding:26px;
      display:grid; gap:10px; box-shadow:var(--shadow)
    }
    .contact a{color:#bfe0ff}

    /* ===== FORMULARZ KONTAKTOWY ===== */

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 12px 14px;
      background: #0d1118;
      border: 1px solid #1a2433;
      color: #e8f0ff;
      border-radius: 10px;
      font-size: 15px;
    }

    .contact-form textarea {
      min-height: 120px;
      resize: vertical;
    }

    .contact-form button {
      margin: 0 auto;
      padding: 12px 26px;
      background: linear-gradient(180deg, #1E90FF, #0a68e6);
      border: none;
      color: white;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(30,144,255,.28);
      transition: .2s ease;
    }

    .contact-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(30,144,255,.35);
    }


    /* ===== Compare ===== */
    .compare{display:grid; grid-template-columns:1fr 1fr; gap:20px}
    .compare .col{background:#0f141e; border:1px dashed #244a7a; border-radius:12px; padding:20px}
    .compare h3{margin-top:0; color:#a7ceff}

    /* ===== Animations ===== */
    [data-animate]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
    [data-animate].in{opacity:1; transform:none}

    /* ===== Responsive ===== */
    @media (max-width:1024px){ .grid-3{grid-template-columns:1fr 1fr} .gallery{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:600px){ .grid-3{grid-template-columns:1fr} .menu{gap:10px} .brand img{height:40px} }
    
    /* Mikroanimacje ikon w „Korzyściach” */
.icon {
  animation: iconFloat 4.5s ease-in-out infinite, iconPulse 5.5s ease-in-out infinite;
  transform-origin: center;
}
.card:hover .icon {
  filter: drop-shadow(0 0 10px rgba(30,144,255,.45));
  transform: translateY(-2px) scale(1.03);
}

/* delikatne unoszenie góra-dół */
@keyframes iconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
/* pulsujący „blue glow” */
@keyframes iconPulse {
  0%,100% { box-shadow: 0 0 0 rgba(30,144,255,0); }
  50%     { box-shadow: 0 0 18px rgba(30,144,255,.35); }
}

/* szacunek dla preferencji dostępności */
@media (prefers-reduced-motion: reduce){
  .icon, .card:hover .icon { animation: none; transform: none; }
}

/* MOBILE: menu pod logo zamiast po prawej */
@media (max-width: 768px) {
  .nav-inner{
    flex-direction: column;      /* zamiast obok siebie */
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px 10px;
  }

  .menu{
    width: 100%;
    justify-content: center;     /* linki na środku */
    gap: 16px;
  }
}