/* ============================================================
   zone-brand.css — 956231 Studio 栏目/产品页统一品牌皮肤（单一真源）
   适用：free-trial-zone.html / tech-zone.html / video-demo.html / products.html
   Token 唯一真源 = index.html :root（2026-10-07 实抓核对一致）
   原则：只管视觉，不碰任何功能 JS / data-i18n / 表单逻辑
   ============================================================ */
:root{
  --bg:#F3F2FA; --bg-soft:#FFFFFF; --fill:#EEEDFE; --sunken:#F7F6FD;
  --line:#E7E5F7; --border-brand:#CFCBF6;
  --brand:#7F77DD; --brand-deep:#3C3489; --cta:#534AB7; --cta-top:#8A83E2;
  --t1:#26215C; --t2:#534AB7; --t3:#5C5987;
  --sh1:0 1px 2px rgba(38,33,92,.07),0 4px 10px rgba(38,33,92,.06),0 14px 28px rgba(38,33,92,.065);
  --sh2:0 2px 4px rgba(38,33,92,.10),0 10px 22px rgba(38,33,92,.11),0 26px 50px rgba(38,33,92,.11);
  --ease:.12s ease;
}
*{box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  max-width:1120px;margin:0 auto;padding:0 24px 56px;
  color:var(--t1);line-height:1.7;font-size:16px;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:radial-gradient(46% 30% at 84% -4%,rgba(127,119,221,.12),transparent 60%),
             radial-gradient(40% 26% at 4% 10%,rgba(127,119,221,.08),transparent 60%),
             var(--bg);
  background-attachment:fixed;
}
a{color:var(--t2)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#4F46AE}

/* ---------- 顶部品牌横幅（与首页 hero 同语言） ---------- */
.zone-hero{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FAF9FE 55%,#F3F2FA 100%);
  border:.5px solid var(--line);border-top:0;border-radius:0 0 22px 22px;
  margin:0 -24px 26px;padding:46px 24px 38px;text-align:center;overflow:hidden;box-shadow:var(--sh1)}
.zone-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 90% at 50% -10%,rgba(127,119,221,.16),transparent 66%);pointer-events:none}
.zone-hero h1{position:relative;margin:0 0 10px;font-size:40px;font-weight:700;letter-spacing:-.024em;line-height:1.16;
  background:linear-gradient(180deg,#7D73DF 0%,#4A419F 27%,#241F58 52%,#3E3690 75%,#8E84EA 100%);
  -webkit-background-clip:text;background-clip:text;color:#3A3390;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 3px 6px rgba(38,33,92,.2))}
.zone-hero p{position:relative;margin:0;color:var(--t2);font-size:15.5px;text-shadow:0 0 .5px currentColor}

/* ---------- 通用卡片语言（与首页 .card 同源） ---------- */
.policy{background:var(--bg-soft);border:.5px solid var(--line);border-radius:18px;padding:18px 22px;margin:20px 0;box-shadow:var(--sh1)}
.policy b{color:var(--t2)}
.seo-entity{font-size:12.5px;color:var(--t3);background:var(--sunken);border:.5px solid var(--line);border-left:3px solid var(--brand);
  padding:10px 14px;margin:16px 0;line-height:1.7;border-radius:0 10px 10px 0}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:780px){.grid{grid-template-columns:1fr}}
.card{background:var(--bg-soft);border:.5px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--sh1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--border-brand)}
.card h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.4;
  background:linear-gradient(180deg,#7167D6 0%,#3A3390 34%,#221D52 58%,#4B42A4 100%);
  -webkit-background-clip:text;background-clip:text;color:#3A3390;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.card h3 .chain{font-size:12px;font-weight:600;-webkit-text-fill-color:var(--t3);color:var(--t3);filter:none;white-space:nowrap}
.card p{font-size:13.5px;color:var(--t3);line-height:1.72;margin:0}

.vs{display:inline-block;font-size:12px;font-weight:600;color:var(--t2);background:var(--fill);
  border:.5px solid var(--border-brand);padding:2.5px 10px;border-radius:999px;margin:2px 0;align-self:flex-start}
.inno{font-size:13px;color:var(--t3);background:var(--sunken);border:.5px solid var(--line);
  padding:8px 11px;border-radius:10px;margin:4px 0;line-height:1.65}
.ph{background:var(--fill);color:var(--t2);border-radius:12px;padding:22px;text-align:center;font-size:13px;line-height:1.75;margin:6px 0}

/* ---------- 2.5D 立体按钮（与首页 .btn 同源） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
  font-size:14px;font-weight:700;line-height:1;color:#fff;border:0;cursor:pointer;border-radius:11px;padding:11px 20px;
  text-decoration:none;background:linear-gradient(180deg,var(--cta-top) 0%,var(--cta) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(38,33,92,.30),0 2px 0 var(--brand-deep),0 5px 12px rgba(38,33,92,.22);
  transition:transform var(--ease),box-shadow var(--ease)}
.btn:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(38,33,92,.30),0 3px 0 var(--brand-deep),0 8px 16px rgba(38,33,92,.26)}
.btn:active{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 var(--brand-deep),0 2px 5px rgba(38,33,92,.20)}

/* ---------- 视频演示区 ---------- */
.video{background:var(--bg-soft);border:.5px dashed var(--border-brand);border-radius:18px;padding:18px 20px;margin:20px 0;box-shadow:var(--sh1)}
.video h3{margin:0 0 10px;font-size:16px;color:var(--t2)}
.video .ph{background:var(--fill);color:var(--t2);border-radius:12px;padding:22px;text-align:center;font-size:13px;line-height:1.75}

/* ---------- 弹窗（trial modal） ---------- */
.ftz-mask{position:fixed;inset:0;background:rgba(38,33,92,.45);z-index:99;align-items:center;justify-content:center}
.ftz-modal{background:#fff;border:.5px solid var(--line);border-radius:18px;padding:26px 26px 22px;max-width:380px;width:90%;box-shadow:var(--sh2)}
.ftz-modal h3{margin:0 0 4px;font-size:18px;font-weight:700;
  background:linear-gradient(180deg,#7167D6 0%,#3A3390 40%,#221D52 70%,#4B42A4 100%);
  -webkit-background-clip:text;background-clip:text;color:#3A3390;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
#trialPack{margin:0 0 14px;font-size:13px;color:var(--t3)}
.ftz-input{width:100%;padding:11px 13px;border:.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;
  color:var(--t1);background:#fff;outline:none;transition:border-color .14s,box-shadow .14s}
.ftz-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(127,119,221,.18)}
.ftz-msg{font-size:12.5px;color:#B91C1C;min-height:18px;margin:8px 0}
.ftz-ok{flex:1;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:14px;font-weight:700;
  color:#fff;border:0;padding:11px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,var(--cta-top) 0%,var(--cta) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(38,33,92,.30),0 2px 0 var(--brand-deep),0 5px 12px rgba(38,33,92,.22);
  transition:transform var(--ease),box-shadow var(--ease)}
.ftz-ok:hover{transform:translateY(-1px)}
.ftz-ok:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 var(--brand-deep)}
.ftz-cancel{background:var(--sunken);color:var(--t3);border:.5px solid var(--line);padding:10px 16px;border-radius:10px;
  font-size:14px;cursor:pointer;font-family:inherit;transition:background .14s,color .14s}
.ftz-cancel:hover{background:var(--fill);color:var(--t2)}

/* ---------- tech-zone（前沿技术交流区） ---------- */
.subcol{background:var(--bg-soft);border:.5px solid var(--line);border-radius:18px;padding:20px 24px;margin:18px 0;box-shadow:var(--sh1)}
.subcol h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(180deg,#7167D6 0%,#3A3390 34%,#221D52 58%,#4B42A4 100%);
  -webkit-background-clip:text;background-clip:text;color:#3A3390;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.subcol h3 .cnt{font-size:13px;font-weight:600;-webkit-text-fill-color:var(--t2);color:var(--t2);filter:none}
.entry{border-bottom:.5px dashed var(--line);padding:14px 0}
.entry:last-child{border-bottom:0;padding-bottom:4px}
.e-head{font-weight:600}
.e-head a{color:var(--t1);text-decoration:none;transition:color .14s}
.e-head a:hover{color:var(--t2)}
.src{color:var(--t3);font-weight:500;font-size:13px;margin-left:8px}
.e-sum{color:var(--t3);font-size:14px;line-height:1.75;margin:6px 0}
.e-foot{margin:6px 0 2px}
.tag-license,.tag-innovate{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;margin:4px 8px 0 0}
.tag-license{background:var(--sunken);color:var(--t3);border:.5px solid var(--line)}
.tag-innovate{background:var(--fill);color:var(--t2);border:.5px solid var(--border-brand)}
.e-review{font-size:13px;color:var(--t3);background:var(--sunken);border:.5px solid var(--line);border-left:3px solid var(--brand);
  padding:7px 11px;margin:8px 0;border-radius:0 8px 8px 0;line-height:1.7}
.lang-note{font-size:12.5px;color:var(--t3);background:var(--sunken);border:.5px solid var(--line);border-left:3px solid var(--brand);
  padding:9px 13px;margin:16px 0;line-height:1.7;border-radius:0 10px 10px 0}
.empty{color:var(--t3);padding:20px}

/* ---------- 产品矩阵页（products.html） ---------- */
.prod-tag{display:inline-block;font-size:11px;letter-spacing:.8px;color:var(--t2);
  border:.5px solid var(--border-brand);background:var(--fill);border-radius:999px;padding:3px 10px;margin-bottom:12px}
.card .go{display:block;margin-top:12px;font-size:12px;color:var(--brand);font-weight:600}

footer{margin-top:30px;border-top:.5px dashed var(--line);padding-top:14px;color:var(--t3);font-size:12.5px}