@charset "UTF-8";
/* styles.css —— iotrunwl 网站全部样式(单文件,按页面从上到下的顺序分段)
   规则:后写的规则覆盖先写的;改动前先搜索同名选择器,确认是否被后面的"苹果风格"层再次覆盖 */
/* 引入 Google 字体 IBM Plex Sans;若访问不到,font-family 会自动回退到系统字体 */
  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* 设计令牌(CSS 变量):全站颜色集中在这里,改配色只需改这一处
   paper=底色  ink=文字色  line=分割线  black=深色区块  accent=强调橙色 */
  :root{
    --paper:#ffffff;
    --paper-alt:#f4f4f4;
    --paper-alt-2:#e9e9e9;
    --ink:#171a20;
    --ink-soft:#5c5e62;
    --ink-faint:#8b8d92;
    --line:#d9d9d9;
    --line-soft:#e6e6e6;
    --black:#171a20;
    --black-2:#0f1114;
    --on-black:#ffffff;
    --on-black-soft:#a3a6ab;
    --on-black-line:#33363d;
    --accent:#df5322;
  }

/* 基础重置:盒模型、平滑滚动;用户系统设置"减少动画"时关闭所有动画/过渡(无障碍) */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important; animation:none !important;} }

/* 全局排版:字体、抗锯齿;img 默认块级且不超过容器宽度 */
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:16px;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  h1,h2,h3{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-0.02em; line-height:1.05;}
  p{margin:0;}
/* .wrap:内容居中容器,最大宽 1180px */
  .wrap{max-width:1180px; margin-inline:auto; padding-inline:32px;}
  /* ---------- BUTTONS ---------- */
  /* 按钮 .btn(主按钮/描边按钮/深色底按钮) */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; padding:14px 30px; font-size:0.92rem; font-weight:500;
    text-decoration:none; border:1px solid transparent; white-space:nowrap;
    transition:background .2s, color .2s, border-color .2s;
  }
  .btn.dark{background:var(--ink); color:#fff; border-color:var(--ink);}
  .btn.outline{background:transparent; color:var(--ink); border-color:rgba(23,26,32,0.32);}
  .btn.outline:hover{border-color:var(--ink);}
  .btn.on-black.dark{background:#fff; color:var(--ink); border-color:#fff;}
  .btn.on-black.dark:hover{background:#e7e7e7; border-color:#e7e7e7;}
  .btn.on-black.outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.45);}
  .btn.on-black.outline:hover{border-color:#fff;}
  .btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  .eyebrow{
    font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--accent);
  }

  /* ---------- NAV ---------- */
  /* 顶部导航栏(固定定位、毛玻璃、手机端汉堡菜单) */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent; color:#fff;
    transition:background .25s ease, color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
    border-bottom:1px solid transparent;
    /* Force the fixed header onto its own compositing layer. Mobile Safari can
       fail to repaint position:fixed elements when a large amount of content
       elsewhere on the page is shown/hidden via JS in the same frame as a
       scrollIntoView() call (exactly what happens when the product mini-shop
       switches views) -- the header can visually vanish until the user
       manually scrolls. Promoting it to its own layer keeps it painted. */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  header.nav.is-solid{
    background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
    color:var(--ink); border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    max-width:1320px; margin-inline:auto; padding:0 28px;
    height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .brand{display:flex; align-items:baseline; gap:2px; text-decoration:none; font-weight:700; font-size:1.06rem; letter-spacing:-0.01em; color:inherit;}
  .brand .dot{color:var(--accent);}
  nav.links{display:flex; gap:30px; align-items:center;}
  nav.links a{font-size:0.86rem; font-weight:500; text-decoration:none; color:inherit; opacity:0.92;}
  nav.links a:hover{opacity:1; color:var(--accent);}

  .nav-drop{position:relative;}
  .drop-toggle{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
  .nav-drop-trigger{display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:0.86rem; font-weight:500; opacity:0.92; user-select:none;}
  .nav-drop-trigger:hover{opacity:1; color:var(--accent);}
  .nav-drop .caret{width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:0.75; transition:transform .18s ease;}
  .nav-drop-menu{
    position:absolute; top:100%; left:50%; transform:translate(-50%,4px);
    min-width:250px; background:#fff; border-radius:10px; padding:8px;
    box-shadow:0 20px 40px -12px rgba(23,26,32,0.28); border:1px solid var(--line-soft);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-drop:hover .nav-drop-menu,
  .drop-toggle:checked ~ .nav-drop-menu{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,10px);}
  .drop-toggle:checked ~ .nav-drop-trigger .caret{transform:rotate(225deg); margin-top:3px;}
  nav.links .nav-drop-menu a{display:block; padding:11px 14px; border-radius:7px; font-size:0.86rem; font-weight:500; color:var(--ink); opacity:1; white-space:nowrap;}
  nav.links .nav-drop-menu a:hover{background:var(--paper-alt); color:var(--accent); opacity:1;}

  .nav-cta{display:flex; align-items:center; gap:16px;}
  .nav-cta .btn{padding:9px 20px; font-size:0.82rem;}
  header.nav .btn.outline{border-color:rgba(255,255,255,0.5); color:#fff;}
  header.nav.is-solid .btn.outline{border-color:rgba(23,26,32,0.32); color:var(--ink);}

  .burger{display:none;}
  .burger-toggle{display:none;}
  .mobile-panel{display:none;}
  @media (max-width:920px){
    nav.links{display:none;}
    .nav-cta .btn{display:none;}
    /* always keep the mobile header solid so the burger icon has reliable contrast,
       regardless of what's behind it (hero photo, product images, etc.) */
    header.nav{
      background:rgba(255,255,255,0.96); backdrop-filter:blur(8px);
      color:var(--ink); border-bottom:1px solid var(--line-soft);
    }
    header.nav .btn.outline{border-color:rgba(23,26,32,0.32); color:var(--ink);}
    .burger{
      display:flex; align-items:center; justify-content:center;
      width:38px; height:38px; cursor:pointer;
    }
    .burger span, .burger span::before, .burger span::after{
      content:""; display:block; width:20px; height:2px; background:currentColor; position:relative;
      transition:transform .22s ease, opacity .22s ease, top .22s ease;
    }
    .burger span::before{position:absolute; top:-6px;}
    .burger span::after{position:absolute; top:6px;}
    .burger-toggle:checked ~ header .burger span{background:transparent;}
    .burger-toggle:checked ~ header .burger span::before{top:0; transform:rotate(45deg);}
    .burger-toggle:checked ~ header .burger span::after{top:0; transform:rotate(-45deg);}
    .mobile-panel{
      position:fixed; inset:64px 0 0 0; background:#fff; color:var(--ink); z-index:101;
      display:flex; flex-direction:column; padding:28px 32px; gap:22px;
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      visibility:hidden;
    }
    .burger-toggle:checked ~ .mobile-panel{visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;}
    .mobile-panel a{font-size:1.2rem; font-weight:600; text-decoration:none; color:var(--ink);}
    .mobile-panel .btn{align-self:flex-start; margin-top:8px;}
    .mobile-group{display:flex; flex-direction:column; gap:14px;}
    .mobile-group .group-label{font-size:0.76rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint);}
    .mobile-group a.sub{font-size:1.05rem; font-weight:500; padding-left:2px;}
  }

  /* ---------- HERO ---------- */
  /* 首页首屏大图 */
  /* ---------- STAT BAND ---------- */
  /* 数据条(关键数字) */
  /* ---------- SECTION SCAFFOLD ---------- */
  /* 通用区块骨架:section 默认上下 120px 内边距(注意:会影响所有 section,后面的专用样式要覆盖它) */
  section{padding-block:120px;}
  .section-head{max-width:640px; margin-inline:auto; text-align:center;}
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:12px;}
  .section-head p{margin-top:16px; color:var(--ink-soft); font-size:1.02rem; line-height:1.6;}
  section.alt{background:var(--paper-alt);}
  section.on-black{background:var(--black); color:#fff;}
  section.on-black .section-head p{color:var(--on-black-soft);}
  section.on-black .eyebrow{color:var(--ink);}

  /* ---------- ABOUT / CHANNEL ---------- */
  /* 关于我们 / 渠道合作区块 */
  /* ---------- PLATFORM (product) SECTIONS ---------- */
  /* 产品平台区块(左图右文) */
  .platform{text-align:center;}
  .platform .index{font-size:0.78rem; font-weight:600; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase;}
  .category-tag{
    display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink-faint); background:var(--paper-alt-2); padding:7px 16px; border-radius:999px; margin-bottom:18px;
  }
  .platform h2{font-size:clamp(2.4rem,5vw,3.6rem); margin-top:10px;}
  .platform .type{color:var(--ink-soft); font-size:1rem; margin-top:8px;}
  .platform-photo-wrap{
    margin:52px auto 0; max-width:420px;
    display:flex; align-items:center; justify-content:center;
  }
  .platform-photo-wrap img{
    max-height:270px; width:auto; margin-inline:auto;
    filter:drop-shadow(0 30px 40px rgba(23,26,32,0.18));
  }
  .platform .desc{max-width:52ch; margin:40px auto 0; color:var(--ink-soft); font-size:1.02rem; line-height:1.6;}
  .spec-chip-row{display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap;}
  .spec-chip{
    border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:0.84rem; font-weight:500;
    background:#fff;
  }
  .platform .btn-row{margin-top:36px;}

  /* ---------- PRODUCT HUB (category -> list -> detail) ---------- */
  /* 产品中心:分类 → 列表 → 详情 三级视图(.shop-view) */
  .product-hub{background:var(--paper-alt);}
  .shop-view{scroll-margin-top:84px;}
  .shop-view[hidden]{display:none;}
  .page-view{scroll-margin-top:84px;}
  .page-view[hidden]{display:none;}
  #specs-solar, #specs-ar, #specs-gb100, #specs-gb200, #specs-ab300, #specs-pm100{scroll-margin-top:84px;}
  .shop-view .back-btn{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0;
    font-size:0.86rem; font-weight:600; color:var(--ink-soft); margin-bottom:36px; font-family:inherit;
  }
  .shop-view .back-btn:hover{color:var(--accent);}
  .shop-view .section-head{margin-top:0;}

  .category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px;}
  .product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:8px;}
  .product-grid.single{grid-template-columns:minmax(0,360px); justify-content:center;}
  /* 3 张卡片时桌面端排成一行(Water Pump Controller 列表);窄屏改为单列 */
  .product-grid.three{grid-template-columns:repeat(3,1fr);}
  @media (max-width:900px){ .product-grid.three{grid-template-columns:1fr;} }

  .category-card, .product-card{
    cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:36px 28px; text-align:center; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }
  .category-card:hover, .product-card:hover{
    box-shadow:0 24px 48px -24px rgba(23,26,32,0.3); transform:translateY(-3px); border-color:transparent;
  }
  .prod-thumb{height:140px; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
  .prod-thumb img{max-height:130px; max-width:100%; filter:drop-shadow(0 16px 24px rgba(23,26,32,0.14));}
  .cat-icon{
    width:72px; height:72px; border-radius:50%; background:rgba(223,83,34,0.08);
    display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
  }
  .cat-icon svg{width:32px; height:32px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .category-card h3{font-size:1.15rem; font-weight:700; letter-spacing:-0.01em;}
  .category-card p{margin-top:10px; color:var(--ink-soft); font-size:0.9rem; line-height:1.55;}
  .category-card .count{
    display:inline-block; margin-top:18px; font-size:0.76rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--accent);
  }
  .product-card h4{font-size:1.4rem; font-weight:700; margin-top:4px; letter-spacing:-0.01em;}
  .product-card .prod-type{color:var(--accent); font-size:0.76rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-top:6px;}
  .product-card .spec-chip-row{margin-top:18px;}
  .product-card .view-link{display:inline-block; margin-top:22px; font-size:0.86rem; font-weight:600; color:var(--ink);}
  .product-card .prod-type{margin-bottom:2px;}
  .product-card:hover .view-link{color:var(--accent);}

  /* ---------- CONCEPT PREVIEW ---------- */
  /* 概念预览卡片 */
  /* ---------- SYSTEM DIAGRAM ---------- */
  /* 系统示意图 */
  /* ---------- SPECS TABLE ---------- */
  /* 技术参数表 */
  .spec-table{max-width:760px; margin:56px auto 0;}
  .spec-row{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    padding:18px 4px; border-bottom:1px solid var(--line);
    font-size:0.96rem;
  }
  .spec-row:first-child{border-top:1px solid var(--line);}
  .spec-row .k{font-weight:600; color:var(--ink);}
  .spec-row .v{color:var(--ink-soft); text-align:right;}
  .config-note{
    max-width:760px; margin:36px auto 0; text-align:center;
    padding:26px 30px; background:var(--paper-alt); border-radius:10px;
  }
  .config-note .eyebrow{display:block; margin-bottom:8px;}
  .config-note p{color:var(--ink-soft); font-size:0.92rem; line-height:1.6;}

  /* ---------- APPLICATIONS ---------- */
  /* 应用场景 */
  /* ---------- APPLE-STYLE PRODUCT TILES ---------- */
  /* 苹果风格产品磁贴(首页大图卡片) */
  img.blend{mix-blend-mode:multiply; filter:none !important;}
  section.tiles-section{padding:64px 0 0; background:#fff;}
  .tiles{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px;}
  .tile{
    background:#f5f5f7; color:#1d1d1f; text-align:center; overflow:hidden;
    display:flex; flex-direction:column; align-items:center;
    padding:64px 24px 0; min-height:700px;
  }
  .tile-wide{grid-column:1 / -1; min-height:820px;}
  .tile h3{font-size:clamp(2.2rem,4.4vw,3.5rem); font-weight:600; letter-spacing:-0.025em; line-height:1.07;}
  .tile p{margin-top:10px; font-size:clamp(1.05rem,1.8vw,1.4rem); line-height:1.3; color:#1d1d1f;}
  .tile-links{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
  .pill{
    display:inline-block; padding:11px 22px; border-radius:980px; font-size:1.05rem; line-height:1.2;
    text-decoration:none; border:1px solid var(--accent); transition:background .2s, color .2s;
  }
  .pill-fill{background:var(--accent); color:#fff;}
  .pill-line{background:transparent; color:var(--accent);}
  .tile-img{margin-top:auto; padding-top:32px; width:100%; max-width:640px; height:auto; display:block;}
  .tile-wide .tile-img{max-width:440px;}

  /* ---------- FIELD GALLERY CAROUSEL ---------- */
  /* 现场案例轮播(旧版,现主要由下方 RAILS 取代) */
  /* ---------- DISTRIBUTOR FEATURE GRID ---------- */
  /* 经销商特性网格 */
  .feature-grid{
    margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:44px 36px;
  }
  .feature-item{text-align:center; padding-top:22px; border-top:1px solid var(--line);}
  .feature-item h3{font-size:1.02rem; font-weight:600;}
  .feature-item p{margin-top:10px; color:var(--ink-soft); font-size:0.9rem; line-height:1.55;}

  /* ---------- CTA BAND ---------- */
  /* 行动号召横幅(联系我们) */
  .cta-band{background:var(--black); color:#fff; text-align:center; padding-block:110px;}
  .cta-band h2{font-size:clamp(2rem,4vw,2.8rem); color:#fff;}
  .cta-band p{margin-top:16px; color:var(--on-black-soft); font-size:1rem; max-width:48ch; margin-inline:auto;}
  .cta-band .btn-row{margin-top:36px;}

  /* ---------- FOOTER ---------- */
  /* 页脚 */
  footer{background:#fff; padding-block:72px 28px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line);}
  .foot-col h5{font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;}
  .foot-col a, .foot-col p{display:block; font-size:0.92rem; color:var(--ink-soft); text-decoration:none; line-height:2; margin:0;}
  .foot-col a:hover{color:var(--accent);}
  .foot-col.brand-col .brand{font-size:1.2rem; margin-bottom:14px;}
  .foot-col.brand-col p{max-width:32ch; line-height:1.6; margin-top:6px;}
  .foot-bottom{
    padding-top:22px; display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:10px; font-size:0.8rem; color:var(--ink-faint);
  }

  /* ---------- RESPONSIVE ---------- */
  /* 响应式:平板/手机断点(900px / 700px / 480px) */
  @media (max-width:900px){
    section{padding-block:80px;}
    .feature-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
    .foot-grid{grid-template-columns:1fr; gap:28px;}
    .category-grid{grid-template-columns:1fr;}
    .product-grid{grid-template-columns:1fr;}
    .tiles{grid-template-columns:1fr;}
    .tile,.tile-wide{min-height:620px;}
    }
  @media (max-width:600px){
    .wrap{padding-inline:22px;}
    section{padding-block:64px;}
    .spec-row{grid-template-columns:1fr; gap:4px;}
    .spec-row .v{text-align:left; color:var(--ink);}
    .feature-grid{grid-template-columns:1fr;}
    .tile{padding-top:48px; min-height:560px;}
    .tile-wide{min-height:640px;}
    .platform-photo-wrap img{max-height:220px;}
    }
  @media (max-width:920px) and (min-width:601px){
    }


  /* about page */
  section.about-page{padding-block:120px 120px; background:#fff;}
  .about-grid{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .about-card{background:#f5f5f7; border-radius:18px; padding:30px 26px; display:flex; flex-direction:column; align-items:flex-start;}
  .about-card h3{font-size:1.25rem; font-weight:600; letter-spacing:-.015em;}
  .about-card p{margin-top:10px; color:var(--ink-soft); font-size:.92rem; line-height:1.55; flex:1;}
  .about-card .pill{margin-top:22px; padding:8px 18px; font-size:.95rem;}
  .about-page .feature-grid{margin-top:48px; grid-template-columns:repeat(4,1fr);}
  .about-contact{margin-top:96px; text-align:center; background:#f5f5f7; border-radius:22px; padding:56px 28px;}
  .about-contact h3{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; letter-spacing:-.02em;}
  .about-contact p{margin-top:12px; color:var(--ink-soft);}
  @media (max-width:900px){ .about-grid,.about-page .feature-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .about-grid,.about-page .feature-grid{grid-template-columns:1fr;} section.about-page{padding-block:116px 80px;} }


  /* ---------- CHAT ASSISTANT ---------- */
  /* 右下角在线客服小窗(对应 js/chat.js) */
  .chat-fab{position:fixed; right:22px; bottom:22px; z-index:160; display:flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 16px; border:0; border-radius:999px; cursor:pointer;
    background:#1d1d1f; color:#fff; font-weight:600; font-size:.92rem; line-height:1; font-family:inherit; box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
    transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), opacity .25s var(--ease);}
  .chat-fab:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 16px 36px -10px rgba(0,0,0,.5);}
  .chat-fab:active{transform:scale(.96);}
  .chat-fab svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .chat-fab .dot{position:absolute; top:10px; left:30px; width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid #1d1d1f;}
  .chat-open .chat-fab{opacity:0; pointer-events:none; transform:scale(.8);}
  .chat-panel{position:fixed; right:22px; bottom:22px; z-index:170; width:372px; max-width:calc(100vw - 24px); height:min(580px, calc(100vh - 44px)); display:flex; flex-direction:column;
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
    border:1px solid rgba(0,0,0,.08); border-radius:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.4); overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(16px) scale(.97); transform-origin:bottom right;
    transition:opacity .3s var(--ease), transform .45s var(--ease-out), visibility 0s linear .45s;}
  .chat-open .chat-panel{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
  .chat-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.07);}
  .chat-avatar{width:36px; height:36px; border-radius:50%; background:#1d1d1f; display:flex; align-items:center; justify-content:center; flex:none;}
  .chat-avatar svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .chat-title{font-weight:600; font-size:.96rem; letter-spacing:-.01em;}
  .chat-sub{font-size:.74rem; color:#6e6e73; margin-top:2px;}
  .chat-close{margin-left:auto; width:30px; height:30px; border:0; border-radius:50%; background:rgba(0,0,0,.06); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;}
  .chat-close:hover{background:rgba(0,0,0,.12);}
  .chat-close svg{width:12px; height:12px; stroke:#1d1d1f; stroke-width:2; stroke-linecap:round;}
  .chat-body{flex:1; overflow-y:auto; padding:18px 16px 8px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth;}
  .chat-msg{max-width:84%; padding:10px 14px; border-radius:18px; font-size:.92rem; line-height:1.45; animation:chatIn .4s var(--ease-out); white-space:pre-line;}
  @keyframes chatIn{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
  .chat-msg.bot{align-self:flex-start; background:#f2f2f4; color:#1d1d1f; border-bottom-left-radius:6px;}
  .chat-msg.user{align-self:flex-end; background:#1d1d1f; color:#fff; border-bottom-right-radius:6px;}
  .chat-msg a{color:var(--accent); font-weight:600; text-decoration:none; cursor:pointer;}
  .chat-msg a:hover{text-decoration:underline;}
  .chat-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .chat-links a{display:inline-block; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.1); font-size:.8rem;}
  .chat-links a:hover{text-decoration:none; border-color:var(--accent);}
  .chat-typing{align-self:flex-start; background:#f2f2f4; border-radius:18px; border-bottom-left-radius:6px; padding:13px 16px; display:flex; gap:4px;}
  .chat-typing i{width:6px; height:6px; border-radius:50%; background:#a1a1a6; animation:chatDot 1.1s infinite ease-in-out;}
  .chat-typing i:nth-child(2){animation-delay:.15s;} .chat-typing i:nth-child(3){animation-delay:.3s;}
  @keyframes chatDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
  .chat-chips{display:flex; flex-wrap:wrap; gap:7px; padding:6px 16px 12px;}
  .chat-chip{border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:999px; padding:7px 13px; font-weight:500; font-size:.8rem; line-height:1; font-family:inherit; color:#1d1d1f; cursor:pointer; transition:border-color .2s, color .2s, transform .2s;}
  .chat-chip:hover{border-color:var(--accent); color:var(--accent);}
  .chat-chip:active{transform:scale(.96);}
  .chat-form{display:flex; gap:8px; padding:12px 14px 14px; border-top:1px solid rgba(0,0,0,.07);}
  .chat-input{flex:1; min-width:0; height:42px; border:1px solid rgba(0,0,0,.14); border-radius:999px; padding:0 16px; font-weight:400; font-size:.92rem; line-height:1; font-family:inherit; background:#fff; color:#1d1d1f; outline:none; transition:border-color .2s, box-shadow .2s;}
  .chat-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(223,83,34,.15);}
  .chat-send{width:42px; height:42px; border:0; border-radius:50%; background:var(--accent); cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; transition:transform .2s, background .2s;}
  .chat-send:hover{background:#c4461a;}
  .chat-send:active{transform:scale(.92);}
  .chat-send svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .chat-note{text-align:center; font-size:.68rem; color:#8e8e93; padding:0 14px 10px;}
  @media (max-width:600px){
    .chat-fab{right:14px; bottom:14px; height:48px; padding:0 16px 0 14px;}
    .chat-panel{right:0; bottom:0; width:100vw; max-width:100vw; height:min(86vh, 640px); border-radius:22px 22px 0 0;}
  }



  /* factory photos */
  .factory-grid{margin-top:52px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  .factory-card{position:relative; margin:0; border-radius:22px; overflow:hidden; background:#f5f5f7;}
  .factory-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform 1s var(--ease-out);}
  .factory-card:hover img{transform:scale(1.04);}
  .factory-card figcaption{position:absolute; left:0; right:0; bottom:0; padding:44px 24px 20px; color:#fff; font-size:1rem; font-weight:600; letter-spacing:-.01em; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));}
  @media (max-width:700px){ .factory-grid{grid-template-columns:1fr;} }

  /* ---------- APPLE-STYLE INTERACTION LAYER ---------- */
  /* 苹果风格交互层:悬停/按压/淡入动画。写在后面,所以会覆盖前面同名规则 */
  :root{--ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);}
  a,button,label,.btn,.pill{-webkit-tap-highlight-color:transparent;}
  /* focus ring: only for keyboard users */
  a:focus-visible,button:focus-visible,.btn:focus-visible,.pill:focus-visible,.product-card:focus-visible,.category-card:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px; border-radius:980px;}
  .product-card:focus-visible,.category-card:focus-visible{border-radius:16px;}
  a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;}

  /* buttons: soft press, quiet hover */
  .btn,.pill{transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);}
  .btn:active,.pill:active{transform:scale(.96); transition-duration:.1s;}
  .pill-fill:hover{background:#c4461a; border-color:#c4461a;}
  .pill-line:hover{background:rgba(223,83,34,.08); color:var(--accent);}
  .btn.outline:hover{background:rgba(23,26,32,.05);}
  .btn.dark:hover{background:#333336; border-color:#333336;}

  /* cards: lift is subtle, press shrinks */
  .category-card,.product-card{transition:box-shadow .45s var(--ease-out), transform .45s var(--ease-out), border-color .3s;}
  .category-card:active,.product-card:active{transform:scale(.985); transition-duration:.12s;}
  .shop-view .back-btn{transition:color .25s var(--ease), transform .25s var(--ease);}
  .shop-view .back-btn:hover{transform:translateX(-3px);}

  /* tiles: product drifts forward on hover */
  .tile{overflow:hidden;}
  .tile-img{transition:transform .9s var(--ease-out);}
  .tile:hover .tile-img{transform:scale(1.035);}

  /* scroll reveal (class added by JS, so no-JS visitors still see everything) */
  .reveal{opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);}
  .reveal.in-view{opacity:1; transform:none;}
  .reveal.d1{transition-delay:.12s;}

  /* view change: gentle fade-up instead of a hard cut */
  @keyframes viewIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .page-view:not([hidden]),.shop-view:not([hidden]){animation:viewIn .55s var(--ease-out);}

  /* desktop nav: 52px frosted bar, quiet links, full-width mega menu */
  @media (min-width:921px){
    .nav-inner{height:52px;}
    header.nav.is-solid{background:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border-bottom:1px solid rgba(0,0,0,.08);}
    nav.links{height:100%; gap:34px;}
    nav.links > a, .nav-drop-trigger{font-size:.8rem; opacity:.82; color:inherit; transition:opacity .25s var(--ease);}
    nav.links > a:hover,.nav-drop-trigger:hover,.nav-drop:hover .nav-drop-trigger{opacity:1; color:inherit;}
    nav.links > a{display:flex; align-items:center; height:100%;}
    .nav-drop{height:100%; display:flex; align-items:center;}
    .nav-drop-trigger{height:100%;}
    .nav-cta .btn{padding:7px 16px; font-size:.78rem;}
    .nav-drop .caret{width:5px; height:5px; margin-top:-3px; transition:transform .35s var(--ease);}
    .nav-drop:hover .caret{transform:rotate(225deg); margin-top:3px;}

    .nav-drop-menu{
      position:fixed; left:0; right:0; top:100%; transform:none; min-width:0;
      border-radius:0; border:0; border-bottom:1px solid rgba(0,0,0,.08); box-shadow:none;
      background:#fbfbfd;
      padding:30px max(32px, calc((100vw - 1000px)/2)) 52px;
      display:flex; flex-direction:column; gap:2px;
      clip-path:inset(0 0 100% 0);
      transition:clip-path .45s var(--ease-out), opacity .3s var(--ease), visibility 0s linear .45s;
    }
    .nav-drop-menu::before{content:"Explore products"; font-size:.74rem; color:#6e6e73; margin-bottom:14px; letter-spacing:.01em;}
    .nav-drop-menu::after{content:""; position:absolute; left:0; right:0; top:100%; height:100vh; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
    .nav-drop:hover .nav-drop-menu,.drop-toggle:checked ~ .nav-drop-menu{transform:none; clip-path:inset(0 0 -100vh 0); transition-delay:0s;}
    .nav-drop:hover .nav-drop-menu::after,.drop-toggle:checked ~ .nav-drop-menu::after{opacity:1;}
    nav.links .nav-drop-menu a{
      font-size:1.5rem; font-weight:600; letter-spacing:-.015em; line-height:1.15; padding:7px 0; border-radius:0; background:none;
      color:#1d1d1f; opacity:0; transform:translateY(-8px); width:max-content;
      transition:opacity .4s var(--ease), transform .5s var(--ease-out), color .2s;
    }
    .nav-drop:hover .nav-drop-menu a,.drop-toggle:checked ~ .nav-drop-menu a{opacity:1; transform:none;}
    .nav-drop:hover .nav-drop-menu a:nth-of-type(1){transition-delay:.06s;}
    .nav-drop:hover .nav-drop-menu a:nth-of-type(2){transition-delay:.10s;}
    .nav-drop:hover .nav-drop-menu a:nth-of-type(3){transition-delay:.14s;}
    .nav-drop:hover .nav-drop-menu a:nth-of-type(4){transition-delay:.18s;}
    .nav-drop:hover .nav-drop-menu a:nth-of-type(5){transition-delay:.22s;}
    nav.links .nav-drop-menu a:hover{background:none; color:#1d1d1f; opacity:1;}
    /* links dim when a sibling is hovered, like apple.com */
    .nav-drop-menu:has(a:hover) a:not(:hover){opacity:.4;}
    .nav-drop.closed .nav-drop-menu{opacity:0; visibility:hidden; transition-duration:.15s;}
  }
  @media (min-width:921px){
    .nav-drop-menu{padding:0; display:block;}
    .nav-drop-menu::before{content:none;}
    .mega-inner{max-width:1320px; margin:0 auto; padding:30px 28px 54px; display:grid; grid-template-columns:minmax(320px,1.15fr) minmax(170px,.55fr) minmax(260px,1fr); gap:56px; align-items:start;}
    .mega-col{display:flex; flex-direction:column;}
    .mega-label{font-size:.74rem; color:#6e6e73; margin-bottom:14px; letter-spacing:.01em;}
    nav.links .mega-main a{font-size:1.75rem; padding:6px 0; transition:opacity .35s var(--ease), transform .5s var(--ease-out), color .2s;}
    nav.links .mega-main a:hover{transform:translateX(6px);}
    nav.links .mega-quick a{font-size:.9rem; font-weight:600; padding:6px 0; letter-spacing:0;}
    nav.links .mega-quick a:hover{color:var(--accent); transform:none;}
    .nav-drop-menu:has(a:hover) a:not(:hover){opacity:1;}
    .mega-main:has(a:hover) a:not(:hover){opacity:.38;}
    .mega-preview{position:relative; height:290px; margin-top:6px;}
    .mega-preview img{position:absolute; right:0; top:50%; max-width:100%; max-height:270px; width:auto; height:auto; opacity:0; transform:translateY(-46%) scale(.94); mix-blend-mode:multiply; transition:opacity .45s var(--ease), transform .8s var(--ease-out); pointer-events:none;}
    .mega-preview img.is-on{opacity:1; transform:translateY(-50%) scale(1);}
  }


  /* support page */
  section.support-page{padding-block:120px; background:#fff;}
  .faq-list{max-width:820px; margin:44px auto 0; border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; background:none; border:0; padding:24px 4px; font-weight:600; font-size:1.15rem; line-height:1.35; font-family:inherit; letter-spacing:-.01em; color:#1d1d1f; cursor:pointer; transition:color .25s var(--ease);}
  .faq-q:hover{color:var(--accent);}
  .faq-plus{position:relative; flex:none; width:22px; height:22px;}
  .faq-plus::before,.faq-plus::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:1.8px; background:currentColor; border-radius:2px; transform:translate(-50%,-50%); transition:transform .45s var(--ease-out);}
  .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);}
  .faq-item.open .faq-plus::after{transform:translate(-50%,-50%) rotate(0deg);}
  .faq-item.open .faq-plus::before{transform:translate(-50%,-50%) rotate(180deg);}
  .faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease-out);}
  .faq-a > div{overflow:hidden;}
  .faq-item.open .faq-a{grid-template-rows:1fr;}
  .faq-a p{padding:0 40px 26px 4px; color:var(--ink-soft); font-size:1rem; line-height:1.65;}
  @media (max-width:600px){ section.support-page{padding-block:116px 80px;} .faq-q{font-size:1.05rem;} }

/* ---------- 照片轨道 RAILS（苹果风格） ----------
   一组 .rail = 一个横向滚动的 .rail-track，里面是若干 .rail-card（16:9 大图）。
   scroll-snap 让每张卡片滚动后自动对齐；一次只显示一张（.rail 宽度 = 一张卡片，overflow:hidden 裁掉其余）。
   JS（main.js）负责给当前卡片加 is-active、控制箭头、每 3 秒自动翻页。 */
section.rails-section{padding-block:72px 64px;background:#fff}
.rail-groups{display:flex;flex-direction:column;gap:28px}
.rail-group{scroll-margin-top:72px}

/* 组标题 "Choose your pump type." */
.rails-title{width:min(1240px,82vw);margin:0 auto 4px}
.rails-title h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0;color:#1d1d1f}
.rails-title h2 span{color:#86868b}

/* 轨道本体：--cw 是卡片宽度，手机端见下方媒体查询 */
.rail{--cw:min(1240px,82vw);position:relative;width:var(--cw);margin-inline:auto;border-radius:28px;overflow:hidden;isolation:isolate}
.rail-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail-track::-webkit-scrollbar{display:none}
.rail-card{position:relative;flex:0 0 var(--cw);scroll-snap-align:center;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#1d1d1f;isolation:isolate}
.rail-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rail-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,0) 58%);pointer-events:none}

/* 卡片底部的白色按钮 + 文字 */
.rail-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:22px;padding:0 40px 36px}
.rail-pill{flex:none;display:inline-flex;align-items:center;padding:13px 24px;border-radius:999px;background:#fff;color:#1d1d1f;font-size:1.05rem;font-weight:600;line-height:1.1;text-decoration:none;box-shadow:0 2px 12px rgba(0,0,0,.18);transition:transform .25s ease,background .25s ease}
.rail-pill:hover{background:#f5f5f7;transform:scale(1.04)}
.rail-text{color:#fff;font-size:1.15rem;font-weight:600;line-height:1.3;max-width:520px;text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* 左右箭头：只在电脑端鼠标移上轨道时出现；第一张隐藏左箭头、最后一张隐藏右箭头（类名由 JS 设置） */
.rail-arrow{position:absolute;top:calc(50% - 30px);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1d1d1f;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.2);opacity:0;transition:opacity .25s ease,transform .25s ease}
.rail-prev{left:18px}
.rail-next{right:18px}
.rail:hover .rail-arrow{opacity:1}
.rail-arrow:hover{transform:scale(1.08)}
.rail.at-start .rail-prev,.rail.at-end .rail-next{opacity:0!important;pointer-events:none}

/* 经销商区块紧跟在轨道下面 */
section#distributors{padding-block:24px 80px}
section#distributors .feature-grid{margin-top:0}

@media (max-width:900px){
  .rail-arrow{display:none}
  .rail-cap{padding:0 28px 28px}
}
@media (max-width:700px){
  section.rails-section{padding-block:48px 40px}
  .rail-groups{gap:20px}
  .rails-title{width:86vw;margin:0 auto}
  .rails-title h2 span{display:block}
  .rail{--cw:calc(100vw - 32px);border-radius:24px}
  .rail-card{aspect-ratio:4/5;border-radius:24px}
  .rail-cap{flex-direction:column;align-items:flex-start;gap:14px;padding:0 22px 24px}
  .rail-text{font-size:1.02rem}
  .rail-pill{font-size:.98rem;padding:11px 20px}
}

/* 说明书下载卡片(.manual-card)——首页已移除,样式保留给将来使用 */
/* manual download */
@media (max-width:900px){}
@media (max-width:700px){}
@media (max-width:480px){.tile-wide .tile-links{gap:8px}.tile-wide .tile-links .pill{padding:10px 16px;font-size:.95rem}}
@media (max-width:480px){.tile .tile-links{gap:8px}.tile .tile-links .pill{padding:10px 16px;font-size:.95rem}}

/* Downloads 下载页:6 个 PDF 卡片网格(.dl-grid / .dl-card) */
/* downloads */
section.dl-section{padding-block:96px 112px;background:#fff}
.dl-wrap{width:min(1240px,82vw);margin:0 auto}
.dl-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 28px;color:#1d1d1f}
.dl-head h2 span{color:#86868b}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dl-card{display:flex;flex-direction:column;background:#f5f5f7;border-radius:24px;overflow:hidden}
.dl-thumb{aspect-ratio:4/3;overflow:hidden;background:#fff}
.dl-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dl-card:hover .dl-thumb img{transform:scale(1.04)}
.dl-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px 26px 28px;flex:1}
.dl-body h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin:0;color:#1d1d1f}
.dl-body p{color:#6e6e73;font-size:.98rem;line-height:1.5;margin:0}
.dl-meta{color:#86868b;font-size:.85rem;margin-bottom:10px}
.dl-body .pill{margin-top:auto}
@media (max-width:900px){.dl-grid{grid-template-columns:1fr}}
@media (max-width:700px){.dl-wrap{width:calc(100vw - 32px)}section.dl-section{padding-block:48px 64px}}

/* About 页面的公司介绍：窄栏正文 + 一行数据 */
.about-intro{max-width:760px;margin:64px auto 0}
.about-intro p{font-size:1.05rem;line-height:1.75;color:var(--ink-soft)}
.about-intro p + p{margin-top:18px}
.about-facts{margin-top:48px;margin-bottom:64px}

/* 产品详情页下半部分：小标题、型号选择表、备注（AR100/200/300 页面使用） */
.spec-title{max-width:760px;margin:64px auto 0;font-size:1.5rem;text-align:left}
.platform .spec-title{margin-top:56px;text-align:center}
.spec-title + .spec-table,.spec-title + .model-table-wrap{margin-top:20px}
.model-table-wrap{max-width:760px;margin:20px auto 0;overflow-x:auto}
.model-table{width:100%;border-collapse:collapse;font-size:.95rem}
.model-table th,.model-table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.model-table th{font-weight:600;color:var(--ink);border-top:1px solid var(--line)}
.model-table td{color:var(--ink-soft)}
.spec-note{max-width:760px;margin:14px auto 0;font-size:.9rem;line-height:1.6;color:var(--ink-faint)}