/* ==== CSS ===== */

/* ---------- Variables ---------- */
:root{
  --blue:#1f4468;          /* navbar / main brand blue */
  --blue-deep:#183e63;     /* deeper blue */
  --blue-contact:#294a6d;  /* contact/footer block */
  --text:#0f172a;
  --muted:#475569;
  --bg:#f7f7f7;            /* section light gray (WP feeling) */
  --card:#ffffff;

  --container:1200px;
  --radius:16px;
  --shadow:0 18px 45px rgba(2, 6, 23, .12);
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color:var(--text);
  background:#fff;
}

img{max-width:100%; height:auto; display:block}

/* Improve anchor scrolling (sticky header offset) */
section[id]{scroll-margin-top:120px}

/* ---------- Layout Helpers ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Header  ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  box-shadow:0 10px 30px rgba(2, 6, 23, .06);
}

/* Top bar (logo + name) */
.topbar{
  padding:14px 22px;
  border-bottom:1px solid rgba(15, 23, 42, .08);
  background:#fff;
}

.brand{
  max-width:var(--container);
  margin:0 auto;
  padding:0 6px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* force logo visible & stable */
.brand__logo{
  width:36px !important;
  height:36px !important;
  display:block !important;
  flex:0 0 auto;
  object-fit:contain;
}

.brand__name{
  font-weight:700;
  letter-spacing:.2px;
  color:#0b2f52;
  font-size:18px;
}

/* Navbar (dark blue bar) */
.navbar{
  background:var(--blue);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.nav{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  gap:28px;
  align-items:center;
  height:56px;            
}

.nav__link{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  font-weight:650;
  font-size:15px;
  padding:10px 0;
  position:relative;
}

.nav__link:hover{color:#fff}

.nav__link.is-active{
  color:#67b3ff;
}

/* subtle active underline */
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:#67b3ff;
  opacity:.9;
}

/* ---------- Sections  ---------- */
.section{
  padding:70px 0;               /* reduce empty feeling */
}

.section .para{
  max-width:980px;
  margin:14px auto 0;
  line-height:1.9;
  color:rgba(15,23,42,.78);
  text-align:center;
  font-size:15px;
}

.title{
  font-size:36px;
  margin:0;
  text-align:center;
  color:#0b2f52;
  letter-spacing:1px;
}

.subtitle{
  text-align:center;
  color:rgba(15,23,42,.72);
  margin-top:10px;
  font-weight:600;
  font-size:15px;
}

/* Alternate light background sections */
.intro,
.services,
.features{
  background:var(--bg);
}

.plain{
  background:#fff;
}

/* ---------- Hero  ---------- */
.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:url("../img/hero.jpg") center/cover no-repeat;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
}

.hero__content{
  position:relative;
  text-align:center;
  color:#fff;
  padding:30px 18px;
}

.hero__content h1{
  margin:0;
  font-size:64px;
  letter-spacing:6px;
}

.hero__sub{
  margin-top:10px;
  font-weight:800;
  letter-spacing:2px;
}

.hero__tag{
  margin-top:10px;
  font-weight:650;
  opacity:.95;
}

.hero__en{
  margin-top:14px;
  opacity:.9;
}

/* ---------- Intro wave  ---------- */
.wave{
  height:140px;
  margin-top:40px;
  margin-bottom:-80px;  /*把蓝色装饰拉回去*/
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cpath fill='%231f4468' fill-opacity='1' d='M0,160L80,144C160,128,320,96,480,90.7C640,85,800,107,960,117.3C1120,128,1280,128,1360,128L1440,128L1440,200L1360,200C1280,200,1120,200,960,200C800,200,640,200,480,200C320,200,160,200,80,200L0,200Z'/%3E%3Cpath fill='%23183e63' fill-opacity='0.55' d='M0,170L96,154.7C192,139,384,107,576,112C768,117,960,160,1152,170.7C1344,181,1536,160,1632,149.3L1728,139L1728,200L1632,200C1536,200,1344,200,1152,200C960,200,768,200,576,200C384,200,192,200,96,200L0,200Z'/%3E%3C/svg%3E")
    center/cover no-repeat;
}

/* ---------- Dark block  ---------- */
.dark{
  background:var(--blue);
  color:#fff;
  padding:80px 0;
}

.split{
  max-width:var(--container);
  margin:0 auto 60px;
  padding:0 20px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}

.split--reverse{
  grid-template-columns:1fr 1.1fr;
}

.split--reverse .split__text{order:2}
.split--reverse .split__img{order:1}

.split__text h3{
  margin:0 0 14px;
  font-size:30px;
  letter-spacing:.5px;
}

.split__text p{
  margin:0;
  line-height:1.95;
  opacity:.9;
  font-size:16px;
}

.split__img img{
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

/* ---------- Services cards ---------- */
.services{
  padding:80px 0;
}

.kicker{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
  color:#0b355a;
  font-weight:800;
  letter-spacing:1px;
  font-size:14px;
}

.big-title{
  max-width:var(--container);
  margin:12px auto 0;
  padding:0 20px;
  font-size:40px;
  letter-spacing:1px;
  color:#0b2f52;
}

.cards{
  max-width:var(--container);
  margin:38px auto 0;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.card{
  background:var(--card);
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:26px 26px 64px;
  position:relative;
  min-height:320px;
  box-shadow:0 12px 28px rgba(2, 6, 23, .08);
  transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(2, 6, 23, .12);
}

.card__icon{
  width:62px;
  height:62px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(31, 68, 104, .08);
  font-size:26px;
}

.card__en{
  margin-top:22px;
  color:#0b355a;
  font-weight:900;
  letter-spacing:1px;
  font-size:13px;
}

.card__cn{
  margin-top:8px;
  font-size:30px;
  font-weight:900;
  color:#0f172a;
}

.card p{
  margin-top:14px;
  color:rgba(15,23,42,.78);
  line-height:1.85;
  font-size:15px;
}

.card__arrow{
  position:absolute;
  right:18px;
  bottom:16px;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(15, 23, 42, .06);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0f172a;
  font-size:20px;
}

.card__arrow:hover{
  background:rgba(31, 68, 104, .18);
}

/* ---------- Features (2x2) ---------- */
.features{
  padding:70px 0 90px;
}

.feature-grid{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:42px;
}

.feature{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:26px 22px;
  box-shadow:0 12px 28px rgba(2, 6, 23, .06);
  text-align:left;
}

.feature__ico{
  font-size:28px;
  margin-bottom:10px;
}

.feature h3{
  margin:0;
  color:#0b2f52;
  font-size:20px;
  letter-spacing:.2px;
}

.feature p{
  margin:12px 0 0;
  max-width:520px;
  color:rgba(15,23,42,.75);
  line-height:1.9;
  font-size:15px;
}

/* ---------- Plain sections (Expo / Projects) ---------- */
.plain .big-title{
  color:#0b2f52;
}

/* give plain sections a container feeling */
.plain .para{
  max-width:900px;
}

/* ---------- Contact  ---------- */
.contact{
  background:var(--blue-contact);
  color:#fff;
  padding:90px 0;
}

.contact__wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:start;
}

.contact__left h2{
  margin:0;
  font-size:30px;
  font-weight:800;
  letter-spacing:.2px;
}

.contact__left h2 span{
  font-size:18px;
  font-weight:500;
  opacity:.7;
  margin-left:10px;
}

.contact__left p{
  margin-top:18px;
  line-height:1.9;
  font-size:15px;
  color:rgba(255,255,255,.85);
  max-width:520px;
}

.contact__right{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:6px;
}

.contact__label{
  font-size:13px;
  color:rgba(255,255,255,.60);
  margin-bottom:6px;
  letter-spacing:.2px;
}

.contact__value{
  font-size:16px;
  font-weight:600;
  color:#fff;
  line-height:1.6;
}

/* ---------- Footer (merged with Contact like WP) ---------- */
.copyright{
  background:var(--blue-contact);
  color:rgba(255,255,255,.7);
  text-align:center;
  padding:26px 10px 40px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:14px;
}

/* ---------- Small refinements  ---------- */
.section .container,
.services .container,
.features .container,
.contact .container{}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split--reverse{grid-template-columns:1fr}
  .split--reverse .split__text{order:0}
  .split--reverse .split__img{order:0}
}

@media (max-width: 860px){
  .nav{
    flex-wrap:wrap;
    height:auto;
    padding:12px 18px;
    gap:14px 18px;
  }
  .nav__link{padding:6px 0}
  .nav__link.is-active::after{bottom:-6px}

  .hero__content h1{font-size:52px}
  .big-title{font-size:34px}

  .feature-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}

  .contact__wrap{
    grid-template-columns:1fr;
    gap:38px;
  }
}

@media (max-width: 520px){
  .topbar{padding:12px 14px}
  .brand__name{font-size:16px}
  .hero{min-height:460px}
  .section{padding:60px 0}
}

/* ===== NAV FIX: make menu links white + active highlight ===== */
.nav a,
.nav a:visited{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
  padding: 10px 0;
  position: relative;
}

.nav a:hover{
  color:#fff;
}

.nav a.is-active{
  color:#67b3ff;
}

.nav a.is-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:#67b3ff;
  opacity:.9;
}



/* =========================================================
    

                        INDEX 


========================================================= */

/* ---------- 通用 section 微调 ---------- */
.section.plain{
  background:#fff;
}

.section--soft{
  background:#f7f9fc;
}

/* -----我们解决什么问题----- */

/* 标题与说明 */
.section.plain > .big-title{
  text-align:center;
  margin-bottom:12px;
}

.section.plain > .para{
  text-align:center;
  margin:0 auto 20px;
  max-width:720px;
  line-height:1.6;
}

/* 四卡布局 */
.cards--4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  margin-top:18px;
  align-items:start;
}

/*防止被全局 card 拉高 */
.section.plain .cards--4 .card{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;

  /* 强制干掉全局高度 */
  height:auto !important;
  min-height:150px !important;   /* 这里就是“卡片高度”——想更矮就改小，比如 200px */
  padding:18px 18px !important;

  /* 内容位置 */
  display:flex;
  flex-direction:column;
  justify-content:center;        /* 垂直居中 */
}

/* hover */
.section.plain .cards--4 .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(2,6,23,.1);
}

/* 文案间距更紧凑 */
.cards--4 .card__en{
  font-size:13px;
  letter-spacing:.08em;
  color:#94a3b8;
  margin:0 0 4px;
}

.cards--4 .card__cn{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 8px;
}

.cards--4 .card p{
  font-size:14px;
  line-height:1.5;
  color:#475569;
  margin:0;
}

/* 响应式 */
@media (max-width: 1024px){
  .cards--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards--4{ grid-template-columns: 1fr; }
}


/* -----为什么选择国芯-----*/

.why-choose .feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:28px;
  margin-top:48px;
}

/* 单个卡片 */
.why-choose .feature{
  background:#fff;
  padding:28px 26px;
  border-radius:16px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}

/* 图标居中 */
.why-choose .feature__ico{
  font-size:22px;
  margin-bottom:14px;
  text-align:center;
}

/* 小标题居中 */
.why-choose .feature h3{
  font-size:18px;
  margin-bottom:10px;
  text-align:center;
}

/* 正文说明保持左对齐（不动） */
.why-choose .feature p{
  font-size:14px;
  line-height:1.7;
  color:#475569;
}


/* -----steps（服务流程）-----*/

.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:36px;
  margin-top:56px;
  position:relative;
}

/* 单个步骤卡片 */
.step{
  background:#fff;
  padding:28px 24px 26px;
  border-radius:18px;
  position:relative;
  box-shadow:
    0 12px 28px rgba(2,6,23,.06),
    0 0 0 1px rgba(37,99,235,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 悬浮 */
.step:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 44px rgba(2,6,23,.12),
    0 0 0 1px rgba(37,99,235,.15);
}

/* 流程线（横向） */
.step::after{
  content:"";
  position:absolute;
  top:48px;                       /* 对齐数字中轴 */
  right:-36px;                    /* = gap */
  width:36px;
  height:2px;
  background:linear-gradient(
    90deg,
    rgba(37,99,235,.15),
    rgba(37,99,235,.45)
  );
}

/* 箭头 */
.step::before{
  content:"";
  position:absolute;
  top:44px;
  right:-14px;
  width:10px;
  height:10px;
  border-top:2px solid rgba(37,99,235,.55);
  border-right:2px solid rgba(37,99,235,.55);
  transform:rotate(45deg);
}

/* 最后一个不画线 */
.step:last-child::after,
.step:last-child::before{
  display:none;
}

/* 数字节点 */
.step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:18px;
  font-weight:800;
  color:#2563eb;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.9),
      rgba(37,99,235,.08)
    );
  box-shadow:
    0 0 0 1px rgba(37,99,235,.25),
    0 8px 18px rgba(37,99,235,.25);
  margin-bottom:14px;
}

/* 文本 */
.step h3{
  font-size:18px;
  margin-bottom:8px;
  color:#0f172a;
}

.step p{
  font-size:14px;
  line-height:1.65;
  color:#475569;
  margin:0;
}

/* 响应式：移动端 → 纵向科技流程 */

@media (max-width: 980px){
  .steps{
    grid-template-columns: 1fr;
    gap:24px;
  }

  .step::after{
    top:auto;
    right:auto;
    left:28px;
    bottom:-24px;
    width:2px;
    height:24px;
    background:linear-gradient(
      180deg,
      rgba(37,99,235,.15),
      rgba(37,99,235,.45)
    );
  }

  .step::before{
    top:auto;
    right:auto;
    left:23px;
    bottom:-14px;
    width:10px;
    height:10px;
    transform:rotate(135deg);
    border-color:rgba(37,99,235,.55);
  }
}


/* -----项目案例----- */

.section.dark.cases-lite{
  padding:72px 0;
}

/* 标题区：让卡片不要贴太近 */
.section.dark.cases-lite .big-title{
  color:#fff;
  margin-bottom:12px;
}
/* 白色英文小标题 */

.section.dark .kicker{
  color:rgba(255,255,255,.9);
}


.section.dark.cases-lite .para{
  color:rgba(255,255,255,.85);
  max-width:820px;
  margin-bottom:32px; /* ✅ 关键：与卡片拉开距离 */
}
/* 深色背景 */

/* 卡片本体：更亮 + 更清晰边界 */
.section.dark .case-card{
  background: rgba(255,255,255,.10);          /* 原 .06 → 更亮 */
  border: 1px solid rgba(255,255,255,.18);    /* 边界更清晰 */
  box-shadow:
    0 20px 44px rgba(2,6,23,.45),              /* 深层阴影 */
    inset 0 1px 0 rgba(255,255,255,.08);      /* 顶部内高光 */
}

/* hover 时进一步“浮起来” */
.section.dark .case-card:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 28px 56px rgba(2,6,23,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* 图片区域再亮一点，和背景拉开 */
.section.dark .case-card__media{
  background: rgba(255,255,255,.06);
}

/* 图片本身稍微提亮 */
.section.dark .case-card__media img{
  filter: brightness(1.08) contrast(1.08);
}

/* 标题对比更强 */
.section.dark .case-card__title{
  color:#ffffff;
}

/* 正文略提亮 */
.section.dark .case-card__text{
  color:rgba(255,255,255,.82);
}


/* 三列网格 */
.cases-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

/* 单卡片 */
.case-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(2,6,23,.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.case-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow:0 22px 44px rgba(2,6,23,.28);
}

/* 图片 */
.case-card__media{
  display:block;
  position:relative;
  height:190px;              
  overflow:hidden;
}

.case-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.05);
}

.case-card:hover .case-card__media img{
  transform: scale(1.08);
}

/* 内容 */
.case-card__body{
  padding:18px 18px 16px;
}

.case-card__title{
  color:#fff;
  font-size:18px;
  margin:0 0 10px;
  line-height:1.35;
}

.case-card__text{
  color:rgba(255,255,255,.78);
  font-size:14px;
  line-height:1.65;
  margin:0 0 16px;
}

/* 按钮区 */
.case-card__actions{
  display:flex;
  justify-content:flex-start;
  margin-top: auto;
}
/* ✅ 让卡片成为纵向布局并等高 */
.case-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* ✅ 让内容区撑满剩余高度（标题+描述+按钮都在 body 里时） */
.case-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.case-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.case-card__actions{
  margin-top:auto;
}



/* “查看详情”按钮 */
.btn-detail{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  font-weight:700;

  color:#eaf2ff;
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(59,130,246,.85));
  box-shadow:0 12px 26px rgba(37,99,235,.28);
  border:1px solid rgba(255,255,255,.12);

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-detail:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:0 18px 36px rgba(37,99,235,.35);
}

.btn-detail__icon{
  display:inline-block;
  transform: translateX(0);
  transition: transform .2s ease;
}

.btn-detail:hover .btn-detail__icon{
  transform: translateX(3px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px){
  .cases-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .cases-grid{
    grid-template-columns: 1fr;
  }
  .case-card__media{
    height:180px;
  }
}




/* =========================================================
   

                        Digital Page 


========================================================= */

/* 顶部标题区（完全对齐 expo） */
.digital-page .digital-hero{
  padding: 92px 0 56px;
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(140,190,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 78% 35%, rgba(160,200,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(245,250,255,.95), #fff 70%);
}

.digital-page .digital-hero__wrap{
  width: min(var(--trade-max), calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.digital-page .digital-hero__tag{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15,47,95,.08);
  color: rgba(15,47,95,.92);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 12px;
}

.digital-page .digital-hero__title{
  margin: 22px 0 14px;
  font-size: 64px;
  line-height: 1.05;
  color: var(--trade-ink);
  font-weight: 900;
  letter-spacing: 1px;
}

.digital-page .digital-hero__desc{
  margin: 0 auto;
  max-width: 860px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.95;
}

.digital-page .digital-hero__line{
  margin: 46px auto 0;
  width: min(var(--trade-max), 100%);
  height: 1px;
  background: rgba(15,47,95,.12);
}

/* ✅ 服务介绍（把 digital 的 service-intro 改成 expo 同款排版）
   注意：你的 HTML 用的是 .service-intro，不是 .digital-intro
*/
.digital-page .service-intro{
  padding: 72px 0 54px;
}

/* 这块让“服务介绍”标题居中、字号一致 */
.digital-page .service-intro__inner h2{
  margin: 0 0 26px;
  text-align: center;
  font-size: 34px;
  letter-spacing: .5px;
  color: var(--trade-ink);
  font-weight: 900;
}

/* 如果你原本有 divider，这里统一成 expo 的气质 */
.digital-page .service-intro__divider{
  width: 68px;
  height: 3px;
  border-radius: 999px;
  background: rgba(15,47,95,.18);
  margin: 0 auto 18px;
}

/* 服务介绍正文 */
.digital-page .service-intro__inner p{
  max-width: 980px;
  margin: 0 auto;
  color:#4b5563;
  line-height: 1.95;
  font-size: 15px;
}

/* 防止你 HTML 里多余的 </p> 造成空行：把 p 的下间距固定成 expo */
.digital-page .service-intro__inner p{ margin-bottom: 14px; }
.digital-page .service-intro__inner p:last-of-type{ margin-bottom: 0; }

/* 如果你保留 pill-row：保持在“服务介绍”下面居中，间距与 expo 统一 */
/* ===== Digital Pillars（四大支柱） ===== */
.digital-page .pillars{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.digital-page .pillar{
  position: relative;
  padding: 26px 18px 22px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

/* 顶部“pillar装饰条” */
.digital-page .pillar::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    rgba(103,179,255,.9),
    rgba(31,68,104,.9)
  );
}

.digital-page .pillar__title{
  display:block;
  margin-top:14px;
  font-size:16px;
  font-weight:800;
  color:#0b2f52;
  letter-spacing:.5px;
}

.digital-page .pillar__sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:rgba(15,23,42,.45);
  text-transform: uppercase;
}

/* hover 微交互 */
.digital-page .pillar:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
  transition: all .2s ease;
}

/* 响应式 */
@media (max-width: 960px){
  .digital-page .pillars{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px){
  .digital-page .pillars{
    grid-template-columns: 1fr;
  }
}

/* Core service cards */ .service-grid{ margin-top:26px; display:grid; grid-template-columns:1fr; gap:18px; } .service-card{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:22px; padding:26px 22px; box-shadow:var(--shadow-soft); transition:transform .15s ease, box-shadow .15s ease; position:relative; overflow:hidden; } .service-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(800px 240px at 10% 10%, rgba(103,179,255,.14), transparent 60%); pointer-events:none; } .service-card:hover{ transform:translateY(-3px); box-shadow:0 18px 45px rgba(2, 6, 23, .12); } .service-card__icon{ width:54px; height:54px; border-radius:16px; background:rgba(31,68,104,.08); display:flex; align-items:center; justify-content:center; margin-bottom:14px; position:relative; } .service-card__icon img{ width:28px; height:28px; opacity:.95; } .service-card h3{ margin:0; font-size:20px; color:#0b2f52; font-weight:900; letter-spacing:.2px; position:relative; } .service-card__en{ margin-top:8px; font-size:13px; font-weight:800; letter-spacing:.8px; color:rgba(15,23,42,.45); position:relative; } .service-card p{ margin:12px 0 0; color:rgba(15,23,42,.70); line-height:1.9; font-size:15px; position:relative; } /* Capability cards (2x2) */ .cap2-grid{ margin-top:18px; display:grid; grid-template-columns:1fr; gap:18px; } .cap2{ display:grid; grid-template-columns:1fr; background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-soft); } .cap2__text{ padding:22px 22px 22px; } .cap2__text h3{ margin:0 0 12px; font-size:22px; color:#0b2f52; font-weight:900; letter-spacing:.2px; } .cap2__list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; } .cap2__list li{ position:relative; padding-left:16px; color:rgba(15,23,42,.72); line-height:1.55; font-size:15px; } .cap2__list li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:999px; background:rgba(103,179,255,.95); } .cap2__media{ background:#f2f4f7; aspect-ratio:16/10; } .cap2__media img{ width:100%; height:100%; object-fit:cover; display:block; } /* Steps timeline (alternating) */ .steps-timeline{ margin-top:26px; display:flex; flex-direction:column; gap:18px; } .step-row{ display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch; } .step-card{ background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:22px; padding:22px 22px 22px; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; } .step-card::before{ content:""; position:absolute; left:-120px; top:-120px; width:240px; height:240px; border-radius:999px; background:rgba(103,179,255,.12); } .step-card__num{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px; background:rgba(31,68,104,.08); color:#0b2f52; font-weight:900; margin-bottom:12px; position:relative; } .step-card h3{ margin:0; font-size:22px; font-weight:900; color:#0b2f52; position:relative; } .step-card h3 span{ font-size:15px; font-weight:700; color:rgba(15,23,42,.45); margin-left:6px; } .step-card p{ margin:12px 0 0; color:rgba(15,23,42,.72); line-height:1.9; font-size:15px; max-width:560px; position:relative; } .step-media{ border-radius:22px; background: linear-gradient(180deg, rgba(31,68,104,.06), rgba(31,68,104,.02)); border:1px dashed rgba(15,23,42,.12); min-height:168px; box-shadow:var(--shadow-soft); } /* CTA */ .cta{ padding:88px 0 70px; text-align:center; background: radial-gradient(900px 300px at 50% 10%, rgba(103,179,255,.18), transparent 55%), #fff; } .cta h2{ margin:0 0 12px; font-size:40px; color:#0b2f52; font-weight:900; } .cta p{ margin:0 0 18px; color:rgba(15,23,42,.70); line-height:1.9; } .cta-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 30px; margin-top:18px; background:var(--blue); color:#fff; font-size:16px; font-weight:800; letter-spacing:.5px; border-radius:999px; text-decoration:none; box-shadow:0 12px 28px rgba(31,68,104,.28); transition:all .2s ease; } .cta-btn:hover{ background:var(--blue-deep); transform:translateY(-2px); } /* ---------- Responsive ---------- */ @media (min-width: 960px){ .service-grid{ grid-template-columns:repeat(3, 1fr); gap:18px; } .cap2-grid{ grid-template-columns:1fr 1fr; gap:18px; } .step-row{ grid-template-columns:1.05fr .95fr; gap:22px; align-items:center; } .step-row.is-reverse{ grid-template-columns:.95fr 1.05fr; } .step-row.is-reverse .step-card{ order:2; } .step-row.is-reverse .step-media{ order:1; } } @media (max-width: 860px){ .nav{ flex-wrap:wrap; height:auto; padding:12px 18px; gap:14px 18px; } .nav a{padding:6px 0} .nav a.is-active::after{bottom:-6px} .page-hero__title{font-size:42px} .section-title{font-size:30px} .cta h2{font-size:34px} } @media (max-width: 520px){ .topbar{padding:12px 14px} .brand__name{font-size:16px} .section{padding:64px 0} }




/* =========================================================
   

                        Contact Page 


========================================================= */
:root{
  --gx-blue: #1f4b73;
  --gx-blue-2: #143a5c;
  --gx-bg: #f6f8fb;
  --gx-border: rgba(20, 58, 92, .12);
  --gx-text: #111827;
  --gx-muted: rgba(17,24,39,.65);
  --gx-radius: 16px;
}

.container{
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.page--contact .section{
  padding: 48px 0;
}

.page--contact .section--soft{
  background: var(--gx-bg);
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

/* 顶部 hero：解决“空”的第一招 */
.hero--contact{
  padding: 64px 0 56px;
  color: #fff;
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(900px 450px at 90% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--gx-blue), var(--gx-blue-2));
  position: relative;
  overflow: hidden;
}

.hero__kicker{
  letter-spacing: .2em;
  font-size: 12px;
  opacity: .85;
  margin: 0 0 10px;
}

.hero__title{
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
}

.hero__desc{
  margin: 0;
  max-width: 42ch;
  opacity: .9;
  font-size: 15px;
}

/* 三个信息卡 */
.info-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.info-card{
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  padding: 18px 18px;
  box-shadow: 0 10px 30px rgba(17,24,39,.05);
}

.info-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(31,75,115,.10);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: 0 0 auto;
}

.info-card__label{
  font-size: 12px;
  color: var(--gx-muted);
  margin-bottom: 6px;
}

.info-card__value{
  font-size: 14px;
  color: var(--gx-text);
  line-height: 1.45;
}

/* 标题区 */
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-title{
  margin: 0;
  font-size: 18px;
  color: var(--gx-text);
}

.section-sub{
  margin: 0;
  font-size: 13px;
  color: var(--gx-muted);
}

/* 联系人卡片 */
.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.person-card{
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);
  padding: 18px;
  box-shadow: 0 12px 34px rgba(17,24,39,.06);
}

.person-card__qr{
  background: rgba(31,75,115,.06);
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 12px;
}

.person-card__qr img{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
}

.person-card__name{
  margin: 2px 0 10px;
  font-size: 16px;
  color: var(--gx-text);
}

.person-card__list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.person-card__list li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: baseline;
}

.person-card__list span{
  color: var(--gx-muted);
  font-size: 12px;
}

.person-card__tips{
  margin-top: 8px;
  font-size: 12px;
  color: var(--gx-muted);
}

.link{
  color: var(--gx-blue);
  text-decoration: none;
}

.link:hover{
  text-decoration: underline;
}

/* 响应式 */
@media (max-width: 900px){
  .info-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .person-card{ grid-template-columns: 150px 1fr; }
}

@media (max-width: 520px){
  .container{ width: min(1120px, calc(100% - 28px)); }
  .person-card{ grid-template-columns: 1fr; }
  .person-card__qr img{ width: 160px; height: 160px; }
  .section-head{ flex-direction: column; align-items: flex-start; }
}

/* 1) 让 header 叠在 hero 上（overlay） */
.site-header--overlay{
  position: sticky;   /* 你也可以改成 fixed */
  top: 0;
  z-index: 999;
  background: transparent;
}

/* 1）navbar 原本就有背景色，这里让它半透明更高级 */
.site-header--overlay .navbar{
  background: rgba(31, 75, 115, .92);
  backdrop-filter: blur(10px);
}

/* 2) 直接缩短hero高度 */
.hero--contact{
  padding: 44px 0 36px;   /* 原来 64/56 太大了 */
  min-height: 260px;      /* 控制整体高度，防止变成一整屏 */
  display: flex;
  align-items: center;    /* 文案垂直居中，更紧凑 */
}

/* 3) 让 hero 内容不要太靠下（因为顶部有菜单） */
.page--contact{
  padding-top: 0;
}

/* 4) 当前页高亮 */
.nav a.active{
  color: #ffffff;
  font-weight: 700;
  position: relative;
}
.nav a.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.9);
  border-radius: 99px;
}




/* =========================================================
   

                        Trade Page 


========================================================= */

.trade-page{
  --trade-ink:#0b1f3a;
  --trade-blue:#1f3e75;
  --trade-muted:#6b7280;
  --trade-line:#e9eef5;
  --trade-check:#43b6e6;
  --trade-max:1180px;
  background:#fff;
}

.trade-page .trade-wrap{
  width: min(var(--trade-max), calc(100% - 48px));
  margin: 0 auto;
}

/* ✅ 顶部标题区（像 digital 那样） */
.trade-page .trade-hero{
  padding: 92px 0 56px;
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(140,190,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 78% 35%, rgba(160,200,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(245,250,255,.95), #fff 70%);
}

.trade-page .trade-hero__wrap{
  width: min(var(--trade-max), calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.trade-page .trade-hero__tag{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15,47,95,.08);
  color: rgba(15,47,95,.92);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 12px;
}

.trade-page .trade-hero__title{
  margin: 22px 0 14px;
  font-size: 64px;
  line-height: 1.05;
  color: var(--trade-ink);
  font-weight: 900;
  letter-spacing: 1px;
}

.trade-page .trade-hero__desc{
  margin: 0 auto;
  max-width: 860px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.95;
}

.trade-page .trade-hero__line{
  margin: 46px auto 0;
  width: min(var(--trade-max), 100%);
  height: 1px;
  background: rgba(15,47,95,.12);
}


/* -----服务介绍----- */
.trade-page .trade-intro{
  padding: 72px 0 54px;
}

.trade-page .trade-title{
  margin: 0 0 26px;
  text-align: center;
  font-size: 34px;
  letter-spacing: .5px;
  color: var(--trade-ink);
  font-weight: 900;
}

.trade-page .trade-intro__text{
  max-width: 980px;
  margin: 0 auto;
  color:#4b5563;
  line-height: 1.95;
  font-size: 15px;
}

.trade-page .trade-intro__text p{ margin: 0 0 14px; }
.trade-page .trade-intro__em{ color:#2b3647; font-weight: 700; }



/* -----服务清单----- */
.trade-page .trade-services{
  padding: 10px 0 36px;
}

.trade-page .trade-services__grid{
  display: grid;
  gap: 44px 70px;
  align-items: start;
  margin-top: 38px;
}

.trade-page .trade-services__grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-page .trade-services__grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  margin-top: 40px;
}

.trade-page .svc{ min-height: 220px; }
.trade-page .svc--center{ width: min(520px, 100%); }

.trade-page .svc__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.trade-page .svc__icon{
  width:30px; height:30px;
  color: var(--trade-blue);
  flex: 0 0 auto;
}

.trade-page .svc__icon svg{ width:100%; height:100%; }

.trade-page .svc__title{
  margin:0;
  font-size:18px;
  color:#1f2937;
  font-weight:850;
}

.trade-page .svc__title span{
  font-weight:700;
  color:#4b5563;
  font-size:14px;
}

.trade-page .svc__list{
  margin:0;
  padding-left:18px;
  color:#6b7280;
  line-height:1.95;
  font-size:14px;
}

.trade-page .svc__list li{ margin: 6px 0; }



/* ----- 交错图文 ----- */
.trade-page .trade-bands{ padding: 54px 0 30px; }

.trade-page .band{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:40px 0;
}

.trade-page .band--reverse{ grid-template-columns: .95fr 1.05fr; }

.trade-page .band__text h3{
  margin:0 0 12px;
  color: var(--trade-ink);
  font-size:34px;
  font-weight:900;
}

.trade-page .band__text p{
  margin:0;
  color:#6b7280;
  font-size:15px;
  line-height:1.9;
  max-width:520px;
}

.trade-page .band__media{ display:flex; justify-content:flex-end; }
.trade-page .band--reverse .band__media{ justify-content:flex-start; }

.trade-page .band__media img{
  width:min(520px, 100%);
  height:auto;
  display:block;
  border-radius:2px;
}

/* ----- 我们的优势 ----- */
.trade-page .trade-advantages{ padding: 38px 0 18px; }

.trade-page .adv-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:54px 90px;
  padding:18px 0 22px;
  align-items:start;
}

.trade-page .adv{ text-align:center; }

.trade-page .adv__icon{
  width:56px; height:56px;
  margin:0 auto 14px;
  color:#203c86;
}

.trade-page .adv__icon svg{ width:100%; height:100%; }

.trade-page .adv__title{
  margin:0 0 10px;
  font-size:30px;
  color:#203c86;
  font-weight:900;
}

.trade-page .adv__desc{
  margin:0 auto;
  max-width:420px;
  color:#6b7280;
  line-height:1.9;
  font-size:14px;
}

/* ----- 如果您是 ----- */
.trade-page .trade-fit{ padding: 40px 0 70px; }

.trade-page .fit-title{
  margin:0 0 22px;
  font-size:32px;
  color: var(--trade-ink);
  font-weight:900;
}

.trade-page .fit-list{
  list-style:none;
  padding:0;
  margin:0 0 46px;
  max-width:560px;
}

.trade-page .fit-list li{
  position:relative;
  padding-left:30px;
  margin:14px 0;
  color:#4b5563;
  font-size:15px;
  line-height:1.8;
}

.trade-page .fit-list li::before{
  content:"";
  position:absolute;
  left:0; top:6px;
  width:18px; height:18px;
  border-radius:4px;
  background: color-mix(in srgb, var(--trade-check) 20%, transparent);
  border:2px solid color-mix(in srgb, var(--trade-check) 80%, #ffffff);
}

.trade-page .fit-list li::after{
  content:"";
  position:absolute;
  left:5px; top:10px;
  width:8px; height:4px;
  border-left:3px solid var(--trade-check);
  border-bottom:3px solid var(--trade-check);
  transform: rotate(-45deg);
}

.trade-page .trade-cta{ text-align:center; padding-top:6px; }

.trade-page .trade-cta__text{
  margin:0 0 22px;
  font-size:22px;
  line-height:1.75;
  color: var(--trade-ink);
  font-weight:900;
}

.trade-page .trade-cta__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 26px;
  border-radius:4px;
  background:#1f2f7a;
  color:#fff;
  text-decoration:none;
  font-weight:850;
  box-shadow:0 10px 22px rgba(31,47,122,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.trade-page .trade-cta__btn:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 28px rgba(31,47,122,.24);
  background:#192963;
}

.trade-page .trade-cta__btn .btn-ico{
  width:18px; height:18px;
  display:inline-flex;
  color:#fff;
}

.trade-page .trade-cta__btn svg{ width:100%; height:100%; }

/* ===== 响应式 ===== */
@media (max-width: 980px){
  .trade-page .trade-hero{ padding: 78px 0 44px; }
  .trade-page .trade-hero__title{ font-size: 44px; }

  .trade-page .trade-services__grid--3{ grid-template-columns: 1fr; }
  .trade-page .trade-services__grid--2{ grid-template-columns: 1fr; }

  .trade-page .band,
  .trade-page .band--reverse{
    grid-template-columns: 1fr;
    gap:22px;
    padding:26px 0;
  }
  .trade-page .band__media,
  .trade-page .band--reverse .band__media{
    justify-content:flex-start;
  }

  .trade-page .adv-grid{ grid-template-columns: 1fr; gap:34px; }

  .trade-page .trade-title{ font-size: 30px; }
  .trade-page .band__text h3{ font-size: 28px; }
  .trade-page .adv__title{ font-size: 26px; }
  .trade-page .fit-title{ font-size: 28px; }
  .trade-page .trade-cta__text{ font-size: 18px; }
}






/* =========================================================
   

                        Expo Page 


========================================================= */

.expo-page{
  --expo-ink:#0b1f3a;
  --expo-muted:#6b7280;
  --expo-line:#1f293733;
  --expo-soft:#f3f4f6;
  --expo-star:#67bfe7;   /* WP 里那种浅蓝星星 */
  --expo-max:1180px;
  background:#fff;
}

.expo-page .expo-wrap{
  width: min(var(--expo-max), calc(100% - 48px));
  margin: 0 auto;
}

/* ✅ 顶部标题区（像 digital 那样） */
.expo-page .expo-hero{
  padding: 92px 0 56px;
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(140,190,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 78% 35%, rgba(160,200,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(245,250,255,.95), #fff 70%);
}

.expo-page .expo-hero__wrap{
  width: min(var(--trade-max), calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.expo-page .expo-hero__tag{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15,47,95,.08);
  color: rgba(15,47,95,.92);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 12px;
}

.expo-page .expo-hero__title{
  margin: 22px 0 14px;
  font-size: 64px;
  line-height: 1.05;
  color: var(--trade-ink);
  font-weight: 900;
  letter-spacing: 1px;
}

.expo-page .expo-hero__desc{
  margin: 0 auto;
  max-width: 860px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.95;
}

.expo-page .expo-hero__line{
  margin: 46px auto 0;
  width: min(var(--trade-max), 100%);
  height: 1px;
  background: rgba(15,47,95,.12);
}


/* ===== 服务介绍 ===== */
.expo-page .expo-intro{
  padding: 72px 0 54px;
}

.expo-page .expo-title{
  margin: 0 0 26px;
  text-align: center;
  font-size: 34px;
  letter-spacing: .5px;
  color: var(--trade-ink);
  font-weight: 900;
}

.expo-page .expo-intro__text{
  max-width: 980px;
  margin: 0 auto;
  color:#4b5563;
  line-height: 1.95;
  font-size: 15px;
}

.expo-page .expo-intro__text p{ margin: 0 0 14px; }
.expo-page .expo-intro__em{ color:#2b3647; font-weight: 700; }


/* ===== 4列服务（星标 + 中英标题 + 列表） ===== */
.expo-page .expo-services{
  padding: 26px 0 18px;
}

.expo-page .expo-grid{
  display: grid;
  gap: 46px 56px;
  align-items: start;
}

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

.expo-page .expo-svc__head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.expo-page .expo-star{
  color: var(--expo-star);
  font-size: 26px;
  line-height: 1;
  margin-top: 2px;
  flex: 0 0 auto;
}

.expo-page .expo-svc__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #1f2937;
  line-height: 1.35;
}

.expo-page .expo-svc__title span{
  color: #6b7280;
  font-weight: 700;
  font-size: 13px;
  margin-left: 6px;
}

.expo-page .expo-svc__list{
  margin: 0;
  padding-left: 18px;
  color: #6b7280;
  line-height: 1.95;
  font-size: 14px;
}

.expo-page .expo-svc__list li{ margin: 6px 0; }

/* ===== 左文右图大段落 ===== */
.expo-page .expo-split{
  padding: 34px 0 26px;
}

.expo-page .expo-split__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.expo-page .expo-split__big{
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 900;
  color: var(--expo-ink);
}

.expo-page .expo-split__text p{
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.9;
  max-width: 540px;
}

.expo-page .expo-split__media{
  display:flex;
  justify-content:flex-end;
}

.expo-page .expo-split__media img{
  width: min(640px, 100%);
  height: auto;
  display:block;
}

/* ===== 4个优势点（星 + 浅蓝大标题） ===== */
.expo-page .expo-highlights{
  padding: 28px 0 10px;
}

.expo-page .expo-grid--4c{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px 48px;
}

.expo-page .expo-hi{
  text-align: center;
}

.expo-page .expo-hi__star{
  color: var(--expo-star);
  font-size: 44px;
  line-height: 1;
  margin-bottom: 18px;
}

.expo-page .expo-hi__title{
  margin: 0 0 10px;
  color: var(--expo-star);
  font-size: 28px;
  font-weight: 900;
}

.expo-page .expo-hi__desc{
  margin: 0 auto;
  max-width: 320px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.9;
}

/* ===== CTA（大标题 + 按钮） ===== */
.expo-page .expo-cta{
  padding: 54px 0 72px;
  text-align: center;
}

.expo-page .expo-cta__title{
  margin: 0 0 26px;
  font-size: 50px;
  font-weight: 900;
  color: var(--expo-ink);
  letter-spacing: 1px;
}

.expo-page .expo-cta__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 26px;
  border-radius:4px;
  background:#1f2f7a;
  color:#fff;
  text-decoration:none;
  font-weight: 850;
  box-shadow:0 10px 22px rgba(31,47,122,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.expo-page .expo-cta__btn:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 28px rgba(31,47,122,.24);
  background:#192963;
}

.expo-page .expo-cta__btn .btn-ico{
  width:18px;
  height:18px;
  display:inline-flex;
  color:#fff;
}

.expo-page .expo-cta__btn svg{ width:100%; height:100%; }

/* ===== 响应式 ===== */
@media (max-width: 1100px){
  .expo-page .expo-grid--4,
  .expo-page .expo-grid--4c{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .expo-page .expo-hero__title{ font-size: 40px; }
  .expo-page .expo-cta__title{ font-size: 38px; }

  .expo-page .expo-split__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .expo-page .expo-split__media{ justify-content:flex-start; }

  .expo-page .expo-grid--4,
  .expo-page .expo-grid--4c{
    grid-template-columns: 1fr;
  }

  .expo-page .expo-hi__title{ font-size: 24px; }
  .expo-page .expo-split__big{ font-size: 28px; }
}


/* =========================================================
   

                        Projects Page 


========================================================= */

.projects-page .projects-hero{
  padding: 92px 0 56px;
  background:
    radial-gradient(900px 420px at 18% 25%, rgba(140,190,255,.22), rgba(255,255,255,0) 55%),
    radial-gradient(900px 420px at 78% 35%, rgba(160,200,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(245,250,255,.95), #fff 70%);
}

.projects-page .projects-hero__wrap{
  width: min(var(--trade-max), calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.projects-page .projects-hero__tag{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15,47,95,.08);
  color: rgba(15,47,95,.92);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 12px;
}

.projects-page .projects-hero__title{
  margin: 22px 0 14px;
  font-size: 64px;
  line-height: 1.05;
  color: var(--trade-ink);
  font-weight: 900;
  letter-spacing: 1px;
}

.projects-page .projects-hero__desc{
  margin: 0 auto;
  max-width: 860px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.95;
}

.projects-page .projects-hero__line{
  margin: 46px auto 0;
  width: min(var(--trade-max), 100%);
  height: 1px;
  background: rgba(15,47,95,.12);
}

/* head */
.projects-page .projects-head{
  text-align:center;
  margin-bottom: 18px;
}
.projects-page .projects-head__title{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing: .5px;
  color: var(--trade-ink);
  font-weight: 900;
}
.projects-page .projects-head__sub{
  margin:0 auto;
  max-width: 980px;
  color:#4b5563;
  line-height: 1.95;
  font-size: 15px;
}

/* toolbar */
.projects-page .projects-toolbar{
  margin: 22px auto 26px;
  max-width: 1100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.projects-page .projects-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.projects-page .tag{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color: rgba(15,23,42,.75);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  transition: all .15s ease;
}

.projects-page .tag.is-active{
  background: rgba(31,68,104,.10);
  border-color: rgba(31,68,104,.18);
  color:#0b2f52;
}

.projects-page .projects-search input{
  width:min(360px, 46vw);
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  outline:none;
  background:#fff;
  font-size:14px;
}
.projects-page .projects-search input:focus{
  border-color: rgba(31,68,104,.28);
  box-shadow: 0 0 0 4px rgba(103,179,255,.18);
}

/* cards grid */
.projects-page .projects-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  margin-top: 8px;
}

.projects-page .p-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}

.projects-page .p-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(2, 6, 23, .12);
}

.projects-page .p-card__link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.projects-page .p-card__cover{
  position:relative;
  background:#f2f4f7;
  aspect-ratio: 16/9;
}
.projects-page .p-card__cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.projects-page .p-card__badge{
  position:absolute;
  left:16px;
  bottom:16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(11,47,82,.88);
  color:#fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
}

.projects-page .p-card__body{
  padding: 20px 20px 18px;
}

.projects-page .p-card__title{
  margin:0;
  font-size: 20px;
  color:#0b2f52;
  font-weight: 900;
}

.projects-page .p-card__desc{
  margin:10px 0 0;
  color: rgba(15,23,42,.70);
  line-height: 1.9;
  font-size: 15px;
}

.projects-page .p-card__meta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color: rgba(15,23,42,.50);
  font-weight: 700;
  font-size: 13px;
}
.projects-page .p-card__more{
  color:#0b2f52;
  font-weight: 900;
}

/* responsive */
@media (min-width: 960px){
  .projects-page .projects-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px){
  .projects-page .projects-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .projects-page .projects-search input{
    width:100%;
  }
}




/* =========================================================
   PATCH (2025-12-18)
   目标：
   1) 统一 digital / trade / expo 顶部主标题字号
   2) 统一图片占位规则（你把图片丢进 assets/img/ 后直接改文件名即可）
   3) 修复小问题：--shadow-soft 未定义、hero wrap 变量引用混乱
   ========================================================= */

/* --------- (A) 修复缺失变量：你多处用了 var(--shadow-soft) 但没定义 --------- */
:root{
  --shadow-soft: 0 12px 28px rgba(2, 6, 23, .06);
}

/* --------- (B) 统一三页 hero 宽度变量（避免 digital/expo 引用 trade 的变量） --------- */
.digital-page,
.trade-page,
.expo-page,
.projects-page{
  --page-max: 1180px; /* 统一页面最大宽 */
}

/* 修复：你 digital/expo/projects 的 wrap 用了 --trade-max，这里统一兜底 */
.digital-page .digital-hero__wrap,
.trade-page .trade-hero__wrap,
.expo-page .expo-hero__wrap,
.projects-page .projects-hero__wrap{
  width: min(var(--page-max), calc(100% - 48px));
}

/* 修复：expo 里 hero title 用了 var(--trade-ink)，这里给 expo 自己兜底 */
.expo-page{
  --trade-ink: var(--expo-ink);
}

/* --------- (C) 统一三页 Hero 主标题字号/行高（以后只改这里） --------- */
:where(.digital-page, .trade-page, .expo-page) :where(.digital-hero__title, .trade-hero__title, .expo-hero__title){
  font-size: 64px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 1px;
}

/* 移动端一致缩放 */
@media (max-width: 820px){
  :where(.digital-page, .trade-page, .expo-page) :where(.digital-hero__title, .trade-hero__title, .expo-hero__title){
    font-size: 40px;
  }
}

/* --------- (D) 图片占位统一规则 ---------
   用法：
   1) HTML 里图片先用 ./assets/img/placeholder/xxx.jpg
   2) 你把真实图放到 assets/img/ 对应路径后，直接改文件名即可
*/
img[data-ph="true"]{
  background: #f2f4f7;
  border: 1px dashed rgba(15,23,42,.18);
}

/* 让占位图块即使没图也更稳定（避免塌陷/跳动） */
.media-ph{
  border-radius: 14px;
  overflow: hidden;
  background: #f2f4f7;
  border: 1px dashed rgba(15,23,42,.18);
}

/* 可选：统一你 trade / digital / expo 的图片圆角（保持你现有风格，不强行改） */
.trade-page .band__media img,
.expo-page .expo-split__media img,
.digital-page .cap2__media img{
  border-radius: 12px;
}

/* =========================================================
   PATCH - Global unify (headings + containers + placeholders)
   目标：标题字号统一、页面不那么宽、占位图不塌陷
   ========================================================= */

/* 全站容器稍微收窄：不挤，但更像 WP 的版心 */
:root{
  --container: 1120px;
}
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* 统一大标题：你之前希望全站 H1 统一 64px */
.projects-hero__title,
.hero__title,
.page h1,
main h1{
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* 二级标题统一一点 */
.big-title{
  font-size: 40px;
  line-height: 1.2;
}

/* 占位图：没有真实图片时也不会变形 */
img[data-ph="true"]{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#f2f4f7;
}

/* 首页 split 图片区域：保证高度稳定（不塌陷） */
.home-page .split__img{
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
}
.home-page .split__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* contact 页：避免过宽（你之前说“上面太宽”） */
.contact-page .container{
  max-width: 1080px;
}