/* HERO */
    .products-hero {
      margin-top: clamp(30px, 3.645833vw, 70px);
      padding: clamp(30px, 4.166667vw, 80px) clamp(15px, 2.604167vw, 50px);
      background: var(--white);
      text-align: center;
      border-bottom: 1px solid var(--border);
    }
    .products-hero h2 {
      font-size: clamp(20px, 2.08vw, 40px);
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .products-hero h2 em { font-style: normal; color: var(--elite); }
    .products-hero p {
      font-size: clamp(12px, 0.83vw, 16px);
      color: var(--text-light);
      max-width: 600px;
      margin: 0 auto 32px;
    }
    .hero-stats {
      display: flex; justify-content: center; gap: 48px;
    }
    .hero-stat { text-align: center; }
    .hero-stat-num {
      font-size: clamp(20px, 1.67vw, 32px);
      font-weight: 800;
      color: var(--navy);
      display: block;
    }
    .hero-stat-label {
      font-size: 0.7rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.1em;
    }

    /* SERIES TABS */
    .series-tabs-wrap {
      background: var(--bg); border-bottom: 1px solid var(--border);
      padding: 0 48px;
    }
    .series-tabs {
      display: flex; gap: 0; max-width: 1200px; margin: 0 auto;
    }
    .series-tab {
      flex: 1;
      display: flex; flex-direction: column; align-items: center;
      padding: 20px 16px 16px; gap: 6px;
      border: none; background: none; cursor: pointer;
      position: relative; transition: all 0.3s;
      border-bottom: 3px solid transparent;
    }
    .series-tab:hover { background: rgba(13,138,114,0.04); }
    .series-tab.active {
      border-bottom-color: var(--elite);
      background: var(--white);
    }
    .tab-badge {
      display: inline-block; padding: 2px 10px; border-radius: 4px;
      font-size: 0.58rem; font-weight: 700; color: #fff;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .tab-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
    .tab-count { font-size: 0.68rem; color: var(--text-muted); }
    .series-tab.active .tab-name { color: var(--elite); }


@media(max-width:768px){
  .hero-stats {gap: 20px;grid-template-columns: repeat(2, 1fr);display: grid;}
  .hero-stat-label {font-size: 0.6rem;}
  .comp-table tbody td {font-size: 0.7rem;}
}