/* ============================================================
   PREMIUM V5 — 首页整体精修（2026-08-20）
   审计驱动：层级强化 / 字体 scale / 间距节奏 / 颜色纪律 / 真实产品图分类
   设计语言：深蓝 #0F2A43 · 橙 #FF8A3D · 金 #C9A227 · 暖纸底
   ============================================================ */
:root{
  --gold:#C9A227;
}

/* ---------- 1. 字体 scale & 行距 ---------- */
body{font-size:15.5px}
.hero-slide h1{font-size:clamp(40px,4.6vw,56px);line-height:1.08;letter-spacing:-.5px}
.hero-slide h1 em{font-size:.72em;color:var(--c-coral);font-style:normal;font-weight:600;letter-spacing:.5px}
.hero-kicker{font-size:15px;letter-spacing:4px;text-transform:uppercase;font-weight:600}
.hero-slide p{font-size:17px;line-height:1.6;max-width:560px;margin:18px 0 30px}
.sec-title{font-size:clamp(28px,3.3vw,38px);line-height:1.12;letter-spacing:-.4px}
/* About 页横幅 */
.about-banner{max-width:1080px;margin:0 auto 44px;padding:0 24px}
.about-banner img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 20px 50px rgba(15,42,67,.18)}
/* About 页 syloon 式：COMPANY INTRODUCTION 风格 */
.page-hero-light{background:#F4F4F2;color:#1B1F26;padding:56px 24px 52px;border-bottom:none}
.page-hero-light::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(74,144,226,.14) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.page-hero-light h1{font-size:46px;font-weight:700;letter-spacing:-.5px;text-transform:uppercase;color:#1B1F26}
.page-hero-light p{color:rgba(27,31,38,.55);max-width:640px;margin:10px auto 0;font-size:15px}
.container-dots{background-image:radial-gradient(rgba(74,144,226,.14) 1px,transparent 1px);background-size:26px 26px}
.about-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:start;padding:40px 0 72px}
.about-content{font-size:16px;line-height:1.9;color:rgba(27,31,38,.8)}
.about-content h2{font-size:24px;margin:34px 0 12px;color:#1B1F26;font-weight:600}
.about-content p{margin-bottom:16px}
.about-content ul{padding-left:22px;margin-bottom:20px}
.about-content li{margin-bottom:10px}
.about-media{position:sticky;top:110px}
.about-media-box{aspect-ratio:16/9;background:#0D0D0D;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 44px rgba(15,42,67,.16);overflow:hidden;position:relative}
.about-media-box img,.about-media-box video{width:100%;height:100%;object-fit:cover}
.about-media-placeholder{text-align:center;color:#fff}
.about-media-placeholder .play-btn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;cursor:pointer;transition:transform .25s}
.about-media-placeholder .play-btn:hover{transform:scale(1.08)}
.about-media-placeholder .play-tri{width:0;height:0;border-left:20px solid #0F2A43;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}
.about-media-placeholder p{font-size:13px;font-weight:500;color:rgba(255,255,255,.75);letter-spacing:1px;text-transform:uppercase}
.about-media-placeholder span{display:none}
@media (max-width:900px){.about-layout{grid-template-columns:1fr;gap:30px}.about-media{position:static}}
/* 分类区主标题：syloon 风格（大号居中·粗黑·无衬线） */
.cats-showcase .sec-head{text-align:center}
.cats-showcase .sec-title{font-size:clamp(36px,4.5vw,56px);font-weight:700;letter-spacing:-1px;line-height:1.08;color:#1B1F26;margin:0 auto;font-family:Manrope,'Inter',system-ui,sans-serif;max-width:none}
.sec-label{font-size:13px;letter-spacing:3.5px;text-transform:uppercase;color:var(--c-coral);font-weight:600}
.sec-sub{font-size:16.5px;line-height:1.65;color:rgba(15,42,67,.68);max-width:640px}
.sec-head{margin-bottom:36px}
section{padding:64px 0}

/* ---------- 2. hero 内容层级 ---------- */
.hero-content{padding-left:8px}
.hero-btns .btn-primary,.hero-btns .btn-ghost{padding:14px 30px;font-size:15px;border-radius:10px}

/* ---------- 3. 分类视觉：syloon 式全居中 16:9 大图 + tab 切换 ---------- */
.cats-showcase{max-width:1200px;margin:0 auto;text-align:center;min-height:760px;position:relative}
.cat-panel{display:none}
.cat-panel.active{display:block !important;animation:catFade .5s ease}
@keyframes catFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cat-hero{display:block !important;text-align:center}
.cat-copy{text-align:center;margin-bottom:28px}
.cat-visual{position:relative;overflow:hidden;background:linear-gradient(135deg,#0F2A43,#1B3A5C);aspect-ratio:16/9;border-radius:8px;box-shadow:0 28px 60px rgba(15,42,67,.22);margin:0 auto;max-width:1080px}
.cat-visual img{position:absolute !important;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.cat-panel:hover .cat-visual img{transform:scale(1.04)}
.cat-copy h3{font-size:40px;line-height:1.1;margin-bottom:14px;font-weight:600;letter-spacing:-.01em}
.cat-copy p{font-size:17px;line-height:1.7;color:rgba(15,42,67,.72);max-width:560px;margin:0 auto 22px}
.cat-index{font-size:13px;font-weight:700;color:var(--gold,#C9A227);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.cat-tabs{display:flex !important;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:36px}
.cat-tab{display:inline-flex !important;align-items:center;padding:12px 26px;border:1px solid rgba(15,42,67,.18);border-radius:999px;background:#fff;color:var(--c-navy,#0F2A43);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}
.cat-tab:hover{border-color:var(--c-coral,#FF8A3D);color:var(--c-coral)}
.cat-tab.active{background:var(--c-navy,#0F2A43);color:#fff;border-color:var(--c-navy)}
/* 图片左右切换箭头（覆盖在图片左右两侧中部） */
#cat-arrows{position:absolute;top:calc(50% - 10px);left:0;right:0;transform:translateY(-50%);z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 calc((100% - 1080px)/2 + 16px);box-sizing:border-box}
.cat-arrow{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--c-navy,#0F2A43);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(15,42,67,.25);transition:all .25s;display:flex;align-items:center;justify-content:center}
.cat-arrow:hover{background:var(--c-coral,#FF8A3D);color:#fff;transform:scale(1.1)}
.cat-arrow-prev{margin-right:auto}
.cat-arrow-next{margin-left:auto}
.btn-ghost-dark{padding:12px 26px;border-radius:10px;font-size:14.5px;font-weight:600}

/* ---------- 4. 服务卡：3 色 icon 循环 + 层级 ---------- */
.svc-card{border-radius:16px;padding:26px 20px}
.svc-card h3{font-size:17px;font-weight:700;letter-spacing:-.2px}
.svc-card p{font-size:13.5px;line-height:1.6;color:rgba(15,42,67,.62)}
.svc-card:nth-child(3n+1) .svc-icon{background:linear-gradient(135deg,rgba(15,42,67,.10),rgba(15,42,67,.16));border-color:rgba(15,42,67,.22)}
.svc-card:nth-child(3n+2) .svc-icon{background:linear-gradient(135deg,rgba(201,162,39,.12),rgba(201,162,39,.20));border-color:rgba(201,162,39,.30)}
.svc-card:nth-child(3n+3) .svc-icon{background:linear-gradient(135deg,rgba(255,107,74,.12),rgba(255,107,74,.20));border-color:rgba(255,107,74,.30)}

/* ---------- 5. Why 数据区 ---------- */
.why-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px 20px}
.why-item .num{font-size:44px;color:#fff;font-weight:700;line-height:1}
.why-item h3{color:rgba(255,255,255,.92);font-size:15px;letter-spacing:1.5px;text-transform:uppercase;margin-top:12px}
.why-item p{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.6;margin-top:8px}
.why-grid{gap:20px}

/* ---------- 6. CTA ---------- */
.cta .btn-primary{padding:16px 40px;font-size:16px;border-radius:12px;box-shadow:0 14px 34px rgba(255,107,74,.35)}
.cta-contact{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin:26px 0 8px}
.cta-contact span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 20px;font-size:14.5px}
.cta-contact a{color:#fff;font-weight:600}

/* ---------- 7. 分类轮播导航 ---------- */
.cat-nav-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(15,42,67,.25);color:#0F2A43;background:#fff}
.cat-nav-btn:hover{background:#0F2A43;color:#fff}
.cat-dots span.on{background:var(--gold)}

/* ---------- 8. 移动端适配 ---------- */
@media (min-width:1101px){
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
  .site-logo{justify-self:start;margin-right:0}
  .main-nav{justify-self:center;margin:0}
  .header-right{justify-self:end;display:flex;align-items:center;gap:14px}
}

/* ---------- 9. 第二行全宽搜索框 ---------- */
.search-row{max-width:1200px;margin:0 auto;padding:4px 24px 16px;display:flex;justify-content:center}
.search-form--row{width:100%;max-width:980px}
.search-form--row .search-form__field{display:flex;align-items:center;background:#fff;border:1.5px solid #E5DEC9;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(15,42,67,.05);transition:border-color .25s,box-shadow .25s}
.search-form--row .search-form__field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.search-form--row svg{margin:0 0 0 18px;color:rgba(15,42,67,.45);flex-shrink:0}
.search-form--row input{flex:1;border:none;background:transparent;padding:15px 14px;font-size:15.5px;color:var(--c-navy);outline:none;min-width:0}
.search-form--row button{background:var(--c-navy);color:#fff;border:none;padding:15px 32px;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s}
.search-form--row button:hover{background:var(--c-coral-dark,#E25C2F)}
.search-wrap,.search-toggle{display:none}

/* ---------- 10. Products 下拉 hover 强制显示（修复被覆盖的 opacity 链） ---------- */
.main-nav > ul > li:hover > .dropdown,
.main-nav > ul > li:focus-within > .dropdown{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  transition:opacity .25s ease,transform .25s ease !important;
}
.main-nav .dropdown{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(10px) !important;
}
.dropdown-l1 > li:hover > .dropdown-l2,
.dropdown-l1 > li:focus-within > .dropdown-l2{opacity:1 !important;visibility:visible !important;transform:none !important}
.dropdown-l2{opacity:0 !important;visibility:hidden !important;transform:translateX(8px) !important;transition:opacity .22s ease,transform .22s ease !important}

/* 移动端：搜索行贴边全宽 + header-right 补 order（原 .lang-switcher order 规则因包裹失效） */
@media (max-width:1100px){
  .search-row{padding:4px 16px 14px;max-width:100%}
  .search-form--row{max-width:100%}
  .search-form--row input{padding:13px 12px;font-size:15px}
  .search-form--row button{padding:13px 22px}
  .header-right{order:3;margin-left:auto}
}

/* ---------- 11. 清爽精简（对照 syloon：少文字、大留白、层级干净） ---------- */
.hero-slide p{display:none}              /* hero 副句隐（保留 SEO 文本） */
.sec-sub{display:none}                   /* 区块副标题隐（保留 SEO 文本） */
.hero-tagline{display:none}              /* hero 底部 slogan 隐 */
section{padding:56px 0}
.sec-head{margin-bottom:28px}
.sec-title{letter-spacing:-.6px}
.cat-copy h3{font-size:28px;margin-bottom:18px}
.cat-copy p{font-size:15.5px;line-height:1.6;margin-bottom:24px;max-width:460px}
.btn-ghost-dark{padding:13px 28px}
.svc-card{padding:28px 22px}
.svc-card h3{font-size:16.5px}
.svc-card p{font-size:13px;line-height:1.55;margin-top:6px}
.svc-icon{width:46px;height:46px;font-size:20px}
.why-item{padding:34px 24px}
.why-item .num{font-size:48px}
.why-item p{font-size:13px;margin-top:6px}
.cta h2{font-size:clamp(30px,3.6vw,42px)}
.cta-contact span{font-size:14px;padding:11px 18px}
.cta .btn-primary{padding:17px 44px}
@media (max-width:760px){
  section{padding:48px 0}
  .sec-head{margin-bottom:24px}
  .cat-copy h3{font-size:23px}
  .why-item .num{font-size:38px}
}
@media (max-width:760px){
  .hero-slide h1{font-size:34px}
  .cat-visual{min-height:240px}
  .cat-copy h3{font-size:24px}
  .sec-sub{font-size:15px}
  .why-item{padding:22px 16px}
  .why-item .num{font-size:36px}
  .cta-contact{gap:14px}
  .cta-contact span{width:100%;text-align:center}
}