/* SafeW 官网 · 舵机连杆（齿尖 / 内容只占视口底下 68%，上方全空，舱底标尺） */
:root{
  --bg:#050507;
  --panel:#241316;
  --panel2:#2E181C;
  --paper:#F8E3D7;
  --txt:#F8E3D7;
  --txt2:#C7AEA6;
  --line:#977557;
  --lineb:#C3A184;
  --seal:#019BCB;
  --seal2:#35C2EA;
  --seal3:#7FDBF5;
}
*{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}

/* 舱底标尺：只占视口底下 68%，上方全空 */
.rail{position:fixed;left:0;top:32vh;bottom:0;width:58px;z-index:40;border-right:1px solid rgba(195,161,132,.22);background:linear-gradient(180deg,rgba(36,19,22,.92),rgba(36,19,22,.15));display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:16px 0;pointer-events:none}
.rail b{font-size:11px;letter-spacing:2px;color:var(--seal3);writing-mode:vertical-rl}
.rail .ticks{display:flex;flex-direction:column;gap:14px;align-items:flex-end;width:100%;padding-right:6px}
.rail .ticks i{display:block;height:1px;background:rgba(195,161,132,.45)}
.rail .ticks i:nth-child(5n+1){width:26px;background:var(--seal2)}
.rail .ticks i:nth-child(5n+2){width:14px}
.rail .ticks i:nth-child(5n+3){width:18px}
.rail .ticks i:nth-child(5n+4){width:10px}
.rail .ticks i:nth-child(5n){width:22px}
.rail .end{position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--seal2) 0 8px,transparent 8px 14px)}

/* 顶栏 */
.top{position:fixed;top:0;left:0;right:0;height:80px;z-index:60;background:rgba(9,5,6,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(195,161,132,.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:#EBD9D2;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:#04222C;font-weight:700;font-size:14px;padding:10px 18px}
.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:1px solid transparent}
.b1{background:var(--seal2);color:#04222C}
.b1:hover{background:var(--seal3)}
.b2{border-color:rgba(195,161,132,.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(53,194,234,.45);padding:5px 13px;background:rgba(1,155,203,.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(195,161,132,.22);background:linear-gradient(180deg,rgba(36,19,22,.95),rgba(36,19,22,.5));padding:14px}
.shot img{width:100%}
.shot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:repeating-linear-gradient(90deg,var(--seal2) 0 22px,transparent 22px 34px)}

/* 骨架：左标 → 中句 5 节 → 右状态 */
.skelwrap{background:#000;border-top:1px solid rgba(195,161,132,.14);border-bottom:1px solid rgba(195,161,132,.14);padding:56px 0}
.skel{max-width:1264px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:190px 1fr 250px;gap:24px;align-items:stretch}
.skel .mark{background:var(--panel);border:1px solid rgba(195,161,132,.24);padding:22px 18px;display:flex;flex-direction:column;justify-content:space-between}
.skel .mark .no{font-size:26px;font-weight:800;letter-spacing:1px;color:var(--seal3)}
.skel .mark .sub{font-size:11.5px;letter-spacing:2px;color:var(--lineb);margin-top:6px}
.skel .mark .tri{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:14px solid var(--seal2)}
.skel .mid{background:var(--panel);border:1px solid rgba(195,161,132,.24);padding:22px 24px}
.skel .mid .sect{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(195,161,132,.22)}
.skel .mid .sect:last-child{border-bottom:0}
.skel .mid .sect i{font-style:normal;font-size:11.5px;letter-spacing:1px;color:var(--seal2);flex:0 0 26px}
.skel .mid .sect b{font-size:15.5px;font-weight:700}
.skel .mid .sect:nth-child(4) b{color:var(--seal3);font-weight:800}
.skel .st{background:var(--panel2);border:1px solid rgba(195,161,132,.24);padding:22px 18px}
.skel .st h4{font-size:12px;letter-spacing:2px;color:var(--seal3);font-weight:800;margin-bottom:14px}
.skel .st li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:7px 0;border-bottom:1px dotted rgba(195,161,132,.2)}
.skel .st li:last-child{border-bottom:0}
.skel .st span{color:var(--lineb)}

/* 通用区块 */
section{padding:70px 0}
.sec-head{margin-bottom:34px}
.sec-head .k{font-size:12px;letter-spacing:2px;color:var(--seal3)}
.sec-head .k::before{content:"";display:inline-block;width:0;height:0;margin-right:8px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--seal2)}
.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}
.teeth{height:7px;max-width:1200px;margin:0 auto 36px;background:repeating-linear-gradient(135deg,var(--seal2) 0 7px,transparent 7px 14px);opacity:.5}

/* 齿尖卡片：尖角 + 齿边 */
.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(195,161,132,.2);padding:30px 24px 34px}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:0;height:0;border-top:15px solid var(--seal2);border-right:15px solid transparent}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(135deg,var(--seal2) 0 6px,transparent 6px 12px);opacity:.32}
.card:hover{border-color:rgba(195,161,132,.36)}
.ico{width:44px;height:44px;background:rgba(1,155,203,.16);border:1px solid rgba(53,194,234,.4);display:flex;align-items:center;justify-content:center;margin-bottom:14px;clip-path:polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%)}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--seal2);stroke-width:1.5}
.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(46,24,28,.72);border-top:1px solid rgba(195,161,132,.14);border-bottom:1px solid rgba(195,161,132,.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}

/* 窄栏 */
.narrow{max-width:640px;margin:0 auto}
.narrow .slotbox{border:1px solid rgba(195,161,132,.26);background:var(--panel);padding:26px 22px}

/* 宣言条 */
.manifest{background:linear-gradient(180deg,rgba(1,155,203,.15),rgba(5,5,7,0));border-top:1px solid rgba(53,194,234,.26);border-bottom:1px solid rgba(53,194,234,.26);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}

/* 对比表 */
.tblbox{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(195,161,132,.2)}
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(195,161,132,.14);font-size:14.5px}
thead th{background:rgba(1,155,203,.18);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:#968279}
tbody tr:last-child td{border-bottom:0}

/* 日志 */
.log{border-left:1px solid rgba(195,161,132,.3);padding-left:26px}
.log li{position:relative;padding:0 0 26px}
.log li::before{content:"";position:absolute;left:-31px;top:9px;width:0;height:0;border-left:6px solid var(--seal2);border-top:5px solid transparent;border-bottom:5px solid transparent}
.log .d{font-size:12px;letter-spacing:1px;color:var(--seal3)}
.log b{display:block;font-size:16.5px;font-weight:800;margin:6px 0 6px}
.log span{color:var(--txt2);font-size:14.5px}

/* 资讯 */
.news .tag{display:inline-block;font-size:11px;letter-spacing:1px;color:var(--seal3);border:1px solid rgba(53,194,234,.4);padding:3px 10px;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:#8B7A73;margin-top:12px}

/* FAQ */
.faq{max-width:900px}
.faq details{border:1px solid rgba(195,161,132,.2);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(195,161,132,.45);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:#94837C;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,#F8E3D7,#EBD2C5);color:#241316;border-top:1px solid rgba(53,194,234,.3);border-bottom:1px solid rgba(53,194,234,.3)}
.invert .sec-head h2{color:#241316}
.invert .sec-head .k{color:#01708F}
.invert .sec-head p{color:#5B443F}
.invert .slot{background:rgba(36,19,22,.05);border-color:rgba(36,19,22,.32);color:#241316}
.invert .slot small{color:#6B5350}
.invert .act .b2{border-color:rgba(36,19,22,.42);color:#241316}
.invert .act .b2:hover{border-color:#01708F;color:#01708F}

/* 图片分隔 */
.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(195,161,132,.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:#94837C;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:1280px){
  .rail{display:none}
}
@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)}
  .skel{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:120px}
  .hero h1{font-size:32px}
  .nav{display:none}
  .manifest h2{font-size:24px}
}
@media (max-width:640px){
  .wrap,.hero,.skel,.foot{padding-left:20px;padding-right:20px}
  .grid4,.grid3,.slots{grid-template-columns:1fr}
  section{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav a::after{transition:none}
}
