:root {
  --green:#0a7b4c;
  --green2:#54a164;
  --blue:#115d75;
  --text:#17252a;
  --muted:#66737b;
  --bg:#f5f8f6;
  --line:#dfe8e2;
  --card:#ffffff;
  --shadow:0 14px 35px rgba(16,45,38,.12)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7
}

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

.container {
  width:min(1160px,92vw);
  margin:auto
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}

.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--green)
}

.brand img {
  height:45px
}

.main-nav {
  display:flex;
  gap:6px
}

.main-nav a {
  padding:10px 14px;
  border-radius:999px;
  color:#314044
}

.main-nav a:hover,.main-nav a.active {
  background:var(--green);
  color:#fff
}

.menu-toggle {
  display:none;
  border:0;
  background:var(--green);
  color:#fff;
  border-radius:10px;
  font-size:22px;
  padding:6px 12px
}

.hero {
  background:linear-gradient(125deg,rgba(10,123,76,.08),rgba(17,93,117,.1)),radial-gradient(circle at 82% 20%,rgba(84,161,100,.28),transparent 35%);
  padding:92px 0
}

.hero-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:45px;
  align-items:center
}

.eyebrow {
  color:var(--green);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase
}

.hero h1,.sub-hero h1 {
  font-size:clamp(34px,6vw,68px);
  line-height:1.08;
  margin:10px 0
}

.lead {
  font-size:20px;
  color:#44535a
}

.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:34px
}

.stats div {
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow)
}

.stats strong {
  display:block;
  font-size:26px;
  color:var(--green)
}

.stats span {
  font-size:13px;
  color:var(--muted)
}

.hero-visual,.image-card {
  min-height:320px;
  border-radius:34px;
  background:linear-gradient(135deg,var(--green),var(--blue));
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:32px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden
}

.hero-visual:before,.image-card:before {
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:26px
}

.section {
  padding:78px 0
}

.section.alt {
  background:var(--bg)
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  align-items:center
}

h2 {
  font-size:36px;
  margin:4px 0 20px
}

h3 {
  margin-top:20px
}

.btn {
  display:inline-block;
  margin-top:16px;
  background:var(--green);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:12px 22px;
  font-weight:800;
  cursor:pointer
}

.btn.ghost {
  background:#fff;
  color:var(--green);
  border:1px solid var(--green)
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

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

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:0 8px 25px rgba(20,50,42,.07);
  transition:.2s
}

.card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow)
}

.tag {
  color:var(--green);
  font-weight:800;
  font-size:13px
}

.more {
  color:var(--green);
  font-weight:800
}

.news-list {
  display:grid;
  gap:12px;
  margin:20px 0
}

.news-item {
  display:grid;
  grid-template-columns:130px 1fr 80px;
  gap:20px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px
}

.news-item:hover {
  border-color:var(--green);
  box-shadow:0 7px 18px rgba(10,123,76,.1)
}

.news-item time {
  color:var(--green);
  font-weight:800
}

.news-item em {
  font-style:normal;
  color:var(--muted);
  font-size:14px
}

.names {
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  color:#3c4a50;
  line-height:2
}

.partners {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.partners a {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  color:var(--green);
  text-align:center
}

.sub-hero {
  padding:70px 0;
  background:linear-gradient(135deg,rgba(10,123,76,.1),rgba(17,93,117,.08));
  border-bottom:1px solid var(--line)
}

.prose,.article {
  max-width:860px
}

.prose p,.article p,.prose li {
  color:#35454b
}

.note {
  background:#f1fbf6;
  border-left:4px solid var(--green);
  padding:14px 18px;
  border-radius:12px;
  color:#355
}

.toolbar input {
  width:100%;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:16px
}

.meta-box {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding:0;
  margin:0 0 28px;
  list-style:none
}

.meta-box li {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  font-weight:700
}

.project-detail .image-card {
  margin-bottom:28px
}

.timeline {
  border-left:3px solid var(--green);
  padding-left:22px
}

.timeline article {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  margin:16px 0
}

.timeline time {
  color:var(--green);
  font-weight:800
}

.article .date {
  color:var(--muted);
  font-weight:700
}

.article .image-card {
  margin:26px 0
}

.back {
  color:var(--green);
  font-weight:800
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px
}

.contact-form {
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow)
}

.contact-form label {
  display:block;
  margin-bottom:16px;
  font-weight:700
}

.contact-form input,.contact-form textarea {
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  margin-top:6px;
  font:inherit
}

.contact-form textarea {
  min-height:130px
}

.site-footer {
  background:#102c28;
  color:#d8e8df;
  padding:56px 0 20px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.1fr 1.3fr 1fr 1fr;
  gap:28px
}

.footer-logo {
  height:54px;
  filter:brightness(1.5)
}

.site-footer h4 {
  color:#fff
}

.site-footer a {
  color:#fff
}

.copyright {
  text-align:center;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px;
  margin-top:30px;
  color:#b8c9c1
}

.to-top {
  position:fixed;
  right:22px;
  bottom:22px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  background:var(--green);
  color:#fff;
  border:0;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:20px;
  box-shadow:var(--shadow)
}

.to-top.show {
  opacity:1;
  pointer-events:auto
}

.wide {
  min-height:260px
}

@media (max-width:900px) {
  .menu-toggle {
    display:block
  }

  .main-nav {
    position:absolute;
    left:4vw;
    right:4vw;
    top:76px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    display:none;
    flex-direction:column;
    box-shadow:var(--shadow)
  }

  .main-nav.open {
    display:flex
  }

  .hero-grid,.two-col,.contact-grid {
    grid-template-columns:1fr
  }

  .stats,.cards,.cards.small,.partners,.meta-box,.footer-grid {
    grid-template-columns:1fr
  }

  .news-item {
    grid-template-columns:1fr
  }

  .hero {
    padding:60px 0
  }

  .section {
    padding:54px 0
  }

}

/* 参与者姓名滚动特效 */
.participants-section {
  background:radial-gradient(circle at 10% 10%,rgba(84,161,100,.14),transparent 34%),radial-gradient(circle at 90% 30%,rgba(17,93,117,.12),transparent 36%),#fff
}

.participant-panel {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  padding:28px 0 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,248,246,.82));
  box-shadow:var(--shadow)
}

.participant-panel:before {
  content:"";
  position:absolute;
  inset:-90px auto auto -90px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(10,123,76,.1);
  filter:blur(2px)
}

.participant-intro {
  position:relative;
  margin:0 28px 22px;
  color:var(--muted)
}

.names-marquee {
  --scroll-duration:58s;
  position:relative;
  overflow:hidden;
  margin:12px 0;
  padding:4px 0
}

.names-marquee:before,.names-marquee:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:min(120px,18vw);
  z-index:2;
  pointer-events:none
}

.names-marquee:before {
  left:0;
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,0))
}

.names-marquee:after {
  right:0;
  background:linear-gradient(270deg,rgba(255,255,255,.98),rgba(255,255,255,0))
}

.names-track {
  display:flex;
  width:max-content;
  gap:12px;
  animation:names-scroll var(--scroll-duration) linear infinite;
  will-change:transform
}

.names-marquee--reverse .names-track {
  animation-name:names-scroll-reverse;
  animation-duration:66s
}

.names-marquee--slow .names-track {
  animation-duration:74s
}

.names-marquee:hover .names-track {
  animation-play-state:paused
}

.names-group {
  display:flex;
  flex-shrink:0;
  gap:12px;
  padding-right:12px
}

.name-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(10,123,76,.18);
  box-shadow:0 7px 18px rgba(10,123,76,.08);
  color:#244047;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s
}

.name-chip:hover {
  transform:translateY(-3px) scale(1.04);
  background:var(--green);
  color:#fff;
  box-shadow:0 12px 28px rgba(10,123,76,.22)
}

.participant-count {
  position:relative;
  margin:20px 28px 0;
  color:var(--muted);
  font-size:14px
}

.participant-count strong {
  color:var(--green);
  font-size:18px
}

@keyframes names-scroll {
  from {
    transform:translateX(0)
  }

  to {
    transform:translateX(-50%)
  }

}

@keyframes names-scroll-reverse {
  from {
    transform:translateX(-50%)
  }

  to {
    transform:translateX(0)
  }

}

@media (max-width:900px) {
  .participant-panel {
    border-radius:22px
  }

  .participant-intro,.participant-count {
    margin-left:18px;
    margin-right:18px
  }

  .names-track,.names-group {
    gap:8px
  }

  .name-chip {
    min-width:58px;
    padding:8px 12px;
    font-size:14px
  }

  .names-marquee:before,.names-marquee:after {
    width:52px
  }

}

/* 可访问性与小屏优化 */
.is-disabled-link  {
  cursor: not-allowed;
  opacity: .72;

}

.main-nav a:focus-visible, .btn:focus-visible, .to-top:focus-visible, .menu-toggle:focus-visible, .name-chip:focus-visible  {
  outline: 3px solid rgba(10, 123, 76, .28);
  outline-offset: 3px;

}

@media (prefers-reduced-motion: reduce)  {
  *, *::before, *::after  {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;

  }

  .names-track  {
    animation-play-state: paused !important;

  }

}

@media print  {
  .site-header, .site-footer, .to-top, .menu-toggle  {
    display: none !important;

  }

  body  {
    color: #000;
    background: #fff;

  }

  .section, .sub-hero  {
    padding: 24px 0;

  }

}