<style>
  /* ====== General Page Styling ====== */
  .res-resources-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 20px 80px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111;
  }

  .res-hero-kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d4a546;
    margin-bottom: 8px;
  }

  .res-hero-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .res-hero-subtitle {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 18px;
  }

  .res-hero-text {
    font-size: 14px;
    line-height: 1.7;
    max-width: 720px;
    color: #444;
  }

  /* ====== Data Sheets Block ====== */
  .res-datasheets-header {
    margin-top: 60px;
    margin-bottom: 24px;
  }

  .res-datasheets-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .res-datasheets-desc {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
  }

  .res-datasheets-links {
    font-size: 13px;
    margin-bottom: 26px;
  }

  .res-datasheets-links a {
    margin-right: 18px;
    text-decoration: none;
    color: #d4a546;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
  }

  .res-datasheets-links a:hover {
    border-color: #d4a546;
  }

  /* ====== Filters Row ====== */
  .res-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 40px;
  }

  .res-filter-group {
    flex: 1 1 220px;
    min-width: 200px;
  }

  .res-filter-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
    color: #666;
  }

  .res-filter-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 13px;
    background: #fff;
  }

  .res-filter-button-wrap {
    flex: 0 0 150px;
  }

  .res-filter-button {
    width: 100%;
    padding: 11px 18px;
    border: none;
    border-radius: 40px;
    background: #d4a546;
    color: #111;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
  }

  .res-filter-button:hover {
    background: #e0b758;
    transform: translateY(-1px);
  }

  .res-filter-button:active {
    transform: translateY(0);
  }

  /* ====== Results / Flat List ====== */
  .res-results-wrapper {
    border-top: 1px solid #eee;
    padding-top: 30px;
  }

  .res-product-block {
    padding: 22px 0;
    border-bottom: 1px solid #eee;
  }

  .res-product-block.highlight {
    background: #fff9ec;
  }

  .res-product-category-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #999;
    margin-bottom: 6px;
  }

  .res-product-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .res-product-subtitle {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
  }

  .res-product-doc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .res-doc-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 40px;
    border: 1px solid #ddd;
    font-size: 12px;
    text-decoration: none;
    color: #111;
    background: #fafafa;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .res-doc-button span.res-doc-icon {
    font-size: 14px;
  }

  .res-doc-button:hover {
    background: #fff4dd;
    border-color: #d4a546;
  }

  @media (max-width: 768px) {
    .res-resources-wrapper {
      padding-top: 40px;
    }
    .res-hero-title {
      font-size: 26px;
    }
  }
</style>

<div class="res-resources-wrapper" id="res-resources-root">
  <!-- ===== Hero Section ===== -->
  <div class="res-hero">
    <div class="res-hero-kicker">RESOURCES</div>
    <h1 class="res-hero-title">Technical &amp; Safety Data Sheets</h1>
    <div class="res-hero-subtitle">
      Download TDS, SDS, and Instructions for Use for all Resinify materials.
    </div>
    <p class="res-hero-text">
      Access comprehensive technical and safety information for our professional 3D printing resins.
      Here you can download Technical Data Sheets (TDS), Safety Data Sheets (SDS), and Instructions
      for Use (IFU) for every Resinify material across Dental, Jewelry, Industrial, and Specialty lines.
      These documents support accurate printing, safe handling, and reliable performance.
    </p>
  </div>

  <!-- ===== (Place your bottle image row ABOVE this div when ready) ===== -->

  <!-- ===== Data Sheets Header ===== -->
  <div class="res-datasheets-header">
    <h2 class="res-datasheets-title">Data Sheets</h2>
    <p class="res-datasheets-desc">
      Download safety and technical documents for all Resinify materials.
    </p>
    <div class="res-datasheets-links">
      <a href="#res-results">Handling &amp; Safety</a>
      <a href="#res-results">Technical Data</a>
      <a href="#res-results">Instructions for Use</a>
    </div>
  </div>

  <!-- ===== Filters Row ===== -->
  <div class="res-filters-row">
    <div class="res-filter-group">
      <div class="res-filter-label">Material</div>
      <select id="res-material-select" class="res-filter-select">
        <option value="">– Select –</option>

        <optgroup label="Dental">
          <option value="md600">MD600 – Dental Model Resin</option>
          <option value="md800">MD800 – Dental Model Resin</option>
          <option value="castpro">CastPro – Dental Casting Resin</option>
          <option value="guardpro">GuardPro – Night Guard Resin</option>
          <option value="surgipro">SurgiPro – Surgical Guide Resin</option>
          <option value="tempcrown">TempCrown – Temporary Crown Resin</option>
          <option value="crownpro">CrownPro – Permanent Crown Resin</option>
        </optgroup>

        <optgroup label="Jewelry Casting">
          <option value="cleancast">CleanCast – Casting Resin</option>
          <option value="jewelcast">JewelCast – Casting Resin</option>
          <option value="waxcast">WaxCast – Casting Resin</option>
          <option value="ceramixcast">CeramixCast – Ceramic Casting Resin</option>
        </optgroup>

        <optgroup label="Industrial / Engineering">
          <option value="resinmax">ResinMax – Engineering Resin</option>
          <option value="toughmold">ToughMold – Mold Resin</option>
          <option value="ceramictough">CeramicTough – High-Strength Resin</option>
          <option value="ceramixgray">CeramixGray – Engineering Resin</option>
        </optgroup>

        <optgroup label="Specialty">
          <option value="glaze">Resinify Glaze V7.2 – All-Purpose Dental Glaze</option>
        </optgroup>
      </select>
    </div>

    <div class="res-filter-group">
      <div class="res-filter-label">Language</div>
      <select id="res-language-select" class="res-filter-select">
        <option value="en">English</option>
        <!-- Add more languages later if needed -->
      </select>
    </div>

    <div class="res-filter-button-wrap">
      <button type="button" class="res-filter-button" id="res-search-button">
        Search
      </button>
    </div>
  </div>

  <!-- ===== Results / Flat List ===== -->
  <div class="res-results-wrapper" id="res-results">
    <!-- DENTAL -->
    <div class="res-product-block" id="res-block-md600" data-material="md600">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">MD600 – Dental Model Resin</div>
      <div class="res-product-subtitle">
        High-precision dental model resin for crowns, bridges, and aligner models.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button">
          <span class="res-doc-icon">📄</span> TDS – MD600
        </a>
        <a href="#" class="res-doc-button">
          <span class="res-doc-icon">🛡️</span> SDS – MD600
        </a>
        <a href="#" class="res-doc-button">
          <span class="res-doc-icon">📘</span> IFU – MD600
        </a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-md800" data-material="md800">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">MD800 – Dental Model Resin</div>
      <div class="res-product-subtitle">
        Premium model resin for ultra-detailed, high-strength dental applications.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – MD800</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – MD800</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – MD800</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-castpro" data-material="castpro">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">CastPro – Dental Casting Resin</div>
      <div class="res-product-subtitle">
        Wax-filled casting resin for crowns, copings, and bridges with clean burnout.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CastPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CastPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🔥</span> Burnout Guide – CastPro</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-guardpro" data-material="guardpro">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">GuardPro – Night Guard Resin</div>
      <div class="res-product-subtitle">
        Crystal-clear, biocompatible resin for splints, retainers, and night guards.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – GuardPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – GuardPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – GuardPro</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-surgipro" data-material="surgipro">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">SurgiPro – Surgical Guide Resin</div>
      <div class="res-product-subtitle">
        High-accuracy, drill-guide compatible resin for implant surgery guides.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – SurgiPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – SurgiPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – SurgiPro</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-tempcrown" data-material="tempcrown">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">TempCrown – Temporary Crown Resin</div>
      <div class="res-product-subtitle">
        Tooth-colored temporary crown and bridge resin for chairside workflows.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – TempCrown</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – TempCrown</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – TempCrown</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-crownpro" data-material="crownpro">
      <div class="res-product-category-label">Dental</div>
      <div class="res-product-title">CrownPro – Permanent Crown Resin</div>
      <div class="res-product-subtitle">
        Flagship high-strength, aesthetic resin for permanent crowns and bridges.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CrownPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CrownPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – CrownPro</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🎨</span> Color &amp; Polishing Guide – CrownPro</a>
      </div>
    </div>

    <!-- JEWELRY -->
    <div class="res-product-block" id="res-block-cleancast" data-material="cleancast">
      <div class="res-product-category-label">Jewelry Casting</div>
      <div class="res-product-title">CleanCast – Casting Resin</div>
      <div class="res-product-subtitle">
        Clean-burning casting resin for fine jewelry with sharp detail and low ash.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CleanCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CleanCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🔥</span> Casting &amp; Burnout Guide – CleanCast</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-jewelcast" data-material="jewelcast">
      <div class="res-product-category-label">Jewelry Casting</div>
      <div class="res-product-title">JewelCast – Casting Resin</div>
      <div class="res-product-subtitle">
        High-detail casting resin for rings, settings, and micro-pavé designs.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – JewelCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – JewelCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🔥</span> Casting &amp; Burnout Guide – JewelCast</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-waxcast" data-material="waxcast">
      <div class="res-product-category-label">Jewelry Casting</div>
      <div class="res-product-title">WaxCast – Wax-Filled Casting Resin</div>
      <div class="res-product-subtitle">
        Wax-rich formulation for traditional investment casting workflows.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – WaxCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – WaxCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🔥</span> Burnout Schedule – WaxCast</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-ceramixcast" data-material="ceramixcast">
      <div class="res-product-category-label">Jewelry Casting</div>
      <div class="res-product-title">CeramixCast – Ceramic Casting Resin</div>
      <div class="res-product-subtitle">
        High-temperature ceramic casting resin for advanced jewelry workflows.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CeramixCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CeramixCast</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🔥</span> Ceramic Casting Guide – CeramixCast</a>
      </div>
    </div>

    <!-- INDUSTRIAL / ENGINEERING -->
    <div class="res-product-block" id="res-block-resinmax" data-material="resinmax">
      <div class="res-product-category-label">Industrial / Engineering</div>
      <div class="res-product-title">ResinMax – Engineering Resin</div>
      <div class="res-product-subtitle">
        Tough, high-impact resin for functional prototypes and production parts.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – ResinMax</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – ResinMax</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> Printing Guide – ResinMax</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-toughmold" data-material="toughmold">
      <div class="res-product-category-label">Industrial / Engineering</div>
      <div class="res-product-title">ToughMold – Mold Resin</div>
      <div class="res-product-subtitle">
        Heat-resistant resin optimized for molds, tooling, and short-run production.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – ToughMold</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – ToughMold</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> Mold Making Guide – ToughMold</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-ceramictough" data-material="ceramictough">
      <div class="res-product-category-label">Industrial / Engineering</div>
      <div class="res-product-title">CeramicTough – High-Strength Resin</div>
      <div class="res-product-subtitle">
        Rigid, high-modulus resin for demanding industrial applications.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CeramicTough</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CeramicTough</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> Printing Guide – CeramicTough</a>
      </div>
    </div>

    <div class="res-product-block" id="res-block-ceramixgray" data-material="ceramixgray">
      <div class="res-product-category-label">Industrial / Engineering</div>
      <div class="res-product-title">CeramixGray – Engineering Resin</div>
      <div class="res-product-subtitle">
        High-detail gray engineering resin for prototypes and visual models.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – CeramixGray</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS – CeramixGray</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> Printing Guide – CeramixGray</a>
      </div>
    </div>

    <!-- SPECIALTY -->
    <div class="res-product-block" id="res-block-glaze" data-material="glaze">
      <div class="res-product-category-label">Specialty</div>
      <div class="res-product-title">Resinify Glaze V7.2 – All-Purpose Dental Glaze</div>
      <div class="res-product-subtitle">
        High-gloss, fast-curing glaze for crowns, bridges, and dental models.
      </div>
      <div class="res-product-doc-list">
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📄</span> TDS – Resinify Glaze</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">🛡️</span> SDS Summary – Resinify Glaze</a>
        <a href="#" class="res-doc-button"><span class="res-doc-icon">📘</span> IFU – Glaze Application Guide</a>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    const select = document.getElementById("res-material-select");
    const searchBtn = document.getElementById("res-search-button");
    const blocks = document.querySelectorAll(".res-product-block");

    function clearHighlights() {
      blocks.forEach(b => b.classList.remove("highlight"));
    }

    function handleSearch() {
      const value = select.value;
      if (!value) {
        // no material chosen – just scroll to top of results
        document.getElementById("res-results").scrollIntoView({ behavior: "smooth" });
        clearHighlights();
        return;
      }
      const target = document.querySelector('.res-product-block[data-material="' + value + '"]');
      if (target) {
        clearHighlights();
        target.classList.add("highlight");
        target.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }

    searchBtn.addEventListener("click", handleSearch);
  })();
</script>
.res-contact-highlight {
  position: relative !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  z-index: 1 !important;
}
.industry-card {
  transition: 0.3s ease-in-out;
}

.industry-card:hover {
  background-color: #f7f7f7 !important;
}

.industry-card:hover h2,
.industry-card:hover p {
  color: #000 !important;
}

.industry-card:hover .learn-more {
  color: #e4ac39 !important;
}

.industry-card:hover .icon {
  filter: brightness(0); /* makes icon black */
}
/* Base card */
.industry-card {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover background */
.industry-card:hover {
  background-color: #f7f7f7 !important;  /* light background */
}

/* Title + paragraph + any text */
.industry-card:hover h1,
.industry-card:hover h2,
.industry-card:hover h3,
.industry-card:hover p,
.industry-card:hover span,
.industry-card:hover a {
  color: #000 !important;                 /* dark text on light bg */
}

/* Keep "Learn More" in gold if it has its own class */
.industry-card:hover .learn-more {
  color: #e4ac39 !important;
}
/* Base card */
.industry-card {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover background */
.industry-card:hover {
  background-color: #f7f7f7 !important;  /* light background */
}

/* Title + paragraph + any text */
.industry-card:hover h1,
.industry-card:hover h2,
.industry-card:hover h3,
.industry-card:hover p,
.industry-card:hover span,
.industry-card:hover a {
  color: #000 !important;                 /* dark text on light bg */
}

/* Keep "Learn More" in gold if it has its own class */
.industry-card:hover .learn-more {
  color: #e4ac39 !important;
}
/* Disable Zoho's default block hover shading */
.zs-element-overlay,
.zs-element-hover {
  background: transparent !important;
}
