/* ============================================================
 * ZXDKIT 公共样式 - zxdkit-style.css
 * 提取自 rec/demo.html，包含 CSS 变量、全局 reset、
 * 公共组件（按钮、容器、导航、章节、页脚）及响应式规则。
 * ============================================================ */

/* ---------- CSS 变量 ---------- */
:root{
  --ink:#0a0d12;
  --ink2:#111827;
  --navy:#07111e;
  --navy2:#0d1727;
  --slate:#162132;
  --panel:#101827;
  --panel2:#121f32;
  --cream:#f8f5ef;
  --paper:#fbfaf7;
  --text:#f7fbff;
  --muted:#aab5c4;
  --soft:#dce6f2;
  --dark:#111827;
  --blue:#62b3ff;
  --cyan:#7af0d2;
  --amber:#ffd98c;
  --rose:#ff9aa9;
  --green:#9bf0b9;
  --line:rgba(255,255,255,.13);
  --line2:rgba(8,16,29,.12);
  --shadow:0 28px 90px rgba(0,0,0,.34);
  --radius:28px;
  --radius2:18px;
  --max:1200px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ---------- 全局 reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(circle at 14% 0%, rgba(98,179,255,.23), transparent 34%),
    radial-gradient(circle at 86% 7%, rgba(122,240,210,.16), transparent 28%),
    linear-gradient(180deg,#05080d 0%,#0a121f 48%,#f7f4ee 48%,#fbfaf7 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
.muted{color:#aeb9c8}
.light .muted,.cream .muted{color:#667085}

/* ---------- 容器 ---------- */
.container{width:min(var(--max), calc(100% - 44px)); margin:0 auto}

/* ---------- 导航栏 ---------- */
.nav{
  position:fixed; z-index:99; top:14px; left:0; right:0;
  width:min(1240px,calc(100% - 26px)); margin:0 auto;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(6,10,16,.78); backdrop-filter:blur(22px);
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  border-radius:999px; padding:12px 14px 12px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(4,8,14,.92);
  box-shadow:0 22px 56px rgba(0,0,0,.42);
}
.brand{display:flex; align-items:center; gap:11px; font-weight:950; letter-spacing:.1em; white-space:nowrap}
.brand-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#06121e;font-weight:1000;box-shadow:0 0 24px rgba(98,179,255,.35)}
.nav-links{display:flex; gap:18px; align-items:center; color:#c6d4e7; font-size:13px}
.nav-links a{opacity:.9}
.nav-links a:hover{opacity:1;color:white}
.nav-cta{display:flex; gap:10px; align-items:center}

/* ---------- 移动端汉堡菜单按钮 ---------- */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all .3s;
}

/* ---------- 按钮组件 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; padding:13px 18px; font-weight:850; font-size:14px; cursor:pointer; border:1px solid rgba(255,255,255,.17); transition:.22s ease; white-space:nowrap}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.primary{border:0;background:linear-gradient(135deg,var(--cyan),#b8fff0); color:#05131d; box-shadow:0 14px 34px rgba(122,240,210,.26)}
.btn.blue{border:0;background:linear-gradient(135deg,var(--blue),#a8d8ff); color:#05131d; box-shadow:0 14px 34px rgba(98,179,255,.26)}
.btn.ghost{background:rgba(255,255,255,.07); color:#f6fbff}
.btn.dark{background:#111827;color:white;border:0}
.btn.light{background:white;color:#0b1320;border:0}

/* ---------- 标签组件 ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.06);color:#d8ecff;text-transform:uppercase;font-size:12px;letter-spacing:.09em;font-weight:900}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(122,240,210,.75)}

/* ---------- 区块背景 ---------- */
.section{padding:94px 0}
.section.dark{background:linear-gradient(180deg,#07101b,#091625)}
.section.light{background:var(--paper); color:#101827}
.section.cream{background:var(--cream); color:#101827}

/* ---------- 标题区 ---------- */
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:34px}
.section-head h2{font-size:clamp(32px,4.7vw,64px); line-height:.98; letter-spacing:-.055em; margin:12px 0 0; max-width:840px}
.section-head p{max-width:500px; color:#586273; line-height:1.7; margin:0}
.dark .section-head p{color:#b8c4d4}

/* ---------- 滚动显示动画基础 ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{opacity:1;transform:none}

/* ---------- 页脚 ---------- */
footer{padding:40px 0;background:#05080d;color:#aeb9c8}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
.footer-grid b{display:block;color:white;margin-bottom:12px}
.footer-grid a{display:block;color:#aeb9c8;margin:8px 0;font-size:14px}
.footer-bottom{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;line-height:1.6}

/* ---------- 响应式：≤980px ---------- */
@media(max-width:980px){
  /* 公共组件部分 */
  .nav-links,
  .nav-cta{
    display:none;
    flex-direction:column;
  }
  .nav-links.open,
  .nav-cta.open{
    display:flex;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:rgba(6,10,16,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:18px;
    margin:0 8px;
    backdrop-filter:blur(22px);
  }
  .nav-toggle{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section-head{display:block}
  .section-head p{margin-top:14px}
}

/* ---------- 响应式：≤640px ---------- */
@media(max-width:640px){
  .container{width:min(100% - 28px, var(--max))}
  .nav{border-radius:24px; width:calc(100% - 18px)}
  .nav-cta .ghost{display:none}
  .brand{font-size:13px}
  .section{padding:70px 0}
  .footer-grid{grid-template-columns:1fr}
}