:root {

  --bg:#07090d;
  --bg2:#0d1118;
  --panel:#10151d;
  --text:#f3f5f7;
  --muted:#929aa6;

  --line:rgba(255,255,255,.12);
  --red:#e33b36;
  --cyan:#63d7ff;
  --sand:#c4aa78;

  --max:1480px;
  --pad:clamp(30px,20vw,125px)
}


* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden}


a {
  color:inherit;
  text-decoration:none}

button {
  font:inherit;
  color:inherit}

.cursor-glow {
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle,rgba(76,137,180,.09),transparent 60%);
  transform:translate(-50%,-50%)}


.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:78px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(7,9,13,.78);
  backdrop-filter:blur(18px)}


.brand {
  display:flex;
  align-items:center;
  gap:13px}

.brand-logo {
  display:block;
  width:clamp(100px,26vw,220px);
  height:auto}

.brand-name {
  font-size:14px;
  font-weight:800;
  letter-spacing:.24em}

.brand-mark {
  width:34px;
  height:34px;
  position:relative;
  display:block}

.brand-mark span {
  position:absolute;
  left:4px;
  width:25px;
  height:5px;
  background:#fff;
  transform:skewX(-31deg)}

.brand-mark span:nth-child(1) {
  top:5px}

.brand-mark span:nth-child(2) {
  top:14px;
  width:18px}

.brand-mark span:nth-child(3) {
  top:23px;
  width:11px}


.main-nav {
  display:flex;
  gap:34px}

.main-nav a {
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b4bbc4}

.main-nav a:hover {
  color:#fff}

.header-actions {
  display:flex;
  align-items:center;
  gap:7px}

.lang-btn {
  border:0;
  background:none;
  padding:8px;
  font-size:10px;
  letter-spacing:.12em;
  color:#727b87;
  cursor:pointer}

.lang-btn.active {
  color:#fff}

.menu-btn {
  display:none;
  border:0;
  background:none;
  width:38px;
  height:38px}

.menu-btn span {
  display:block;
  width:20px;
  height:1px;
  background:#fff;
  margin:6px auto}


.hero {
  position:relative;
  min-height:100vh;
  padding:150px var(--pad) 55px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  overflow:hidden}

.hero-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(to bottom,black,transparent 90%)}

.hero-noise {
  position:absolute;
  inset:0;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero-content {
  position:relative;
  z-index:2;
  max-width:780px}

.eyebrow {
  margin:0 0 18px;
  color:#aab1ba;
  font:700 16px/1.2 monospace;
  letter-spacing:.22em}

.hero h1 {
  margin:0;
  font-size:clamp(56px,7.2vw,110px);
  line-height:1.1;
  letter-spacing:-.065em;
  font-weight:700}

.hero h1 span {
  display:block}

.hero h1 .accent {
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.78)}

.hero-lead {
  max-width:650px;
  margin:34px 0 0;
  color:#a9b0ba;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.65}

.hero-actions {
  display:flex;
  gap:12px;
  margin-top:38px}

.button {
  padding:15px 22px;
  border:1px solid var(--line);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase}

.button.primary {
  background:#fff;
  color:#080a0e;
  border-color:#fff}

.button.ghost:hover {
  background:#fff;
  color:#080a0e}

.hero-system {
  position:relative;
  z-index:2;
  width:min(650px,46vw);
  aspect-ratio:1;
  margin-left:auto}

.system-ring {
  position:absolute;
  border:1px solid rgba(104,214,255,.17);
  border-radius:50%}

.ring-1 {
  inset:8%;
  animation:spin 32s linear infinite}

.ring-2 {
  inset:25%;
  border-style:dashed;
  animation:spin 20s linear reverse infinite}

.system-core {
  position:absolute;
  inset:35%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(14,20,29,.86);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:0 0 90px rgba(55,143,190,.13)}

.system-sygnet {
  width:100%;
  max-width:100px;
  height:auto;
  display:block;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.10))}

.system-node {
  position:absolute;
  width:138px;
  padding:16px;
  border:1px solid var(--line);
  background:rgba(8,12,17,.82);
  backdrop-filter:blur(10px)}

.system-node b {
  display:block;
  color:#5e6977;
  font:12px monospace}

.system-node span {
  display:block;
  margin-top:8px;
  font:14px monospace;
  letter-spacing:.12em}

.n1 {
  right:0;
  top:15%}

.n2 {
  right:3%;
  bottom:17%}

.n3 {
  left:0;
  bottom:20%}

.hero-bottom {
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:28px;
  display:flex;
  align-items:center;
  gap:18px;
  color:#606a76;
  font:9px monospace;
  letter-spacing:.12em}

.hero-bottom .line {
  height:1px;
  flex:1;
  background:var(--line)}


.section {
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:0 auto;
  padding:120px var(--pad)}

.section-index {
  margin-bottom:28px;
  color:#5e6773;
  font:10px monospace;
  letter-spacing:.16em}

.intro {
  display:grid;
  grid-template-columns:1.4fr .7fr;
  column-gap:60px;
  row-gap:28px;
  align-items:end;
  border-bottom:1px solid var(--line);
}

.intro .section-index {
  grid-column:1 / -1;
  margin:0;
}

/* Przywrócenie pierwotnych rozmiarów nagłówków */
.intro h2,
.section-head h2,
.strategy h2,
.contact h2 {
  margin:0;
  font-size:clamp(36px,4.2vw,68px);
  line-height:1.03;
  letter-spacing:-.045em;
}

/* Przywrócenie wyglądu tekstu po prawej stronie */
.intro-text {
  align-self:end;
  margin:0;
  transform:translateY(12px);
  color:#9ca5b0;
  font-size:16px;
  line-height:1.75;
}


.section-head {
  display:grid;
  grid-template-columns:1fr .5fr;
  gap:60px;
  align-items:end;
  margin-bottom:55px}

.section-head>p {
  margin:0;
  color:#929ca8;
  line-height:1.7}

.brand-panel {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:650px;
  margin-bottom:34px;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden}

.brand-panel.reverse {
  grid-template-columns:.9fr 1.1fr}

.brand-panel.reverse .brand-media {
  order:2}

.brand-media {
  position:relative;
  overflow:hidden;
  min-height:520px;
  background:#0a0e14}

.brand-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s}

.brand-panel:hover .brand-media img {
  transform:scale(1.025)}

.media-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(5,7,10,.65))}

.brand-number {
  position:absolute;
  top:30px;
  left:32px;
  font:11px monospace;
  letter-spacing:.14em;
  color:#fff}

.brand-copy {
  padding:clamp(36px,5vw,78px);
  display:flex;
  flex-direction:column;
  justify-content:center}

.brand-meta {
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#747f8c;
  font:12px monospace;
  letter-spacing:.13em}

.status {
  color:#82d6a8}

.status.development {
  color:#e3bf73}

.brand-copy h3 {
  margin:42px 0 20px;
  font-size:clamp(40px,5vw,76px);
  line-height:.94;
  letter-spacing:-.055em}

.brand-copy>p {
  margin:0;
  color:#a0a9b4;
  font-size:16px;
  line-height:1.72}

.data-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:36px 0}

.data-grid div {
  padding:15px 0;
  border-top:1px solid var(--line)}

.data-grid strong {
  display:block;
  font-size:15px}

.data-grid span {
  display:block;
  margin-top:8px;
  color:#697480;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em}

.brand-links {
  display:flex;
  align-items:center;
  gap:20px}

.brand-links a,.details-btn {
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase}

.brand-links a {
  color:#fff}

.details-btn {
  border:0;
  border-bottom:1px solid #59636e;
  background:none;
  padding:8px 0;
  cursor:pointer;
  color:#aab2bc}

.details-btn:hover {
  color:#fff;
  border-color:#fff}


.section-head.compact {
  grid-template-columns:1fr}

.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)}

.cap-card {
  min-height:250px;
  padding:32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:.25s}

.cap-card:hover {
  background:#10161f}

.cap-card>span {
  color:#5d6774;
  font:10px monospace}

.cap-card h4 {
  margin:70px 0 13px;
  font-size:21px}

.cap-card p {
  margin:0;
  color:#89939f;
  line-height:1.65}


.strategy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center}

.strategy-visual {
  position:relative;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:space-around}

.strategy-line {
  position:absolute;
  left:35px;
  top:12%;
  bottom:12%;
  width:1px;
  background:linear-gradient(var(--red),var(--cyan),var(--sand))}

.strategy-node {
  position:relative;
  padding-left:90px}

.strategy-node:before {
  content:"";
  position:absolute;
  left:27px;
  top:17px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.05)}

.strategy-node b {
  display:block;
  color:#687381;
  font:10px monospace}

.strategy-node strong {
  display:block;
  margin:8px 0;
  font-size:44px}

.strategy-node span {
  color:#7f8995;
  font:10px monospace;
  letter-spacing:.14em}

.strategy-copy>p:last-child {
  color:#9aa4af;
  line-height:1.75;
  font-size:16px}


.contact {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:90px;
  border-top:1px solid var(--line)}

.contact-card {
  align-self:end;
  padding:34px;
  border:1px solid var(--line);
  display:grid;
  gap:20px;
  background:#0d1219}

.contact-card small {
  display:block;
  color:#687381;
  font:9px monospace;
  letter-spacing:.15em;
  margin-bottom:8px}

.contact-card strong {
  font-size:22px}

.contact-card a {
  font-size:18px}

.contact-card span {
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#6e7986;
  font:9px monospace;
  letter-spacing:.12em}


footer {
  max-width:var(--max);
  margin:0 auto;
  padding:38px var(--pad);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#67717e;
  font:9px monospace;
  letter-spacing:.1em}

.footer-brand {
  display:flex;
  align-items:center;}


.modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:none}

.modal.open {
  display:block}

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px)}

.modal-panel {
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(620px,94vw);
  padding:80px 60px;
  background:#0d1219;
  border-left:1px solid var(--line);
  overflow:auto}

.modal-close {
  position:absolute;
  right:28px;
  top:24px;
  border:1px solid var(--line);
  background:none;
  width:40px;
  height:40px;
  font-size:24px;
  cursor:pointer}

.modal-kicker {
  color:#6d7885;
  font:10px monospace;
  letter-spacing:.15em}

.modal-panel h3 {
  font-size:48px;
  line-height:1.05;
  letter-spacing:-.04em}

.modal-panel ul {
  margin:40px 0 0;
  padding:0;
  list-style:none}

.modal-panel li {
  padding:18px 0;
  border-top:1px solid var(--line);
  color:#a5aeb8;
  line-height:1.55}


@keyframes spin {
  to {
  transform:rotate(360deg)}

}
@media (min-width:1001px) and (max-width:1350px) {

  .hero {
    grid-template-columns:1.08fr .92fr;
    column-gap:clamp(40px,5vw,80px);
  }

  .hero-system {
    width:min(560px,42vw);
  }

}

@media(max-width:1000px) {

 .main-nav {
  display:none}

.menu-btn {
  display:block}

.hero {
  grid-template-columns:1fr;
  padding-top:130px}

.hero-system {
  width:min(600px,85vw);
  margin:50px auto 70px}

.intro {
  grid-template-columns:1fr}

.intro .section-index {
  margin-bottom:0}

.section-head,.brand-panel,.brand-panel.reverse,.strategy,.contact {
  grid-template-columns:1fr}

.brand-panel.reverse .brand-media {
  order:0}

.capability-grid {
  grid-template-columns:repeat(2,1fr)}

.brand-panel {
  min-height:0}


}


@media(max-width:650px) {

 :root {
  --pad:20px}

.site-header {
  height:66px}

.hero {
  padding-top:105px}

.hero h1 {
  font-size:52px}

.hero-actions {
  flex-direction:column;
  align-items:flex-start}

.hero-system {
  width:100%;
  max-width:520px;
  margin:50px auto 70px;}

.system-node {
  width:92px;
  padding:10px}

.section {
  padding-top:84px;
  padding-bottom:84px}

.section-head {
  gap:25px}

.brand-media {
  min-height:360px}

.brand-copy {
  padding:30px 24px}

.brand-copy h3 {
  margin-top:28px;
  font-size:43px}

.data-grid {
  grid-template-columns:1fr}

.capability-grid {
  grid-template-columns:1fr}

.cap-card {
  min-height:210px}

.strategy {
  gap:30px}

.contact {
  gap:45px}

footer {
  gap:20px;
  flex-wrap:wrap}

.modal-panel {
  padding:75px 25px}

.modal-panel h3 {
  font-size:38px}


}
.footer-logo {
  display:block;
  width:100px;
  height:auto;
}