/* Strona Funkcje – dopasowana do ciemnego, immersyjnego stylu. Minimalne rozszerzenia względem base.css */
.hero--features {
  padding: clamp(2rem, 4vw, 4rem) 0;
  background: radial-gradient(120% 120% at 80% 0%, rgba(120,120,120,0.08) 0%, transparent 60%),
              linear-gradient(180deg, rgba(20,20,28,0.8) 0%, rgba(12,12,18,0.8) 100%);
}
.hero--features .hero__content { max-width: 58rem; }
.hero__media { margin-top: 1.5rem; }
.hero__media img { width: 100%; height: auto; border-radius: 0.75rem; display: block; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }

.toc { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); background: rgba(10,10,14,0.6); border-bottom: 1px solid rgba(255,255,255,0.06); }
.toc__scroller { display: grid; grid-auto-flow: column; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 1rem; }
.toc__scroller a { padding: 0.5rem 0.75rem; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.12); text-decoration: none; }
.toc__scroller a:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }

.feature-search { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.feature-search label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.feature-search input[type="search"] { width: 100%; max-width: 36rem; }
.assistive-text { opacity: .8; font-size: .9rem; margin-top: .5rem; }

.feature-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); }
.feature-section { padding: clamp(1rem, 2vw, 1.25rem); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.feature-section header h2 { margin-top: 0; }
.feature-section .media { margin: 1rem 0; }
.feature-section .media img { width: 100%; height: auto; border-radius: 0.5rem; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.5rem; margin-top: 1rem; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.download-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }

@media (min-width: 992px) {
  .feature-grid { grid-template-columns: repeat(12, 1fr); }
  .feature-section { grid-column: span 6; }
  .feature-section#unique-gameplay, .feature-section#world-building { grid-column: span 12; }
}