/* ==========================================================================
   BCFF / 潮汐货场 TIDAL FREIGHT · 02 parts
   码头构件：泊位、集装箱、分拨单、潮汐表、振幅计
   ========================================================================== */

/* ---------- 通用栅格 ---------- */

.bc-grid {
  display: grid;
  gap: var(--bc-gap);
}

.bc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bc-stack-sm > * + * { margin-top: 12px; }
.bc-lead { font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.9; }

/* ---------- 首屏 ---------- */

.bc-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 82px) clamp(40px, 5vw, 70px);
  background: var(--bc-deep);
  color: var(--bc-paper);
}

.bc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(201, 233, 225, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 233, 225, .055) 1px, transparent 1px),
    radial-gradient(760px 460px at 88% 4%, rgba(18, 160, 141, .26), transparent 66%),
    radial-gradient(520px 380px at 0% 100%, rgba(255, 106, 42, .13), transparent 70%);
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%;
  pointer-events: none;
}

.bc-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(30px, 4.4vw, 64px);
  align-items: center;
}

.bc-hero__copy { min-width: 0; }

.bc-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.bc-hero__title {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(2.3rem, 4.8vw, 4.2rem);
  line-height: 1.18;
  letter-spacing: -.045em;
}

.bc-hero__title em {
  font-style: normal;
  color: var(--bc-mint);
  white-space: nowrap;
}

.bc-hero__title .bc-hl {
  position: relative;
  display: inline-block;
  color: var(--bc-orange);
}

.bc-hero__title .bc-hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: 6px;
  background: var(--bc-orange);
  opacity: .35;
}

.bc-hero__lead {
  max-width: 35em;
  font-size: clamp(.98rem, 1.3vw, 1.06rem);
  line-height: 1.92;
  color: rgba(242, 245, 243, .72);
}

.bc-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bc-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3.2vw, 44px);
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 233, 225, .18);
}

.bc-hero__facts li { min-width: 96px; }

.bc-hero__facts strong {
  display: block;
  font-family: var(--bc-mono);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bc-mint);
}

.bc-hero__facts span {
  font-family: var(--bc-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: rgba(242, 245, 243, .5);
}

/* 首屏右侧：泊位图 */

.bc-hero__art { position: relative; }

.bc-pier {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}

.bc-pier__ring,
.bc-pier__ring--2 {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 233, 225, .22);
}

.bc-pier__ring { inset: 8%; }
.bc-pier__ring--2 {
  inset: 26%;
  border-style: dashed;
  border-color: rgba(201, 233, 225, .16);
}

.bc-pier__axis {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), rgba(201, 233, 225, .16) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(201, 233, 225, .16) 50%, transparent calc(50% + .5px));
}

.bc-pier__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  height: 46%;
  opacity: .5;
}

.bc-pier__wave svg { width: 100%; height: 100%; }

.bc-stack {
  position: absolute;
  top: 4%;
  right: 0;
  width: 64%;
  display: grid;
  gap: 8px;
  transform: rotate(-2deg);
}

.bc-stack__box {
  position: relative;
  height: clamp(48px, 8.4vw, 70px);
  border: 1px solid rgba(201, 233, 225, .4);
  background: linear-gradient(180deg, #164c5d, #0a2b36);
  box-shadow: 0 12px 26px rgba(4, 18, 24, .34);
  overflow: hidden;
}

.bc-stack__box::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px);
  color: rgba(201, 233, 225, .3);
}

.bc-stack__box i {
  position: absolute;
  left: 22px;
  top: 9px;
  font-family: var(--bc-mono);
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .1em;
  color: rgba(201, 233, 225, .6);
}

.bc-stack__box b {
  position: absolute;
  left: 22px;
  right: 10px;
  bottom: 8px;
  font-family: var(--bc-mono);
  font-size: .76rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bc-mint);
}

.bc-stack__box--orange { border-color: rgba(255, 106, 42, .55); }
.bc-stack__box--orange b { color: var(--bc-orange); }

.bc-ticket {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  padding: 18px 18px 14px;
  background: var(--bc-card);
  color: var(--bc-ink);
  border: var(--bc-bd) solid var(--bc-ink);
  box-shadow: 8px 8px 0 var(--bc-teal);
  transform: rotate(1.5deg);
}

.bc-ticket__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--bc-teal-2);
  border-bottom: 1px dashed var(--bc-line-2);
  padding-bottom: 7px;
  margin-bottom: 9px;
}

.bc-ticket__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}

.bc-ticket ul {
  display: grid;
  gap: 3px;
  font-family: var(--bc-mono);
  font-size: .62rem;
  color: var(--bc-mid);
}

.bc-ticket ul li { display: flex; justify-content: space-between; gap: 8px; }
.bc-ticket ul li::after { content: ""; flex: 1; border-bottom: 1px dotted var(--bc-line-2); order: 1; }
.bc-ticket ul li span { order: 2; color: var(--bc-ink); }

.bc-ticket__code {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bc-line);
  font-family: var(--bc-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  color: var(--bc-soft);
}

.bc-seal {
  position: absolute;
  top: 5%;
  left: 4%;
  width: 74px;
  height: 74px;
  display: grid;
  place-content: center;
  gap: 1px;
  text-align: center;
  border: 2px solid var(--bc-orange);
  color: var(--bc-orange);
  font-family: var(--bc-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  line-height: 1.5;
  transform: rotate(-9deg);
  background: rgba(7, 30, 38, .55);
}

.bc-seal b { font-size: .92rem; letter-spacing: .04em; }

/* ---------- 泊位状态条 ---------- */

.bc-dockbar {
  position: relative;
  background: var(--bc-card);
  border-bottom: var(--bc-bd) solid var(--bc-ink);
}

.bc-dockbar__in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bc-dockbar__cell {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px clamp(10px, 2vw, 26px);
  border-left: 1px solid var(--bc-line);
}

.bc-dockbar__cell:last-child { border-right: 1px solid var(--bc-line); }

.bc-dockbar__k {
  font-family: var(--bc-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--bc-soft);
}

.bc-dockbar__cell strong {
  font-family: var(--bc-mono);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.bc-dockbar__cell em {
  margin-left: auto;
  font-family: var(--bc-mono);
  font-style: normal;
  font-size: .56rem;
  letter-spacing: .1em;
  color: var(--bc-teal-2);
}

.bc-dockbar__cell em.is-live { color: var(--bc-orange); }

/* ---------- 集装箱卡片 ---------- */

.bc-container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px 22px 22px 34px;
  background: var(--bc-card);
  border: var(--bc-bd) solid var(--bc-ink);
  transition: transform var(--bc-fast) var(--bc-ease), box-shadow var(--bc-fast) var(--bc-ease);
}

.bc-container::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: repeating-linear-gradient(90deg, var(--bc-ink) 0 2px, transparent 2px 6px);
  opacity: .8;
}

.bc-container::after {
  content: attr(data-code);
  position: absolute;
  right: 10px;
  top: 7px;
  font-family: var(--bc-mono);
  font-size: .52rem;
  letter-spacing: .12em;
  color: var(--bc-soft);
}

.bc-container:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--bc-mint);
}

.bc-container__no {
  font-family: var(--bc-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--bc-orange);
  margin-bottom: 10px;
}

.bc-container h3 { margin-bottom: 10px; }

.bc-container p {
  font-size: .9rem;
  line-height: 1.8;
  margin-bottom: 16px;
}

.bc-container__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bc-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bc-container__foot span {
  font-family: var(--bc-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--bc-soft);
}

.bc-container--deep {
  background: var(--bc-deep);
  border-color: var(--bc-deep);
  color: var(--bc-paper);
}

.bc-container--deep::before { background: repeating-linear-gradient(90deg, rgba(201, 233, 225, .5) 0 2px, transparent 2px 6px); }
.bc-container--deep::after { color: rgba(242, 245, 243, .4); }
.bc-container--deep h3 { color: var(--bc-paper); }
.bc-container--deep p { color: rgba(242, 245, 243, .66); }
.bc-container--deep .bc-container__foot { border-top-color: rgba(242, 245, 243, .18); }
.bc-container--deep .bc-container__foot span { color: rgba(201, 233, 225, .55); }

/* ---------- 场次表 ---------- */

.bc-berth {
  border-top: var(--bc-bd) solid var(--bc-ink);
}

.bc-berth__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1.1fr) minmax(0, 1fr) 132px;
  gap: clamp(12px, 2vw, 26px);
  align-items: center;
  padding: 20px 12px;
  border-bottom: 1px solid var(--bc-line);
  transition: background-color var(--bc-fast) var(--bc-ease);
}

.bc-berth__row:hover { background: var(--bc-card); }

.bc-berth__time {
  font-family: var(--bc-mono);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.bc-berth__time span {
  display: block;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--bc-soft);
  margin-top: 3px;
}

.bc-berth__name strong {
  display: block;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.bc-berth__name span {
  display: block;
  margin-top: 3px;
  font-family: var(--bc-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--bc-teal-2);
}

.bc-berth__desc {
  font-size: .85rem;
  line-height: 1.7;
}

.bc-berth__slot {
  display: flex;
  justify-content: flex-end;
}

.bc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--bc-line-2);
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--bc-mid);
}

.bc-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.bc-pill--live { border-color: var(--bc-orange); color: var(--bc-orange-2); background: var(--bc-orange-soft); }
.bc-pill--soon { border-color: var(--bc-teal); color: var(--bc-teal-2); background: var(--bc-mint-2); }
.bc-pill--done { color: var(--bc-soft); }
.bc-pill--deep { border-color: rgba(201, 233, 225, .35); color: var(--bc-mint); }

/* ---------- 筛选 ---------- */

.bc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.bc-filter button {
  padding: 7px 15px;
  border: 1px solid var(--bc-line-2);
  font-family: var(--bc-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--bc-mid);
  transition: background-color var(--bc-fast) var(--bc-ease), color var(--bc-fast) var(--bc-ease), border-color var(--bc-fast) var(--bc-ease);
}

.bc-filter button:hover { border-color: var(--bc-ink); color: var(--bc-ink); }

.bc-filter button.is-active {
  background: var(--bc-deep);
  border-color: var(--bc-deep);
  color: var(--bc-paper);
}

.bc-filter__count {
  margin-left: auto;
  align-self: center;
  font-family: var(--bc-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--bc-soft);
}

/* ---------- 分拨单 ---------- */

.bc-manifest {
  border: var(--bc-bd) solid var(--bc-ink);
  background: var(--bc-card);
}

.bc-manifest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bc-deep);
  color: var(--bc-mint);
  font-family: var(--bc-mono);
  font-size: .6rem;
  letter-spacing: .16em;
}

.bc-manifest__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 130px 108px;
  gap: 14px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bc-line);
  font-size: .88rem;
}

.bc-manifest__row:last-child { border-bottom: 0; }
.bc-manifest__row:nth-child(even) { background: rgba(228, 236, 232, .35); }

.bc-manifest__code {
  font-family: var(--bc-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  color: var(--bc-teal-2);
}

.bc-manifest__name strong { display: block; font-weight: 700; }
.bc-manifest__name span { font-size: .74rem; color: var(--bc-soft); }

.bc-manifest__cat {
  font-family: var(--bc-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--bc-mid);
}

.bc-manifest__st {
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-align: right;
  color: var(--bc-teal-2);
}

/* ---------- 流程 ---------- */

.bc-route {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  counter-reset: bcr;
}

.bc-route__item {
  position: relative;
  padding-top: 30px;
}

.bc-route__item::before {
  counter-increment: bcr;
  content: "0" counter(bcr);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--bc-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--bc-orange);
}

.bc-route__item::after {
  content: "";
  position: absolute;
  left: 32px;
  right: -14px;
  top: 7px;
  border-top: 1px dashed var(--bc-line-2);
}

.bc-route__item:last-child::after { display: none; }

.bc-route__dot {
  position: absolute;
  left: 22px;
  top: 0;
  width: 13px;
  height: 13px;
  border: 2px solid var(--bc-teal);
  background: var(--bc-paper);
  transform: rotate(45deg);
}

.bc-sec--deep .bc-route__dot { background: var(--bc-deep); }
.bc-sec--deep .bc-route__item::after { border-top-color: rgba(201, 233, 225, .3); }

.bc-route h3 { font-size: 1.02rem; margin-bottom: 8px; }
.bc-route p { font-size: .86rem; line-height: 1.75; }

.bc-route__meta {
  display: block;
  margin-top: 10px;
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--bc-teal-2);
}

.bc-sec--deep .bc-route__meta { color: var(--bc-mint); }

/* ---------- 振幅计 ---------- */

.bc-gauges { display: grid; gap: 18px; }

.bc-gauge__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.bc-gauge__top span {
  font-family: var(--bc-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--bc-mid);
}

.bc-gauge__top strong {
  font-family: var(--bc-mono);
  font-size: .96rem;
  letter-spacing: -.02em;
}

.bc-gauge__bar {
  position: relative;
  height: 9px;
  background: rgba(11, 28, 34, .08);
  overflow: hidden;
}

.bc-gauge__bar i {
  display: block;
  width: var(--v, 50%);
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--bc-teal) 0 7px, transparent 7px 10px);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s var(--bc-ease) .1s;
}

.bc-js .bc-gauge.is-in .bc-gauge__bar i { transform: scaleX(1); }

.bc-sec--deep .bc-gauge__top span { color: rgba(201, 233, 225, .6); }
.bc-sec--deep .bc-gauge__top strong { color: var(--bc-paper); }
.bc-sec--deep .bc-gauge__bar { background: rgba(242, 245, 243, .14); }

/* ---------- 主播卡 ---------- */

.bc-host {
  display: flex;
  flex-direction: column;
  background: var(--bc-card);
  border: 1px solid var(--bc-line-2);
  padding: 20px;
  transition: border-color var(--bc-fast) var(--bc-ease), transform var(--bc-fast) var(--bc-ease);
}

.bc-host:hover { border-color: var(--bc-ink); transform: translateY(-4px); }

.bc-host__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.bc-host__ava {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  background: var(--bc-deep);
  color: var(--bc-mint);
  font-family: var(--bc-mono);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.bc-host__ava--teal { background: var(--bc-teal); color: #fff; }
.bc-host__ava--orange { background: var(--bc-orange); color: #fff; }
.bc-host__ava--mint { background: var(--bc-mint); color: var(--bc-deep); }

.bc-host__name strong {
  display: block;
  font-size: 1.06rem;
  letter-spacing: -.01em;
}

.bc-host__name span {
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--bc-soft);
}

.bc-host p {
  font-size: .87rem;
  line-height: 1.78;
  margin-bottom: 14px;
}

.bc-host__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.bc-host__tags span {
  padding: 3px 9px;
  border: 1px solid var(--bc-line);
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--bc-mid);
}

.bc-host__stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bc-line-2);
  font-family: var(--bc-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--bc-soft);
}

.bc-host__stat b { color: var(--bc-teal-2); }

/* ---------- 案例卡 ---------- */

.bc-case {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--bc-card);
  border: var(--bc-bd) solid var(--bc-ink);
  transition: box-shadow var(--bc-fast) var(--bc-ease), transform var(--bc-fast) var(--bc-ease);
}

.bc-case:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--bc-teal); }

.bc-case__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bc-line);
}

.bc-case__brand strong { font-size: 1.1rem; letter-spacing: -.02em; }

.bc-case__brand span {
  font-family: var(--bc-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--bc-soft);
}

.bc-case blockquote {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--bc-ink);
  margin-bottom: 18px;
}

.bc-case blockquote::before {
  content: "“";
  display: block;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: .7;
  color: var(--bc-teal);
  margin-bottom: 8px;
}

.bc-case__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--bc-line-2);
}

.bc-case__stats strong {
  display: block;
  font-family: var(--bc-mono);
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--bc-teal-2);
}

.bc-case__stats span {
  font-family: var(--bc-mono);
  font-size: .54rem;
  letter-spacing: .06em;
  color: var(--bc-soft);
}

/* ---------- 合规提示 ---------- */

.bc-note {
  position: relative;
  padding: 22px 24px 22px 28px;
  background: var(--bc-orange-soft);
  border-left: 6px solid var(--bc-orange);
}

.bc-note h3 {
  font-size: .98rem;
  margin-bottom: 8px;
  color: var(--bc-orange-2);
}

.bc-note p {
  font-size: .88rem;
  line-height: 1.85;
  color: #7a3a20;
}

.bc-note--cool { background: var(--bc-mint-2); border-left-color: var(--bc-teal); }
.bc-note--cool h3 { color: var(--bc-teal-2); }
.bc-note--cool p { color: #2c534c; }

.bc-note--deep {
  background: rgba(201, 233, 225, .07);
  border-left-color: var(--bc-teal);
}
.bc-note--deep h3 { color: var(--bc-mint); }
.bc-note--deep p { color: rgba(242, 245, 243, .68); }

/* ---------- FAQ ---------- */

.bc-faq { border-top: var(--bc-bd) solid var(--bc-ink); }

.bc-faq details {
  border-bottom: 1px solid var(--bc-line);
}

.bc-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 44px 18px 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}

.bc-faq summary::-webkit-details-marker { display: none; }

.bc-faq summary::before {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--bc-mono);
  font-size: 1.32rem;
  font-weight: 400;
  color: var(--bc-teal-2);
}

.bc-faq details[open] summary::before { content: "–"; color: var(--bc-orange); }

.bc-faq__body {
  padding: 0 44px 20px 0;
  font-size: .92rem;
  line-height: 1.88;
}

.bc-faq__body p { font-size: inherit; }

/* ---------- 清单 ---------- */

.bc-list {
  display: grid;
  gap: 9px;
}

.bc-list li {
  position: relative;
  padding-left: 24px;
  font-size: .89rem;
  line-height: 1.8;
}

.bc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 11px;
  height: 11px;
  border: 2px solid var(--bc-teal);
  transform: rotate(45deg);
}

.bc-sec--deep .bc-list li { color: rgba(242, 245, 243, .72); }
.bc-sec--deep .bc-list li::before { border-color: var(--bc-orange); }

/* ---------- 品类格 ---------- */

.bc-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 156px;
  padding: 18px;
  background: var(--bc-card);
  border: 1px solid var(--bc-line-2);
  overflow: hidden;
  transition: background-color var(--bc-fast) var(--bc-ease), border-color var(--bc-fast) var(--bc-ease);
}

.bc-cat::after {
  content: attr(data-code);
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-family: var(--bc-mono);
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--bc-soft);
}

.bc-cat:hover { background: var(--bc-deep); border-color: var(--bc-deep); }
.bc-cat:hover strong { color: var(--bc-paper); }
.bc-cat:hover span { color: rgba(201, 233, 225, .7); }
.bc-cat:hover::after { color: rgba(201, 233, 225, .5); }

.bc-cat strong {
  display: block;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.bc-cat span {
  display: block;
  font-family: var(--bc-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--bc-soft);
}

.bc-cat b {
  font-family: var(--bc-mono);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--bc-teal);
  line-height: 1;
}

.bc-cat:hover b { color: var(--bc-orange); }

/* ---------- 大 CTA ---------- */

.bc-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  background: var(--bc-deep);
  color: var(--bc-paper);
  overflow: hidden;
}

.bc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(420px 260px at 92% 10%, rgba(18, 160, 141, .3), transparent 70%),
    linear-gradient(to right, rgba(201, 233, 225, .05) 1px, transparent 1px);
  background-size: 100% 100%, 56px 100%;
  pointer-events: none;
}

.bc-cta > * { position: relative; }
.bc-cta h2 { color: #fff; margin-bottom: 12px; }
.bc-cta p { color: rgba(242, 245, 243, .68); font-size: .95rem; max-width: 40em; }

.bc-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ---------- 小件 ---------- */

.bc-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }

.bc-stamp {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid currentColor;
  font-family: var(--bc-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  color: var(--bc-teal-2);
}

.bc-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--bc-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--bc-soft);
}

.bc-meta-row span { display: inline-flex; align-items: center; gap: 7px; }
.bc-meta-row span::before { content: ""; width: 5px; height: 5px; background: var(--bc-teal); }

.bc-hr {
  border: 0;
  border-top: 1px solid var(--bc-line);
  margin-block: clamp(20px, 3vw, 34px);
}

.bc-quote {
  margin-block: 28px;
  padding: 22px 26px;
  background: var(--bc-mint-2);
  border-left: 6px solid var(--bc-teal);
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--bc-ink);
}

.bc-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--bc-mono);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--bc-teal-2);
}

/* ---------- 响应式 ---------- */

@media (max-width: 1100px) {
  .bc-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .bc-hero__art { max-width: 520px; margin-inline: auto; width: 100%; }
  .bc-pier { max-width: 460px; }
}

@media (max-width: 980px) {
  .bc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-berth__row { grid-template-columns: 104px minmax(0, 1fr) 120px; }
  .bc-berth__desc { display: none; }
  .bc-route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .bc-route__item:nth-child(2)::after { display: none; }
  .bc-cta { grid-template-columns: 1fr; }
  .bc-cta__acts { justify-content: flex-start; }
}

@media (max-width: 780px) {
  .bc-grid--2,
  .bc-grid--3 { grid-template-columns: 1fr; }
  .bc-dockbar__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-dockbar__cell:nth-child(1) { border-bottom: 1px solid var(--bc-line); }
  .bc-dockbar__cell:nth-child(2) { border-bottom: 1px solid var(--bc-line); border-right: 1px solid var(--bc-line); }
  .bc-manifest__row { grid-template-columns: 76px minmax(0, 1fr) 96px; }
  .bc-manifest__cat { display: none; }
  .bc-case__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bc-hero__facts { gap: 18px 26px; }
}

@media (max-width: 620px) {
  .bc-hero { padding-block: 34px 40px; }
  .bc-hero__title { font-size: clamp(2.1rem, 9.4vw, 2.9rem); }
  .bc-hero__facts li { min-width: 78px; }
  .bc-pier { max-width: 360px; }
  .bc-stack { top: 0; gap: 6px; }
  .bc-stack__box { height: 44px; }
  .bc-stack__box i { font-size: .48rem; top: 6px; }
  .bc-stack__box b { font-size: .66rem; bottom: 6px; }
  .bc-seal { width: 60px; height: 60px; font-size: .44rem; }
  .bc-seal b { font-size: .76rem; }
  .bc-ticket { width: 70%; padding: 13px 14px 11px; }
  .bc-ticket__title { font-size: .9rem; }
  .bc-berth__row { grid-template-columns: 82px minmax(0, 1fr); gap: 8px 12px; padding: 16px 4px; }
  .bc-berth__slot { grid-column: 2; justify-content: flex-start; }
  .bc-berth__time { font-size: 1.06rem; }
  .bc-route { grid-template-columns: 1fr; }
  .bc-route__item::after { display: none; }
  .bc-manifest__row { grid-template-columns: 64px minmax(0, 1fr); }
  .bc-manifest__st { grid-column: 2; text-align: left; }
  .bc-filter__count { width: 100%; margin-left: 0; }
}