/* =========================================================================
   绿培官网 v3.6（2026-09-20）
   ① 首页「一屏」版式：整页无滚动条，首页内容分 3 屏在屏内翻（滚轮/方向键/圆点/滑动）
      高度全部走 vh 钳制（clamp），矮屏自动压紧；deck.js 还有一道自动缩放兜底
   ② 悠芯鲜 C 位环形图鉴（JS：js/ring36.js）—— 全部用带包装的包装正面照
   ③ 泰塔悠 3D 立体转动 + 开袋（JS：js/pouch36.js）—— 素材为 2026-09-20 收到的袋装正面照
   全站字体见 css/site.css 的 --hei（黑体栈）
   ========================================================================= */

/* ================= ① 首页一屏 ================= */
html.deckmode,html.deckmode body{height:100%;overflow:hidden}
.deck{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--ink)}
.deck header.nav{position:relative;top:auto;z-index:60;background:var(--ink)}
.deck header.nav .wrap{height:clamp(64px,8.6vh,80px)}
.deck .nav-links{gap:clamp(12px,1.6vw,24px);font-size:clamp(12px,1.35vh,14px)}
.deck .nav-cta{padding:clamp(5px,.8vh,9px) clamp(11px,1.2vw,18px);font-size:clamp(11.5px,1.3vh,13px)}
/* 手机端（≤860px）保留「菜单」按钮：首页一屏版同样要能进其它栏目（2026-09-22 修） */
@media (min-width:861px){ .deck header.nav .burger{display:none} }

.screen{position:relative;flex:1 1 auto;min-height:0;overflow:clip;background:var(--ink)}
.page{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .5s ease,transform .62s cubic-bezier(.2,.7,.3,1),visibility .5s}
.page.on{opacity:1;visibility:visible;transform:none}
.page>.fit{width:100%;height:100%;display:flex;flex-direction:column;transform-origin:50% 50%}
.p2>.fit,.p3>.fit{height:auto;max-height:100%;justify-content:center}

/* ---- 屏①：主张 + 五段能力 + 双入口 ‖ 相框组 → 货车通栏 → 数据条 ---- */
.p1 .hero{flex:1 1 auto;min-height:0;display:flex;align-items:center;position:relative;overflow:hidden}
.p1 .hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 78% 42%,rgba(205,232,107,.10) 0%,rgba(6,36,24,0) 58%),
             radial-gradient(ellipse at 12% 96%,rgba(65,189,142,.12) 0%,rgba(6,36,24,0) 55%)}
.p1 .hero .wrap{position:relative;z-index:2;width:min(1280px,94vw)}
.p1 .hero35-grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  gap:clamp(14px,2.2vw,36px);align-items:center}
.p1 .hero35-left{min-width:0}
.p1 .kick{font-family:var(--latin);font-size:clamp(9.5px,.95vh,12.5px);letter-spacing:.2em;color:var(--lime)}
.p1 h1{color:#fff;font-size:clamp(19px,3.2vh,42px);line-height:1.3;margin-top:clamp(6px,1.3vh,18px)}
.p1 h1 em{font-style:normal;color:var(--lime)}
.p1 .en-title{font-family:var(--latin);font-size:clamp(9.5px,1.02vh,12.5px);color:#8FBBA3;
  margin-top:clamp(5px,.9vh,12px);line-height:1.7}
.p1 .sub{color:#D3E2D7;font-size:clamp(12.5px,1.55vh,17px);line-height:1.7;margin-top:clamp(6px,1.1vh,14px)}
.p1 .sub .en{display:block;color:#93AFA0;font-size:clamp(10.5px,1.25vh,14px);margin-top:clamp(4px,.7vh,9px);line-height:1.65}

/* 五段能力：一屏版做成一条紧凑横排（原文案不动） */
.p1 .cap5{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(5px,.6vw,9px);
  margin-top:clamp(8px,1.5vh,24px)}
.p1 .cap5 .c{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:clamp(6px,.95vh,13px) clamp(6px,.55vw,9px)}
.p1 .cap5 .c i{display:flex;align-items:center;justify-content:center;
  width:clamp(16px,2.1vh,24px);height:clamp(16px,2.1vh,24px);border-radius:6px;
  background:rgba(205,232,107,.16);color:var(--lime);font-family:var(--latin);font-style:normal;
  font-size:clamp(8.5px,.9vh,11px);margin-bottom:clamp(4px,.7vh,9px)}
.p1 .cap5 .c b{display:block;color:#fff;font-size:clamp(10.5px,1.2vh,12.5px);font-weight:600;
  white-space:nowrap;letter-spacing:-.02em}
.p1 .cap5 .c span{display:block;color:#9FBCAC;font-size:clamp(9px,1.02vh,11px);line-height:1.55;
  margin-top:clamp(3px,.6vh,6px)}

/* 双入口卡 */
.p1 .entry35{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.8vw,14px);margin-top:clamp(7px,1.2vh,18px)}
.p1 .entry35 a{background:rgba(255,255,255,.93);border-radius:12px;
  padding:clamp(8px,1.25vh,18px) clamp(10px,1.1vw,20px);display:block;
  transition:transform .25s ease,box-shadow .25s ease}
.p1 .entry35 a:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.p1 .entry35 .cap{font-family:var(--latin);font-size:clamp(8.5px,.88vh,11px);letter-spacing:.18em;color:#12805c}
.p1 .entry35 a.b .cap{color:#a81f10}
.p1 .entry35 h3{font-size:clamp(12px,1.45vh,17px);margin:clamp(4px,.6vh,8px) 0 clamp(3px,.5vh,7px)}
.p1 .entry35 p{font-size:clamp(9.5px,1.06vh,12.5px);color:#55635B;line-height:1.65}

/* 相框组：高度跟着屏高走，高度够时保持原来的手感 */
.p1 .fr3d-stage{position:relative;height:clamp(230px,44vh,560px);border-radius:16px;overflow:hidden;
  background:radial-gradient(72% 78% at 52% 44%,#0B3B24 0%,#062418 74%);
  perspective:1200px;perspective-origin:50% 46%;touch-action:manipulation;isolation:isolate}
.p1 .fr3d-stage:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(205,232,107,.07) 1px,rgba(0,0,0,0) 1px),
                   linear-gradient(90deg,rgba(205,232,107,.07) 1px,rgba(0,0,0,0) 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(74% 76% at 52% 44%,#000 6%,rgba(0,0,0,0) 78%);
          mask-image:radial-gradient(74% 76% at 52% 44%,#000 6%,rgba(0,0,0,0) 78%)}
.p1 .fr3d-legend{gap:clamp(8px,1vw,16px);margin-top:clamp(5px,.9vh,14px);font-size:clamp(9px,1.02vh,11.5px)}

/* 货车通栏（一屏版：高度按屏高收） */
.deck .truckband{position:relative;flex:0 0 auto;height:clamp(64px,10.5vh,132px);background:#08281B;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.deck .truckband .glow{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(205,232,107,.06),rgba(6,36,24,0) 30%,rgba(6,36,24,0) 70%,rgba(65,189,142,.07))}
.deck .truckband .road{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,#23533C,#16382B);border-top:1px solid rgba(205,232,107,.32)}
.deck .truckband .road:before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,0) 2px 9px)}
.deck .truckband .road:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(205,232,107,0),rgba(205,232,107,.35),rgba(205,232,107,0))}
.deck .truckband .dashes{position:absolute;left:0;right:0;bottom:5%;height:3px;opacity:.62;
  background:repeating-linear-gradient(90deg,#CDE86B 0 44px,rgba(0,0,0,0) 44px 96px);
  animation:dashmove 1.05s linear infinite}
.deck .truckband .tread{position:absolute;left:8px;bottom:2%;width:230px;height:14px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.5),rgba(0,0,0,0) 74%);
  animation:drive 16s linear infinite -5.2s}
.deck .truckband img.truck{position:absolute;bottom:1%;height:clamp(46px,8vh,102px);width:auto;
  animation:drive 16s linear infinite -5.2s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
@keyframes dashmove{from{background-position-x:0}to{background-position-x:-96px}}
@keyframes drive{from{transform:translateX(-32vw)}to{transform:translateX(112vw)}}

/* 数据条（一屏版：6 格紧凑） */
.deck .stats{flex:0 0 auto;background:var(--ink);border-top:1px solid rgba(255,255,255,.06)}
.deck .stats .wrap{display:grid;grid-template-columns:repeat(6,1fr)}
.deck .stats .stat{padding:clamp(5px,1.2vh,16px) 10px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.deck .stats .stat:last-child{border-right:0}
.deck .stats .stat b{display:block;font-family:var(--latin);color:var(--lime);
  font-size:clamp(12px,2vh,23px);line-height:1.25}
.deck .stats .stat span{display:block;color:#8FBBA3;font-size:clamp(8.5px,1vh,11px);line-height:1.5;
  margin-top:clamp(2px,.5vh,6px)}

/* ---- 屏②③：通用紧凑版式 ---- */
.p2,.p3{padding:clamp(10px,2vh,30px) 0}
.p2 .wrap,.p3 .wrap{width:min(1280px,92vw)}
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(8px,1.6vh,26px)}
.pg-head h2{color:#fff;font-size:clamp(18px,2.9vh,30px);line-height:1.3}
.pg-head h2 .eng{display:block;font-family:var(--latin);font-weight:400;color:#7FB3A6;
  font-size:clamp(10px,1.25vh,12px);letter-spacing:.18em;margin-top:clamp(4px,.7vh,10px)}
.pg-head p{color:#9FBCAC;font-size:clamp(11.5px,1.5vh,14px);line-height:1.75;width:min(620px,52%);text-align:right}
.p2 .hubcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px)}
.p2 .hubcard{border-radius:14px;padding:clamp(10px,1.7vh,24px) clamp(10px,1.1vw,22px);color:#fff;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.p2 .hubcard:after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.07)}
.p2 .hubcard .no{font-family:var(--latin);font-size:clamp(10px,1.25vh,12px);letter-spacing:.18em;opacity:.85}
.p2 .hubcard h3{color:#fff;font-size:clamp(15.5px,2.2vh,21px);margin:clamp(6px,.9vh,11px) 0 clamp(6px,.9vh,13px)}
.p2 .hubcard p{font-size:clamp(11.5px,1.5vh,14px);line-height:1.78;color:rgba(255,255,255,.9)}
.p2 .hubcard .kv{margin-top:auto;padding-top:clamp(7px,1.2vh,16px);display:flex;gap:16px;flex-wrap:wrap}
.p2 .hubcard .kv div{font-size:clamp(11px,1.4vh,12.5px);color:rgba(255,255,255,.86)}
.p2 .hubcard .kv b{display:block;font-family:var(--latin);font-size:clamp(15px,2.1vh,20px);color:#fff}
.p2 .hubcard.g{background:linear-gradient(152deg,#12805c,#0a4e39)}
.p2 .hubcard.b{background:linear-gradient(152deg,#1f6fbf,#123f73)}
.p2 .hubcard.y{background:linear-gradient(152deg,#a8761a,#6d4a0c)}
.p2 .serve-types{display:flex;flex-wrap:wrap;gap:clamp(6px,.7vw,12px);margin-top:clamp(9px,1.5vh,22px)}
.p2 .serve-types span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:clamp(7px,1vh,12px) clamp(11px,1.1vw,22px);font-size:clamp(12px,1.65vh,14.5px);color:#DCE9E0}
.p2 .serve-note{color:#7FB3A6;font-size:clamp(10.5px,1.3vh,12.5px);margin-top:clamp(8px,1.2vh,14px);line-height:1.75}

.p3 .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,20px)}
.p3 .card{border-radius:14px;padding:clamp(10px,1.7vh,24px) clamp(10px,1.2vw,24px);background:var(--paper);
  border:1px solid var(--line);display:flex;flex-direction:column}
.p3 .card .en{font-family:var(--latin);font-size:clamp(8.5px,.92vh,11.5px);letter-spacing:.18em}
.p3 .card h3{font-size:clamp(15.5px,2.2vh,21px);margin-top:clamp(5px,.8vh,10px)}
.p3 .card p{font-size:clamp(11.5px,1.5vh,14px);line-height:1.78;margin-top:clamp(6px,.9vh,12px)}
.p3 .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:clamp(6px,1vh,14px)}
.p3 .tag{font-size:clamp(11px,1.4vh,12.5px);padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--cream);color:#3D4A43}
.p3 .coop{margin-top:clamp(9px,1.5vh,22px);display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:clamp(9px,1.4vh,20px) clamp(12px,1.3vw,26px)}
.p3 .coop h3{font-size:clamp(15px,2.1vh,20px);color:var(--ink)}
.p3 .coop p{font-size:clamp(11.5px,1.45vh,13.5px);color:#5D6A62;margin-top:6px}
.p3 .btns{display:flex;gap:10px;flex-wrap:wrap}
.p3 .btn{padding:clamp(8px,1.1vh,12px) clamp(12px,1.2vw,20px);border-radius:999px;font-size:clamp(12px,1.5vh,13.5px)}
.p3 .brandpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,20px)}
.p3 .bcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(9px,1.5vh,22px) clamp(10px,1.2vw,24px);display:flex;gap:clamp(10px,1.2vw,20px)}
.p3 .bcard .txt{min-width:0;display:flex;flex-direction:column}
.p3 .bcard h3{font-size:clamp(16px,2.3vh,21px)}
.p3 .bcard .en2{font-family:var(--latin);font-size:clamp(8.5px,.92vh,11.5px);letter-spacing:.16em;color:var(--muted);
  margin-top:4px}
.p3 .bcard p{font-size:clamp(11.5px,1.45vh,13.5px);line-height:1.75;color:#55635B;margin-top:clamp(6px,.9vh,12px)}
.p3 .bcard .shot{flex:0 0 auto;width:clamp(74px,9vw,150px);background:var(--cream);border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.p3 .bcard .shot img{width:100%;height:100%;object-fit:contain}

/* 固定页脚条（一屏版：不做整段页脚） */
.deckfoot{flex:0 0 auto;background:#04170F;border-top:1px solid rgba(255,255,255,.07);
  height:clamp(24px,3.4vh,34px);display:flex;align-items:center}
.deckfoot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:#7C9587;font-size:clamp(8.5px,.95vh,11.5px)}
.deckfoot .wrap span{white-space:nowrap}
.deckfoot .fc{color:#8FBBA3}

/* 翻屏圆点 */
.pager{position:fixed;right:clamp(8px,.9vw,16px);top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:clamp(7px,1.1vh,13px);align-items:flex-end}
.pager button{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font:inherit;color:#7FB3A6;font-size:clamp(9px,.98vh,11.5px);letter-spacing:.06em;padding:2px 0}
.pager button i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);transition:background .25s,transform .25s,box-shadow .25s}
.pager button em{font-style:normal;opacity:0;transition:opacity .25s;white-space:nowrap}
.pager button:hover em,.pager button.on em{opacity:1}
.pager button.on{color:var(--lime)}
.pager button.on i{background:var(--lime);border-color:var(--lime);transform:scale(1.25);
  box-shadow:0 0 12px rgba(205,232,107,.55)}

/* ================= ② 悠芯鲜 C 位环形图鉴 ================= */
.uxx-gallery{background:radial-gradient(80% 100% at 50% 0%,#0C3F27 0%,#062418 70%);border-radius:20px;
  padding:clamp(14px,2.4vh,32px) clamp(14px,1.8vw,34px) clamp(12px,1.8vh,24px)}
#ringStage{position:relative;height:clamp(320px,52vh,540px);border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 40%,#0C3F27 0%,#062418 74%);
  perspective:1500px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab}
#ringStage.dragging{cursor:grabbing}
#ringStage:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(205,232,107,.06) 1px,rgba(0,0,0,0) 1px),
                   linear-gradient(90deg,rgba(205,232,107,.06) 1px,rgba(0,0,0,0) 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 76% at 50% 42%,#000 8%,rgba(0,0,0,0) 76%);
          mask-image:radial-gradient(70% 76% at 50% 42%,#000 8%,rgba(0,0,0,0) 76%)}
#ringStage .floor{position:absolute;left:12%;right:12%;bottom:52px;height:60px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%);pointer-events:none}
#ringStage .ring{position:absolute;inset:0;pointer-events:none}
#ringStage .rc{position:absolute;left:50%;top:47%;margin:0;padding:8px;border:0;border-radius:14px;background:#fff;
  box-shadow:0 20px 40px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto;will-change:transform,filter;
  transition:box-shadow .3s ease;overflow:hidden}
#ringStage .rc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;background:#fff}
#ringStage .rc .nm{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;font-size:12px;color:#fff;
  padding:16px 9px 7px;border-radius:0 0 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(rgba(6,36,24,0),rgba(6,36,24,.84));opacity:0;transition:opacity .25s}
#ringStage .rc.is-c .nm{opacity:1}
#ringStage .rc.is-c{box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 2px var(--lime),0 0 34px rgba(205,232,107,.34)}
#ringStage .rc:focus-visible{outline:3px solid var(--lime);outline-offset:5px}
/* 待补充（缺素材的品类：占位瓦片，不是假图） */
#ringStage .rc.todo{background:repeating-linear-gradient(135deg,#12452F 0 14px,#175338 14px 28px);
  border:2px dashed rgba(205,232,107,.55);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:14px}
#ringStage .rc.todo b{color:var(--lime);font-size:16px;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
#ringStage .rc.todo span{color:#DCE9E0;font-size:13px;line-height:1.6}
#ringStage .rc.todo em{font-style:normal;color:#7FB3A6;font-size:11px}
.ring-hint{position:absolute;left:18px;bottom:14px;z-index:5;font-size:12px;color:#8FBBA3;letter-spacing:.02em}
.ring-hint b{color:var(--lime);font-weight:600}
.ringnav{position:absolute;right:16px;bottom:12px;z-index:5;display:flex;gap:8px}
.ringnav button,.at-filt button{font:inherit;font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--cream);border:1px solid rgba(255,255,255,.18);
  transition:background .2s,border-color .2s,color .2s}
.ringnav button:hover,.at-filt button:hover{background:rgba(205,232,107,.12);border-color:rgba(205,232,107,.5)}
.at-filt{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.at-filt button{color:#B9CFC2}
.at-filt button.on{background:var(--lime);color:#062418;border-color:var(--lime);font-weight:700}

/* C 位图文详情面板（点 C 位展开） */
#detail,#pDetail{margin-top:14px;border:1px solid rgba(205,232,107,.22);border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(11,59,36,.92),rgba(6,36,24,.95));
  max-height:0;opacity:0;transition:max-height .55s cubic-bezier(.2,.7,.3,1),opacity .35s ease}
#detail.on,#pDetail.on{max-height:640px;opacity:1}
#detail .in,#pDetail .in{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;padding:22px 26px}
#detail img,#pDetail img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:14px}
#detail h3,#pDetail h3{margin:2px 0 4px;font-size:22px;color:#fff}
#detail .en,#pDetail .en{font-family:var(--latin);font-size:12px;letter-spacing:.16em;color:var(--lime)}
#detail .sell,#pDetail .sell{margin:12px 0 14px;font-size:14.5px;line-height:1.85;color:#D3E2D7}
#detail dl,#pDetail dl{display:grid;grid-template-columns:96px 1fr;gap:8px 14px;margin:0;font-size:13.5px}
#detail dt,#pDetail dt{color:#6B7A72}
#detail dd,#pDetail dd{margin:0;color:#D3E2D7}
#detail dd.todo,#pDetail dd.todo{color:var(--lime);border-bottom:1px dashed rgba(205,232,107,.5);display:inline-block}
#detail .x,#pDetail .x{position:absolute;right:14px;top:12px;background:none;border:0;color:#8FBBA3;
  font-size:20px;cursor:pointer;z-index:3}
#detail,#pDetail{position:relative}
.uxx-lineup{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.uxx-lineup span{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#C6D8CB}
.uxx-lineup span.todo{border-style:dashed;border-color:rgba(205,232,107,.5);color:var(--lime)}
.uxx-claim{margin-top:10px;color:var(--lime);font-size:15px;letter-spacing:.04em}

/* ================= ③ 泰塔悠 3D + 开袋 ================= */
#pouchWrap{position:relative;height:clamp(380px,62vh,600px);border-radius:18px;overflow:hidden;
  background:radial-gradient(62% 72% at 50% 38%,#1B3A2A 0%,#08281B 46%,#3A1010 100%)}
#pouchWrap:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 78%,rgba(255,120,60,.16),rgba(0,0,0,0) 62%)}
#pStage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 46%;cursor:grab}
#pStage.dragging{cursor:grabbing}
#pObj{position:absolute;left:50%;top:50%;width:clamp(210px,20vw,330px);height:clamp(250px,24vw,400px);
  transform-style:preserve-3d;transform:translate(-50%,-50%)}
#pObj .pcard{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5);
  transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .5s ease}
#pObj .pcard img{display:block;width:100%;height:100%;object-fit:cover}
#pObj .pseal{position:absolute;left:0;right:0;top:0;height:26%;overflow:hidden;transform-origin:50% 100%;
  border-radius:18px 18px 0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .85s cubic-bezier(.3,.9,.3,1),opacity .8s ease}
#pObj .pseal img{position:absolute;left:0;top:0;width:100%;height:384.6%}
#pObj.open .pseal{transform:perspective(600px) rotateX(-104deg) translateY(-14px) scaleX(.98);opacity:.9}
#pSheen{position:absolute;inset:0;border-radius:18px;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:radial-gradient(46% 40% at var(--sx,30%) var(--sy,22%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%);
  transition:opacity .3s}
#pObj.open #pSheen{opacity:.3}
#pObj .pprod{position:absolute;left:50%;top:54%;width:62%;height:62%;margin:-31% 0 0 -31%;border-radius:50%;
  overflow:hidden;box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.14);
  transform:scale(.28);opacity:0;transition:transform .8s cubic-bezier(.2,1.1,.3,1) .18s,opacity .5s ease .18s}
#pObj .pprod img{display:block;width:100%;height:100%;object-fit:cover}
#pObj.open .pprod{transform:scale(1);opacity:1}
#pObj.open .pcard{transform:translateY(52px) scale(.90);opacity:.94}
#pShadow{position:absolute;left:50%;top:78%;width:clamp(220px,24vw,400px);height:54px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0) 72%);
  transition:opacity .5s}
#pObj.open ~ #pShadow{opacity:.5}
.pmode{position:absolute;left:18px;bottom:14px;z-index:4;font-size:12px;color:#8FBBA3}
.pmode b{color:var(--lime);font-weight:600}
.pbadge{position:absolute;right:16px;top:14px;z-index:4;font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(6,36,24,.7);color:var(--lime);border:1px solid rgba(205,232,107,.4)}
.tty-grid{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);gap:26px;align-items:center}

@media (max-width:1080px){
  #detail .in,#pDetail .in{grid-template-columns:1fr}
  #ringStage{height:440px;perspective:1100px}
  #pouchWrap{height:460px}
  .tty-grid{grid-template-columns:1fr;gap:18px}
}
@media (max-width:860px){
  .screen{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .screen::-webkit-scrollbar{display:none}
  .page{position:relative;inset:auto;display:none;opacity:1;visibility:visible;transform:none;min-height:100%}
  .page.on{display:flex}
  .page>.fit{height:auto;min-height:100%}
  .p1 .hero35-grid{grid-template-columns:1fr;gap:16px}
  .p1 .cap5{grid-template-columns:repeat(3,1fr)}
  .p1 .entry35{grid-template-columns:1fr}
  .p1 .fr3d-stage{height:360px}
  .deck .stats .wrap{grid-template-columns:repeat(3,1fr)}
  .deck .stats .stat:nth-child(3n){border-right:0}
  .p2 .hubcards{grid-template-columns:1fr}
  .p3 .grid2,.p3 .brandpair{grid-template-columns:1fr}
  .pg-head{flex-direction:column;align-items:flex-start}
  .pg-head p{width:100%;text-align:left}
  .deckfoot{height:auto;padding:8px 0}
  .deckfoot .wrap{flex-wrap:wrap;gap:6px}
}
@media (prefers-reduced-motion: reduce){
  .page{transition:none}
  .deck .truckband .dashes,.deck .truckband .tread,.deck .truckband img.truck{animation:none}
  #ringStage .rc,#pObj .pcard,#pObj .pseal,#pObj .pprod,#pShadow{transition:none}
}