:root{
  --bg:#05080f;
  --bg2:#0a1224;
  --ink:#e9f0ff;
  --muted:#93a6c8;
  --cyan:#3ee0ff;
  --cyan-d:#1d8fb3;
  --blue:#4f8cff;
  --green:#35d99a;
  --warn:#ffb454;
  --line:rgba(130,170,230,.16);
  --card:rgba(255,255,255,.035);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ===== 手机开屏全屏遮罩 ===== */
.fs-gate[hidden]{display:none}
.fs-gate{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  text-align:center;padding:30px;
  background:radial-gradient(900px 600px at 50% 30%,rgba(50,90,180,.28),transparent 65%),
             radial-gradient(700px 500px at 80% 90%,rgba(29,143,179,.2),transparent 60%),
             var(--bg);
  opacity:1;transition:opacity .3s ease;
}
.fs-gate.hide{opacity:0;pointer-events:none}
.fs-gate-logo{font-size:1.9rem;font-weight:800;letter-spacing:1px}
.fs-gate-logo span{color:var(--cyan);margin:0 3px}
.fs-gate-sub{color:var(--muted);font-size:1.02rem;line-height:1.8}
.fs-gate-tip{color:#5c6e90;font-size:.8rem;margin-top:4px}

/* ===== 屏幕常亮提示 ===== */
.wake-pill[hidden]{display:none}
.wake-pill{
  position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:55;
  display:flex;align-items:center;gap:7px;
  font-size:.72rem;letter-spacing:1px;color:#9ff0ff;
  background:rgba(10,18,36,.78);border:1px solid rgba(62,224,255,.35);
  border-radius:999px;padding:5px 13px;backdrop-filter:blur(6px);
  transition:opacity .6s ease;
}
.wake-pill.hide{opacity:0}
.wk-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s infinite}

/* ===== 导航 ===== */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 34px;
  background:linear-gradient(rgba(5,8,15,.85),rgba(5,8,15,0));
}
.brand{font-weight:700;letter-spacing:.5px;font-size:1.05rem;white-space:nowrap}
.brand-dot{color:var(--cyan);margin:0 2px}
.nav-links{flex:0 0 auto}
.nav-demo{
  display:inline-block;white-space:nowrap;
  font-size:.9rem;color:var(--cyan);
  border:1px solid rgba(62,224,255,.45);border-radius:999px;
  padding:7px 16px;transition:all .25s;
}
.nav-demo:hover{background:rgba(62,224,255,.12);box-shadow:0 0 18px rgba(62,224,255,.25)}

/* ===== 幻灯容器 ===== */
.deck{height:100vh;height:100dvh;transition:transform .65s cubic-bezier(.7,0,.2,1)}
.slide{
  height:100vh;height:100dvh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(50,90,180,.18),transparent 60%),
             radial-gradient(900px 600px at 0% 110%,rgba(29,143,179,.12),transparent 60%),
             var(--bg);
}
.slide-inner{width:min(1120px,90vw);position:relative;z-index:2}

/* 入场动画 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.slide.active .reveal{opacity:1;transform:none}
.slide.active .d1{transition-delay:.12s}
.slide.active .d2{transition-delay:.24s}
.slide.active .d3{transition-delay:.36s}
.slide.active .d4{transition-delay:.48s}
.slide.active .d5{transition-delay:.6s}

.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:3px;
  color:var(--cyan);
  border:1px solid rgba(62,224,255,.35);border-radius:999px;
  padding:5px 14px;margin-bottom:20px;
  background:rgba(62,224,255,.06);
}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.05;font-weight:800;letter-spacing:1px}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.28;font-weight:700;margin-bottom:30px}
.grad{
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===== 1 封面 ===== */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.5}
/* 真实码型样片 */
.hero-plate{position:relative;width:100%;max-width:420px;justify-self:center}
.plate-hud{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Consolas",monospace;font-size:.78rem;letter-spacing:2px;
  color:var(--cyan);margin-bottom:12px;
}
.plate-hud i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s infinite}
.plate-img{
  position:relative;border-radius:20px;overflow:hidden;background:#05080f;
  border:1px solid rgba(62,224,255,.28);
  box-shadow:0 18px 60px rgba(20,90,140,.4),0 0 70px rgba(62,224,255,.1);
  animation:plateFloat 7s ease-in-out infinite;
}
.plate-img img{display:block;width:100%;height:auto}
.plate-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(150,240,255,.12) 50%,transparent 58%);
  transform:translateX(-130%);animation:plateSweep 5.5s ease-in-out infinite;
}
@keyframes plateSweep{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes plateFloat{50%{transform:translateY(-8px)}}
.hero-sub{font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--muted);line-height:1.8;margin:24px 0 34px}
.chips{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:38px}
.chip{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 24px;display:flex;flex-direction:column;gap:5px;
}
.chip b{font-size:1.45rem;color:var(--cyan);font-weight:700}
.chip span{font-size:.84rem;color:var(--muted)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-block;cursor:pointer;font-size:1rem;font-weight:600;
  border-radius:12px;padding:14px 30px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s;
  font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(90deg,#16b8d8,#3b7ff5);color:#fff;
  box-shadow:0 8px 28px rgba(40,140,220,.35);
}
.btn-primary:hover{box-shadow:0 10px 36px rgba(40,170,240,.5)}
.btn-ghost{border-color:rgba(147,166,200,.45);color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-big{font-size:1.15rem;padding:18px 46px}
.scroll-hint{margin-top:36px;font-size:.8rem;color:#5c6e90;letter-spacing:1px}

/* ===== 2 原理 ===== */
.principle2{width:min(1000px,92vw);display:flex;flex-direction:column;align-items:center;text-align:center}
.p2-head h2{margin-bottom:18px}
.p2-stage{width:100%}
.scan-frame{
  background:linear-gradient(180deg,#080d18,#0c1424);
  border:1px solid rgba(62,224,255,.25);border-radius:18px;
  box-shadow:0 0 50px rgba(29,143,179,.18),inset 0 0 60px rgba(10,25,50,.6);
  overflow:hidden;width:100%;
}
.scan-frame.big{max-width:860px;margin:0 auto}
.scan-hud{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--line);
  font-size:.85rem;letter-spacing:1px;
}
.hud-title{color:var(--cyan);display:flex;align-items:center;gap:9px;font-weight:600}
.hud-title i{width:8px;height:8px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 8px #ff5d5d;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.hud-count{color:var(--muted)}
.hud-count b{color:var(--green);font-size:1.15rem;font-family:"Consolas",monospace}
#scanCanvas{display:block;width:100%;height:auto;background:#04070d}
.scan-status{
  padding:10px 18px;border-top:1px solid var(--line);
  font-size:.82rem;color:#7d90b5;letter-spacing:.5px;min-height:38px;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.p2-points{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pp{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--card);padding:9px 20px;
}
.pp-k{color:var(--cyan);font-weight:700;font-size:.92rem}
.pp-v{color:var(--muted);font-size:.88rem}

/* ===== 3 优点对照 ===== */
.vs-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.vs-row{
  display:grid;grid-template-columns:90px 1.25fr 1fr;align-items:center;gap:22px;
  border:1px solid var(--line);border-radius:16px;
  background:var(--card);padding:22px 30px;
}
.vs-cat{
  font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;
}
.vs-win{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;color:#dce8ff}
.vs-win b{color:var(--cyan);font-size:1.25em}
.vs-lose{font-size:.92rem;color:#7488ac;position:relative;padding-left:18px}
.vs-lose::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:#5a6b8c;border-radius:2px}
.footnote{font-size:.82rem;color:#64779c}

/* ===== 通用流程（回收页） ===== */
.flow{display:flex;align-items:stretch;gap:10px;margin-bottom:28px}
.flow-step{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 20px;transition:transform .3s,border-color .3s;
}
.flow-step:hover{transform:translateY(-5px);border-color:rgba(62,224,255,.4)}
.flow-no{font-family:"Consolas",monospace;color:var(--cyan);font-size:1.25rem;font-weight:700;margin-bottom:10px}
.flow-step h4{font-size:1.08rem;margin-bottom:8px}
.flow-step p{font-size:.9rem;color:var(--muted);line-height:1.7}
.flow-step b{color:var(--cyan)}
.flow-arrow{display:flex;align-items:center;color:var(--cyan-d);font-size:1.4rem;flex:none}
.scene-stat{
  display:flex;align-items:center;gap:22px;
  background:linear-gradient(90deg,rgba(255,180,84,.08),rgba(255,180,84,.02));
  border:1px solid rgba(255,180,84,.3);border-left:4px solid var(--warn);
  border-radius:12px;padding:18px 28px;color:#d8e2f5;line-height:1.7;font-size:.98rem;
}
.ss-now{flex:1;text-align:center}
.ss-new{flex:1.15;text-align:center}
.ss-now b{color:var(--warn)}
.ss-new b{color:var(--green)}
.ss-arrow{font-style:normal;color:var(--warn);font-size:1.5rem;flex:none;opacity:.85}

/* ===== 5 无人收银 ===== */
.checkout{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:30px}
.co-step{
  flex:1;max-width:280px;text-align:center;
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  padding:30px 22px 24px;transition:transform .3s,border-color .3s;
}
.co-step:hover{transform:translateY(-5px);border-color:rgba(79,140,255,.45)}
.co-ico{height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.co-step h4{font-size:1.15rem;margin-bottom:7px}
.co-step p{font-size:.9rem;color:var(--muted)}
.co-arrow{color:var(--blue);font-size:1.6rem;flex:none}

/* 购物篮（商品在篮内） */
.basket{position:relative;width:96px;height:70px}
.basket::before{
  content:"";position:absolute;left:4px;right:4px;bottom:0;height:52px;
  border:2px solid rgba(122,168,255,.75);border-top:none;border-radius:0 0 10px 10px;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(122,168,255,.28) 11px 13px);
}
.basket::after{
  content:"";position:absolute;left:26px;right:26px;top:6px;height:18px;
  border:2px solid rgba(122,168,255,.75);border-bottom:none;border-radius:20px 20px 0 0;
}
.basket span{
  position:absolute;bottom:14px;width:14px;height:14px;border-radius:4px;
  background:rgba(62,224,255,.7);box-shadow:0 0 10px rgba(62,224,255,.5);
}
.basket span:nth-child(1){left:22px}
.basket span:nth-child(2){left:41px;bottom:22px;background:rgba(53,217,154,.75);box-shadow:0 0 10px rgba(53,217,154,.5)}
.basket span:nth-child(3){left:60px}
.basket span:nth-child(4){left:41px;bottom:8px;background:rgba(140,170,255,.7)}

/* X 光通道门 + 篮在门中 */
.gate{position:relative;width:110px;height:86px}
.gate::before,.gate::after{
  content:"";position:absolute;top:0;bottom:6px;width:12px;
  border:2px solid rgba(62,224,255,.65);border-radius:6px;
  background:rgba(62,224,255,.08);
}
.gate::before{left:8px}
.gate::after{right:8px}
.gate-beam{
  position:absolute;left:20px;right:20px;top:8px;bottom:12px;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(120,240,255,.28) 45%,rgba(180,248,255,.75) 50%,rgba(120,240,255,.28) 55%,transparent);
  animation:beamSlide 2.2s ease-in-out infinite;
}
@keyframes beamSlide{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
.gate-basket{position:absolute;left:26px;right:26px;bottom:8px;height:34px;
  border:1.5px solid rgba(120,240,255,.55);border-radius:0 0 7px 7px;
  background:rgba(62,224,255,.06);
}
.gate-basket span{position:absolute;bottom:8px;width:9px;height:9px;border-radius:2px;background:rgba(120,240,255,.85);box-shadow:0 0 8px rgba(120,240,255,.8)}
.gate-basket span:nth-child(1){left:12px}
.gate-basket span:nth-child(2){left:26px}
.gate-basket span:nth-child(3){left:40px}

.co-check{
  width:74px;height:74px;border-radius:50%;
  border:2.5px solid var(--green);color:var(--green);
  font-size:2.2rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px rgba(53,217,154,.35);
  animation:checkPulse 2s ease-in-out infinite;
}
@keyframes checkPulse{50%{box-shadow:0 0 44px rgba(53,217,154,.6)}}
.co-note{
  text-align:center;color:var(--muted);font-size:1rem;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  max-width:680px;margin:0 auto;padding:15px 26px;
}

/* ===== 6 收尾 ===== */
.finale{text-align:center}
.finale .eyebrow{margin-bottom:24px}
.finale h2{margin-bottom:20px}
.finale-sub{color:var(--muted);font-size:1.05rem;margin:0 auto 34px}
.finale-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* 收尾信息卡：专利 + 联系方式 */
.meta-card{
  margin:44px auto 0;max-width:640px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:22px 32px;display:flex;flex-direction:column;gap:18px;
}
.meta-patent{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.95rem;color:#c6d4ee}
.patent-badge{
  display:inline-block;font-size:.78rem;color:var(--green);
  border:1px solid rgba(53,217,154,.5);border-radius:6px;padding:2px 10px;
  background:rgba(53,217,154,.08);white-space:nowrap;
}
.patent-no{color:var(--muted);font-family:"Consolas",monospace;font-weight:400;font-size:.88rem}
.meta-divider{height:1px;background:var(--line)}
.meta-contact{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.kv{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:#c6d4ee}
.kv em{font-style:normal;color:#64779c;font-size:.78rem;letter-spacing:1px}
a.kv:hover{color:var(--cyan)}

/* ===== 7 扫码带走 ===== */
.qr-page{text-align:center;display:flex;flex-direction:column;align-items:center}
.qr-sub{color:var(--muted);margin:-6px 0 26px;font-size:1.02rem}
.qr-card{
  background:#fff;border-radius:22px;padding:18px;
  box-shadow:0 18px 60px rgba(20,90,140,.45),0 0 80px rgba(62,224,255,.16);
  animation:plateFloat 7s ease-in-out infinite;
}
.qr-card img{display:block;width:min(34vw,300px);height:auto;border-radius:8px}
.qr-url{margin-top:20px;font-family:"Consolas",monospace;font-size:1.05rem;color:var(--cyan);letter-spacing:1px}

/* 自动轮播按钮激活态 */
#autoBtn{font-size:.95rem}
#autoBtn.on{
  background:rgba(62,224,255,.18);border-color:rgba(62,224,255,.7);
  color:var(--cyan);box-shadow:0 0 16px rgba(62,224,255,.35);
}

/* ===== 底部控制 ===== */
.deck-ctrl{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:14px;
  background:rgba(10,18,36,.7);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;backdrop-filter:blur(8px);
}
.ctrl-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;
}
.ctrl-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.fs-btn{font-size:.95rem}
.dots{display:flex;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#33456b;cursor:pointer;transition:all .25s;border:none;padding:0}
.dot.active{background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:scale(1.25)}
.page-no{
  position:fixed;right:30px;bottom:28px;z-index:60;
  font-family:"Consolas",monospace;font-size:.85rem;color:#64779c;
}

/* ===== 响应式（手机） ===== */
@media (max-width:820px){
  .deck-ctrl{gap:10px;padding:6px 12px;bottom:16px}
  .ctrl-btn{width:30px;height:30px}
  .dots{gap:6px}
  .topnav{padding:14px 18px}
  .brand{font-size:.95rem}
  .nav-demo{font-size:.8rem;padding:6px 12px}
  h2{margin-bottom:18px;font-size:1.3rem;line-height:1.35}
  .eyebrow{margin-bottom:14px}
  /* 封面：单列，真实样片提到副标题下方 */
  .hero{grid-template-columns:1fr;gap:0}
  .hero-main{display:contents}
  .hero .eyebrow{justify-self:start;order:1}
  h1{order:2}
  .hero-sub{order:3;margin:12px 0 14px}
  .hero-plate{order:4;width:min(60vw,236px);margin:0 auto 18px}
  .plate-hud{display:none}
  .plate-img{border-radius:16px;animation:none}
  .chips{order:5;flex-wrap:nowrap;gap:9px;margin-bottom:22px}
  .chip{flex:1;min-width:0;padding:11px 8px;align-items:center;text-align:center}
  .chip b{font-size:1.06rem;white-space:nowrap}
  .chip span{font-size:.72rem;white-space:nowrap}
  .hero-cta{order:6}
  .scroll-hint{order:7;display:none}
  /* 数据条：现状 → 方案 竖排对比 */
  .scene-stat{flex-direction:column;gap:8px;padding:14px 18px;font-size:.86rem}
  .ss-arrow{transform:rotate(90deg);font-size:1.15rem;line-height:1}
  .ss-now,.ss-new{line-height:1.6}
  /* 收尾信息卡：轻量化紧凑排列 */
  .finale-sub{margin-bottom:20px}
  .meta-card{margin-top:20px;padding:14px 18px;gap:11px;background:transparent}
  .meta-patent{flex-direction:row;gap:8px;font-size:.8rem}
  .patent-badge{font-size:.68rem;padding:1px 8px}
  .patent-text{font-size:.78rem}
  .patent-no{font-size:.74rem}
  .meta-divider{margin:0 8px}
  .meta-contact{flex-direction:row;flex-wrap:wrap;gap:7px 16px}
  .kv{font-size:.82rem;justify-content:center}
  .kv em{display:none}
  /* 原理页 */
  .pp{padding:7px 14px}
  .p2-points{gap:9px;margin-top:16px}
  .pp-k{font-size:.84rem}
  .pp-v{font-size:.8rem}
  /* 优点页 */
  .vs-row{grid-template-columns:52px 1fr;gap:6px 14px;padding:15px 18px}
  .vs-cat{grid-row:span 2;font-size:1.5rem}
  .vs-win{font-size:1.02rem}
  .vs-lose{font-size:.82rem;padding-left:14px}
  /* 流程竖排但压扁：编号+标题一行，描述第二行 */
  .flow{flex-direction:column;gap:0}
  .flow-arrow{transform:rotate(90deg);justify-content:center;height:14px}
  .flow-step{padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .flow-no{margin:0;font-size:1.05rem}
  .flow-step h4{margin:0;font-size:1rem}
  .flow-step p{width:100%;margin:3px 0 0 0;font-size:.84rem;line-height:1.5;padding-left:42px}
  /* 收银页 */
  .checkout{flex-direction:column;gap:8px}
  .co-arrow{transform:rotate(90deg)}
  .co-step{max-width:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 20px}
  .co-step h4{margin:0;flex:none;min-width:4.5em;font-size:1rem}
  .co-step p{flex:1}
  .co-ico{height:64px;width:72px;margin:0;flex:none}
  .basket{transform:scale(.78)}
  .gate{transform:scale(.78)}
  .co-check{width:54px;height:54px;font-size:1.6rem}
  .co-step h4{margin-bottom:3px}
  /* 扫码页 */
  .qr-sub{margin:-2px 0 16px;font-size:.86rem}
  .qr-card{padding:12px;border-radius:16px}
  .qr-card img{width:min(58vw,236px)}
  .qr-url{margin-top:14px;font-size:.92rem}
  .page-no{display:none}
}
@media (max-width:360px){
  h1{font-size:2.15rem}
  .hero-plate{width:min(52vw,180px)}
}