/* ═══════════════════════ 基础 ═══════════════════════ */
:root {
  --ink: #111111;
  --ink-2: #454545;
  --ink-3: #8c8c8c;
  --paper: #ffffff;
  --cream: #f7f6f2;
  --line: #111111;
  --brand: #FF7300;
  --brand-deep: #E05F00;
  --brand-soft: #FFF1E6;
  --disp: "Chakra Petch", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace;
  --shadow-hard: 7px 7px 0 var(--ink);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(rgba(17,17,17,0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--brand); color: #fff; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }

/* 页面间平滑过渡（Chromium MPA view transitions，不支持的浏览器自动降级为普通跳转） */
@view-transition { navigation: auto; }

/* 滚动进场 */
.rev { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rev.in { opacity: 1; transform: none; }
.rev.d1 { transition-delay: .08s; } .rev.d2 { transition-delay: .16s; }
.rev.d3 { transition-delay: .24s; } .rev.d4 { transition-delay: .32s; }

/* ═══════════════════════ 导航 ═══════════════════════ */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: .5px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  display: grid; place-items: center; position: relative;
}
.logo-mark svg { width: 18px; height: 18px; }
.logo-img { height: 36px; width: auto; display: block; mix-blend-mode: multiply; }
.nav-links { display: flex; gap: 24px; margin-left: 12px; font-size: 14.5px; font-weight: 500; }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.gh-chip {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px;
  transition: all .2s;
}
.gh-chip:hover { background: var(--ink); color: #fff; }
.gh-chip svg { width: 15px; height: 15px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--disp); font-weight: 700; font-size: 15px;
  padding: 11px 22px; border-radius: 12px;
  border: 2px solid var(--ink);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  user-select: none;
}
.btn-brand { background: var(--brand); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn-brand:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-brand:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ghost { background: #fff; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13.5px; border-radius: 10px; }

/* ═══════════════════════ Hero ═══════════════════════ */
.hero { position: relative; padding: 84px 0 96px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.kicker {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 2px;
  color: var(--brand); display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--brand); border-radius: 999px; padding: 6px 16px;
  background: var(--brand-soft);
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: kpulse 1.8s ease infinite; }
@keyframes kpulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .35; transform: scale(.7);} }
.hero h1 {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.16; letter-spacing: .5px;
  margin: 26px 0 22px;
}
.hero h1 .hl { color: var(--brand); position: relative; white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; bottom: 6px; width: 100%; height: 12px;
  background: var(--brand-soft); z-index: -1;
}
.hero p.lead { font-size: 17px; line-height: 1.9; color: var(--ink-2); max-width: 46ch; }
.hero-cta { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta {
  margin-top: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.hero-meta b { color: var(--ink); font-weight: 600; }

/* ── Hero 右侧：窗口 + IP ── */
.hero-visual { position: relative; min-height: 460px; }
.blob {
  position: absolute; width: 380px; height: 380px; right: -60px; top: 10px;
  background: radial-gradient(circle, rgba(255,115,0,.16), transparent 65%);
  filter: blur(6px);
}
.traces { position: absolute; inset: -30px -40px auto -40px; height: 200px; pointer-events: none; }
.win {
  position: relative; margin-top: 64px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--shadow-hard);
  overflow: visible;
}
.win-bar {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--ink); border-radius: 13px 13px 0 0;
  padding: 11px 16px; background: var(--cream);
}
.win-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); }
.win-dot.o { background: var(--brand); }
.win-dot.k { background: var(--ink); }
.win-dot.w { background: #fff; }
.win-title { margin-left: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 1px; }
.term {
  padding: 18px 20px; height: 264px;
  font-family: var(--mono); font-size: 12.8px; line-height: 1.9;
  color: var(--ink);
  background:
    linear-gradient(transparent 95%, rgba(17,17,17,.06) 95%) 0 0 / 100% 25.6px,
    #fff;
  border-radius: 0 0 13px 13px;
}
.term .ln { white-space: pre-wrap; word-break: break-all; }
.term .p { color: var(--brand); font-weight: 600; }
.term .dim { color: var(--ink-3); }
.term .ok { color: var(--brand-deep); font-weight: 600; }
.cursor { display: inline-block; width: 8px; height: 15px; background: var(--brand); vertical-align: -2px; animation: cblink 1s steps(1) infinite; }
@keyframes cblink { 50% { opacity: 0; } }
.win-status {
  display: flex; align-items: center; gap: 8px;
  border-top: 2px solid var(--ink); background: var(--ink); color: #fff;
  padding: 9px 16px; border-radius: 0 0 13px 13px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px;
}
.win-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: kpulse 2s ease infinite; }
.win-status .fill { margin-left: auto; color: #9a9a9a; }

/* IP 坐在窗口上 */
.sitter { position: absolute; z-index: 5; width: 84px; height: 84px; }
.sitter svg { width: 100%; height: 100%; overflow: visible; }
.sit-cat { top: -62px; left: 26px; }
.sit-hedgie { top: -60px; right: 30px; }
.sit-bot { bottom: -34px; right: -30px; width: 92px; height: 92px; z-index: 6; }

/* ═══════════ IP 角色 SVG（全站复用类名） ═══════════════════════ */
.char { animation: bob 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.char.c2 { animation-delay: .5s; } .char.c3 { animation-delay: 1s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* 通通（猫）：尾巴摆动带停顿、双段眨眼、偶尔歪头 */
.cat-tail { transform-origin: 88px 96px; animation: tail 3.4s ease-in-out infinite; }
@keyframes tail {
  0%,10%,48%,100% { transform: rotate(0); }
  5% { transform: rotate(-17deg); }
  18% { transform: rotate(12deg); }
  30% { transform: rotate(-7deg); }
  40% { transform: rotate(3deg); }
}
.cat-eyes { animation: blink 4.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%,91%,94.5%,100% { transform: scaleY(1); } 92.5%,96% { transform: scaleY(.08); } }
.cat-head { transform-origin: 58px 62px; animation: headtilt 6s ease-in-out infinite; }
@keyframes headtilt { 0%,86%,94%,100% { transform: rotate(0); } 90% { transform: rotate(-8deg); } }
/* 抖耳朵（外耳+内耳成对，单侧） */
.cat-head path { transform-box: fill-box; transform-origin: 50% 100%; }
.char.flick .cat-head path:nth-child(1), .char.flick .cat-head path:nth-child(3) { animation: flickL .55s ease; }
.char.flick2 .cat-head path:nth-child(2), .char.flick2 .cat-head path:nth-child(4) { animation: flickL .55s ease; }
@keyframes flickL { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 65% { transform: rotate(7deg); } }
/* 洗爪 */
.cat-pawL { transform-box: fill-box; transform-origin: 50% 15%; }
.char.wash .cat-pawL { animation: wash 1.5s ease; }
@keyframes wash {
  0%,100% { transform: none; }
  25% { transform: translateY(-11px) rotate(-18deg); }
  50% { transform: translateY(-8px) rotate(-6deg); }
  75% { transform: translateY(-11px) rotate(-18deg); }
}
/* 张望 / 连续双眨 */
.char.look .cat-head { animation: lookaround 1.9s ease; }
@keyframes lookaround {
  0%,100% { transform: rotate(0) translateX(0); }
  32% { transform: rotate(5deg) translateX(2.5px); }
  68% { transform: rotate(-5deg) translateX(-2.5px); }
}
.char.blink2 .cat-eyes { animation: blink2 .55s ease; }
@keyframes blink2 { 0%,100% { transform: scaleY(1); } 22% { transform: scaleY(.08); } 44% { transform: scaleY(1); } 66% { transform: scaleY(.08); } }

/* 达达（刺猬）：炸毛、嗅探、张望、灯语双闪 */
.hedgie-spikes { transform-origin: 58px 78px; animation: wiggle 3.6s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 33% { transform: rotate(2.2deg); } 66% { transform: rotate(-2.2deg); } }
.char.puff .hedgie-spikes { animation: puff .8s ease; }
@keyframes puff { 0%,100% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-1.5deg); } }
.hedgie-light { animation: lightpulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lightpulse {
  0%,100% { filter: drop-shadow(0 0 3px rgba(255,115,0,.7)); }
  50% { filter: drop-shadow(0 0 9px rgba(255,115,0,.95)) drop-shadow(0 0 18px rgba(255,115,0,.5)); }
}
.hedgie-ring { transform-box: fill-box; transform-origin: center; animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
.hedgie-face { transform-origin: 58px 84px; }
.char.sniff .hedgie-face { animation: sniff 1.2s ease; }
@keyframes sniff { 0%,100% { transform: translateY(0); } 30% { transform: translateY(1.6px) scaleY(1.05); } 60% { transform: translateY(-.5px); } }
.char.lookh .hedgie-face { animation: lookh 1.7s ease; }
@keyframes lookh { 0%,100% { transform: translateX(0) rotate(0); } 35% { transform: translateX(3.5px) rotate(2.5deg); } 70% { transform: translateX(-3.5px) rotate(-2.5deg); } }
.char.dbl .hedgie-light, .char.dbl .bot-ant { animation: dbl .9s ease; }
@keyframes dbl {
  0%,100% { opacity: 1; filter: brightness(1); }
  18% { opacity: .15; }
  32% { opacity: 1; filter: brightness(1.7); }
  50% { opacity: .15; }
  68% { opacity: 1; filter: brightness(1.9); }
}

/* 豆豆（机器人）：弹性挤压 bob + 天线电火花 */
.bot-ant { animation: antblink 1.6s ease infinite; transform-box: fill-box; transform-origin: center; }
@keyframes antblink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.bot-eyes { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.bot-sparks { opacity: 0; transform-box: fill-box; transform-origin: center; }
.char.spark .bot-sparks { animation: spark .65s ease; }
@keyframes spark {
  0% { opacity: 0; transform: translateY(5px) scale(.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-7px) scale(1.25); }
}
.char.c3 { animation: bobbot 3s ease-in-out infinite; animation-delay: 1s; }
@keyframes bobbot {
  0%,100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-5px) scale(.98, 1.03); }
}

/* 脚下实时影子（挂父容器上，与 bob 反相）+ 瞳孔平滑 */
.cshadow {
  position: absolute; left: 50%; bottom: 2px;
  width: 66%; height: 12px;
  background: radial-gradient(ellipse, rgba(17,17,17,.24), transparent 68%);
  animation: csh 3.4s ease-in-out infinite; pointer-events: none;
}
.cshadow.c2 { animation-delay: .5s; }
.cshadow.c3 { animation-delay: 1s; }
@keyframes csh { 0%,100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.78); opacity: .55; } }
.pupil { transition: transform .08s linear; }

/* —— Miora 真实素材版 IP（通通/达达）—— */
.ipimg {
  width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
  user-select: none; -webkit-user-drag: none;
}
.ipimg-cat { filter: drop-shadow(0 4px 4px rgba(17,17,17,.2)); }
.ipimg-hedgie { filter: drop-shadow(0 0 7px rgba(255,115,0,.5)) drop-shadow(0 4px 4px rgba(17,17,17,.16)); }
/* 尺寸约束：素材版不能撑满容器，和豆豆 SVG 视觉等大 */
.ip-stage .ipimg { width: 118px; height: 118px; }
.sitter .ipimg { width: 78%; height: 78%; position: absolute; inset: 0; margin: auto; }
/* 达达光环：垫在素材后面呼吸 */
.sit-hedgie::before, .hedgie-stage::before {
  content: ""; position: absolute; left: 50%; top: 40%;
  width: 72%; height: 72%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,115,0,.4), transparent 62%);
  animation: halopulse 2.2s ease-in-out infinite; pointer-events: none;
}
@keyframes halopulse {
  0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(.85); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
}
/* 素材版随机小动作 */
.char.m-tilt { animation: mtilt .9s ease; }
@keyframes mtilt { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(5deg); } }
.char.m-flip { animation: mflip 1.1s ease; }
@keyframes mflip { 0%,100% { transform: scaleX(1); } 45%,58% { transform: scaleX(-1); } }
.char.m-flare { animation: mflare .9s ease; }
@keyframes mflare { 30% { filter: brightness(1.45) drop-shadow(0 0 16px rgba(255,115,0,.95)); transform: scale(1.07); } }
.char.m-hop { animation: hop .55s ease 2; }

/* 悬停互动：家族卡片 */
.ip-card:hover .cat-tail { animation-duration: .6s; }
.ip-card:hover .cat-head { animation: none; transform: rotate(-8deg); }
.ip-card:hover .hedgie-light { animation: lightpulse .8s ease-in-out infinite; }
.ip-card:hover .bot-ant { animation: dbl .9s ease infinite; }
.ip-card:hover .char { animation: hop .55s ease 2; }
@keyframes hop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-12px); } }
/* 窗口上的家伙们也看人下菜碟 */
.win:hover .sit-cat .cat-tail { animation-duration: .6s; }
.win:hover .sit-bot .bot-ant { animation: dbl .9s ease infinite; }

/* ═══════════════════════ 跑马灯 ═══════════════════════ */
.marquee {
  background: var(--ink); color: #fff; overflow: hidden;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: 13px 0; position: relative;
}
.marquee-track { display: flex; gap: 0; width: max-content; animation: scrollx 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.mq { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 2px; white-space: nowrap; padding-right: 18px; }
.mq b { color: var(--brand); font-weight: 600; padding-right: 18px; }

/* ═══════════════════════ 通用 Section ═══════════════════════ */
section { padding: 96px 0; }
.sec-head { margin-bottom: 54px; }
.sec-tag {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 2.5px;
  color: var(--brand); display: flex; align-items: center; gap: 14px;
}
.sec-tag::after { content: ""; flex: 0 0 64px; height: 2px; background: var(--brand); }
.sec-head h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); margin-top: 16px; letter-spacing: .5px; }
.sec-head p { margin-top: 14px; color: var(--ink-2); font-size: 16px; line-height: 1.85; max-width: 62ch; }

/* ═══════════════════════ 工作原理 ═══════════════════════ */
.flow { display: flex; align-items: stretch; gap: 0; }
.flow-node {
  flex: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 26px 24px; position: relative;
  transition: transform .2s, box-shadow .2s;
}
.flow-node:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--brand); }
.flow-node .fn-ic {
  width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--ink);
  display: grid; place-items: center; margin-bottom: 16px; background: var(--cream);
  font-size: 22px;
}
.flow-node.hot .fn-ic { background: var(--brand); border-color: var(--ink); }
.flow-node h3 { font-family: var(--disp); font-size: 18.5px; font-weight: 700; }
.flow-node .fn-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: 1px; }
.flow-node p { margin-top: 12px; font-size: 13.8px; line-height: 1.8; color: var(--ink-2); }
.wire { flex: 0 0 74px; position: relative; align-self: center; height: 3px; }
.wire::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 14px);
  animation: march 1s linear infinite;
}
@keyframes march { to { background-position: 14px 0; } }
.wire::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 9px; height: 9px;
  margin-top: -3px; border-radius: 50%; background: var(--brand);
  animation: travel 1.6s linear infinite;
}
@keyframes travel { 0% { left: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }

/* ═══════════════════════ 能力矩阵 ═══════════════════════ */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap {
  background: #fff; border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.cap:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--ink); }
.cap-no {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: 1px;
}
.cap-ic {
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft);
  border: 2px solid var(--ink); display: grid; place-items: center; margin-bottom: 16px;
}
.cap-ic svg { width: 22px; height: 22px; stroke: var(--ink); }
.cap:hover .cap-ic { background: var(--brand); }
.cap:hover .cap-ic svg { stroke: #fff; }
.cap h3 { font-family: var(--disp); font-size: 17.5px; font-weight: 700; }
.cap p { margin-top: 10px; font-size: 13.6px; line-height: 1.8; color: var(--ink-2); }
.cap .tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.cap .tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px;
  border: 1.5px solid var(--ink); border-radius: 6px; padding: 2.5px 8px; color: var(--ink-2);
}

/* ═══════════════════════ IP 家族 ═══════════════════════ */
.family { background: var(--cream); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.ips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ip-card {
  background: #fff; border: 2.5px solid var(--ink); border-radius: 18px;
  padding: 30px 26px 26px; text-align: center; cursor: pointer;
  transition: transform .2s, box-shadow .2s; position: relative;
}
.ip-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--brand); }
.ip-stage {
  height: 168px; display: grid; place-items: center; position: relative;
}
.ip-stage svg { width: 150px; height: 150px; overflow: visible; }
.ip-card h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; margin-top: 6px; }
.ip-role {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  color: #fff; background: var(--ink); border-radius: 999px; padding: 4px 14px;
}
.ip-card.cat .ip-role { background: var(--brand); }
.ip-card p { margin-top: 14px; font-size: 13.8px; line-height: 1.85; color: var(--ink-2); }
.ip-say {
  margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--brand-deep);
  min-height: 20px; transition: opacity .2s;
}

/* ═══════════════════════ 数字带 ═══════════════════════ */
.band { background: var(--ink); color: #fff; padding: 58px 0; border-bottom: 2.5px solid var(--ink); }
.band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.band b { font-family: var(--disp); font-size: clamp(30px, 3vw, 44px); font-weight: 700; color: var(--brand); letter-spacing: 1px; }
.band span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 2px; color: #bdbdbd; }

/* ═══════════════════════ 下载 CTA ═══════════════════════ */
.cta { background: var(--brand); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta::before, .cta::after {
  content: ""; position: absolute; border: 2.5px solid rgba(255,255,255,.35); border-radius: 50%;
}
.cta::before { width: 340px; height: 340px; left: -120px; top: -120px; }
.cta::after { width: 260px; height: 260px; right: -90px; bottom: -110px; }
.cta h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(32px, 3.6vw, 50px); letter-spacing: 1px; }
.cta p { margin-top: 18px; font-size: 16.5px; opacity: .94; }
.cta .btn { margin-top: 34px; background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: 5px 5px 0 rgba(17,17,17,.9); font-size: 16.5px; padding: 15px 32px; }
.cta .btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(17,17,17,.9); }
.cta-meta { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.5px; opacity: .85; }
.cta-pets { display: flex; justify-content: center; gap: 44px; margin-top: 46px; }
.cta-pets .sitter { position: relative; width: 74px; height: 74px; }
.cta-pets svg { width: 100%; height: 100%; overflow: visible; }

/* ═══════════════════════ 更新日志 ═══════════════════════ */
.logs { display: grid; gap: 18px; max-width: 820px; margin: 0 auto; }
.log-card {
  background: #fff; border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 22px 24px; transition: transform .2s, box-shadow .2s;
}
.log-card:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--brand); }
.log-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.log-ver { font-family: var(--disp); font-weight: 700; font-size: 18px; }
.log-latest {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  color: #fff; background: var(--brand); border-radius: 999px; padding: 3px 10px;
}
.log-date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; }
.log-body { margin-top: 12px; font-size: 13.8px; line-height: 1.85; color: var(--ink-2); }
.log-body h4 { font-family: var(--disp); font-size: 14.5px; margin: 12px 0 4px; color: var(--ink); }
.log-body p { margin: 4px 0; }
.log-body ul { margin: 6px 0 6px 18px; }
.log-body code {
  font-family: var(--mono); font-size: 12px; background: var(--cream);
  border: 1px solid var(--border, #ddd); border-radius: 5px; padding: 1px 6px;
}
.log-link { text-align: center; margin-top: 26px; }

/* ═══════════════════════ 更新与下载子页 ═══════════════════════ */
.page { padding: 70px 0 90px; }
.page-title { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 4vw, 52px); margin: 16px 0 10px; letter-spacing: .5px; }
.nav-links a.active { color: var(--brand); }
.nav-links a.active::after { transform: scaleX(1); }
.btn-xs { padding: 7px 14px; font-size: 12.5px; border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); }

/* 最新版下载大卡 */
.dl-hero {
  display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow-hard); padding: 32px 36px; margin: 36px 0 64px;
  position: relative; overflow: hidden;
}
.dl-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,115,0,.16), transparent 65%);
  pointer-events: none;
}
.dl-info { flex: 1; min-width: 250px; }
.dl-ver { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 3.4vw, 46px); margin-top: 14px; }
.dl-date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: 1px; }
.dl-notes { margin-top: 14px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); max-width: 54ch; }
.dl-notes h4 { font-size: 14px; color: var(--ink); margin: 8px 0 4px; }
.dl-notes ul { margin: 4px 0 4px 16px; }
.dl-actions { display: flex; flex-direction: column; gap: 12px; min-width: 230px; position: relative; z-index: 1; }

/* 版本历史时间线（参考 Trae 更新日志：左时间右内容） */
.tl-title { font-family: var(--disp); font-weight: 700; font-size: 24px; margin: 8px 0 30px; letter-spacing: .5px; }
.timeline { position: relative; padding-left: 36px; max-width: 900px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
  border-left: 2px dashed #d8d7d2;
}
.tl-item { position: relative; padding: 0 0 44px 22px; }
.tl-item:last-child { padding-bottom: 6px; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 5px;
  width: 11px; height: 11px; background: #fff; border: 2.5px solid var(--ink);
  transition: all .2s;
}
.tl-item:hover::before { border-color: var(--brand); background: var(--brand); }
.tl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-date { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--brand-deep); letter-spacing: 1px; }
.tl-ver {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 9px; background: var(--cream);
}
.tl-body { margin-top: 10px; font-size: 13.8px; line-height: 1.85; color: var(--ink-2); max-width: 70ch; }
.tl-body h4 { font-size: 14.5px; color: var(--ink); margin: 10px 0 4px; }
.tl-body ul { margin: 4px 0 4px 16px; }
.tl-dl { margin-top: 14px; }

/* ═══════════════════════ Footer ═══════════════════════ */
footer { background: var(--ink); color: #cfcfcf; padding: 52px 0 34px; }
.foot-grid { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; }
.foot-brand .logo { color: #fff; margin-bottom: 14px; }
.foot-brand p { font-size: 13px; line-height: 1.8; color: #9a9a9a; }
.foot-col h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--brand); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 13.5px; color: #cfcfcf; padding: 4px 0; }
.foot-col a:hover { color: #fff; }
.foot-base {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid #333;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; color: #8a8a8a; letter-spacing: 1px;
}

/* ═══════════════════════ 响应式 ═══════════════════════ */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-visual { min-height: 520px; }
  .caps, .ips { grid-template-columns: repeat(2, 1fr); }
  .flow { flex-direction: column; gap: 14px; }
  .wire { flex: 0 0 3px; width: 60%; height: 40px; margin: 0 auto; }
  .wire::before { background: repeating-linear-gradient(180deg, var(--ink) 0 7px, transparent 7px 14px); animation: marchv 1s linear infinite; }
  @keyframes marchv { to { background-position: 0 14px; } }
  .wire::after { animation: travelv 1.6s linear infinite; left: 50% !important; margin-left: -3px; }
  @keyframes travelv { 0% { top: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 5px); opacity: 0; } }
  .band-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .nav-links { display: none; }
}
@media (max-width: 620px) {
  .caps, .ips { grid-template-columns: 1fr; }
  .sit-cat { left: 6px; } .sit-hedgie { right: 8px; }
  .sit-bot { right: -6px; }
}