/* =====================================================
   CBD迷你仓 · 深圳站 独立设计体系（湾区科技蓝白）
   亮科技蓝 #1D62D8 / 深藏蓝 #0F1F3D / 纯白 / 浅蓝晕 #E9F2FF
   仪表风：粗左边框 + 大号数据字 + 直角卡片 + 深浅整幅交替
   与全国站（深蓝+橙）、北京站（海军蓝编辑排版）、
   上海站（海派蓝横幅网格）均不相同
   ===================================================== */
:root {
  --blue: #1D62D8; --blue-deep: #0F1F3D; --blue-ink: #143A78;
  --wash: #E9F2FF; --paper: #F7FAFF; --card: #FFFFFF;
  --ink: #17233B; --ink2: #45536B; --muted: #7E8AA0; --line: #D9E4F5;
  --r: 4px;
  --shadow: 0 2px 12px rgba(15, 31, 61, .08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.75; font-size: 16px; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.shell { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- 顶栏（细条 + 白底大字导航） ---------- */
.bar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.bar__in { max-width: 1080px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.bar .logo { display: flex; align-items: center; }
.bar .logo img { height: 44px; width: auto; display: block; }
.bar__links { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.bar__links a { color: var(--ink2); font-size: 15px; padding: 7px 12px; border-radius: var(--r); }
.bar__links a:hover { color: var(--blue); background: var(--wash); text-decoration: none; }
.bar__links a.on { color: var(--blue); font-weight: 600; background: var(--wash); }
.bar__tel { font-size: 14px; color: var(--ink); border-left: 3px solid var(--blue); padding-left: 12px; line-height: 1.4; }
.bar__tel b { color: var(--blue); font-size: 16px; }

/* ---------- 眉题 / 标题体系（粗左边框） ---------- */
.kick { display: inline-block; font-size: 13px; letter-spacing: .18em; color: var(--blue); font-weight: 700; text-transform: uppercase; border-left: 4px solid var(--blue); padding-left: 10px; line-height: 1.5; }
h2.sec { font-size: 30px; line-height: 1.3; margin: 10px 0 8px; letter-spacing: .01em; }
.sec-sub { color: var(--ink2); max-width: 720px; }

/* ---------- 首屏（白底仪表：粗边框 + 大数据字） ---------- */
.hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 58px 0 50px; }
.hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: start; }
.hero h1 { font-size: 40px; line-height: 1.28; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lead { color: var(--ink2); margin: 16px 0 24px; font-size: 17px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 12px 26px; border-radius: var(--r); font-weight: 600; font-size: 16px; }
.btn--main { background: var(--blue); color: #fff; }
.btn--main:hover { background: var(--blue-ink); text-decoration: none; }
.btn--ghost { border: 2px solid var(--blue); color: var(--blue); }
.btn--ghost:hover { background: var(--wash); text-decoration: none; }
/* 数据仪表卡 */
.gauge { border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--r); background: var(--card); padding: 22px 24px 10px; box-shadow: var(--shadow); }
.gauge__row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.gauge__row:last-child { border-bottom: 0; }
.gauge__k { color: var(--ink2); font-size: 14px; }
.gauge__v { font-size: 26px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.gauge__v small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* ---------- 整幅深藏蓝色带 ---------- */
.strip { background: var(--blue-deep); color: #EAF2FF; padding: 54px 0; }
.strip .kick { color: #9CC3FF; border-color: #9CC3FF; }
.strip h2.sec { color: #fff; }
.strip .sec-sub { color: #B9CBE8; }
.strip a { color: #9CC3FF; }

/* ---------- 卡片网格（直角、顶部蓝条） ---------- */
.grid { display: grid; gap: 18px; margin-top: 30px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--shadow); }
.pane--top { border-top: 3px solid var(--blue); }
.pane h3 { font-size: 18px; margin-bottom: 8px; }
.pane h3 .no { color: var(--blue); font-weight: 800; margin-right: 8px; font-size: 20px; }
.pane p { color: var(--ink2); font-size: 14.5px; }
.pane .tagline { display: inline-block; font-size: 12.5px; color: var(--blue); background: var(--wash); border-radius: 3px; padding: 2px 9px; margin-bottom: 10px; letter-spacing: .06em; }

/* ---------- 门店列表（行式，左侧粗边） ---------- */
.spot { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--blue); border-radius: var(--r); padding: 20px 24px; margin-top: 14px; }
.spot__dist { font-size: 13px; color: var(--blue); font-weight: 700; letter-spacing: .1em; }
.spot__name { font-size: 19px; font-weight: 700; }
.spot__addr { color: var(--ink2); font-size: 14.5px; margin-top: 2px; }
.spot__meta { text-align: right; font-size: 13.5px; color: var(--muted); }
.spot__meta b { display: block; color: var(--ink); font-size: 15px; }
.strip .spot { background: rgba(255, 255, 255, .04); border-color: #2A4A7E; border-left-color: #6FA8F5; }
.strip .spot__name { color: #fff; }
.strip .spot__addr, .strip .spot__meta { color: #B9CBE8; }
.strip .spot__dist { color: #9CC3FF; }
.strip .spot__meta b { color: #fff; }

/* ---------- 步骤（横向编号条） ---------- */
.lane { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 30px; counter-reset: lane; }
.lane__step { position: relative; padding: 20px 18px 4px 20px; border-left: 1px solid var(--line); counter-increment: lane; }
.lane__step::before { content: "0" counter(lane); font-size: 30px; font-weight: 800; color: var(--blue); opacity: .28; position: absolute; top: -6px; left: 14px; }
.lane__step h4 { font-size: 16.5px; margin: 16px 0 6px; position: relative; }
.lane__step p { font-size: 13.5px; color: var(--ink2); }
.strip .lane__step { border-left-color: #2A4A7E; }
.strip .lane__step::before { color: #9CC3FF; }
.strip .lane__step h4 { color: #fff; }
.strip .lane__step p { color: #B9CBE8; }

/* ---------- 表格（仓型） ---------- */
.tier { width: 100%; border-collapse: collapse; margin-top: 26px; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.tier th { background: var(--blue-deep); color: #fff; text-align: left; font-size: 14px; letter-spacing: .05em; padding: 12px 16px; font-weight: 600; }
.tier td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink2); vertical-align: top; }
.tier tr:last-child td { border-bottom: 0; }
.tier td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tier td b { color: var(--blue); }

/* ---------- 提示框（浅蓝晕） ---------- */
.hint { background: var(--wash); border-left: 4px solid var(--blue); border-radius: var(--r); padding: 14px 18px; margin-top: 20px; color: var(--ink2); font-size: 14.5px; }
.hint b { color: var(--ink); }

/* ---------- 问答手风琴（qar，深圳站独有类名） ---------- */
.qar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-top: 12px; overflow: hidden; }
.qar__q { width: 100%; text-align: left; background: none; border: 0; font: inherit; font-weight: 600; font-size: 16px; color: var(--ink); padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.qar__q::after { content: "+"; color: var(--blue); font-size: 22px; font-weight: 700; flex: none; }
.qar.open .qar__q::after { content: "−"; }
.qar__q:hover { background: var(--wash); }
.qar__a { display: none; padding: 0 20px 16px; color: var(--ink2); font-size: 15px; }
.qar.open .qar__a { display: block; }
.qar__a p { margin: 0; }

/* ---------- 指南（编号文章卡） ---------- */
.guides { counter-reset: gd; margin-top: 28px; }
.gd { counter-increment: gd; display: grid; grid-template-columns: 88px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.gd:first-child { border-top: 0; }
.gd::before { content: counter(gd, decimal-leading-zero); font-size: 44px; font-weight: 800; color: var(--blue); opacity: .22; line-height: 1; }
.gd h3 { font-size: 20px; margin-bottom: 6px; }
.gd h3 a { color: var(--ink); }
.gd h3 a:hover { color: var(--blue); text-decoration: none; }
.gd p { color: var(--ink2); font-size: 14.5px; }
.strip .gd { border-top-color: #2A4A7E; }
.strip .gd h3 a { color: #fff; }

/* ---------- CTA 条 ---------- */
.cta { background: var(--blue); color: #fff; padding: 46px 0; text-align: center; }
.cta h2 { font-size: 26px; margin-bottom: 8px; }
.cta p { color: #D9E8FF; margin-bottom: 22px; }
.cta .btn--main { background: #fff; color: var(--blue); }

/* ---------- 页脚（深藏蓝） ---------- */
footer.ft { background: var(--blue-deep); color: #B9CBE8; padding: 44px 0 26px; font-size: 14px; }
.ft__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.ft .footer-logo { display: inline-block; margin-bottom: 14px; }
.ft .footer-logo img { height: 34px; box-sizing: content-box; background: #fff; padding: 7px 11px; border-radius: 8px; display: block; }
.ft h5 { color: #fff; font-size: 15px; margin-bottom: 10px; letter-spacing: .06em; }
.ft a { color: #B9CBE8; }
.ft a:hover { color: #fff; }
.ft ul { list-style: none; }
.ft li { padding: 3px 0; }
.ft__base { border-top: 1px solid #2A4A7E; margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #8FA6C9; font-size: 13px; }
.ft__base a { color: #8FA6C9; }

/* ---------- 表单 ---------- */
.frm { display: grid; gap: 14px; margin-top: 24px; max-width: 560px; }
.frm label { font-size: 14px; font-weight: 600; color: var(--ink); }
.frm input, .frm select, .frm textarea { font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); width: 100%; }
.frm input:focus, .frm select:focus, .frm textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.frm small { color: var(--muted); font-weight: 400; }

/* ---------- 面包屑 ---------- */
.crumbs { font-size: 13px; color: var(--muted); padding: 16px 0 0; }
.crumbs a { color: var(--muted); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .hero__grid, .grid--3, .grid--4, .ft__grid { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 1fr; }
  .lane__step { border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
  .hero h1 { font-size: 30px; }
  h2.sec { font-size: 24px; }
  .spot { grid-template-columns: 1fr; gap: 6px; }
  .spot__meta { text-align: left; }
  .bar__links { margin-left: 0; }
}