/* ============================================================
   链创标服 · 设计升级层（蓝版 v20260908-2 · 简洁大方版）
   原则：纯叠加式覆盖，不改动既有样式文件与任何功能逻辑。
   风格基调：克制、平整、留白。细线代替阴影，色彩代替位移。
   保留：键盘可达性、移动端导航菜单。
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  --du-radius-s: 3px;
  --du-radius-m: 5px;
  --du-radius-l: 8px;
  --du-shadow-1: 0 1px 2px rgba(11, 38, 52, .04);
  --du-shadow-2: 0 2px 8px rgba(11, 38, 52, .07);
  --du-ease: cubic-bezier(.25, .6, .35, 1);
  --du-focus: 0 0 0 2px rgba(214, 162, 62, .55);
  --du-header-h: 96px;
}

/* ---------- 2. 全局基调 ---------- */
::selection { background: #d6a23e; color: #14242c; }

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

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 键盘可达性：统一焦点环（仅键盘触发，不影响鼠标用户） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--du-focus);
  border-radius: var(--du-radius-s);
}

/* 过渡只保留颜色与边线，不做位移/缩放动画 */
a, button, input, select { transition: color .15s var(--du-ease), background-color .15s var(--du-ease), border-color .15s var(--du-ease), box-shadow .15s var(--du-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. 页头导航 ---------- */
/* 页头只用一条细分割线，去掉投影 */
.site-header { box-shadow: none; border-bottom: 1px solid rgba(255,255,255,.10); }

/* 导航：静态细下划线标记当前页，hover 只做颜色变化，无动画展开 */
.nav nav a { padding: 6px 2px; position: relative; }
.nav nav a:not(.nav-cta):hover { color: #fff; }
.nav nav a[aria-current="page"] { color: #fff; }
.nav nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
}

/* 会员按钮：方正、去投影，hover 加深底色即可 */
.nav nav a.nav-cta { border-radius: var(--du-radius-s); box-shadow: none; padding: 8px 22px; }
.nav nav a.nav-cta:hover { filter: brightness(1.08); }
.nav nav a.nav-cta:active { filter: brightness(.96); }

/* ---------- 4. 按钮体系 ---------- */
.btn { border-radius: var(--du-radius-s); }
.btn.gold, .primary, .plan button { box-shadow: none; }
.btn.gold:hover, .primary:hover, .plan button:hover,
.secondary:hover, .winning-enter:hover, .card-actions a:hover, .roadmap-grid a:hover {
  filter: brightness(1.06);
  box-shadow: var(--du-shadow-1);
}
.btn.gold:active, .primary:active, .secondary:active { filter: brightness(.96); box-shadow: none; }
.btn.outline { border-radius: var(--du-radius-s); }
.btn.outline:hover { border-color: #fff; background: rgba(255,255,255,.05); }
.secondary, .winning-enter, .card-actions a, .roadmap-grid a { border-radius: var(--du-radius-s); }

/* 免费板块主 CTA（hero）：品牌金底、深色字，视觉主按钮。
   刻意不用 .gold，避免被 public-phase.js / national.js 的 .btn.gold 改写逻辑覆盖 */
.btn.du-primary {
  background: var(--gold);
  color: #18272d;
}
.btn.du-primary:hover { filter: brightness(1.06); box-shadow: var(--du-shadow-1); }
.btn.du-primary:active { filter: brightness(.96); box-shadow: none; }

/* ---------- 5. 卡片与面板：细边线为主，投影退到最淡 ---------- */
.framework article,
.service-grid article,
.roadmap-grid article,
.hainan-tool-grid a,
.province-card,
.stats article,
.plan,
.panel,
.auth-card,
.auth-copy,
.member-bar,
.winning-card,
.filters {
  border-radius: var(--du-radius-m);
  box-shadow: var(--du-shadow-1);
}

/* 悬停只提亮边线，不上浮 */
.framework article:hover,
.roadmap-grid article:hover,
.stats article:hover,
.province-card:hover {
  transform: none;
  box-shadow: var(--du-shadow-2);
  border-color: rgba(13, 82, 104, .35);
}

.hainan-toolbox { border-radius: var(--du-radius-m); }
.coming-soon, .boundary, .intro { border-radius: var(--du-radius-m); }
.winning-card { border-left-width: 4px; }
.winning-enter { box-shadow: none; }

/* ---------- 6. 表单控件 ---------- */
input, select, .search input { border-radius: var(--du-radius-s); }
input:focus, select:focus, .search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(13, 82, 104, .12);
  outline: none;
}
.tabs button { position: relative; }
.tabs button.active { transition: border-bottom-color .15s var(--du-ease); }

/* ---------- 7. 页脚：细金线，低调 ---------- */
footer { border-top: 2px solid var(--gold); }
footer a { text-decoration: none; }
footer a:hover { color: #f2c15d; }

/* ---------- 8. 移动端导航菜单（配合 design-upgrade.js） ---------- */
.du-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex: none;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--du-radius-s);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.du-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #d5e1e4;
  transition: transform .2s var(--du-ease), opacity .15s var(--du-ease);
}
.du-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.du-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.du-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.du-nav-toggle:hover { border-color: var(--gold); }
.du-nav-toggle:hover span { background: #fff; }

.du-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0b2634;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 8px 18px 12px;
  display: none;
}
.du-nav-panel a {
  display: block;
  padding: 13px 4px;
  color: #d5e1e4;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.du-nav-panel a:last-child { border-bottom: 0; }
.du-nav-panel a:hover, .du-nav-panel a[aria-current="page"] { color: #fff; }
.du-nav-panel a.nav-cta {
  margin-top: 10px;
  text-align: center;
  border-bottom: 0;
  border-radius: var(--du-radius-s);
  font-weight: 800;
}

.site-header.du-nav-open .du-nav-panel,
.top.du-nav-open .du-nav-panel { display: block; animation: du-slide .18s var(--du-ease); }

@keyframes du-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .du-nav-toggle { display: flex; }
}

/* ---------- 9. 细节：去掉装饰性纹理，保持素净 ---------- */
.hero { position: relative; }
.hero::before { display: none; }
.hero > .shell, .hero-grid { position: relative; }
.hainan-hero::before { display: none; }

.boundary { border-left-width: 4px; }
.boundary b { color: var(--navy); }

/* 滚动条：更细更淡 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b9c6c4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9fb0ad; }