/* =========================================================
   Kilandu EN — 排版 / 布局优化层 (2026-09-11)
   设计原则：仅“增强”，不覆盖现有品牌色与组件类；
   纯 CSS，不含任何 PHP / JS，不会引起服务器 500。
   作用：统一字号阶梯与行高、容器宽度、卡片图比例、
   按钮微交互、可见面包屑、FAQ 折叠组件、移动端响应式。
   ========================================================= */

/* ---- Inter 字体（自托管，GDPR 友好；覆盖全站，解决此前 en_css.css 未被加载的问题）---- */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../font/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../font/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --kd-maxw: 1200px;
  --kd-fs-base: 16px;
  --kd-lh: 1.78;
  --kd-sec-pad: 64px;
  --kd-radius: 8px;
  --kd-c-text: #2b2f36;
  --kd-c-muted: #6b7280;
  --kd-c-line: #e6e8ec;
  --kd-c-brand: #1f5fbf; /* 仅用于链接/强调，不替换 bg-color* 品牌色 */
}

/* 容器宽度一致性 */
.container, .container-top{ max-width: var(--kd-maxw); margin-left:auto; margin-right:auto; }

/* 基础排版 */
body{
  font-family:"Inter","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size: var(--kd-fs-base);
  line-height: var(--kd-lh);
  color: var(--kd-c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  word-break: normal;
  overflow-wrap: break-word;
}
h1,h2,h3,h4,h5,h6{ line-height:1.25; font-weight:700; color:#1f2430; margin:0 0 .6em; }
h1{ font-size: clamp(28px, 4vw, 40px); }
h2{ font-size: clamp(24px, 3vw, 32px); }
h3{ font-size: clamp(20px, 2.2vw, 24px); }
p{ margin:0 0 1em; }
a{ color: inherit; }
img{ max-width:100%; height:auto; }

/* 区块间距统一 */
.section{ padding-top: var(--kd-sec-pad); padding-bottom: var(--kd-sec-pad); }

/* 卡片图统一比例，避免列表高低不齐 */
.application-item img,
.item img,
.single-blog .blog-img img,
.product-list img,
.related-pro img,
.conpro img{
  width:100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--kd-radius);
  background:#f3f4f6;
}

/* 按钮微交互（不改动颜色类，仅加过渡与悬浮） */
.kingford-btn1, .kingford-btn3, .kingford-btn4,
a.kingford-btn1, a.kingford-btn3{
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.kingford-btn1:hover, .kingford-btn3:hover, .kingford-btn4:hover{
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* 可见面包屑（SEO 内部链接 + 用户体验） */
.kd-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:14px; color:var(--kd-c-muted);
  margin:0 0 28px; padding:14px 0; border-bottom:1px solid var(--kd-c-line);
}
.kd-breadcrumb a{ color:var(--kd-c-muted); text-decoration:none; }
.kd-breadcrumb a:hover{ color:var(--kd-c-brand); }
.kd-breadcrumb .sep{ color:#c2c7d0; }
.kd-breadcrumb .cur{ color:var(--kd-c-text); font-weight:600; }

/* FAQ 折叠组件（配合现有 .faq-section） */
.faq-block{ max-width: var(--kd-maxw); margin:0 auto; }
.faq-block h2{ text-align:center; margin-bottom:32px; }
.faq-item{
  border:1px solid var(--kd-c-line); border-radius:var(--kd-radius);
  margin-bottom:16px; overflow:hidden; background:#fff;
}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 22px; font-size:18px; font-weight:600; cursor:pointer; list-style:none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .ic{ transition: transform .2s ease; color:var(--kd-c-brand); font-weight:700; font-size:22px; line-height:1; }
.faq-item[open] .faq-q .ic{ transform: rotate(45deg); }
.faq-a{ padding:0 22px 20px; color:var(--kd-c-muted); line-height:1.85; }

/* 详情/正文排版 */
.pro-details-conts, .blog-content, .showcon{ font-size:16px; line-height:1.85; }
.pro-details-conts p, .blog-content p, .showcon p{ margin-bottom:1.1em; }

/* 响应式：栅格在平板/手机端单列，banner 与留白缩放 */
@media (max-width: 991px){
  :root{ --kd-sec-pad: 44px; }
  .col-lg-2, .col-lg-4, .col-lg-6, .col-lg-8{ width:100%; }
  .application-tit, .size40{ font-size:28px !important; }
  .about-content.pl-40,
  .conright.col-lg-6.pl-40,
  .cont.col-sm-7.col-md-6.col-lg-6.pl-40{ padding-left:0 !important; }
  .conleft-con.mr-40{ margin-right:0 !important; }
}
@media (max-width: 575px){
  .container, .container-top{ padding-left:16px; padding-right:16px; }
  h1{ font-size:26px; }
  .kd-breadcrumb{ font-size:13px; }
}