/* ============================================================
   站23 www.tiedandj.cn · 铁蛋电竞 公共设计系统（indigo 靛蓝主题 · 白色悬浮导航）
   仅公共框架与通用组件；各页面专属样式见 css/<page>.css
   ============================================================ */

/* ===== 设计变量 ===== */
:root {
  /* indigo 色阶（靛蓝宝蓝）*/
  --ib-50:#eef2ff; --ib-100:#e0e7ff; --ib-200:#c7d2fe; --ib-300:#a5b4fc;
  --ib-400:#818cf8; --ib-500:#6366f1; --ib-600:#4f46e5; --ib-700:#4338ca;
  --ib-800:#3730a3; --ib-900:#312e81;
  /* slate 中性（冷调，区别站6暖 stone）*/
  --sl-50:#f8fafc; --sl-100:#f1f5f9; --sl-200:#e2e8f0; --sl-300:#cbd5e1;
  --sl-400:#94a3b8; --sl-500:#64748b; --sl-600:#475569; --sl-700:#334155;
  --sl-800:#1e293b; --sl-900:#0f172a;
  /* 语义别名 */
  --ibprimary:var(--ib-600); --ibdark:var(--ib-800); --ibsoft:var(--ib-50);
  /* 圆角（比站6略大，更圆润）/ 靛蓝调阴影 / 间距 */
  --ibr-sm:10px; --ibr:14px; --ibr-lg:24px; --ibr-pill:999px;
  --ibsh-sm:0 1px 3px rgba(15,23,42,.07);
  --ibsh:0 14px 34px rgba(79,70,229,.15);
  --ibsh-lg:0 26px 60px rgba(67,56,202,.22);
  --ibline:1px solid var(--sl-200);
  --ibwrap:1200px;
}

/* ===== Reset ===== */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--sl-800); background:var(--sl-50); line-height:1.75;
}
h1,h2,h3,h4,h5,h6 { margin:0; line-height:1.32; font-weight:700; color:var(--sl-900); }
p { margin:0; }
a { color:var(--ib-700); text-decoration:none; transition:color .16s ease; }
a:hover { color:var(--ib-500); }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; }

.wrap { max-width:var(--ibwrap); margin:0 auto; padding:0 20px; }
.ibsection { padding:66px 0; }
.ibhead { text-align:center; max-width:720px; margin:0 auto 44px; }
.ibhead h2 { font-size:29px; }
.ibhead .ibsub { color:var(--sl-500); font-size:14.5px; margin-top:10px; }
.ibkeyebrow {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color:var(--ib-700); background:var(--ib-50); border:1px solid var(--ib-200);
  padding:5px 14px; border-radius:var(--ibr-pill); margin-bottom:14px;
}

/* ===== 按钮（ib 前缀，圆角更大）===== */
.ibbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 26px; border-radius:var(--ibr-sm); font-size:14px; font-weight:700;
  border:1px solid transparent; transition:all .16s ease; white-space:nowrap;
}
.ibbtn-primary { background:linear-gradient(120deg,var(--ib-500),var(--ib-700)); color:#fff; box-shadow:0 8px 18px rgba(79,70,229,.32); }
.ibbtn-primary:hover { background:linear-gradient(120deg,var(--ib-600),var(--ib-800)); color:#fff; transform:translateY(-2px); }
.ibbtn-ghost { background:#fff; color:var(--ib-700); border-color:var(--ib-200); }
.ibbtn-ghost:hover { border-color:var(--ib-400); color:var(--ib-600); }
.ibbtn-line { background:transparent; color:var(--ib-700); border-color:var(--ib-300); }
.ibbtn-white { background:#fff; color:var(--ib-700); }
.ibbtn-lg { padding:15px 36px; font-size:15.5px; }

/* ===== 顶部细条（靛蓝渐变）===== */
.ibbar { background:linear-gradient(90deg,var(--ib-900),var(--ib-600)); color:var(--ib-100); font-size:12.5px; }
.ibbar .wrap { display:flex; align-items:center; justify-content:space-between; height:36px; }
.ibbar a { color:var(--ib-100); }
.ibbar a:hover { color:#fff; }
.ibbar .ibbar-links { display:flex; gap:20px; }

/* ===== Header / 白色悬浮导航（核心视觉差异）===== */
.ibheader {
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:9998; box-shadow:0 2px 18px rgba(15,23,42,.07);
  border-bottom:1px solid var(--sl-200);
}
.ibheader-inner { display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:16px; }
.ibbrand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ibbrand img { width:42px; height:42px; }
.ibbrand-name { font-size:20px; font-weight:800; color:var(--sl-900); letter-spacing:.5px; }
.ibbrand-name i { color:var(--ib-600); font-style:normal; }

.ibnav { display:flex; align-items:center; gap:2px; }
.ibnav-link {
  color:var(--sl-700); padding:9px 11px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; white-space:nowrap; border-radius:var(--ibr-sm);
}
.ibnav-link:hover, .ibnav-link.active { color:var(--ib-700); background:var(--ib-50); }
.ibcaret { font-size:9px; margin-left:3px; }
.ibdrop { position:relative; }
.ibdrop-menu {
  position:absolute; top:calc(100% + 8px); left:0; min-width:210px;
  background:#fff; border:var(--ibline); border-radius:var(--ibr);
  box-shadow:var(--ibsh); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .16s ease; z-index:99999;
}
.ibdrop:hover .ibdrop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.ibdrop-menu a {
  display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13.5px;
  color:var(--sl-700); border-radius:var(--ibr-sm);
}
.ibdrop-menu a:hover { background:var(--ib-50); color:var(--ib-700); }
.ibdrop-ico { font-size:19px; flex-shrink:0; width:24px; text-align:center; }
.ibdrop-txt { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.ibdrop-name { font-weight:700; font-size:13.5px; color:var(--sl-800); }
.ibdrop-price { font-size:11.5px; color:var(--sl-500); }
.ibdrop-menu a:hover .ibdrop-name { color:var(--ib-700); }
.ibdrop-wide { min-width:264px; }
.ibnav-cta .ibbtn { padding:10px 22px; }

/* 移动端汉堡控制 */
.ibnav-toggle { display:none; background:none; border:none; font-size:26px; color:var(--ib-700); }
#ibnavSwitch { display:none; }

/* ===== 面包屑 ===== */
.ibpath { padding:15px 0; font-size:13px; color:var(--sl-500); }
.ibpath .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.ibpath a { color:var(--sl-500); }
.ibpath a:hover { color:var(--ib-700); }
.ibpath .ibsep { color:var(--sl-300); }

/* ===== 通用组件 ===== */
.ibgrid { display:grid; gap:22px; }
.ib2 { grid-template-columns:repeat(2,1fr); }
.ib3 { grid-template-columns:repeat(3,1fr); }
.ib4 { grid-template-columns:repeat(4,1fr); }
.ibcard {
  background:#fff; border:var(--ibline); border-radius:var(--ibr);
  padding:26px; transition:transform .18s, box-shadow .18s;
}
.ibcard:hover { transform:translateY(-5px); box-shadow:var(--ibsh); }
.ibcard .ibico { font-size:30px; margin-bottom:14px; }
.ibcard h3 { font-size:17px; margin-bottom:9px; }
.ibcard p { color:var(--sl-500); font-size:13.5px; }

.ibtag {
  display:inline-block; font-size:12px; font-weight:700; color:var(--ib-700);
  background:var(--ib-50); border:1px solid var(--ib-200);
  padding:4px 12px; border-radius:var(--ibr-pill);
}

/* 数据条 */
.ibstats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ibstat { text-align:center; background:#fff; border:var(--ibline); border-radius:var(--ibr); padding:26px 14px; }
.ibstat b { display:block; font-size:30px; color:var(--ib-700); line-height:1.1; }
.ibstat span { font-size:12.5px; color:var(--sl-500); margin-top:6px; display:block; }

/* 表格 */
.ibdata-wrap { overflow-x:auto; background:#fff; border:var(--ibline); border-radius:var(--ibr); }
table.ibdata { width:100%; border-collapse:collapse; min-width:540px; }
.ibdata th, .ibdata td { padding:14px 18px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--sl-200); }
.ibdata thead th { background:var(--ib-50); color:var(--ib-800); font-weight:700; }
.ibdata tbody tr:last-child td { border-bottom:none; }
.ibdata tbody tr:hover { background:var(--sl-50); }

/* FAQ 手风琴 */
.ibfaq details {
  background:#fff; border:var(--ibline); border-radius:var(--ibr);
  padding:0 22px; margin-bottom:12px;
}
.ibfaq summary {
  list-style:none; cursor:pointer; padding:17px 0; font-weight:700; font-size:14.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.ibfaq summary::-webkit-details-marker { display:none; }
.ibfaq summary::after { content:"+"; font-size:21px; color:var(--ib-600); font-weight:400; }
.ibfaq details[open] summary::after { content:"−"; }
.ibfaq details p { color:var(--sl-500); font-size:13.5px; padding:0 0 17px; }

/* CTA 横幅 */
.ibcta {
  background:linear-gradient(120deg,var(--ib-700),var(--ib-900));
  border-radius:var(--ibr-lg); color:#fff; padding:52px 40px; text-align:center;
}
.ibcta h2 { color:#fff; font-size:26px; }
.ibcta p { color:var(--ib-100); margin:12px 0 26px; font-size:14.5px; }
.ibcta .ibbtns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* 步骤流程 */
.ibflow { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:ibstep; }
.ibflow-step { position:relative; background:#fff; border:var(--ibline); border-radius:var(--ibr); padding:28px 22px 24px; }
.ibflow-step::before {
  counter-increment:ibstep; content:counter(ibstep);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,var(--ib-500),var(--ib-700)); color:#fff; font-weight:800;
  border-radius:var(--ibr-pill); margin-bottom:14px;
}
.ibflow-step h3 { font-size:16px; margin-bottom:8px; }
.ibflow-step p { color:var(--sl-500); font-size:13px; }

/* ===== 页脚（深色，非标题元素）===== */
.ibfooter { background:var(--sl-900); color:var(--sl-300); margin-top:20px; }
.ibfooter-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding:56px 0 40px; }
.ibfooter-col .ibf-title { color:#fff; font-size:15px; margin-bottom:17px; font-weight:700; }
.ibfooter-col p { color:var(--sl-400); font-size:13px; margin-bottom:10px; }
.ibfooter-col a { display:block; color:var(--sl-400); font-size:13px; padding:4px 0; }
.ibfooter-col a:hover { color:#fff; }
.ibfooter-bottom { border-top:1px solid rgba(255,255,255,.10); padding:20px 0; }
.ibfooter-bottom p { color:var(--sl-400); font-size:12.5px; text-align:center; }
.ibfooter-bottom a { color:var(--sl-300); }
.ibfooter-bottom a:hover { color:#fff; }
.iblegal { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.iblegal a { display:inline-block; }
.iblegal a:hover { color:#fff; }

/* ===== 响应式 ===== */
@media (max-width:1024px) {
  .ib4 { grid-template-columns:repeat(2,1fr); }
  .ibstats, .ibflow { grid-template-columns:repeat(2,1fr); }
  .ibfooter-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .ibnav-toggle { display:block; }
  .ibnav {
    position:fixed; top:70px; left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:16px; overflow-y:auto;
    display:none; z-index:9997;
  }
  #ibnavSwitch:checked ~ .ibheader-inner .ibnav { display:flex; }
  .ibnav .ibnav-link { padding:13px 15px; font-size:15px; }
  .ibdrop-menu {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:1px solid var(--sl-200); margin:5px 0 9px; display:block;
  }
  .ibnav-cta { margin-top:12px; }
  .ibnav-cta .ibbtn { width:100%; }
  .ib3, .ib2 { grid-template-columns:1fr; }
  .ibbar .ibbar-links { display:none; }
}
@media (max-width:560px) {
  .ib4, .ibstats, .ibflow { grid-template-columns:1fr; }
  .ibfooter-grid { grid-template-columns:1fr; gap:26px; }
  .ibsection { padding:46px 0; }
  .ibcta { padding:40px 22px; }
}