@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@300;400;500&family=Special+Elite&family=Cinzel:wght@600&display=swap');

:root{
  --soot:#161209;        /* 煤烟夜色 */
  --soot-2:#1f1810;
  --parchment:#e9dcc0;
  --ink:#241c13;
  --iron-soft:#8d7d64;
  --brass:#c99a3f;       /* 亮黄铜 */
  --amber:#e0a845;       /* 蒸汽琥珀 */
  --verdigris:#4fa387;   /* 铜绿 */
  --hair:rgba(233,220,192,.14);
  --hair-l:rgba(36,28,19,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--parchment);color:var(--ink);
  font-family:'Noto Sans SC',sans-serif;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--verdigris);color:var(--soot)}

#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--verdigris);z-index:99}

/* ── 导航 ─────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4vw;transition:background .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
nav.on-dark{border-bottom-color:var(--hair)}
nav.scrolled{background:rgba(22,18,9,.92);backdrop-filter:blur(10px);border-bottom-color:var(--hair);padding:12px 4vw}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--parchment)}
.cog{width:34px;height:34px;color:var(--brass);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand b{font-family:'Cinzel',serif;font-weight:600;font-size:13px;letter-spacing:.3em}
.nav-links{display:flex;gap:34px}
.nav-links a{color:var(--parchment);text-decoration:none;font-size:13px;letter-spacing:.18em;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--verdigris);transition:width .3s}
.nav-links a:hover::after{width:100%}

/* ── HERO：锅炉夜航 ───────────────────── */
header{position:relative;min-height:100vh;overflow:hidden;background:var(--soot);
  display:flex;flex-direction:column;justify-content:center;padding:0 6vw;}
#boiler{position:absolute;inset:0;width:100%;height:100%;display:block}

header::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(233,220,192,.045) 1px, transparent 1.4px);
  background-size:3px 3px;
}

.hero-inner{position:relative;z-index:3;max-width:1200px}
.kicker{
  font-family:'Special Elite',monospace;font-size:12px;letter-spacing:.3em;
  color:var(--iron-soft);display:flex;align-items:center;gap:14px;margin-bottom:3vh;
}
.kicker::before{content:"";width:44px;height:1px;background:var(--verdigris)}
.kicker-promo { color: var(--amber); border: 1px solid var(--amber); padding: 2px 8px; font-family: 'Noto Sans SC', sans-serif; font-size: 11px; letter-spacing: 0.1em; }

.hero-title{
  font-family:'Noto Serif SC',serif;font-weight:900;
  font-size:clamp(60px,12vw,180px);line-height:.98;
  color:var(--parchment);display:flex;align-items:flex-start;gap:.08em;
  will-change:transform;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.hero-title .char{display:inline-block;animation:blowin 1.15s cubic-bezier(.16,.84,.28,1) both}
.hero-title .char:nth-child(2){animation-delay:.14s}
@keyframes blowin{
  from{opacity:0;transform:translateX(130px) skewX(-14deg);filter:blur(14px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.hero-title .ruby{
  writing-mode:vertical-rl;font-family:'Special Elite',monospace;font-weight:400;
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.42em;color:var(--brass);
  margin-top:.55em;animation:blowin 1.15s .35s cubic-bezier(.16,.84,.28,1) both;
}

.hero-sub{
  margin-top:3.2vh;max-width:660px;
  font-size:clamp(14px,1.4vw,16.5px);line-height:2.1;color:#c9bda1;
  animation:rise .9s .5s cubic-bezier(.2,.7,.2,1) both;
}
.hero-sub em{font-style:normal;color:var(--verdigris);font-weight:400}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero-cta{display:flex;gap:16px;margin-top:4vh;flex-wrap:wrap;animation:rise .9s .66s cubic-bezier(.2,.7,.2,1) both}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  border:1px solid var(--brass);font-size:13px;font-weight:500;letter-spacing:.2em;
  color:var(--parchment);text-decoration:none;background:transparent;cursor:pointer;
  font-family:'Noto Sans SC',sans-serif;
  transition:background .25s,color .25s,transform .2s;
}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--brass);color:var(--soot)}
.btn-solid:hover{background:var(--verdigris);border-color:var(--verdigris);color:var(--soot)}
.btn-ghost:hover{background:rgba(201,154,63,.14)}

/* ── 阀门轮 & 压力表 ───────────────────────────── */
.valve-panel{
  position:absolute;left:5vw;bottom:5vh;z-index:4;
  display:flex;align-items:flex-end;gap:20px;
  animation:rise 1s .85s both;user-select:none;
}
#valve{cursor:grab;touch-action:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
#valve:active{cursor:grabbing}
.valve-meta{font-family:'Special Elite',monospace;color:var(--iron-soft);padding-bottom:8px}
.valve-meta .big{ font-size:30px;color:var(--amber);line-height:1;letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.valve-meta .lbl{font-size:10px;letter-spacing:.34em;margin-top:8px}
.valve-meta .hint{font-size:10.5px;letter-spacing:.12em;margin-top:5px;color:#6b5f4c}
.valve-meta .hint b{color:var(--verdigris);font-weight:400}

.gauge{position:absolute;right:6vw;bottom:5vh;z-index:4;text-align:center;animation:rise 1s .95s both}
.gauge svg{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.gauge-lbl{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.36em;color:var(--iron-soft);margin-top:8px}

.cut-top{clip-path:polygon(0 5.5vw,100% 0,100% 100%,0 100%);margin-top:-5.5vw}

/* ── Sections Common ───────────────────────── */
section{padding:calc(6vw + 9vh) 6vw 10vh}
.dark-sec { background: var(--soot); color: var(--parchment); }
.light-sec { background: var(--parchment); color: var(--ink); }

.sec-head{max-width:1200px;margin:0 auto 8vh}
.sec-tag{font-family:'Special Elite',monospace;font-size:12px;letter-spacing:.3em;color:var(--verdigris);margin-bottom:20px;display:block;}
.dark-sec .sec-tag { color: var(--brass); }
.sec-title{font-family:'Noto Serif SC',serif;font-weight:900;font-size:clamp(34px,5vw,60px);line-height:1.25}
.sec-desc{margin-top:20px;max-width:580px;font-size:14px;line-height:2;color:#5d5140}
.dark-sec .sec-desc { color: #a89a7e; }

/* ── Features & Pricing Grids ───────────────── */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;max-width:1200px;margin:0 auto}
.card{border-top:1px solid var(--hair-l);padding-top:40px;}
.dark-sec .card { border-top-color: var(--hair); }
.card-icon{font-family:'Cinzel',serif;font-size:26px;color:var(--verdigris);line-height:1;margin-bottom:16px;}
.dark-sec .card-icon { color: var(--amber); }
.card-title{font-family:'Special Elite',monospace;font-size:18px;letter-spacing:.1em;margin-bottom:12px;font-weight:600;}
.card-desc{font-size:14px;line-height:2.1;color:#42372a;}
.dark-sec .card-desc { color: #a89a7e; }

/* Pricing Cards */
.pricing-card {
  border: 1px solid var(--hair-l); padding: 40px; display: flex; flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
}
.pricing-card:hover { border-color: var(--verdigris); }
.pricing-card.recommended { background: var(--ink); color: var(--parchment); border-color: var(--ink); transform: scale(1.02); }
.pricing-card.recommended .card-desc { color: #a89a7e; }
.pricing-card.recommended .price-val { color: var(--amber); }
.pricing-card.recommended .btn { border-color: var(--brass); color: var(--parchment); }
.pricing-card.recommended .btn:hover { background: var(--brass); color: var(--soot); }

.price-val { font-family: 'Cinzel', serif; font-size: 42px; margin-bottom: 20px; color: var(--ink); }
.price-val span { font-size: 14px; font-family: 'Noto Sans SC', sans-serif; color: #8d7d64; }
.pricing-list { margin-bottom: 30px; flex-grow: 1; }
.pricing-list li { font-size: 13.5px; line-height: 2; border-bottom: 1px dashed rgba(0,0,0,0.1); padding: 8px 0; }
.pricing-card.recommended .pricing-list li { border-bottom-color: rgba(255,255,255,0.1); }
.pricing-list li::before { content: "» "; color: var(--verdigris); font-family: 'Special Elite', monospace; }

/* Marquee */
.marquee-wrapper { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 4vh 0; background: var(--soot-2); }
.marquee-inner { display: inline-block; animation: marquee 35s linear infinite; }
.marquee-inner:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.review-item { display: inline-block; width: 340px; padding: 0 40px; white-space: normal; vertical-align: top; border-right: 1px solid var(--hair); }
.review-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.review-body { font-size: 13px; line-height: 1.8; color: #a89a7e; font-style: italic; margin-bottom: 12px; }
.review-author { font-family: 'Special Elite', monospace; font-size: 12px; color: var(--iron-soft); letter-spacing: 0.1em; }

/* FAQ */
.faq-list { max-width: 900px; margin: 0 auto; }
details { border-bottom: 1px solid var(--hair-l); padding: 20px 0; }
.dark-sec details { border-bottom-color: var(--hair); }
summary { font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 0; font-family: 'Special Elite', monospace; color: var(--verdigris); font-size: 20px; transition: transform 0.3s; }
details[open] summary::after { transform: rotate(45deg); color: var(--amber); }
details p { margin-top: 16px; font-size: 14px; line-height: 2; color: #5d5140; }
.dark-sec details p { color: #a89a7e; }

/* Bottom CTA */
.huge-cta { text-align: center; padding: 15vh 6vw; background: var(--soot); border-top: 1px solid var(--hair); }
.huge-cta h2 { font-family: 'Noto Serif SC', serif; font-size: clamp(34px, 5vw, 60px); color: var(--parchment); margin-bottom: 4vh; }

footer{
  background:var(--soot);color:#7d715c;border-top:1px solid var(--hair);
  padding:34px 6vw;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.12em;
}
footer b{color:var(--parchment);font-weight:400}
footer .mono{font-family:'Special Elite',monospace;letter-spacing:.26em}
footer .cog{width:20px;height:20px;vertical-align:-4px;animation-duration:16s}
.footer-links a { color: inherit; text-decoration: none; margin-left: 20px; transition: color 0.3s; }
.footer-links a:hover { color: var(--verdigris); }

.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .nav-links{display:none}
  .valve-panel{left:5vw;bottom:3vh;transform:scale(.82);transform-origin:bottom left}
  .gauge{right:5vw;bottom:3vh;transform:scale(.82);transform-origin:bottom right}
  .grid-3{grid-template-columns:1fr;gap:30px}
}