/* ════════════════════════════════════════
   zhuti. 公共样式（组件级）
   变量 / 重置 / 按钮 / 页头 / 页脚 / 悬浮 CTA
   页面专属样式见 style.css
   ════════════════════════════════════════ */

:root {
  --blue:        #2563eb;
  --blue-dark:   #1d4ed8;
  --blue-light:  #eff6ff;
  --blue-bg:     #dbeafe;
  --navy:        #1e293b;
  --navy-deep:   #0f172a;
  --text:        #1a1a2e;
  --text-2:      #334155;
  --text-muted:  #64748b;
  --border:      #e6eaf0;
  --bg:          #f7f9fc;
  --white:       #ffffff;
  --gold:        #f59e0b;
  --green:       #059669;
  --radius:      12px;
  --radius-lg:   16px;
  --shadow:      0 1px 3px rgba(15,23,42,.06), 0 6px 20px rgba(37,99,235,.07);
  --shadow-lg:   0 12px 36px rgba(37,99,235,.16);
  --font:        -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --transition:  .2s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); color:var(--text); background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── 按钮 ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:12px 26px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer; border:none; transition:background var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); box-shadow:0 6px 18px rgba(37,99,235,.35); }
.btn-outline { background:transparent; color:var(--blue); border:2px solid var(--blue); }
.btn-outline:hover { background:var(--blue-light); }
.btn-ghost { background:rgba(255,255,255,.16); color:#fff; border:2px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background:rgba(255,255,255,.26); }
.btn-light { background:#fff; color:var(--blue); }
.btn-light:hover { box-shadow:0 6px 18px rgba(0,0,0,.18); }
.btn-sm { padding:8px 18px; font-size:13px; }

/* ── 顶部促销条 ── */
.top-strip { background:var(--navy); color:#cbd5e1; font-size:13px; padding:9px 0; text-align:center; }
.top-strip strong { color:#fff; }
.top-strip .dot { margin:0 10px; opacity:.5; }
.top-strip a { color:#93c5fd; font-weight:600; margin-left:10px; }
.top-strip a:hover { text-decoration:underline; }

/* ── 吸顶导航 ── */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border); transition:box-shadow var(--transition); }
.site-header.scrolled { box-shadow:0 8px 24px rgba(15,23,42,.07); }
.header-inner { display:flex; align-items:center; height:68px; gap:20px; }
.site-logo { display:inline-flex; align-items:center; font-size:22px; font-weight:900; color:var(--text); letter-spacing:-.5px; }
.site-logo span { color:var(--blue); }
.site-logo em { font-style:normal; font-size:11px; font-weight:700; color:var(--blue); background:var(--blue-light); border:1px solid var(--blue-bg); padding:2px 8px; border-radius:6px; margin-left:9px; letter-spacing:1px; }
.main-nav { display:flex; gap:2px; flex:1; justify-content:center; }
.main-nav a { position:relative; padding:9px 14px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--text-2); transition:color var(--transition), background var(--transition); }
.main-nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transform-origin:center; transition:transform var(--transition); }
.main-nav a:hover, .main-nav a.active { color:var(--blue); }
.main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); }
.main-nav a.free { color:var(--green); }
.main-nav a.free::after { background:var(--green); }
.header-actions { display:flex; align-items:center; gap:10px; flex:none; }
.header-divider { width:1px; height:22px; background:var(--border); margin:0 2px; }
.icon-btn { position:relative; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--text-2); transition:background var(--transition), color var(--transition); }
.icon-btn:hover { background:var(--blue-light); color:var(--blue); }
.icon-btn svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; }
.icon-btn .badge { position:absolute; top:-3px; right:-3px; background:var(--blue); color:#fff; font-size:11px; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px; }
.bar-login { display:inline-flex; align-items:center; justify-content:center; padding:8px 18px; border-radius:9px; border:1.5px solid var(--border); background:#fff; color:var(--text-2); font-size:13px; font-weight:600; transition:border-color var(--transition), color var(--transition); }
.bar-login:hover { border-color:var(--blue); color:var(--blue); }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; margin-left:auto; }
.menu-toggle svg { width:24px; height:24px; stroke:var(--text); stroke-width:2; fill:none; }

/* ── 页脚 ── */
.site-footer { background:var(--navy-deep); color:#cbd5e1; }
.footer-top { display:grid; grid-template-columns:1.4fr 2fr; gap:40px; padding:56px 24px 40px; }
.footer-logo { font-size:22px; font-weight:900; color:#fff; }
.footer-logo span { color:#93c5fd; }
.footer-brand p { font-size:14px; color:#94a3b8; margin:12px 0 16px; max-width:300px; }
.footer-social { display:flex; gap:10px; }
.footer-social a { font-size:13px; color:#cbd5e1; border:1px solid #334155; padding:6px 12px; border-radius:8px; transition:border-color var(--transition), color var(--transition); }
.footer-social a:hover { border-color:#93c5fd; color:#fff; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-col-title { color:#fff; font-weight:700; font-size:14px; margin-bottom:14px; }
.footer-cols a { display:block; font-size:14px; color:#94a3b8; padding:5px 0; transition:color var(--transition); }
.footer-cols a:hover { color:#93c5fd; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 24px; border-top:1px solid #1e293b; font-size:13px; color:#64748b; flex-wrap:wrap; }
.footer-mini { color:#475569; }

/* ── 悬浮 CTA ── */
.float-cta { position:fixed; right:20px; bottom:22px; z-index:90; }
.float-cta-inner { display:flex; gap:8px; background:rgba(255,255,255,.95); border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:var(--shadow-lg); }
.float-cta-item { display:flex; flex-direction:column; align-items:center; justify-content:center; width:58px; height:54px; border-radius:10px; font-size:14px; font-weight:700; color:var(--text-2); transition:background var(--transition), color var(--transition); }
.float-cta-item small { font-size:11px; font-weight:500; color:var(--text-muted); margin-top:2px; }
.float-cta-item:hover { background:var(--blue-light); }
.float-cta-item.primary { background:var(--blue); color:#fff; }
.float-cta-item.primary small { color:#dbeafe; }
.float-cta-item.primary:hover { background:var(--blue-dark); }

/* ── 页头/页脚 响应式 ── */
@media (max-width:1080px) {
  .main-nav a { padding:9px 9px; font-size:13.5px; }
  .main-nav a::after { left:9px; right:9px; }
}
@media (max-width:940px) {
  .main-nav, .header-actions .bar-login, .header-divider { display:none; }
  .menu-toggle { display:block; }
  .main-nav.open { display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:flex-start; background:#fff; border-bottom:1px solid var(--border); padding:10px 24px; gap:4px; box-shadow:var(--shadow); }
  .main-nav.open a::after { display:none; }
}
@media (max-width:820px) {
  .footer-top { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .footer-cols { grid-template-columns:1fr 1fr; }
}