.elementor-22 .elementor-element.elementor-element-338582b{--display:flex;}.elementor-22 .elementor-element.elementor-element-6d00b70{--display:flex;}.elementor-22 .elementor-element.elementor-element-1a1eff7.elementor-element{--align-self:center;}.elementor-22 .elementor-element.elementor-element-fade5b9{--display:flex;}.elementor-22 .elementor-element.elementor-element-9914574{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 20px 20px;border-style:solid;border-width:5px 5px 5px 5px;border-color:#FF6E00;border-radius:10px 10px 10px 10px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-22 .elementor-element.elementor-element-9914574.elementor-element{--align-self:center;}.elementor-22 .elementor-element.elementor-element-8aaa77a{--display:flex;}.elementor-22 .elementor-element.elementor-element-5c4acb2{width:100%;max-width:100%;}.elementor-22 .elementor-element.elementor-element-e66d5f3{--display:flex;}.elementor-22 .elementor-element.elementor-element-9283748{background-color:#000000;}/* Start custom CSS for shortcode, class: .elementor-element-9914574 */<style>

  .elevation-hero-section {

    position: relative;

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23111" width="100" height="100"/></svg>') no-repeat center center/cover;

    color: #ffffff;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    padding: 80px 20px 60px 20px;

    box-sizing: border-box;

    overflow: hidden;

  }

  

  .elevation-hero-section::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: linear-gradient(90deg, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.7) 50%, rgba(15,15,15,0.4) 100%);

    z-index: 1;

  }



  .elevation-hero-content {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

  }



  .elevation-hero-title {

    font-size: 48px;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 20px;

    max-width: 600px;

    letter-spacing: -0.5px;

  }



  .elevation-hero-subtitle {

    font-size: 18px;

    color: #cccccc;

    margin-bottom: 30px;

    max-width: 550px;

  }



  .elevation-hero-subtitle strong {

    color: #ffffff;

  }



  .elevation-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-bottom: 35px;

  }



  .elevation-btn-primary {

    background-color: #ff6600;

    color: #ffffff;

    padding: 14px 28px;

    font-weight: 700;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    transition: background 0.2s;

    font-size: 15px;

  }



  .elevation-btn-primary:hover {

    background-color: #e55c00;

  }



  .elevation-btn-secondary {

    background-color: rgba(255, 102, 0, 0.15);

    color: #ffffff;

    padding: 14px 28px;

    font-weight: 600;

    border: 1px solid #ff6600;

    border-radius: 4px;

    cursor: pointer;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: background 0.2s;

    font-size: 15px;

  }



  .elevation-btn-secondary:hover {

    background-color: rgba(255, 102, 0, 0.3);

  }



  .elevation-features-list {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    list-style: none;

    padding: 0;

    margin: 0;

    font-size: 14px;

    color: #dddddd;

  }



  .elevation-features-list li {

    display: flex;

    align-items: center;

    gap: 8px;

  }



  .elevation-features-list li span {

    color: #ff6600;

    font-weight: bold;

  }



  /* Styl Formularza i Zakładki Kontaktu (Zawsze widoczny) */

  .elevation-contact-box {

    background: rgba(20, 20, 20, 0.95);

    border: 1px solid rgba(255, 102, 0, 0.4);

    border-radius: 8px;

    padding: 30px;

    max-width: 700px;

    margin-top: 25px;

    margin-bottom: 25px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

  }



  .contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

  }



  @media(max-width: 650px) {

    .contact-grid {

      grid-template-columns: 1fr;

    }

  }



  .contact-group {

    margin-bottom: 15px;

  }



  .contact-group.full-width {

    grid-column: span 2;

  }



  @media(max-width: 650px) {

    .contact-group.full-width {

      grid-column: span 1;

    }

  }



  .contact-group label {

    display: block;

    font-size: 13px;

    color: #ccc;

    margin-bottom: 6px;

  }



  .contact-group input,

  .contact-group textarea {

    width: 100%;

    background: #2a2a2a;

    border: 1px solid #444;

    color: #fff;

    padding: 10px;

    border-radius: 4px;

    font-size: 15px;

    box-sizing: border-box;

  }



  /* Stylizacja pola wyboru pliku */

  .contact-group input[type="file"] {

    padding: 8px;

    background: #2a2a2a;

    color: #aaa;

    cursor: pointer;

  }



  .contact-group input[type="file"]::file-.elementor-22 .elementor-element.elementor-element-9914574-button {

    background: #ff6600;

    color: #fff;

    border: none;

    padding: 6px 12px;

    border-radius: 3px;

    cursor: pointer;

    margin-right: 10px;

    font-weight: 600;

    transition: background 0.2s;

  }



  .contact-group input[type="file"]::file-.elementor-22 .elementor-element.elementor-element-9914574-button:hover {

    background: #e55c00;

  }



  .contact-group input:focus,

  .contact-group textarea:focus {

    border-color: #ff6600;

    outline: none;

  }



  .contact-info-list {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #333;

    display: flex;

    flex-direction: column;

    gap: 10px;

    font-size: 14px;

    color: #aaa;

  }



  .contact-info-list div {

    display: flex;

    align-items: center;

    gap: 10px;

  }



  .contact-info-list a {

    color: #fff;

    text-decoration: none;

    transition: color 0.2s;

  }



  .contact-info-list a:hover {

    color: #ff6600;

  }



  .contact-info-list span.icon {

    color: #ff6600;

    font-size: 16px;

  }



  /* Responsywność */

  @media(max-width: 900px) {

    .elevation-hero-title { font-size: 36px; }

  }

  @media(max-width: 600px) {

    .elevation-hero-title { font-size: 28px; }

  }

<\/style>



<div class="elevation-hero-section">

  <div class="elevation-hero-content">

    <h1 class="elevation-hero-title">Nowoczesne płyty elewacyjne 3D</h1>

    <p class="elevation-hero-subtitle">Ocieplenie domu <strong>nawet 2x szybciej</strong> bez tynkowania.</p>

    

    <div class="elevation-buttons">

      <a href="#contactBox" class="elevation-btn-primary">

        <span style="color:#fff;">✉</span> NAPISZ DO NAS

      </a>

      <a href="https://styrbet.eu/donice/" class="elevation-btn-secondary">

        ZOBACZ REALIZACJE <span style="color:#ff6600;">→</span>

      </a>

    </div>



    <!-- STAŁE OKNO / FORMULARZ KONTAKTOWY -->

    <div id="contactBox" class="elevation-contact-box">

      <h3 style="margin-top:0; color:#fff; margin-bottom:15px; font-size:18px;">Formularz Kontaktowy</h3>

      

      <!-- Ważne: dodano enctype="multipart/form-data" obsługujące pliki -->

      <form action="#" method="POST" enctype="multipart/form-data" onsubmit="event.preventDefault(); alert('Wiadomość wraz z plikiem została wysłana!');">

        <div class="contact-grid">

          <div class="contact-group">

            <label>Twoje Imię:</label>

            <input type="text" placeholder="np. Jan" required>

          </div>

          <div class="contact-group">

            <label>Numer telefonu:</label>

            <input type="tel" placeholder="np. +48 000 000 000" required>

          </div>

          <div class="contact-group full-width">

            <label>Adres e-mail:</label>

            <input type="email" placeholder="np. jan@example.com" required>

          </div>

          <div class="contact-group full-width">

            <label>Treść wiadomości:</label>

            <textarea rows="4" placeholder="Wpisz swoje pytanie lub opis zapytania..." required></textarea>

          </div>

          <!-- Nowe pole do przesyłania plików JPG i PDF -->

          <div class="contact-group full-width">

            <label>Załącz plik (projekt, rzut, zdjęcie - JPG, PDF):</label>

            <input type="file" name="attachment" accept=".jpg, .jpeg, .pdf">

          </div>

        </div>



        <button type="submit" class="elevation-btn-primary" style="width: 100%; justify-content: center; margin-top: 10px;">

          WYŚLIJ WIADOMOŚĆ

        </button>

      </form>



      <!-- Dane kontaktowe -->

      <div class="contact-info-list">

        <div>

          <span class="icon">📞</span> Telefon: <a href="tel:+48575429973">+48 575 429 973</a>

        </div>

        <div>

          <span class="icon">✉️</span> E-mail: <a href="mailto:biuro@styrbet.eu">biuro@styrbet.eu</a>

        </div>

        <div>

          <span class="icon">📍</span> Adres: <span>ul. Słoneczna 134, 42-133 Czarna Wieś</span>

        </div>

      </div>

    </div>



    <ul class="elevation-features-list">

      <li><span>✓</span> Szybki montaż</li>

      <li><span>✓</span> Gotowa elewacja</li>

      <li><span>✓</span> Doskonała izolacja</li>

      <li><span>✓</span> Trwałość na lata</li>

    </ul>



  </div>

</div>/* End custom CSS */