:root {
  --ink:#111827;
  --muted:#76808e;
  --line:#e7e9ee;
  --soft:#f3f4f6;
  --soft-2:#eef0f3;
  --brand:#5564ff;
  --dark:#111827;
  --max:1120px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--ink);
  background:#fff
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
.container {
  width:min(var(--max),calc(100% - 40px));
  margin:auto
}
.site-header {
  height:72px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px)
}
.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.logo img {
  width:120px;
  height:auto
}
.nav {
  display:flex;
  align-items:center;
  gap:25px;
  color:#67717f;
  font-size:14px
}
.nav a:hover,.nav a.active {
  color:var(--ink)
}
.nav .trial {
  background:var(--ink);
  color:#fff;
  padding:11px 17px;
  border-radius:11px
}
.globe-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color:#737b87;
  flex:0 0 22px
}
.globe-icon svg {
  display:block;
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.lang-select {
  border:1px solid #d9dde3;
  border-radius:6px;
  padding:7px 9px;
  background:#fff;
  color:#66707b;
  font:inherit
}
.menu-toggle {
  display:none;
  border:0;
  background:transparent;
  font-size:24px;
  color:var(--ink)
}
.hero {
  padding:105px 0 115px
}
.hero-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center
}
.hero h1 {
  font-size:58px;
  line-height:1.1;
  letter-spacing:-2px;
  margin:0 0 18px
}
.hero p {
  font-size:17px;
  color:var(--muted);
  margin:0 0 27px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d9dde4;
  border-radius:10px;
  padding:12px 21px;
  font-weight:600;
  transition:.2s ease
}
.btn:hover {
  transform:translateY(-2px)
}
.btn.primary {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.btn.secondary {
  background:#fff;
  color:var(--ink)
}
.section {
  padding:92px 0
}
.soft {
  background:#fff
}
.dark {
  background:var(--dark);
  color:#fff
}
.dark p {
  color:#a9b1bf
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:78px;
  align-items:center
}
.split.reverse .visual {
  order:2
}
.section h2 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1px;
  margin:0 0 18px
}
.section p {
  color:var(--muted);
  line-height:1.75;
  margin:0
}
.checks {
  display:grid;
  gap:11px;
  margin-top:22px;
  color:#697482
}
.checks div:before {
  content:'✓';
  color:#36c98a;
  margin-right:10px
}
.visual img {
  width:100%;
  border-radius:18px
}
.panel {
  background:var(--soft);
  border:1px solid #e1e4e9;
  border-radius:16px;
  padding:28px 31px
}
.dark .panel {
  background:#191f31;
  border-color:#232b40
}
.center {
  text-align:center
}
.section-title {
  font-size:34px;
  text-align:center;
  margin:0 0 11px
}
.nodes {
  max-width:900px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  background:#171e31;
  border-radius:13px;
  padding:15px
}
.node {
  background:#232a3e;
  border-radius:8px;
  padding:14px 5px;
  text-align:center;
  font-size:13px
}
.node small {
  display:block;
  color:#8d96a8;
  font-size:11px;
  margin-top:5px
}
.lang-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}
.pill {
  background:#f1f2f5;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:#66707d
}
.pricing-preview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center
}
.cta {
  padding:70px 0;
  text-align:center
}
.cta h2 {
  margin-bottom:20px
}
.footer {
  background:#f2f3f5;
  border-top:1px solid var(--line);
  padding:45px 0 25px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:30px;
  border-bottom:1px solid #dfe2e7
}
.footer-nav {
  display:flex;
  gap:26px;
  color:#737c89;
  font-size:14px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:21px;
  color:#8b939f;
  font-size:12px
}
.floating {
  position:fixed;
  right:18px;
  bottom:18px;
  display:grid;
  gap:10px;
  z-index:40
}
.float-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
  padding:11px 13px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(17,24,39,.12);
  font-size:12px
}
.float-icon {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#56a9df;
  color:#fff;
  font-size:16px
}
.float-card small {
  color:#8b939f
}
.page-hero {
  padding:76px 0 38px
}
.page-hero h1 {
  font-size:46px;
  line-height:1.2;
  margin:0 0 10px
}
.page-hero p {
  color:var(--muted);
  margin:0
}
.feature-top {
  margin-bottom:48px
}
.feature-top h3,.feature-row h3 {
  font-size:20px;
  margin:0 0 15px
}
.feature-list {
  display:grid;
  gap:13px;
  color:#687484
}
.feature-list div:before {
  content:'✓';
  margin-right:10px
}
.feature-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin:48px 0 82px
}
.feature-row:nth-of-type(odd) .feature-img {
  order:2
}
.feature-img img {
  border-radius:18px
}
.developer-box {
  margin:54px 0 100px
}
.about-hero {
  padding:105px 0 130px
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:75px
}
.about-grid h1 {
  font-size:56px;
  margin:0 0 26px
}
.about-grid p {
  font-size:21px;
  line-height:1.65;
  color:var(--muted)
}
.about-grid img {
  width:min(470px,100%);
  margin:auto
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:21px;
  margin-top:52px
}
.price-card {
  position:relative;
  background:var(--soft);
  border:1px solid #dfe3e8;
  border-radius:16px;
  padding:29px 27px
}
.price-card.popular {
  box-shadow:0 10px 24px rgba(17,24,39,.1)
}
.badge {
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px
}
.price-card h3 {
  font-size:20px;
  margin:0
}
.price {
  font-size:44px;
  font-weight:800;
  margin:10px 0 22px
}
.price small {
  font-size:14px;
  color:#747d89;
  font-weight:400
}
.price-list {
  display:grid;
  gap:13px;
  min-height:310px;
  color:#677282
}
.price-list div:before {
  content:'✓';
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#6674ff;
  color:#fff;
  font-size:10px;
  margin-right:8px
}
.price-btn {
  display:block;
  text-align:center;
  padding:13px;
  border-radius:9px;
  background:#e4e7eb
}
.popular .price-btn {
  background:var(--ink);
  color:#fff
}
.how-pay {
  margin:55px 0 63px;
  text-align:center
}
.steps {
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:25px;
  color:#6f7884
}
.steps span {
  display:inline-flex;
  align-items:center;
  gap:9px
}
.steps i {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-style:normal;
  font-size:12px;
  display:grid;
  place-items:center
}
.faq {
  max-width:820px;
  margin:0 auto 110px
}
.faq h2 {
  text-align:center;
  margin-bottom:35px
}
.faq details {
  border-bottom:1px solid #e4e7ec;
  padding:17px 0
}
.faq summary {
  cursor:pointer;
  font-weight:500
}
.faq p {
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.7
}
.docs {
  padding-bottom:100px
}
.doc-group {
  margin-bottom:17px
}
.doc-group h3 {
  font-size:18px;
  margin:0 0 5px
}
.doc-group p {
  margin:0 0 15px;
  color:#7a838f;
  font-size:13px
}
.doc-link {
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  color:#65707d;
  font-size:14px
}
.legal {
  max-width:820px;
  margin:auto;
  padding:76px 0 100px
}
.legal h1 {
  font-size:42px;
  margin:0 0 6px
}
.legal .updated {
  color:#7e8793;
  margin-bottom:30px
}
.legal h2 {
  font-size:20px;
  margin:27px 0 10px
}
.legal p,.legal li {
  color:#687382;
  line-height:1.8
}
.legal ul {
  padding-left:21px
}
.news-section {
  padding:90px 0;
  background:#fff
}
.news {
  max-width:900px
}
.news-title {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1px;
  text-align:center;
  margin:0 0 14px
}
.news-desc {
  max-width:760px;
  margin:0 auto 38px;
  color:var(--muted);
  line-height:1.75;
  text-align:center
}
.news-list {
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid #e1e4e9;
  border-radius:16px;
  background:var(--soft);
  overflow:hidden
}
.news-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:66px;
  padding:17px 25px;
  border-bottom:1px solid #e1e4e9
}
.news-item:last-child {
  border-bottom:0
}
.news-link {
  min-width:0;
  font-weight:600;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .2s ease
}
.news-link:hover {
  color:var(--brand)
}
.news-time {
  flex:0 0 auto;
  color:#9098a4;
  font-size:13px
}
.news-more {
  text-align:center;
  margin-top:28px
}
.news-more a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border:1px solid #d9dde4;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-weight:600;
  transition:.2s ease
}
.news-more a:hover {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  transform:translateY(-2px)
}
.blog-hero {
  padding:82px 0 62px;
  text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,#f8f9fb 100%)
}
.blog-kicker {
  display:inline-block;
  margin-bottom:12px;
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px
}
.blog-hero h1 {
  margin:0 0 14px;
  font-size:48px;
  letter-spacing:-1.5px
}
.blog-hero p {
  margin:0;
  color:var(--muted);
  font-size:16px
}
.site-main {
  padding:72px 0 105px
}
.news-wrap {
  max-width:1040px;
  margin:auto
}
.clearfix:after {
  content:"";
  display:table;
  clear:both
}
.features {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:32px;
  align-items:start
}
.features .left {
  position:sticky;
  top:100px
}
.features .left ul,.newsc>ul {
  list-style:none;
  margin:0;
  padding:0
}
.features .left a {
  display:block;
  padding:14px 16px;
  border:1px solid #e0e4ea;
  border-radius:11px;
  background:var(--soft);
  font-weight:700
}
.features .left a.active {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.features .right {
  min-width:0
}
.newsc {
  padding:30px;
  border:1px solid #e1e4e9;
  border-radius:16px;
  background:#fff
}
.newsc>h2 {
  margin:0 0 22px;
  font-size:28px;
  letter-spacing:-.5px
}
.newsc>ul>li {
  display:flex;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.newsc>ul>li:first-child {
  padding-top:0
}
.newsc>ul>li:last-child {
  padding-bottom:0;
  border-bottom:0
}
.post-thumb {
  flex:0 0 220px;
  height:138px;
  overflow:hidden;
  border-radius:10px;
  background:var(--soft)
}
.post-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease
}
.post-thumb:hover img {
  transform:scale(1.04)
}
.post-summary {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column
}
.post-summary h3 {
  margin:2px 0 10px;
  font-size:20px;
  line-height:1.4
}
.post-summary h3 a:hover {
  color:var(--brand)
}
.post-summary p {
  margin:0;
  color:var(--muted);
  line-height:1.75
}
.post-summary p a {
  margin-left:5px;
  color:var(--brand);
  font-weight:600
}
.post-meta {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:auto;
  padding-top:16px;
  color:#999;
  font-size:13px
}
.pages {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:32px
}
.pages a,.pages span {
  display:inline-flex;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff
}
.pages .active,.pages a:hover {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.blog-detail {
  padding:36px 40px;
  border:1px solid #e1e4e9;
  border-radius:16px;
  background:#fff
}
.blog-detail .title {
  margin:0 0 12px;
  font-size:36px;
  line-height:1.3;
  letter-spacing:-.8px
}
.post-time {
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  color:#929aa5;
  font-size:13px
}
.blog-detail .content {
  padding:25px 0;
  color:#566170;
  line-height:1.9
}
.blog-detail .content img {
  height:auto;
  margin:24px auto;
  border-radius:12px
}
.article-nav {
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.article-nav p {
  margin:8px 0;
  color:#67717f
}
.article-nav a:hover {
  color:var(--brand)
}
.blog-detail-back {
  display:inline-flex;
  margin-top:24px;
  padding:11px 18px;
  border:1px solid #d9dde4;
  border-radius:9px;
  font-weight:600
}
.blog-detail-back:hover {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
@media(max-width:850px) {
  .container {
  width:min(var(--max),calc(100% - 28px))
}
.site-header {
  height:64px
}
.menu-toggle {
  display:block
}
.nav {
  position:absolute;
  left:14px;
  right:14px;
  top:60px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 14px 30px rgba(17,24,39,.1);
  padding:14px;
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:10px
}
.nav.open {
  display:flex
}
.nav a,.nav span,.lang-select {
  text-align:center
}
.hero {
  padding:68px 0 78px
}
.hero-grid,.split,.pricing-preview,.feature-row,.about-grid {
  grid-template-columns:1fr;
  gap:35px
}
.hero h1,.about-grid h1 {
  font-size:42px
}
.section {
  padding:65px 0
}
.split.reverse .visual,.feature-row:nth-of-type(odd) .feature-img {
  order:0
}
.nodes {
  grid-template-columns:repeat(2,1fr)
}
.pricing-grid {
  grid-template-columns:1fr
}
.footer-top,.footer-bottom {
  flex-direction:column;
  gap:18px
}
.floating {
  display:none
}
.page-hero {
  padding:54px 0 25px
}
.page-hero h1 {
  font-size:38px
}
.legal {
  padding:52px 0 75px
}
.news-section {
  padding:65px 0
}
.news-title {
  font-size:32px
}
.news-item {
  align-items:flex-start;
  flex-direction:column;
  gap:7px;
  padding:16px 18px
}
.news-link {
  width:100%
}
.blog-hero {
  padding:58px 0 45px
}
.blog-hero h1 {
  font-size:38px
}
.site-main {
  padding:48px 0 75px
}
.features {
  grid-template-columns:1fr;
  gap:18px
}
.features .left {
  position:static
}
.features .left a {
  text-align:center
}
.newsc,.blog-detail {
  padding:22px
}
.newsc>ul>li {
  flex-direction:column;
  gap:17px
}
.post-thumb {
  flex:none;
  width:100%;
  height:auto;
  aspect-ratio:16/9
}
.blog-detail .title {
  font-size:30px
}

}