<!doctype html>
<html lang="pl">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="robots" content="noindex,nofollow,noarchive"/>
  <meta name="theme-color" content="#f6f7f8"/>
  <meta name="description" content="Szukasz nowych okien? Poznaj ofertę produktów DRUTEX u lokalnego sprzedawcy KupOkna. Wypełnij krótki formularz i poproś o indywidualną wycenę."/>
  <meta property="og:title" content="KupOkna | Okna dopasowane do Twojego domu"/>
  <meta property="og:description" content="Lokalna oferta produktów DRUTEX i szybki kontakt w sprawie wyceny."/>
  <meta property="og:type" content="website"/>
  <title>KupOkna — Nowe okna zaczynają się od dobrej wyceny</title>
  <link rel="icon" href="./favicon.svg" type="image/svg+xml"/>
  <link rel="stylesheet" href="./style.css"/>
  <script defer src="./app.js"></script>
</head>
<body>
  <a href="#main" class="skip-link">Przejdź do treści</a>
  <div class="demo-ribbon" role="status"><span class="demo-led"></span> WERSJA POKAZOWA <span class="demo-divider">/</span> Formularz nie wysyła zgłoszeń</div>
  <header class="site-header">
    <a class="brand" href="#top" aria-label="KupOkna – strona główna"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>kup<span class="brand-accent">okna</span><small>.com</small></span></a>
    <nav class="nav-links" aria-label="Nawigacja główna"><a href="#oferta">Oferta</a><a href="#jak-to-dziala">Jak to działa</a><a href="#kontakt">Kontakt</a></nav>
    <a class="nav-cta" href="#wycena">Poproś o wycenę <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
  </header>
  <main id="main">
    <section class="hero" id="top" aria-labelledby="hero-title">
      <div class="hero-visual">
        <img class="hero-photo" src="https://images.unsplash.com/photo-1758448756207-54505680d130?auto=format&amp;fit=crop&amp;w=1600&amp;q=78" alt="Nowoczesny dom z dużymi przeszkleniami i ogrodem" fetchpriority="high" decoding="async"/>
        <div class="hero-overlay"></div>
        <div class="hero-copy">
          <div class="eyebrow"><span class="eyebrow-line"></span> LOKALNY SALON • PRODUKTY DRUTEX</div>
          <h1 id="hero-title">Więcej światła.<br/>Lepsze <em>okna.</em></h1>
          <p>Okna i drzwi dopasowane do Twojego domu. Bez zbędnych formalności — zacznij od krótkiego zapytania o wycenę.</p>
          <a href="#wycena" class="hero-link">Otrzymaj indywidualną wycenę <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
          <div class="hero-bottom"><span class="hero-detail"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-4.8 7-11a7 7 0 0 0-14 0c0 6.2 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg> Bytów i okolice</span><span class="hero-dash"></span><span class="hero-detail">Lokalne doradztwo</span></div>
        </div>
        <div class="hero-image-credit">Fotografia poglądowa · Aalo Lens / Unsplash</div>
      </div>
      <div class="hero-form-wrap" id="wycena">
        <div class="form-card">
          <div class="form-card-top"><span class="form-kicker"><span class="red-dot"></span> ZAPYTANIE O WYCENĘ</span><span class="form-time"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> ok. 1 min</span></div>
          <h2>Porozmawiajmy<br/>o Twoich <span>oknach.</span></h2>
          <p class="form-intro">Zostaw kontakt, a doradca będzie mógł przygotować propozycję dopasowaną do Twoich potrzeb.</p>
          <form id="leadForm" class="lead-form" novalidate>
            <div class="field"><label for="fullName">Imię lub imię i nazwisko <span>*</span></label><input id="fullName" name="name" type="text" autocomplete="name" maxlength="120" required placeholder="Jak możemy się do Ciebie zwracać?"/></div>
            <div class="field-row">
              <div class="field"><label for="email">Adres e-mail <span>*</span></label><input id="email" name="email" type="email" autocomplete="email" maxlength="254" required placeholder="twoj@email.pl"/></div>
              <div class="field"><label for="phone">Telefon <span>*</span></label><input id="phone" name="phone" type="tel" autocomplete="tel" inputmode="tel" maxlength="25" required placeholder="+48 500 000 000"/></div>
            </div>
            <div class="field"><label for="message">Wiadomość <span class="optional">(opcjonalnie)</span></label><textarea id="message" name="message" rows="3" maxlength="2000" placeholder="Np. 5 okien PVC i drzwi tarasowe, okolice Bytowa…"></textarea></div>
            <div class="honeypot" aria-hidden="true"><label for="website">Strona internetowa</label><input id="website" name="website" type="text" tabindex="-1" autocomplete="off"/></div>
            <div class="turnstile-slot" data-turnstile-container hidden></div>
            <p class="privacy-small">Administratorem danych będzie operator salonu KupOkna. Dane podane w formularzu będą wykorzystane w celu obsługi zapytania. <a href="#polityka" data-privacy-open>Informacja o prywatności</a>.</p>
            <button type="submit" class="submit-button"><span>Wyślij prośbę o wycenę</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></button>
            <div id="formResult" role="status" aria-live="polite"></div>
            <div class="form-bottom"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg><span>Twoje dane służą wyłącznie obsłudze zapytania</span></div>
          </form>
        </div>
      </div>
    </section>
    <section class="trust-strip" aria-label="Korzyści"><div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3 12 6 6L21 6"/></svg><span>Indywidualne podejście</span></div><div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4zM12 4v16M4 12h16"/></svg><span>Nowoczesna stolarka</span></div><div><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-4.8 7-11a7 7 0 0 0-14 0c0 6.2 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg><span>Lokalne wsparcie</span></div></section>
    <section class="offers content-section" id="oferta"><div class="section-head"><div><p class="section-kicker">01 / CO OFERUJEMY</p><h2>Twój dom zasługuje<br/>na <span>dobry wybór.</span></h2></div><p>Pomagamy rozpocząć proces doboru stolarki. W zapytaniu możesz opisać swoje potrzeby, a my przekażemy je do konsultacji.</p></div>
      <div class="offer-grid"><article class="offer-card offer-pvc"><div class="offer-illustration" aria-hidden="true"><svg viewBox="0 0 240 150"><defs><linearGradient id="glass1" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#d6e5ed"/><stop offset="1" stop-color="#8faebf"/></linearGradient></defs><rect x="61" y="5" width="116" height="140" rx="3" fill="#e9ecee"/><rect x="69" y="13" width="100" height="124" fill="url(#glass1)"/><path d="M119 13v124M69 75h100" stroke="#f7f8f8" stroke-width="7"/><path d="m69 73 100-60M69 135l100-61" stroke="#ffffff" stroke-opacity=".28" stroke-width="10"/><rect x="113" y="80" width="3" height="19" rx="1.5" fill="#596875"/></svg></div><div class="offer-label">01 / OKNA PVC</div><h3>Okna, które robią różnicę.</h3><p>Estetyka, komfort i dopasowanie do charakteru budynku.</p></article>
      <article class="offer-card offer-doors"><div class="offer-illustration" aria-hidden="true"><svg viewBox="0 0 240 150"><rect x="63" y="4" width="114" height="144" rx="2" fill="#6a7781"/><rect x="70" y="11" width="100" height="137" fill="#333c46"/><path d="M76 17h88v74H76z" fill="#9ab6c5"/><path d="M76 17 164 91M76 91l88-74" stroke="#d9e3e7" opacity=".2" stroke-width="2"/><path d="M118 11v137" stroke="#8896a0" stroke-width="4"/><rect x="120" y="92" width="4" height="24" rx="2" fill="#edf1f3"/></svg></div><div class="offer-label">02 / DRZWI</div><h3>Wejście w dobrym stylu.</h3><p>Rozwiązania dobrane do wyglądu i funkcji Twojego domu.</p></article>
      <article class="offer-card offer-terrace"><div class="offer-illustration" aria-hidden="true"><svg viewBox="0 0 240 150"><rect x="26" y="17" width="188" height="119" rx="2" fill="#566571"/><rect x="34" y="25" width="172" height="103" fill="#b8d1d8"/><path d="M35 109 87 68 130 104 172 59l34 38v31H34z" fill="#7eaa99"/><path d="M34 25h172v24H34z" fill="#c3e1ea"/><path d="M121 25v103" stroke="#596772" stroke-width="7"/><path d="M36 91 106 25" stroke="#fff" stroke-opacity=".22" stroke-width="7"/><rect x="115" y="73" width="4" height="20" rx="1" fill="#d6e1e6"/></svg></div><div class="offer-label">03 / SYSTEMY TARASOWE</div><h3>Przestrzeń bez granic.</h3><p>Przeszklenia, które łączą wnętrze z otoczeniem.</p></article></div>
    </section>
    <section class="process" id="jak-to-dziala"><div class="process-inner"><div class="process-header"><p class="section-kicker">02 / JAK TO DZIAŁA</p><h2>Trzy kroki do<br/><span>lepszego widoku.</span></h2></div><div class="steps"><div class="step"><span>01</span><div><h3>Wyślij zapytanie</h3><p>Wypełnij krótki formularz — wystarczy imię, e-mail i telefon.</p></div></div><div class="step"><span>02</span><div><h3>Porozmawiaj z doradcą</h3><p>Ustalimy rodzaj stolarki, wymiary i szczegóły Twojego projektu.</p></div></div><div class="step"><span>03</span><div><h3>Otrzymaj propozycję</h3><p>Przedstawimy ofertę po doprecyzowaniu potrzeb i zakresu.</p></div></div></div></div></section>
    <section class="closing" id="kontakt"><div><p class="section-kicker">MASZ PYTANIA?</p><h2>Dobry projekt zaczyna się<br/>od <span>rozmowy.</span></h2><p>Lokalny punkt sprzedaży produktów DRUTEX. Napisz, czego potrzebujesz, a wrócimy do rozmowy o Twoich oknach.</p></div><div class="closing-actions"><a href="#wycena" class="closing-button">Przejdź do formularza <svg viewBox="0 0 24 24"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a><a href="mailto:drutex@kupokna.com" class="closing-email">drutex@kupokna.com</a></div></section>
  </main>
  <footer class="footer"><div class="footer-brand"><a class="brand" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span>kup<span class="brand-accent">okna</span><small>.com</small></span></a><span>Lokalna oferta produktów DRUTEX.<br/>Niezależna witryna sprzedawcy, nie strona producenta.</span></div><div class="footer-right"><a href="#polityka" data-privacy-open>Informacja o prywatności</a><span>Projekt demonstracyjny © 2026</span></div></footer>
  <dialog id="privacyDialog" class="privacy-dialog" aria-labelledby="privacyTitle"><button class="dialog-close" aria-label="Zamknij" data-privacy-close>×</button><p class="section-kicker">OCHRONA DANYCH</p><h2 id="privacyTitle">Informacja o prywatności</h2><p>To demonstracyjna wersja strony. Formularz nie zapisuje i nie wysyła danych. Przed opublikowaniem wersji produkcyjnej należy potwierdzić pełne dane administratora, adres kontaktowy do spraw ochrony danych, podstawę prawną i okres przechowywania zgłoszeń, odbiorców danych oraz prawa osób, których dane dotyczą.</p><p>Kontakt wskazany w ogłoszeniu: <a href="mailto:drutex@kupokna.com">drutex@kupokna.com</a>. Strona nie jest oficjalną witryną producenta DRUTEX.</p><button data-privacy-close class="dialog-button">Rozumiem</button></dialog>
</body>
</html>
