/* ============================================================
   鹿谷社区 lgsqa.cn —— 「山谷驿站」主题
   白 #ffffff · 米白 #f7fafc · 浅雾 #eef4f9 · 墨夜蓝 #14203a · 谷青 #12c2b0 · 琥珀 #f5a623
   谷口路标桩+导览图英雄 / 里程刻度条 / 六块导览牌 / 谷口吊轨画廊
   翻转问答牌 / 鹿友楼层 / 谷口取件窗口
   阴影语言（全页唯一，禁止重复）：
   ① 导览图  14px 16px 0 rgba(10,20,40,.88)     硬偏移·墨蓝
   ② 吊挂画框 0 26px 50px -24px rgba(0,0,0,.62)  软投·向下（夜）
   ③ 问答牌  0 16px 32px -16px rgba(20,32,58,.28) 软垫·向下
   ④ 楼层卡  6px 8px 0 rgba(18,194,176,.5)       硬偏移·谷青
   ⑤ 取件窗  0 0 70px rgba(18,194,176,.42)       谷青发光·焦点
   内部卡片零阴影，靠描边/色条/编号块分层
   ============================================================ */
:root{
  --ink:#14203a;
  --ink2:#1d2c4a;
  --night:#0d1828;
  --night2:#0a1220;
  --teal:#12c2b0;
  --teal-d:#0e9c8d;
  --teal-l:#3fd9c8;
  --amber:#f5a623;
  --amber-d:#d98a10;
  --mist:#eef4f9;
  --mist2:#f7fafc;
  --warm:#ffffff;
  --txt:#2a3547;
  --soft:#6b7a90;
  --line:rgba(20,32,58,.14);
  --mono:"Courier New",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:var(--txt);background:var(--warm);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
[id]{scroll-margin-top:84px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;border-radius:10px;border:2px solid transparent;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 5px 0 var(--teal-d)}
.btn-teal:hover{background:var(--teal-l);box-shadow:0 7px 0 var(--teal-d);transform:translateY(-2px)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:14px 30px;font-size:16px}
.btn-xl{padding:17px 44px;font-size:18px}
.teal-dot{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,var(--teal-l) 44%,var(--teal-d));border:2px solid #fff;flex:none}

/* ---------- 顶栏 ---------- */
.hd{position:sticky;top:0;z-index:80;background:var(--warm);border-bottom:3px solid var(--ink)}
.hd::after{content:"";display:block;height:3px;background:repeating-linear-gradient(90deg,var(--teal) 0 24px,var(--amber) 24px 48px)}
.hd-in{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{border-radius:10px;border:2px solid var(--ink);background:#fff}
.brand-t{display:flex;flex-direction:column;line-height:1.25}
.brand-t strong{font-size:19px;color:var(--ink);letter-spacing:2px}
.brand-t small{font-size:11px;letter-spacing:1.6px;color:var(--soft);font-family:var(--mono)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:15px;padding:8px 13px;border-radius:8px;color:var(--txt);transition:color .15s,background .15s}
.nav a:hover{color:var(--teal-d);background:var(--mist)}
.nav a.on{color:#fff;background:var(--ink);font-weight:700}
.hd-r{display:flex;align-items:center;gap:14px}
.hd-cta{padding:9px 22px;font-size:15px}
.burger{display:none;width:42px;height:42px;border:2px solid var(--ink);border-radius:10px;place-items:center;gap:4px;padding:9px 8px;background:var(--mist2)}
.burger span{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px}

/* ---------- 英雄区 · 谷口路标桩 + 导览图 ---------- */
.hero{background:radial-gradient(680px 420px at 94% 2%,rgba(18,194,176,.14),transparent 60%),radial-gradient(520px 420px at 0% 100%,rgba(245,166,35,.1),transparent 58%),var(--mist)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:84px 24px 96px}
.kick{font-size:13px;font-weight:700;letter-spacing:2.4px;color:var(--soft);display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.kick-lab{background:var(--ink);color:var(--teal);letter-spacing:2px;padding:3px 13px;border-radius:6px;font-style:normal;font-family:var(--mono);font-weight:700}
.hero h1{font-size:60px;line-height:1.12;letter-spacing:6px;margin:20px 0 8px;color:var(--ink);font-weight:800}
.hero-slogan{font-size:26px;font-weight:800;line-height:1.5;color:var(--ink)}
.hero-slogan i{font-style:normal;color:var(--teal-d);border-bottom:3px solid var(--teal);padding-bottom:2px}
.lead{margin-top:18px;font-size:15.5px;color:var(--soft);max-width:34em}
.hero-acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-tags li{font-size:13px;padding:5px 14px;border:1.5px dashed rgba(20,32,58,.34);border-radius:6px;color:var(--txt);letter-spacing:1px}
.hero-note{display:flex;align-items:center;gap:9px;margin-top:24px;font-size:13px;color:var(--soft)}
.hero-note .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 0 4px rgba(245,166,35,.18)}

/* 路标桩 + 导览图 */
.hero-r{display:flex;justify-content:center}
.valley{display:flex;align-items:flex-end;justify-content:center;gap:16px;width:100%;max-width:560px}
.signpost{position:relative;width:174px;flex:none;padding:24px 0 0}
.sp-pole{position:absolute;left:50%;top:22px;bottom:0;width:14px;transform:translateX(-50%);background:linear-gradient(90deg,#a87b41,#d0a464 42%,#8e6635);border:2px solid var(--ink);border-radius:4px}
.sp-cap{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:26px;height:26px;background:var(--amber);border:2px solid var(--ink);border-radius:50%;z-index:3}
.sp-planks{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:48px 0 34px}
.spk{position:relative;background:var(--warm);border:2px solid var(--ink);border-radius:6px;padding:8px 12px;display:flex;flex-direction:column;gap:1px}
.spk b{font-size:13.5px;color:var(--ink)}
.spk i{font-style:normal;font-size:11px;color:var(--teal-d);font-family:var(--mono);font-weight:700}
.spk-l{margin-right:36px;transform:rotate(-1.4deg)}
.spk-r{margin-left:36px;transform:rotate(1.4deg)}
.spk-l::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-right-color:var(--ink)}
.spk-r::after{content:"";position:absolute;right:-13px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:var(--ink)}
.sp-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:78px;height:16px;background:var(--ink);border-radius:6px 6px 0 0;z-index:1}
.mapboard{position:relative;flex:1;max-width:374px;background:repeating-radial-gradient(circle at 84% 16%,rgba(18,194,176,.07) 0 11px,transparent 11px 25px),var(--warm);border:2px solid var(--ink);border-radius:12px;padding:14px 14px 12px;box-shadow:14px 16px 0 rgba(10,20,40,.88)}
.mb-head{display:flex;align-items:baseline;gap:9px;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:12px}
.mb-head i{font-style:normal;font-size:15px;font-weight:800;color:var(--ink)}
.mb-head em{font-style:normal;font-size:10.5px;letter-spacing:2px;color:var(--soft);font-family:var(--mono)}
.mb-shot{display:block;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:7px}
.mb-shot img{width:100%;height:auto;max-width:344px;margin:0 auto;border-radius:5px}
.mb-seal{position:absolute;right:-15px;top:56px;width:42px;height:42px;background:var(--teal);color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--warm);transform:rotate(6deg)}
.mb-ft{display:block;text-align:center;font-size:12px;color:var(--soft);padding-top:10px}

/* ---------- 里程刻度 · 数字条 ---------- */
.ruler{background:var(--night);border-top:3px solid var(--teal);border-bottom:3px solid var(--amber);position:relative}
.ruler::before,.ruler::after{content:"";position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 2px,transparent 2px 18px)}
.ruler::before{top:5px}
.ruler::after{bottom:5px}
.ruler-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 24px;position:relative}
.rl-line{position:absolute;left:24px;right:24px;top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(18,194,176,.55) 0 10px,transparent 10px 20px);transform:translateY(-50%)}
.rl-i{text-align:center;position:relative;z-index:2;background:var(--night2);border:2px solid rgba(18,194,176,.5);border-radius:8px;padding:10px 8px}
.rl-i b{display:block;font-family:var(--mono);font-size:34px;font-weight:700;color:var(--teal);line-height:1.25;text-shadow:0 0 16px rgba(18,194,176,.5)}
.rl-i i{font-style:normal;font-size:12.5px;color:rgba(255,255,255,.8);letter-spacing:2px}

/* ---------- 区块通用 ---------- */
.sec{padding:88px 0 96px}
.sec-white{background:var(--warm)}
.sec-mist{background:var(--mist)}
.sec-night{background:radial-gradient(700px 380px at 12% 8%,rgba(18,194,176,.16),transparent 62%),var(--night);color:#eaf1f7}
.sec-h{text-align:center;max-width:46em;margin:0 auto 48px}
.sec-h .kick{justify-content:center}
.sec-h h2{font-size:36px;margin:16px 0 12px;color:var(--ink);font-weight:800;letter-spacing:2px}
.sec-night .sec-h h2{color:#fff}
.sec-night .sec-h .kick{color:rgba(255,255,255,.6)}
.sec-p{font-size:15.5px;color:var(--soft)}
.sec-night .sec-p{color:rgba(255,255,255,.68)}

/* ---------- 六块导览牌 ---------- */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;align-items:start}
.bd{display:flex;gap:17px;align-items:flex-start;background:var(--mist2);border:2px solid var(--ink);border-radius:12px;padding:22px 24px;position:relative}
.bd::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;border-radius:0 4px 4px 0;background:var(--teal)}
.bd2::before,.bd5::before{background:var(--amber)}
.bd3::before,.bd6::before{background:var(--ink2)}
.bd:nth-child(even){transform:translateY(40px)}
.bd-no{flex:none;width:52px;height:52px;border-radius:12px;background:var(--ink);color:var(--teal);font-family:var(--mono);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)}
.bd-txt{flex:1;min-width:0}
.bd2 .bd-no,.bd5 .bd-no{background:var(--amber);color:#fff;border-color:var(--amber-d)}
.bd3 .bd-no,.bd6 .bd-no{background:var(--teal);color:#fff;border-color:var(--teal-d)}
.bd h3{font-size:20px;color:var(--ink);margin-bottom:7px;letter-spacing:1px}
.bd p{font-size:14.5px;color:var(--soft);line-height:1.85}

/* ---------- 谷口吊轨画廊 ---------- */
.rail{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:22px;padding-top:10px}
.rail-bar{position:absolute;top:4px;left:0;right:0;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--amber))}
.rg{position:relative;width:206px;flex:none;padding-top:36px}
.hook{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:3px;height:28px;background:rgba(255,255,255,.55)}
.hook::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;border:2.5px solid rgba(255,255,255,.7)}
.rg-frame{display:block;background:var(--mist2);border:2px solid var(--ink2);border-radius:8px;padding:8px;box-shadow:0 26px 50px -24px rgba(0,0,0,.62)}
.rg-frame img{width:100%;height:auto;max-width:100%;margin:0 auto;border-radius:4px}
.rg figcaption{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:rgba(255,255,255,.8);padding-top:12px;text-align:center}
.rg figcaption i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--amber);font-weight:700}
.rg-b{transform:translateY(38px)}

/* ---------- 翻转问答牌 ---------- */
.fqs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fq{position:relative;min-height:250px;perspective:1200px}
.fq-face{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:center;gap:11px;background:var(--warm);border:2px solid var(--ink);border-radius:12px;padding:26px 24px;text-align:left;backface-visibility:hidden;transition:transform .42s ease,opacity .3s ease;overflow:hidden}
.fq-face::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--teal)}
.fq:nth-child(3n+2) .fq-face::before{background:var(--amber)}
.fq:nth-child(3n) .fq-face::before{background:var(--ink2)}
.fq-face:hover{transform:translateY(-4px)}
.fq-q{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--ink);color:var(--teal);font-family:var(--mono);font-weight:700;font-size:14px}
.fq-face b{font-size:18px;color:var(--ink);line-height:1.6;letter-spacing:.5px}
.fq-face em{font-style:normal;font-size:12.5px;color:var(--soft);border-top:1.5px dashed var(--line);padding-top:9px}
.fq-back{position:absolute;inset:0;background:var(--ink);color:#e9f0f7;border-radius:12px;padding:24px 22px;transform:rotateY(90deg);opacity:0;transition:transform .42s ease,opacity .3s ease;overflow:auto}
.fq-back p{font-size:14.5px;line-height:1.9;color:#e9f0f7}
.fq-a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--teal);color:#fff;font-weight:700;font-size:16px;margin-bottom:10px}
.fq.on .fq-face{transform:rotateY(-90deg);opacity:0}
.fq.on .fq-back{transform:rotateY(0);opacity:1}

/* ---------- 鹿友楼层 ---------- */
.floors{position:relative;padding-left:32px;max-width:940px;margin:0 auto}
.floors::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px)}
.fl{position:relative;background:var(--mist2);border:2px solid var(--ink);border-radius:10px;padding:16px 22px 15px;margin-bottom:18px;box-shadow:6px 8px 0 rgba(18,194,176,.5)}
.fl-node{position:absolute;left:-32px;top:24px;width:16px;height:16px;border-radius:50%;background:var(--teal);border:3px solid var(--warm);box-shadow:0 0 0 2px var(--ink)}
.fl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1.5px dashed var(--line);padding-bottom:10px;margin-bottom:11px}
.fl-no{font-size:12px;font-weight:700;color:var(--ink);background:var(--mist);border:1.5px solid var(--ink);border-radius:5px;padding:2px 9px;font-family:var(--mono)}
.fl-lz{background:var(--amber);color:#fff;border-color:var(--amber-d)}
.fl-top b{font-size:14px;color:var(--ink)}
.fl-top time{margin-left:auto;font-size:12.5px;color:var(--soft);font-family:var(--mono);white-space:nowrap}
.fl-txt{font-size:14.5px;color:var(--txt);line-height:1.9}

/* ---------- 谷口取件窗口 ---------- */
.pickup{background:linear-gradient(180deg,var(--night),#0f1a30);padding:88px 0 96px}
.pickup-in{display:flex;flex-direction:column;align-items:center}
.pu-board{display:flex;flex-direction:column;align-items:center;gap:2px;background:#0b1424;border:2px solid var(--teal);border-bottom:0;border-radius:10px 10px 0 0;padding:12px 48px}
.pu-no{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--amber);letter-spacing:2px;text-shadow:0 0 14px rgba(245,166,35,.6)}
.pu-tip{font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.55)}
.pu-window{position:relative;width:100%;max-width:680px;background:var(--mist2);border:3px solid var(--ink);border-radius:14px;padding:52px 32px 58px;text-align:center;box-shadow:0 0 70px rgba(18,194,176,.42)}
.pu-lamp{position:absolute;top:-13px;left:32px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fff6e0,var(--amber) 60%,var(--amber-d));border:2px solid var(--ink)}
.pu-lamp2{left:auto;right:32px}
.pu-window h2{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:2px;margin-bottom:12px}
.pu-window p{font-size:15.5px;color:var(--soft);letter-spacing:1px;margin-bottom:26px}
.pu-window .btn-xl{margin-bottom:16px}
.pu-window small{display:block;font-size:13px;color:var(--soft)}
.pu-sill{position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,var(--ink2),var(--ink));border-radius:0 0 11px 11px}

/* ---------- 页脚 ---------- */
.ft{background:var(--mist);border-top:5px solid var(--teal)}
.ft-in{padding:36px 24px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px}
.ft-brand{display:flex;align-items:center;gap:10px}
.ft-brand img{border-radius:8px;border:2px solid var(--ink);background:#fff}
.ft-brand span{font-size:16px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.ft-nav a{font-size:14px;color:var(--soft);transition:color .15s}
.ft-nav a:hover{color:var(--teal-d)}
.ft-nav .complaint-link{display:inline-flex;align-items:center;gap:5px}
.ft-icp{font-size:13px;color:var(--soft)}
.ft-copy{font-size:13px;color:var(--ink);letter-spacing:1px}

/* ---------- 返回顶部 ---------- */
.backtop{position:fixed;right:22px;bottom:160px;z-index:70;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;font-size:21px;font-weight:700;border:2px solid var(--ink);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s}
.backtop.show{opacity:1;visibility:visible;transform:none}
.backtop:hover{background:var(--teal-d)}

/* ---------- 入场 ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .fq-face,.fq-back{transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .hero-in{gap:38px}
  .rail{gap:16px}
  .rg{width:194px}
}
@media (max-width:920px){
  .nav{position:fixed;top:73px;right:12px;left:12px;z-index:79;display:none;flex-direction:column;gap:4px;background:var(--warm);border:2px solid var(--ink);border-radius:12px;padding:12px}
  .nav.open{display:flex}
  .nav a{padding:11px 14px}
  .burger{display:grid}
  .hd-cta{display:none}
  .hero-in{grid-template-columns:1fr;padding:58px 24px 70px}
  .hero h1{font-size:46px;text-align:center}
  .hero-slogan{text-align:center}
  .kick{justify-content:center}
  .lead{margin-left:auto;margin-right:auto;text-align:center}
  .hero-acts{justify-content:center}
  .hero-tags{justify-content:center}
  .hero-note{justify-content:center}
  .valley{flex-direction:column-reverse;align-items:center;gap:22px;max-width:420px;margin:12px auto 0}
  .mapboard{max-width:400px;box-shadow:10px 12px 0 rgba(10,20,40,.88)}
  .signpost{width:100%;padding:0}
  .sp-pole,.sp-cap,.sp-base{display:none}
  .sp-planks{flex-direction:row;gap:10px;padding:2px 4px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .spk{flex:none;min-width:152px;margin:0!important;transform:none}
  .spk-l::before,.spk-r::after{display:none}
  .boards{grid-template-columns:1fr;gap:18px}
  .bd:nth-child(even){transform:none}
  .rail{justify-content:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 24px 30px;margin:0 -24px;-webkit-overflow-scrolling:touch}
  .rail-bar{display:none}
  .rg{scroll-snap-align:center;padding-top:24px}
  .rg-b{transform:none}
  .hook{height:18px}
  .fqs{grid-template-columns:1fr 1fr;gap:18px}
  .fq{min-height:262px}
  .sec{padding:64px 0 72px}
  .sec-h h2{font-size:29px}
  [id]{scroll-margin-top:72px}
}
@media (max-width:560px){
  .hero h1{font-size:38px;letter-spacing:4px}
  .hero-slogan{font-size:21px}
  .hero-acts .btn{width:100%}
  .ruler-in{grid-template-columns:1fr 1fr;gap:16px;padding:28px 24px}
  .rl-line{display:none}
  .rl-i b{font-size:27px}
  .fqs{grid-template-columns:1fr}
  .fq{min-height:210px}
  .fq-face{padding:22px 20px}
  .floors{padding-left:24px}
  .fl-node{left:-24px}
  .fl{padding:15px 16px 14px}
  .fl-top time{margin-left:0;width:100%}
  .pu-window{padding:40px 20px 48px}
  .pu-window h2{font-size:25px}
  .pu-board{padding:10px 30px}
  .pu-no{font-size:19px}
  .backtop{bottom:150px;right:16px;width:42px;height:42px}
}