/* ═══════════════════════════════════════════════════════════
   朝花夕拾 · Dawn Blossoms Plucked at Dusk
   设计语言：经典 Minecraft 界面（GUI 面板倒角 + 文字投影 + 原生配色）
   ═══════════════════════════════════════════════════════════ */

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

/* ── 像素字体：Minecraft 官方渲染中文所用的 Unifont ──
   原文件 11.9 MB，已按站点实际用字子集化为 34.6 KB。
   它是 16×16 点阵字体，16px 及其整数倍下最锐利。 */
@font-face {
  font-family: 'Unifont';
  src: url('../font/unifont.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

:root {
  /* ── Minecraft 原生配色 ── */
  --gold:   #FFAA00;
  --green:  #55FF55;
  --aqua:   #55FFFF;
  --yellow: #FFFF55;
  --red:    #FF5555;
  --pink:   #FF55FF;
  --white:  #FFFFFF;
  --grey:   #AAAAAA;
  --dgrey:  #555555;

  /* 面板专用（灰底上的深色文字，保证对比度） */
  --gold-ink:  #7A5100;
  --green-ink: #1C6B1C;
  --red-ink:   #A02020;
  --blue-ink:  #1B4C9C;

  /* ── GUI 面板 ── */
  --gui:      #C6C6C6;
  --gui-hi:   #FFFFFF;
  --gui-lo:   #555555;
  --gui-dark: #3A3A3A;
  --gui-dhi:  #6E6E6E;
  --gui-dlo:  #1A1A1A;
  --ink:      #3F3F3F;
  --ink-soft: #5A5A5A;

  /* ── 页面背景 ── */
  --bg:       #1B1B1B;
  --bg-2:     #151515;
  --fog:      #0E0E0E;

  --sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;
  /* 像素字体：专用于标题、按钮、导航等 UI 部件 */
  --pixel: 'Unifont', 'Noto Sans SC', 'Microsoft YaHei', monospace;

  --pad: clamp(1.1rem, 4.5vw, 3.5rem);
  --maxw: 1180px;
  --bevel: 2px;

  /* MC 标志性文字投影 */
  --shadow: 2px 2px 0 rgba(0,0,0,.55);
  --ease: cubic-bezier(.2,.7,.3,1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  background: var(--bg);
  color: #E8E8E8;
  font-family: var(--sans);
  line-height: 1.85;
  overflow-x: hidden;
  /* 石质噪点背景 */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,170,0,.05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--aqua); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--white); text-shadow: var(--shadow); }
b, strong { font-weight: 700; }
em { font-style: normal; color: var(--gold); text-shadow: var(--shadow); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }

/* ── 区块 ───────────────────────────────────────────────── */
.sec { padding-block: clamp(3.2rem, 8vw, 6rem); position: relative; }
.sec-dark { background: rgba(0,0,0,.28); border-block: 1px solid rgba(255,255,255,.06); }

/* ── 标题：金色 + MC 投影 ───────────────────────────────── */
.mch {
  position: relative;
  font-family: var(--pixel);
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight: 400;
  color: var(--gold);
  text-shadow: var(--shadow);
  letter-spacing: .02em;
  margin-bottom: 1.8rem;
  padding-bottom: .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.mch::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(255,170,0,.05));
}
.mch .mk { font-size: .9em; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }

.sub { color: var(--grey); margin: -.9rem 0 2rem; }
.lead { font-size: 1.05rem; color: #F0F0F0; margin-bottom: 1rem; }
.note-line { color: var(--yellow); text-shadow: var(--shadow); margin-bottom: 1.4rem; }
.tiny { font-size: .82em; color: inherit; opacity: .72; }

/* ── 经典 GUI 面板 ──────────────────────────────────────── */
.panel {
  background: var(--gui);
  color: var(--ink);
  padding: 1.5rem 1.6rem;
  border: var(--bevel) solid;
  border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  position: relative;
}
.panel h3 {
  font-family: var(--pixel);
  font-size: 1rem; font-weight: 400; color: #2B2B2B;
  margin-bottom: .65rem; text-shadow: 1px 1px 0 rgba(255,255,255,.45);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  line-height: 1.6;
}
.panel p { font-size: .93rem; color: var(--ink); }
.panel b { color: #1F1F1F; }
.panel .ok { color: var(--green-ink); }
.panel .bad { color: var(--red-ink); }
.panel-warn { background: #D6C9A8; border-color: #F2EAD6 var(--gui-lo) var(--gui-lo) #F2EAD6; margin-top: 1.6rem; }

/* ── 图片框（同款倒角） ─────────────────────────────────── */
.frame {
  border: var(--bevel) solid;
  border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi);
  background: var(--gui-dlo);
  padding: 3px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.frame img { width: 100%; }
.frame-sm { max-width: 640px; margin-top: 1rem; }

/* ── 物品栏凹槽 ─────────────────────────────────────────── */
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .6rem; margin-top: 1.5rem; }
.slot {
  background: #8B8B8B;
  border: var(--bevel) solid;
  border-color: var(--gui-lo) var(--gui-hi) var(--gui-hi) var(--gui-lo);
  padding: .6rem .8rem;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.22);
}
.slot dt { font-family: var(--pixel); font-size: .8rem; color: #2F2F2F; margin-bottom: .1rem; }
.slot dd { font-family: var(--pixel); font-size: .9rem; color: #1B1B1B; text-shadow: 1px 1px 0 rgba(255,255,255,.35); line-height: 1.6; }

/* ── 标签 ───────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: 1.4rem; }
.tags li {
  font-family: var(--pixel); font-size: .8rem; padding: .3rem .8rem;
  background: var(--gui); color: var(--ink);
  border: var(--bevel) solid;
  border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi);
}
.tags li.hl { background: var(--gold); color: #3A2500; border-color: #FFD37A #8A5C00 #8A5C00 #FFD37A; }

/* ── 按钮 ───────────────────────────────────────────────── */
.mcbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem; min-width: 110px; padding: .62rem 1.3rem;
  background: #9C9C9C;
  color: #FFFFFF !important;
  font-family: var(--pixel); font-size: .92rem; font-weight: 400;
  text-shadow: var(--shadow);
  border: var(--bevel) solid;
  border-color: #D8D8D8 #4A4A4A #4A4A4A #D8D8D8;
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none;
}
.mcbtn:hover { background: #B4C7E8; border-color: #E6EEFF #2C4A7C #2C4A7C #E6EEFF; color: #FFFFFF !important; text-shadow: var(--shadow); }
.mcbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.mcbtn small { font-size: .68rem; font-weight: 400; opacity: .9; }
.mcbtn-gold { background: #C99A28; border-color: #FFD37A #6E4D00 #6E4D00 #FFD37A; }
.mcbtn-gold:hover { background: #E0AE33; border-color: #FFE6AE #6E4D00 #6E4D00 #FFE6AE; }

/* ── 首屏 ───────────────────────────────────────────────── */
/* 注意 grid-template-columns 必须写成 minmax(0,1fr)：
   裸 1fr 的最小值是 min-content，窄屏上会被内容撑破、把页面顶出视口 */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); will-change: transform; }
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 50% 32%, rgba(12,12,12,.34) 0%, rgba(12,12,12,.78) 60%, var(--fog) 100%),
    linear-gradient(to bottom, rgba(12,12,12,.6), transparent 34%, rgba(12,12,12,.92));
}
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  /* width:100% 是关键：grid 的 place-items:center 会让子项按 max-content 定宽，
     不加这条在窄屏上会撑破视口、把内容切掉 */
  width: 100%; min-width: 0;
  max-width: 880px; padding: 6rem var(--pad) 5rem;
}
/* 文字衬底：截图亮部会吃掉可读性，垫一层柔和暗晕 */
.hero-inner::before {
  content: ''; position: absolute; z-index: -1;
  inset: -3rem -5rem;
  background: radial-gradient(ellipse at 50% 45%,
              rgba(8,8,9,.72) 0%, rgba(8,8,9,.52) 45%, rgba(8,8,9,.12) 70%, transparent 84%);
  pointer-events: none;
}
.hero-logo {
  width: clamp(230px, 44vw, 500px); margin: 0 auto 1.2rem;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6)) drop-shadow(0 10px 40px rgba(0,0,0,.7));
}
.hero-en {
  font-family: var(--pixel);
  font-size: clamp(.78rem, 2vw, 1rem); letter-spacing: .22em;
  color: var(--gold); text-shadow: 2px 2px 0 rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.9);
  margin-bottom: 1.1rem;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: 2rem; max-width: 100%; }
.hero-chips span {
  font-family: var(--pixel); font-size: .8rem; padding: .24rem .7rem;
  background: rgba(0,0,0,.42); color: var(--grey);
  border: 1px solid rgba(255,255,255,.14);
}
.hero-chips span.hl { color: var(--gold); border-color: rgba(255,170,0,.4); }
.hero-quote {
  font-size: clamp(.86rem, 2.1vw, 1rem); color: #EDEDED;
  text-shadow: var(--shadow); line-height: 2.1;
  max-width: min(32em, 100%); margin: 0 auto 2.2rem;
}
.hero-quote cite { display: block; margin-top: .5rem; font-size: .82em; font-style: normal; color: var(--grey); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.hero-scroll {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .28em;
  color: var(--grey); text-shadow: var(--shadow);
}
.hero-scroll i { width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5} 50%{transform:rotate(45deg) translate(4px,4px);opacity:1} }

/* ── 导航 ───────────────────────────────────────────────── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--pad);
  background: rgba(12,12,12,0);
  border-bottom: 2px solid transparent;
  transition: background .3s, border-color .3s;
}
#nav.solid { background: rgba(12,12,12,.92); border-bottom-color: rgba(255,170,0,.35); }
.nav-brand { display: flex; align-items: center; gap: .5rem; color: var(--white) !important; }
.nav-brand b { font-family: var(--pixel); font-size: 1rem; font-weight: 400; letter-spacing: .06em; text-shadow: var(--shadow); }
.nav-brand img { image-rendering: pixelated; border: 1px solid rgba(255,255,255,.2); }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a {
  font-family: var(--pixel);
  font-size: .88rem; color: #E4E4E4 !important;
  text-shadow: var(--shadow); padding: .2rem 0; position: relative;
}
.nav-links a:hover { color: var(--gold) !important; }
.nav-toggle { display: none; background: #9C9C9C; border: 2px solid; border-color: #D8D8D8 #4A4A4A #4A4A4A #D8D8D8; padding: .5rem .55rem; cursor: pointer; }
.nav-toggle i { display: block; width: 18px; height: 2px; background: #fff; margin: 3px 0; box-shadow: 1px 1px 0 rgba(0,0,0,.5); }

/* ── 特色网格 ───────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.panel-wide { grid-column: 1 / -1; }
.mini { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.mini li {
  font-family: var(--pixel); font-size: .82rem; color: #1F1F1F;
  background: #B0B0B0; padding: .24rem .7rem;
  border: 2px solid; border-color: var(--gui-lo) #E4E4E4 #E4E4E4 var(--gui-lo);
}
.mini-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem; }
.mini-2 li { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .5rem .8rem; border-color: var(--gui-lo) #E4E4E4 #E4E4E4 var(--gui-lo); }
.mini-2 li span { font-size: .76rem; font-weight: 400; color: var(--ink-soft); }

/* ── 画廊 ───────────────────────────────────────────────── */
.gallery { columns: 3; column-gap: 12px; padding-inline: var(--pad); max-width: 1480px; margin-inline: auto; }
.gallery figure {
  position: relative; break-inside: avoid; margin: 0 0 12px; cursor: zoom-in;
  border: var(--bevel) solid;
  border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi);
  background: var(--gui-dlo); padding: 3px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.gallery img { width: 100%; transition: filter .3s; }
.gallery figure:hover img { filter: brightness(1.12); }
.gallery figcaption {
  position: absolute; inset: auto 3px 3px 3px; padding: 1.8rem .7rem .5rem;
  font-size: .78rem; font-weight: 700; color: #fff; text-shadow: var(--shadow);
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  opacity: 0; transition: opacity .28s;
}
.gallery figure:hover figcaption, .gallery figure:focus-within figcaption { opacity: 1; }
@media (hover: none) { .gallery figcaption { opacity: 1; } }

.lightbox { position: fixed; inset: 0; z-index: 9500; display: none; place-items: center; background: rgba(6,6,6,.96); padding: 4vh 4vw; }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: 84vh; border: var(--bevel) solid; border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi); }
.lb-cap { margin-top: .9rem; font-size: .84rem; color: var(--grey); text-shadow: var(--shadow); text-align: center; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; width: 44px; height: 44px; cursor: pointer;
  background: #9C9C9C; color: #fff; font-size: 1.2rem; font-weight: 700;
  text-shadow: var(--shadow);
  border: var(--bevel) solid; border-color: #D8D8D8 #4A4A4A #4A4A4A #D8D8D8;
  display: grid; place-items: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: #B4C7E8; border-color: #E6EEFF #2C4A7C #2C4A7C #E6EEFF; }
.lb-close { top: 2vh; right: 3vw; }
.lb-prev { left: 2vw; top: 50%; transform: translateY(-50%); }
.lb-next { right: 2vw; top: 50%; transform: translateY(-50%); }

/* ── 表格 ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: var(--bevel) solid; border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi); background: var(--gui); }
.spec { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .9rem; color: var(--ink); }
.spec th, .spec td { padding: .8rem .95rem; text-align: left; border: 1px solid #A8A8A8; vertical-align: top; }
.spec thead th { font-family: var(--pixel); background: #A8A8A8; color: #1B1B1B; font-weight: 400; font-size: .9rem; text-shadow: 1px 1px 0 rgba(255,255,255,.35); }
.spec thead th span { display: block; font-size: .74rem; font-weight: 400; color: var(--ink-soft); }
.spec tbody th { background: #B6B6B6; font-weight: 700; color: #1F1F1F; width: 11em; }
.spec tbody tr:nth-child(even) td { background: #BEBEBE; }
.callout {
  margin-top: 1.3rem; padding: .9rem 1.1rem; font-size: .92rem;
  background: rgba(255,170,0,.1); border-left: 4px solid var(--gold);
  color: #F0E6D2;
}

/* ── 安装包 ─────────────────────────────────────────────── */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; }
.dl-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.dl-head h3 { margin-bottom: 0; }
.badge {
  font-family: var(--pixel); font-size: .78rem; padding: .16rem .6rem;
  background: var(--gold); color: #3A2500; text-shadow: none;
  border: 2px solid; border-color: #FFD37A #8A5C00 #8A5C00 #FFD37A;
}
.badge-alt { background: #A0A0A0; color: #262626; border-color: #E0E0E0 #5A5A5A #5A5A5A #E0E0E0; }
.dl-from { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.pros { list-style: none; margin-bottom: 1.2rem; }
.pros li { font-size: .89rem; margin-bottom: .6rem; padding-left: 1.5rem; position: relative; }
.pros li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pros li.p::before { content: '＋'; color: var(--green-ink); }
.pros li.c::before { content: '－'; color: var(--red-ink); }
.dl-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.dl-foot { margin-top: 1.6rem; font-size: .86rem; color: var(--grey); }

/* ── 注意事项 ───────────────────────────────────────────── */
.warn-list { list-style: none; counter-reset: w; }
.warn-list li {
  counter-increment: w; position: relative;
  padding: 1rem 1.2rem 1rem 3.4rem; margin-bottom: .6rem;
  background: rgba(255,85,85,.055);
  border-left: 4px solid rgba(255,85,85,.5);
  font-size: .93rem; color: #E6E6E6;
}
.warn-list li::before {
  content: counter(w); position: absolute; left: 1.1rem; top: 1rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  font-family: var(--pixel); font-size: .86rem;
  background: var(--red); color: #2A0808; text-shadow: none;
}
.warn-list .bad { color: var(--red); text-shadow: var(--shadow); }
.warn-list b { color: var(--gold); text-shadow: var(--shadow); }

/* ── 未来计划 ───────────────────────────────────────────── */
.roadmap { list-style: none; }
.roadmap li {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .85rem 1.1rem; margin-bottom: .5rem; font-size: .95rem;
  background: rgba(255,255,255,.035);
  border-left: 4px solid var(--gui-lo);
}
.tag {
  flex: none; font-family: var(--pixel); font-size: .78rem; padding: .16rem .6rem;
  background: var(--gold); color: #3A2500;
  border: 2px solid; border-color: #FFD37A #8A5C00 #8A5C00 #FFD37A;
}
.tag-dim { background: #8A8A8A; color: #1E1E1E; border-color: #C0C0C0 #4A4A4A #4A4A4A #C0C0C0; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list { display: grid; gap: .6rem; }
.faq-item { background: var(--gui); border: var(--bevel) solid; border-color: var(--gui-hi) var(--gui-lo) var(--gui-lo) var(--gui-hi); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .95rem 3rem .95rem 1rem; position: relative;
  font-size: .96rem; font-weight: 700; color: #1F1F1F;
  text-shadow: 1px 1px 0 rgba(255,255,255,.4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .q {
  flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  font-family: var(--pixel); font-size: .82rem;
  background: #8A8A8A; color: #fff; text-shadow: var(--shadow);
  border: 2px solid; border-color: #C0C0C0 #4A4A4A #4A4A4A #C0C0C0;
}
.faq-item summary::after {
  content: '▼'; position: absolute; right: 1rem; top: .95rem;
  font-size: .7rem; color: var(--ink-soft); transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] summary { background: #B8B8B8; }
.faq-a { padding: 0 1.1rem 1.1rem 3.1rem; font-size: .9rem; color: var(--ink); }
.faq-a p + p { margin-top: .7rem; }
.faq-a b { color: #1B1B1B; }
.faq-foot { margin-top: 1.4rem; color: var(--gold); font-weight: 700; text-shadow: var(--shadow); }

/* ── 页脚 ───────────────────────────────────────────────── */
.footer { border-top: 2px solid rgba(255,170,0,.25); background: var(--fog); padding: 2.4rem var(--pad) 1.6rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; align-items: center; }
.footer-brand img { width: clamp(190px, 28vw, 290px); filter: drop-shadow(2px 2px 0 rgba(0,0,0,.6)); margin-bottom: .5rem; }
.footer-brand p { font-size: .82rem; color: var(--grey); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .84rem; font-weight: 700; }
.footer-copy { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); font-size: .74rem; color: #7A7A7A; text-align: center; }

/* ── 滚动出现 ───────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.30s}
@media (prefers-reduced-motion: reduce) { .reveal{opacity:1;transform:none} html{scroll-behavior:auto} }

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gallery { columns: 2; }
  .grid-2 { grid-template-columns: minmax(0,1fr); }
  .grid-2 .frame { order: -1; }
}
@media (max-width: 780px) {
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .feat-grid, .dl-grid { grid-template-columns: minmax(0,1fr); }
  .nav-links {
    position: fixed; inset: 0; padding: 5rem var(--pad) 2rem;
    flex-direction: column; gap: 1.1rem;
    background: rgba(10,10,10,.98); transform: translateY(-102%);
    transition: transform .35s var(--ease);
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1.05rem; }
  .gallery { columns: 1; }
  .hero-inner { padding-top: 5.5rem; }
  .mcbtn { flex: 1 1 100%; }
  .slots { grid-template-columns: 1fr 1fr; }
  .spec tbody th { width: auto; }
}