* {
  margin:0; padding:0; box-sizing:border-box;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-display:swap;
  -webkit-font-smoothing: antialiased;
}

:root {
  --bg: #ffffff;
  --card: #f7f9fc;
  --card-dark: #eef3f9;
  --border: #e0e6ed;
  --text: #111827;
  --text-light: #374151;
  --gray: #6b7280;
  --blue: #1a56db;
  --blue-light: #eff6ff;
  --accent: #2563eb;
}

body {
  background: var(--bg);
  color: var(--text);
  line-height:1.8;
  padding-top:80px;
}

header {
  position:fixed; top:0; left:0; width:100%; height:80px;
  background:#ffffff;
  border-bottom: 1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  z-index:999;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.logo-area {
  font-size:22px;
  font-weight:900;
  color:var(--blue);
  letter-spacing: -0.03em;
}

.nav-pc {
  display:flex;
  list-style:none;
  gap:32px;
}

.nav-pc a {
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  transition:0.25s ease;
  position:relative;
}

.nav-pc a:hover {
  color:var(--blue);
}

.menu-toggle {
  display:none;
  background:none;
  border:none;
  color:var(--blue);
  font-size:24px;
  cursor:pointer;
}

.nav-mobile {
  position:fixed; top:80px; left:0; width:100%;
  background:#ffffff;
  border-bottom: 1px solid var(--border);
  list-style:none;
  flex-direction:column;
  padding:20px 5%;
  gap:14px;
  z-index:998;
  display:none;
}

.nav-mobile a {
  color:var(--text);
  font-weight:600;
  text-decoration:none;
  padding:8px 0;
}

.nav-mobile.active {
  display:flex;
}

.slider {
  width:100%;
  height:600px;
  overflow:hidden;
  position:relative;
}

.slider-wrap {
  display:flex;
  height:100%;
  transition: transform 0.7s ease;
}

.slide {
  min-width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding:0 5%;
}

.slide-content {
  max-width:700px;
}

.slide h2 {
  font-size:48px;
  font-weight:900;
  color:#ffffff;
  margin-bottom:20px;
  line-height:1.2;
}

.slide p {
  font-size:18px;
  color:#ffffff;
  margin-bottom:30px;
}

.slide-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 32px;
  background:var(--blue);
  color:#fff;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  transition:0.25s ease;
}

.slide-btn:hover {
  background:#1e40af;
}

.slider-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  background:rgba(0,0,0,0.3);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:10;
}

.prev { left:20px; }
.next { right:20px; }

.dots {
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}

.dot {
  width:12px;
  height:12px;
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  cursor:pointer;
}

.dot.active {
  background:var(--blue);
}

.container {
  max-width:1100px;
  margin:0 auto;
  padding:0 5%;
}

.section {
  padding:80px 0;
}

.section-title {
  font-size:36px;
  font-weight:900;
  text-align:center;
  color:var(--text);
  margin-bottom:20px;
  line-height:1.3;
}

.section-desc {
  text-align:center;
  max-width:750px;
  margin:0 auto 50px;
  color:var(--gray);
  font-size:16px;
  line-height:1.8;
}

.section-content {
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding: 50px 55px;
  margin-bottom:40px;
}

.section-content h3 {
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin-top:36px;
  margin-bottom:14px;
}

.section-content h3:first-of-type {
  margin-top:0;
}

.section-content h4 {
  font-size:18px;
  font-weight:700;
  color:var(--text);
  margin-top:24px;
  margin-bottom:10px;
}

.section-content p {
  color:var(--text-light);
  font-size:16px;
  line-height:1.9;
  margin-bottom:14px;
}

.section-content ul {
  padding-left:24px;
  color:var(--text-light);
  margin-bottom:16px;
}

.section-content li {
  margin-bottom:8px;
  line-height:1.9;
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:30px;
}

/* 已修改为你要的颜色 #7bd2d6 */
.card {
  background: #7bd2d6;
  border-radius:16px;
  padding:30px;
  border:1px solid var(--border);
  transition:0.3s ease;
  cursor:pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height:160px;
}

.card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.08);
}

.card h3 {
  font-size:18px;
  font-weight:800;
  color:#111;
  margin-bottom:12px;
}

.learn-more {
  font-size:14px;
  font-weight:600;
  color: #004466;
  transition: all 0.3s;
  margin-top:10px;
}

.card:hover .learn-more {
  color: #002233;
  padding-left:6px;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index:9999;
}

.modal-box {
  background: #fff;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  border-radius:16px;
  padding:40px 44px;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top:20px; right:20px;
  background: none; border: none;
  font-size:22px;
  cursor:pointer;
  color:#666;
  transition:0.2s;
}
.modal-close:hover {
  color:black;
}

.modal-title {
  font-size:26px;
  font-weight:900;
  margin-bottom:28px;
  line-height:1.3;
  color:#111827;
}

.modal-content {
  font-size:16px;
  line-height:2.1;
  color:#374151;
}
.modal-content p {
  margin-bottom:20px;
}
.modal-content img {
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:10px 0 24px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

footer {
  background:var(--card);
  padding:50px 5%;
  text-align:center;
  color:var(--gray);
  border-top:1px solid var(--border);
  margin-top:40px;
}

@media (max-width:768px) {
  .nav-pc { display:none; }
  .menu-toggle { display:block; }
  .slider { height:420px; }
  .slide h2 { font-size:32px; }
  .section-title { font-size:28px; }
  .section-content { padding:32px 24px; }
  .modal-box { padding:30px 24px; }
}