:root{
  --bg:#ffffff; --ink:#1a1a1a; --muted:#666; --line:#e6e6e6;
  --brand:#d62828; --brand-ink:#1c1c1c; --accent:#f77f00;
  --radius:14px; --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic","Noto Sans SC",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
header.site{position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-weight:800; letter-spacing:-.5px; font-size:20px}
.logo span{color:var(--brand)}
.nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center}
.nav a{font-weight:600; font-size:15px; color:#222}
.nav a:hover{color:var(--brand)}
.langs{display:flex; gap:8px; align-items:center; font-size:13px}
.langs a{padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:#444}
.langs a.active{background:var(--brand); color:#1c1c1c; border-color:var(--brand); font-weight:700}

/* Hero：醒目文字，不用轮播 */
.hero{padding:70px 0 50px; background:linear-gradient(180deg,#fff0eb,#ffffff)}
.hero h1{font-size:clamp(28px,4.4vw,52px); line-height:1.15; margin:0 0 16px; font-weight:800; letter-spacing:-.5px}
.hero p{font-size:18px; color:var(--muted); max-width:720px; margin:0 0 26px}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.badge{background:#fff; border:1px solid var(--line); padding:10px 16px; border-radius:999px; font-weight:700; font-size:14px}
.badge.hot{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn{display:inline-block; background:var(--ink); color:#fff; padding:14px 26px; border-radius:999px; font-weight:700; font-size:16px}
.btn:hover{opacity:.9}
.btn.brand{background:var(--brand); color:#fff}

section.block{padding:60px 0}
.section-title{font-size:clamp(22px,3vw,34px); font-weight:800; margin:0 0 8px}
.section-sub{color:var(--muted); margin:0 0 30px}
.grid{display:grid; gap:22px}
.products{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.2s}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px)}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.card .body{padding:16px}
.card h3{margin:0 0 6px; font-size:17px}
.card .moq{color:var(--brand); font-weight:700; font-size:14px}
.two{grid-template-columns:1fr 1fr}
.feature{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px}
.feature .dot{width:10px; height:10px; border-radius:50%; background:var(--brand); margin-top:8px; flex:0 0 auto}

form.inquiry{display:grid; gap:14px; max-width:640px}
form.inquiry label{font-weight:600; font-size:14px}
form.inquiry input,form.inquiry textarea,form.inquiry select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fff
}
form.inquiry .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ok{background:#eafaf0; border:1px solid #b7e4c7; color:#1b7a3d; padding:12px 14px; border-radius:10px; font-weight:600}

.bloglist{display:grid; gap:18px}
.post{border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.post h3{margin:0 0 8px}
.post .meta{color:var(--muted); font-size:13px; margin-bottom:8px}
.faq-item{border-bottom:1px solid var(--line); padding:14px 0}
.faq-item h4{margin:0 0 6px}
footer.site{border-top:1px solid var(--line); padding:28px 0 34px; color:var(--muted); font-size:14px; background:#fafafa}
.fwrap{display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; justify-content:space-between}
.fbrand{display:flex; flex-direction:column; gap:2px; line-height:1.3}
.fbrand b{font-size:17px; color:var(--ink); font-weight:800}
.fbrand b span{color:var(--brand)}

.fcontact{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.fbrand .fco{color:var(--muted); font-size:13px}
.f-wa{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:6px 12px}
.f-wa img{width:52px; height:52px; object-fit:contain; border-radius:6px; flex:none}
.f-wa span{font-size:13px; line-height:1.35; color:var(--ink)}
.f-wa span b{color:var(--brand)}
.f-mail{color:var(--accent); font-weight:700; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px}
.f-mail:hover{text-decoration:none; border-color:var(--accent)}
.flinks a{color:var(--accent); font-weight:600}
.flinks a:hover{text-decoration:underline}
.flinks .fdot{color:var(--line); margin:0 2px}
.fcopy{flex-basis:100%; text-align:center; border-top:1px solid var(--line); padding-top:14px; margin-top:6px}

/* 通用面板卡片 */
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.panel{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff}
.panel h3{margin:0 0 8px; font-size:18px}
.panel p{margin:0; color:var(--muted)}
.center{text-align:center; margin-top:26px}
.section-sub{color:var(--muted); margin:0 0 26px}

/* 信任条 / 市场 */
.trust{padding:26px 0; border-bottom:1px solid var(--line)}
.markets-mini{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.markets-mini .tm{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 18px; font-size:14px; color:#444}
.markets-mini .tm b{color:var(--brand-ink)}

/* 认证徽章 */
.cert-row{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 6px}
.cert-row span{background:#1c1c1c; color:#fff; padding:10px 18px; border-radius:999px; font-weight:700; font-size:14px}
[dir="rtl"] .cert-row{flex-direction:row-reverse}

/* 流程步骤 */
.steps .step-n{width:34px; height:34px; border-radius:50%; background:var(--brand); color:#1c1c1c; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:10px}

/* CTA 板块 */
.cta{background:linear-gradient(180deg,#fff0f0,#ffffff); text-align:center}
.cta .section-title{font-size:clamp(22px,3vw,34px)}

/* 产品规格表 */
table.specs{width:100%; border-collapse:collapse; margin:14px 0 18px}
table.specs td{border-bottom:1px solid var(--line); padding:10px 4px; font-size:15px}
table.specs td:first-child{color:var(--muted); width:42%}

/* 面包屑 */
.breadcrumb{font-size:13px; color:var(--muted); padding:18px 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:4px}
.breadcrumb a{color:#555}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{color:#bbb; margin:0 4px}
[dir="rtl"] .breadcrumb{flex-direction:row-reverse}
[dir="rtl"] .breadcrumb .sep{transform:scaleX(-1)}

/* WhatsApp 二维码 */
.wa-qr{display:inline-block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; margin-top:12px}
.wa-qr img{width:160px; height:160px; object-fit:contain}
.wa-qr .cap{font-size:13px; color:var(--muted); margin-top:8px}

/* 有序列表 / 联系信息 */
.olist{margin:10px 0; padding-left:20px}
.olist li{margin:6px 0; color:#333}
.contact-info{align-self:start}
.contact-info p{margin:8px 0}
.stats-cards .stat .big{font-size:34px; font-weight:800; color:var(--brand-ink)}
[dir="rtl"] .olist{padding-left:0; padding-right:20px}

/* RTL 适配 */
[dir="rtl"] body{direction:rtl}
[dir="rtl"] .nav ul{flex-direction:row-reverse}
[dir="rtl"] form.inquiry .row{grid-template-columns:1fr 1fr}

@media(max-width:760px){
  .nav ul{display:none}
  .two{grid-template-columns:1fr}
  .grid.cols4{grid-template-columns:1fr 1fr}
  .grid.cols3{grid-template-columns:1fr}
  form.inquiry .row{grid-template-columns:1fr}
  .hero{padding:48px 0 36px}
}
