:root {
  --header-h: 0px;
  --tile: 22px;  
  --radius-tiles: 15;
  --rad-w: 780px;                     /* wymiar gradientu na mobile */
  --rad-h: 460px;
  --rad-x: 22%;                       /* pozycja ogniska gradientu na mobile */
  --rad-y: 34%;
  --noise-opacity: 0.08;
}

@media (min-width: 768px) {
  :root {
    --tile: 28px;
    --radius-tiles: 18;
    --rad-w: 1000px;
    --rad-h: 560px;
    --rad-x: 30%;
    --rad-y: 24%;
  }
}

@media (min-width: 1200px) {
  :root {
    --tile: 34px;
    --radius-tiles: 20;
    --rad-w: 1200px;
    --rad-h: 680px;
    --rad-x: 30%;
    --rad-y: 20%;
  }
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h) + 1px);
  overflow: hidden;
  background:
    radial-gradient(var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),
      #7a5cff, #4a2bb5 70%, #170c43);
}

/* Fallback dla starszych (opcjonalnie) */
@supports not (min-height: 100svh) {
  .hero { min-height: calc(100vh - var(--header-h) + 1px); }
}

.hero > .container {
  min-height: 100%;
}

.hero > canvas#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(#ffffff24 1px, transparent 1px),
    linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size: var(--tile) var(--tile), var(--tile) var(--tile);
  mix-blend-mode: soft-light;
}

/* Warstwa szumu */
.noise {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* nad canvasem, pod treścią */
  pointer-events: none;
  opacity: var(--noise-opacity, 0.08);
  mix-blend-mode: screen;     /* ewentualnie soft-light */
  background-size: 130px 130px;
  background-repeat: repeat;
  animation: noiseShift 0.8s steps(4) infinite;
  will-change: background-position;
}

/* ruch szumu */
@keyframes noiseShift {
  0%   { background-position:   0px   0px; }
  50%  { background-position: -80px  60px; }
  100% { background-position:   0px   0px; }
}

.hero-content { position: relative; z-index: 3; }