/* SafeW 官网 · 舱盖铰链（锁门 / 1000px 窄栏贴右，左侧整片空，栏顶倒计时三格） */
:root{
  --bg:#050507;
  --panel:#180F14;
  --panel2:#21150F;
  --paper:#F0E1D1;
  --txt:#F0E1D1;
  --txt2:#B7A492;
  --line:#8E6547;
  --lineb:#C1956B;
  --seal:#DB9B21;
  --seal2:#F0B43C;
  --seal3:#F8D484;
  --ink:#180F14;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
.wrap{max-width:1264px;margin:0 auto;padding:0 32px}

/* 顶栏 */
.top{position:fixed;top:0;left:0;right:0;height:80px;z-index:60;background:rgba(7,4,5,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(193,149,107,.18)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.4px}
.logo img{height:30px;width:auto}
.nav{display:flex;gap:30px}
.nav a{font-size:15px;color:#E6D3C2;position:relative;padding:4px 0}
.nav a:hover{color:var(--seal3)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--seal2);transform:scaleX(0);transition:transform .22s ease}
.nav a:hover::after{transform:scaleX(1)}
.topbtn{background:var(--seal2);color:#2B1B03;font-weight:700;font-size:14px;padding:10px 18px;border-radius:3px}
.topbtn:hover{background:var(--seal3)}

/* 按钮 */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;font-size:15px;font-weight:700;padding:13px 26px;border-radius:3px;border:1px solid transparent}
.b1{background:var(--seal2);color:#2B1B03}
.b1:hover{background:var(--seal3)}
.b2{border-color:rgba(193,149,107,.5);color:var(--txt)}
.b2:hover{border-color:var(--seal2);color:var(--seal2)}

/* Hero */
.hero{max-width:1264px;margin:0 auto;padding:64px 32px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;color:var(--seal3);border:1px solid rgba(240,180,60,.45);padding:5px 13px;border-radius:3px;background:rgba(219,155,33,.12)}
.hero h1{font-size:40px;line-height:1.28;margin:18px 0 16px;font-weight:800;letter-spacing:-.4px}
.hero h1 em{font-style:normal;color:var(--seal3)}
.lead{color:var(--txt2);font-size:16.5px;max-width:52ch}
.shot{position:relative;border:1px solid rgba(193,149,107,.22);background:linear-gradient(180deg,rgba(24,15,20,.95),rgba(24,15,20,.5));padding:14px;border-radius:5px}
.shot img{width:100%;border-radius:3px}
.shot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:5px 0 0 5px;background:repeating-linear-gradient(180deg,var(--lineb) 0 10px,transparent 10px 20px);opacity:.5}

/* 骨架：1000px 窄栏贴右，左侧整片空，栏顶倒计时三格 */
.rulewrap{max-width:1264px;margin:0 auto;padding:56px 32px;display:flex;justify-content:flex-end;background:#000;border-top:1px solid rgba(193,149,107,.12);border-bottom:1px solid rgba(193,149,107,.12)}
.barcol{width:1000px;max-width:100%}
.cd{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.cd div{background:var(--panel2);border:1px solid rgba(193,149,107,.24);border-radius:3px;padding:12px 14px;text-align:center}
.cd b{display:block;font-size:20px;font-weight:800;letter-spacing:1px;color:var(--seal3)}
.cd span{font-size:11.5px;letter-spacing:2px;color:var(--lineb)}
.ruler{display:flex;align-items:stretch;border:1px solid rgba(193,149,107,.26);background:var(--panel);border-radius:3px;overflow:hidden}
.ruler .zero{flex:0 0 64px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--seal2);border-right:1px solid rgba(193,149,107,.22)}
.ruler .tick{flex:1 1 0;position:relative;padding:26px 8px 20px;text-align:center;border-right:1px dotted rgba(193,149,107,.22)}
.ruler .tick span{display:block;font-size:13.5px;font-weight:800;letter-spacing:.3px}
.ruler .tick i{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:1px;height:9px;background:var(--lineb)}
.ruler .tick:nth-child(5) span{color:var(--seal3)}
.ruler .tail{flex:0 0 76px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;letter-spacing:1px;color:var(--seal2);background:rgba(219,155,33,.14)}

/* 通用区块 */
section{padding:70px 0}
.sec-head{margin-bottom:34px}
.sec-head .k{font-size:12px;letter-spacing:2px;color:var(--seal3)}
.sec-head h2{font-size:28px;font-weight:800;margin:10px 0 10px;letter-spacing:-.2px}
.sec-head p{color:var(--txt2);font-size:15.5px;max-width:60ch}
.bolt{height:10px;max-width:1200px;margin:0 auto 36px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--seal2) 0 28px,transparent 28px 38px);opacity:.55}

/* 锁门卡片：左侧门轴铰链 + 锁孔 */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{position:relative;background:var(--panel);border:1px solid rgba(193,149,107,.2);border-radius:4px;padding:28px 24px 26px 30px;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,var(--lineb) 0 10px,transparent 10px 20px);opacity:.45}
.card:hover{border-color:rgba(193,149,107,.36)}
.ico{width:44px;height:44px;border-radius:4px;background:rgba(219,155,33,.15);border:1px solid rgba(240,180,60,.4);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--seal2);stroke-width:1.6}
.card h3{font-size:17px;font-weight:800;margin-bottom:8px}
.card p{color:var(--txt2);font-size:14.5px}
.feat .num{font-size:13px;letter-spacing:2px;color:var(--seal3);font-weight:800}
.feat h3{font-size:18px;font-weight:800;margin:8px 0 10px}
.feat p{color:var(--txt2);font-size:14.5px}

/* 场景 */
.scenes{background:rgba(33,21,15,.72);border-top:1px solid rgba(193,149,107,.14);border-bottom:1px solid rgba(193,149,107,.14)}
.scene h3{font-size:18px;font-weight:800;margin-bottom:6px}
.scene .who{font-size:12.5px;color:var(--seal3);letter-spacing:1px;margin-bottom:10px}
.scene p{color:var(--txt2);font-size:14.5px}

/* 状态：不写价格 */
.status{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.status li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;background:var(--panel);border:1px solid rgba(193,149,107,.2);border-radius:4px;padding:16px 20px}
.status .k{font-size:13px;letter-spacing:1px;color:var(--lineb)}
.status .v{font-size:15px;font-weight:800}
.status li:nth-child(4) .v{color:var(--seal3)}

/* 只留一行 */
.oneline{max-width:1264px;margin:0 auto;padding:0 32px}
.oneline div{border-top:1px solid rgba(193,149,107,.2);border-bottom:1px solid rgba(193,149,107,.2);padding:34px 0;text-align:center;font-size:21px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}

/* 末行撕线 */
.tear{max-width:1200px;margin:0 auto;padding:0 32px}
.tear i{display:block;height:20px;background:var(--paper);opacity:.85;-webkit-mask:repeating-conic-gradient(from -45deg at 50% 0%,#000 0 25%,transparent 0 50%) 0 0/20px 20px;mask:repeating-conic-gradient(from -45deg at 50% 0%,#000 0 25%,transparent 0 50%) 0 0/20px 20px}

/* 宣言条 */
.manifest{background:linear-gradient(180deg,rgba(219,155,33,.14),rgba(5,5,7,0));border-top:1px solid rgba(240,180,60,.24);border-bottom:1px solid rgba(240,180,60,.24);text-align:center;padding:78px 32px}
.manifest h2{font-size:30px;font-weight:800;letter-spacing:-.2px;max-width:24ch;margin:0 auto}
.manifest p{color:var(--txt2);margin-top:14px;font-size:15px}

/* 评价 */
.say .q{font-size:16px;font-weight:700;line-height:1.7;margin-bottom:14px}
.say .by{font-size:12.5px;letter-spacing:1px;color:var(--seal3)}
.say p{color:var(--txt2);font-size:14.5px;margin-top:10px}

/* 对比表 */
.tblbox{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(193,149,107,.2);border-radius:4px}
table{width:100%;min-width:760px;border-collapse:collapse;background:var(--panel)}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(193,149,107,.14);font-size:14.5px}
thead th{background:rgba(219,155,33,.16);font-weight:800;font-size:14px;letter-spacing:.5px}
thead th:nth-child(2){color:var(--seal3)}
tbody td:first-child{font-weight:600}
tbody td:nth-child(3){color:#8B7A6C}
tbody tr:last-child td{border-bottom:0}

/* 资讯 */
.news .tag{display:inline-block;font-size:11px;letter-spacing:1px;color:var(--seal3);border:1px solid rgba(240,180,60,.4);padding:3px 10px;border-radius:3px;margin-bottom:12px}
.news h3{font-size:17px;font-weight:800;margin-bottom:8px}
.news p{color:var(--txt2);font-size:14.5px}
.news .date{font-size:12px;color:#8B7A6C;margin-top:12px}

/* FAQ */
.faq{max-width:900px}
.faq details{border:1px solid rgba(193,149,107,.2);border-radius:4px;margin-bottom:12px;background:var(--panel);overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--seal2);font-weight:800}
.faq details[open] summary::after{content:"-"}
.faq .a{padding:0 22px 20px;color:var(--txt2);font-size:14.5px}

/* 下载四字位 */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 30px}
.slot{border:1px dashed rgba(193,149,107,.45);border-radius:4px;padding:16px;text-align:center;font-weight:800;font-size:15px;background:var(--panel)}
.slot small{display:block;font-weight:400;font-size:12px;color:#8B7A6C;margin-top:6px;letter-spacing:.6px}
.act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.act .btn{padding:15px 34px;font-size:16px}

/* 反色结尾：纸面 */
.invert{background:linear-gradient(180deg,#F0E1D1,#DFC9B6);color:var(--ink);border-top:1px solid rgba(240,180,60,.3);border-bottom:1px solid rgba(240,180,60,.3)}
.invert .sec-head h2{color:var(--ink)}
.invert .sec-head .k{color:#96660C}
.invert .sec-head p{color:#5B463A}
.invert .slot{background:rgba(24,15,20,.05);border-color:rgba(24,15,20,.3);color:var(--ink)}
.invert .slot small{color:#6B574A}
.invert .act .b2{border-color:rgba(24,15,20,.4);color:var(--ink)}
.invert .act .b2:hover{border-color:#96660C;color:#96660C}

/* 图片分隔 */
.split{margin:0;padding:0;line-height:0;background:#000}
.split img{width:100%;max-height:320px;object-fit:cover;opacity:.92}

/* 页脚 */
footer{border-top:1px solid rgba(193,149,107,.18);padding:38px 0 46px;background:#000}
.foot{max-width:1264px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:#8B7A6C;font-size:13.5px}
.foot nav{display:flex;gap:22px}
.foot a:hover{color:var(--seal3)}
.foot .fimg{display:flex;align-items:center;gap:8px}
.foot .fimg img{height:22px;width:auto;opacity:.9}

@media (max-width:1080px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:repeat(2,1fr)}
  .status{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:120px}
  .hero h1{font-size:32px}
  .nav{display:none}
  .ruler{flex-wrap:wrap}
  .ruler .tick{flex:1 1 33%;border-bottom:1px dotted rgba(193,149,107,.2)}
  .oneline div{font-size:16px;white-space:normal}
  .manifest h2{font-size:24px}
}
@media (max-width:640px){
  .wrap,.hero,.rulewrap,.tear,.foot{padding-left:20px;padding-right:20px}
  .grid4,.grid3,.slots{grid-template-columns:1fr}
  .ruler .tick{flex:1 1 100%}
  section{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav a::after{transition:none}
}