?<!-- ============================================================
     MECHANICAL SEALS USA — PAGE BUILDER VERSION v2
     
     CÓMO USARLO EN ELEMENTOR:
     1. Creá una nueva página → Editá con Elementor
     2. Elegí template "Elementor Canvas" (sin header/footer del tema)
     3. Agregá widget "HTML" y pegá TODO este código
     4. Publicá → Ajustes → Lectura → configurá como Portada estática
     
     CÓMO USARLO EN DIVI:
     1. Creá una nueva página → Divi Builder
     2. Módulo "Code" → pegá el código
     3. Template "Full Width" para quitar header/footer del tema
     4. Configurá como portada en Ajustes → Lectura
     ============================================================ -->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

  /* ─── RESET WORDPRESS/ELEMENTOR BORDERS ─── */
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0b1320 !important;
  }

  .elementor-section,
  .elementor-column,
  .elementor-widget-container,
  .elementor-widget-html .elementor-widget-container,
  .et_pb_row,
  .et_pb_column,
  .et_pb_module,
  .et_pb_code_inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reset para Elementor Flexbox Containers (.e-con) */
  .e-con,
  .e-con>.e-con-inner {
    display: block !important;
  }

  .e-con-full,
  .e-con>.e-con-inner {
    padding-block-end: 0 !important;
    padding-block-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-inline-start: 0 !important;
    text-align: left !important;
  }

  .msusa-root *,
  .msusa-root *::before,
  .msusa-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .msusa-root {
    --navy: #0b1320;
    --navy-mid: #111d30;
    --navy-light: #162240;
    --steel: #1e2d47;
    --blue: #1a5fa8;
    --blue-bright: #2074cc;
    --accent: #d4891a;
    --accent-light: #e8a030;
    --text: #e8edf4;
    --text-muted: #7a8fa8;
    --text-dim: #4a5e78;
    --border: rgba(255, 255, 255, 0.07);
    --border-bright: rgba(255, 255, 255, 0.14);
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background: var(--navy);
    color: var(--text);
  }

  /* ─── ANIMATIONS ──────────────────────────────────── */
  @keyframes pulseDot {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(212, 137, 26, 0.7);
    }

    70% {
      transform: scale(1);
      box-shadow: 0 0 0 6px rgba(212, 137, 26, 0);
    }

    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(212, 137, 26, 0);
    }
  }

  @keyframes bgZoom {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(1.08);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── TOP BAR ─────────────────────────────────────── */
  .msusa-root .topbar {
    background: #08111e;
    border-bottom: 1px solid var(--accent);
    padding: 10px 0;
  }

  .msusa-root .topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .msusa-root .topbar-main {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .msusa-root .topbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    font-weight: 500;
    color: var(--text);
  }

  .msusa-root .topbar-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulseDot 2s infinite;
  }

  .msusa-root .topbar-note {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }

  /* ─── NAV ─────────────────────────────────────────── */
  .msusa-root .msusa-nav {
    background: var(--navy-mid);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 9999;
    backdrop-filter: blur(12px);
  }

  .msusa-root .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }

  .msusa-root .logo {
    font-family: var(--font-display) !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text) !important;
    text-decoration: none !important;
    text-transform: uppercase;
  }

  .msusa-root .logo:hover {
    font-family: var(--font-display) !important;
  }

  .msusa-root .logo span {
    color: var(--accent);
  }

  .msusa-root .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
  }

  .msusa-root .nav-links a {
    font-family: var(--font-display) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: color 0.2s;
  }

  .msusa-root .nav-links a:hover {
    color: var(--text) !important;
    font-family: var(--font-display) !important;
  }

  .msusa-root .nav-cta {
    font-family: var(--font-display) !important;
    background: var(--blue) !important;
    color: var(--text) !important;
    padding: 8px 18px !important;
    border-radius: 3px;
    transition: background 0.2s !important;
  }

  .msusa-root .nav-cta:hover {
    background: var(--blue-bright) !important;
    color: var(--text) !important;
    font-family: var(--font-display) !important;
  }

  /* ─── HERO ────────────────────────────────────────── */
  .msusa-root .hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  /* Hero background: real industrial image via Unsplash + dark overlay */
  .msusa-root .hero-bg-image {
    position: absolute;
    inset: 0;
    /* background-image: moved to HTML */
    background-size: cover;
    background-position: center;
    animation: bgZoom 25s linear infinite alternate;
  }

  .msusa-root .hero-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(105deg,
        rgba(11, 19, 32, 0.95) 0%,
        rgba(11, 19, 32, 0.85) 45%,
        rgba(11, 19, 32, 0.65) 100%); */
  }

  .msusa-root .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 0%, transparent 100%);
  }

  .msusa-root .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .msusa-root .hero-content {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .msusa-root .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
  }

  .msusa-root .hero-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--accent);
  }

  .msusa-root .hero h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 4.8vw, 60px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: var(--text) !important;
    margin-bottom: 24px !important;
  }

  .msusa-root .hero h1 em {
    font-style: normal;
    color: var(--blue-bright);
    display: block;
  }

  .msusa-root .hero-subtitle {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 520px;
  }

  .msusa-root .hero-support {
    font-size: 15px;
    color: #8fa8c4;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 480px;
    border-left: 2px solid var(--accent);
    padding-left: 16px;
  }

  .msusa-root .hero-trust-line {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 32px;
    font-style: italic;
    padding-left: 18px;
  }

  .msusa-root .hero-trust-line strong {
    color: var(--text-muted);
    font-style: normal;
  }

  .msusa-root .hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .msusa-root .btn-primary {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, #f0a531 100%) !important;
    color: #0b1320 !important;
    font-family: var(--font-display) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 28px !important;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: none !important;
    box-shadow: 0 4px 14px rgba(212, 137, 26, 0.3);
  }

  .msusa-root .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 137, 26, 0.5) !important;
    color: #0b1320 !important;
    background: linear-gradient(135deg, #f0a531 0%, var(--accent) 100%) !important;
    font-family: var(--font-display) !important;
  }

  .msusa-root .btn-secondary {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    color: var(--text) !important;
    font-family: var(--font-display) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 24px !important;
    border-radius: 3px;
    border: 1px solid var(--border-bright) !important;
    text-decoration: none !important;
    transition: border-color 0.2s, background 0.2s;
  }

  .msusa-root .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
    font-family: var(--font-display) !important;
  }

  /* ─── HERO FORM CARD ──────────────────────────────── */
  .msusa-root .hero-card {
    background: rgba(17, 29, 48, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 36px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  }

  .msusa-root .hero-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }

  .msusa-root .hero-card-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
    line-height: 1.5;
  }

  .msusa-root .form-row {
    margin-bottom: 13px;
  }

  .msusa-root .form-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
  }

  .msusa-root .form-row input,
  .msusa-root .form-row textarea,
  .msusa-root .form-row select {
    width: 100%;
    background: var(--navy-mid);
    border: 1px solid var(--border-bright) !important;
    border-radius: 3px;
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none !important;
    -webkit-appearance: none;
  }

  .msusa-root .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8fa8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }

  .msusa-root .form-row select option {
    background: var(--navy-mid);
    color: var(--text);
  }

  .msusa-root .form-row input:focus,
  .msusa-root .form-row textarea:focus,
  .msusa-root .form-row select:focus {
    border-color: var(--blue-bright) !important;
  }

  .msusa-root .form-row textarea {
    resize: vertical;
    min-height: 72px;
  }

  .msusa-root .form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 13px;
  }

  .msusa-root .form-row-half .form-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
  }

  .msusa-root .form-row-half .form-field input {
    width: 100%;
    background: var(--navy-mid);
    border: 1px solid var(--border-bright) !important;
    border-radius: 3px;
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none !important;
  }

  .msusa-root .form-row-half .form-field input:focus {
    border-color: var(--blue-bright) !important;
  }

  .msusa-root .form-submit {
    width: 100%;
    background: var(--blue) !important;
    color: var(--text) !important;
    font-family: var(--font-display) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px;
    border: none !important;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 6px;
  }

  .msusa-root .form-submit:hover {
    background: var(--blue-bright) !important;
    color: var(--text) !important;
    font-family: var(--font-display) !important;
  }

  .msusa-root .form-note {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 10px;
    line-height: 1.55;
  }

  /* ─── SECTION COMMONS ─────────────────────────────── */
  .msusa-root .section-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }

  .msusa-root .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.1;
  }

  .msusa-root .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }



  /* ─── WHAT WE DO ──────────────────────────────────── */
  .msusa-root .what-we-do {
    padding: 100px 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .what-header {
    text-align: center;
    margin-bottom: 56px;
  }

  .msusa-root .what-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--border);
  }

  .msusa-root .what-card {
    background: var(--navy-mid);
    padding: 36px 28px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
  }

  .msusa-root .what-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, var(--accent), var(--blue-bright));
    transition: height 0.4s ease;
  }

  .msusa-root .what-card:hover::before {
    height: 100%;
  }

  .msusa-root .what-card:hover {
    background: var(--steel);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .msusa-root .what-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background: rgba(212, 137, 26, 0.1);
    border: 1px solid rgba(212, 137, 26, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
  }

  .msusa-root .what-card h3 {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text) !important;
    margin-bottom: 10px !important;
  }

  .msusa-root .what-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ─── HOW IT WORKS ────────────────────────────────── */
  .msusa-root .how {
    padding: 100px 0;
    background: var(--navy-light);
  }

  .msusa-root .how-header {
    text-align: center;
    margin-bottom: 64px;
  }

  .msusa-root .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }

  .msusa-root .steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5% + 20px);
    right: calc(12.5% + 20px);
    height: 1px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--blue) 100%);
    opacity: 0.4;
  }

  .msusa-root .step {
    padding: 0 20px;
    text-align: center;
  }

  .msusa-root .step-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--steel) 0%, var(--navy-mid) 100%);
    border: 1px solid var(--border-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .msusa-root .step:hover .step-num {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 24px rgba(212, 137, 26, 0.2);
    border-color: rgba(212, 137, 26, 0.4);
  }

  .msusa-root .step h4 {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text) !important;
    margin-bottom: 10px !important;
  }

  .msusa-root .step p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ─── INDUSTRIES ──────────────────────────────────── */
  .msusa-root .industries {
    padding: 100px 0;
    background: var(--navy);
    border-top: 1px solid var(--border);
  }

  .msusa-root .industries-header {
    margin-bottom: 48px;
  }

  .msusa-root .industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .msusa-root .industry-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: default;
  }

  .msusa-root .industry-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
  }

  .msusa-root .industry-card:hover .industry-card-img {
    transform: scale(1.04);
  }

  .msusa-root .industry-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 19, 32, 0.92) 0%, rgba(11, 19, 32, 0.3) 100%);
    transition: background 0.3s;
  }

  .msusa-root .industry-card:hover .industry-card-overlay {
    background: linear-gradient(to top, rgba(11, 19, 32, 0.95) 0%, rgba(26, 95, 168, 0.25) 100%);
  }

  .msusa-root .industry-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 22px;
  }

  .msusa-root .industry-card-content h4 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text) !important;
    margin-bottom: 4px !important;
  }

  .msusa-root .industry-card-content span {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }

  /* ─── PRODUCTS ────────────────────────────────────── */
  .msusa-root .products {
    padding: 100px 0;
    background: var(--navy-mid);
    border-top: 1px solid var(--border);
  }

  .msusa-root .products-header {
    margin-bottom: 48px;
  }

  .msusa-root .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--border);
  }

  .msusa-root .product-card {
    background: var(--navy);
    overflow: hidden;
    transition: background 0.2s;
  }

  .msusa-root .product-card:hover {
    background: var(--steel);
  }

  .msusa-root .product-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
  }

  .msusa-root .product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.3s, transform 0.4s ease;
  }

  .msusa-root .product-card:hover .product-card-img img {
    filter: grayscale(0%);
    transform: scale(1.04);
  }

  /* --- IMAGE PLACEHOLDER --- */
  .msusa-root .img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background: linear-gradient(135deg, var(--steel) 0%, var(--navy-light) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    position: relative;
  }

  .msusa-root .img-placeholder svg {
    color: var(--text-dim);
    opacity: 0.5;
  }

  .msusa-root .img-placeholder span {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.6;
    text-align: center;
    padding: 0 12px;
  }

  .msusa-root .img-placeholder-tall {
    aspect-ratio: 4/3;
  }

  .msusa-root .img-placeholder-catalog {
    aspect-ratio: 3/4;
    max-height: 220px;
  }

  .msusa-root .product-card-body {
    padding: 22px 24px;
  }

  .msusa-root .product-card-body h4 {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text) !important;
    margin-bottom: 6px !important;
  }

  .msusa-root .product-card-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
  }

  .msusa-root .product-tag {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(212, 137, 26, 0.08);
    border: 1px solid rgba(212, 137, 26, 0.2);
    padding: 3px 8px;
    border-radius: 2px;
  }

  /* ─── BRAND TRUST LINE ────────────────────────────── */
  .msusa-root .brand-trust {
    background: var(--navy-light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
  }

  .msusa-root .brand-trust-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .msusa-root .brand-trust-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
  }

  .msusa-root .brand-trust-divider {
    width: 1px;
    height: 24px;
    background: var(--border-bright);
  }

  .msusa-root .brand-trust-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .msusa-root .brand-trust-text strong {
    color: var(--text);
  }

  /* ─── SHIPPING ────────────────────────────────────── */
  .msusa-root .shipping {
    background: var(--navy-light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 80px 0;
  }

  .msusa-root .shipping-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .msusa-root .shipping-text p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 20px;
  }

  .msusa-root .shipping-bullets {
    list-style: none;
    margin-bottom: 20px;
  }

  .msusa-root .shipping-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--text-muted);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .shipping-bullets li:last-child {
    border-bottom: none;
  }

  .msusa-root .shipping-bullets li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 8px;
  }

  .msusa-root .shipping-disclaimer {
    margin-top: 24px;
    padding: 16px;
    background: rgba(212, 137, 26, 0.06);
    border: 1px solid rgba(212, 137, 26, 0.2);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  .msusa-root .shipping-carriers {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .msusa-root .carrier-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--steel);
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  .msusa-root .carrier-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.05em;
  }

  .msusa-root .carrier-info {
    flex: 1;
  }

  .msusa-root .carrier-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text);
    text-transform: uppercase;
  }

  .msusa-root .carrier-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .msusa-root .carrier-badge {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(212, 137, 26, 0.1);
    border: 1px solid rgba(212, 137, 26, 0.25);
    padding: 4px 10px;
    border-radius: 2px;
  }

  /* ─── FOOTER ──────────────────────────────────────── */
  .msusa-root .msusa-footer {
    background: #07101c;
    border-top: 1px solid var(--border-bright);
    padding: 60px 0 32px;
  }

  .msusa-root .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 48px;
  }

  .msusa-root .footer-brand p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 300px;
  }

  .msusa-root .footer-location {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--steel);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  .msusa-root .footer-location strong {
    color: var(--text);
    display: block;
    margin-bottom: 4px;
  }

  .msusa-root .footer-col h5 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 16px;
  }

  .msusa-root .footer-col ul {
    list-style: none;
  }

  .msusa-root .footer-col ul li {
    margin-bottom: 10px;
  }

  .msusa-root .footer-col ul li a {
    font-size: 14px;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: color 0.2s;
  }

  .msusa-root .footer-col ul li a:hover {
    color: var(--text) !important;
  }

  .msusa-root .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .msusa-root .footer-bottom p {
    font-size: 12px;
    color: var(--text-dim);
  }

  .msusa-root .footer-bottom a {
    color: var(--text-dim) !important;
    text-decoration: none !important;
  }

  /* ─── MODAL ───────────────────────────────────────── */
  .msusa-root .msusa-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(4, 9, 17, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
  }

  .msusa-root .msusa-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  .msusa-root .msusa-modal {
    background: var(--navy);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  }

  .msusa-root .msusa-modal-overlay.active .msusa-modal {
    transform: translateY(0);
  }

  .msusa-root .msusa-modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: rgba(11, 19, 32, 0.95);
    backdrop-filter: blur(4px);
    z-index: 10;
  }

  .msusa-root .msusa-modal-header h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    color: var(--text) !important;
    margin: 0 !important;
  }

  .msusa-root .msusa-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
  }

  .msusa-root .msusa-modal-close:hover {
    color: var(--accent);
  }

  .msusa-root .msusa-modal-body {
    padding: 24px;
  }

  .msusa-root .drop-zone {
    border: 2px dashed var(--border-bright);
    border-radius: 6px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    background: rgba(26, 95, 168, 0.05);
    transition: all 0.2s;
    margin-bottom: 24px;
  }

  .msusa-root .drop-zone:hover,
  .msusa-root .drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(212, 137, 26, 0.05);
  }

  .msusa-root .drop-zone-icon {
    width: 40px;
    height: 40px;
    color: var(--blue);
    margin-bottom: 12px;
  }

  .msusa-root .drop-zone-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 4px;
  }

  .msusa-root .drop-zone-subtext {
    font-size: 12px;
    color: var(--text-muted);
  }

  .msusa-root .preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }

  .msusa-root .preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .msusa-root .preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .msusa-root .preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
  }

  .msusa-root .preview-remove:hover {
    background: var(--accent);
  }

  /* ─── API 682 BANNER ──────────────────────────────── */
  .msusa-root .api-cert-banner {
    background: linear-gradient(90deg, var(--navy) 0%, #152238 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 40px 24px;
    text-align: center;
    color: white;
  }

  .msusa-root .api-cert-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .msusa-root .api-icon {
    color: var(--accent);
    width: 48px;
    height: 48px;
  }

  .msusa-root .api-cert-banner h2 {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    margin: 0;
    color: white !important;
  }

  .msusa-root .api-cert-banner p {
    font-size: 16px;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
  }

  .msusa-root .api-cert-badge {
    background: rgba(212, 137, 26, 0.15);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* ─── CATALOGS SECTION ────────────────────────────── */
  .msusa-root .catalogs-section {
    padding: 80px 24px;
    background: #0b1320;
  }

  .msusa-root .catalogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
  }

  .msusa-root .catalog-card {
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    text-align: left;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .msusa-root .catalog-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-bright);
  }

  .msusa-root .catalog-image-wrapper {
    width: 120px;
    flex-shrink: 0;
  }

  .msusa-root .catalog-cover-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .msusa-root .catalog-content {
    flex: 1;
  }

  .msusa-root .catalog-card h3 {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    color: var(--text) !important;
    margin: 0 0 8px 0 !important;
  }

  .msusa-root .catalog-card p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
  }

  .msusa-root .catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--accent) 0%, #f0a531 100%);
    border: none;
    color: #0b1320;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .msusa-root .catalog-btn:hover {
    background: linear-gradient(135deg, #f0a531 0%, var(--accent) 100%);
    transform: translateY(-2px);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 1024px) {
    .msusa-root .hero-inner {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .msusa-root .hero-card {
      max-width: 520px;
    }

    .msusa-root .what-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .msusa-root .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
    }

    .msusa-root .steps::before {
      display: none;
    }

    .msusa-root .industries-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .msusa-root .products-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .msusa-root .catalogs-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .msusa-root .shipping-inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .msusa-root .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 640px) {

    .msusa-root .what-grid,
    .msusa-root .industries-grid,
    .msusa-root .products-grid,
    .msusa-root .catalogs-grid {
      grid-template-columns: 1fr;
    }

    .msusa-root .catalog-card {
      flex-direction: column;
      text-align: center;
      padding: 32px;
    }

    .msusa-root .steps {
      grid-template-columns: 1fr;
    }

    .msusa-root .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .msusa-root .nav-links {
      display: none;
    }

    .msusa-root .topbar-main {
      gap: 12px;
    }

    .msusa-root .topbar-item {
      font-size: 11px;
    }

    .msusa-root .form-row-half {
      grid-template-columns: 1fr;
    }
  }

  /* ─── TRUSTED API 682 & SOLUTIONS ─── */
  .msusa-root .api-trust-banner {
    background: var(--navy);
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .msusa-root .api-trust-flex {
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
  }

  .msusa-root .api-trust-content {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
  }

  .msusa-root .api-trust-label {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .msusa-root .api-trust-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .msusa-root .api-trust-text p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .msusa-root .api-trust-text p:last-child {
    margin-bottom: 0;
  }

  .msusa-root .api-trust-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex: 2;
    min-width: 600px;
  }

  .msusa-root .api-trust-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 24px 16px;
    text-align: center;
    transition: transform 0.2s, background 0.2s;
  }

  .msusa-root .api-trust-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
  }

  .msusa-root .api-trust-icon {
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 16px auto;
    display: block;
  }

  .msusa-root .api-trust-stat {
    color: var(--accent);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .msusa-root .api-trust-desc {
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: 0.8;
  }

  @media (max-width: 1024px) {
    .msusa-root .api-trust-cards {
      grid-template-columns: repeat(2, 1fr);
      min-width: 100%;
    }

    .msusa-root .api-trust-content {
      max-width: 100%;
    }
  }

  @media (max-width: 640px) {
    .msusa-root .api-trust-cards {
      grid-template-columns: 1fr;
    }
  }

  .msusa-root .technical-excellence {
    padding: 100px 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .tech-excellence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
  }

  .msusa-root .tech-excellence-card {
    background: var(--navy-mid);
    padding: 40px 32px;
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  .msusa-root .tech-excellence-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    text-transform: uppercase;
  }

  .msusa-root .tech-excellence-list {
    list-style: none;
  }

  .msusa-root .tech-excellence-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
  }

  .msusa-root .tech-excellence-list li:last-child {
    margin-bottom: 0;
  }

  .msusa-root .tech-excellence-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .msusa-root .eng-support {
    position: relative;
    padding: 0;
    background: #080f1a;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }

  .msusa-root .eng-support-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .msusa-root .eng-support-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 15, 26, 0.1) 0%, rgba(8, 15, 26, 1) 50%);
    pointer-events: none;
  }

  .msusa-root .eng-support-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 72px 0;
    position: relative;
    z-index: 1;
  }

  .msusa-root .eng-support-content {
    max-width: 640px;
    padding-left: 40px;
  }

  .msusa-root .eng-support-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    margin-bottom: 24px;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .msusa-root .eng-support-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  @media (max-width: 900px) {
    .msusa-root .eng-support-bg {
      width: 100%;
    }

    .msusa-root .eng-support-overlay {
      background: linear-gradient(0deg, rgba(8, 15, 26, 1) 40%, rgba(8, 15, 26, 0.3) 100%);
    }

    .msusa-root .eng-support-flex {
      justify-content: flex-start;
      padding: 160px 0 60px 0;
    }

    .msusa-root .eng-support-content {
      padding-left: 0;
    }
  }

  .msusa-root .modal-success-wrapper {
    text-align: center;
    padding: 40px 10px;
    animation: fadeInUp 0.5s ease;
  }

  .msusa-root .modal-success-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
  }

  .msusa-root .modal-step-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
    margin: 0 auto 16px auto;
    display: block;
  }

  .msusa-root .modal-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .msusa-root .modal-step-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
    margin-bottom: 8px;
  }

  .msusa-root .modal-text {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .msusa-root .modal-step-text {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .msusa-root .modal-btn-primary {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--accent) 0%, #f0a531 100%);
    color: #0b1320;
    border: none;
    padding: 16px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }

  .msusa-root .modal-btn-secondary {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-bright);
    padding: 16px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.2s;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }

  .msusa-root .modal-btn-link {
    background: transparent;
    border: none;
    color: var(--text-dim);
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
  }

  .msusa-root .modal-otp-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 4px;
    font-family: monospace;
  }

  .msusa-root .modal-error-msg {
    color: #ff4a4a;
    font-size: 13px;
    margin-top: -8px;
    margin-bottom: 16px;
    display: none;
  }

  /* --- FEATURED SEALS --- */
  .msusa-root .featured-seals {
    padding: 100px 0;
    background: var(--navy);
  }

  .msusa-root .featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
  }

  .msusa-root .featured-card {
    background: var(--navy-mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }

  .msusa-root .featured-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
  }

  .msusa-root .featured-img-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--navy-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }

  .msusa-root .featured-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(10%);
    transition: filter 0.3s, transform 0.4s ease;
  }

  .msusa-root .featured-card:hover .featured-img-wrapper img {
    filter: grayscale(0%);
    transform: scale(1.04);
  }

  .msusa-root .featured-img-wrapper .img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
    align-self: stretch;
    margin: 0;
    border: none;
    border-radius: 0;
  }

  .msusa-root .featured-card-body {
    padding: 32px 24px;
  }

  .msusa-root .featured-card-body h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .msusa-root .featured-card-body p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .msusa-root .featured-card-body .btn-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
  }

  .msusa-root .featured-card-body .btn-link:hover {
    color: var(--accent-hover);
  }

  /* --- NEW STYLES ------------------------------------------  */
  .brand-logo-bar {
    background: #080f1a;
    border-bottom: 1px solid var(--border);
    padding: 30px 0;
    text-align: center;
  }

  .brand-logo-text {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 16px;
  }

  .brand-logo-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
  }

  .brand-logo-item {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    opacity: 0.7;
    transition: opacity 0.3s, color 0.3s;
  }

  .brand-logo-item:hover {
    opacity: 1;
    color: var(--text);
  }

  .eng-authority {
    padding: 80px 0;
    background: var(--navy-mid);
    border-bottom: 1px solid var(--border);
  }

  .eng-authority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
  }

  .eng-auth-item {
    background: var(--navy);
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
  }

  .eng-auth-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
    margin: 0 auto 16px;
    background: rgba(212, 137, 26, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .eng-auth-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  .eng-auth-desc {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .compact-tech {
    padding: 80px 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
  }

  .tech-compact-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .tech-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .tech-compact-box {
    background: var(--navy-mid);
    border: 1px solid var(--border);
    padding: 32px;
    border-radius: 4px;
  }

  .tech-compact-box h4 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
  }

  .tech-compact-box ul {
    list-style: none;
    padding: 0;
  }

  .tech-compact-box ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 15px;
  }

  .tech-compact-box ul li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-family: monospace;
  }

  .technical-form-section {
    padding: 100px 0;
    background: var(--navy-light);
    border-bottom: 1px solid var(--border);
  }

  .tech-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 60px;
    align-items: center;
  }

  .tech-form-benefits {
    list-style: none;
    padding: 0;
  }

  .tech-form-benefits li {
    color: var(--text);
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .tech-form-card {
    background: rgba(17, 29, 48, 0.95);
  }

  @media(max-width: 900px) {

    .tech-compact-grid,
    .tech-form-wrapper {
      grid-template-columns: 1fr;
    }
  }


  /* --- REFINED INDUSTRIAL OVERRIDES (NAVY & GOLD) --- */
  .msusa-root {
    --navy: #0b1320;
    --navy-mid: #111d30;
    --navy-light: #162240;
    --steel: #1e2d47;
    --blue: #1a5fa8;
    --blue-bright: #2074cc;
    --accent: #d4891a;
    --accent-light: #e8a030;
    --text: #e8edf4;
    --text-muted: #7a8fa8;
    --text-dim: #4a5e78;
    --border: rgba(255, 255, 255, 0.07);
    --border-bright: rgba(255, 255, 255, 0.14);

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-mono: 'Barlow', monospace;
    /* Fallback since we removed the mono font */

    background-color: var(--navy);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
  }

  /* Typography & Structure Overrides */
  .msusa-root h1,
  .msusa-root h2,
  .msusa-root h3,
  .msusa-root h4,
  .msusa-root h5,
  .msusa-root h6 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .msusa-root .section-title {
    font-size: 48px;
    font-weight: 700;
  }

  .msusa-root .section-label {
    font-family: var(--font-display);
    color: var(--accent);
    letter-spacing: 0.15em;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    border: 1px solid var(--accent);
    padding: 4px 12px;
    background: rgba(212, 137, 26, 0.05);
    margin-bottom: 16px;
    text-transform: uppercase;
  }

  /* Refined Buttons */
  .msusa-root .btn-primary,
  .msusa-root .nav-cta,
  .msusa-root .form-submit,
  .msusa-root .catalog-btn {
    border-radius: 2px !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--accent) !important;
    color: #0b1320 !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 4px 4px 0px rgba(212, 137, 26, 0.2);
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
  }

  .msusa-root .btn-primary:hover,
  .msusa-root .nav-cta:hover,
  .msusa-root .form-submit:hover,
  .msusa-root .catalog-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(212, 137, 26, 0.2);
    background: var(--accent-light) !important;
  }

  .msusa-root .btn-secondary,
  .msusa-root .modal-btn-secondary {
    border-radius: 2px !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 4px 4px 0px rgba(212, 137, 26, 0.15);
    transition: all 0.2s ease !important;
  }

  .msusa-root .btn-secondary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(212, 137, 26, 0.15);
    background: rgba(212, 137, 26, 0.1) !important;
  }

  /* Top Bar */
  .msusa-root .topbar {
    background: #08111e;
    color: var(--text);
    border-bottom: 1px solid var(--accent);
  }

  .msusa-root .topbar-item {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .msusa-root .topbar-item .dot {
    background: var(--accent);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    animation: pulseDot 2s infinite;
  }

  .msusa-root .topbar-note {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-weight: 400;
  }

  /* Nav */
  .msusa-root .msusa-nav {
    background: rgba(17, 29, 48, 0.95);
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .logo {
    font-size: 24px;
    text-shadow: none;
  }

  .msusa-root .logo span {
    color: var(--accent);
  }

  /* Cards (Products & Catalogs) */
  .msusa-root .product-card,
  .msusa-root .catalog-card,
  .msusa-root .tech-excellence-card,
  .msusa-root .eng-auth-item,
  .msusa-root .tech-compact-box {
    border-radius: 4px;
    background: var(--navy-mid);
    border: 1px solid var(--border);
    position: relative;
    transition: all 0.3s ease;
  }

  .msusa-root .product-card::before,
  .msusa-root .catalog-card::before,
  .msusa-root .eng-auth-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.3s;
  }

  .msusa-root .product-card:hover,
  .msusa-root .catalog-card:hover,
  .msusa-root .eng-auth-item:hover {
    border-color: rgba(212, 137, 26, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .msusa-root .product-card:hover::before,
  .msusa-root .catalog-card:hover::before,
  .msusa-root .eng-auth-item:hover::before {
    background: var(--accent);
  }


  /* Brand Logo Bar */
  .msusa-root .brand-logo-bar {
    background: #080f1a;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .brand-logo-item {
    font-family: var(--font-display);
    font-weight: 800;
  }

  /* Tech Compact Lists */
  .msusa-root .tech-compact-box ul li {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-muted);
  }

  .msusa-root .tech-compact-box ul li::before {
    content: '?';
    color: var(--accent);
    font-weight: 400;
  }

  /* Input Fields */
  .msusa-root input[type="text"],
  .msusa-root input[type="email"],
  .msusa-root select,
  .msusa-root textarea {
    border-radius: 3px;
    background: var(--navy-mid);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    transition: all 0.3s ease;
  }

  .msusa-root input:focus,
  .msusa-root select:focus,
  .msusa-root textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    outline: none;
    background: var(--navy-light);
  }

  .msusa-root label {
    font-family: var(--font-body);
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--text-muted);
  }

  /* Modals */
  .msusa-root .msusa-modal {
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    background: var(--navy);
  }

  /* Sections */
  .msusa-root .eng-authority,
  .msusa-root .compact-tech,
  .msusa-root .technical-form-section {
    background: var(--navy-mid);
  }

  .msusa-root .api-trust-banner {
    background: var(--navy-mid);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .msusa-root .api-trust-label {
    color: var(--accent);
    font-family: var(--font-display);
    letter-spacing: 0.15em;
  }

  .msusa-root .hero {
    background: transparent;
    padding: 100px 0;
  }

  .msusa-root .hero-title {
    font-size: 64px;
    text-transform: none;
    line-height: 1.1;
  }

  .msusa-root .hero-subtitle {
    font-family: var(--font-body);
    color: var(--text-muted);
    font-size: 18px;
    border-left: 3px solid var(--accent);
    padding-left: 20px;
  }


  /* --- ANIMATIONS & MARQUEE --- */
  @keyframes logoMarquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .brand-logo-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
  }

  /* Optional fade edges for marquee */
  .brand-logo-wrapper::before,
  .brand-logo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
  }

  .brand-logo-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #080f1a, transparent);
  }

  .brand-logo-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #080f1a, transparent);
  }

  .brand-logo-grid {
    display: inline-flex !important;
    gap: 60px;
    align-items: center;
    flex-wrap: nowrap !important;
    animation: logoMarquee 20s linear infinite;
    min-width: 200%;
    padding-left: 30px;
  }

  .brand-logo-grid:hover {
    animation-play-state: paused;
  }

  .brand-logo-item {
    flex-shrink: 0;
  }

  /* Reveal Fade-ins */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<!-- --------------------------------------------------------------------------  -->
<div class="msusa-root">

  <!-- TOP BAR -->
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-main">
        <span class="topbar-item"><span class="dot"></span>Direct Manufacturer Pricing</span>
        <span class="topbar-item"><span class="dot"></span>API 682 Compliant Engineering</span>
        <span class="topbar-item"><span class="dot"></span>Express Delivery to the U.S.: 3–5 Business Days</span>
      </div>
      <span class="topbar-note">We can ship on your FedEx, DHL or UPS account — or on ours.&nbsp;|&nbsp;Shipping
        costs, import duties, taxes and customs fees are paid by the customer.</span>
    </div>
  </div>

  <!-- NAV -->
  <nav class="msusa-nav">
    <div class="nav-inner">
      <a href="#" class="logo">Mechanical<span>Seals</span>USA</a>
      <ul class="nav-links">
        <li><a href="#msusa-what">What We Do</a></li>
        <li><a href="#msusa-how">How It Works</a></li>
        <li><a href="#msusa-shipping">Shipping &amp; Duties</a></li>
        <li><a href="#" class="nav-cta" onclick="openPhotoModal(); return false;">Submit Technical Request</a></li>
      </ul>
    </div>
  </nav>

  <!-- --- HERO ------------------------------------------------------------  -->
  <section class="hero">
    <div class="hero-bg-image"
      style="background-image: url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/ChatGPT-Image-Apr-27-2026-01_53_53-PM-Edited.png');">
    </div>
    <div class="hero-overlay"></div>

    <div class="hero-inner" style="display: block;">
      <div class="hero-content" style="max-width: 700px;">
        <div class="hero-eyebrow">Industrial-Grade Solutions</div>
        <h1>Mechanical Seal<br><em>Solutions</em><br>for Industrial<br>Applications</h1>
        <div
          style="font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px;">
          API 682 Compliant Mechanical Seals — Engineered for Reliability. Delivered Fast.</div>
        <p class="hero-subtitle">Replacement seals, equivalent solutions, engineered options and technical support for
          pumps and rotating equipment.</p>
        <p class="hero-support">Tell us your current seal, pump model, shaft size or application. Our team will review
          your case and provide a technical response.<br><br><strong
            style="color: var(--accent); font-weight: 500;">Minimize downtime. Maximize performance.</strong></p>
        <div class="hero-ctas" style="margin-top: 32px;">
          <a href="javascript:void(0)" class="btn-primary"
            onclick="if(window.$chatwoot){ window.$chatwoot.toggle('open'); } else { document.getElementById('msusa-inquiry-section').scrollIntoView({behavior: 'smooth'}); }">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
            </svg>
            Get Technical Help
          </a>
          <button class="btn-secondary" onclick="openPhotoModal()">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path
                d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
            </svg>
            Upload Photos / Request a Quote
          </button>
        </div>
      </div>

      <div class="hero-card" id="msusa-inquiry" style="display: none;">
        <div class="hero-card-title">Submit a Technical Request</div>
        <div class="hero-card-sub">Provide your equipment and seal details. Our engineers review every inquiry before
          responding.</div>

        <div class="form-row">
          <label>Your Name</label>
          <input type="text" id="msusa_name" placeholder="Full name">
        </div>
        <div class="form-row">
          <label>Company / Organization</label>
          <input type="text" id="msusa_company" placeholder="Company name">
        </div>
        <div class="form-row">
          <label>Email Address</label>
          <input type="email" id="msusa_email" placeholder="you@company.com">
        </div>
        <div class="form-row-half">
          <div class="form-field">
            <label>Pump / Equipment Model</label>
            <input type="text" id="msusa_pump" placeholder="e.g. Goulds 3196">
          </div>
          <div class="form-field">
            <label>Shaft Size</label>
            <input type="text" id="msusa_shaft" placeholder='e.g. 1.750" / 44mm'>
          </div>
        </div>
        <div class="form-row">
          <label>Application Type</label>
          <select id="msusa_app">
            <option value="" disabled selected>Select application…</option>
            <option value="pump">Pump</option>
            <option value="mixer">Mixer / Agitator</option>
            <option value="compressor">Compressor</option>
            <option value="other">Other</option>
          </select>
        </div>
        <div class="form-row">
          <label>Fluid Type</label>
          <input type="text" id="msusa_fluid" placeholder="e.g. water, oil, acid, slurry…">
        </div>
        <div class="form-row">
          <label>Additional Details</label>
          <textarea id="msusa_details"
            placeholder="Current seal brand/model, operating conditions, photos available, urgency or any other relevant information…"></textarea>
        </div>

        <div class="form-row" style="display: none !important;" aria-hidden="true">
          <label>Company Website (Please leave this empty)</label>
          <input type="text" id="msusa_website_url" name="msusa_website_url" tabindex="-1" autocomplete="off">
        </div>

        <button class="form-submit" onclick="msusaSubmit(event)">?? Submit Technical Request ?</button>
        <p class="form-note">All inquiries are reviewed by our technical team. No automated quotes are issued without
          evaluation.</p>
      </div>
    </div>
  </section>


  <!-- --- BRAND LOGO BAR ------------------------------------------  -->
  <div class="brand-logo-bar">
    <div class="container">
      <div class="brand-logo-text">100% COMPATIBLE REPLACEMENTS FOR LEADING BRANDS</div>
      <div class="brand-logo-wrapper">
        <div class="brand-logo-grid">
          <div class="brand-logo-item">JOHN CRANE</div>
          <div class="brand-logo-item">EAGLEBURGMANN</div>
          <div class="brand-logo-item">FLOWSERVE</div>
          <div class="brand-logo-item">CHESTERTON</div>
          <div class="brand-logo-item">AESSEAL</div>
          <div class="brand-logo-item" aria-hidden="true">JOHN CRANE</div>
          <div class="brand-logo-item" aria-hidden="true">EAGLEBURGMANN</div>
          <div class="brand-logo-item" aria-hidden="true">FLOWSERVE</div>
          <div class="brand-logo-item" aria-hidden="true">CHESTERTON</div>
          <div class="brand-logo-item" aria-hidden="true">AESSEAL</div>
          <div class="brand-logo-item" aria-hidden="true">JOHN CRANE</div>
          <div class="brand-logo-item" aria-hidden="true">EAGLEBURGMANN</div>
        </div>
      </div>
    </div>
  </div>


  <section class="api-trust-banner">
    <div class="container">
      <div class="api-trust-flex">

        <!-- Left side -->
        <div class="api-trust-content">
          <div class="api-trust-label">TRUSTED. TESTED. API 682.</div>
          <h2 class="api-trust-title">API 682 COMPLIANT SEALING SOLUTIONS</h2>
          <div class="api-trust-text">
            <p>Our sealing systems are engineered following API 682 guidelines, ensuring performance and reliability in
              critical services such as oil &amp; gas, petrochemical and chemical processing.</p>
            <p>We support single, dual unpressurized and dual pressurized seal configurations, including API piping
              plans (Plan 11, 52, 53A/B/C, 62 and others).</p>
          </div>
        </div>

        <!-- Right side -->
        <div class="api-trust-cards">

          <div class="api-trust-card">
            <svg class="api-trust-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" />
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
            </svg>
            <div class="api-trust-stat">GLOBAL SUPPLY</div>
            <div class="api-trust-desc">SHIPPED FROM SOUTH AMERICA</div>
          </div>

          <div class="api-trust-card">
            <svg class="api-trust-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <div class="api-trust-stat">EXPERT REVIEW</div>
            <div class="api-trust-desc">VALIDATION FOR EVERY REQUEST</div>
          </div>

          <div class="api-trust-card">
            <svg class="api-trust-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M9 17H7A5 5 0 017 7h2M15 7h2a5 5 0 010 10h-2M8 12h8" />
            </svg>
            <div class="api-trust-stat">FLEXIBLE FREIGHT</div>
            <div class="api-trust-desc">USE YOUR COURIER OR OURS</div>
          </div>

          <div class="api-trust-card">
            <svg class="api-trust-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div class="api-trust-stat">TECH EVALUATION</div>
            <div class="api-trust-desc">SEND PHOTOS &amp; DIMENSIONS</div>
          </div>

        </div>
      </div>
    </div>
  </section>


  <!-- --- ENGINEERING AUTHORITY (SOCIAL PROOF) --------------------------------  -->
  <section class="eng-authority">
    <div class="container">
      <div class="eng-authority-grid">
        <div class="eng-auth-item">
          <div class="eng-auth-icon">
            <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <div class="eng-auth-title">Direct Manufacturer Advantage</div>
          <div class="eng-auth-desc">We control the entire engineering and manufacturing process from our South American
            facility, delivering OEM-level quality at highly competitive prices.</div>
        </div>
        <div class="eng-auth-item">
          <div class="eng-auth-icon">
            <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
          </div>
          <div class="eng-auth-title">Thousands of Inquiries Resolved</div>
          <div class="eng-auth-desc">Our technical team has successfully engineered replacement solutions and
            cross-referenced seals for critical industrial applications across the Americas.</div>
        </div>
        <div class="eng-auth-item">
          <div class="eng-auth-icon">
            <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
          </div>
          <div class="eng-auth-title">Rigorous Quality Validation</div>
          <div class="eng-auth-desc">Every seal undergoes strict dimensional inspection and quality validation aligned
            with ISO 9001 and API 682 guidelines before dispatch.</div>
        </div>
      </div>
    </div>
  </section>


  <section class="products" id="msusa-products">
    <div class="container">
      <div class="products-header">
        <div class="section-label">Product Reference</div>
        <h2 class="section-title">Mechanical Seals We Support</h2>
        <p style="color: var(--text-muted); margin-top: 12px; font-size: 16px;">Designed for ANSI and API pump systems.
        </p>
      </div>
      <div class="products-grid">
        <!-- PRODUCT CARD 1: Cartridge Seals -->
        <div class="product-card">
          <div class="product-card-img">
            <img
              src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/20260410_1442_Image-Generation_remix_01knw7qzzge0kaxwpbzxnetvwj.png"
              alt="Cartridge Seals" width="800" height="600" loading="lazy">
          </div>
          <div class="product-card-body">
            <h4>Cartridge Seals</h4>
            <p>Pre-assembled units for quick installation and reduced setup error. Ideal for high-speed pumps.</p>
            <span class="product-tag">Most common</span>
          </div>
        </div>
        <!-- PRODUCT CARD 2: Component Seals -->
        <div class="product-card">
          <div class="product-card-img">
            <img src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/aBOztrkrz30djWIL85x7__X7AHvKS8.png"
              alt="Component Seals" width="800" height="600" loading="lazy">
          </div>
          <div class="product-card-body">
            <h4>Component Seals</h4>
            <p>Individual seal faces, elastomers and hardware for custom assemblies and retrofit applications.</p>
            <span class="product-tag">High versatility</span>
          </div>
        </div>
        <!-- PRODUCT CARD 3: Split Seals -->
        <div class="product-card">
          <div class="product-card-img">
            <img src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/geq4SSeygHG4h_UhKXXs6_qSCeRsyH.png"
              alt="Split Seals" width="800" height="600" loading="lazy">
          </div>
          <div class="product-card-body">
            <h4>Split Seals</h4>
            <p>Designed for difficult-to-access equipment where disassembly for installation is not practical.</p>
            <span class="product-tag">Minimal downtime</span>
          </div>
        </div>
        <!-- PRODUCT CARD 4: Agitator Seals -->
        <div class="product-card">
          <div class="product-card-img">
            <img
              src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/Generated-Image-April-22-2026-2_25PM.png"
              alt="Agitator Seals" width="800" height="600" loading="lazy">
          </div>
          <div class="product-card-body">
            <h4>Agitator Seals</h4>
            <p>Specialized seals for mixers and agitators — engineered for shaft movement and variable loads.</p>
            <span class="product-tag">Engineered</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="what-we-do" id="msusa-what">
    <div class="container">
      <div class="what-header">
        <div class="section-label">Our Services</div>
        <h2 class="section-title">What We Do</h2>
      </div>
      <div class="what-grid">
        <div class="what-card">
          <div class="what-card-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="3" />
              <path
                d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" />
            </svg>
          </div>
          <h3>Replacement Seals</h3>
          <p>Direct replacements for existing mechanical seals — same dimensions, same performance, ready to install.
          </p>
        </div>
        <div class="what-card">
          <div class="what-card-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
            </svg>
          </div>
          <h3>Equivalent Solutions</h3>
          <p>Cross-reference and compatible alternatives for discontinued or hard-to-source seal models.</p>
        </div>
        <div class="what-card">
          <div class="what-card-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path
                d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
            </svg>
          </div>
          <h3>Engineered Seals</h3>
          <p>Custom solutions for demanding applications — high temperature, high pressure, aggressive media or
            unusual shaft dimensions.</p>
        </div>
        <div class="what-card">
          <div class="what-card-icon">
            <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <h3>Seal Identification</h3>
          <p>Analysis based on photos, physical dimensions or samples. We identify the seal and recommend the right
            solution.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="industries" id="msusa-industries">
    <div class="container">
      <div class="industries-header">
        <div class="section-label">Markets Served</div>
        <h2 class="section-title">Industries We Support</h2>
        <p style="color: var(--text-muted); margin-top: 12px; font-size: 16px;">Reliable sealing solutions for demanding
          industries.</p>
      </div>
      <div class="industries-grid">
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/Loq7LYdRP6ZHuT4PfwoEP_nIKoe11o.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>Oil &amp; Gas</h4>
            <span>Pumps, compressors &amp; rotating equipment</span>
          </div>
        </div>
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/Quv5Scu5Ta4MpMRYjXL6O_UKtBjivD.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>Chemical Processing</h4>
            <span>Aggressive media &amp; high-temperature sealing</span>
          </div>
        </div>
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/vV25nykzxbbklZBVZ60He_VCkhRdHT.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>Water &amp; Wastewater</h4>
            <span>Municipal &amp; industrial water treatment</span>
          </div>
        </div>
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/YM-07cZL3_sRlbAl5kQ0q_puXC8Lfx.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>Food &amp; Beverage</h4>
            <span>Hygienic &amp; FDA-compliant seal solutions</span>
          </div>
        </div>
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/z-bzSstW4AXfpqOQVkzv5_MgLzd6XG.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>Mining</h4>
            <span>Slurry pumps &amp; high-wear environments</span>
          </div>
        </div>
        <div class="industry-card">
          <div class="industry-card-img"
            style="background-image:url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/o8K24o7OAzy_jVwQQ6hce_X9zmfaRa.png')">
          </div>
          <div class="industry-card-overlay"></div>
          <div class="industry-card-content">
            <h4>General Industry</h4>
            <span>HVAC, utilities, manufacturing &amp; more</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="how" id="msusa-how">
    <div class="container">
      <div class="how-header">
        <div class="section-label">Process</div>
        <h2 class="section-title">How It Works</h2>
      </div>
      <div class="steps">
        <div class="step">
          <div class="step-num">01</div>
          <h4>Send your inquiry</h4>
          <p>Share your equipment details, current seal information, dimensions or photos.</p>
        </div>
        <div class="step">
          <div class="step-num">02</div>
          <h4>Technical review</h4>
          <p>Our team reviews the application and identifies the most suitable replacement or solution.</p>
        </div>
        <div class="step">
          <div class="step-num">03</div>
          <h4>Quotation and shipping options</h4>
          <p>We provide pricing and can ship on your courier account or ours.</p>
        </div>
        <div class="step">
          <div class="step-num">04</div>
          <h4>International delivery</h4>
          <p>Orders are shipped from South America to the U.S., typically within 3–5 business days depending on
            service and destination.</p>
        </div>
      </div>
    </div>
  </section>


  <!-- --- TECHNICAL STANDARDS & MATERIALS -----------------------------------  -->
  <section class="technical-excellence compact-tech">
    <div class="container">
      <div class="tech-compact-header">
        <div class="section-label">Engineering Specs</div>
        <h2 class="section-title">Technical Standards &amp; Materials</h2>
      </div>
      <div class="tech-compact-grid">
        <div class="tech-compact-box">
          <h4><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20"
              style="vertical-align: middle; margin-right: 8px; color: var(--accent);">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg> Standards & Compliance</h4>
          <ul>
            <li>API 682 (4th Edition) Compliant</li>
            <li>ISO 21049 Alignment</li>
            <li>API 610 & ANSI / ASME B73.1 & B73.2 Compatible</li>
          </ul>
        </div>
        <div class="tech-compact-box">
          <h4><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20"
              style="vertical-align: middle; margin-right: 8px; color: var(--accent);">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
              </path>
            </svg> Materials & Construction</h4>
          <ul>
            <li>Faces: Silicon Carbide (SiC), Tungsten Carbide (TC)</li>
            <li>Alloys: Hastelloy, Stainless Steels</li>
            <li>Elastomers: FKM (Viton), EPDM, NBR</li>
          </ul>
        </div>
      </div>
    </div>
  </section>


  <section class="catalogs-section" id="msusa-catalogs">
    <div class="container">
      <div class="what-header" style="text-align: center;">
        <div class="section-label">Technical Resources</div>
        <h2 class="section-title">Download Product Catalogs</h2>
      </div>
      <div class="catalogs-grid">
        <!-- CATALOG 1 -->
        <div class="catalog-card">
          <div class="catalog-image-wrapper">
            <img
              src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/Generated-Image-April-22-2026-8_10PM-Edited-e1776917060522-Edited.png"
              alt="Cartridge Seals Catalog" class="catalog-cover-img" width="600" height="800" loading="lazy">
          </div>
          <div class="catalog-content">
            <h3>Cartridge Seals Catalog</h3>
            <p>Complete range of cartridge seal solutions.</p>
            <a href="REPLACE_WITH_PDF_URL_1" target="_blank" class="catalog-btn"
              style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;">
              DOWNLOAD PDF
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
            </a>
          </div>
        </div>
        <!-- CATALOG 2 -->
        <div class="catalog-card">
          <div class="catalog-image-wrapper">
            <img src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/Untitled-design-2.png"
              alt="Component Seals Catalog" class="catalog-cover-img" width="600" height="800" loading="lazy">
          </div>
          <div class="catalog-content">
            <h3>Component Seals Catalog</h3>
            <p>Comprehensive component seal offerings.</p>
            <a href="REPLACE_WITH_PDF_URL_2" target="_blank" class="catalog-btn"
              style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;">
              DOWNLOAD PDF
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
            </a>
          </div>
        </div>
        <!-- CATALOG 3 -->
        <div class="catalog-card">
          <div class="catalog-image-wrapper">
            <img
              src="https://mechanicalsealsusa.com/wp-content/uploads/2026/04/og2024102414420942972952.png-e1776916995678-1-Edited.png"
              alt="Split & Specialty Seals Catalog" class="catalog-cover-img" width="600" height="800" loading="lazy">
          </div>
          <div class="catalog-content">
            <h3>Split & Specialty Seals Catalog</h3>
            <p>Split seals and specialty applications.</p>
            <a href="REPLACE_WITH_PDF_URL_3" target="_blank" class="catalog-btn"
              style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;">
              DOWNLOAD PDF
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="shipping" id="msusa-shipping">
    <div class="container">
      <div class="shipping-inner">
        <div class="shipping-text">
          <div class="section-label">Logistics &amp; Compliance</div>
          <h2 class="section-title" style="margin-bottom:28px;">Shipping, Duties<br>and Taxes</h2>

          <p style="font-size: 16px; font-weight: 500; color: var(--text);">We ship internationally from our South
            American facility via FedEx, DHL or UPS.</p>
          <p>Customers may use their own courier account, or request shipment on ours.</p>
          <p style="color: var(--accent-light);"><strong>Shipping costs, import duties, taxes, customs clearance fees
              and any destination charges are the responsibility of the customer, unless otherwise agreed in
              writing.</strong></p>

          <div class="shipping-disclaimer">
            ⚠ Delivery times are estimates and may vary depending on destination, customs processing, service level
            and carrier conditions.
          </div>
        </div>
        <div class="shipping-carriers">
          <div style="margin-bottom:8px;">
            <div class="section-label">Accepted Carriers</div>
          </div>
          <div class="carrier-row">
            <div class="carrier-icon">FX</div>
            <div class="carrier-info">
              <div class="carrier-name">FedEx International</div>
              <div class="carrier-note">Priority, Economy &amp; Express Freight</div>
            </div>
            <div class="carrier-badge">Available</div>
          </div>
          <div class="carrier-row">
            <div class="carrier-icon">DHL</div>
            <div class="carrier-info">
              <div class="carrier-name">DHL Express</div>
              <div class="carrier-note">Worldwide door-to-door delivery</div>
            </div>
            <div class="carrier-badge">Available</div>
          </div>
          <div class="carrier-row">
            <div class="carrier-icon">UPS</div>
            <div class="carrier-info">
              <div class="carrier-name">UPS Worldwide</div>
              <div class="carrier-note">Expedited &amp; Standard options</div>
            </div>
            <div class="carrier-badge">Available</div>
          </div>
          <div
            style="padding:16px;background:rgba(26,95,168,0.08);border:1px solid rgba(26,95,168,0.2);border-radius:4px;font-size:13px;color:var(--text-muted);line-height:1.6;">
            <strong style="color:var(--text);display:block;margin-bottom:4px;">Use your own account</strong>
            Provide your courier account number and we'll ship under your rates and terms — no markup on freight.
          </div>
        </div>
      </div>
    </div>
  </section>


  <section class="eng-support">
    <!-- IMAGEN DE FONDO: Reemplazá la URL abajo -->
    <div class="eng-support-bg"
      style="background-image: url('https://mechanicalsealsusa.com/wp-content/uploads/2026/04/ChatGPT-Image-Apr-27-2026-12_19_05-PM-1-e1777321667781.png');">
    </div>
    <div class="eng-support-overlay"></div>

    <div class="container">
      <div class="eng-support-flex">
        <div class="eng-support-content">
          <div class="section-label" style="margin-bottom: 8px;">Need the right seal?</div>
          <h3 class="eng-support-title">Let's find the perfect solution for your application.</h3>

          <div class="eng-support-actions">
            <a href="javascript:void(0)" class="btn-primary"
              onclick="if(window.$chatwoot){ window.$chatwoot.toggle('open'); } else { document.getElementById('msusa-inquiry-section').scrollIntoView({behavior: 'smooth'}); }">
              Request a Quote
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
            <button class="btn-secondary" onclick="openPhotoModal()">
              Talk to an Expert
              <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="msusa-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="#" class="logo" style="display:block;margin-bottom:16px;">Mechanical<span>Seals</span>USA</a>
          <p>International supplier of mechanical seals for pumps and rotating equipment. Engineering support and
            replacement solutions for U.S. and global industrial customers.</p>
          <div class="footer-location">
            <strong>Location</strong>
            Manufacturing and dispatch operations based in Argentina, South America.<br>
            International supply to the U.S. and other markets.
          </div>
        </div>
        <div class="footer-col">
          <h5>Navigation</h5>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#msusa-what">What We Do</a></li>
            <li><a href="#msusa-how">How It Works</a></li>
            <li><a href="#msusa-industries">Industries</a></li>
            <li><a href="#msusa-products">Products</a></li>
            <li><a href="#msusa-shipping">Shipping &amp; Duties</a></li>
            <li><a href="#msusa-inquiry">Submit Technical Request</a></li>
          </ul>
        </div>
        <div class="footer-col">
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:info@mechanicalsealsusa.com">info@mechanicalsealsusa.com</a></li>
            <li><a href="#msusa-inquiry">Request Technical Evaluation</a></li>
            <li><a href="#msusa-inquiry">Get Engineering Support</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© 2026 MechanicalSealsUSA. All rights reserved.&nbsp;|&nbsp;Manufactured and shipped from Argentina, South
          America.</p>
        <p><a href="#">Privacy Policy</a>&nbsp;·&nbsp;<a href="#">Terms &amp; Conditions</a></p>
      </div>
    </div>
  </footer>

  <!-- ═══ PHOTO UPLOAD MODAL ════════════════════════════ -->
  <div class="msusa-modal-overlay" id="msusaPhotoModal" onclick="closePhotoModal(event)">
    <div class="msusa-modal" onclick="event.stopPropagation()">
      <div class="msusa-modal-header">
        <h3>Request Quote with Photos</h3>
        <button class="msusa-modal-close" onclick="closePhotoModal()">
          <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="msusa-modal-body">

        <!-- Form Wrapper -->
        <div id="modalFormWrapper">
          <!-- Drag & Drop Zone -->
          <div class="drop-zone" id="dropZone" onclick="document.getElementById('modalFile').click()">
            <svg class="drop-zone-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
              <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
            </svg>
            <div class="drop-zone-text">Click to browse or drag & drop photos here</div>
            <div class="drop-zone-subtext">Max 3 images. PNG, JPG or WEBP.</div>
            <input type="file" id="modalFile" multiple accept="image/png, image/jpeg, image/webp" style="display:none;"
              onchange="handleFiles(this.files)">
          </div>
          <div class="preview-grid" id="previewGrid"></div>

          <!-- Hidden Honeypot -->
          <div class="form-row" style="display: none !important;" aria-hidden="true">
            <label>Company Website</label>
            <input type="text" id="modal_honeypot" tabindex="-1" autocomplete="off">
          </div>

          <div class="form-row">
            <label>Your Name</label>
            <input type="text" id="modal_name" placeholder="Full name">
          </div>
          <div class="form-row">
            <label>Email Address</label>
            <input type="email" id="modal_email" placeholder="you@company.com">
          </div>
          <div class="form-row-half">
            <div class="form-field">
              <label>Pump / Equipment Model</label>
              <input type="text" id="modal_pump" placeholder="e.g. Goulds 3196">
            </div>
            <div class="form-field">
              <label>Shaft Size</label>
              <input type="text" id="modal_shaft" placeholder='e.g. 1.750" / 44mm'>
            </div>
          </div>
          <div class="form-row">
            <label>Application Type</label>
            <select id="modal_app">
              <option value="" disabled selected>Select application…</option>
              <option value="pump">Pump</option>
              <option value="mixer">Mixer / Agitator</option>
              <option value="compressor">Compressor</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div class="form-row">
            <label>Fluid Type</label>
            <input type="text" id="modal_fluid" placeholder="e.g. water, oil, acid, slurry…">
          </div>
          <div class="form-row">
            <label>Additional Details</label>
            <textarea id="modal_details"
              placeholder="Any extra information regarding materials, operating temperature, etc…"></textarea>
          </div>

          <button class="form-submit" id="modalSubmitBtn" onclick="msusaModalSubmit(event)"
            style="margin-top:16px;">👉 Submit Request &amp; Photos →</button>
        </div>

        <!-- Success Wrapper -->
        <div id="modalSuccessWrapper" class="modal-success-wrapper" style="display:none;">
          <svg class="modal-success-icon" style="color:var(--accent);" fill="none" stroke="currentColor"
            stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
            </path>
          </svg>
          <h3 class="modal-title">Photos Received</h3>
          <p class="modal-text" style="margin-bottom: 24px;">Your technical request and photos have been
            successfully uploaded. An engineer will review them shortly.</p>
          <button onclick="resetPhotoModal()" class="modal-btn-primary" style="margin-bottom: 12px;">Submit
            Another Request</button>
          <button onclick="closePhotoModal()" class="modal-btn-secondary">Close
            Window</button>
        </div>

      </div>
    </div>
  </div>

  <!-- ═══ CATALOG DOWNLOAD MODAL (OTP) ═══════════════════ -->
</div><!-- /msusa-root -->

<script>
  function msusaSubmit(e) {
    e.preventDefault();
    var get = function (id) {
      var el = document.getElementById(id);
      return el ? el.value.trim() : '';
    };

    var name = get('msusa_name');
    var company = get('msusa_company');
    var email = get('msusa_email');
    var pump = get('msusa_pump');
    var shaft = get('msusa_shaft');
    var app = get('msusa_app');
    var fluid = get('msusa_fluid');
    var details = get('msusa_details');
    var honeypot = get('msusa_website_url');

    // ── HONEYPOT CHECK ──
    // If a bot fills out this hidden field, abort silently
    if (honeypot !== '') {
      console.warn('Request blocked by anti-spam filter.');
      var fakeBtn = e.target;
      fakeBtn.innerText = 'Sending request...';
      fakeBtn.disabled = true;
      fakeBtn.style.opacity = '0.7';
      setTimeout(function () {
        var fakeCard = document.querySelector('.hero-card');
        if (fakeCard) fakeCard.innerHTML = '<div class="modal-success-wrapper"><h3 class="modal-title">Request Received</h3><p class="modal-text">Thank you.</p></div>';
      }, 800);
      return;
    }

    if (!name || !email || !details) {
      alert('Please fill in your name, email and additional details before submitting.');
      return;
    }

    var payload = {
      name: name,
      company: company,
      email: email,
      pump: pump,
      shaft: shaft,
      app: app,
      fluid: fluid,
      details: details,
      source: window.location.href
    };

    var submitBtn = e.target;
    var originalBtnText = submitBtn.innerText;
    submitBtn.innerText = 'Sending request...';
    submitBtn.disabled = true;
    submitBtn.style.opacity = '0.7';

    fetch('https://webhook.sellosmec.com.ar/webhook/form-leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    })
      .then(function (response) {
        if (!response.ok) {
          throw new Error('HTTP error ' + response.status);
        }
        // Activar conversión form_submit
        if (typeof dataLayer !== 'undefined') { dataLayer.push({ 'event': 'form_submit' }); }
        if (typeof gtag === 'function') { gtag('event', 'form_submit'); }

        // Notificar en pantalla
        var card = document.querySelector('.hero-card');
        if (card) {
          card.innerHTML = '<div class="modal-success-wrapper">' +
            '<svg class="modal-success-icon" style="color:var(--accent);" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>' +
            '<h3 class="modal-title">Request Received</h3>' +
            '<p class="modal-text">Thank you for your inquiry. Our engineering team will review your application and a representative will contact you shortly.</p>' +
            '</div>';
        }
      })
      .catch(function (error) {
        console.error('Webhook error:', error);
        alert('There was an error sending your request. Please try again or email us directly at info@mechanicalsealsusa.com');
        submitBtn.innerText = originalBtnText;
        submitBtn.disabled = false;
        submitBtn.style.opacity = '1';
      });
  }

  // ─── MODAL & DRAG/DROP LOGIC ─────────────────────────────
  var selectedFiles = [];

  function openPhotoModal() {
    document.getElementById('msusaPhotoModal').classList.add('active');
    document.body.style.overflow = 'hidden'; // Prevent scrolling
  }

  function closePhotoModal(e) {
    // If e is passed, ensure we only close if clicking the overlay
    if (e && e.target !== document.getElementById('msusaPhotoModal')) return;
    document.getElementById('msusaPhotoModal').classList.remove('active');
    document.body.style.overflow = '';
  }

  var dropZone = document.getElementById('dropZone');
  if (dropZone) {
    dropZone.addEventListener('dragover', function (e) { e.preventDefault(); dropZone.classList.add('dragover'); });
    dropZone.addEventListener('dragleave', function (e) { e.preventDefault(); dropZone.classList.remove('dragover'); });
    dropZone.addEventListener('drop', function (e) {
      e.preventDefault();
      dropZone.classList.remove('dragover');
      handleFiles(e.dataTransfer.files);
    });
  }

  function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
      if (selectedFiles.length >= 3) {
        alert('You can only upload a maximum of 3 photos.');
        break;
      }
      if (files[i].type.match('image.*')) {
        selectedFiles.push(files[i]);
      }
    }
    renderPreviews();
    document.getElementById('modalFile').value = ''; // Reset input
  }

  function removeFile(index, e) {
    e.stopPropagation();
    selectedFiles.splice(index, 1);
    renderPreviews();
  }

  function renderPreviews() {
    var grid = document.getElementById('previewGrid');
    grid.innerHTML = '';
    selectedFiles.forEach(function (file, index) {
      var reader = new FileReader();
      reader.onload = function (e) {
        var div = document.createElement('div');
        div.className = 'preview-item';
        div.innerHTML = '<img src="' + e.target.result + '">' +
          '<button class="preview-remove" onclick="removeFile(' + index + ', event)">✕</button>';
        grid.appendChild(div);
      };
      reader.readAsDataURL(file);
    });
  }

  function msusaModalSubmit(e) {
    e.preventDefault();
    var honeypot = document.getElementById('modal_honeypot').value.trim();
    if (honeypot !== '') {
      console.warn('Blocked by anti-spam filter.');
      closePhotoModal();
      return;
    }

    var name = document.getElementById('modal_name').value.trim();
    var email = document.getElementById('modal_email').value.trim();
    var details = document.getElementById('modal_details').value.trim();

    if (!name || !email) {
      alert('Please fill in your name and email address.');
      return;
    }

    var btn = document.getElementById('modalSubmitBtn');
    var originalText = btn.innerText;
    btn.innerText = 'Uploading...';
    btn.disabled = true;
    btn.style.opacity = '0.7';

    // Usa FormData nativo para enviar archivos
    var formData = new FormData();
    formData.append('name', name);
    formData.append('email', email);
    formData.append('pump', document.getElementById('modal_pump').value.trim());
    formData.append('shaft', document.getElementById('modal_shaft').value.trim());
    formData.append('app', document.getElementById('modal_app').value || '');
    formData.append('fluid', document.getElementById('modal_fluid').value.trim());
    formData.append('details', details);
    formData.append('source', window.location.href);

    // Adjuntar imágenes
    selectedFiles.forEach(function (file, index) {
      formData.append('photo_' + (index + 1), file);
    });

    fetch('https://webhook.sellosmec.com.ar/webhook/imagen', {
      method: 'POST',
      // IMPORTANTE: Al enviar FormData, NO se debe declarar el header Content-Type.
      // El navegador lo establece automáticamente como multipart/form-data con los límites (boundaries) correctos.
      body: formData
    })
      .then(function (response) {
        if (!response.ok) throw new Error('HTTP error ' + response.status);

        // Evento de Conversión para Google Tag Manager
        if (typeof dataLayer !== 'undefined') {
          dataLayer.push({
            'event': 'quote_with_photos_submit',
            'form_name': name,
            'form_email': email
          });
        }
        if (typeof gtag === 'function') {
          gtag('event', 'quote_with_photos_submit', {
            'form_name': name,
            'form_email': email
          });
        }

        // Feedback de éxito
        document.getElementById('modalFormWrapper').style.display = 'none';
        document.getElementById('modalSuccessWrapper').style.display = 'block';
      })
      .catch(function (error) {
        console.error('Upload error:', error);
        alert('There was an error uploading your request. Please try again or email us directly.');
        btn.innerText = originalText;
        btn.disabled = false;
        btn.style.opacity = '1';
      });
  }

  function resetPhotoModal() {
    // Clear technical fields
    document.getElementById('modal_pump').value = '';
    document.getElementById('modal_shaft').value = '';
    document.getElementById('modal_app').value = '';
    document.getElementById('modal_fluid').value = '';
    document.getElementById('modal_details').value = '';

    // Clear photos
    selectedFiles = [];
    renderPreviews();

    // Restore Submit Button
    var btn = document.getElementById('modalSubmitBtn');
    btn.innerText = '👉 Submit Request & Photos →';
    btn.disabled = false;
    btn.style.opacity = '1';

    // Swap UI views
    document.getElementById('modalSuccessWrapper').style.display = 'none';
    document.getElementById('modalFormWrapper').style.display = 'block';
  }

  // ─── CATALOG DOWNLOAD OTP LOGIC ──────────────────────────
  var generatedOTP = "";


  // --- ANIMACIONES REVEAL (INTERSECTION OBSERVER) ---
  document.addEventListener('DOMContentLoaded', function () {
    var elementsToReveal = document.querySelectorAll('.api-trust-banner, .eng-auth-item, .product-card, .tech-compact-box, .catalog-card, .step, .shipping-inner, .technical-form-section, .what-box');

    elementsToReveal.forEach(function (el) {
      el.classList.add('reveal');
      // Añadir ligero retraso para elementos en grilla
      if (el.classList.contains('eng-auth-item') || el.classList.contains('product-card') || el.classList.contains('catalog-card') || el.classList.contains('step') || el.classList.contains('what-box')) {
        var delay = Array.prototype.indexOf.call(el.parentNode.children, el);
        if (delay > 4) delay = 4;
        el.style.transitionDelay = (delay * 0.15) + 's';
      }
    });

    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
          observer.unobserve(entry.target);
        }
      });
    }, { rootMargin: '0px 0px -50px 0px', threshold: 0.1 });

    document.querySelectorAll('.reveal').forEach(function (el) {
      observer.observe(el);
    });
  });

</script>