:root {
      --primary:    #EEF7FF;
      --secondary:  #DFF0FB;
      --accent:     #0093C4;
      --accent2:    #00AA88;
      --accent-dim: rgba(0,147,196,0.10);
      --warn:       #E05B20;
      --text:       #07192C;
      --text-muted: #456078;
      --border:     rgba(0,147,196,0.20);
      --border-accent: rgba(0,147,196,0.38);
      --surface:    #FFFFFF;
      --surface2:   #F2FAFF;
      --nav-bg:     rgba(255,255,255,0.94);
      --card-shadow:       0 2px 14px rgba(0,100,160,0.09);
      --card-shadow-hover: 0 8px 36px rgba(0,147,196,0.20);
      --glow:              0 0 28px rgba(0,147,196,0.14);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 18px; }
    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans CN', 'Helvetica Neue', Arial, sans-serif;
      background: var(--primary);
      color: var(--text);
      line-height: 1.62;
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }
    a { color: inherit; }

    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--secondary); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

    /* ===== Announcement Bar ===== */
    .announce-bar {
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
      color: #fff;
      text-align: center;
      padding: 0.45rem 1rem;
      font-size: 0.82rem;
      letter-spacing: 0.5px;
    }
    .announce-bar a {
      color: #fff;
      text-decoration: underline;
      margin-left: 1rem;
      font-weight: 600;
    }

    /* ===== HEADER (双行) ===== */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #FFFFFF;
      box-shadow: 0 2px 16px rgba(0,100,160,0.08);
    }
    .header-top { border-bottom: 1px solid #E0EEF8; }
    .header-top-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 0 2rem;
      display: flex; align-items: center;
      height: 96px; gap: 1.6rem;
    }

    .logo {
      text-decoration: none;
      display: flex; align-items: center; gap: 1rem;
      flex-shrink: 0;
    }
    .logo img {
      height: 64px; width: auto;
      mix-blend-mode: multiply;
    }
    .logo-tag {
      font-size: 0.84rem;
      color: var(--text-muted);
      letter-spacing: 1.5px;
      white-space: nowrap;
      border-left: 1px solid #C8E2F0;
      padding-left: 1rem;
      line-height: 1.35;
    }
    .logo-tag b { color: var(--text); display: block; font-weight: 700; letter-spacing: 0.5px; font-size: 0.95rem;}
    .logo-tag em { font-style: normal; color: var(--accent); font-size: 0.68rem; letter-spacing: 1.8px; display: block; margin-top: 3px;}

    .header-search { flex: 1; max-width: 320px; position: relative; margin-left: 0.5rem; }
    .header-search input {
      width: 100%;
      background: #F2FAFF;
      border: 1px solid #C8E2F0;
      border-radius: 5px;
      padding: 0.5rem 2rem 0.5rem 0.9rem;
      color: var(--text);
      font-family: inherit;
      font-size: 0.84rem; outline: none;
      transition: border-color 0.2s;
    }
    .header-search input::placeholder { color: #A0BDD0; }
    .header-search input:focus { border-color: var(--accent); }
    .search-icon {
      position: absolute; right: 0.65rem; top: 50%;
      transform: translateY(-50%);
      color: #A0BDD0; font-size: 0.85rem; pointer-events: none;
    }

    .header-right {
      display: flex; align-items: center; gap: 1.1rem; margin-left: auto;
    }
    .header-phone {
      color: var(--text); font-size: 0.85rem; font-weight: 600;
      text-decoration: none; white-space: nowrap; letter-spacing: 0.2px;
      display: flex; align-items: center; gap: 6px;
    }
    .header-phone:hover { color: var(--accent); }
    .header-phone span { color: var(--accent); }

    .header-cta {
      background: linear-gradient(135deg, var(--accent), #0070AA);
      color: #FFFFFF;
      padding: 0.5rem 1.2rem;
      border-radius: 6px;
      font-weight: 600;
      font-size: 0.85rem;
      text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .header-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,147,196,0.30);
    }

    /* 下行：导航菜单 */
    .header-nav { background: var(--secondary); border-top: 1px solid #D8EEF8; }
    .header-nav-inner {
      max-width: 1400px; margin: 0 auto;
      padding: 0 2rem;
      display: flex; align-items: center;
      justify-content: center;
      height: 46px; gap: 0;
    }
    .nav-item {
      position: relative;
      height: 46px;
    }
    .nav-link {
      text-decoration: none;
      color: var(--text-muted);
      font-size: 0.88rem;
      padding: 0 1.4rem; height: 46px;
      display: flex; align-items: center; gap: 6px;
      letter-spacing: 0.3px;
      transition: color 0.2s, background 0.2s;
      white-space: nowrap;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--accent);
      background: rgba(0,147,196,0.07);
    }
    .nav-link .caret {
      width: 6px; height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translate(-1px, -1px);
    }

    /* Mega dropdown */
    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 720px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 36px rgba(0,80,130,0.16);
      padding: 1.4rem;
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s;
      z-index: 500;
    }
    .nav-item:hover .nav-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .dropdown-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
    }
    .dropdown-item {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      padding: 0.7rem 0.9rem;
      border-radius: 6px;
      transition: background 0.15s;
      text-decoration: none;
      color: inherit;
    }
    .dropdown-item:hover { background: var(--surface2); }
    .dropdown-icon {
      flex-shrink: 0;
      width: 32px; height: 32px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .dropdown-icon svg { width: 18px; height: 18px; }
    .dropdown-text .title {
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 1px;
    }
    .dropdown-text .desc {
      font-size: 0.74rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .menu-btn { display: none; background: none; border: 1px solid #C8E2F0; color: var(--text); padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 1.1rem; }
    @media (max-width: 1024px) {
      .header-search, .header-nav { display: none; }
      .menu-btn { display: block; }
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 5rem 0 4rem;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at 78% 35%, rgba(0,147,196,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 12% 80%, rgba(0,170,136,0.08) 0%, transparent 55%),
        linear-gradient(180deg, #EEF7FF 0%, #DFF0FB 100%);
      z-index: -2;
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,147,196,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,147,196,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
      z-index: -1;
    }
    /* Animated cyan glow orb */
    .hero::after {
      content: '';
      position: absolute;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(0,147,196,0.12) 0%, rgba(0,200,240,0.04) 50%, transparent 70%);
      top: 5%; right: -12%;
      border-radius: 50%;
      pointer-events: none;
      animation: orb-drift 12s ease-in-out infinite alternate;
      z-index: -1;
    }
    @keyframes orb-drift {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(-40px, 30px) scale(1.12); }
    }
    /* Flowing pipe accent line — left of hero text */
    .hero-left {
      position: relative;
    }
    .hero-left::before {
      content: '';
      position: absolute;
      left: -2rem; top: 50%;
      width: 3px; height: 180px;
      transform: translateY(-50%);
      background: linear-gradient(180deg, transparent, var(--accent), transparent);
      border-radius: 2px;
      animation: pipe-flow 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes pipe-flow {
      0%, 100% { opacity: 0.25; }
      50%      { opacity: 0.85; box-shadow: 0 0 10px rgba(0,147,196,0.5); }
    }
    .hero-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0,147,196,0.09);
      border: 1px solid rgba(0,147,196,0.20);
      border-radius: 100px;
      padding: 0.3rem 1rem;
      font-size: 0.78rem;
      color: var(--accent);
      letter-spacing: 1px;
      margin-bottom: 1.4rem;
    }
    .hero-badge-dot {
      width: 6px; height: 6px;
      background: var(--accent2);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }
    .hero h1 {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(2rem, 4vw, 3.4rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 1.2rem;
    }
    .hero h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-desc {
      font-size: 1.02rem;
      color: var(--text-muted);
      line-height: 1.85;
      margin-bottom: 2rem;
      max-width: 540px;
    }
    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 2.5rem;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #0070AA);
      color: #FFFFFF;
      padding: 0.85rem 2rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.92rem;
      text-decoration: none;
      letter-spacing: 0.5px;
      transition: transform 0.2s, box-shadow 0.2s;
      display: inline-flex; align-items: center; gap: 6px;
      border: none;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,147,196,0.30);
    }
    .btn-outline {
      border: 1.5px solid var(--border-accent);
      color: var(--text);
      padding: 0.85rem 2rem;
      border-radius: 8px;
      font-size: 0.92rem;
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .btn-outline:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(0,147,196,0.04);
    }
    .hero-stats {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .stat { display: flex; flex-direction: column; }
    .stat-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.8rem;
      font-weight: 500;
      color: var(--accent);
      line-height: 1;
    }
    .stat-label {
      font-size: 0.74rem;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Hero Right: visual showcase */
    .hero-visual { position: relative; }
    .hero-card-main {
      background: #FFFFFF;
      border: 1px solid rgba(0,147,196,0.22);
      border-radius: 16px;
      padding: 1.8rem;
      box-shadow: 0 0 40px rgba(0,147,196,0.10), 0 20px 60px rgba(0,80,130,0.10);
      position: relative;
    }
    .hero-card-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: var(--accent);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .hero-grid-cats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.8rem;
    }
    .hero-cat-chip {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.85rem;
      display: flex; align-items: center; gap: 0.7rem;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
      text-decoration: none;
      color: inherit;
    }
    .hero-cat-chip:hover {
      border-color: var(--accent);
      background: rgba(0,147,196,0.05);
      transform: translateY(-2px);
    }
    .hero-cat-icon {
      width: 32px; height: 32px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .hero-cat-icon svg { width: 18px; height: 18px; }
    .hero-cat-text { line-height: 1.25; }
    .hero-cat-text .name {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
    }
    .hero-cat-text .en {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.66rem;
      color: var(--accent);
    }
    .hero-card-foot {
      margin-top: 1.1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    .hero-card-foot .key {
      font-size: 0.78rem; color: var(--text-muted);
    }
    .hero-card-foot .val {
      font-size: 0.78rem; color: var(--accent); font-weight: 600;
    }
    .float-chip {
      position: absolute;
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 0.45rem 1rem;
      font-size: 0.78rem;
      font-weight: 500;
      box-shadow: 0 8px 24px rgba(0,80,130,0.12);
      white-space: nowrap;
      z-index: 2;
    }
    .float-chip-1 {
      top: -18px; right: 24px;
      color: var(--accent);
    }
    .float-chip-2 {
      bottom: -18px; left: 30%;
      color: var(--warn);
    }

    /* ===== Generic section ===== */
    section { padding: 4.15rem 0; position: relative; }
    .section-light { background: var(--surface); }
    .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 2.25rem; }
    .section-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
      color: var(--accent);
      letter-spacing: 3px;
      margin-bottom: 0.8rem;
      text-transform: uppercase;
    }
    .section-title {
      font-family: 'Noto Serif SC', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.22;
      margin-bottom: 0.65rem;
    }
    .section-sub {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* ===== WHY (Why Sontay) ===== */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    .why-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.45rem 1.25rem;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    .why-card:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
    }
    .why-icon {
      width: 48px; height: 48px;
      background: rgba(0,147,196,0.09);
      border: 1px solid rgba(0,147,196,0.18);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .why-card h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .why-card p {
      font-size: 0.86rem;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ===== Product Categories Grid (homepage) ===== */
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }
    .cat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.35rem;
      text-decoration: none;
      color: inherit;
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
      display: block;
    }
    .cat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--cat-color, var(--accent));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s;
    }
    .cat-card:hover::before { transform: scaleX(1); }
    .cat-card:hover {
      border-color: var(--cat-color, var(--accent));
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
    }
    .cat-icon {
      width: 48px; height: 48px;
      border-radius: 10px;
      background: var(--cat-bg, rgba(0,147,196,0.09));
      color: var(--cat-color, var(--accent));
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
    }
    .cat-icon svg { width: 24px; height: 24px; }
    .cat-card .cat-name {
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 3px;
    }
    .cat-card .cat-en {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      margin-bottom: 0.7rem;
    }
    .cat-card .cat-tag {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 0.9rem;
    }
    .cat-card .cat-link {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--cat-color, var(--accent));
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .cat-card .cat-link::after {
      content: '→';
      transition: transform 0.2s;
    }
    .cat-card:hover .cat-link::after { transform: translateX(4px); }

    /* ===== Industries Grid ===== */
    .ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.15rem;
    }
    .ind-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.55rem;
      text-decoration: none;
      color: inherit;
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
    }
    .ind-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
      border-color: var(--ind-color, var(--accent));
    }
    .ind-card .ind-icon {
      width: 56px; height: 56px;
      border-radius: 12px;
      background: var(--ind-color-pale, rgba(0,147,196,0.10));
      color: var(--ind-color, var(--accent));
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.2rem;
    }
    .ind-card .ind-icon svg { width: 28px; height: 28px; }
    .ind-card h3 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .ind-card .ind-en {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.74rem;
      color: var(--text-muted);
      letter-spacing: 0.5px;
      margin-bottom: 0.8rem;
    }
    .ind-card .ind-tag {
      font-size: 0.86rem;
      color: var(--ind-color, var(--accent));
      font-weight: 500;
      margin-bottom: 0.8rem;
      line-height: 1.5;
    }
    .ind-card .ind-summary {
      font-size: 0.84rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 1.2rem;
    }
    .ind-card .ind-link {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--ind-color, var(--accent));
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .ind-card .ind-link::after {
      content: '→';
      transition: transform 0.2s;
    }
    .ind-card:hover .ind-link::after { transform: translateX(4px); }

    /* ===== Final CTA banner ===== */
    .cta-banner {
      background: linear-gradient(135deg, #07192C 0%, var(--accent) 100%);
      color: #fff;
      padding: 4rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .cta-banner h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.7rem;
      position: relative;
    }
    .cta-banner p {
      color: rgba(255,255,255,0.88);
      font-size: 0.96rem;
      max-width: 640px;
      margin: 0 auto 2rem;
      position: relative;
    }
    .cta-banner .hero-actions {
      justify-content: center;
      margin-bottom: 0;
      position: relative;
    }
    .cta-banner .btn-primary {
      background: #fff;
      color: var(--text);
    }
    .cta-banner .btn-primary:hover {
      background: var(--secondary);
      box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    }
    .cta-banner .btn-outline {
      color: #fff;
      border-color: rgba(255,255,255,0.4);
    }
    .cta-banner .btn-outline:hover {
      background: rgba(255,255,255,0.1);
      border-color: #fff;
      color: #fff;
    }

    /* ===== PAGE HERO (subpages) ===== */
    .page-hero {
      padding: 4rem 0 3.5rem;
      position: relative;
      overflow: hidden;
    }
    .page-hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 70% 50%, rgba(0,147,196,0.10) 0%, transparent 65%),
        linear-gradient(180deg, #EEF7FF 0%, #DFF0FB 100%);
      z-index: -1;
    }
    .breadcrumb {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-bottom: 1.2rem;
      letter-spacing: 0.3px;
    }
    .breadcrumb a {
      color: var(--accent);
      text-decoration: none;
    }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .sep { margin: 0 0.6rem; color: #C8E2F0; }
    .page-title {
      font-family: 'Noto Serif SC', serif;
      font-size: clamp(2rem, 3.4vw, 2.8rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 0.8rem;
    }
    .page-tag {
      font-size: 1.12rem;
      color: var(--accent);
      font-weight: 500;
      margin-bottom: 1.3rem;
    }
    .page-summary {
      font-size: 0.96rem;
      color: var(--text-muted);
      line-height: 1.85;
      max-width: 880px;
    }
    .page-badges {
      margin-top: 1.6rem;
      display: flex; flex-wrap: wrap; gap: 0.6rem;
    }
    .page-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0.32rem 0.95rem;
      background: rgba(0,147,196,0.09);
      border: 1px solid rgba(0,147,196,0.20);
      color: var(--accent);
      font-size: 0.78rem; font-weight: 500;
      border-radius: 100px;
    }
    .page-badge.warn {
      background: rgba(224,91,32,0.08);
      border-color: rgba(224,91,32,0.25);
      color: var(--warn);
    }

    /* ===== Series cards ===== */
    .series-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .series-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.8rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .series-card:hover {
      border-color: var(--cat-color, var(--accent));
      box-shadow: var(--card-shadow-hover);
    }
    .series-detail-link:hover {
      background: var(--cat-color, var(--accent));
      color: #fff !important;
      border-color: var(--cat-color, var(--accent)) !important;
      transform: translateY(-2px);
    }
    .series-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 1rem; padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.2rem;
    }
    .series-code-badge {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 0.84rem;
      letter-spacing: 0.5px;
      padding: 0.3rem 0.8rem;
      background: var(--cat-color, var(--accent));
      color: #fff;
      border-radius: 5px;
      flex-shrink: 0;
    }
    .series-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      flex: 1;
      text-align: right;
    }
    .series-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 1.2rem;
    }
    .series-section-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--cat-color, var(--accent));
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }
    .series-specs {
      background: var(--surface2);
      padding: 0.9rem 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
    }
    .series-specs ul { list-style: none; padding: 0; }
    .series-specs li {
      font-size: 0.82rem;
      color: var(--text);
      padding: 0.2rem 0 0.2rem 1rem;
      position: relative;
      line-height: 1.55;
    }
    .series-specs li::before {
      content: '▸';
      position: absolute;
      left: 0;
      color: var(--cat-color, var(--accent));
    }
    .series-apps {
      display: flex; flex-wrap: wrap; gap: 0.4rem;
    }
    .app-tag {
      font-size: 0.74rem;
      padding: 0.3rem 0.75rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 100px;
    }

    /* ===== Advantages grid (subpage) ===== */
    .adv-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
    }
    .adv-card {
      background: var(--surface);
      padding: 1.6rem;
      border-radius: 12px;
      border-top: 3px solid var(--cat-color, var(--accent));
      box-shadow: var(--card-shadow);
    }
    .adv-num {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--cat-color, var(--accent));
      letter-spacing: 1px;
      margin-bottom: 0.8rem;
      display: block;
    }
    .adv-card h4 {
      font-size: 0.98rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.5rem;
    }
    .adv-card p {
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* ===== Compatibility ===== */
    .compat-section {
      padding: 3rem 0;
      background: var(--secondary);
      border-top: 1px solid var(--border);
    }
    .compat-section h3 {
      font-size: 0.86rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 1.5rem;
      font-weight: 500;
    }
    .compat-list {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem;
    }
    .compat-item {
      font-size: 0.86rem; font-weight: 500;
      color: var(--text);
      padding: 0.55rem 1.2rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
    }

    /* ===== Industry detail (subpage) ===== */
    .ind-prods {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .ind-prod-card {
      display: flex;
      gap: 1rem;
      padding: 1.2rem 1.4rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .ind-prod-card:hover {
      border-color: var(--ind-color, var(--accent));
      box-shadow: var(--card-shadow-hover);
    }
    .ind-prod-code {
      flex-shrink: 0;
      background: var(--ind-color, var(--accent));
      color: #fff;
      padding: 0.4rem 0.85rem;
      border-radius: 5px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 0.78rem;
      align-self: flex-start;
      white-space: nowrap;
      letter-spacing: 0.3px;
    }
    .ind-prod-why {
      font-size: 0.86rem;
      color: var(--text);
      line-height: 1.7;
    }

    .scenarios-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.2rem;
    }
    .scenario-card {
      background: var(--surface);
      padding: 1.6rem 1.8rem;
      border-radius: 10px;
      border-left: 4px solid var(--ind-color, var(--accent));
      box-shadow: var(--card-shadow);
    }
    .scenario-card h4 {
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.5rem;
    }
    .scenario-card p {
      font-size: 0.86rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* ===== About page content ===== */
    .about-content {
      max-width: 880px;
      margin: 0 auto;
      padding: 4rem 0;
    }
    .about-content h2 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.6rem;
      color: var(--text);
      margin: 2.5rem 0 1rem;
      padding-bottom: 0.6rem;
      border-bottom: 2px solid var(--accent-dim);
    }
    .about-content h2:first-child { margin-top: 0; }
    .about-content p {
      font-size: 0.98rem;
      color: var(--text-muted);
      line-height: 1.95;
      margin-bottom: 1rem;
    }
    .about-content p strong { color: var(--text); }

    /* ===== Contact page ===== */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 3rem;
      padding: 4rem 0;
    }
    .contact-info-box {
      background: linear-gradient(160deg, #07192C 0%, #0E2F4D 100%);
      color: #fff;
      padding: 2.5rem;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
    }
    .contact-info-box::before {
      content: '';
      position: absolute;
      top: -30%; right: -20%;
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(0,147,196,0.25) 0%, transparent 70%);
    }
    .contact-info-box h3 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.5rem;
      margin-bottom: 0.4rem;
      position: relative;
    }
    .contact-info-box .subtitle {
      color: rgba(0,180,216,1);
      font-size: 0.85rem;
      margin-bottom: 2rem;
      letter-spacing: 0.5px;
      position: relative;
    }
    .contact-row {
      display: flex; gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      position: relative;
    }
    .contact-row:last-child { border-bottom: none; }
    .contact-row .ic {
      flex-shrink: 0;
      width: 36px; height: 36px;
      background: rgba(0,147,196,0.20);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(0,180,216,1);
      font-size: 1rem;
    }
    .contact-row .label {
      font-size: 0.7rem;
      color: rgba(0,180,216,1);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 0.2rem;
    }
    .contact-row .val { font-size: 0.92rem; color: #fff; line-height: 1.5; }
    .contact-row .val a { color: #fff; text-decoration: none; }

    .contact-form {
      background: var(--surface);
      padding: 2.5rem;
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: var(--card-shadow);
    }
    .contact-form h3 {
      font-family: 'Noto Serif SC', serif;
      font-size: 1.5rem;
      color: var(--text);
      margin-bottom: 0.4rem;
    }
    .contact-form .form-sub {
      font-size: 0.84rem; color: var(--text-muted); margin-bottom: 1.6rem;
    }
    .form-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1rem; margin-bottom: 1rem;
    }
    .form-field { margin-bottom: 1rem; }
    .form-field label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.4rem;
    }
    .form-field label .req { color: var(--warn); margin-left: 2px; }
    .form-field input, .form-field select, .form-field textarea {
      width: 100%;
      padding: 0.7rem 0.9rem;
      border: 1px solid #C8E2F0;
      border-radius: 6px;
      font-size: 0.88rem;
      font-family: inherit;
      background: #fff;
      color: var(--text);
      transition: border-color 0.2s;
    }
    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,147,196,0.10);
    }
    .form-field textarea { resize: vertical; min-height: 110px; }
    .form-field .full { width: 100%; justify-content: center; }
    .form-status { font-size: 0.78rem; margin-top: 0.6rem; min-height: 1.2rem; }

    /* ===== FOOTER ===== */
    footer {
      background: linear-gradient(180deg, #07192C 0%, #051E33 100%);
      color: rgba(255,255,255,0.7);
      padding: 3.5rem 0 0;
      margin-top: 4rem;
    }
    .footer-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 2.4rem;
      padding-bottom: 2.4rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand img {
      height: 44px;
      filter: brightness(0) invert(1);
      margin-bottom: 1rem;
    }
    .footer-brand .footer-bsub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.74rem;
      color: rgba(0,180,216,1);
      letter-spacing: 1.5px;
      margin-bottom: 1rem;
      text-transform: uppercase;
    }
    .footer-brand p {
      font-size: 0.84rem;
      line-height: 1.75;
      color: rgba(255,255,255,0.6);
      margin-bottom: 0.4rem;
    }
    .footer-brand .warranty {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 0.8rem;
      padding: 0.35rem 0.9rem;
      background: rgba(224,91,32,0.12);
      border: 1px solid rgba(224,91,32,0.30);
      color: #FFB48C;
      font-size: 0.78rem;
      border-radius: 100px;
    }
    .footer-col h5 {
      color: #fff;
      font-size: 0.84rem;
      margin-bottom: 1rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600;
    }
    .footer-col ul { list-style: none; padding: 0; }
    .footer-col li { margin-bottom: 0.55rem; }
    .footer-col a {
      color: rgba(255,255,255,0.6);
      font-size: 0.85rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-col a:hover { color: rgba(0,180,216,1); }

    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.4rem 0;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.4);
      flex-wrap: wrap;
      gap: 0.8rem;
    }
    .footer-bottom .badges {
      display: flex; gap: 0.5rem;
    }
    .footer-bottom .badge {
      padding: 0.25rem 0.7rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 4px;
      font-size: 0.7rem;
      color: rgba(0,180,216,1);
      letter-spacing: 1px;
    }

    /* ===== ANIMATIONS ===== */
    .animate-in {
      opacity: 1;
      transform: none;
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    /* Only enable scroll-up animation when JS marks the element as pending */
    .animate-in.pending {
      opacity: 0;
      transform: translateY(20px);
    }
    .animate-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1100px) {
      .hero-content { grid-template-columns: 1fr; gap: 2rem; }
      .hero-visual { order: -1; }
      .cat-grid, .ind-grid { grid-template-columns: repeat(2, 1fr); }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .adv-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 760px) {
      html { font-size: 16.5px; }
      .header-top-inner { padding: 0 1rem; gap: 1rem; }
      .logo img { height: 38px; }
      .logo-tag { display: none; }
      .header-search, .header-phone { display: none; }
      .container { padding: 0 1.2rem; }
      .hero { padding: 3rem 0 2rem; }
      .section-title { font-size: 1.7rem; }
      section { padding: 3.2rem 0; }
      .cat-grid, .ind-grid, .why-grid, .adv-grid,
      .series-grid, .scenarios-grid, .ind-prods, .form-row {
        grid-template-columns: 1fr;
      }
      .footer-top { grid-template-columns: 1fr; }
      .float-chip-1, .float-chip-2 { display: none; }
    }



    /* ===== V3.1 DETAIL OPTIMIZATION — preserve Claude original visual language ===== */
    body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    :focus-visible { outline: 3px solid rgba(0,147,196,.32); outline-offset: 3px; border-radius: 6px; }
    .announce-bar { padding: .38rem 1rem; font-size: .78rem; }
    header { backdrop-filter: saturate(140%) blur(10px); }
    .header-top-inner { height: 88px; }
    .logo img { height: 58px; }
    .header-search input { height: 40px; }
    .header-cta, .btn-primary, .btn-outline { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset; }
    .header-cta:active, .btn-primary:active, .btn-outline:active { transform: translateY(0); }
    .nav-link { font-weight: 500; }
    .nav-dropdown { padding: 1.15rem; border-radius: 12px; }
    .dropdown-item { min-height: 70px; }
    .hero { padding: 4.4rem 0 3.6rem; }
    .hero h1 { letter-spacing: -1.2px; text-wrap: balance; }
    .hero-desc { max-width: 590px; color: #3f5a72; }
    .hero-card-main { transform: translateZ(0); }
    .hero-cat-chip, .cat-card, .ind-card, .why-card, .series-card, .adv-card, .contact-form { will-change: transform; }
    .hero-cat-chip:hover, .cat-card:hover, .ind-card:hover, .why-card:hover, .series-card:hover { box-shadow: 0 12px 34px rgba(0,115,170,.16); }
    .section-head { margin-bottom: 2.05rem; }
    section { padding: 4rem 0; }
    .section-sub { max-width: 680px; margin-left: auto; margin-right: auto; }
    .cat-card, .ind-card, .why-card, .series-card { box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
    .cat-grid .cat-card, .ind-grid .ind-card { min-height: 100%; }
    .series-card { display: flex; flex-direction: column; }
    .series-apps { margin-top: auto; }
    .series-name { text-wrap: balance; }
    .compat-item { transition: transform .2s, border-color .2s, color .2s; }
    .compat-item:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
    .page-hero { padding: 3.6rem 0 3.1rem; }
    .page-title { letter-spacing: -0.6px; text-wrap: balance; }
    .page-summary { max-width: 920px; }
    .contact-row .val a:hover { color: #9eefff; }
    .smart-contact-float {
      position: fixed; right: 24px; bottom: 24px; z-index: 999;
      display: flex; gap: 10px; align-items: center;
    }
    .smart-contact-float a {
      text-decoration: none; color: #fff; background: linear-gradient(135deg,var(--accent),#0070AA);
      border-radius: 999px; padding: .72rem 1rem; font-size: .82rem; font-weight: 700;
      box-shadow: 0 10px 28px rgba(0,147,196,.28); border: 1px solid rgba(255,255,255,.36);
    }
    .smart-contact-float a.secondary { background: #fff; color: var(--accent); border-color: rgba(0,147,196,.24); }
    .smart-contact-float a:hover { transform: translateY(-2px); }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
    @media (max-width: 1100px) {
      .hero-content { gap: 2.4rem; }
      .hero-visual { order: initial; }
    }
    @media (max-width: 1024px) {
      .header-top-inner { height: 72px; }
      .logo img { height: 46px; }
      .menu-btn { display: block; }
      header.mobile-open .header-nav {
        display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
        box-shadow: 0 18px 36px rgba(0,80,130,.14); border-top: 1px solid #D8EEF8;
      }
      header.mobile-open .header-nav-inner { height: auto; padding: .6rem 1rem 1rem; flex-direction: column; align-items: stretch; }
      header.mobile-open .nav-item { height: auto; border-bottom: 1px solid #EDF6FB; }
      header.mobile-open .nav-item:last-child { border-bottom: 0; }
      header.mobile-open .nav-link { height: 46px; justify-content: space-between; padding: 0 .4rem; }
      header.mobile-open .nav-dropdown { display: none; }
    }
    @media (max-width: 760px) {
      .announce-bar { font-size: .72rem; }
      .header-top-inner { padding: 0 .9rem; }
      .header-cta { padding: .46rem .82rem; }
      .hero { padding: 2.8rem 0 2.4rem; }
      .hero h1 { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: -1px; }
      .hero-desc { font-size: .95rem; }
      .hero-actions { gap: .7rem; }
      .btn-primary, .btn-outline { width: 100%; justify-content: center; padding: .78rem 1rem; }
      .hero-stats { gap: 1.1rem; }
      .stat-num { font-size: 1.45rem; }
      .hero-card-main { padding: 1.25rem; border-radius: 14px; }
      .hero-grid-cats { grid-template-columns: 1fr; }
      .section-head { margin-bottom: 2rem; }
      .section-title { text-wrap: balance; }
      .page-hero { padding: 2.8rem 0 2.5rem; }
      .series-card, .ind-card, .cat-card, .why-card { padding: 1.35rem; }
      .smart-contact-float { right: 14px; left: 14px; bottom: 14px; }
      .smart-contact-float a { flex: 1; text-align: center; padding: .68rem .6rem; }
      footer { padding-bottom: 68px; }
    }



    /* ===== V3.2 COMPACT DETAIL TUNING ===== */
    .section-eyebrow { font-size: .72rem; margin-bottom: .62rem; letter-spacing: 2.6px; }
    .why-card h3, .cat-card .cat-name { font-size: .96rem; }
    .why-card p, .cat-card .cat-tag, .ind-card .ind-summary { font-size: .8rem; line-height: 1.6; }
    .cat-card .cat-en, .ind-card .ind-en { font-size: .66rem; margin-bottom: .55rem; }
    .cat-icon, .why-icon { width: 42px; height: 42px; margin-bottom: .78rem; }
    .cat-icon svg { width: 21px; height: 21px; }
    .ind-card h3 { font-size: 1.15rem; }
    .ind-card .ind-icon { width: 48px; height: 48px; margin-bottom: .95rem; }
    .ind-card .ind-tag { font-size: .8rem; margin-bottom: .6rem; }
    .hero-desc, .page-summary { font-size: .94rem; }
    .page-title { font-size: clamp(1.85rem, 3.1vw, 2.55rem); }
    .insight-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.05rem; max-width: 1180px; margin: 0 auto; }
    .insight-card { padding: 1.18rem 1.25rem; border-left: 3px solid var(--accent); background: var(--surface2); border-radius: 0 8px 8px 0; min-height: 0; }
    .insight-card h3 { font-size: .92rem; color: var(--text); margin-bottom: .45rem; line-height: 1.45; }
    .insight-card p { font-size: .78rem; color: var(--text-muted); line-height: 1.58; }
    @media (max-width: 1100px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 760px) { html { font-size: 16px; } .insight-grid { grid-template-columns: 1fr; gap: .85rem; } .insight-card { padding: 1.05rem 1.1rem; } section { padding: 3rem 0; } }



    /* ===== V3.3 FINAL REFINEMENT — compact, credible, conversion-focused ===== */
    html { font-size: 16.2px; }
    body { line-height: 1.58; color: #07192C; }
    .announce-bar { padding: .32rem 1rem; font-size: .74rem; }
    .header-top-inner { height: 82px; }
    .header-nav-inner, .nav-item, .nav-link { height: 42px; }
    .nav-link { font-size: .82rem; padding: 0 1.18rem; }
    .logo img { height: 54px; }
    .logo-tag { font-size: .76rem; padding-left: .82rem; }
    .logo-tag b { font-size: .86rem; }
    .logo-tag em { font-size: .62rem; }
    .header-phone, .header-cta { font-size: .8rem; }
    .header-search { max-width: 292px; }
    .header-search input { height: 36px; font-size: .8rem; }

    .hero { padding: 3.75rem 0 3rem; }
    .hero-content { gap: 2.45rem; }
    .hero h1 { font-size: clamp(1.95rem, 3.55vw, 3.05rem); line-height: 1.16; margin-bottom: .95rem; }
    .hero-desc { font-size: .88rem; line-height: 1.72; max-width: 555px; margin-bottom: 1.55rem; }
    .hero-badge { font-size: .72rem; padding: .25rem .82rem; margin-bottom: 1.05rem; }
    .hero-actions { gap: .78rem; margin-bottom: 1.85rem; }
    .btn-primary, .btn-outline { padding: .68rem 1.55rem; font-size: .84rem; border-radius: 7px; }
    .hero-stats { gap: 1.45rem; }
    .stat-num { font-size: 1.48rem; }
    .stat-label { font-size: .68rem; }
    .hero-card-main { padding: 1.45rem; border-radius: 14px; box-shadow: 0 14px 42px rgba(0,80,130,.10), 0 0 26px rgba(0,147,196,.08); }
    .hero-cat-chip { padding: .7rem; border-radius: 9px; }
    .hero-cat-icon { width: 28px; height: 28px; }
    .hero-cat-icon svg { width: 16px; height: 16px; }
    .hero-cat-text .name { font-size: .76rem; }
    .hero-cat-text .en { font-size: .6rem; }
    .float-chip { font-size: .72rem; padding: .36rem .82rem; }

    section { padding: 3.35rem 0; }
    .section-head { margin-bottom: 1.55rem; max-width: 690px; }
    .section-eyebrow { font-size: .68rem; letter-spacing: 2.4px; margin-bottom: .5rem; }
    .section-title { font-size: 1.92rem; line-height: 1.22; margin-bottom: .58rem; }
    .section-sub { font-size: .84rem; line-height: 1.62; }

    .why-grid, .cat-grid, .adv-grid { gap: .95rem; }
    .ind-grid { gap: 1.05rem; }
    .why-card, .cat-card, .ind-card, .series-card, .adv-card { border-color: rgba(0,147,196,.16); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 10px rgba(0,100,160,.045); }
    .why-card { padding: 1.25rem 1.15rem; }
    .cat-card { padding: 1.25rem; border-radius: 11px; }
    .ind-card { padding: 1.45rem; border-radius: 12px; }
    .why-icon, .cat-icon { width: 38px; height: 38px; margin-bottom: .68rem; }
    .why-card h3, .cat-card .cat-name { font-size: .9rem; margin-bottom: .34rem; }
    .why-card p, .cat-card .cat-tag, .ind-card .ind-summary { font-size: .76rem; line-height: 1.55; }
    .cat-card .cat-en, .ind-card .ind-en { font-size: .61rem; margin-bottom: .45rem; }
    .cat-card .cat-link, .ind-card .ind-link { font-size: .74rem; }
    .ind-card h3 { font-size: 1.03rem; margin-bottom: .22rem; }
    .ind-card .ind-icon { width: 42px; height: 42px; margin-bottom: .78rem; }
    .ind-card .ind-icon svg { width: 23px; height: 23px; }
    .ind-card .ind-tag { font-size: .75rem; margin-bottom: .5rem; }

    .insight-grid { gap: .82rem; max-width: 1160px; }
    .insight-card { padding: .98rem 1.05rem; border-left-width: 3px; border-radius: 0 7px 7px 0; background: rgba(242,250,255,.84); }
    .insight-card h3 { font-size: .84rem; margin-bottom: .34rem; line-height: 1.38; }
    .insight-card p { font-size: .72rem; line-height: 1.52; }

    .page-hero { padding: 3.05rem 0 2.55rem; }
    .page-title { font-size: clamp(1.65rem, 2.8vw, 2.3rem); }
    .page-tag { font-size: .98rem; margin-bottom: .9rem; }
    .page-summary { font-size: .86rem; line-height: 1.7; }
    .page-badges { margin-top: 1.2rem; gap: .45rem; }
    .page-badge { font-size: .71rem; padding: .26rem .78rem; }

    .series-grid { gap: 1.05rem; }
    .series-card { padding: 1.35rem; border-radius: 12px; }
    .series-head { padding-bottom: .72rem; margin-bottom: .9rem; }
    .series-name { font-size: .96rem; }
    .series-desc { font-size: .78rem; line-height: 1.58; margin-bottom: .9rem; }
    .series-specs { padding: .72rem .82rem; margin-bottom: .78rem; }
    .series-specs li { font-size: .74rem; }
    .app-tag { font-size: .68rem; padding: .24rem .62rem; }
    .adv-card { padding: 1.2rem; }
    .adv-card h4 { font-size: .88rem; }
    .adv-card p { font-size: .74rem; line-height: 1.56; }

    .cta-banner { padding: 3.1rem 0; }
    .cta-banner h2 { font-size: 1.72rem; margin-bottom: .55rem; }
    .cta-banner p { font-size: .86rem; line-height: 1.6; margin-bottom: 1.45rem; }
    footer { margin-top: 3rem; }
    .footer-top { gap: 2rem; padding-bottom: 2rem; }
    .footer-col a, .footer-brand p { font-size: .78rem; }

    .contact-grid { padding: 3.2rem 0; gap: 2.35rem; }
    .contact-info-box, .contact-form { padding: 2rem; border-radius: 14px; }
    .form-field { margin-bottom: .82rem; }
    .form-field input, .form-field select, .form-field textarea { font-size: .82rem; padding: .6rem .78rem; }
    .form-field textarea { min-height: 96px; }
    .form-sub { line-height: 1.55; }

    .smart-contact-float { right: 20px; bottom: 20px; gap: 8px; }
    .smart-contact-float a { padding: .6rem .85rem; font-size: .76rem; box-shadow: 0 8px 22px rgba(0,147,196,.24); }

    .cat-card:hover, .ind-card:hover, .why-card:hover, .series-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,115,170,.13); }

    @media (max-width: 1100px) {
      .cat-grid, .ind-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .insight-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 760px) {
      html { font-size: 15.5px; }
      .header-top-inner { height: 66px; }
      .logo img { height: 40px; }
      .hero { padding: 2.35rem 0 2rem; }
      .hero h1 { font-size: clamp(1.8rem, 9vw, 2.55rem); }
      .hero-desc { font-size: .86rem; }
      section { padding: 2.55rem 0; }
      .section-head { margin-bottom: 1.3rem; }
      .section-title { font-size: 1.45rem; }
      .cat-grid, .ind-grid, .why-grid, .adv-grid, .series-grid, .scenarios-grid, .ind-prods, .form-row, .insight-grid { grid-template-columns: 1fr; gap: .75rem; }
      .cat-card, .ind-card, .why-card, .series-card { padding: 1.08rem; }
      .smart-contact-float { right: 12px; left: 12px; bottom: 12px; }
      footer { padding-bottom: 64px; }
    }

    /* Loading state */
    #main { min-height: 50vh; }
    .loading {
      display: flex; align-items: center; justify-content: center;
      min-height: 400px; color: var(--text-muted);
      font-size: 0.9rem;
    }
  


  /* ===== V3.6 FIX: right side middle floating contact + WeChat QR ===== */
  .smart-contact-float {
    position: fixed !important;
    right: 18px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    display: block !important;
  }
  .smart-contact-float .float-contact-card {
    width: 142px !important;
    min-width: 0 !important;
    padding: 10px !important;
    display: block !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(0,147,196,.20) !important;
    box-shadow: 0 16px 42px rgba(0,92,140,.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .smart-contact-float .float-contact-title {
    display: block !important;
    margin: 0 0 8px !important;
    text-align: center !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    letter-spacing: 1.4px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
  }
  .smart-contact-float a {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 0 7px !important;
    padding: 0 .5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  .smart-contact-float a:hover { transform: translateY(-2px) !important; }
  .smart-contact-float a.float-phone {
    color: #fff !important;
    background: linear-gradient(135deg,var(--accent),#0070AA) !important;
    border: 1px solid rgba(255,255,255,.36) !important;
    box-shadow: 0 8px 20px rgba(0,147,196,.22) !important;
  }
  .smart-contact-float a.float-select {
    color: var(--accent) !important;
    background: #fff !important;
    border: 1px solid rgba(0,147,196,.24) !important;
    box-shadow: 0 4px 16px rgba(0,80,130,.08) !important;
  }
  .smart-contact-float .wechat-block {
    margin-top: 3px !important;
    padding: 8px 7px 7px !important;
    display: block !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,#F3FBFF,#FFFFFF) !important;
    border: 1px solid rgba(0,147,196,.14) !important;
    text-align: center !important;
  }
  .smart-contact-float .wechat-qr {
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 6px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 4px !important;
    border-radius: 9px !important;
    background: #fff !important;
    border: 1px dashed rgba(0,147,196,.42) !important;
    box-shadow: inset 0 0 0 4px #F7FCFF !important;
  }
  .smart-contact-float .wechat-qr span {
    display: block !important;
    border-radius: 2px !important;
    background: rgba(0,147,196,.88) !important;
  }
  .smart-contact-float .wechat-qr span:nth-child(2),
  .smart-contact-float .wechat-qr span:nth-child(4),
  .smart-contact-float .wechat-qr span:nth-child(8) { background: rgba(0,170,136,.78) !important; }
  .smart-contact-float .wechat-qr span:nth-child(5) { background: transparent !important; border: 2px solid rgba(0,147,196,.58) !important; }
  .smart-contact-float .wechat-copy {
    display: block !important;
    height: auto !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--text) !important;
    background: transparent !important;
    border: 0 !important;
  }
  .smart-contact-float .wechat-copy small {
    display: inline !important;
    font-size: .6rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
  }
  @media (max-width: 900px) {
    .smart-contact-float {
      left: 10px !important;
      right: 10px !important;
      top: auto !important;
      bottom: 12px !important;
      transform: none !important;
    }
    .smart-contact-float .float-contact-card {
      width: auto !important;
      display: grid !important;
      grid-template-columns: 1fr 1fr 72px !important;
      gap: 7px !important;
      align-items: center !important;
      padding: 8px !important;
      border-radius: 999px !important;
    }
    .smart-contact-float .float-contact-title { display: none !important; }
    .smart-contact-float a { margin: 0 !important; min-height: 36px !important; font-size: .72rem !important; }
    .smart-contact-float .wechat-block { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
    .smart-contact-float .wechat-qr { display: none !important; }
    .smart-contact-float .wechat-copy {
      height: 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 999px !important;
      background: #F3FBFF !important;
      border: 1px solid rgba(0,147,196,.18) !important;
      color: var(--accent) !important;
      font-size: .7rem !important;
    }
    .smart-contact-float .wechat-copy small { display: none !important; }
    footer { padding-bottom: 70px !important; }
  }



  /* ===== V3.8 上线正式版：工况表单 / 官方案例 / 工程选型指南 ===== */
  .selection-panel {
    background: linear-gradient(160deg, #FFFFFF 0%, #F2FAFF 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(0,100,160,.10);
    padding: 1.85rem;
    position: relative;
    overflow: hidden;
  }
  .selection-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
  }
  .selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    align-items: stretch;
  }
  .selection-copy {
    padding: .25rem .6rem .25rem 0;
  }
  .selection-copy h3 {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.52rem;
    line-height: 1.28;
    color: var(--text);
    margin-bottom: .65rem;
  }
  .selection-copy p {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.72;
    margin-bottom: 1rem;
  }
  .selection-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .55rem;
    margin-top: 1rem;
  }
  .selection-point {
    background: rgba(0,147,196,.06);
    border: 1px solid rgba(0,147,196,.14);
    border-radius: 8px;
    padding: .55rem .65rem;
    color: var(--text);
    font-size: .78rem;
    line-height: 1.45;
  }
  .selection-form {
    background: #fff;
    border: 1px solid rgba(0,147,196,.18);
    border-radius: 12px;
    padding: 1.15rem;
  }
  .selection-form .form-row { margin-bottom: .75rem; }
  .selection-form .form-field { margin-bottom: .75rem; }
  .selection-form .form-field label { font-size: .76rem; }
  .selection-form input,
  .selection-form select,
  .selection-form textarea {
    padding: .58rem .72rem;
    font-size: .82rem;
  }
  .selection-form textarea { min-height: 78px; }

  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .case-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.4rem 1.35rem;
    box-shadow: var(--card-shadow);
    transition: transform .22s, border-color .22s, box-shadow .22s;
    position: relative;
    overflow: hidden;
  }
  .case-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--case-color, var(--accent));
  }
  .case-card:hover {
    transform: translateY(-3px);
    border-color: var(--case-color, var(--accent));
    box-shadow: 0 10px 30px rgba(0,147,196,.15);
  }
  .case-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    letter-spacing: 1.8px;
    color: var(--case-color, var(--accent));
    text-transform: uppercase;
    margin-bottom: .55rem;
  }
  .case-card h3 {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: .55rem;
    line-height: 1.38;
  }
  .case-card p {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.68;
    margin-bottom: .75rem;
  }
  .case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
    margin-top: .7rem;
  }
  .case-meta span {
    font-size: .72rem;
    color: var(--text-muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: .24rem .55rem;
  }

  .geo-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 1rem;
    align-items: start;
    min-width: 0;     /* 防止 grid 子项 overflow */
  }
  .geo-grid > * { min-width: 0; }    /* 修复：grid 子项默认 min-width: auto 会导致溢出 */
  .geo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.45rem;
    box-shadow: var(--card-shadow);
    min-width: 0;        /* 修复：允许 flex/grid 子项收缩，防止溢出 */
    overflow: hidden;    /* 修复：阻止内部 min-width 表格撑破卡片 */
  }
  .geo-card h3 {
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: .65rem;
  }
  .geo-answer {
    border-left: 3px solid var(--accent);
    background: rgba(0,147,196,.055);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1rem;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.75;
    margin-bottom: .9rem;
  }
  .engineer-note {
    border-left: 3px solid var(--accent2);
    background: rgba(0,170,136,.065);
    border-radius: 0 10px 10px 0;
    padding: .85rem 1rem;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.7;
  }
  /* 修复：表格容器允许内部表格横向滚动而不撑破父容器 */
  .geo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* iOS 流畅滚动 */
    max-width: 100%;
    /* 移动端给一点视觉提示告知用户可以横向滑动 */
    background: linear-gradient(90deg, var(--surface) 30%, transparent),
                linear-gradient(-90deg, var(--surface) 30%, transparent) 100% 0,
                linear-gradient(90deg, rgba(0,147,196,.08), transparent),
                linear-gradient(-90deg, rgba(0,147,196,.08), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .geo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    min-width: 520px;
  }
  .geo-table th,
  .geo-table td {
    border-bottom: 1px solid var(--border);
    padding: .65rem .55rem;
    text-align: left;
    vertical-align: top;
  }
  .geo-table th {
    color: var(--accent);
    font-weight: 700;
    background: var(--surface2);
  }
  .geo-table td { color: var(--text-muted); }
  .geo-table strong { color: var(--text); }

  @media (max-width: 1100px) {
    .selection-grid, .geo-grid { grid-template-columns: 1fr; }
    .case-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .selection-panel { padding: 1.25rem; }
    .selection-points { grid-template-columns: 1fr; }
    .selection-copy h3 { font-size: 1.25rem; }
    .selection-form .form-row { grid-template-columns: 1fr; }
  }




    /* ===== V3.4 FLOAT CONTACT CENTER + WECHAT QR ===== */
    .smart-contact-float {
      right: 22px !important;
      left: auto !important;
      bottom: auto !important;
      top: 50% !important;
      transform: translateY(-50%);
      z-index: 999;
      display: block !important;
    }
    .float-contact-card {
      width: 146px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(0,147,196,.18);
      box-shadow: 0 14px 40px rgba(0,92,140,.16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .float-contact-title {
      margin-bottom: 8px;
      font-size: .68rem;
      line-height: 1;
      letter-spacing: 1.4px;
      text-align: center;
      color: var(--text-muted);
      text-transform: uppercase;
    }
    .smart-contact-float a {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      margin: 0 0 7px;
      padding: 0 .55rem !important;
      border-radius: 999px;
      font-size: .75rem !important;
      font-weight: 700;
      text-decoration: none;
      transition: transform .18s, box-shadow .18s, border-color .18s;
    }
    .smart-contact-float a.float-phone {
      color: #fff;
      background: linear-gradient(135deg,var(--accent),#0070AA);
      border: 1px solid rgba(255,255,255,.36);
      box-shadow: 0 8px 20px rgba(0,147,196,.22);
    }
    .smart-contact-float a.float-select {
      color: var(--accent);
      background: #fff;
      border: 1px solid rgba(0,147,196,.24);
      box-shadow: 0 4px 16px rgba(0,80,130,.08);
    }
    .wechat-block {
      margin-top: 3px;
      padding: 8px 7px 7px;
      border-radius: 12px;
      background: linear-gradient(180deg,#F3FBFF,#FFFFFF);
      border: 1px solid rgba(0,147,196,.14);
      text-align: center;
    }
    .wechat-qr {
      width: 92px;
      height: 92px;
      margin: 0 auto 6px;
      padding: 7px;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 4px;
      border-radius: 9px;
      background: #fff;
      border: 1px dashed rgba(0,147,196,.40);
      box-shadow: inset 0 0 0 4px #F7FCFF;
    }
    .wechat-qr span {
      display: block;
      border-radius: 2px;
      background: rgba(0,147,196,.88);
    }
    .wechat-qr span:nth-child(2),
    .wechat-qr span:nth-child(4),
    .wechat-qr span:nth-child(8) { background: rgba(0,170,136,.78); }
    .wechat-qr span:nth-child(5) { background: transparent; border: 2px solid rgba(0,147,196,.58); }
    .wechat-copy {
      font-size: .72rem;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }
    .wechat-copy small {
      font-size: .62rem;
      font-weight: 500;
      color: var(--text-muted);
    }
    @media (max-width: 900px) {
      .smart-contact-float {
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        transform: none;
      }
      .float-contact-card {
        width: auto;
        min-width: 260px;
        display: grid;
        grid-template-columns: 1fr 1fr 70px;
        gap: 7px;
        align-items: center;
        padding: 8px;
        border-radius: 999px;
      }
      .float-contact-title { display: none; }
      .smart-contact-float a { margin: 0; min-height: 36px; font-size: .72rem !important; }
      .wechat-block {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .wechat-qr { display: none; }
      .wechat-copy {
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #F3FBFF;
        border: 1px solid rgba(0,147,196,.18);
        color: var(--accent);
        font-size: .7rem;
      }
      .wechat-copy small { display: none; }
      footer { padding-bottom: 70px; }
    }
    @media (max-width: 520px) {
      .smart-contact-float { left: 10px !important; right: 10px !important; }
      .float-contact-card { min-width: 0; grid-template-columns: 1fr 1fr 64px; }
    }


/* ===== V4.0 STATIC SEO PRODUCTION FIXES ===== */
.header-nav .nav-link.active{color:var(--accent);background:rgba(0,147,196,0.07);}
.smart-contact-float .wechat-qr{display:block!important;padding:0!important;overflow:hidden;background:#fff;}
.smart-contact-float .wechat-qr img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;}
@media(max-width:900px){.smart-contact-float .wechat-qr img{display:none;}}


/* ===== KNOWLEDGE CENTER V4.9 ===== */
.knowledge-hero {
  padding: 4.4rem 0 3.6rem;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(0,147,196,.10), transparent 65%),
    linear-gradient(180deg,#EEF7FF 0%,#DFF0FB 100%);
  position: relative;
  overflow: hidden;
}
.knowledge-hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,147,196,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,147,196,.05) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
}
.knowledge-hero .container{position:relative;z-index:1;}
.knowledge-kicker{font-family:'IBM Plex Mono',monospace;color:var(--accent);letter-spacing:3px;font-size:.78rem;text-transform:uppercase;margin-bottom:.8rem;}
.knowledge-hero h1{font-family:'Noto Serif SC',serif;font-size:clamp(2rem,3.6vw,3rem);line-height:1.2;margin-bottom:1rem;color:var(--text);}
.knowledge-hero p{max-width:820px;color:var(--text-muted);font-size:1rem;line-height:1.85;}
.knowledge-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;}
.knowledge-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.8rem 1.1rem;box-shadow:var(--card-shadow);}
.knowledge-stat b{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-size:1.2rem;display:block;line-height:1.1;}
.knowledge-stat span{font-size:.76rem;color:var(--text-muted);}
.knowledge-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-top:1.6rem;}
.knowledge-cat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;text-decoration:none;color:inherit;transition:.2s;box-shadow:0 1px 0 rgba(255,255,255,.7) inset;}
.knowledge-cat:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--card-shadow-hover);}
.knowledge-cat .icon{width:34px;height:34px;border-radius:8px;background:rgba(0,147,196,.09);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem;}
.knowledge-cat h3{font-size:.9rem;margin-bottom:.25rem;color:var(--text);}
.knowledge-cat p{font-size:.72rem;color:var(--text-muted);line-height:1.5;}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.article-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.35rem;text-decoration:none;color:inherit;transition:.25s;display:flex;flex-direction:column;min-height:245px;position:relative;overflow:hidden;}
.article-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--article-color,var(--accent));}
.article-card:hover{border-color:var(--article-color,var(--accent));transform:translateY(-4px);box-shadow:var(--card-shadow-hover);}
.article-tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:1.4px;color:var(--article-color,var(--accent));text-transform:uppercase;margin-bottom:.7rem;}
.article-card h2,.article-card h3{font-size:1.06rem;line-height:1.42;margin-bottom:.6rem;color:var(--text);}
.article-card p{font-size:.83rem;color:var(--text-muted);line-height:1.72;margin-bottom:1rem;}
.article-meta{margin-top:auto;display:flex;gap:.4rem;flex-wrap:wrap;}
.article-meta span{font-size:.7rem;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);border-radius:999px;padding:.22rem .6rem;}
.featured-article{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.8rem;margin-bottom:1.4rem;box-shadow:var(--card-shadow);}
.featured-article h2{font-family:'Noto Serif SC',serif;font-size:1.7rem;line-height:1.25;margin:.4rem 0 .7rem;}
.featured-article p{color:var(--text-muted);line-height:1.8;}
.featured-panel{background:linear-gradient(135deg,#07192C,#0A6D93);border-radius:14px;color:#fff;padding:1.4rem;display:grid;gap:.7rem;align-content:center;}
.featured-panel .line{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.55rem;font-size:.82rem;}
.featured-panel .line:last-child{border-bottom:0;}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;align-items:start;}
.article-main{background:#fff;border:1px solid var(--border);border-radius:16px;padding:2.2rem;box-shadow:var(--card-shadow);}
.article-main h2{font-family:'Noto Serif SC',serif;font-size:1.55rem;margin:2rem 0 .8rem;color:var(--text);}
.article-main h2:first-child{margin-top:0;}
.article-main h3{font-size:1.08rem;margin:1.4rem 0 .55rem;color:var(--text);}
.article-main p{color:var(--text-muted);line-height:1.9;margin:.7rem 0;font-size:.94rem;}
.article-main ul{margin:.7rem 0 .9rem 1.2rem;color:var(--text-muted);line-height:1.85;font-size:.92rem;}
.article-main li{margin:.25rem 0;}
.quick-answer{background:linear-gradient(180deg,#F2FAFF,#fff);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px;padding:1.1rem 1.25rem;margin:1.1rem 0;}
.quick-answer strong{color:var(--text);display:block;margin-bottom:.35rem;}
.engineer-box{background:#F5FFFB;border:1px solid rgba(0,170,136,.22);border-left:4px solid var(--accent2);border-radius:12px;padding:1rem 1.2rem;margin:1rem 0;color:var(--text-muted);line-height:1.8;}
.knowledge-table-wrap{overflow-x:auto;margin:1rem 0;border-radius:12px;border:1px solid var(--border);}
.knowledge-table{width:100%;border-collapse:collapse;background:#fff;font-size:.88rem;}
.knowledge-table th{background:#EAF6FD;color:var(--accent);font-weight:700;text-align:left;}
.knowledge-table th,.knowledge-table td{padding:.78rem .9rem;border-bottom:1px solid var(--border);vertical-align:top;}
.knowledge-table tr:last-child td{border-bottom:0;}
.article-sidebar{position:sticky;top:110px;display:grid;gap:1rem;}
.sidebar-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.2rem;box-shadow:var(--card-shadow);}
.sidebar-card h4{font-size:.92rem;margin-bottom:.75rem;color:var(--text);}
.sidebar-card a{display:block;text-decoration:none;color:var(--text-muted);font-size:.8rem;padding:.45rem 0;border-bottom:1px solid rgba(0,147,196,.10);}
.sidebar-card a:hover{color:var(--accent);}
.sidebar-card a:last-child{border-bottom:0;}
.article-cta{margin-top:2rem;background:linear-gradient(135deg,#07192C,var(--accent));color:#fff;border-radius:16px;padding:1.6rem;}
.article-cta h3{color:#fff;margin-top:0;}
.article-cta p{color:rgba(255,255,255,.85);}
.article-cta .btn-primary{background:#fff;color:var(--text);}
.faq-block details{background:#fff;border:1px solid var(--border);border-radius:10px;margin:.7rem 0;padding:.9rem 1rem;}
.faq-block summary{font-weight:700;color:var(--text);cursor:pointer;}
.faq-block p{font-size:.88rem;margin:.6rem 0 0;}
@media(max-width:1100px){.knowledge-cats{grid-template-columns:repeat(3,1fr);}.article-grid{grid-template-columns:repeat(2,1fr);}.article-layout{grid-template-columns:1fr;}.article-sidebar{position:static}.featured-article{grid-template-columns:1fr;}}
@media(max-width:760px){.knowledge-cats,.article-grid{grid-template-columns:1fr;}.article-main{padding:1.25rem}.knowledge-hero{padding:3rem 0 2.4rem;}.featured-article{padding:1.2rem;}}

/* ===== V4.12 READABILITY FONT BOOST ===== */
html { font-size: 17.2px; }
body { line-height: 1.62; }
.nav-link, .header-phone, .header-cta, .header-search input { font-size: .86rem; }
.hero-desc, .page-summary, .section-sub { line-height: 1.72; }
.why-card p, .cat-card .cat-tag, .ind-card .ind-summary, .series-desc, .adv-card p, .insight-card p { line-height: 1.62; }
.form-field input, .form-field select, .form-field textarea { font-size: .86rem; }
.footer-col a, .footer-brand p { font-size: .82rem; }
@media (max-width: 760px) {
  html { font-size: 16.3px; }
  body { line-height: 1.62; }
}


/* ===== V4.13 FOOTER LOGO + FLOAT CONTACT PHONE POPOVER ===== */
.footer-brand img {
  width: 150px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin-bottom: 1rem !important;
}
.smart-contact-float {
  right: 28px !important;
  z-index: 1200 !important;
}
.smart-contact-float .float-contact-card {
  width: 174px !important;
  padding: 14px 13px !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(0,92,140,.20) !important;
}
.smart-contact-float .float-contact-title {
  font-size: .78rem !important;
  margin-bottom: 10px !important;
  letter-spacing: 1.6px !important;
}
.smart-contact-float a {
  min-height: 44px !important;
  font-size: .86rem !important;
  margin-bottom: 9px !important;
  padding: 0 .75rem !important;
}
.smart-contact-float a.float-phone {
  position: relative;
}
.smart-contact-float .wechat-block {
  padding: 10px 9px 9px !important;
  border-radius: 14px !important;
}
.smart-contact-float .wechat-qr {
  width: 112px !important;
  height: 112px !important;
  margin-bottom: 8px !important;
}
.smart-contact-float .wechat-copy {
  font-size: .82rem !important;
}
.smart-contact-float .wechat-copy small {
  font-size: .68rem !important;
}
.phone-popover {
  position: absolute;
  top: 28px;
  right: calc(100% + 14px);
  min-width: 190px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,147,196,.20);
  box-shadow: 0 16px 44px rgba(0,80,130,.18);
  color: var(--text);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
  white-space: nowrap;
}
.phone-popover::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 26px;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,.98);
  border-right: 1px solid rgba(0,147,196,.20);
  border-top: 1px solid rgba(0,147,196,.20);
  transform: rotate(45deg);
}
.phone-popover-label {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: .5px;
}
.phone-popover strong {
  display: block;
  font-size: 1.1rem;
  color: var(--accent);
  line-height: 1.35;
  margin-bottom: 4px;
}
.phone-popover span:last-child {
  display: block;
  font-size: .92rem;
  color: var(--text);
}
.smart-contact-float:hover .phone-popover,
.smart-contact-float.show-phone .phone-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}
@media (max-width: 900px) {
  .smart-contact-float {
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    transform: none !important;
  }
  .smart-contact-float .float-contact-card {
    width: auto !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 80px !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 999px !important;
  }
  .smart-contact-float a {
    min-height: 40px !important;
    font-size: .78rem !important;
    margin: 0 !important;
  }
  .smart-contact-float .phone-popover {
    display: none !important;
  }
  .smart-contact-float .wechat-copy {
    height: 40px !important;
    font-size: .74rem !important;
  }
}


/* ===== V4.17 TECHNICAL DOWNLOAD CENTER ===== */
.download-hero-panel{margin-top:1.7rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;max-width:920px;}
.download-hero-stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;box-shadow:var(--card-shadow);}
.download-hero-stat b{display:block;color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:1.08rem;}
.download-hero-stat span{font-size:.76rem;color:var(--text-muted);}
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.download-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.45rem;box-shadow:var(--card-shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:310px;position:relative;overflow:hidden;transition:.25s;}
.download-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--doc-color,var(--accent));}
.download-card:hover{border-color:var(--doc-color,var(--accent));box-shadow:var(--card-shadow-hover);transform:translateY(-4px);}
.download-tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:1.4px;color:var(--doc-color,var(--accent));text-transform:uppercase;margin-bottom:.7rem;}
.download-card h3{font-size:1.15rem;line-height:1.42;margin-bottom:.55rem;color:var(--text);}
.download-card p{font-size:.86rem;color:var(--text-muted);line-height:1.75;margin-bottom:1rem;}
.download-info{display:flex;flex-wrap:wrap;gap:.45rem;margin:.3rem 0 1rem;}
.download-info span{font-size:.72rem;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);border-radius:999px;padding:.22rem .65rem;}
.download-actions{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;}
.download-btn{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;background:linear-gradient(135deg,var(--doc-color,var(--accent)),#0070AA);color:#fff;border-radius:8px;padding:.62rem .95rem;font-size:.84rem;font-weight:700;}
.download-btn.secondary{background:#fff;color:var(--doc-color,var(--accent));border:1px solid rgba(0,147,196,.24);}
.download-intro{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.6rem;box-shadow:var(--card-shadow);display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem;margin-bottom:1.4rem;}
.download-intro h2{font-family:'Noto Serif SC',serif;font-size:1.65rem;margin-bottom:.6rem;}
.download-intro p{color:var(--text-muted);line-height:1.85;}
.download-checklist{background:linear-gradient(135deg,#07192C,#0A6D93);border-radius:14px;padding:1.2rem;color:#fff;text-align:center;}
.download-checklist ul{list-style:none;padding:0;margin:.7rem 0 0;}
.download-checklist strong{display:block;font-size:1.05rem;margin-bottom:.45rem;}
.download-checklist li{margin:.45rem 0;color:rgba(255,255,255,.88);text-align:center;}
.doc-metadata{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1rem 0;}
.doc-meta-box{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.85rem;}
.doc-meta-box b{display:block;color:var(--text);font-size:.85rem;margin-bottom:.2rem;}
.doc-meta-box span{color:var(--text-muted);font-size:.82rem;}
@media(max-width:1100px){.download-grid{grid-template-columns:repeat(2,1fr);}.download-hero-panel{grid-template-columns:repeat(2,1fr);}.download-intro{grid-template-columns:1fr;}}
@media(max-width:760px){.download-grid{grid-template-columns:1fr;}.download-hero-panel{grid-template-columns:1fr;}.doc-metadata{grid-template-columns:1fr;}}


/* ===== V4.24 MOBILE / TABLET CONTACT FLOAT FINAL FIX =====
   Desktop keeps the original right-side contact card.
   Mobile and tablet collapse to a small button; tap to open a compact panel with QR. */
.mobile-contact-toggle,
.mobile-contact-close,
.mobile-contact-backdrop{display:none;}

@media (max-width: 900px){
  body{padding-bottom:0!important;}
  footer{padding-bottom:32px!important;}

  .smart-contact-float{
    position:fixed!important;
    right:16px!important;
    left:auto!important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    z-index:9999!important;
    display:block!important;
    pointer-events:none!important;
    transform:none!important;
  }

  .mobile-contact-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:72px!important;
    height:72px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.58)!important;
    background:linear-gradient(135deg,#0093C4,#0070AA)!important;
    color:#fff!important;
    box-shadow:0 14px 36px rgba(0,80,130,.26)!important;
    font-size:15px!important;
    font-weight:800!important;
    letter-spacing:.5px!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .mobile-contact-toggle::before{content:'☎';font-size:18px;line-height:1;}

  .smart-contact-float .float-contact-card{
    display:none!important;
    position:absolute!important;
    right:0!important;
    bottom:86px!important;
    width:min(86vw,340px)!important;
    padding:16px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(158,217,238,.95)!important;
    box-shadow:0 24px 60px rgba(0,47,78,.24)!important;
    pointer-events:auto!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }
  .smart-contact-float.mobile-open .float-contact-card{display:block!important;}

  .smart-contact-float .float-contact-title{
    display:block!important;
    text-align:center!important;
    font-size:15px!important;
    font-weight:800!important;
    color:#07192C!important;
    margin:0 34px 12px 0!important;
    letter-spacing:0!important;
  }
  .mobile-contact-close{
    display:none!important;
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    width:32px!important;
    height:32px!important;
    border-radius:50%!important;
    border:1px solid #D8EEF8!important;
    background:#fff!important;
    color:#456078!important;
    font-size:20px!important;
    line-height:1!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:auto!important;
  }
  .smart-contact-float.mobile-open .mobile-contact-close{display:flex!important;}

  .smart-contact-float a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:46px!important;
    padding:0 14px!important;
    margin:8px 0!important;
    border-radius:999px!important;
    font-size:15px!important;
    font-weight:800!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .smart-contact-float a.float-phone{
    background:linear-gradient(135deg,#0093C4,#0070AA)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.45)!important;
    box-shadow:0 10px 24px rgba(0,147,196,.24)!important;
  }
  .smart-contact-float a.float-select{
    background:#fff!important;
    color:#0070AA!important;
    border:1px solid rgba(0,147,196,.28)!important;
    box-shadow:none!important;
  }

  .smart-contact-float .wechat-block{
    display:block!important;
    margin:12px 0 0!important;
    padding:12px!important;
    border:1px dashed rgba(0,147,196,.38)!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#F8FCFF,#EEF8FD)!important;
    text-align:center!important;
  }
  .smart-contact-float .wechat-qr{
    display:block!important;
    width:168px!important;
    height:168px!important;
    padding:0!important;
    margin:0 auto 9px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid #E5F4FA!important;
  }
  .smart-contact-float .wechat-qr img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:10px!important;
  }
  .smart-contact-float .wechat-copy{
    display:block!important;
    font-size:14px!important;
    line-height:1.45!important;
    font-weight:800!important;
    color:#07192C!important;
    letter-spacing:0!important;
  }
  .smart-contact-float .wechat-copy small{
    display:block!important;
    margin-top:2px!important;
    font-size:12px!important;
    color:#456078!important;
    font-weight:600!important;
  }
  .smart-contact-float .phone-popover{display:none!important;}

  .mobile-contact-backdrop{
    display:none!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(7,25,44,.18)!important;
    z-index:9998!important;
  }
  body.mobile-contact-open .mobile-contact-backdrop{display:block!important;}
}

@media (min-width: 901px){
  .mobile-contact-toggle,.mobile-contact-close,.mobile-contact-backdrop{display:none!important;}
}

@media (max-width: 420px){
  .mobile-contact-toggle{width:64px!important;height:64px!important;font-size:14px!important;}
  .smart-contact-float .float-contact-card{width:min(90vw,320px)!important;bottom:78px!important;padding:14px!important;}
  .smart-contact-float .wechat-qr{width:150px!important;height:150px!important;}
}