:root{
  --bg:#07100d;--bg2:#0a1713;--green:#43ef75;--green2:#8cffaa;--ink:#111c17;
  --muted:#69766f;--line:#dbe3de;--max:1180px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7f6;color:var(--ink);line-height:1.55}
a{text-decoration:none;color:inherit}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
.topbar{position:sticky;top:0;z-index:40;background:rgba(7,16,13,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(67,239,117,.12)}
.nav{height:76px;display:flex;align-items:center;gap:30px}
.brand{display:flex;flex-direction:column;font-family:"Space Grotesk";font-weight:700;line-height:1}
.brand strong{font-size:22px;color:#fff}.brand strong span{color:var(--green)}
.brand small{font:9px Inter;letter-spacing:.2em;margin-top:6px;color:#aab6b0}
.main-nav{margin-left:auto;display:flex;gap:24px;color:#dce5df;font-size:14px}.main-nav a:hover{color:var(--green)}
.menu-btn{display:none;margin-left:auto;background:none;border:0}.menu-btn span{display:block;width:27px;height:2px;background:#fff;margin:5px}
.hero{position:relative;overflow:hidden;background:linear-gradient(130deg,#06100d,#0a1713 70%,#07100d);color:#fff;padding:105px 0 92px}
.hero-grid-bg{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000,transparent)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.28fr .72fr;gap:70px;align-items:center}
.eyebrow,.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#2d8c4a}
h1,h2,h3{font-family:"Space Grotesk";line-height:1.03;margin:0}
h1{font-size:clamp(52px,7vw,92px);letter-spacing:-.055em;margin:18px 0 26px}
h1 em,h2 em{font-style:normal;color:var(--green)}
.lead{font-size:20px;color:#bdc7c1;max-width:800px}.hero-note{color:#819087;max-width:780px}
.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{padding:14px 20px;border-radius:8px;font-weight:800;font-size:14px}
.primary{background:var(--green);color:#07100d}.ghost{border:1px solid rgba(255,255,255,.2);color:#fff}
.hero-panel{border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:22px;background:rgba(255,255,255,.025)}
.hero-panel>b{color:var(--green);font-size:11px}.hero-panel span{display:block;padding:15px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.section{padding:95px 0}.intro{border-bottom:1px solid var(--line)}
.split,.split2,.contact-grid{display:grid;grid-template-columns:.35fr .65fr;gap:70px}.split2,.contact-grid{grid-template-columns:1fr 1fr}
.section h2{font-size:clamp(42px,5vw,68px);letter-spacing:-.045em;margin:12px 0 26px}
.big{font-size:22px;color:#34423b}.intro p:not(.big){color:var(--muted)}
.head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:42px}.head>p{max-width:430px;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cards article{min-height:400px;padding:30px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(18,40,28,.03)}
.cards i{display:grid;place-items:center;width:56px;height:56px;background:#e9f8ed;color:#16833a;border-radius:14px;font-style:normal;font-weight:800;margin-bottom:28px}
.cards h3{font-size:28px}.cards p{color:#66736c}.cards li{margin:6px 0}
.dark,.contact{background:#07100d;color:#fff}.light{color:#71c38f}.muted,.contact p{color:#b3c0b9}
.ai-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.ai-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.ai-list>div{
  min-height:150px;
  padding:22px 22px 20px;
  border:1px solid rgba(255,255,255,.11);
  border-left:3px solid var(--green);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.ai-list b{
  display:block;
  color:#fff;
  font-family:"Space Grotesk";
  font-size:17px;
  line-height:1.25;
  margin-bottom:10px;
}
.ai-list span{
  display:block;
  color:#aebbb4;
  font-size:14px;
  line-height:1.6;
}


.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tech>div{padding:22px;background:#0b1511;color:#fff;border-radius:14px;display:flex;flex-wrap:wrap;gap:8px}.tech b{width:100%;color:var(--green)}.tech span{padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:12px;color:#cbd3ce}
.process{background:#fff}.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:1px solid #d7dfda;border-bottom:1px solid #d7dfda}.steps>div{padding:28px}.steps>div:not(:last-child){border-right:1px solid #d7dfda}.steps span{font-size:11px;color:#179044}.steps b{display:block;font:19px "Space Grotesk";margin:22px 0 8px}.steps p{font-size:14px;color:#68756e}
.company{border-left:1px solid rgba(255,255,255,.13);padding-left:45px;display:flex;flex-direction:column;gap:8px}.company>span{color:var(--green)}
footer{background:#050b09;color:#69766f;padding:28px 0}.footer{display:flex;align-items:center;justify-content:space-between;font-size:12px}.footer-brand strong{font-size:18px}
@media(max-width:900px){
  .main-nav{display:none}.main-nav.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:#07100d;padding:20px}
  .menu-btn{display:block}.hero-grid,.split,.split2,.ai-grid,.contact-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.tech{grid-template-columns:1fr 1fr}
  .ai-list{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.company{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding:28px 0 0}
}
@media(max-width:560px){
  .wrap{width:min(calc(100% - 26px),var(--max))}.section{padding:70px 0}.hero{padding:85px 0 70px}h1{font-size:14vw}.head{display:block}
  .actions{flex-direction:column}.btn{text-align:center}.tech,.steps{grid-template-columns:1fr}.footer{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:900px){
  .ai-list{grid-template-columns:1fr}
  .ai-list>div{min-height:auto}
}

/* --- Integracje: spójny poziomy flow --- */
.flow{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr 34px 1.2fr;
  gap:10px;
  align-items:stretch;
}
.flow-step{
  min-height:86px;
  padding:16px 14px;
  border:1px solid #c8e6d1;
  border-radius:14px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-shadow:0 6px 18px rgba(20,60,35,.03);
}
.flow-step span{
  display:block;
  margin-bottom:5px;
  color:#1d9950;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:800;
}
.flow-step strong{
  font-size:12px;
  line-height:1.25;
}
.flow-ai{
  border-color:rgba(67,239,117,.58);
  background:linear-gradient(145deg,#f8fff9,#eefaf2);
}
.flow-arrow{
  display:grid;
  place-items:center;
  color:#2bcf68;
  font-size:20px;
  font-weight:800;
}

/* --- Wsparcie: kafle zamiast sklejonych wierszy --- */
.support{
  background:#edf2ef;
}
.support-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.support-list>div{
  min-height:128px;
  padding:20px 21px;
  border:1px solid #d3dfd8;
  border-left:3px solid #36cc68;
  border-radius:14px;
  background:#f9fbfa;
  display:block;
}
.support-list b{
  display:block;
  margin-bottom:8px;
  font-family:"Space Grotesk";
  font-size:17px;
  line-height:1.2;
  color:#142019;
}
.support-list span{
  display:block;
  color:#66746c;
  font-size:14px;
  line-height:1.55;
}

@media(max-width:1050px){
  .flow{
    grid-template-columns:1fr 28px 1fr 28px 1fr;
  }
  .flow .flow-step:nth-of-type(4),
  .flow .flow-step:nth-of-type(5){
    grid-column:auto;
  }
}
@media(max-width:900px){
  .flow{
    grid-template-columns:1fr;
    gap:8px;
  }
  .flow-arrow{
    height:22px;
    transform:rotate(90deg);
  }
  .flow-step{
    min-height:auto;
  }
  .support-list{
    grid-template-columns:1fr;
  }
  .support-list>div{
    min-height:auto;
  }
}


/* ============================================================
   V4 — INTEGRACJE / INFRASTRUKTURA
   Unikalne selektory + cache-bust, żeby uniknąć starego CSS.
   ============================================================ */

.integration-flow{
  width:100%;
  margin-top:34px;
  display:flex !important;
  align-items:stretch !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

.integration-step{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:92px !important;
  padding:15px 12px !important;
  border:1px solid #c8e6d1 !important;
  border-radius:14px !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  box-shadow:0 5px 15px rgba(14,48,28,.035) !important;
}

.integration-step span{
  display:block !important;
  margin:0 0 7px !important;
  color:#20994e !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.12em !important;
  font-weight:800 !important;
}

.integration-step strong{
  display:block !important;
  margin:0 !important;
  color:#101b16 !important;
  font-size:12px !important;
  line-height:1.3 !important;
  white-space:normal !important;
}

.integration-ai{
  background:linear-gradient(145deg,#f7fff9,#eaf9ef) !important;
  border-color:#7bdc99 !important;
}

.integration-arrow{
  flex:0 0 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#2dd56c !important;
  font-size:19px !important;
  font-weight:800 !important;
}

.infra-cards{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-content:start !important;
}

.infra-card{
  min-width:0 !important;
  min-height:132px !important;
  padding:21px 22px !important;
  border:1px solid #d0ddd5 !important;
  border-left:3px solid #35ce68 !important;
  border-radius:14px !important;
  background:#fafcfb !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

.infra-card b{
  display:block !important;
  margin:0 0 12px !important;
  color:#111d17 !important;
  font-family:"Space Grotesk",sans-serif !important;
  font-size:18px !important;
  line-height:1.15 !important;
}

.infra-card span{
  display:block !important;
  margin:0 0 5px !important;
  color:#304139 !important;
  font-size:14px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}

.infra-card small{
  display:block !important;
  margin:0 !important;
  color:#718078 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

.infra-wide{
  grid-column:1 / -1 !important;
  min-height:112px !important;
}

@media(max-width:900px){
  .integration-flow{
    flex-direction:column !important;
    gap:8px !important;
  }
  .integration-step{
    min-height:auto !important;
    padding:17px !important;
  }
  .integration-arrow{
    height:18px !important;
    flex-basis:18px !important;
    transform:rotate(90deg) !important;
  }
  .infra-cards{
    grid-template-columns:1fr !important;
  }
  .infra-wide{
    grid-column:auto !important;
  }
  .infra-card{
    min-height:auto !important;
  }
}