/* =====================================================
   风暴树 - 全局样式
   所有 Tailwind 工具类已转换为原生 CSS
   ===================================================== */

/* ---------- 自定义属性 ---------- */
:root {
  --bg: #090c22;
  --muted: #c0c7e2;
  --card-bg: rgba(35, 45, 80, 0.25);
}

/* ---------- 基础重置 ---------- */
html {
  font-size: 16px;
}
html, body { height: 100%; margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '思源黑体', sans-serif;
}

img { image-rendering: -webkit-optimize-contrast; }

/* ---------- 布局 ---------- */
.container { width: 100%; }
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-12 { width: 3rem; }
.w-3 { width: 0.75rem; }

.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[1300px\] { max-width: 1300px; }
.max-w-3xl { max-width: 48rem; }
.max-h-\[420px\] { max-height: 420px; }

.h-\[600px\] { height: 600px; }
.h-px { height: 1px; }
.h-3 { height: 0.75rem; }
.h-20 { height: 5rem; }
.h-30 { height: 7.5rem; }
.h-66 { height: 4.125rem; }

/* 字体 */
.fs-24{ font-size: 1.5rem; }
.fs-26{ font-size: 1.625rem; }

/* ---------- 内外边距 ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-100 { margin-top: 6.25rem; }
.mt-132 { margin-top: 8.25rem; }
.mt-140 { margin-top: 8.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-66 { margin-bottom: 4.125rem; }
.mb-100 { margin-bottom: 6.25rem; }
.mr-3 { margin-right: 0.75rem; }

.ml-16{ margin-left: 1rem; }

.pt-100 { padding-top: 6.25rem; }
.pb-100 { padding-bottom: 6.25rem; }


.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

/* ---------- Flex ---------- */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ---------- Grid ---------- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-6 { gap: 1.5rem; }

/* ---------- 定位 / 溢出 ---------- */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ---------- 显示 ---------- */
.inline-block { display: inline-block; }
.align-middle { vertical-align: middle; }

/* ---------- 排版 ---------- */
.text-left { text-align: left; }
.text-center { text-align: center; }

.text-4xl { font-size: 2.25rem; line-height: 1.1; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.font-extrabold { font-weight: 800; }
.font-bold { font-weight: 700; }

.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.font-sans {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '思源黑体', sans-serif;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 颜色 ---------- */
.text-white { color: #ffffff; }

.text-\[\#c0c7e2\] { color: #c0c7e2; }
.text-\[\#ffffff\] { color: #ffffff; }
.text-\[\#e6e9f8\] { color: #e6e9f8; }
.text-\[\#fff1e8\] { color: #fff1e8; }
.text-\[\#e9fff4\] { color: #e9fff4; }
.text-\[\#e9f7ff\] { color: #e9f7ff; }
.text-\[\#fff6ee\] { color: #fff6ee; }
.text-\[\#f1ecff\] { color: #f1ecff; }

/* ---------- 背景 ---------- */
.bg-\[\#090c22\] { background-color: #090c22; }
.bg-\[\#091025\] { background-color: #091025; }
.bg-\[\#6b7280\] { background-color: #6b7280; }
.bg-\[\#040b28\] { background-color: #040b28; }
.bg-white { background-color: #ffffff; }
.bg-\[rgba\(35\,45\,80\,0\.25\)\] { background-color: rgba(35, 45, 80, 0.25); }

/* ---------- 圆角 ---------- */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.rounded-b-md {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ---------- 阴影 ---------- */
.shadow-lg { box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6); }

/* ---------- 装饰 ---------- */
.section-title .line {
  height: 2px;
  display: inline-block;
  background: #374151;
}
.section-title .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}

/* ---------- 页脚 ---------- */
.footer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 5rem;
  gap: 0.4rem;
}
.footer-link a {
  color: #c0c7e2;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-link a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (min-width: 768px) {
  .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 平板/手机 响应式 (≤768px) ---------- */
@media (max-width: 768px) {
  .banner { height: 420px; }
  .banner img { max-width: 240px; }

  .w-1\/2 { width: 100%; }
  .text-4xl { font-size: 1.6rem; }
  .text-5xl { font-size: 2rem; }
  .text-2xl { font-size: 1.25rem; }
  .text-xl { font-size: 1.1rem; }

  .mt-100 { margin-top: 3rem; }
  .mt-132 { margin-top: 4rem; }
  .mb-100 { margin-bottom: 3rem; }
  .mb-66 { margin-bottom: 2rem; }
  .pt-100 { padding-top: 3rem; }
  .pb-100 { padding-bottom: 3rem; }
  .px-6 { padding-left: 1rem; padding-right: 1rem; }
  .p-6 { padding: 1rem; }

  .flex.justify-between {
    flex-direction: column;
  }
  .footer-box { font-size: 0.85rem; }
}

/* ---------- 小屏手机 (≤480px) ---------- */
@media (max-width: 480px) {
  .text-4xl { font-size: 1.4rem; }
  .text-2xl { font-size: 1.1rem; }
  .text-xl { font-size: 1rem; }

  .mt-100 { margin-top: 2.5rem; }
  .mb-100 { margin-bottom: 2.5rem; }
  .pt-100 { padding-top: 2.5rem; }
  .pb-100 { padding-bottom: 2.5rem; }
  .footer-box { height: 3rem; font-size: 0.75rem; }
}