:root {
  --brand: #0F7B55;
  --brand-dark: #0A5C40;
  --gold: #B98B32;
  --red: #D6453B;
  --ink: #0F2E22;
  --muted: #5C6F66;
  --line: #E2EBE5;
  --bg: #F5F9F6;
}
* { box-sizing: border-box; }
/* 维吾尔语字体：ALKATIP UI（甲方指定）。仅维吾尔语界面生效。 */
@font-face {
  font-family: "ALKATIP Esliye";
  src: url("../media/web/fonts/alkatip-esliye.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
html[lang="ug"], html[lang="ug"] body, html[lang="ug"] input, html[lang="ug"] select, html[lang="ug"] button,
html[lang="ug"] textarea {
  font-family: "ALKATIP Esliye", "UKIJ Tuz", "ALKATIP Esliye Tom", "Microsoft Uighur", Tahoma, sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .site-head .wrap, html[dir="rtl"] .hero, html[dir="rtl"] .card, html[dir="rtl"] .site-foot { text-align: right; }
html[dir="rtl"] .pcard .body, html[dir="rtl"] .video-item .body { text-align: right; }
html[dir="rtl"] .price, html[dir="rtl"] .badge { direction: ltr; unicode-bidi: embed; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans", system-ui, sans-serif;
  line-height: 1.65;
}
a { color: var(--brand-dark); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.site-head {
  position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.site-nav { display: flex; gap: 18px; flex: 1; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 15px; padding: 6px 2px; }
.site-nav a.on { color: var(--brand-dark); font-weight: 700; border-bottom: 2px solid var(--brand); }
.head-actions { display: flex; gap: 10px; align-items: center; }
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; text-decoration: none; font-size: 14px; cursor: pointer;
}
.btn.ghost { background: #fff; color: var(--brand-dark); }
.hero { background: linear-gradient(135deg, #0F7B55, #14A06E); color: #fff; padding: 64px 0; }
.hero h1 { font-size: 40px; margin: 0 0 12px; }
.hero p { font-size: 17px; opacity: .95; max-width: 720px; margin: 0 0 22px; }
.hero .btn { background: #fff; color: var(--brand-dark); border-color: #fff; }
.hero .btn.ghost { background: transparent; color: #fff; }
section.block { padding: 44px 0; }
section.block h2 { font-size: 26px; margin: 0 0 8px; }
section.block .sub { color: var(--muted); margin: 0 0 22px; }
.grid { display: grid; gap: 18px; }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.pcard { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.pcard .thumb {
  height: 190px; background: linear-gradient(135deg, #E8F4EE, #CFE9DC) center/cover no-repeat;
}
.pcard .body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.price { color: #C0392B; font-weight: 700; font-size: 19px; }
.row-actions { margin-top: auto; display: flex; gap: 10px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; background: #fff;
}
.video-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.video-item video, .video-item img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.video-item .body { padding: 14px 16px 18px; }
.site-foot { background: #0F2E22; color: #D6E4DC; margin-top: 40px; padding: 30px 0; font-size: 13.5px; }
.site-foot a { color: #B9E3CD; }
.site-foot .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.badge { display: inline-block; background: #E8F4EE; color: var(--brand-dark); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.note { color: var(--muted); font-size: 13px; }
.loading { padding: 40px 0; color: var(--muted); }
@media (max-width: 900px) {
  .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .site-nav { display: none; }
}
@media (max-width: 620px) {
  .grid.c4, .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
  .site-head .wrap { height: auto; padding: 10px 16px; flex-wrap: wrap; }
}

/* ==================================================================
   P2 设计稿落地（WorkBuddy 2026-09-27）· PC 官网 6 页（画布 1440）
   来源：UI设计/官网-P2-设计稿源文件.html + 官网-P2-标注.md
   ================================================================== */

/* ---- 顶部导航：白底 72 高 + 选中浅绿胶囊 ---- */
.site-head{background:#fff;border-bottom:1px solid #E4ECE7}
.site-head .wrap{height:72px;gap:24px}
.brand{font-size:17px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:var(--brand);font-size:16px}
.site-nav{gap:6px}
.site-nav a{font-size:14.5px;color:#6E7C74;padding:8px 14px;border-radius:999px;border-bottom:none}
.site-nav a.on{background:#E8F4EE;color:var(--brand);font-weight:700;border-bottom:none}
.site-nav a:hover{background:#F4F7F3}

/* ---- Hero：120deg 渐变 + 右侧玻璃卡 ---- */
.hero{background:linear-gradient(120deg,var(--brand),var(--brand-dark));padding:52px 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.07)}
.hero::after{content:"";position:absolute;right:180px;bottom:-120px;width:220px;height:220px;border-radius:50%;
  background:rgba(185,139,50,.18)}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:38px;line-height:1.35;margin:0 0 14px}
.hero .ht{font-size:16.5px;line-height:1.9;color:#EAF6EF;margin:0 0 10px;max-width:none}
.hero .hs{font-size:13px;color:#BFE3CF;margin:0 0 22px}
.hero .acts{display:flex;gap:12px}
.hero .btn{height:48px;font-size:15px}
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hcard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:16px;
  padding:14px;display:flex;align-items:center;gap:10px;color:#fff;min-height:74px}
.hcard .em{font-size:22px}
.hcard b{font-size:14px}
.hcard span{font-size:11.5px;color:#CFEADD}

/* ---- 区块与栅格 ---- */
section.block{padding:56px 0}
section.block h2{font-size:26px;margin:0 0 6px}
section.block .sub{font-size:13.5px;color:#6E7C74;margin:0 0 24px}
.grid.c4{grid-template-columns:repeat(4,1fr);gap:22px}
.grid.c3{grid-template-columns:repeat(3,1fr);gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr);gap:22px}

/* ---- 保障卡（图标圆 56） ---- */
.card.trust{text-align:center;padding:24px 18px}
.card.trust .em{width:56px;height:56px;border-radius:50%;background:#E8F4EE;display:flex;align-items:center;
  justify-content:center;font-size:26px;margin:0 auto 12px}
.card.trust h3{font-size:16px;margin:0 0 8px}
.card.trust p{font-size:12.5px;line-height:1.8;color:#6E7C74;margin:0}

/* ---- 商品卡 ---- */
.pcard .thumb{height:190px;display:flex;align-items:center;justify-content:center;font-size:46px;position:relative}
.pcard .body{gap:6px;padding:16px}
.pcard h3{font-size:15.5px;font-weight:700;line-height:1.4;margin:0}
.pcard .note{font-size:11.5px;color:#6E7C74}
.pcard .price{font-size:18px;font-weight:800;color:var(--red)}
.pcard .price .note{font-size:11.5px}
.pcard .btn{height:36px;font-size:13px;padding:0 18px}

/* ---- 视频卡（封面 200） ---- */
.video-item .video-cover,.video-item video,.video-item img{height:200px;aspect-ratio:auto;object-fit:cover}
.video-item .body{padding:16px}
.video-item h3{font-size:15.5px;font-weight:700;margin:0 0 6px}
.video-item .note{font-size:12px;line-height:1.7}
.video-item .thumb{height:200px;display:flex;align-items:center;justify-content:center;font-size:40px;
  background:linear-gradient(135deg,#DFF0E7,#C9E3D5)}

/* ---- 内页 pagehero（120deg 渐变条） ---- */
.pagehero{background:linear-gradient(120deg,var(--brand),var(--brand-dark));color:#fff;padding:40px 0}
.pagehero h1{font-size:30px;margin:0 0 6px}
.pagehero p{font-size:14px;color:#CFEADD;margin:0}

/* ---- 图文卡（doc）与温馨提示 ---- */
.card.doc h3{font-size:17px;font-weight:700;margin:0 0 8px}
.card.doc p{font-size:13.5px;line-height:2;color:#3D4A43;margin:0;white-space:pre-wrap}
.card.doc.brand{border-inline-start:3px solid var(--gold);padding-inline-start:15px}
.warn{background:#FFFDF6;border:1px solid #EADFC4;border-radius:14px;padding:18px}
.warn h3{font-size:14.5px;margin:0 0 8px}
.warn p{font-size:12.5px;line-height:1.9;color:#5C6F66;margin:0}

/* ---- 筛选行（产品中心） ---- */
.filters{gap:12px;align-items:center;margin-bottom:24px}
.filters input{width:300px;height:44px;border-radius:999px;border:1px solid #E4ECE7;padding:0 16px}
.filters select{height:44px;border-radius:10px;border:1px solid #E4ECE7;padding:0 12px;background:#fff}
.filters .badge{font-size:12.5px;background:#fff;border:1px solid #E4ECE7;color:#6E7C74;padding:6px 12px}

/* ---- 页脚（深绿 3 栏） ---- */
.site-foot{background:var(--brand-dark);color:#B9CFC2;padding:36px 0;margin-top:0}
.site-foot a{color:#8FD4B4}
.site-foot .cols{grid-template-columns:1.2fr 1fr 1.2fr;gap:40px}
.site-foot b{color:#fff}

/* ---- 维语版：正文字号降 1~2px，防溢出 ---- */
html[lang="ug"] .hero h1{font-size:32px;line-height:1.5}
html[lang="ug"] .hero .ht{font-size:15px;line-height:2}
html[lang="ug"] .pcard h3{font-size:14px}
html[lang="ug"] .card.doc p,html[lang="ug"] .warn p{font-size:12.5px}
html[lang="ug"] .site-nav a{font-size:13.5px}

@media (max-width: 1100px) {
  .hero .wrap{grid-template-columns:1fr}
  .hcards{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 900px) {
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
  .hcards{grid-template-columns:repeat(2,1fr)}
  .filters input{width:100%}
}
@media (max-width: 620px) {
  .grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr}
  .site-foot .cols{grid-template-columns:1fr}
}

/* ============ 备案条（ICP + 公安备案） ============ */
.site-foot .beian{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8FA89B;text-align:center}
.site-foot .beian a{color:#8FA89B;text-decoration:none}
.site-foot .beian a:hover{color:#B9E3CD}