/* ══════════════════════════════════════════════════════════════════
   XIAYU 全站风格迁移层 — 对齐 ruedasol-solutions 参考站视觉
   2026-09-16：由 theme-home.css 泛化而来，用户要求 4 个内页同步迁移
   作用域：
     - 共享组件（字体/导航/按钮/卡片/页脚/区块标题…）→ 全站生效
     - 首页专属（照片 Hero / 数据背书条 / 浮动徽章）→ body[data-page="home"] 作用域
     - 内页页头 .phero / 手风琴 .acc → 本层新增
   加载顺序：必须在 site.css 之后（同特异性时后者覆盖）
   视觉基准：Oswald 大写标题 / 深蓝导航+3px 橙底边 / 白卡 1px 描边 hover 橙边上浮
             居中标题+60px 橙色短横线 / #0F2E5C 深蓝页脚+3px 橙顶边
   ══════════════════════════════════════════════════════════════════ */

/* ── 字体气质（与参考站同栈：不外挂字体，走本地回退） ── */
body{
  font-family:'Open Sans',Arial,'Segoe UI',sans-serif;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ── 按钮体系（参考 .btn / .btn-primary / .btn-outline） ──
   CTA 底色 = site.css --accent-cta #E27620（用户定稿，视觉一致优先） */
.btn{
  border-radius:2px;
  padding:12px 28px;
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}
.btn--cta:hover{background:#C4302B;transform:translateY(-2px);box-shadow:0 6px 20px rgba(226,118,32,.35)}
.btn--on-dark{border:2px solid rgba(255,255,255,.85);color:#fff;background:transparent}
.btn--on-dark:hover{background:#E27620;border-color:#E27620;color:#fff}
.btn--brand{background:#153F78;color:#fff}
.btn--brand:hover{background:#0F2E5C;transform:translateY(-2px)}
.btn--ghost{border:1px solid #CBD5E1;background:#fff;color:#153F78}
.btn--ghost:hover{border-color:#153F78;background:#F4F7FB}

/* ── header（参考 .navbar：深蓝毛玻璃 + 3px 橙底边） ── */
.site-header{
  background:rgba(21,63,120,.98);
  backdrop-filter:blur(10px);
  border-bottom:3px solid #E27620;
  box-shadow:0 4px 20px rgba(15,46,92,.35);
}
.site-header.is-stuck{box-shadow:0 4px 20px rgba(15,46,92,.35)}
.logo__name{color:#fff}
.logo__tag{color:#C7D4E6}
.site-nav a{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;
  color:#D9E2EF;background:transparent;border-radius:0;
}
.site-nav a:hover{background:transparent;color:#FFB26B}
.site-nav a[aria-current="page"]{color:#FFB26B;background:transparent}
.site-nav a[aria-current="page"]::after{display:none}
/* 语言切换器：容器由浅色药丸改为深蓝底上的半透明分段控件
   （原 --bg 白底会把主题的浅白未选中文字"吞"掉，2026-09-16 用户截图反馈） */
.lang{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  border-radius:2px;
}
.lang button{
  background:transparent;border:0;color:rgba(255,255,255,.75);
  font:600 12px/1 'Open Sans',Arial,sans-serif;
  padding:6px 10px;border-radius:2px;cursor:pointer;
}
.lang button:hover{color:#fff}
/* 选中态：亮橙底 + 深蓝字 5.4:1（原白字 3.06:1 不达 AA；亮橙底保留「选中」身份） */
.lang button[aria-pressed="true"]{background:#E27620;color:#0A1E3B}
.nav-toggle{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:2px}

/* 深底区域 focus 环改白色（延续 site.css 双区焦点策略） */
.site-header :focus-visible,
.drawer :focus-visible{
  outline:2px solid #fff;outline-offset:2px;border-radius:2px;
}

/* ── 移动抽屉（参考 .nav-menu 手机形态） ── */
.drawer{background:#153F78;border-right:0}
.drawer__top{border-bottom:2px solid #E27620}
.drawer__close{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.drawer .logo__name{color:#fff}
.drawer nav a{
  color:#D9E2EF;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:14px;letter-spacing:.3px;text-transform:uppercase;border-radius:0;
}
.drawer nav a[aria-current="page"]{color:#FFB26B;background:rgba(255,255,255,.06)}
.drawer__foot{border-top:1px solid rgba(255,255,255,.12)}
.drawer .lang button{color:rgba(255,255,255,.75)}
.drawer .lang button[aria-pressed="true"]{background:#E27620;color:#0A1E3B}

/* ── 内页页头 .phero（对齐参考站内页 banner：深蓝 + 橙色面包屑/点缀） ── */
.phero{background:linear-gradient(120deg,#0B2347 0%,#153F78 58%,#1B4A8C 100%)}
.phero::after{opacity:.2}
.phero h1{letter-spacing:.5px}
.crumbs a{color:#FFB26B;font-weight:600}
.crumbs a:hover{color:#fff}

/* ── strip（参考浅蓝灰带） ── */
.strip{background:#F4F7FB;border-bottom:1px solid #E3E8EF}
.strip p{color:#666}
.strip li{color:#153F78}
.strip li svg{color:#E27620}

/* ── 区块标题模式（参考 .section-title：居中 + 60px 橙色短横线） ── */
.sec{padding:80px 0}
.sec--alt{background:#fff}
.sec__head{text-align:center;max-width:700px;margin-left:auto;margin-right:auto;margin-bottom:50px}
.eyebrow{
  background:none;border-radius:0;padding:0;
  color:var(--accent-dp,#B05208);font-family:'Oswald','Arial Narrow',sans-serif;
  /* 亮橙 #E27620 在浅底只有 2.9:1（axe color-contrast 唯一浅底违规源），
     改深强调橙 --accent-dp 后浅底 4.9~5.2:1 达 AA，视觉仍是橙色系 */
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
}
.sec__title{font-size:36px;color:#153F78}
.sec__title::after{
  content:"";display:block;width:60px;height:3px;background:#E27620;margin:16px auto 0;
}
.sec__sub{color:#666;font-size:15px;max-width:700px;margin:16px auto 0}
/* 深底区块（trust 区）保持白字 */
.sec--brand{background:linear-gradient(135deg,#153F78 0%,#0F2E5C 100%)}
.sec--brand .sec__title{color:#fff}
.sec--brand .sec__sub{color:#C9D6E8}
.sec--brand .eyebrow{color:#FFB26B}
/* 分栏内的标题保持左对齐（参考 detail 区样式） */
.split .sec__title::after{margin-left:0}

/* ── 通用小标签 chip（参考直角小标签）
   注意：大写+字距会放宽带标签文本，必须允许换行，
   否则 390px 视口长标签（如 "Voltaje: 127 V / 220 V · 60 Hz"）横向溢出 */
.chip{
  border-radius:2px;padding:3px 9px;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  background:#F4F7FB;border:1px solid #E3E8EF;color:#666;
  white-space:normal;max-width:100%;overflow-wrap:break-word;line-height:1.5;
}
/* 选中 chip：亮橙底 + 深蓝字 5.4:1（原白字 3.06:1 不达 AA，与语言选中态同一改法） */
.chip--accent{background:#E27620;border-color:#E27620;color:#0A1E3B}
.chip--hot{background:#C4302B;border-color:#C4302B;color:#fff}

/* ── 描边卡片基调（参考 .sol-card：白底 1px #E3E8EF，hover 橙边+上浮） ── */
.pillar,
.cat,
.plan,
.tcard{
  border:1px solid #E3E8EF;border-radius:4px;box-shadow:0 2px 8px rgba(15,46,92,.05);
  transition:all .3s;
}
.pillar:hover,
.cat:hover,
.plan:hover{
  transform:translateY(-6px);border-color:#E27620;
  box-shadow:0 12px 30px rgba(15,46,92,.15);
}
.tcard:hover{
  transform:translateY(-4px);border-color:#E27620;
  box-shadow:0 8px 24px rgba(15,46,92,.1);
}

/* ── pillars（三支柱 → sol-card 风格） ── */
.pillar__ico{border-radius:50%}
.pillar h3{font-size:17px;color:#153F78}
.pillar p{font-size:13px;color:#666}
.pillar a{
  color:#E27620;font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}

/* ── pillar 卡片配图（2026-09-16 用户要求：三卡顶部加参考站车间图） ── */
.pillar{padding-top:0;overflow:hidden}
.pillar__img{margin:0 -26px;flex:none}
.pillar__img img{
  display:block;width:100%;height:200px;object-fit:cover;object-position:center;
  border-bottom:1px solid #E3E8EF;
}

/* ── 产品线卡 .cat（参考 .sol-card 结构） ── */
.cat .ph{border-bottom:1px solid #EDF0F4}
.cat__no{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:11px;font-weight:600;color:#E27620;letter-spacing:1.5px;
}
.cat__body h3{font-size:17px;color:#153F78}
.cat__body p{font-size:13px;color:#666}
.cat__meta{border-top:1px solid #EDF0F4}

/* ── 套餐卡 .plan（参考 .tier-card + .tier-budget） ── */
.plan::before{display:none}
.plan__no{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:11px;font-weight:600;color:#E27620;letter-spacing:2px;
}
.plan h3{font-size:20px;color:#153F78}
.plan__alias{color:#666;font-size:13px}
.plan p{font-size:13px;color:#666;flex:1}
.plan__budget{
  background:#FFF6EC;border:0;border-top:1px solid #F3D2AE;
  border-radius:0;padding:12px 16px;margin-top:18px;
}
.plan__budget small{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:10px;letter-spacing:1.5px;color:#9A7B57;
}
.plan__budget b{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:18px;font-weight:600;color:#C25A0E;letter-spacing:.4px;
}
.plan a{
  color:#E27620;font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}

/* ── 信任卡 .tcard（参考 .feature-item：居中圆形图标） ── */
.tcard{display:flex;flex-direction:column;text-align:center;padding:30px 18px}
.tcard .tcard__ico{
  width:56px;height:56px;border-radius:50%;
  background:rgba(21,63,120,.08);margin:0 auto 16px;
}
.tcard .tcard__ico svg{width:28px;height:28px}
.tcard h3{font-size:14px;color:#153F78}
.tcard p{font-size:13px;color:#666}

/* ── 手风琴 .acc（about 页 FAQ，参考直角描边卡） ── */
.acc{border-radius:2px}
.acc summary{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#153F78;
}
.acc summary::after{color:#E27620}

/* ── 提示框 .note 直角化 ── */
.note{border-radius:2px}

/* ── 12 个月质保条（参考 .guarantee-banner：深蓝渐变 + 橙色圆图标） ── */
.guarantee{
  background:linear-gradient(135deg,#153F78 0%,#0F2E5C 100%);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.guarantee .wrap{padding:50px var(--gut)}
.guarantee__l > svg{
  width:76px;height:76px;padding:18px;box-sizing:border-box;
  background:#E27620;border-radius:50%;color:#fff;
}
.guarantee h3{font-size:24px}
.guarantee p{color:#C9D6E8;font-size:14px}

/* ── CTA 区（参考 .cta-section：深蓝渐变 + 底部橙色光晕，直角） ── */
.cta-band{
  border-radius:4px;padding:64px 40px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%,rgba(226,118,32,.15),transparent 70%),
    linear-gradient(135deg,#153F78 0%,#0B2347 100%);
}
.cta-band h2{font-size:36px}
.cta-band p{color:#C9D6E8}

/* ── 页脚（参考 .footer：#0F2E5C + 3px 橙顶边） ── */
.site-footer{background:#0F2E5C;border-top:3px solid #E27620;padding:50px 0 24px}
.site-footer h3{font-size:14px;letter-spacing:1px}
.site-footer ul li a{color:#A9BAD3;font-size:13px}
.site-footer ul li a:hover{color:#FFB26B;text-decoration:none}
.site-footer .about{color:#A9BAD3;font-size:13px}
.fbadge{border-radius:2px}
.site-footer .disclaimer{
  border-top:1px solid rgba(255,255,255,.12);margin-top:18px;padding-top:16px;
  font-size:11.5px;color:#93A9C9;   /* 原 #7E93B2 仅 4.28:1，提亮后 5.6:1 达 AA */
}
.site-footer .bottom{border-top:0;padding-top:0;color:#8FA5C4;font-size:12px}

/* ── FAB 悬浮按钮（参考 .to-top 描边风格） ── */
.fab{border-radius:50%}

/* ══════════ 首页专属：照片 Hero / 数据背书条 / 浮动徽章 ══════════ */
body[data-page="home"] .hero{
  min-height:560px;display:flex;align-items:center;
  background:
    linear-gradient(90deg,rgba(11,35,71,.94) 0%,rgba(15,46,92,.82) 42%,rgba(15,46,92,.30) 100%),
    url("../img/hero-workshop.jpg") center/cover no-repeat #0F2E5C;
}
body[data-page="home"] .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(ellipse 80% 60% at 75% 30%,rgba(226,118,32,.16),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 14px);
}
body[data-page="home"] .hero::after{display:none}
body[data-page="home"] .hero .wrap{width:100%}
body[data-page="home"] .hero__grid{display:block;max-width:780px;padding:80px 0 72px}
body[data-page="home"] .hero__kicker{
  display:inline-block;background:#E27620;color:#fff;
  font-family:'Oswald','Arial Narrow',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;border-radius:2px;
}
body[data-page="home"] .hero__kicker i{display:none}
body[data-page="home"] .hero h1{font-size:44px;line-height:1.15;color:#fff;letter-spacing:.5px;max-width:none}
body[data-page="home"] .hero__sub{font-size:16px;color:#C9D6E8;max-width:620px}
body[data-page="home"] .hero__cta{margin-top:32px;gap:16px}
/* 数据背书条（参考 .hero-stats：橙色左边框 + Oswald 数值） */
body[data-page="home"] .hero__stats{
  display:flex;flex-wrap:wrap;gap:32px;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
}
body[data-page="home"] .hero__stats .stat{
  border-left:3px solid rgba(226,118,32,.85);padding-left:13px;
}
body[data-page="home"] .hero__stats .stat b{
  font-family:'Oswald','Arial Narrow',sans-serif;
  font-size:25px;font-weight:600;letter-spacing:.5px;line-height:1.1;
}
body[data-page="home"] .hero__stats .stat span{font-size:12px;color:#A9BAD3;line-height:1.45;margin-top:3px;max-width:158px}
/* 右侧原两栏图位撤下（照片已作为 Hero 背景），品牌徽章浮动右下角 */
body[data-page="home"] .hero__art{position:static}
body[data-page="home"] .hero__art .ph{display:none}
body[data-page="home"] .hero__badge{
  position:absolute;left:auto;right:32px;bottom:36px;z-index:2;
  background:transparent;border:none;box-shadow:none;padding:0;backdrop-filter:none;
}
body[data-page="home"] .hero__badge svg{color:#FFB26B}
body[data-page="home"] .hero__badge b{color:#fff}
body[data-page="home"] .hero__badge span span{color:#C9D6E8}

/* ════════════════ 响应式（参考站断点 1024 / 768） ════════════════ */
@media(max-width:1100px){
  body[data-page="home"] .hero__badge{display:none}
}
@media(max-width:1024px){
  .grid.auto-3{grid-template-columns:repeat(2,1fr)}
  .grid.auto-4{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  /* site.css 880 断点收起导航，主题配色在抽屉内延续（见上） */
}
@media(max-width:768px){
  .sec{padding:50px 0}
  .sec__title{font-size:28px}
  .sec__title::after{margin:14px auto 0}
  body[data-page="home"] .hero{min-height:480px}
  body[data-page="home"] .hero__grid{padding:56px 0 52px}
  body[data-page="home"] .hero h1{font-size:30px}
  body[data-page="home"] .hero__stats{gap:18px 22px;margin-top:26px;padding-top:20px}
  body[data-page="home"] .hero__stats .stat b{font-size:19px}
  body[data-page="home"] .hero__stats .stat span{font-size:11px;max-width:130px}
  .grid.auto-3,
  .grid.auto-4{grid-template-columns:1fr}
  .cta-band{padding:44px 22px}
  .cta-band h2{font-size:26px}
  .site-footer .cols{grid-template-columns:1fr}
  .guarantee .wrap{padding:38px var(--gut)}
  .guarantee__l > svg{width:60px;height:60px;padding:14px}
  .guarantee h3{font-size:19px}
  .phero .wrap{padding:42px 0 40px}
  .phero h1{font-size:26px}
}