/* RESET */
*{box-sizing:border-box} html,body{height:100%} body{margin:0}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}

/* TOKENS */
:root{
  --bg:#0b1220; --text:#e6eaf2; --muted:#a7b0c3;
  --primary:#6d28d9; --secondary:#06b6d4; --accent:#a3e635;
  --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.035);
  --border:rgba(255,255,255,.10); --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
  --container:1200px;
}

/* JEDNO, STAŁE TŁO */
body{
  background: var(--bg);
  color:var(--text);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:-10vh -10vw; z-index:-1; pointer-events:none;
  background:
    radial-gradient(720px 420px at 15% -8%,  rgba(109,40,217,.20), transparent 70%),
    radial-gradient(640px 360px at 85% -6%, rgba(6,182,212,.16),  transparent 70%),
    radial-gradient(800px 460px at 50% 110%, rgba(109,40,217,.12), transparent 70%);
}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:clamp(48px,7vw,96px) 0}
.grid-auto{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-two{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.grid-two{grid-template-columns:1fr 1fr}}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,24,43,.65); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease,opacity .25s ease;
}
html.dock-on .header{transform:translateY(-100%);opacity:0;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.nav-links{display:flex;gap:12px;flex-wrap:wrap}
.nav-links a{color:#cfd6e6;font-size:14px;opacity:.95;padding:8px 10px;border-radius:10px}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}

/* Hero */
.hero{padding:clamp(64px,10vw,120px) 0 clamp(32px,7vw,72px)}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0 0 16px;font-weight:900}
.hero p{max-width:60ch;color:var(--muted);margin:0}
.actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:800;border:1px solid transparent;transition:transform .08s ease,filter .2s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Karty / bloki */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;backdrop-filter:blur(8px);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.mock{aspect-ratio:16/10;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));display:grid;place-items:center;color:#9aa3b5;font-size:14px}

/* Case / testimonials / faq */
.case{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,3vw,24px)}
.metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.kpi .val{font-size:24px;font-weight:900}.kpi .lbl{font-size:12px;color:var(--muted)}

.faqs{display:grid;gap:10px}
.faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0 14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:14px 6px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq .icon{transition:transform .25s ease;opacity:.9}.faq[open] .icon{transform:rotate(45deg)}
.faq .ans{color:var(--muted);padding:0 6px 14px}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity;transition-delay:var(--d,0s)}
.reveal[data-reveal="left"]{transform:translateX(-24px)}
.reveal[data-reveal="right"]{transform:translateX(24px)}
.reveal.show{opacity:1;transform:none}
.reveal-group>.reveal{transition-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1!important;transform:none!important}.btn,.card{transition:none}}

/* Dock */
.side-dock{position:fixed;right:16px;top:50%;transform:translateY(-50%) translateX(16px);z-index:60;display:none;flex-direction:column;gap:10px}
@media (min-width:1100px){.side-dock{display:flex;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease} html.dock-on .side-dock{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}}
.side-dock .dock-inner{display:flex;flex-direction:column;gap:8px;background:rgba(16,24,43,.65);backdrop-filter:saturate(160%) blur(8px);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.dock-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#dfe6fb;position:relative;transition:background .2s ease,transform .12s ease,color .2s ease}
.dock-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.dock-btn.active{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:#fff;border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.3)}
.dock-btn .tip{position:absolute;right:48px;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;background:rgba(10,14,24,.95);color:#fff;font-size:12px;white-space:nowrap;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:opacity .15s ease,transform .15s ease}
.dock-btn:hover .tip{opacity:1;transform:translateY(-50%) translateX(-2px)}

/* Chat */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(109,40,217,.40),0 0 0 0 rgba(6,182,212,.30),0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.24)}70%{box-shadow:0 0 0 14px rgba(109,40,217,0),0 0 0 26px rgba(6,182,212,0),0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.24)}100%{box-shadow:0 0 0 0 rgba(109,40,217,0),0 0 0 0 rgba(6,182,212,0),0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.24)}}
.chat-launcher{position:fixed;left:16px;bottom:16px;z-index:65;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#4c7ff8,var(--secondary));color:#fff;border:none;outline:none;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.24);animation:pulse 2.8s ease-out infinite;transition:transform .12s ease,filter .2s ease,box-shadow .2s ease}
.chat-launcher:hover{filter:brightness(1.07);box-shadow:0 14px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.28)}
.chat-launcher:active{transform:translateY(1px) scale(.985)}
.chat-panel{position:fixed;left:16px;bottom:86px;z-index:65;width:min(420px,calc(100vw - 32px));max-height:min(70vh,720px);display:flex;flex-direction:column;background:rgba(10,14,24,.92);backdrop-filter:blur(10px) saturate(140%);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-title{font-weight:800}
.chat-close{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:8px;padding:6px 8px;cursor:pointer;font-weight:700}
.chat-body{padding:12px;display:grid;gap:10px;overflow:auto}
.chat-msg{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px;font-size:14px;color:#e8ecf7}
.chat-msg.me{justify-self:end;background:linear-gradient(135deg,var(--primary),#4c7ff8);color:#fff;border-color:rgba(255,255,255,.18)}
.chat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
.chat-input input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:10px 12px;outline:none}
.chat-input button{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;transition:filter .2s ease,transform .05s ease}
.chat-input button:hover{filter:brightness(1.07)}
.chat-input button:active{transform:translateY(1px) scale(.99)}

/* Footer */
.footer{position:relative;isolation:isolate;background:rgba(16,24,43,.60);backdrop-filter:saturate(150%) blur(8px)}
.footer-main{padding:36px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 0;color:#9aa3b5;font-size:13px}
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:24px 0}
.socials a{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);padding:16px;border-radius:14px;color:#c7cfde;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.socials a:hover{background:rgba(255,255,255,.08);color:#fff}
.columns{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.columns h4{margin:0 0 10px;font-size:18px}
.list{display:grid;gap:8px;color:#b6bed0;font-size:14px}
.list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.small{font-size:13px;color:#9aa3b5}

/* Produkty (bez nakładek tła) */
.products{position:relative}
.p-hero{text-align:center;max-width:900px;margin:0 auto 24px}
.p-hero .kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#dfe6fb;font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.p-hero h2{margin:10px 0 8px;font-size:clamp(26px,4.6vw,40px);line-height:1.1;font-weight:900}
.p-hero .grad{background:linear-gradient(135deg,var(--primary),#4c7ff8,var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.p-hero .lead{color:var(--muted);margin:0 auto;max-width:70ch}

.p-rows{display:grid;gap:16px}
.p-row{background:var(--surface-2);border:1px solid var(--border);border-radius:18px;padding:18px;backdrop-filter:blur(8px)}
.row-head h3{margin:0 0 6px;font-size:20px;font-weight:900}
.row-desc{margin:0 0 10px;color:#c4cde0;font-size:14px}
.row-split{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){.row-split{grid-template-columns:1fr 1fr}}
.mini{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}
@media (min-width:900px){.mini--right{position:relative}
.mini--right::before{content:"";position:absolute;left:-8px;top:10%;bottom:10%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}}
.mini-title{font-weight:900;display:flex;align-items:center;gap:8px}
.mini-ico{font-size:20px}
.mini-tag{color:#c9d2ea;font-size:14px;margin-top:2px}
.mini-list{margin:10px 0 0;padding-left:18px}
.mini-list li{margin:6px 0;font-size:14px;color:#e0e7fb}
.mini-list li::marker{color:#8aa4ff}

/* a11y reduce motion */
@media (prefers-reduced-motion:reduce){
  .side-dock,.chat-panel,.chat-launcher{transition:none!important}
  .chat-launcher{animation:none!important}
}
/* --- MOBILE NAV: hamburger + panel --- */

/* --- MOBILE NAV: obrazek jako przycisk + panel --- */

/* sam przycisk – bez obramowania, bez kółka */
.nav-toggle{
  display:none;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  cursor:pointer;
}

/* sama grafika – nic nie "rysujemy", pokazuje się 1:1 */
.nav-toggle-img{
  display:block;
  height:32px;      /* możesz zmienić np. na 24px / 40px */
  width:auto;
  border:none;
  border-radius:0;
  box-shadow:none;
}

@media (max-width: 900px){

  .nav{
    min-height:56px;
  }

  /* przycisk widoczny na mobile */
  .nav-toggle{
    display:block;
  }

  /* Animacja ikony hamburgera – powiększanie / zmniejszanie */
.nav-toggle-img{
  transition: transform .32s cubic-bezier(.3, .8, .3, 1);
  transform-origin: center;
}

/* Stan otwarty – zdjęcie lekko się powiększa */
.nav-toggle.is-open .nav-toggle-img{
  transform: scale(1.18);
}

/* Stan zamknięty – wraca do normalnego rozmiaru */
.nav-toggle:not(.is-open) .nav-toggle-img{
  transform: scale(1);
}


  /* PANEL MENU – „wpada” z rozmyciem + skalą */
  .nav-links{
    position:fixed;
    top:68px;
    left:16px;
    right:16px;
    background:rgba(7,11,22,0.96);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.18);
    padding:10px 10px 12px;
    flex-direction:column;
    gap:4px;
    display:flex;              /* ZAMIAST display:none */
    max-height:0;              /* schowane */
    opacity:0;
    transform:translateY(-10px) scale(.96);
    filter:blur(4px);
    overflow:hidden;
    pointer-events:none;
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    z-index:80;
    transition:
      max-height .45s cubic-bezier(.16,1,.3,1),
      opacity .25s ease-out,
      transform .45s cubic-bezier(.16,1,.3,1),
      filter .45s ease-out;
  }

  /* stan OTWARTY: pełne menu */
  body.nav-open .nav-links{
    max-height:420px;
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
    pointer-events:auto;
  }

  /* LINKI – wejście „po kolei” */
  .nav-links a{
    padding:9px 10px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
    font-size:15px;
    opacity:0;
    transform:translateY(6px);
  }

  /* kolorowy „swipe” w tle przy hoverze */
  .nav-links a::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(109,40,217,.3),rgba(6,182,212,.3));
    opacity:0;
    transform:translateX(-20%);
    transition:opacity .2s ease,transform .25s ease;
    z-index:-1;
  }

  .nav-links a:hover::before{
    opacity:1;
    transform:translateX(0);
  }

  .nav-links a:hover{
    background:rgba(255,255,255,.03);
  }

  /* animacja wejścia linków */
  @keyframes navItemIn{
    0%{opacity:0;transform:translateY(6px);}
    100%{opacity:1;transform:translateY(0);}
  }

  body.nav-open .nav-links a{
    animation:navItemIn .35s cubic-bezier(.2,.9,.3,1) forwards;
  }
  body.nav-open .nav-links a:nth-child(1){animation-delay:.05s;}
  body.nav-open .nav-links a:nth-child(2){animation-delay:.10s;}
  body.nav-open .nav-links a:nth-child(3){animation-delay:.15s;}
  body.nav-open .nav-links a:nth-child(4){animation-delay:.20s;}
  body.nav-open .nav-links a:nth-child(5){animation-delay:.25s;}
}