/* ==========================================================
   低代码平台应用创新中心 - 首页样式
   布局核心：CSS Grid + 响应式（≤768px 单列）
   ========================================================== */
:root {
  --red: #d63c3c;
  --orange: #f08300;
  --dark: #10192e;
  --hero-a: #131c31;
  --hero-b: #1d3054;
  --portal-a: #0b1f44;
  --footer: #061735;
  --gray-bg: #ececec;
  --text: #333;
  --text-2: #666;
  --radius: 12px;
  --shadow: 0 8px 28px rgba(20, 45, 100, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* ========== 顶部导航（Grid） ========== */
.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 20px 0;
  transition: background .3s, box-shadow .3s;
}
.header.fixed {
  position: fixed;
  background: rgba(13, 22, 42, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  animation: drop .3s ease;
}
@keyframes drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.header-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
/* Logo：logo.png（460×69 透明底白标，宽高比 6.67），高 42px → 宽约 280px */
.logo img { height: 42px; width: auto; }

.nav {
  display: grid;
  grid-column: 2;
  grid-auto-flow: column;
  justify-content: end;
  gap: 44px;
}
.nav a {
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  padding: 6px 2px;
  position: relative;
  transition: color .3s;
}
.nav a:hover, .nav a.active { color: var(--orange); }
.nav a.active::after, .nav a:hover::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--orange);
}

/* 汉堡按钮（移动端显示） */
.menu-btn {
  display: none;
  grid-column: 2;
  justify-self: end;
  width: 40px; height: 36px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 4px 6px;
}
.menu-btn span {
  display: block;
  width: 24px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.menu-btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ========== Hero 横幅（Grid） ========== */
.hero {
  position: relative;
  min-height: 480px;
  display: grid;
  align-items: center;
  background:
    radial-gradient(ellipse 700px 320px at 62% 55%, rgba(50, 110, 200, .30), transparent 68%),
    linear-gradient(160deg, var(--hero-a) 0%, var(--hero-b) 60%, #16233f 100%);
  overflow: hidden;
}


/* Hero 背景图：hero-city2.jpg（1862×709 宽幅）整幅铺满 */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/hero-city2.jpg") no-repeat center 62% / cover;
}
/* 左侧压暗渐变，保证标题可读、整体色调与页面一致 */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 25, 46, .58) 0%, rgba(16, 25, 46, .22) 42%, rgba(16, 25, 46, 0) 68%),
    linear-gradient(180deg, rgba(16, 25, 46, .25) 0%, rgba(16, 25, 46, 0) 30%, rgba(16, 25, 46, .35) 100%);
}
.hero-grid { position: relative; z-index: 2; }
.hero-text h1 {
  color: var(--orange);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: 5px;
  text-shadow: 0 4px 20px rgba(240, 131, 0, .35);
}
.hero-text p {
  margin-top: 16px;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  letter-spacing: 7px;
}

/* ========== 通用区块标题（胶囊比例 5:1） ========== */
.section { padding: 68px 0; }
.sec-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  aspect-ratio: 5 / 1;
  height: 40px;
  padding: 0 20px 0 44px;
  background: #f4e8eb;
  border: 1px solid #d75560;
  border-radius: 999px;
  color: #e60012;
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
}
.sec-pill .dot {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ff0000;
}

/* ========== 中心简介（Grid） ========== */
.intro-grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 48px;
  align-items: center;
}
.intro-text h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  color: #1a2b4a;
  margin-bottom: 26px;
  letter-spacing: 1px;
}
.intro-text p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2;
  color: #000;
  text-align: justify;
  text-indent: 2em;
}

/* 数据卡片 */
.stat-card {
  background: radial-gradient(circle at 100% 0%, #e3f4fb 0%, rgba(255, 255, 255, 0) 52%), #fff;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat-item {
  background: #fff;
  border-radius: 12px;
  padding: 22px 6px 18px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(20, 45, 100, .06);
}
.stat-item .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 14px;
}
/* 图标：彩色圆角徽标 + 白色图案，尺寸按 20px 文字对比约 1.6 倍 */
.stat-item .tag .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.stat-item .tag .ic svg { width: 18px; height: 18px; }
.s-red   .tag, .s-red   .num { color: #e04b45; }
.s-blue  .tag, .s-blue  .num { color: #3a6fd8; }
.s-green .tag, .s-green .num { color: #2ba471; }
/* 小卡片右上角同色系渐变晕染 */
.s-red   { background: radial-gradient(circle at 100% 0%, #fae5e8 0%, rgba(255, 255, 255, 0) 58%), #fff; }
.s-blue  { background: radial-gradient(circle at 100% 0%, #ebecfa 0%, rgba(255, 255, 255, 0) 58%), #fff; }
.s-green { background: radial-gradient(circle at 100% 0%, #e0fcf7 0%, rgba(255, 255, 255, 0) 58%), #fff; }
.stat-item .num { font-size: 34px; font-weight: bold; line-height: 1; }
.stat-item .num small { font-size: 20px; font-weight: normal; margin-left: 3px; }
.stat-item p { font-size: clamp(10px, 0.968vw, 12px); color: #999; line-height: 1.7; margin-top: 12px; }

/* 较窄桌面（≤1240px）：两栏趋近等宽并收紧内边距，保证第三张卡小字不换行 */
@media (max-width: 1240px) {
  .intro-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stat-card { padding: 22px 8px; gap: 8px; }
}

/* ========== 中心动态（Grid） ========== */
.news { background: var(--gray-bg); }
.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.more { color: var(--red); font-size: clamp(13px, 1.11vw, 16px); }
.more:hover { opacity: .75; }

.news-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.news-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0px 2px 10px rgba(20, 45, 100, .06); }
.news-card .pic { overflow: hidden; }
.news-card .pic img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s; }
.news-card:hover .pic img { transform: scale(1.05); }
.news-card .txt { padding: 20px 22px 18px; }
.news-card .txt h3 {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .meta { display: flex; justify-content: space-between; align-items: center; }
.news-card .date { color: #999; font-size: clamp(13px, 1.11vw, 16px); }
.news-card .link { color: var(--red); font-size: clamp(13px, 1.11vw, 16px); }

.news-list {
  margin-top: 30px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  transition: box-shadow .25s;
  overflow: hidden;
}
.news-list:hover { box-shadow: 0px 2px 10px rgba(20, 45, 100, .06); }
.news-list li + li { border-bottom: 1px dashed #d9d9d9; }
.news-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 15px 20px;
  border-radius: 6px;
  transition: background .25s;
}
.news-list a:hover { background: #f5f5f5; }
.news-list .t { display: flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.25vw, 18px); }
.news-list .t::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.news-list .d { color: #999; font-size: clamp(13px, 1.11vw, 16px); white-space: nowrap; }

/* ========== 底部功能入口（Grid） ========== */
.portal {
  background:
    radial-gradient(ellipse 640px 380px at 12% 18%, rgba(96, 64, 190, .45), transparent 62%),
    radial-gradient(ellipse 620px 380px at 88% 85%, rgba(170, 60, 165, .38), transparent 62%),
    linear-gradient(160deg, #0e1c3e 0%, var(--portal-a) 50%, #251a4a 100%);
  padding: 78px 0 86px;
}
.portal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 158px;
  gap: 22px;
}
.p-card {
  grid-column: span 3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(6px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .3s, background .3s;
}
.p-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .13); }
.p-card .name {
  color: #fff;
  font-size: clamp(18px, 1.944vw, 28px);
  font-weight: normal;
  letter-spacing: 2px;
}
.p-card .icon {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
}
.p-card .icon svg { width: 18px; height: 18px; }

.p-card.big {
  grid-column: span 6;
  grid-row: span 2;
  align-content: center;
  gap: 20px;
}
.p-card.big .name { font-size: clamp(18px, 1.944vw, 28px); font-weight: normal; }
.p-card.big .wave {
  width: 84%;
  border-radius: 10px;
  overflow: hidden;
}
.p-card.big .wave img { width: 100%; }

/* 桌面端末行 3 张卡片各占 4/12，铺满整行 */
.portal-grid .p-card:nth-last-child(-n+3) { grid-column: span 4; }

.i-red    { background: #e8483f; }
.i-orange { background: #f59a23; }
.i-purple { background: #8b5cf6; }
.i-blue   { background: #4f7df9; }
.i-cyan   { background: #3fb1e5; }
.i-green  { background: #2bb673; }
.i-pink   { background: #e84393; }
.i-sky    { background: #3a8fe0; }

/* ========== 服务入口列表页（listpic.html） ========== */
/* 内容区背景与 list 页一致（白底），卡片改为浅色系 */
.listpic {
  padding: 64px 0 72px;
  background: #fff;
}
.listpic .p-card {
  background: #fff;
  border: 1px solid #eef1f5;
  box-shadow: 0 2px 10px rgba(20, 45, 100, .05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.listpic .p-card:hover {
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 45, 100, .12);
  transform: translateY(-6px);
}
.listpic .p-card .name { color: #1a2b4a; }

/* 8 张等宽卡片：桌面端取消"末行 3 卡加宽"规则，全部 span 3（每行 4 张，正好两行铺满） */
@media (min-width: 1025px) {
  .portal-grid.uniform .p-card:nth-last-child(-n+3) { grid-column: span 3; }
}

/* ========== 单页（danye.html：中心简介） ========== */
.article-section { padding: 48px 0 64px; }
.article {
  max-width: 900px;
  margin: 0 auto;
}
.article-title {
  font-size: 26px;
  line-height: 1.6;
  color: #1a2b4a;
  text-align: center;
  letter-spacing: 1px;
}
.article-meta {
  margin-top: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  color: #999;
  font-size: 13px;
}
.article-body {
  margin-top: 28px;
  font-size: 15px;
  line-height: 2.05;
  color: #444;
}
.article-body img {
  display: block;
  width: 60%;
  max-width: 100%;
  margin: 0 auto 24px;
  border-radius: 10px;
}
.article-body p {
  margin-bottom: 18px;
  text-indent: 2em;
  text-align: justify;
}
.article-body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .article-section { padding: 32px 0 48px; }
  .article-title { font-size: 20px; text-align: left; }
  .article-meta { justify-content: flex-start; gap: 14px; font-size: 12px; }
  .article-body { margin-top: 20px; font-size: 14px; line-height: 1.95; }
  .article-body img { width: 100%; }
}

/* ========== 页脚 ========== */
.footer {
  background: var(--footer);
  min-height: 300px;
  padding: 26px 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, .45);
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 1px;
}

/* ==========================================================
   栏目列表页（list.html）
   ========================================================== */
/* 栏目标题 + 面包屑（横幅之下） */
.crumb-bar {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.crumb-bar-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
}
.crumb-bar .cat-name {
  color: #1a2b4a;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
  padding-left: 16px;
}
.crumb-bar .cat-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--red);
}
.crumb-bar .crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #999;
  font-size: clamp(14px, 1.11vw, 16px);
}
.crumb-bar .crumb a { color: var(--text-2); transition: color .3s; }
.crumb-bar .crumb a:hover { color: var(--red); }
.crumb-bar .crumb i { font-style: normal; opacity: .55; }
.crumb-bar .crumb span { color: var(--red); }

/* 列表主体 */
.list-section { padding: 48px 0 64px; }
.page-list {
  margin-top: 26px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 14px rgba(20, 45, 100, .06);
}
/* 列表页标题字号与首页中心动态一致（沿用 .news-list .t 的 clamp） */

/* 分页 */
.pagination {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pagination a {
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  color: var(--text-2);
  font-size: 14px;
  transition: all .25s;
}
.pagination a:hover { color: var(--red); border-color: var(--red); }
.pagination a.current {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: bold;
}

/* 手机端：列表页适配 */
@media (max-width: 768px) {
  .crumb-bar-grid { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0; }
  .crumb-bar .cat-name { font-size: 20px; }
  .list-section { padding: 32px 0 48px; }
  .page-list .t { font-size: 15px; }
  .pagination a { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ========== 滚动显现动画（仅 JS 可用时启用） ========== */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s, transform .7s; }
.js .reveal.on { opacity: 1; transform: none; }

/* ==========================================================
   响应式
   ========================================================== */
/* 平板：≤1024px */
@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .stat-card { max-width: 560px; }
  .hero-bg { background-position: 60% 62%; }
  .p-card { grid-column: span 4; }
  .p-card.big { grid-column: span 8; }
  /* 平板端末行 2 张卡片各占 6/12，铺满整行 */
  .portal-grid .p-card:nth-last-child(2),
  .portal-grid .p-card:last-child { grid-column: span 6; }
}

/* 手机：≤768px 单列布局 */
@media (max-width: 768px) {
  body { min-width: 320px; }

  /* 导航折叠为汉堡菜单 */
  .menu-btn { display: flex; }
  .logo img { height: 34px; }
  .nav {
    grid-auto-flow: row;
    justify-content: stretch;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(13, 22, 42, .97);
    display: none;
    padding: 8px 4% 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
  }
  .nav.open { display: grid; }
  .nav a { padding: 13px 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav a.active::after, .nav a:hover::after { display: none; }

  .hero { min-height: 380px; }
  .hero-text h1 { letter-spacing: 2px; }
  .hero-bg {
    background-position: center 68%;
  }
  .hero-bg::after {
    background: rgba(16, 25, 46, .38);
  }
  .hero-text { text-align: center; padding: 40px 0 60px; }
  .hero-text p { letter-spacing: 4px; }

  .section { padding: 52px 0; }
  .sec-pill { height: 40px; font-size: 20px; gap: 14px; padding: 0 14px 0 12px; }
  .sec-pill .dot { width: 13px; height: 13px; }
  .intro-grid, .stat-card, .news-cards { grid-template-columns: 1fr; }
  .stat-card { padding: 18px 14px; }
  .stat-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; text-align: left; column-gap: 14px; align-items: center; padding: 16px 18px; }
  .stat-item .tag { grid-column: 1; margin: 0; }
  .stat-item .num { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .stat-item p { grid-column: 1; margin: 10px 0 0; }

  .news-list a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px 20px; }

  /* 手机端：所有卡片统一每卡占 6/12（一行两张），大卡隐藏波形图 */
  .portal { padding: 56px 0 64px; }
  .portal-grid { grid-auto-rows: 128px; gap: 16px; }
  .portal-grid .p-card.big { grid-row: auto; }
  .portal-grid .p-card,
  .portal-grid .p-card:nth-last-child(-n+3) { grid-column: span 6; }
  .p-card.big .wave { display: none; }
}