/* =========================================================
   上海亿诺信官网 - base.css
   设计变量 / 重置 / 排版 / 布局工具类
   ========================================================= */

:root {
  /* 色板 - 深空蓝主色系 */
  --navy-950: #040B1B;
  --navy-900: #061226;
  --navy-800: #0A1F3E;
  --navy-700: #0D2C56;
  --navy-600: #113A72;
  --blue-600: #1668DC;
  --blue-500: #2E82FF;
  --blue-400: #4D9CFF;
  --blue-300: #7CB8FF;
  --blue-100: #D8E9FF;
  --blue-50: #EDF5FF;
  /* 青色霓虹强调系（科技感） */
  --cyan-600: #0891B2;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-100: #CFFAFE;
  /* 橙色强调系 */
  --orange-600: #E8680D;
  --orange-500: #FF7A1A;
  --orange-400: #FF9A47;
  --orange-100: #FFE9D8;
  --orange-50: #FFF4EC;
  /* 中性色 - 冷调蓝灰 */
  --gray-50: #F3F8FE;
  --gray-100: #E8F0FA;
  --gray-200: #D9E4F2;
  --gray-300: #C2D1E6;
  --gray-400: #8DA0BC;
  --gray-500: #5F7495;
  --gray-600: #425577;
  --gray-700: #2E3E5C;
  --gray-900: #0C1B33;
  --white: #FFFFFF;

  /* 语义变量 */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);
  --bg-page: #F4F8FE;
  --bg-muted: #EAF1FB;
  --bg-dark: var(--navy-900);
  --gradient-dark: linear-gradient(135deg, #040D1F 0%, #082045 48%, #0F3568 100%);
  --gradient-orange: linear-gradient(135deg, #FF8A32 0%, #F26A0A 100%);
  --gradient-tech: linear-gradient(92deg, var(--blue-500), var(--cyan-400));
  --glow-cyan: 0 0 26px rgba(34, 211, 238, 0.35);
  --glow-blue: 0 0 30px rgba(46, 130, 255, 0.4);

  /* 字体 */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* 尺寸与阴影 */
  --container: 1200px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(8, 32, 69, 0.07);
  --shadow: 0 14px 34px rgba(8, 32, 69, 0.12);
  --shadow-lg: 0 24px 56px rgba(8, 32, 69, 0.17);
  --header-height: 72px;

  /* 过渡 */
  --t-fast: 0.2s ease;
  --t: 0.3s ease;
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-primary);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  background: var(--orange-500);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* 锚点跳转时避开吸顶导航 */
[id] {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ---------- 容器与区块 ---------- */
.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

.container-narrow {
  width: min(920px, 100% - 48px);
  margin-inline: auto;
}

.section {
  padding: 92px 0;
}

.section--tight {
  padding: 68px 0;
}

.section--gray {
  background: var(--bg-muted);
}

.section--blue {
  background: var(--blue-50);
}

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--gradient-dark);
  color: rgba(255, 255, 255, 0.86);
}

/* 深色区块：极光光晕层 */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 0%, rgba(46, 130, 255, 0.28), transparent 62%),
    radial-gradient(52% 46% at 90% 100%, rgba(34, 211, 238, 0.18), transparent 64%),
    radial-gradient(40% 36% at 96% 8%, rgba(255, 122, 26, 0.1), transparent 66%);
}

/* 深色区块：科技网格层 */
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124, 184, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 184, 255, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 26%, transparent 80%);
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 26%, transparent 80%);
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #fff;
}

/* ---------- 网格工具 ---------- */
.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- 文本工具 ---------- */
.text-center {
  text-align: center;
}

.text-orange {
  color: var(--orange-500);
}

.mx-auto {
  margin-inline: auto;
}

/* ---------- 滚动渐入动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .container {
    width: min(var(--container), 100% - 40px);
  }
}

@media (max-width: 992px) {
  .section {
    padding: 72px 0;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  html {
    --header-height: 64px;
  }

  .container,
  .container-narrow {
    width: min(var(--container), 100% - 32px);
  }

  .section {
    padding: 56px 0;
  }

  .section--tight {
    padding: 44px 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}