:root{
  --accent: #ff7a18;
  --bg: #f8f8fa;
  --panel: #ffffff;
  --text: #0b0b0c;
  --muted: #6b7280;
}

/* reset/prosty box sizing */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* główna zawartość (logo + tekst) pośrodku ekranu */
.card{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  margin-bottom:auto;
  z-index:2;
}

/* footer przyklejony na dole */
footer{
  position:fixed;
  bottom:12px;
  left:0;
  width:100%;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
  z-index:2;
}

/* ---- network background ---- */
.network-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.95;
}

/* ensure transforms on SVG elements apply correctly across browsers */
.network-bg svg,
.network-bg svg g,
.network-bg svg path,
.network-bg svg circle {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
}

/* subtle float (whole group) */
.network-bg svg .lines,
.network-bg svg .vlines {
  animation: float 20s ease-in-out infinite alternate;
}

@keyframes float{
  0%   { transform: translateY(0)  scale(1); }
  50%  { transform: translateY(-18px) scale(1.01); }
  100% { transform: translateY(0)  scale(1); }
}

/* horizontal lines style + dash animation -> creates flow */
.network-bg .hline{
  fill:none;
  stroke: rgba(255,122,24,0.14);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 10 8;
  animation: dash 8s linear infinite;
}

/* vertical lines: slower, opposite direction */
.network-bg .vline{
  fill:none;
  stroke: rgba(11,11,12,0.10);
  stroke-width:0.6;
  stroke-dasharray: 6 8;
  animation: dash 14s linear infinite reverse;
}

/* dash movement */
@keyframes dash {
  to { stroke-dashoffset: -1000; }
}

/* ---- pulsujące nodes ---- */
.nodes circle{
  /* use transform scale for pulse (robust across browsers) */
  transform-origin: center;
  animation: pulse 3.2s ease-in-out infinite;
  will-change: transform, opacity;
  opacity: 0.85;
  transition: opacity 0.2s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.06));
}

/* staggered delays to avoid sync */
.nodes circle:nth-child(1){ animation-delay: 0s; }
.nodes circle:nth-child(2){ animation-delay: 0.5s; }
.nodes circle:nth-child(3){ animation-delay: 1.0s; }
.nodes circle:nth-child(4){ animation-delay: 1.5s; }
.nodes circle:nth-child(5){ animation-delay: 2.0s; }
.nodes circle:nth-child(6){ animation-delay: 2.5s; }

@keyframes pulse {
  0%   { transform: scale(1);  opacity: 0.85; }
  40%  { transform: scale(1.6); opacity: 1;    }
  100% { transform: scale(1);  opacity: 0.85; }
}

/* --- card / content --- */
.card{
  position:relative;
  z-index:2;
  background:var(--panel);
  border-radius:16px;
  padding:36px;
  max-width:720px;
  width:calc(100% - 40px);
  text-align:center;
  box-shadow: 0 12px 36px rgba(6,10,20,0.10);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
}

.logo{
  width:300px;
  height:auto;
  display:block;
  margin: 0 auto 18px;
}

h1{ margin:0; font-size:1.9rem; }
p{ color:var(--muted); margin:12px 0 0; line-height:1.5; }

footer{
  position:relative;
  z-index:2;
  margin-top:22px;
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
}

/* accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .network-bg svg, .network-bg svg .lines, .network-bg svg .vlines, .network-bg .hline, .network-bg .vline, .nodes circle {
    animation: none !important;
    transition: none !important;
  }
}