:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#4b5563;
  --line:#e5e7eb;

  /* brand */
  --green:#146662;
  --orange:#F87002;

  --max:1100px;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px;}
.small{font-size:14px; color:var(--muted);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  text-decoration:none; border:1px solid var(--text);
  gap:8px;
}
.btn.primary{background:var(--text); color:#fff; border-color:var(--text);}
.btn.ghost{background:#fff;}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); font-size:13px;
}

.header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:#fff; z-index:10;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.brand img{height:32px; width:auto; display:block;}
.nav{
  display:flex; align-items:center; gap:16px;
}
.nav a{ text-decoration:none; color:#111; font-size:15px; }
.nav a:hover{ color:var(--green); }

.right{
  display:flex; align-items:center; gap:12px;
}
.lang{display:flex; gap:8px; align-items:center; font-size:14px;}
.lang a{ text-decoration:none; color:#111; }
.lang a.active{ color:var(--green); font-weight:600; }

.dropdown{position:relative;}
.dropdown > button{
  border:0; background:transparent; cursor:pointer;
  font-size:15px; padding:8px 6px; display:flex; gap:6px; align-items:center;
}
.menu{
  display:none;
  position:absolute; top:42px; left:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.menu a{
  display:block; padding:10px 10px;
  border-radius:10px; text-decoration:none;
}
.menu a:hover{ background:#f7f7f7; color:var(--green); }
.dropdown.open .menu{display:block;}

.hero{
  padding:56px 0 18px;
}
.hero h1{ margin:0 0 10px; font-size:44px; letter-spacing:-0.5px; }
.hero p{ margin:0; max-width:760px; line-height:1.75; color:#2b2b2b; }
.hero .accent{ color:var(--green); }
.hr{border:0; border-top:1px solid var(--line); margin:24px 0;}

.grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 620px){
  .grid{grid-template-columns:1fr;}
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  text-decoration:none;
  background:#fff;
}
.card:hover{ border-color:#cfd6dd; }
.card h3{ margin:0 0 8px; font-size:18px; }
.card p{ margin:0; color:var(--muted); line-height:1.65; }
.card .meta{ margin-top:12px; display:flex; align-items:center; gap:8px; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--orange);
}

.section{ padding:18px 0 56px; }
.section h2{ margin:0 0 10px; font-size:22px; }
.list{ margin:0; padding:0; list-style:none; }
.list li{
  padding:14px 0; border-bottom:1px solid var(--line);
}
.footer{
  border-top:1px solid var(--line);
  padding:24px 0; color:var(--muted);
  font-size:14px;
}