<!--
================================================================================
  TEMPLATE ANALYSIS — VoltPaper Theme
  Source: TemplateMo 583 Festava Live
================================================================================

1. LAYOUT DNA
   Dominant pattern: Full-viewport hero sections with dark overlays, followed by
   alternating dark/light full-width sections. Each section is completely self-
   contained with its own background treatment (image + overlay, or solid dark,
   or off-white). Content lives in fixed-width containers centered inside these
   full-bleed backdrops. An asymmetric two-column "about" section (text left,
   image-with-floating-glassmorphism-overlay right) breaks the symmetry. The
   artists section uses an asymmetric 5+7 column split with stacked smaller
   cards on the right. Editorial long-scroll with strong sectional rhythm.

2. VISUAL RHYTHM
   Alternating dark/warm/light sections create a punchy rhythm:
   Dark hero → warm image-section → light artists → dark schedule → light pricing.
   Large display typography (74px h1) creates strong hierarchy. Each section
   starts with a bold h2 heading followed by content. Dense information blocks
   are placed INSIDE breathable padded containers (100px top/bottom), creating
   tension between section density and inter-section breathing room. Horizontal
   accent bars (the gold/orange top bar) punctuate transitions.

3. DISTINCTIVE FEATURES
   a) Full-viewport background with dark semi-transparent overlay (hero + about
      + schedule sections) — immersive, cinematic feel
   b) Hover-reveal info panels on artist/content cards: translateY(100%) → 0
      with backdrop-filter blur and semi-transparent gold background
   c) Dotted-border containers (pricing cards) with absolute-positioned circular
      badge elements in the corner — unusual, tactile, not generic
   d) Animated link-fx-1: underline + animated SVG circle-arrow icon that draws
      on hover — highly distinctive micro-interaction
   e) Dual-tone accent system: gold (#F8CB2E) as primary + orange (#EE5007) as
      secondary, both used structurally (top bar gold, button orange, hover gold)
   f) Glassmorphism floating text overlays on images (about section, artists hover)
      with backdrop-filter blur + rgba white/gold backgrounds

4. COLOR STRATEGY
   Black (#000000/#111) base with two warm accent colors layered on top.
   Gold (#F8CB2E) used for: logo text, primary CTAs, link colors, pricing link,
   section titles in footer, top announcement bar background.
   Orange (#EE5007) used for: buttons, icon accents, secondary labels, schedule
   table headers, social icon backgrounds, footer top bar.
   White used for all text-on-dark. Body text on light backgrounds: #717275 (gray).
   Section alternation: dark → off-white (#f0f8ff) → dark creates high contrast.
   NOT a gradient hero approach — solid atmospheric backgrounds with overlays.

5. TYPOGRAPHY FEEL
   Geometric sans-serif ('Outfit') — clean, modern, but with optical personality
   from its slightly humanist curves. All headings bold (700), body light (300).
   Very large display h1 at 74px — the scale contrast IS the hierarchy. Small
   all-caps labels (#F8CB2E) for eyebrow text add editorial structure. Heading
   and body both use the same typeface but rely on weight/size for contrast.
   In VoltPaper: adapted to serif display headings (Georgia) + sans body for
   stronger editorial/magazine personality.

6. COMPONENT STYLE
   Pill-shaped buttons (border-radius: 100px) — rounded, friendly but bold.
   Cards: NO box-shadow by default; border-based distinction. Hover states use
   translateY reveal (not just color/shadow changes) — active, theatrical.
   Tab navigation with pill shape and shadow on active state.
   Form inputs with large padding, plain borders.
   Social icons: circular filled orange pills with hover gold flip.
   Pricing: dotted thick (5px) border for unconventional structural feel.

================================================================================
  ADAPTATION DECISIONS FOR SLASHSEO EDITORIAL PORTAL
================================================================================

  SECTION ORDER CHOSEN: Hero → Latest Posts → Topics → FAQ
  Rationale: Posts are primary content (editorial-first). Topics orient new
  readers after the hero. FAQ closes with educational depth.

  LAYOUT CHANGES (required):
  - Hero: no video (CSS grid-pattern background preserving the atmospheric dark
    feel). Asymmetric hero grid with stats column on desktop.
  - Posts: asymmetric featured-card + small-stack (from artists 5+7 DNA)
  - Topics: dotted-border cards with hover-reveal (from pricing + artists DNA)
  - FAQ: accordion with tab-pill icon animation (from contact tab DNA)

  PRESERVED:
  - Gold + Orange dual-tone palette (exact hex values)
  - Dark section base with overlays
  - Alternating dark/off-white section rhythm
  - Hover-reveal translateY animation
  - Dotted-border card style (pricing DNA)
  - Animated SVG link arrows (link-fx-1 DNA)
  - Pill-shaped buttons (border-radius: 100px)
  - Glassmorphism floating elements
  - Large display typography scale

================================================================================
-->
<!DOCTYPE html>
<html lang="pl-PL">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fontanny multimedialne, pokazy wodne – portal branżowy</title>
  <meta name="description" content="Wiedza o fontannach multimedialnych, pokazach wodnych i nowoczesnych technologiach. Inspiracje, poradniki, analizy dla miast i pasjonatów.">
  <link rel="canonical" href="https://dancingwater.eu/">
  <meta property="og:title" content="Fontanny multimedialne, pokazy wodne – portal branżowy">
  <meta property="og:description" content="Wiedza o fontannach multimedialnych, pokazach wodnych i nowoczesnych technologiach. Inspiracje, poradniki, analizy dla miast i pasjonatów.">
  <meta property="og:image" content="">
  <link rel="stylesheet" href="/assets/css/style.css">
<meta name="generator" content="WordPress 6.6.2" />
<link rel="stylesheet" id="voltpaper-style-css" href="/wp-content/themes/voltpaper/style.css?ver=6.6.2" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="FontannaWiedzy &raquo; Feed" href="/feed/" />
<link rel="https://api.w.org/" href="/wp-json/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/xmlrpc.php?rsd" />
<link rel="pingback" href="/xmlrpc.php" />
<script src="/wp-includes/js/wp-embed.min.js?ver=6.6.2" defer></script>
<!-- Powered by LiteSpeed Cache -->
<link rel="stylesheet" id="yoast-seo-css" href="/wp-content/plugins/wordpress-seo/css/yoast-seo-frontend.min.css?ver=23.5" type="text/css" media="all" />
<link rel="stylesheet" id="rank-math-css" href="/wp-content/plugins/seo-by-rank-math/assets/css/rank-math.min.css?ver=1.0.218" type="text/css" media="all" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dancingwater.eu/" />
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "WebSite", "name": "FontannaWiedzy", "url": "https://dancingwater.eu", "description": "FontannaWiedzy to portal edukacyjny poświęcony pokazom fontann multimedialnych oraz instalacjom wodnym synchronizowanym z muzyką i światłem. Publikujemy artykuły, poradniki i analizy branżowe skierowane do miłośników tego typu widowisk, projektantów, organizatorów wydarzeń oraz samorządów miejskich. Naszym celem jest szerzenie wiedzy o nowoczesnych rozwiązaniach w dziedzinie wodnych instalacji artystycznych."}</script>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "Organization", "name": "FontannaWiedzy", "url": "https://dancingwater.eu", "email": "redakcja@dancingwater.eu"}</script>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Jak działa fontanna multimedialna?", "acceptedAnswer": {"@type": "Answer", "text": "Fontanna multimedialna łączy systemy wodne, świetlne i dźwiękowe, sterowane komputerowo, aby tworzyć zsynchronizowane widowiska. Dzięki precyzyjnej kontroli można uzyskać dynamiczne efekty wizualne i dźwiękowe w czasie rzeczywistym."}}, {"@type": "Question", "name": "Jakie technologie stosuje się w pokazach wodnych?", "acceptedAnswer": {"@type": "Answer", "text": "Pokazy wykorzystują m.in. pompy wysokociśnieniowe, dysze o różnych kształtach, zaawansowane oświetlenie LED oraz systemy nagłośnienia i synchronizacji sterowane przez komputery."}}, {"@type": "Question", "name": "Czym różni się fontanna multimedialna od tradycyjnej?", "acceptedAnswer": {"@type": "Answer", "text": "Fontanna multimedialna oferuje dodatkowe funkcje, takie jak integracja ze światłem i muzyką oraz możliwość programowania widowisk, czego nie zapewniają tradycyjne fontanny opierające się wyłącznie na ruchu wody."}}, {"@type": "Question", "name": "Jakie są wyzwania przy projektowaniu instalacji wodnych do przestrzeni publicznych?", "acceptedAnswer": {"@type": "Answer", "text": "Projektowanie wymaga uwzględnienia zarówno aspektów technicznych i bezpieczeństwa, jak i wpływu instalacji na otoczenie, użytkowników oraz środowisko naturalne."}}]}</script>
</head>
<body>

<!-- VoltPaper: partials/header.html -->
<a href="#main-content" class="skip-nav">Przejdź do treści</a>

<!-- Top bar (gold bar DNA from site-header) -->
<div class="top-bar">
  <div class="container">
    <div class="top-bar-inner">
      <span class="top-bar-brand">FontannaWiedzy</span>
      <span class="top-bar-tagline">Wiedza o fontannach multimedialnych, pokazach wodnych i nowoczesnych technologiach. Inspiracje, poradniki, analizy dla miast i pasjonatów.</span>
    </div>
  </div>
</div>

<!-- Main navigation (dark sticky navbar DNA) -->
<nav class="site-nav" aria-label="Nawigacja główna">
  <div class="container">
    <div class="nav-inner">
      <a href="/" class="nav-logo" aria-label="FontannaWiedzy — strona główna">
        FontannaWiedzy
      </a>

      <!-- Desktop nav -->
      <div class="nav-links" role="list">
        <a href="/" role="listitem">Strona główna</a>
        <a href="/o-portalu/" role="listitem">O portalu</a>
        <a href="/blog/" role="listitem">Blog</a>
        <a href="/artykuly/" role="listitem">Wszystkie wpisy</a>
      </div>

      <!-- Hamburger button -->
      <button
        class="nav-toggle"
        aria-label="Otwórz menu"
        aria-expanded="false"
        aria-controls="mobile-nav"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </div>

  <!-- Mobile nav drawer -->
  <div class="nav-mobile" id="mobile-nav" role="navigation" aria-label="Menu mobilne">
    <a href="/">Strona główna</a>
    <a href="/o-portalu/">O portalu</a>
    <a href="/blog/">Blog</a>
    <a href="/artykuly/">Wszystkie wpisy</a>
  </div>
</nav>
<main id="main-content">

  <!-- ============================================================
       HERO SECTION — full-viewport dark atmospheric (DNA preserved)
  ============================================================ -->
  <section class="hero-section">
    <div class="container hero-content">
      <div class="hero-grid">

        <div class="hero-main">
          <span class="eyebrow">FontannaWiedzy</span>
          <h1>Wszystko o fontannach multimedialnych i pokazach wodnych</h1>
          <div class="hero-subtitle">
            Poznaj najciekawsze realizacje, technologie i porady dotyczące widowisk wodnych synchronizowanych z muzyką i światłem.
          </div>
          <div class="hero-cta">
            <a href="/blog/" class="btn btn-primary">
              Czytaj artykuły
            </a>
            <a href="/blog/" class="link-arrow link-arrow-white">
              Przeglądaj artykuły
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>

        <!-- Meta stats — asymmetric DNA -->
        <div class="hero-meta" aria-hidden="true">
          <div class="hero-meta-item">
            <div class="num">100+</div>
            <div class="label">Artykułów</div>
          </div>
          <div class="hero-meta-item">
            <div class="num">10+</div>
            <div class="label">Tematów</div>
          </div>
        </div>

      </div>
      <hr class="hero-rule">
    </div>
  </section>


  <!-- ============================================================
       LATEST POSTS — dark section, asymmetric grid (artists DNA)
  ============================================================ -->
  <section class="posts-section section-pad">
    <div class="container">

      <div class="posts-section-header">
        <div>
          <span class="eyebrow" style="color:var(--gold)">Aktualne treści</span>
          <h2 class="text-white" style="margin-bottom:0;">Najnowsze artykuły</h2>
        </div>
        <a href="/blog/" class="link-arrow link-arrow-white">
          Wszystkie artykuły
          <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
            <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </div>

      <div class="posts-asymmetric">

        <!-- Featured post (first) — large card -->
        <article class="post-card-featured">
          <div class="post-bg">
            <img src="/wp-content/uploads/2026/06/jakie-dotacje-na-fotowoltaike.jpg" alt="Jakie dotacje na fotowoltaikę można obecnie uzyskać?">
          </div>
          <div class="post-body">
            <p class="post-date">
              <time datetime="2026-07-03">2026-07-03</time>
            </p>
            <h3><a href="/jakie-dotacje-na-fotowoltaike/" style="color:inherit;text-decoration:none;">Jakie dotacje na fotowoltaikę można obecnie uzyskać?</a></h3>
            <div class="post-excerpt">W artykule przedstawiamy aktualne programy dotacyjne na fotowoltaikę, magazyny energii i ciepła oraz ulgi podatkowe, które pomagają obniżyć koszty inwestycji w instalacje PV w Polsce.</div>
            <a href="/jakie-dotacje-na-fotowoltaike/" class="link-arrow link-arrow-white">
              Czytaj artykuł
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </article>

        <!-- Stack of smaller posts -->
        <div class="posts-stack">
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/06/jaki-kolor-do-ganku.jpg" alt="Jaki kolor wybrać do ganku aby optycznie powiększyć przestrzeń?">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-24">2026-06-24</time>
              </p>
              <h4><a href="/jaki-kolor-do-ganku/" style="color:inherit;text-decoration:none;">Jaki kolor wybrać do ganku aby optycznie powiększyć przestrzeń?</a></h4>
              <div class="post-excerpt-sm">Wybór koloru do ganku wpływa na postrzeganie przestrzeni, jej jasność i funkcjonalność. Sprawdź, które barwy najlepiej sprawdzają się w małych i słabo oświetlonych przedpokojach oraz jak zastosować modne akcenty kolorystyczne.</div>
              <a href="/jaki-kolor-do-ganku/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/05/trendy-projektowanie-fontann-multimedialnych-2026.jpg" alt="Trendy w projektowaniu fontann multimedialnych 2026: technologia, ekologia i interaktywność">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-22">2026-06-22</time>
              </p>
              <h4><a href="/trendy-projektowanie-fontann-multimedialnych-2026/" style="color:inherit;text-decoration:none;">Trendy w projektowaniu fontann multimedialnych 2026: technologia, ekologia i interaktywność</a></h4>
              <div class="post-excerpt-sm">W 2026 roku projektowanie fontann multimedialnych to połączenie zaawansowanej technologii, odpowiedzialności środowiskowej oraz tworzenia immersyjnych doświadczeń. Sprawdź najważniejsze kierunki rozwoju i innowacje, które kształtują przyszłość tego dynamicznego sektora.</div>
              <a href="/trendy-projektowanie-fontann-multimedialnych-2026/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/05/jak-wybrac-dostawce-pokazow-fontann-multimedialnych.jpg" alt="Jak wybrać dostawcę pokazów fontann multimedialnych: Kompleksowy przewodnik">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-15">2026-06-15</time>
              </p>
              <h4><a href="/jak-wybrac-dostawce-pokazow-fontann-multimedialnych/" style="color:inherit;text-decoration:none;">Jak wybrać dostawcę pokazów fontann multimedialnych: Kompleksowy przewodnik</a></h4>
              <div class="post-excerpt-sm">Wybór odpowiedniego dostawcy pokazów fontann multimedialnych to klucz do sukcesu każdego wydarzenia plenerowego. Dowiedz się, na co zwrócić uwagę, jakie elementy są najważniejsze oraz jak ocenić doświadczenie firmy, która stworzy spektakularne widowisko wodne z synchronizacją muzyki, światła i laserów.</div>
              <a href="/jak-wybrac-dostawce-pokazow-fontann-multimedialnych/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       TOPICS — off-white section, dotted borders + hover reveal
  ============================================================ -->
  <section class="topics-section section-pad">
    <div class="container">

      <div class="topics-section-header">
        <div>
          <span class="eyebrow">Czym się zajmujemy</span>
          <h2>Tematy portalu</h2>
          <p>Obszary tematyczne, które eksplorujemy w naszych artykułach i analizach.</p>
        </div>
        <a href="/blog/" class="link-arrow" style="color:var(--orange);border-bottom-color:var(--orange);">
          Czytaj artykuły
          <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
            <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </div>

      <div class="topics-grid">
        <div class="topic-card">
          <span class="topic-num">01</span>
          <h3>Pokazy fontann multimedialnych</h3>
          <div class="topic-desc">Opisujemy technologię i organizację widowisk wodno-muzycznych, prezentujemy przykłady znanych pokazów oraz analizujemy ich wpływ na odbiorców.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Opisujemy technologię i organizację widowisk wodno-muzycznych, prezentujemy przykłady znanych pokazów oraz analizujemy ich wpływ na odbiorców.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">02</span>
          <h3>Technologie wodne</h3>
          <div class="topic-desc">Publikujemy artykuły o zastosowaniach nowoczesnych rozwiązań technicznych w fontannach oraz systemach synchronizacji wody, światła i dźwięku.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Publikujemy artykuły o zastosowaniach nowoczesnych rozwiązań technicznych w fontannach oraz systemach synchronizacji wody, światła i dźwięku.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">03</span>
          <h3>Realizacje i inspiracje</h3>
          <div class="topic-desc">Prezentujemy ciekawe projekty fontann z Polski i świata, omawiamy ich architekturę, koncepcje oraz wpływ na przestrzeń publiczną.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Prezentujemy ciekawe projekty fontann z Polski i świata, omawiamy ich architekturę, koncepcje oraz wpływ na przestrzeń publiczną.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">04</span>
          <h3>Poradniki i analizy</h3>
          <div class="topic-desc">Oferujemy praktyczne poradniki dotyczące projektowania, utrzymania i wykorzystania fontann oraz analizy trendów branżowych.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Oferujemy praktyczne poradniki dotyczące projektowania, utrzymania i wykorzystania fontann oraz analizy trendów branżowych.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </section>


  <!-- ============================================================
       FAQ — dark section with grid layout (contact tab DNA)
  ============================================================ -->
  <section class="faq-section section-pad">
    <div class="container">
      <div class="faq-layout">

        <div class="faq-intro">
          <span class="eyebrow" style="color:var(--gold)">Wiedza i odpowiedzi</span>
          <h2>Najczęściej zadawane pytania</h2>
          <p>Odpowiedzi na kluczowe pytania dotyczące tematyki portalu.</p>
          <a href="/blog/" class="link-arrow link-arrow-white" style="margin-top:12px;">
            Więcej w artykułach
            <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
              <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
        </div>

        <div class="faq-list" role="list">
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-1"
            >
              <span class="q-text">Jak działa fontanna multimedialna?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-1"
              role="region"
            >
              <div class="faq-answer-inner">
                Fontanna multimedialna łączy systemy wodne, świetlne i dźwiękowe, sterowane komputerowo, aby tworzyć zsynchronizowane widowiska. Dzięki precyzyjnej kontroli można uzyskać dynamiczne efekty wizualne i dźwiękowe w czasie rzeczywistym.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-2"
            >
              <span class="q-text">Jakie technologie stosuje się w pokazach wodnych?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-2"
              role="region"
            >
              <div class="faq-answer-inner">
                Pokazy wykorzystują m.in. pompy wysokociśnieniowe, dysze o różnych kształtach, zaawansowane oświetlenie LED oraz systemy nagłośnienia i synchronizacji sterowane przez komputery.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-3"
            >
              <span class="q-text">Czym różni się fontanna multimedialna od tradycyjnej?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-3"
              role="region"
            >
              <div class="faq-answer-inner">
                Fontanna multimedialna oferuje dodatkowe funkcje, takie jak integracja ze światłem i muzyką oraz możliwość programowania widowisk, czego nie zapewniają tradycyjne fontanny opierające się wyłącznie na ruchu wody.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-4"
            >
              <span class="q-text">Jakie są wyzwania przy projektowaniu instalacji wodnych do przestrzeni publicznych?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-4"
              role="region"
            >
              <div class="faq-answer-inner">
                Projektowanie wymaga uwzględnienia zarówno aspektów technicznych i bezpieczeństwa, jak i wpływu instalacji na otoczenie, użytkowników oraz środowisko naturalne.
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

</main>

<!-- VoltPaper: partials/footer.html -->
<footer class="site-footer" role="contentinfo">

  <!-- Orange top bar (secondary-color banner DNA) -->
  <div class="footer-top">
    <div class="container">
      <div class="footer-top-inner">
        <h2>FontannaWiedzy</h2>
        <p style="color:rgba(255,255,255,0.85);margin:0;font-size:15px;">Wiedza o fontannach multimedialnych, pokazach wodnych i nowoczesnych technologiach. Inspiracje, poradniki, analizy dla miast i pasjonatów.</p>
      </div>
    </div>
  </div>

  <!-- Footer body -->
  <div class="footer-body">
    <div class="container">
      <div class="footer-grid">

        <!-- Brand column -->
        <div class="footer-brand">
          <h3>FontannaWiedzy</h3>
          <p>Wiedza o fontannach multimedialnych, pokazach wodnych i nowoczesnych technologiach. Inspiracje, poradniki, analizy dla miast i pasjonatów.</p>
          <div class="footer-contact-email" style="margin-top:20px;">
            <p class="footer-col-title">Kontakt</p>
            <a href="mailto:redakcja@dancingwater.eu">
              <svg class="email-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <rect x="1" y="3" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
                <path d="M1 5l7 5 7-5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
              </svg>
              redakcja@dancingwater.eu
            </a>
          </div>
        </div>

        <!-- Nav links column -->
        <div>
          <p class="footer-col-title">Nawigacja</p>
          <ul class="footer-links">
            <li><a href="/">Strona główna</a></li>
            <li><a href="/o-portalu/">O portalu</a></li>
            <li><a href="/blog/">Blog</a></li>
            <li><a href="/artykuly/">Wszystkie wpisy</a></li>
          </ul>
        </div>

        <!-- About column -->
        <div>
          <p class="footer-col-title">O portalu</p>
          <p style="color:rgba(255,255,255,0.45);font-size:14px;font-weight:300;line-height:1.7;">
            Portal informacyjny publikujący artykuły, poradniki i analizy.<br>
            Rzetelna wiedza w jednym miejscu.
          </p>
        </div>

      </div>
    </div>
  </div>

  <!-- Footer bottom -->
  <div class="footer-bottom">
    <div class="container">
      <div class="footer-bottom-inner">
        <p class="copyright">
          &copy;  FontannaWiedzy. Wszelkie prawa zastrzeżone.
        </p>
        <p class="copyright">dancingwater.eu</p>
      </div>
    </div>
  </div>

</footer>

<script src="/assets/js/main.js"></script>
</body>
</html>