/* ==========================================================
   灵宠沉默公益版 · 传奇游戏宣传页
   ========================================================== */

:root{
  --bg:#080503;
  --bg-2:#100805;
  --panel:#180c07;
  --panel-2:#0d0604;
  --gold:#f0c15a;
  --gold-lt:#ffe9b0;
  --gold-dk:#a9762a;
  --red:#e0231a;
  --red-lt:#ff5a35;
  --red-dk:#7d0f08;
  --text:#e9dfd2;
  --dim:#a08f80;
  --line:rgba(240,193,90,.18);
  --ff:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  --ff-num:Impact,"Arial Black","Haettenschweiler","PingFang SC",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;background:#080503;color-scheme:dark}

body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 熔岩底光 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(224,35,26,.30), transparent 62%),
    radial-gradient(760px 480px at 88% 18%, rgba(240,193,90,.11), transparent 65%),
    radial-gradient(700px 600px at 6% 62%, rgba(160,26,12,.16), transparent 68%),
    linear-gradient(180deg,#0a0604 0%,#080503 42%,#060302 100%);
}

/* 噪点 */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

#embers{position:fixed;inset:0;z-index:2;pointer-events:none}

.vignette{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.62) 100%);
}

main,footer{position:relative;z-index:4}

.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

::selection{background:var(--red);color:#fff}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

/* ==========================================================
   顶栏
   ========================================================== */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(8,4,2,.95);
  border-bottom-color:var(--line);
}
.topbar-in{
  width:min(1180px,100% - 48px);
  margin-inline:auto;
  height:64px;
  display:flex;
  align-items:center;
  gap:22px;
}
.tb-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  letter-spacing:.06em;
  white-space:nowrap;
}
.tb-brand b{
  font-weight:900;
  background:linear-gradient(180deg,#fff3d2,#e8ae42 70%,#b0771c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tb-brand i{
  font-style:normal;
  font-size:11px;
  padding:2px 7px;
  border:1px solid rgba(224,35,26,.55);
  border-radius:3px;
  color:#ff8a6d;
  letter-spacing:.14em;
}
.tb-flame{
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 10px 2px rgba(255,80,40,.9);
  animation:blink 3.2s ease-in-out infinite;
}
.tb-nav{
  margin-left:auto;
  display:flex;
  gap:26px;
  font-size:13px;
  color:var(--dim);
}
.tb-nav a{transition:color .2s;position:relative}
.tb-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:right .28s ease;
}
.tb-nav a:hover{color:var(--gold-lt)}
.tb-nav a:hover::after{right:0}

.tb-btn{
  margin-left:6px;
  padding:9px 20px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff6e0;
  border-radius:3px;
  background:linear-gradient(180deg,#e63a1c,#a8120a);
  border:1px solid rgba(255,180,120,.45);
  box-shadow:0 4px 16px rgba(220,40,15,.42),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s,box-shadow .2s,filter .2s;
  white-space:nowrap;
}
.tb-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.1);
  box-shadow:0 6px 22px rgba(255,60,30,.6),inset 0 1px 0 rgba(255,255,255,.3);
}

/* ==========================================================
   Hero
   ========================================================== */
.hero{
  position:relative;
  padding:100px 0 44px;
  text-align:left;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,660px);
  gap:clamp(24px,3.6vw,54px);
  align-items:center;
}
.hero-left{min-width:0}
.hero-rays{
  position:absolute;
  inset:-10% -10% auto -10%;
  height:760px;
  pointer-events:none;
  background:
    conic-gradient(from 200deg at 50% 12%,
      transparent 0deg,
      rgba(255,120,40,.10) 12deg,
      transparent 26deg,
      rgba(255,160,60,.07) 40deg,
      transparent 56deg);
  filter:blur(6px);
  opacity:.55;
}

/* 标签行 */
.hero-tags{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:13px;
}
.tag{
  font-size:12px;
  letter-spacing:.14em;
  padding:5px 13px;
  color:#d9c6ae;
  border:1px solid rgba(240,193,90,.26);
  background:linear-gradient(180deg,rgba(60,30,16,.72),rgba(20,10,6,.66));
  border-radius:2px;
}
.tag-hot{
  display:inline-flex;align-items:center;gap:7px;
  color:#ffd9c9;
  border-color:rgba(224,35,26,.6);
  background:linear-gradient(180deg,rgba(160,26,12,.6),rgba(70,10,6,.6));
  box-shadow:0 0 18px rgba(224,35,26,.28);
}
.tag-hot .blink{
  width:6px;height:6px;border-radius:50%;
  background:#ff5a35;
  box-shadow:0 0 10px 2px rgba(255,80,40,.95);
  animation:blink 3s ease-in-out infinite;
}
.tag-gold{
  color:#ffe6ad;
  border-color:rgba(240,193,90,.55);
  background:linear-gradient(180deg,rgba(120,84,28,.5),rgba(40,24,8,.6));
}

/* 主标题 */
.hero-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0;
  font-size:clamp(38px,4.8vw,68px);
  line-height:1;
  letter-spacing:.02em;
  font-weight:900;
  margin-bottom:10px;
}
.hero-title span{
  display:inline-block;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title .t1{
  background-image:linear-gradient(178deg,#fffaf0 4%,#ffe6ae 26%,#f6c65c 52%,#d8912c 76%,#8d5312 100%);
  filter:drop-shadow(0 2px 0 #4a1a05) drop-shadow(0 4px 10px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(255,140,40,.55));
}
.hero-title .t2{
  font-size:.64em;
  margin-top:1px;
  background-image:linear-gradient(178deg,#ffd2c0 0%,#ff6a3d 34%,#e0231a 64%,#7b0d06 100%);
  filter:drop-shadow(0 2px 0 #350703) drop-shadow(0 4px 12px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(224,35,26,.7));
  transform:skewX(-4deg);
}

.hero-sub{
  font-size:clamp(12px,1.4vw,14.5px);
  letter-spacing:.06em;
  color:#cbb9a4;
  margin-bottom:16px;
  text-wrap:balance;
}
.hero-sub b{color:#f4dcb6;font-weight:700}
.hero-sub i{
  font-style:normal;
  margin:0 10px;
  color:var(--red);
  opacity:.85;
}

/* 首图 */
.hero-shot{
  position:relative;
  width:100%;
  margin:0;
  border-radius:4px;
  isolation:isolate;
}
.hero-shot::before{
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-2;
  border-radius:8px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(255,120,30,.4), transparent 70%);
  filter:blur(26px);
  opacity:.85;
}
.hero-shot img{
  width:100%;
  height:auto;
  border-radius:3px;
  border:1px solid rgba(240,193,90,.48);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 26px 60px rgba(0,0,0,.75),
    0 0 50px rgba(255,90,30,.16);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;
}
.hero-shot:hover img{
  transform:translateY(-3px) scale(1.006);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 34px 74px rgba(0,0,0,.8),
    0 0 70px rgba(255,110,40,.3);
}
/* 四角装饰 */
.shot-corner{
  position:absolute;
  width:19px;height:19px;
  border:1.5px solid rgba(240,193,90,.75);
  filter:drop-shadow(0 0 6px rgba(255,170,60,.85));
  pointer-events:none;
}
.c1{top:-6px;left:-6px;border-right:0;border-bottom:0}
.c2{top:-6px;right:-6px;border-left:0;border-bottom:0}
.c3{bottom:-6px;left:-6px;border-right:0;border-top:0}
.c4{bottom:-6px;right:-6px;border-left:0;border-top:0}

/* CTA */
.hero-cta{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.btn::after{
  content:"";
  position:absolute;
  top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);
  transition:left .65s ease;
}
.btn:hover::after{left:140%}
.btn-ico{
  font-size:15px;
  opacity:.9;
  line-height:1;
}
.btn-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.btn-txt b{font-size:15px;font-weight:800;letter-spacing:.05em}
.btn-txt small{font-size:11px;opacity:.78;letter-spacing:.06em;margin-top:2px}

.btn-main{
  color:#fff8e8;
  background:linear-gradient(180deg,#ff5a2b 0%,#dd2210 48%,#97080a 100%);
  border-color:rgba(255,190,140,.5);
  box-shadow:
    0 10px 28px rgba(210,30,12,.5),
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -14px 24px rgba(90,0,0,.5);
  text-shadow:0 1px 2px rgba(80,0,0,.6);
}
.btn-main:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:
    0 16px 40px rgba(255,60,25,.62),
    0 0 34px rgba(255,90,40,.4),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-main:active{transform:translateY(0) scale(.99)}

.btn-ghost{
  color:#e5d3b9;
  background:linear-gradient(180deg,rgba(40,22,14,.85),rgba(14,7,5,.9));
  border-color:rgba(240,193,90,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  color:var(--gold-lt);
  border-color:rgba(240,193,90,.7);
  box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 22px rgba(240,193,90,.14);
}

.btn-xl{padding:13px 32px}
.btn-xl .btn-txt b{font-size:17px}
.btn-xl .btn-txt small{font-size:12px}

/* 数据条 */
.hero-stats{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  margin-bottom:10px;
  border-top:1px solid rgba(240,193,90,.14);
  border-bottom:1px solid rgba(240,193,90,.14);
  padding:8px 0;
  max-width:none;
  margin-inline:0;
}
.hero-stats li{
  flex:1 1 0;
  min-width:0;
  padding:0 10px;
  border-right:1px solid rgba(240,193,90,.1);
}
.hero-stats li:first-child{padding-left:0}
.hero-stats li:last-child{border-right:0}
.hero-stats em{
  display:block;
  font-family:var(--ff-num);
  font-size:clamp(17px,2.1vw,24px);
  font-variant-numeric:tabular-nums;
  font-style:normal;
  letter-spacing:.02em;
  background:linear-gradient(180deg,#fff2cf,#f0c15a 60%,#b47a24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(60,20,0,.9));
}
.hero-stats span{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  color:#8f7d6d;
  margin-top:1px;
}

.hero-note{
  font-size:11.5px;
  color:#8d7a6a;
  letter-spacing:.04em;
  text-wrap:balance;
}
.hero-note::before,.hero-note::after{
  content:"—";
  margin:0 8px;
  color:rgba(224,35,26,.6);
}

/* ==========================================================
   跑马灯
   ========================================================== */
.ticker{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(240,193,90,.22);
  border-bottom:1px solid rgba(240,193,90,.22);
  background:linear-gradient(180deg,rgba(90,14,6,.55),rgba(30,6,3,.75));
  padding:9px 0;
  white-space:nowrap;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:ticker 62s linear infinite;
  will-change:transform;
}
.ticker-group{
  display:flex;
  align-items:center;
  gap:22px;
  padding-right:22px;
  flex:0 0 auto;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font-size:12.5px;
  letter-spacing:.16em;
  color:#d5b98f;
}
.ticker i{
  font-style:normal;
  color:var(--red);
  font-size:10px;
  opacity:.9;
}

/* ==========================================================
   通用 section
   ========================================================== */
.sec{position:relative;padding:42px 0}
.sec-head{text-align:center;margin-bottom:16px}
.sec-kicker{
  display:block;
  font-size:9.5px;
  letter-spacing:.32em;
  color:rgba(240,193,90,.62);
  margin-bottom:4px;
  text-transform:uppercase;
}
.sec-head h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:clamp(21px,2.6vw,28px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.25;
  background:linear-gradient(180deg,#fff6dd,#f3cb72 56%,#b9801f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(50,18,0,.9)) drop-shadow(0 0 26px rgba(255,150,50,.24));
}
.sec-head h2::before,
.sec-head h2::after{
  content:"";
  flex:1 1 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,193,90,.45),rgba(240,193,90,.12));
  min-width:16px;
}
.sec-head h2::after{transform:scaleX(-1)}
.sec-head h2 em{
  font-style:normal;
  background:linear-gradient(180deg,#ffb59a,#ff4a2b 52%,#a8120a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sec-head p{
  margin-top:5px;
  font-size:11.5px;
  color:#9a8878;
  letter-spacing:.03em;
}

/* ==========================================================
   三职业
   ========================================================== */
.roles{padding-top:22px}
.role-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.role-card{
  position:relative;
  background:linear-gradient(180deg,#1c0e08 0%,#120806 46%,#0a0403 100%);
  border:1px solid rgba(240,193,90,.16);
  border-radius:5px;
  overflow:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .38s,box-shadow .38s;
}
.role-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,140,60,.09),transparent 34%);
}
.role-card:hover{
  transform:translateY(-6px);
  border-color:rgba(240,193,90,.5);
  box-shadow:0 22px 48px rgba(0,0,0,.66),0 0 40px rgba(240,150,50,.14);
}
.role-shot{
  position:relative;
  height:262px;
  overflow:hidden;
  background:#0a0403;
}
.role-shot img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 32%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 74%,transparent 100%);
}
.role-card:hover .role-shot img{transform:scale(1.045)}
.role-glow{
  position:absolute;
  inset:auto 0 -40% 0;
  height:70%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(255,110,40,.34),transparent 72%);
  pointer-events:none;
}
.role-body{
  position:relative;
  z-index:3;
  padding:0 15px 13px;
  margin-top:-24px;
}
.role-body h3{
  font-size:18px;
  font-weight:900;
  letter-spacing:.2em;
  background:linear-gradient(180deg,#fff4d6,#f0c15a 62%,#a9762a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(40,14,0,.9));
}
.role-tag{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:.08em;
  color:#ffb59a;
  border-left:2px solid var(--red);
  padding-left:7px;
  margin:3px 0 6px;
}
.role-desc{
  font-size:11px;
  line-height:1.62;
  color:#9d8b7b;
  margin-bottom:9px;
  min-height:0;
  text-wrap:balance;
}
.role-bars{display:flex;flex-direction:column;gap:4px}
.role-bars span{
  display:flex;
  align-items:center;
  gap:9px;
}
.role-bars b{
  font-size:10.5px;
  font-weight:600;
  color:#7d6c5d;
  letter-spacing:.1em;
  width:26px;
  flex:0 0 auto;
}
.role-bars i{
  position:relative;
  flex:1;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
  font-style:normal;
}
.role-bars i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  border-radius:2px;
  background:linear-gradient(90deg,rgba(224,35,26,.55),#f0a63c 72%,#ffe0a0);
  box-shadow:0 0 8px rgba(255,160,60,.55);
  transform-origin:left;
  animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) both;
}

/* ==========================================================
   灵宠图鉴
   ========================================================== */
.pets{
  padding-top:4px;
  padding-bottom:22px;
}
.pet-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}
.pet{
  position:relative;
  margin:0;
  border-radius:3px;
  overflow:hidden;
  border:1px solid rgba(240,193,90,.15);
  background:#0b0504;
  aspect-ratio:1/1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
}
.pet img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 22%;
  transition:transform .55s ease,filter .4s;
  filter:saturate(1.02) contrast(1.03);
}
.pet::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(6,2,1,.55) 76%,rgba(6,2,1,.94) 100%);
  pointer-events:none;
}
.pet:hover{
  transform:translateY(-5px);
  border-color:rgba(240,193,90,.62);
  box-shadow:0 16px 34px rgba(0,0,0,.7),0 0 26px rgba(255,150,50,.24);
  z-index:2;
}
.pet:hover img{transform:scale(1.07)}
.pet figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:6px 5px 7px;
  text-align:center;
}
.pet figcaption b{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:#ffe3ad;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(255,150,40,.5);
  white-space:nowrap;
}
.pet figcaption span{
  display:block;
  font-size:9.5px;
  letter-spacing:.04em;
  color:#a89179;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pet-foot{
  text-align:center;
  margin-top:10px;
  font-size:11px;
  color:#8a7868;
  letter-spacing:.05em;
}

/* ==========================================================
   信息面板
   ========================================================== */
.info{padding-top:24px;padding-bottom:20px}
.info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
}
.panel{
  position:relative;
  padding:12px 13px 11px;
  background:
    linear-gradient(180deg,rgba(40,20,12,.72),rgba(12,6,4,.86));
  border:1px solid rgba(240,193,90,.16);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
.panel::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,rgba(224,35,26,.85),rgba(240,193,90,.5),transparent);
  opacity:.65;
}
.panel:hover{
  border-color:rgba(240,193,90,.38);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.panel h3{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.06em;
  color:#f2d6a6;
  margin-bottom:7px;
  padding-bottom:6px;
  border-bottom:1px dashed rgba(240,193,90,.18);
}
.panel h3 i{
  display:grid;
  place-items:center;
  width:18px;height:18px;
  font-style:normal;
  font-size:10px;
  border-radius:2px;
  color:#ffd79a;
  background:linear-gradient(180deg,rgba(190,40,18,.85),rgba(90,12,6,.9));
  border:1px solid rgba(255,170,110,.35);
  box-shadow:0 0 12px rgba(224,60,25,.4);
  flex:0 0 auto;
}
.kv{list-style:none;display:flex;flex-direction:column;gap:3px}
.kv li{
  display:flex;
  gap:7px;
  font-size:11px;
  line-height:1.5;
  align-items:baseline;
}
.kv span{
  flex:0 0 58px;
  font-size:10px;
  letter-spacing:.06em;
  color:#7e6d5e;
  position:relative;
  padding-left:9px;
}
.kv span::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:3px;height:3px;
  background:rgba(224,35,26,.9);
  transform:rotate(45deg);
}
.kv b{
  font-weight:600;
  color:#ddcdb8;
  letter-spacing:.02em;
}

/* 慎入横幅 */
.warn-banner{
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-top:9px;
  padding:10px 13px;
  border:1px solid rgba(224,35,26,.42);
  border-radius:4px;
  background:
    repeating-linear-gradient(-45deg,rgba(120,16,8,.16) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,rgba(80,12,6,.55),rgba(16,6,4,.9));
  box-shadow:inset 0 0 40px rgba(160,20,8,.22);
}
.warn-ico{
  flex:0 0 26px;
  width:26px;height:26px;
  display:grid;place-items:center;
  font-family:var(--ff-num);
  font-size:15px;
  color:#ffe1d6;
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#ff5f38,#a5110a 70%);
  box-shadow:0 0 20px rgba(255,70,35,.5),inset 0 1px 2px rgba(255,255,255,.4);
  animation:blinkSoft 4.5s ease-in-out infinite;
}
.warn-body h4{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.14em;
  color:#ff9d7e;
  margin-bottom:2px;
}
.warn-body p{
  font-size:11px;
  line-height:1.62;
  color:#b9a493;
}

/* 承诺条 */
.promise{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 24px;
  margin-top:8px;
  padding:8px 14px;
  border:1px solid rgba(240,193,90,.14);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(30,16,10,.55),rgba(10,5,3,.7));
  font-size:11px;
  color:#9c8a79;
  letter-spacing:.04em;
}
.promise b{
  color:#f4d49c;
  font-weight:700;
  margin-right:4px;
}
.promise span::before{
  content:"✦";
  color:var(--red);
  margin-right:7px;
  font-size:10px;
  opacity:.9;
}

/* ==========================================================
   底部 CTA
   ========================================================== */
.final{
  position:relative;
  padding:36px 0 28px;
  text-align:center;
  overflow:hidden;
  border-top:1px solid rgba(240,193,90,.12);
  margin-top:8px;
}
.final-glow{
  position:absolute;
  left:50%;top:0;
  width:1100px;height:520px;
  transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0%,rgba(224,35,26,.30),transparent 72%);
}
.final-kicker{
  font-size:10px;
  letter-spacing:.4em;
  color:rgba(240,193,90,.55);
  margin-bottom:6px;
}
.final h2{
  font-size:clamp(24px,3.4vw,34px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.15;
  background:linear-gradient(180deg,#fff8e4,#f3c96d 58%,#b47a24);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(50,18,0,.9)) drop-shadow(0 0 36px rgba(255,150,50,.3));
}
.final h2 em{
  font-style:normal;
  background:linear-gradient(180deg,#ffc0a8,#ff4a2b 54%,#a8120a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.final-sub{
  margin-top:7px;
  font-size:11.5px;
  color:#9d8b7a;
  letter-spacing:.08em;
}
.final-cta{margin-top:16px}
.final-link{
  margin-top:11px;
  font-size:10.5px;
  color:#7e6d5e;
  letter-spacing:.02em;
  word-break:break-all;
}
.final-link a{
  color:#c8a675;
  border-bottom:1px dotted rgba(200,166,117,.4);
  transition:color .2s;
}
.final-link a:hover{color:var(--gold-lt)}
.mini-copy{
  margin-left:8px;
  padding:2px 9px;
  font-size:11px;
  font-family:inherit;
  color:#c8a675;
  background:rgba(240,193,90,.07);
  border:1px solid rgba(240,193,90,.28);
  border-radius:2px;
  cursor:pointer;
  transition:.2s;
  vertical-align:1px;
}
.mini-copy:hover{color:#ffe6ad;border-color:rgba(240,193,90,.6);background:rgba(240,193,90,.14)}

/* ==========================================================
   Footer / Toast
   ========================================================== */
.foot{
  padding:22px 0 30px;
  text-align:center;
  border-top:1px solid rgba(240,193,90,.08);
  background:rgba(4,2,1,.6);
}
.foot p{font-size:11.5px;color:#6d5f52;letter-spacing:.06em}
.foot-dim{margin-top:5px;font-size:10.5px;color:#4f4439}

.toast{
  position:fixed;
  left:50%;bottom:42px;
  transform:translate(-50%,20px);
  z-index:90;
  padding:11px 24px;
  font-size:13px;
  letter-spacing:.06em;
  color:#fff6e2;
  background:linear-gradient(180deg,rgba(190,40,18,.96),rgba(110,14,8,.98));
  border:1px solid rgba(255,180,130,.5);
  border-radius:3px;
  box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 26px rgba(224,60,25,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ==========================================================
   入场动画
   ========================================================== */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:none}

/* ==========================================================
   关键帧
   ========================================================== */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes blinkSoft{0%,100%{box-shadow:0 0 20px rgba(255,70,35,.5),inset 0 1px 2px rgba(255,255,255,.4)}50%{box-shadow:0 0 34px rgba(255,90,45,.85),inset 0 1px 2px rgba(255,255,255,.4)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==========================================================
   响应式
   ========================================================== */
@media (max-width:1080px){
  .tb-nav{gap:16px;font-size:12px}
  .role-shot{height:238px}
  .pet-row{grid-template-columns:repeat(7,1fr)}
}

@media (max-width:1020px){
  .hero{padding:92px 0 34px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-left{text-align:center}
  .hero-tags{justify-content:center}
  .hero-title{flex-direction:row;align-items:baseline;justify-content:center;gap:.12em;flex-wrap:wrap;font-size:clamp(36px,6vw,52px)}
  .hero-cta{justify-content:center}
  .hero-stats{margin-inline:auto;max-width:540px;justify-content:center}
  .hero-stats li:first-child{padding-left:10px}
  .hero-shot{width:min(660px,100%);margin:0 auto}
}

@media (max-width:880px){
  .wrap,.topbar-in{width:calc(100% - 32px)}
  .tb-nav{display:none}
  .hero{padding:80px 0 30px}
  .role-grid{grid-template-columns:1fr;gap:14px}
  .role-card{display:grid;grid-template-columns:132px 1fr;align-items:stretch}
  .role-shot{height:auto;min-height:200px}
  .role-body{margin-top:0;padding:14px 16px 14px 4px}
  .role-body h3{font-size:18px}
  .role-desc{min-height:0;font-size:11px}
  .info-grid{grid-template-columns:1fr 1fr}
  .hero-stats li{min-width:46%;border-right:0;padding:8px 6px}
  .hero-stats{border-bottom:0}
  .hero-stats li:nth-child(-n+2){border-bottom:1px solid rgba(240,193,90,.1);padding-bottom:8px}
}

@media (max-width:680px){
  .sec{padding:32px 0}
  .hero{padding:74px 0 28px}
  .hero-title{flex-direction:column;align-items:center;gap:0;font-size:clamp(34px,12vw,52px)}
  .hero-title .t2{font-size:.62em;margin-top:2px}
  .hero-sub{font-size:12px;line-height:1.85}
  .hero-sub i{margin:0 5px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .btn{justify-content:center;padding:12px 20px}
  .btn-xl{padding:13px 22px}
  .btn-txt{align-items:center}
  .pet-row{
    display:flex;
    overflow-x:auto;
    gap:9px;
    padding-bottom:10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .pet-row::-webkit-scrollbar{height:3px}
  .pet-row::-webkit-scrollbar-thumb{background:rgba(240,193,90,.4)}
  .pet{
    flex:0 0 128px;
    aspect-ratio:1/1;
    scroll-snap-align:start;
  }
  .info-grid{grid-template-columns:1fr}
  .panel{padding:12px 13px 11px}
  .kv span{flex:0 0 58px}
  .warn-banner{padding:10px 13px;gap:11px}
  .promise{flex-direction:column;gap:6px;align-items:flex-start;padding:8px 13px}
  .final{padding:30px 0 24px}
  .toast{bottom:28px}
}