/* ============================================================
   base.css — 设计系统（参照 xysk.tech 设计语言：白底 + 鲜艳渐变）
   ============================================================ */

:root {
  /* 浅色底 */
  --bg-0: #ffffff;
  --bg-1: #f6f7fc;
  --bg-2: #ffffff;
  --bg-3: #eef1fb;

  /* 品牌色：蓝→青，40° 鲜艳渐变 */
  --blue: #2b4dff;
  --cyan: #00b8ff;
  --grad: linear-gradient(40deg, #2b4dff 0%, #00b8ff 100%);
  --grad-deep: linear-gradient(60deg, #0d2fd0 0%, #071a6e 100%);
  --grad-soft: linear-gradient(135deg, rgba(43,77,255,.08), rgba(0,184,255,.06));
  --crest: #ff4d6a;

  /* 文字（深靛黑标题；正文灰加深避免发虚） */
  --text-0: #12173a;
  --text-1: #474f6b;
  --text-2: #666e89;

  /* 线与阴影 */
  --border: #e8ebf5;
  --border-hover: rgba(43,77,255,.4);
  --shadow-soft: 0 2px 10px rgba(20,26,60,.05);
  --shadow-card: 0 18px 48px rgba(20,26,60,.12);
  --glow-blue: 0 10px 28px rgba(43,77,255,.32);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "微软雅黑", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI", Arial, sans-serif;

  /* 字号阶梯 */
  --fs-hero: clamp(3rem, 7vw, 5.6rem);
  --fs-h2:   clamp(2.05rem, 4.2vw, 3.15rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:   1.125rem;
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .8125rem;

  /* 间距与版心 */
  --sec-py: clamp(88px, 11vw, 156px);
  --container: 1200px;
  --gutter: 24px;
  --gap: 24px;
  --nav-h: 72px;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-full: 999px;

  /* 动效 */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;
}

/* 深色语境（Hero / 架构总览面板 / CTA 渐变带）—— 变量级反转 */
.theme-dark {
  --text-0: #ffffff;
  --text-1: #c6cdf0;
  --text-2: #8e98c8;
  --border: rgba(255,255,255,.18);
  --border-hover: rgba(255,255,255,.5);
  --bg-2: rgba(255,255,255,.06);
  --bg-3: rgba(255,255,255,.12);
  --shadow-soft: none;
  --shadow-card: 0 18px 48px rgba(0,0,0,.3);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.8;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
address { font-style: normal; }
strong { color: var(--text-0); font-weight: 600; }

h1, h2, h3, h4 { color: var(--text-0); line-height: 1.32; letter-spacing: .01em; font-weight: 700; text-wrap: balance; }

/* 段落均衡换行：避免中文末行只剩一两个字的「孤行」 */
p { text-wrap: pretty; }

::selection { background: rgba(43,77,255,.22); color: #fff; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2b4dff, #00b8ff);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1a3bff, #00d4ff); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -64px; left: 16px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--text-0); color: #fff;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 布局 ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec { padding-block: var(--sec-py); position: relative; }
.sec--alt { background: var(--bg-1); }

/* ---------- 图标 ---------- */
.icon { width: 24px; height: 24px; flex: none; }

/* ---------- 渐变文字 ---------- */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- section 标题组件（英文眉题 + 大号深色标题） ---------- */
.sec-head {
  text-align: center;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.sec-head--left { text-align: left; }

.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-num);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(43,77,255,.07), rgba(0,184,255,.05));
  border: 1px solid rgba(43,77,255,.18);
}
.sec-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(43,77,255,.6);
}

.sec-title { font-size: var(--fs-h2); font-weight: 800; }

.sec-desc {
  max-width: 660px;
  margin: 20px auto 0;
  color: var(--text-2);
  text-wrap: balance;
}
.sec-head--left .sec-desc { margin-inline: 0; }

/* ---------- 按钮 ---------- */
@keyframes btn-shine {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); }
}
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn .icon { width: 18px; height: 18px; }

.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 20px rgba(43,77,255,.35), 0 2px 6px rgba(43,77,255,.2);
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: btn-shine 2.8s ease-in-out infinite 1.2s;
  pointer-events: none;
}
.btn--white {
  background: #fff;
  color: #141a3c;
  box-shadow: 0 10px 28px rgba(7,14,60,.25);
}
.btn--ghost-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,.65);
}
.btn--ghost {
  color: var(--blue);
  border: 1px solid rgba(43,77,255,.45);
}
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 12px 32px rgba(43,77,255,.5), 0 4px 10px rgba(43,77,255,.3); }
  .btn--white:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(7,14,60,.35); }
  .btn--ghost-light:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
  .btn--ghost:hover { background: rgba(43,77,255,.06); transform: translateY(-2px); }
}

/* ---------- 卡片 ---------- */
.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid #eef1f6;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(15,23,42,.04), 0 12px 32px rgba(43,77,255,.06);
  transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  background: var(--grad);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity .32s var(--ease), left .32s var(--ease), right .32s var(--ease);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    border-color: rgba(43,77,255,.22);
    box-shadow:
      0 24px 56px rgba(43,77,255,.16),
      0 4px 12px rgba(43,77,255,.08),
      0 0 0 1px rgba(43,77,255,.08);
  }
  .card:hover::before { opacity: 1; left: 10px; right: 10px; }
}

/* ---------- chip 标签 ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip,
.chips li {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(43,77,255,.05);
  border: 1px solid rgba(43,77,255,.14);
  font-size: var(--fs-xs);
  color: #3d4a8c;
  white-space: nowrap;
}
.theme-dark .chip,
.theme-dark .chips li {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: #d7defa;
}

/* ---------- check 列表 ---------- */
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .4em;
  width: 17px; height: 17px;
  background: var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gap);
}

/* ---------- 入场动画（仅 JS 可用时生效） ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-delay="1"] { transition-delay: .12s; }
.js [data-delay="2"] { transition-delay: .24s; }
.js [data-delay="3"] { transition-delay: .36s; }
.js [data-delay="4"] { transition-delay: .48s; }
.js [data-delay="5"] { transition-delay: .6s; }

/* ---------- 关键帧 ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@keyframes dashmove {
  to { stroke-dashoffset: -24; }
}
@keyframes slowspin {
  to { transform: rotate(360deg); }
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}