:root{
  --ink:#0b1f3a;
  --ink2:#16365f;
  --bg:#f3f6fb;
  --card:#ffffff;
  --muted:#5b6f8b;
  --line:rgba(11,31,58,.12);
  --line2:rgba(11,31,58,.18);
  --accent:#1b63ff;
  --accent2:#2f8cff;
  --good:#16a34a;

  --max:1140px;
  --r:16px;
  --r2:22px;
  --shadow:0 18px 40px rgba(11,31,58,.12);
  --shadow2:0 10px 24px rgba(11,31,58,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

.wrap{width:min(var(--max), calc(100% - 2rem)); margin:0 auto}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0
}
.skip{
  position:absolute;left:-9999px;top:10px;z-index:9999;
  background:#fff;border:1px solid var(--line);padding:.6rem .9rem;border-radius:999px;
}
.skip:focus{left:10px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(243,246,251,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:.75rem}

.logo{display:flex;align-items:center;gap:.7rem}
.logo__mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(27,99,255,.18), rgba(47,140,255,.14));
  border:1px solid rgba(27,99,255,.25);
  position:relative;
}
.logo__mark::after{
  content:""; position:absolute; inset:10px;
  border-radius:9px; border:2px solid rgba(27,99,255,.35);
}
.logo__text{font-weight:900; letter-spacing:-.02em; white-space:nowrap}

.nav{display:flex;align-items:center;gap:.75rem}
.nav__menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.45rem;
}
.nav__menu > li{flex:0 0 auto}
.nav__menu a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem .6rem;
  border-radius:999px;
  color:rgba(11,31,58,.88);
  font-size:.95rem;
  white-space:nowrap;
  line-height:1.1;
}
.nav__menu a:hover{background:rgba(11,31,58,.06)}

.nav__toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  cursor:pointer;
}
.nav__bars{display:block;width:18px;height:2px;background:rgba(11,31,58,.7);margin:0 auto;position:relative}
.nav__bars::before,.nav__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(11,31,58,.7)
}
.nav__bars::before{top:-6px}
.nav__bars::after{top:6px}

/* Language */
.lang{display:inline-flex;gap:.35rem;align-items:center;padding-left:.2rem}
.lang__a{
  font-size:.82rem;
  padding:.28rem .45rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
}
.lang__a.is-active{
  background:rgba(27,99,255,.12);
  border-color:rgba(27,99,255,.28);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.9rem 1.05rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow2);
  cursor:pointer;
  white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--primary{
  background:linear-gradient(135deg, rgba(27,99,255,1), rgba(47,140,255,1));
  color:#fff;border-color:rgba(27,99,255,.35);
}
.btn--ghost{
  background:rgba(255,255,255,.55);
}
.btn--small{padding:.65rem .9rem}

/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  z-index:0; /* tworzy stacking context */
}

/* tło */
.hero__media{
  position:absolute;
  inset:0;
  z-index:0;           /* BYŁO -1 -> potrafi “uciec” pod body */
}

/* sam film */
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.95) contrast(1.05) brightness(.95); /* jaśniej, żeby było widać ruch */
}

/* overlaye NAD filmem, ale nie zabijają go */
.hero__veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(27,99,255,.22), rgba(11,31,58,.55)),
    linear-gradient(180deg, rgba(11,31,58,.35), rgba(11,31,58,.60));
}

.hero__grid{
  position:absolute;
  inset:-2px;
  z-index:2;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.30;
  mask-image: radial-gradient(60% 60% at 30% 20%, #000 40%, transparent 70%);
}

/* treść NAJwyżej */
.hero__content{
  position:relative;
  z-index:3;
}

.kicker{
  display:inline-flex; gap:.6rem; align-items:center;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  margin:0 0 .9rem;
}
.hero__title{
  margin:0 0 1rem;
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  line-height:1.12;
  letter-spacing:-.03em;
}
.hero__accent{
  display:block;
  color:#fff;
  opacity:.95;
  text-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.hero__lead{
  max-width:70ch;
  margin:0 0 1.6rem;
  color:rgba(255,255,255,.82);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}

.exec{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:.8rem;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r2);
  padding: .95rem;
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
}
.exec__item{padding:.7rem .8rem;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.exec__kpi{font-weight:900;font-size:1.4rem;letter-spacing:-.02em}
.exec__txt{color:rgba(255,255,255,.80);font-size:.95rem;margin-top:.2rem}
.hero__note{margin:.9rem 0 0;color:rgba(255,255,255,.68);font-size:.92rem}

/* Sections */
.section{padding:4.2rem 0}
.section--alt{background: #e9eef7}
.head h2{
  margin:0 0 .9rem;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  letter-spacing:-.02em;
}
.head p{margin:0;margin-top:.15rem;max-width:78ch;color:var(--muted)}
.head--light h2, .head--light p{color:#fff}
.head--light p{opacity:.85}

/* Cards */
.cards{display:grid;gap:1rem}
.cards--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:1.25rem 1.2rem;
  box-shadow: var(--shadow2);
}
.card--line{border-left:4px solid rgba(27,99,255,.45)}
.card h3{margin:0 0 .35rem;letter-spacing:-.01em}
.card p{margin:0 0 .9rem;color:rgba(11,31,58,.72)}

.bullets{margin:0;padding-left:1.1rem;color:rgba(11,31,58,.75)}
.bullets li{margin:.28rem 0}

.bar{
  margin-top:1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:1rem 1.1rem;
  box-shadow: var(--shadow2);
}

/* Use-cases grid */
.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1rem;
}
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:1.15rem 1.15rem;
  box-shadow: var(--shadow2);
}
.panel h3{margin:0 0 .35rem}
.panel p{margin:0;color:rgba(11,31,58,.72)}
.tags{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.45rem}
.tag{
  font-size:.84rem;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(27,99,255,.08);
  color: rgba(11,31,58,.82);
}

/* Columns */
.cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
}
.col{min-height:100%}

/* Remote */
.remote{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:1rem;
  align-items:stretch;
}
.remote__media{
  border-radius: var(--r2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background:#0b1f3a;
}
.remote__video{width:100%;height:100%;object-fit:cover;display:block}
.remote__copy{display:grid;gap:1rem}
.mini{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:1.05rem 1.1rem;
  box-shadow: var(--shadow2);
}
.mini__title{font-weight:900;letter-spacing:-.01em;margin-bottom:.45rem}
.muted{color:rgba(11,31,58,.70);margin:0}

/* Checklist */
.check{list-style:none;padding:0;margin:.1rem 0 0}
.check li{
  padding-left:1.6rem;position:relative;margin:.42rem 0;
  color:rgba(11,31,58,.78);
}
.check li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color: var(--good);
  font-weight:900;
}

/* FAQ */
.faq{display:grid;gap:.7rem}
.faq__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:.95rem 1.05rem;
  box-shadow: var(--shadow2);
}
.faq__item summary{cursor:pointer;font-weight:800}
.faq__body{padding-top:.55rem;color:rgba(11,31,58,.72)}

/* Contact section */
.section--contact{
  background: linear-gradient(135deg, rgba(11,31,58,1), rgba(22,54,95,1));
  color:#fff;
}
.contact{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1rem;
  align-items:start;
  margin-top:1.2rem;
}
.form{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r2);
  padding:1.2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.85rem;
}
label span{display:block;font-weight:800;font-size:.92rem;margin-bottom:.35rem;color:rgba(255,255,255,.92)}
input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color:#fff;
  padding:.78rem .85rem;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
textarea{resize:vertical}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.68)}
input:focus,select:focus,textarea:focus{
  border-color: rgba(47,140,255,.55);
  box-shadow: 0 0 0 4px rgba(47,140,255,.22);
}
.actions{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.hint{margin:0;color:rgba(255,255,255,.82)}
.legal{margin:.9rem 0 0;color:rgba(255,255,255,.72);font-size:.92rem}

.aside{display:grid;gap:1rem}
.aside__card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r2);
  padding:1.05rem 1.1rem;
  backdrop-filter: blur(10px);
}
.aside__card h3{margin:0 0 .45rem}
.aside__card p{margin:0;color:rgba(255,255,255,.82)}


/* Contact sidebar readability (dark on dark fix) */
.section--contact .aside__card .check li{color:rgba(255,255,255,90)}
.section--contact .aside__card a{color:rgba(255,255,255,92); text-decoration:underline}
.section--contact .aside__card a:hover{text-decoration:none}

/* Footer extras */
.foot__brand p{margin:0}
.foot__meta{margin:.25rem 0 0; font-size:.95rem; color:rgba(11,31,58,70)}
.foot__meta a{text-decoration:underline}
.foot__meta a:hover{text-decoration:none}

@media (max-width: 760px){
  .foot__inner{flex-direction:column; align-items:flex-start}
}

/* Footer */
.foot{
  background:#e9eef7;
  border-top:1px solid var(--line);
  padding:1.3rem 0;
}
.foot__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:rgba(11,31,58,.74)}
.foot__links{display:inline-flex;gap:.8rem}
.foot__links a{padding:.35rem .55rem;border-radius:999px}
.foot__links a:hover{background:rgba(11,31,58,.06)}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .cards--3{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .remote{grid-template-columns:1fr}
  .exec{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav__toggle{display:inline-grid;place-items:center}
  .nav__menu{
    position:absolute; right:1rem; top:64px;
    width:min(380px, calc(100% - 2rem));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.2rem;
    background: rgba(243,246,251,.98);
    border:1px solid var(--line);
    border-radius: 18px;
    padding:.6rem;
    box-shadow: var(--shadow);
  }
  .nav__menu.is-open{display:flex}
  .row{grid-template-columns:1fr}
  .bar{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .btn{transition:none}
}
.logo__img{ width:38px; height:38px; object-fit:contain; border-radius:10px; }