/* 炉门观察孔 · 凸轮风格 */
:root{
  --door:#ECEBE9;    /* 底 */
  --ink:#192527;     /* 字 */
  --line:#6B8587;    /* 线 */
  --stamp:#CD1B1C;   /* 印 */
  --stamp2:#FF5A5B;  /* 黑底上的印色 */
  --base:#000;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--door);
  font:15px/1.8 "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* 顶栏 80px 半透明深底 */
.top{position:fixed;top:0;left:0;right:0;height:80px;z-index:60;display:flex;align-items:center;
  background:rgba(8,10,11,.74);backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid rgba(236,235,233,.12)}
.top .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:32px;width:auto}
.brand b{font-size:20px;letter-spacing:.08em;font-weight:700}
.nav{display:flex;gap:30px;font-size:15px;color:#C4CACA}
.nav a{position:relative;padding:4px 0}
.nav a:hover{color:var(--stamp2)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--stamp2);transition:right .25s}
.nav a:hover::after{right:0}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:2px;font-size:15px;white-space:nowrap}
.b1{background:var(--stamp);color:#fff;border:1px solid var(--stamp)}
.b1:hover{background:#B31516}
.b2{background:transparent;color:var(--door);border:1px solid rgba(236,235,233,.42)}
.b2:hover{border-color:var(--stamp2);color:var(--stamp2)}

/* 凸轮 */
.cam{width:34px;height:34px;flex:0 0 34px;position:relative;
  border-radius:54% 46% 42% 58% / 52% 56% 44% 48%;
  background:var(--stamp);box-shadow:0 0 0 1px rgba(107,133,135,.5)}
.cam::after{content:"";position:absolute;left:17px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--door)}
.cam.sm{width:22px;height:22px;flex:0 0 22px}
.cam.sm::after{left:11px;top:3px;width:6px;height:6px}

/* 观察孔带：两列 1:10，字只进窄列，宽列一条色带 */
.peep{display:grid;grid-template-columns:1fr 10fr;background:var(--door);
  border:1px solid var(--line);margin:0 0 26px}
.peep .hole{background:#0E1315;border-right:1px solid var(--line);padding:12px 8px;
  display:flex;flex-direction:column;gap:2px}
.peep .hole i{font-style:normal;display:block;text-align:center;font-size:13px;line-height:1.9;
  color:var(--door);letter-spacing:.06em;border-bottom:1px dashed rgba(236,235,233,.18)}
.peep .hole i:last-child{border-bottom:0}
.peep .wide{display:flex;align-items:center;padding:20px 26px;min-height:156px}
.peep .band{display:block;width:100%;height:12px;
  background:linear-gradient(90deg,var(--stamp) 0 34%,var(--line) 34% 100%)}

/* 章节头 */
.h{display:flex;align-items:flex-start;gap:16px;margin:0 0 20px}
.h .tx{flex:1}
.h .eyebrow{font-size:12px;letter-spacing:.32em;color:var(--stamp2);text-transform:uppercase;margin-bottom:8px}
.h h2{margin:0 0 8px;font-size:30px;line-height:1.35;letter-spacing:.02em}
.h p{margin:0;color:#B9C0C2;max-width:880px}
.dark .h p{color:#5E6E72}

/* 面板 / 卡片 */
.panel{background:var(--door);color:var(--ink);border-radius:4px;padding:34px 30px}
.panel .h .eyebrow{color:var(--stamp)}
.panel .h h2{color:var(--ink)}
.panel .h p{color:#4C5C60}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{background:var(--door);color:var(--ink);border-radius:4px;padding:22px 20px;position:relative}
.card::after{content:"";position:absolute;right:14px;top:14px;width:7px;height:7px;border-radius:50%;
  background:var(--line);opacity:.55}
.card h3{margin:12px 0 8px;font-size:17px}
.card p{margin:0;font-size:14px;color:#4C5C60;line-height:1.75}
.card .no{font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.2em;color:var(--stamp)}
.card.lift{background:#F5F4F2}
.scene{background:#20292C}
.scene .card{background:#F3F2F0}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  max-width:1200px;margin:0 auto;padding:64px 32px}
.hero .eyebrow{font-size:12px;letter-spacing:.34em;color:var(--stamp2);margin-bottom:18px}
.hero h1{margin:0 0 18px;font-size:44px;line-height:1.28;letter-spacing:.01em;font-weight:800}
.hero .word{display:block;margin:6px 0 20px}
.hero .word img{width:min(100%,430px)}
.hero .desc{margin:0 0 26px;color:#BFC6C8;max-width:560px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{font-size:13px;padding:6px 12px;border:1px solid rgba(107,133,135,.6);border-radius:2px;color:#C6CCCC}
.phone{position:relative;width:100%;max-width:420px;margin:0 auto;padding:14px;border-radius:28px;
  background:linear-gradient(160deg,#1B2225,#0D1113);border:1px solid rgba(236,235,233,.14);
  box-shadow:0 30px 60px rgba(0,0,0,.55)}
.phone img{width:100%;border-radius:16px}
.badge{position:absolute;padding:8px 14px;border-radius:2px;font-size:13px;background:var(--door);color:var(--ink);
  box-shadow:0 12px 26px rgba(0,0,0,.45)}
.badge.a{left:-18px;top:16%}
.badge.b{right:-16px;bottom:14%}

/* 卖点四格（黑底描边） */
.sell{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sell .it{background:var(--door);color:var(--ink);border-radius:4px;padding:20px 18px}
.sell .it h3{margin:12px 0 6px;font-size:18px;letter-spacing:.06em}
.sell .it p{margin:0;font-size:14px;color:#4C5C60}

/* 宣言条 */
.manif{background:var(--ink);color:var(--door);text-align:center;padding:76px 32px;margin:56px 0}
.manif h2{margin:0;font-size:34px;line-height:1.4;font-weight:800;letter-spacing:.02em}
.manif p{margin:14px auto 0;max-width:760px;color:#AEB8BA}

/* 对比表 */
.cmp{background:var(--door);color:var(--ink);border-radius:4px;padding:18px;overflow-x:auto}
.cmp table{width:100%;min-width:720px;border-collapse:collapse}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(25,37,39,.14);font-size:14px}
.cmp thead th{background:#DFDDDA;font-weight:700;letter-spacing:.04em}
.cmp td:first-child{color:#3B4A4E;white-space:nowrap}
.cmp td.mine{color:var(--stamp);font-weight:600}
.cmp tbody tr:last-child td{border-bottom:0}

/* 资讯 */
.news .card p{color:#4C5C60}
.micro{display:inline-block;font-size:11px;letter-spacing:.24em;color:var(--stamp);margin-bottom:10px}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--door);color:var(--ink);border-radius:4px;padding:0 20px}
.faq summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:16px;font-size:20px;color:var(--stamp)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:#4C5C60;font-size:14px}

/* 反色结尾 */
.rev{background:var(--ink);color:var(--door);border-radius:4px;padding:48px 36px;margin-top:56px}
.rev h2{margin:0 0 12px;font-size:28px}
.rev p{margin:0 0 22px;color:#AEB8BA;max-width:760px}
.slots{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.slots span{font-size:13px;padding:7px 14px;border:1px dashed rgba(236,235,233,.34);border-radius:2px}

/* 日志 */
.logs{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(107,133,135,.5)}
.logs .row{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 4px;
  border-bottom:1px solid rgba(107,133,135,.34)}
.logs .v{font:600 13px/1.8 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:var(--stamp2)}
.logs p{margin:0;color:#B9C0C2}

/* 图只作分隔 */
.sepimg{margin:56px 0;border-top:1px solid rgba(107,133,135,.4);border-bottom:1px solid rgba(107,133,135,.4);padding:14px 0}
.sepimg img{width:100%;height:280px;object-fit:cover;opacity:.62;filter:grayscale(.2)}

/* 底栏 */
.foot{border-top:1px solid rgba(236,235,233,.12);margin-top:64px;padding:34px 0 46px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  font-size:13px;color:#8E9799}
.foot .links{display:flex;gap:22px}
.foot .links a:hover{color:var(--stamp2)}
.foot img{height:26px;width:auto;margin-right:10px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding:48px 24px}
  .grid4,.sell{grid-template-columns:repeat(2,1fr)}
  .grid6,.grid3{grid-template-columns:1fr}
  .nav{display:none}
  .peep{grid-template-columns:1fr 5fr}
  .peep .wide{min-height:120px;padding:16px 18px}
  .hero h1{font-size:32px}
  .manif h2{font-size:26px}
  .wrap{padding:0 20px}
  .badge.a{left:0}.badge.b{right:0}
}