/* Innovative Leader — beta: hero z gradientem WebGL (wg promptu „WebGL Interactive Gradient”). */
:root {
  --il-mint: #b8fff7;
  --il-navy: #0d0580; /* granat z logo Innovative Leader */
  --il-blue: #0133ff;
  --il-sky: #66d1fe;
  --il-text: #fff;
  --il-pad: 2rem;
  --il-fade: 600ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--il-blue); }
body { font-family: "Host Grotesk", system-ui, sans-serif; color: var(--il-text); }

img { width: 100%; height: 100%; object-fit: cover; }
p { color: var(--il-text); font-size: 0.9rem; font-weight: 450; }

nav, .hero-footer {
  position: absolute;
  left: 0;
  width: 100%;
  padding: var(--il-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
nav { top: 0; }
.hero-footer { bottom: 0; }
.nav-items { display: flex; gap: 4rem; }
nav .logo p { font-weight: 700; }

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
  /* plakat: widać go do pierwszej klatki WebGL i zostaje, gdy WebGL nie ruszy */
  background:
    radial-gradient(110% 90% at 18% 22%, var(--il-mint) 0%, transparent 55%),
    radial-gradient(90% 80% at 82% 28%, var(--il-sky) 0%, transparent 60%),
    radial-gradient(100% 90% at 68% 92%, var(--il-navy) 0%, transparent 62%),
    var(--il-blue);
}

.gradient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--il-fade) ease;
}
.gradient-canvas.is-live { opacity: 1; }
.gradient-canvas canvas { display: block; width: 100%; height: 100%; }

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  z-index: 1;
}
/* logo IL jest poziome (3,5 : 1), więc szersze niż kwadratowe 25% ze wzoru */
.hero-logo img { display: block; height: auto; object-fit: contain; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  nav { flex-direction: column; gap: 2rem; }
  .hero-logo { width: 60%; }
}

@media (max-width: 600px) {
  :root { --il-pad: 1.5rem; }
  nav { gap: 1.25rem; }
  .nav-items { gap: 1.5rem; }
  .hero-logo { width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-canvas { transition: none; }
}