:root {
  --ink: #07282b;
  --text: #2f4749;
  --mute: #6d8385;
  --line: #d8e7e6;
  --paper: #f3f9f8;
  --white: #ffffff;
  --pri: #0e6f6a;
  --pri-deep: #0a5652;
  --accent: #f0b429;
  --soft: #e0f2f0;
  --soft-2: #fff2d4;
}

/* 搜索信标：深色英雄带 + 顶部分段引擎 + 窗口 + 底部通栏搜索框 */
.hv-beacon .hero { padding: 48px 0 108px; background: linear-gradient(152deg, #07282b, #0f4a49 62%, #14605b); }
.hv-beacon .hero::before { right: -10%; top: -18%; width: 66%; height: 130%;
  background: radial-gradient(circle at 46% 40%, rgba(240,180,41,.20), rgba(14,111,106,.18) 52%, transparent 72%); }
.hv-beacon .hero h1 { color: #fff; }
.hv-beacon .hero-sub { color: #e8fbf7; }
.hv-beacon .hero-desc { color: rgba(232,251,247,.74); }
.hv-beacon .eyebrow { background: rgba(255,255,255,.10); color: #cdeee9; }
.hv-beacon .hero-points { border-top-color: rgba(255,255,255,.18); }
.hv-beacon .hero-points li { color: #ffffff; }
.hv-beacon .hero-points small { color: rgba(232,251,247,.64); }
.hv-beacon .btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); color: #fff; }
.hv-beacon .hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: 40px; }
.hv-beacon .hero-grid::after {
  content: "输入关键词，直接搜全网"; position: absolute; left: 0; right: 0; bottom: -74px;
  display: flex; align-items: center; height: 58px; padding-left: 58px;
  border-radius: 15px; background: #ffffff; border: 1px solid rgba(255,255,255,.7);
  color: #8b9b9b; font-size: 15px; font-weight: 600;
  box-shadow: 0 20px 44px rgba(3,20,21,.28);
}
.hv-beacon .hero-visual { min-height: 470px; }
.hv-beacon .hero-visual::before {
  content: "无痕模式 · 不写本地记录"; position: absolute; left: 0; bottom: 3%;
  padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); color: #d9f5f1;
  font-size: 11px; font-weight: 700;
}
.hv-beacon .hero-visual::after {
  content: "实时热搜 · 点开即搜"; position: absolute; left: 0; top: 21%;
  padding: 7px 13px; border-radius: 999px; background: var(--accent); color: #3a2a00;
  font-size: 11px; font-weight: 800; rotate: -4deg;
  box-shadow: 0 12px 26px rgba(240,180,41,.30);
}
.hv-beacon .hero-glow { width: 74%; opacity: .55; background: radial-gradient(circle at 50% 45%, rgba(240,180,41,.24), rgba(20,96,91,.20) 58%, transparent 74%); }
.hv-beacon .stage-phone {
  width: min(208px, 50%); justify-self: end; align-self: start; margin: 62px 6% 0 0;
  padding: 7px; border-radius: 26px; background: #06191a;
  border-color: rgba(255,255,255,.16); rotate: 0deg; animation: none;
  box-shadow: 0 24px 50px rgba(0,0,0,.42);
}
.hv-beacon .stage-phone img { border-radius: 20px; }
.hv-beacon .hero-badge {
  left: 0; right: auto; top: 44%; bottom: auto; width: 84px; height: 84px;
  border-radius: 22px; background: var(--accent); rotate: -3deg;
  box-shadow: 0 14px 30px rgba(240,180,41,.30);
}
.hv-beacon .hero-badge strong { color: #3a2a00; font-size: 25px; }
.hv-beacon .hero-badge span { color: #5c4400; font-size: 10px; }
.hv-beacon .hero-strip {
  left: 0; right: 0; top: 0; bottom: auto; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); box-shadow: none;
}
.hv-beacon .hero-strip span { background: rgba(255,255,255,.10); color: #d9f5f1; }
.hv-beacon .hero-strip span:first-child { background: var(--accent); color: #3a2a00; }
.sv-big .showcase { background: #eef7f6; }

@media (max-width: 640px) {
  .hv-beacon .hero { padding-bottom: 44px; }
  .hv-beacon .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-beacon .hero-grid::after { position: static; margin-top: 4px; height: 50px; padding-left: 48px; font-size: 13px; }
  .hv-beacon .hero-visual { min-height: 440px; padding-top: 46px; }
  .hv-beacon .hero-visual::before { left: 10px; bottom: 2%; font-size: 10px; padding: 6px 10px; }
  .hv-beacon .hero-visual::after { display: none; }
  .hv-beacon .stage-phone { width: min(152px, 46%); justify-self: center; margin: 44px 0 0; }
  .hv-beacon .hero-badge { display: grid; right: 10px; left: auto; top: auto; bottom: 4%; width: 66px; height: 66px; border-radius: 17px; }
  .hv-beacon .hero-badge strong { font-size: 20px; }
  .hv-beacon .hero-strip { left: 10px; right: 10px; top: 0; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
  .hv-beacon .hero-strip span { padding: 3px 7px; font-size: 10px; }
}