/* ============================================================
   鱼窝 FISHCAVE — 设计系统
   字体策略：中文走系统字体（国内秒开、不依赖被墙的 Google CJK）；
   拉丁数字/技术标签用系统等宽栈，做出“街机/终端”观感，零外部依赖。
   ============================================================ */

:root {
  --bg:        #0c0e1a;
  --bg-2:      #111425;
  --panel:     #161a2c;
  --line:      rgba(120,140,220,0.14);
  --line-2:    rgba(120,140,220,0.24);

  --text:      #e9ecff;
  --text-mid:  #aab0d6;
  --text-dim:  #646a92;

  --cyan:      #1fe3d6;
  --purple:    #a06bff;
  --pink:      #ff3d8b;
  --yellow:    #ffd84d;

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 64px);

  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", "Source Code Pro", Consolas, "Liberation Mono", monospace;
  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

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

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- 自定义光标（默认隐藏，JS 仅在 fine pointer 下显示） ---------- */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.cursor { width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); mix-blend-mode: screen; }
.cursor-ring { width: 30px; height: 30px; border: 1px solid rgba(31,227,214,0.5); transition: left .12s ease, top .12s ease, width .2s, height .2s, border-color .2s; }
body.cursor-on { cursor: none; }
body.cursor-on .cursor, body.cursor-on .cursor-ring { opacity: 1; }
body.cursor-on a, body.cursor-on button { cursor: none; }
.cursor-ring.hot { width: 52px; height: 52px; border-color: var(--purple); }

/* ---------- 背景特效层 ---------- */
.fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.fx-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(120,140,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,220,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
}
.fx-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: orb 9s ease-in-out infinite; }
.fx-orb--cyan   { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(31,227,214,.16), transparent 70%); }
.fx-orb--purple { width: 460px; height: 460px; top: 30%; right: -160px; background: radial-gradient(circle, rgba(160,107,255,.16), transparent 70%); animation-delay: -3s; }
.fx-orb--pink   { width: 420px; height: 420px; bottom: -160px; left: 25%; background: radial-gradient(circle, rgba(255,61,139,.12), transparent 70%); animation-delay: -6s; }
@keyframes orb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-24px) scale(1.08); } }
.fx-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px);
}

/* ---------- 顶部公告 ---------- */
.ticker {
  display: flex; align-items: center; gap: 12px;
  padding: 9px var(--pad);
  background: linear-gradient(90deg, rgba(160,107,255,.16), rgba(255,61,139,.12));
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ticker[hidden] { display: none; }
.ticker__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: #06070d; background: var(--cyan); padding: 2px 8px; border-radius: 2px; flex: none;
}
.ticker__text { color: var(--text-mid); }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
  background: linear-gradient(180deg, rgba(5,6,13,.92), rgba(5,6,13,.55) 70%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__mark { font-size: 22px; font-weight: 800; letter-spacing: .12em; color: var(--text); }
.brand__en { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--cyan); }
.nav__menu { display: flex; gap: clamp(16px, 3vw, 36px); }
.nav__menu a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--text-dim); padding: 4px 0; position: relative; transition: color .2s;
}
.nav__menu a:hover { color: var(--cyan); }
.nav__menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--cyan); transition: width .25s; }
.nav__menu a:hover::after { width: 100%; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--text); font-size: 18px; line-height: 1; padding: 6px 12px; border-radius: 6px; cursor: pointer; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 90vh;
  display: flex; align-items: center;
  padding: clamp(60px,12vh,140px) var(--pad) 80px;
  overflow: hidden;
}
.note-glyph {
  position: absolute; bottom: -40px; font-size: 22px; color: var(--purple);
  opacity: 0; animation: note linear infinite; pointer-events: none;
}
@keyframes note { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .35; } 88% { opacity: .12; } 100% { transform: translateY(-94vh) rotate(300deg); opacity: 0; } }

.hero__inner { position: relative; max-width: 880px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 22px;
}
.eyebrow::before { content: "▶ "; color: var(--pink); }
.hero__title { line-height: .92; margin-bottom: 26px; }
.hero__cn {
  display: block; font-size: clamp(72px, 16vw, 184px); font-weight: 900; letter-spacing: .02em;
  color: #fff; text-shadow: 0 0 60px rgba(160,107,255,.35);
}
.hero__en {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: clamp(20px, 4.4vw, 46px); letter-spacing: .26em; margin-top: 8px;
  background: linear-gradient(110deg, var(--cyan), var(--purple) 60%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { color: var(--text-mid); font-size: clamp(14px,1.6vw,16px); max-width: 540px; margin-bottom: 38px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.btn {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  padding: 13px 30px; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn--solid { background: var(--cyan); color: #05060d; font-weight: 700; }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(31,227,214,.4); }
.btn--ghost { border: 1px solid var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

.hero__facts { list-style: none; display: flex; gap: clamp(24px,5vw,64px); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.hero__facts b { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--cyan); line-height: 1; }
.hero__facts li:nth-child(2) b { color: var(--purple); }
.hero__facts li:nth-child(3) b { color: var(--pink); }
.hero__facts span { font-size: 12px; color: var(--text-dim); letter-spacing: .04em; }

.hero__scroll { position: absolute; bottom: 28px; right: var(--pad); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__scroll span { font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--text-dim); writing-mode: vertical-rl; }
.hero__scroll i { width: 1px; height: 48px; background: linear-gradient(var(--cyan), transparent); animation: scrolll 2s ease-in-out infinite; }
@keyframes scrolll { 0%,100% { transform: scaleY(.4); opacity: .4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- 区块通用 ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px,10vw,120px) var(--pad); }
.rule { max-width: var(--maxw); margin: 0 auto; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.sec-head { margin-bottom: 56px; }
.sec-num { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; color: var(--purple); margin-bottom: 14px; }
.sec-title { font-size: clamp(28px,5vw,52px); font-weight: 900; line-height: 1.05; letter-spacing: .01em; }
.sec-title span { background: linear-gradient(120deg, var(--cyan), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--text-dim); margin-top: 12px; }

/* ---------- ABOUT ---------- */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.about__lead { font-size: clamp(16px,2vw,19px); color: var(--text); line-height: 2; }
.about__points { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.about__points li { background: var(--bg); padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; }
.pt-k { color: var(--cyan); font-weight: 700; font-size: 15px; }
.pt-v { color: var(--text-dim); font-size: 13px; }

/* ---------- MACHINES（每个机种独占一行） ---------- */
.m-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.m-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  background: var(--bg); padding: 20px 24px; position: relative; transition: background .25s;
}
.m-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.m-row:hover { background: var(--bg-2); }
.m-row.ok { --c: var(--cyan); }
.m-row.repair { --c: var(--yellow); }
.m-row.off { --c: var(--text-dim); opacity: .55; }
.m-idx { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--c); opacity: .4; line-height: 1; }
.m-main { min-width: 0; }
.m-name { font-size: 18px; font-weight: 800; color: var(--text); }
.m-count { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text-mid); }
.m-desc { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-top: 3px; }
.status { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; padding: 4px 11px; border: 1px solid; border-radius: 3px; white-space: nowrap; }
.status--ok { color: var(--cyan); border-color: rgba(31,227,214,.4); background: rgba(31,227,214,.08); }
.status--repair { color: var(--yellow); border-color: rgba(255,216,77,.4); background: rgba(255,216,77,.08); }
.status--off { color: var(--text-dim); border-color: var(--line-2); }
.m-empty { padding: 40px 26px; color: var(--text-dim); font-family: var(--mono); font-size: 13px; background: var(--bg); }

/* ---------- HOURS · PRICE ---------- */
.hp { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hp__hours { background: var(--bg); padding: 32px 30px; display: flex; flex-direction: column; justify-content: center; }
.hp__k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--text-dim); margin-bottom: 14px; }
.hp__big { font-size: clamp(56px,9vw,92px); font-weight: 900; line-height: .9; background: linear-gradient(120deg, var(--cyan), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp__big span { font-size: .5em; }
.hp__note { color: var(--text-mid); font-size: 14px; margin-top: 10px; }
.price-grid { background: var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.pc { background: var(--bg); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.pc__k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--cyan); }
.pc__v { font-size: 16px; color: var(--text); }
.pc__v b { font-weight: 800; color: #fff; }
.pc__sub { font-size: 12px; color: var(--text-dim); }

/* 阶梯封顶时间线（整行）：左侧标签 + 彩色轨道条，价格浮于上下 */
.pc--axis { grid-column: 1 / -1; gap: 14px; }
.tl { display: grid; grid-template-columns: auto 5fr 5fr 14fr; align-items: center; row-gap: 8px; }
.tl-side { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-align: right; padding-right: 16px; color: var(--text-dim); white-space: nowrap; }
.tl-side.off { color: var(--cyan); }
.tl-side.busy { color: var(--pink); }
.tl-p { text-align: center; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.tl-p.off { color: var(--text-mid); }
.tl-p.busy { color: #fff; font-weight: 700; }
.tl-bar { height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.tl-bar.s1 { background: rgba(31,227,214,.16); color: var(--cyan); border-radius: 7px 0 0 7px; }
.tl-bar.s2 { background: rgba(160,107,255,.18); color: var(--purple); }
.tl-bar.s3 { background: rgba(255,61,139,.16); color: var(--pink); border-radius: 0 7px 7px 0; }
.tl-bar + .tl-bar { box-shadow: inset 1px 0 0 rgba(255,255,255,.08); }
.tl-ticks { grid-column: 2 / -1; position: relative; height: 14px; }
.tl-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--text-mid); }
.tl-ticks span:first-child { transform: translateX(0); }
.tl-ticks span:last-child { transform: translateX(-100%); }

/* 计算器 */
.calc { margin-top: 32px; border: 1px solid var(--line-2); background: var(--panel); }
.calc__head { display: flex; align-items: baseline; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.calc__tag { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: #06070d; background: var(--purple); padding: 2px 8px; border-radius: 2px; }
.calc__head h3 { font-size: 17px; font-weight: 800; }
.calc__hint { font-size: 12px; color: var(--text-dim); }
.calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 22px 24px; }
.calc__form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-dim); }
.calc__form input, .calc__form select {
  font-family: var(--sans); font-size: 14px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--line-2); border-radius: 3px; padding: 10px 12px;
}
.calc__form input:focus, .calc__form select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(31,227,214,.15); }
.calc__out { padding: 22px 24px; border-top: 1px solid var(--line); }
.calc__out.bad { color: var(--pink); font-size: 14px; }
.calc__sum { font-size: 16px; color: var(--text-mid); }
.calc__sum b { font-family: var(--mono); font-size: 38px; font-weight: 800; color: var(--cyan); display: inline-block; margin-left: 6px; vertical-align: -4px; }
.calc__rows { margin-top: 16px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.calc__row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; background: var(--bg); padding: 11px 14px; font-size: 13px; }
.calc__row > span:first-child { color: var(--text); }
.calc__basis { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.calc__row b { font-family: var(--mono); color: var(--cyan); }
.calc__expl { margin-top: 16px; font-size: 13px; color: var(--text-dim); line-height: 1.9; }

.price-notes { list-style: none; margin-top: 28px; display: grid; gap: 8px; }
.price-notes li { position: relative; padding-left: 20px; font-size: 13px; color: var(--text-dim); line-height: 1.8; }
.price-notes li::before { content: "—"; position: absolute; left: 0; color: var(--purple); }
.price-notes b { color: var(--text-mid); }

/* ---------- LOCATION ---------- */
.loc { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.loc__info { display: flex; flex-direction: column; }
.loc__row { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.loc__row:first-child { padding-top: 0; }
.loc__k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--pink); }
.loc__v { color: var(--text-mid); font-size: 15px; line-height: 1.8; }
.loc__v b { color: var(--text); }
.loc__map { position: relative; aspect-ratio: 16/11; border: 1px solid var(--line-2); overflow: hidden; background: var(--panel); }
.loc__map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(31,227,214,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,227,214,.06) 1px, transparent 1px); background-size: 34px 34px; }
.loc__map-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: mapscan 3.5s linear infinite; }
@keyframes mapscan { 0% { top: 0; } 100% { top: 100%; } }
.loc__pin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loc__pin .dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); margin-bottom: 16px; }
.ping { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,61,139,.5); transform: translate(-50%, -50%); animation: ping 2.4s ease-out infinite; }
.ping--2 { animation-delay: 1.2s; }
@keyframes ping { 0% { width: 12px; height: 12px; opacity: .8; } 100% { width: 96px; height: 96px; opacity: 0; } }
.loc__map-name { font-weight: 800; letter-spacing: .06em; }
.loc__map-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--text-dim); margin-top: 4px; }

/* ---------- CONTACT ---------- */
.contact { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.qq { margin: 0; }
.qq img { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--line-2); margin: 0 auto 14px; }
.qq figcaption { display: flex; flex-direction: column; gap: 4px; }
.qq figcaption b { font-size: 16px; }
.qq figcaption span { color: var(--text-dim); font-size: 13px; }
.qq figcaption .qq-num { font-family: var(--mono); color: var(--cyan); letter-spacing: .04em; user-select: all; }
.links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 44px; }
.links li { display: flex; flex-direction: column; gap: 4px; }
.links li[hidden] { display: none; }
.links__k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--text-dim); }
.links__v { font-size: 17px; font-weight: 700; color: var(--cyan); }
a.links__v:hover { text-decoration: underline; }

/* ---------- FOOTER ---------- */
.foot {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 44px var(--pad); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
}
.foot__cn { font-size: 22px; font-weight: 800; letter-spacing: .1em; }
.foot__en { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; color: var(--cyan); margin-left: 10px; }
.foot__meta { text-align: right; }
.foot__meta p { font-size: 12px; color: var(--text-dim); line-height: 1.9; }
.foot__meta a { color: var(--text-dim); text-decoration: underline; }
.foot__meta a:hover { color: var(--cyan); }

/* ---------- 滚动揭示 ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   响应式断点阶梯（覆盖主流屏幕：超宽屏 / 桌面 / 笔电 / 平板 / 手机 / 横屏）
   思路：贯穿全站的 clamp() 负责连续缩放，下列断点负责布局重排与
   固定 px 间距/字号在小屏上的收敛。
   ============================================================ */

/* ---------- 超宽屏 ≥1680px：放宽内容宽度，避免两侧空旷 ---------- */
@media (min-width: 1680px) {
  :root { --maxw: 1360px; }
}
/* ---------- 大桌面 1440–1679px：略微放宽 ---------- */
@media (min-width: 1440px) and (max-width: 1679.98px) {
  :root { --maxw: 1280px; }
}

/* ---------- 笔电窄屏 ≤1100px：机台行间距收一点 ---------- */
@media (max-width: 1100px) {
  .m-row { padding: 18px 22px; gap: 16px; }
}

/* ---------- 平板横屏 / 中屏 ≤980px ---------- */
@media (max-width: 980px) {
  .sec-head { margin-bottom: 44px; }
  .hp { grid-template-columns: minmax(180px, 240px) 1fr; }
}

/* ---------- 平板竖屏 ≤820px：主要双列布局塌为单列 ---------- */
@media (max-width: 820px) {
  .about, .hp, .loc { grid-template-columns: 1fr; }
  .hp__hours { padding: 26px 28px; }
  .loc__map { aspect-ratio: 16/10; }
  .sec-head { margin-bottom: 40px; }
  .hero__sub br { display: none; }
}

/* ---------- 大屏手机 ≤680px：导航收汉堡、价格区单列、时间线横滚 ---------- */
@media (max-width: 680px) {
  .price-grid { grid-template-columns: 1fr; }
  .pc--axis { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl { min-width: 500px; }
  .calc__row { grid-template-columns: 1fr auto; }
  .calc__basis { grid-column: 1 / -1; }
  .nav { padding: 14px var(--pad); }
  .nav__menu { display: none; }
  .nav__menu.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-2); padding: 14px var(--pad); gap: 4px; border-bottom: 1px solid var(--line); }
  .nav__menu.open a { padding: 12px 4px; font-size: 14px; }
  .nav__toggle { display: block; }
  .hero__scroll { display: none; }
  .sec-head { margin-bottom: 34px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .foot__meta { text-align: left; }
}

/* ---------- 手机 ≤560px：按钮通栏、机台行与卡片收紧 ---------- */
@media (max-width: 560px) {
  .hero__cta { gap: 10px; }
  .hero__cta .btn { flex: 1 1 100%; text-align: center; padding: 14px 24px; }
  .hero__facts { gap: 22px 36px; }
  .hero__facts b { font-size: 26px; }
  .m-row { padding: 16px 18px; gap: 14px; }
  .m-name { font-size: 16px; }
  .pc { padding: 16px 18px; }
  .hp__hours { padding: 24px 22px; }
  .calc__head { padding: 16px 18px; }
  .calc__form { padding: 18px 18px; grid-template-columns: 1fr 1fr; }
  .calc__out { padding: 18px; }
  .calc__sum b { font-size: 32px; }
  .qq img { width: 170px; height: 170px; }
  .links { gap: 14px 32px; }
}

/* ---------- 小屏手机 ≤400px：极限收敛，防溢出 ---------- */
@media (max-width: 400px) {
  .hero__en { letter-spacing: .16em; }
  .hero__facts { gap: 18px 28px; }
  .hero__facts b { font-size: 23px; }
  .m-row { grid-template-columns: auto 1fr; row-gap: 8px; padding: 15px 16px; }
  .m-idx { font-size: 20px; }
  .status { grid-column: 1 / -1; justify-self: start; }
  .calc__form { grid-template-columns: 1fr; }
  .calc__sum b { font-size: 28px; }
  .sec-head { margin-bottom: 28px; }
  .ticker { font-size: 12px; gap: 8px; }
}

/* ---------- 横屏矮视口：压缩 hero 高度，避免标题撑满整屏 ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: clamp(48px, 14vh, 96px); padding-bottom: 56px; }
  .hero__scroll { display: none; }
}

/* ---------- 降低动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}